From ed3f986e66fa596ac4d1dde8f68fadb6ceb89803 Mon Sep 17 00:00:00 2001 From: Vladyslav Palyvoda Date: Tue, 17 Oct 2023 12:46:57 +0300 Subject: [PATCH] fix: Fix crashes when date is not available, fix edp components query, fix codebase in progress status handling (#66) Jira: EPMDEDP-12703 Related: #66 Change-Id: Ia379cdc910a5331e3a7f8dd96a43dcf362b6368d --- src/k8s/EDPCDPipeline/constants.ts | 2 +- src/k8s/EDPCDPipelineStage/constants.ts | 2 +- src/k8s/EDPCodebase/constants.ts | 2 +- src/k8s/EDPCodebaseBranch/constants.ts | 2 +- .../hooks/useEDPComponentsURLsQuery.ts | 4 +- .../PipelineRunList/hooks/useColumns.tsx | 22 +++++--- src/utils/date/humanize/index.ts | 52 +++++++++++++------ src/widgets/PipelineRunGraph/index.tsx | 17 +++--- 8 files changed, 67 insertions(+), 36 deletions(-) diff --git a/src/k8s/EDPCDPipeline/constants.ts b/src/k8s/EDPCDPipeline/constants.ts index 3e5059ab6..edf07bd8c 100644 --- a/src/k8s/EDPCDPipeline/constants.ts +++ b/src/k8s/EDPCDPipeline/constants.ts @@ -1,6 +1,6 @@ export const EDP_CDPIPELINE_STATUS = { CREATED: 'created', INITIALIZED: 'initialized', - IN_PROGRESS: 'in-progress', + IN_PROGRESS: 'in progress', FAILED: 'failed', } as const; diff --git a/src/k8s/EDPCDPipelineStage/constants.ts b/src/k8s/EDPCDPipelineStage/constants.ts index 56a226263..25052d802 100644 --- a/src/k8s/EDPCDPipelineStage/constants.ts +++ b/src/k8s/EDPCDPipelineStage/constants.ts @@ -1,6 +1,6 @@ export const EDP_CDPIPELINE_STAGE_STATUS = { CREATED: 'created', INITIALIZED: 'initialized', - IN_PROGRESS: 'in-progress', + IN_PROGRESS: 'in progress', FAILED: 'failed', } as const; diff --git a/src/k8s/EDPCodebase/constants.ts b/src/k8s/EDPCodebase/constants.ts index 42808ce3a..d29a25955 100644 --- a/src/k8s/EDPCodebase/constants.ts +++ b/src/k8s/EDPCodebase/constants.ts @@ -1,6 +1,6 @@ export const EDP_CODEBASE_STATUS = { CREATED: 'created', INITIALIZED: 'initialized', - IN_PROGRESS: 'in-progress', + IN_PROGRESS: 'in progress', FAILED: 'failed', } as const; diff --git a/src/k8s/EDPCodebaseBranch/constants.ts b/src/k8s/EDPCodebaseBranch/constants.ts index bb46f39ae..2b285a33a 100644 --- a/src/k8s/EDPCodebaseBranch/constants.ts +++ b/src/k8s/EDPCodebaseBranch/constants.ts @@ -1,6 +1,6 @@ export const EDP_CODEBASE_BRANCH_STATUS = { CREATED: 'created', INITIALIZED: 'initialized', - IN_PROGRESS: 'in-progress', + IN_PROGRESS: 'in progress', FAILED: 'failed', } as const; diff --git a/src/k8s/EDPComponent/hooks/useEDPComponentsURLsQuery.ts b/src/k8s/EDPComponent/hooks/useEDPComponentsURLsQuery.ts index b547f6692..2896203da 100644 --- a/src/k8s/EDPComponent/hooks/useEDPComponentsURLsQuery.ts +++ b/src/k8s/EDPComponent/hooks/useEDPComponentsURLsQuery.ts @@ -1,3 +1,4 @@ +import { getDefaultNamespace } from '../../../utils/getDefaultNamespace'; import { useEDPComponentsQuery } from './useEDPComponentsQuery'; type EDPComponentName = string; @@ -10,7 +11,7 @@ export type EDPComponentsURLS = { export const useEDPComponentsURLsQuery = (namespace?: string) => { return useEDPComponentsQuery({ props: { - namespace, + namespace: namespace || getDefaultNamespace(), }, options: { select: data => @@ -18,7 +19,6 @@ export const useEDPComponentsURLsQuery = (namespace?: string) => { acc[cur.spec.type] = cur.spec.url; return acc; }, {}), - enabled: !!namespace, }, }); }; diff --git a/src/pages/edp-overview-list/components/PipelineRunList/hooks/useColumns.tsx b/src/pages/edp-overview-list/components/PipelineRunList/hooks/useColumns.tsx index b6c3f1aa3..8204b60fe 100644 --- a/src/pages/edp-overview-list/components/PipelineRunList/hooks/useColumns.tsx +++ b/src/pages/edp-overview-list/components/PipelineRunList/hooks/useColumns.tsx @@ -2,7 +2,6 @@ import { Icon } from '@iconify/react'; import { HoverInfoLabel } from '@kinvolk/headlamp-plugin/lib/components/common'; import { IconButton, Link } from '@material-ui/core'; import React from 'react'; -import { useParams } from 'react-router-dom'; import { StatusIcon } from '../../../../../components/StatusIcon'; import { TableColumn } from '../../../../../components/Table/types'; import { ICONS } from '../../../../../icons/iconify-icons-mapping'; @@ -13,11 +12,9 @@ import { useDialogContext } from '../../../../../providers/Dialog/hooks'; import { GENERATE_URL_SERVICE } from '../../../../../services/url'; import { formatFullYear, humanizeDefault } from '../../../../../utils/date/humanize'; import { PIPELINE_RUN_GRAPH_DIALOG_NAME } from '../../../../../widgets/PipelineRunGraph/constants'; -import { EDPComponentDetailsRouteParams } from '../../../../edp-component-details/types'; export const useColumns = (): TableColumn[] => { - const { namespace } = useParams(); - const { data: EDPComponentsURLS } = useEDPComponentsURLsQuery(namespace); + const { data: EDPComponentsURLS } = useEDPComponentsURLsQuery(); const { setDialog } = useDialogContext(); @@ -125,9 +122,18 @@ export const useColumns = (): TableColumn[] => { return ( +
Start: {formatFullYear(startTimeDate)}.
+
+ End:{' '} + {completionTimeDate + ? formatFullYear(completionTimeDate) + : ''} + . +
+ + } icon={ICONS.CALENDAR} /> ); @@ -154,6 +160,6 @@ export const useColumns = (): TableColumn[] => { }, }, ], - [EDPComponentsURLS?.tekton, setDialog] + [EDPComponentsURLS, setDialog] ); }; diff --git a/src/utils/date/humanize/index.ts b/src/utils/date/humanize/index.ts index 9330b46ba..b1ee6e311 100644 --- a/src/utils/date/humanize/index.ts +++ b/src/utils/date/humanize/index.ts @@ -13,20 +13,40 @@ humanize.languages['en-mini'] = { ms: () => 'ms', }; -export const humanizeDefault = (timeA: number, timeB: number) => - humanize(timeA - timeB, { - language: 'en-mini', - spacer: '', - delimiter: ' ', - fallbacks: ['en'], - largest: 2, - round: false, - units: ['m', 's'], - }); +export const humanizeDefault = (timeA: number, timeB: number) => { + if (!timeA || !timeB) { + console.error('Invalid time'); + return 'Invalid time'; + } -export const formatFullYear = (date: Date) => - new Intl.DateTimeFormat('en-US', { - dateStyle: 'full', - timeStyle: 'long', - timeZone: 'UTC', - }).format(date); + try { + return humanize(timeA - timeB, { + language: 'en-mini', + spacer: '', + delimiter: ' ', + fallbacks: ['en'], + largest: 2, + round: false, + units: ['m', 's'], + }); + } catch (e) { + console.error(e); + } +}; + +export const formatFullYear = (date: Date) => { + if (!date || !(date instanceof Date)) { + console.error('Invalid date'); + return 'Invalid date'; + } + + try { + return new Intl.DateTimeFormat('en-US', { + dateStyle: 'full', + timeStyle: 'long', + timeZone: 'UTC', + }).format(date); + } catch (e) { + console.error(e); + } +}; diff --git a/src/widgets/PipelineRunGraph/index.tsx b/src/widgets/PipelineRunGraph/index.tsx index da90c8cec..e05da2984 100644 --- a/src/widgets/PipelineRunGraph/index.tsx +++ b/src/widgets/PipelineRunGraph/index.tsx @@ -308,9 +308,8 @@ export const PipelineRunGraph = () => { ) : pipelineRefName; - const startTimeDate = new Date(pipelineRun?.status?.startTime); - const completionTimeDate = new Date(pipelineRun?.status?.completionTime); - const durationTime = humanizeDefault(completionTimeDate.getTime(), startTimeDate.getTime()); + const startTime = pipelineRun?.status?.startTime; + const completionTime = pipelineRun?.status?.completionTime; const pipelineRunStatus = PipelineRunKubeObject.parseStatus(pipelineRun); const pipelineRunReason = PipelineRunKubeObject.parseStatusReason(pipelineRun); @@ -346,15 +345,21 @@ export const PipelineRunGraph = () => { }, { label: 'Started at', - text: formatFullYear(startTimeDate), + text: startTime ? formatFullYear(new Date(startTime)) : null, }, { label: 'Ended at', - text: formatFullYear(completionTimeDate), + text: completionTime ? formatFullYear(new Date(completionTime)) : null, }, { label: 'Duration', - text: durationTime, + text: + startTime && completionTime + ? humanizeDefault( + new Date(completionTime).getTime(), + new Date(startTime).getTime() + ) + : null, }, ], [