From 8b0d8cef902442cc7302f5dbe9577b00e085abaf Mon Sep 17 00:00:00 2001 From: mshakira Date: Tue, 3 Oct 2023 18:40:42 -0700 Subject: [PATCH] fix(SERVER): handle states when status is unknown (#1154) Signed-off-by: Shakira M Co-authored-by: Shakira M --- ui/src/App.tsx | 4 +- .../common/SummaryPageLayout/index.tsx | 4 +- .../Namespace/partials/PipelineCard/index.tsx | 38 ++++++++++++------- ui/src/components/pages/Pipeline/index.tsx | 4 +- .../partials/PipelineISBStatus/index.tsx | 37 +++++++++--------- .../partials/PipelineStatus/index.tsx | 2 +- ui/src/types/declarations/pipeline.d.ts | 1 + .../fetchWrappers/namespaceSummaryFetch.ts | 14 +++---- ui/src/utils/index.ts | 18 +++++++++ 9 files changed, 76 insertions(+), 46 deletions(-) diff --git a/ui/src/App.tsx b/ui/src/App.tsx index e037eda398..446ead89ea 100644 --- 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 index bfdc5fd58c..2a6b69a924 100644 --- 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 index bae8b4954c..295e55ec50 100644 --- 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) => { 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 ( <> {statusData?.pipeline?.status?.phase} {statusData?.status} @@ -168,7 +179,7 @@ export function PipelineCard({ paddingLeft: "1rem", }} > - {StatusString[statusData?.pipeline?.status?.phase]} + {StatusString[pipelineStatus]} {StatusString[statusData?.status]} @@ -203,12 +214,11 @@ export function PipelineCard({ }} > {isbData?.name} - {isbData?.isbService?.status?.type} + {isbType} - { - isbData?.isbService?.spec[isbData?.isbService?.status?.type] - .replicas - } + {isbType && isbData?.isbService?.spec[isbType] + ? isbData?.isbService?.spec[isbType].replicas + : UNKNOWN} @@ -242,13 +252,13 @@ export function PipelineCard({ }} > {isbData?.isbService?.status?.phase} {isbData?.status} @@ -260,7 +270,7 @@ export function PipelineCard({ paddingLeft: "1rem", }} > - {ISBStatusString[isbData?.isbService?.status?.phase]} + {ISBStatusString[isbStatus]} {ISBStatusString[isbData?.status]} diff --git a/ui/src/components/pages/Pipeline/index.tsx b/ui/src/components/pages/Pipeline/index.tsx index 2fad013026..a62a7470ab 100644 --- 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: ( diff --git a/ui/src/components/pages/Pipeline/partials/PipelineISBStatus/index.tsx b/ui/src/components/pages/Pipeline/partials/PipelineISBStatus/index.tsx index c3722b3494..2feff768ff 100644 --- 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 ( {IconsStatusMap[isbData?.isbService?.status?.phase]} {isbData?.status} @@ -46,9 +53,11 @@ export function PipelineISBStatus({ isbData }) { }} > - {ISBStatusString[isbData?.isbService?.status?.phase]} + {ISBStatusString[isbStatus]} + + + {ISBStatusString[isbData?.status]} - {ISBStatusString[isbData?.status]} @@ -86,18 +95,14 @@ export function PipelineISBStatus({ isbData }) { {isbData?.name}
- {isbData?.isbService?.status?.type} - {/**/} + {isbType}
@@ -105,11 +110,9 @@ export function PipelineISBStatus({ isbData }) {
Size: - { - isbData?.isbService?.spec[ - isbData?.isbService?.status?.type - ]?.replicas - } + {isbType && isbData?.isbService?.spec[isbType] + ? isbData?.isbService?.spec[isbType].replicas + : UNKNOWN}
diff --git a/ui/src/components/pages/Pipeline/partials/PipelineStatus/index.tsx b/ui/src/components/pages/Pipeline/partials/PipelineStatus/index.tsx index 2bad988b93..e83d31a570 100644 --- 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 index 4d976912b8..9f2b252141 100644 --- 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 index b91f5a8e65..0ec9a1e92c 100644 --- 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 index a7285f9c76..bdcb96943b 100644 --- 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; +};