fix(SERVER): handle states when status is unknown (#1154)

Signed-off-by: Shakira M <[email protected]> Co-authored-by: Shakira M <[email protected]>
numaproj · Oct 4, 2023 · 8b0d8ce · 8b0d8ce
1 parent 3d31a4b
commit 8b0d8ce
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 46 deletions.
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -57,9 +57,9 @@ function App() {
       return;
     }
     const resizeObserver = new ResizeObserver(() => {
-      setPageWidth(pageRef.current.offsetWidth);
+      setPageWidth(pageRef?.current?.offsetWidth);
     });
-    resizeObserver.observe(pageRef.current);
+    resizeObserver.observe(pageRef?.current);
     return function cleanup() {
       resizeObserver.disconnect();
     };

diff --git a/ui/src/components/common/SummaryPageLayout/index.tsx b/ui/src/components/common/SummaryPageLayout/index.tsx
@@ -200,9 +200,9 @@ export function SummaryPageLayout({
       return;
     }
     const resizeObserver = new ResizeObserver(() => {
-      setSummaryHeight(sumaryRef.current.offsetHeight);
+      setSummaryHeight(sumaryRef?.current?.offsetHeight);
     });
-    resizeObserver.observe(sumaryRef.current);
+    resizeObserver.observe(sumaryRef?.current);
     return function cleanup() {
       resizeObserver.disconnect();
     };

diff --git a/ui/src/components/pages/Namespace/partials/PipelineCard/index.tsx b/ui/src/components/pages/Namespace/partials/PipelineCard/index.tsx
@@ -10,7 +10,13 @@ import {
   Select,
   SelectChangeEvent,
 } from "@mui/material";
-import {IconsStatusMap, ISBStatusString, StatusString} from "../../../../../utils";
+import {
+  GetISBType,
+  IconsStatusMap,
+  ISBStatusString,
+  StatusString,
+  UNKNOWN,
+} from "../../../../../utils";
 import { AppContextProps } from "../../../../../types/declarations/app";
 import { AppContext } from "../../../../../App";
 import { SidebarType } from "../../../../common/SlidingSidebar";
@@ -51,6 +57,11 @@ export function PipelineCard({
   const handleDeleteChange = useCallback((event: SelectChangeEvent<string>) => {
     setDeleteOption(event.target.value);
   }, []);
+
+  const isbType = GetISBType(isbData?.isbService?.spec) || UNKNOWN;
+  const isbStatus = isbData?.isbService?.status?.phase || UNKNOWN;
+  const pipelineStatus = statusData?.pipeline?.status?.phase || UNKNOWN;
+
   return (
     <>
       <Paper
@@ -150,13 +161,13 @@ export function PipelineCard({
               }}
             >
               <img
-                src={IconsStatusMap[statusData?.pipeline?.status?.phase]}
-                alt={statusData?.pipeline?.status?.phase}
+                src={IconsStatusMap[pipelineStatus]}
+                alt="Status"
                 className={"pipeline-logo"}
               />
               <img
                 src={IconsStatusMap[statusData?.status]}
-                alt={statusData?.status}
+                alt="Health"
                 className={"pipeline-logo"}
               />
             </Box>
@@ -168,7 +179,7 @@ export function PipelineCard({
                 paddingLeft: "1rem",
               }}
             >
-              <span>{StatusString[statusData?.pipeline?.status?.phase]}</span>
+              <span>{StatusString[pipelineStatus]}</span>
               <span>{StatusString[statusData?.status]}</span>
             </Box>
           </Grid>
@@ -203,12 +214,11 @@ export function PipelineCard({
               }}
             >
               <span>{isbData?.name}</span>
-              <span>{isbData?.isbService?.status?.type}</span>
+              <span>{isbType}</span>
               <span>
-                {
-                  isbData?.isbService?.spec[isbData?.isbService?.status?.type]
-                    .replicas
-                }
+                {isbType && isbData?.isbService?.spec[isbType]
+                  ? isbData?.isbService?.spec[isbType].replicas
+                  : UNKNOWN}
               </span>
             </Box>
           </Grid>
@@ -242,13 +252,13 @@ export function PipelineCard({
               }}
             >
               <img
-                src={IconsStatusMap[isbData?.isbService?.status?.phase]}
-                alt={isbData?.isbService?.status?.phase}
+                src={IconsStatusMap[isbStatus]}
+                alt="Status"
                 className={"pipeline-logo"}
               />
               <img
                 src={IconsStatusMap[isbData?.status]}
-                alt={isbData?.status}
+                alt="Health"
                 className={"pipeline-logo"}
               />
             </Box>
@@ -260,7 +270,7 @@ export function PipelineCard({
                 paddingLeft: "1rem",
               }}
             >
-              <span>{ISBStatusString[isbData?.isbService?.status?.phase]}</span>
+              <span>{ISBStatusString[isbStatus]}</span>
               <span>{ISBStatusString[isbData?.status]}</span>
             </Box>
           </Grid>

diff --git a/ui/src/components/pages/Pipeline/index.tsx b/ui/src/components/pages/Pipeline/index.tsx
@@ -16,6 +16,7 @@ import { PipelineISBStatus } from "./partials/PipelineISBStatus";
 import { SidebarType } from "../../common/SlidingSidebar";
 import { AppContextProps } from "../../../types/declarations/app";
 import { AppContext } from "../../../App";
+import { UNKNOWN } from "../../../utils";
 import noError from "../../../images/no-error.svg";
 
 import "./style.css";
@@ -32,6 +33,7 @@ export function Pipeline() {
     }
     const pipelineData = data?.pipelineData;
     const isbData = data?.isbData;
+    const pipelineStatus = pipelineData?.pipeline?.status?.phase || UNKNOWN;
     return [
       // pipeline collection
       {
@@ -41,7 +43,7 @@ export function Pipeline() {
             type: SummarySectionType.CUSTOM,
             customComponent: (
               <PipelineStatus
-                status={pipelineData?.pipeline?.status?.phase}
+                status={pipelineStatus}
                 healthStatus={pipelineData?.status}
                 key={"pipeline-status"}
               />

diff --git a/ui/src/components/pages/Pipeline/partials/PipelineISBStatus/index.tsx b/ui/src/components/pages/Pipeline/partials/PipelineISBStatus/index.tsx
@@ -1,10 +1,17 @@
 import React from "react";
 import Box from "@mui/material/Box";
-import {IconsStatusMap, ISBStatusString} from "../../../../../utils";
+import {
+  GetISBType,
+  IconsStatusMap,
+  ISBStatusString,
+  UNKNOWN,
+} from "../../../../../utils";
 
 import "./style.css";
 
 export function PipelineISBStatus({ isbData }) {
+  const isbType = GetISBType(isbData?.isbService?.spec) || UNKNOWN;
+  const isbStatus = isbData?.isbService?.status?.phase || UNKNOWN;
   return (
     <Box
       sx={{
@@ -28,13 +35,13 @@ export function PipelineISBStatus({ isbData }) {
           >
             <Box sx={{ display: "flex", flexDirection: "column" }}>
               <img
-                src={IconsStatusMap[isbData?.isbService?.status?.phase]}
-                alt={IconsStatusMap[isbData?.isbService?.status?.phase]}
+                src={IconsStatusMap[isbStatus]}
+                alt="Status"
                 className={"pipeline-logo"}
               />
               <img
                 src={IconsStatusMap[isbData?.status]}
-                alt={isbData?.status}
+                alt="Health"
                 className={"pipeline-logo"}
               />
             </Box>
@@ -46,9 +53,11 @@ export function PipelineISBStatus({ isbData }) {
               }}
             >
               <span className="pipeline-logo-text">
-                {ISBStatusString[isbData?.isbService?.status?.phase]}
+                {ISBStatusString[isbStatus]}
+              </span>
+              <span className="pipeline-logo-text">
+                {ISBStatusString[isbData?.status]}
               </span>
-              <span className="pipeline-logo-text">{ISBStatusString[isbData?.status]}</span>
             </Box>
           </Box>
         </Box>
@@ -86,30 +95,24 @@ export function PipelineISBStatus({ isbData }) {
                 <span>{isbData?.name}</span>
               </div>
               <div className="isb-status-text">
-                <span>{isbData?.isbService?.status?.type}</span>
-                {/*<Chip*/}
-                {/*  label={isbData?.isbService?.status?.type}*/}
-                {/*  sx={{ height: "20px" }}*/}
-                {/*/>*/}
+                <span>{isbType}</span>
               </div>
             </Box>
             <Box
               sx={{
                 display: "flex",
                 flexDirection: "column",
-                marginLeft: "2rem"
+                marginLeft: "2rem",
               }}
             >
               <div className="pipeline-summary-text">
                 <span className="pipeline-summary-subtitle">
                   <div className="pipeline-summary-text">
                     <span className="pipeline-summary-subtitle">Size: </span>
                     <span>
-                      {
-                        isbData?.isbService?.spec[
-                          isbData?.isbService?.status?.type
-                        ]?.replicas
-                      }
+                      {isbType && isbData?.isbService?.spec[isbType]
+                        ? isbData?.isbService?.spec[isbType].replicas
+                        : UNKNOWN}
                     </span>
                   </div>
                 </span>

diff --git a/ui/src/components/pages/Pipeline/partials/PipelineStatus/index.tsx b/ui/src/components/pages/Pipeline/partials/PipelineStatus/index.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import Box from "@mui/material/Box";
-import {IconsStatusMap, StatusString} from "../../../../../utils";
+import { IconsStatusMap, StatusString } from "../../../../../utils";
 
 import "./style.css";
 

diff --git a/ui/src/types/declarations/pipeline.d.ts b/ui/src/types/declarations/pipeline.d.ts
@@ -87,6 +87,7 @@ export interface IsbServiceStatus {
 
 export interface IsbServiceSpec {
   jetstream?: Jetstream;
+  redis?: Redis;
 }
 
 export interface PipelineSummary {

diff --git a/ui/src/utils/fetchWrappers/namespaceSummaryFetch.ts b/ui/src/utils/fetchWrappers/namespaceSummaryFetch.ts
@@ -116,11 +116,7 @@ export const useNamespaceSummaryFetch = ({
     data: pipelineData,
     loading: pipelineLoading,
     error: pipelineError,
-  } = useFetch(
-    `/api/v1/namespaces/${namespace}/pipelines`,
-    undefined,
-    options
-  );
+  } = useFetch(`/api/v1/namespaces/${namespace}/pipelines`, undefined, options);
   const {
     data: isbData,
     loading: isbLoading,
@@ -169,11 +165,11 @@ export const useNamespaceSummaryFetch = ({
       return;
     }
     if (pipelineData && isbData) {
-      const pipeLineMap = pipelineData.data.reduce((map: any, obj: any) => {
+      const pipeLineMap = pipelineData?.data?.reduce((map: any, obj: any) => {
         map[obj.name] = obj;
         return map;
       }, {});
-      const isbMap = isbData.data.reduce((map: any, obj: any) => {
+      const isbMap = isbData?.data?.reduce((map: any, obj: any) => {
         map[obj.name] = obj;
         return map;
       }, {});
@@ -183,8 +179,8 @@ export const useNamespaceSummaryFetch = ({
       //   MOCK_ISB_DATA
       // );
       const nsSummary = rawDataToNamespaceSummary(
-        pipelineData.data,
-        isbData.data
+        pipelineData?.data,
+        isbData?.data
       );
       setResults({
         data: nsSummary,

diff --git a/ui/src/utils/index.ts b/ui/src/utils/index.ts
@@ -5,6 +5,7 @@ import heartFill from "../../src/images/heart-fill.png";
 import warning from "../../src/images/warning-circle.png";
 import critical from "../../src/images/critical.png";
 import moment from "moment";
+import { IsbServiceSpec } from "../types/declarations/pipeline";
 
 // global constants
 export const RUNNING = "Running";
@@ -19,6 +20,11 @@ export const PENDING = "Pending";
 export const PAUSING = "Pausing";
 export const PAUSED = "Paused";
 export const DELETING = "Deleting";
+export const UNKNOWN = "Unknown";
+
+// ISB types
+export const JETSTREAM = "jetstream";
+export const REDIS = "redis";
 
 export function getBaseHref(): string {
   if (window.__RUNTIME_CONFIG__?.BASE_HREF) {
@@ -179,6 +185,7 @@ export const IconsStatusMap = {
   [HEALTHY]: heartFill,
   [WARNING]: warning,
   [CRITICAL]: critical,
+  [UNKNOWN]: circleDash,
 };
 
 interface StatusStringType {
@@ -198,6 +205,7 @@ export const StatusString: StatusStringType = {
   [HEALTHY]: "Healthy",
   [WARNING]: "Warning",
   [CRITICAL]: "Critical",
+  [UNKNOWN]: "Unknown",
 };
 
 export const ISBStatusString: StatusStringType = {
@@ -207,6 +215,7 @@ export const ISBStatusString: StatusStringType = {
   [HEALTHY]: "Healthy",
   [WARNING]: "Warning",
   [CRITICAL]: "Critical",
+  [UNKNOWN]: "Unknown",
 };
 
 // returns the duration string in the format of 1d 2hr 3min 4sec 5ms
@@ -236,3 +245,12 @@ export const DurationString = (duration: number): string => {
     return `${milliseconds}ms`;
   }
 };
+
+export const GetISBType = (spec: IsbServiceSpec): string | null => {
+  if (spec?.jetstream) {
+    return JETSTREAM;
+  } else if (spec?.redis) {
+    return REDIS;
+  }
+  return null;
+};