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
epam · Oct 17, 2023 · ed3f986 · ed3f986
1 parent 1eb1e7a
commit ed3f986
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 36 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -1,3 +1,4 @@
+import { getDefaultNamespace } from '../../../utils/getDefaultNamespace';
 import { useEDPComponentsQuery } from './useEDPComponentsQuery';
 
 type EDPComponentName = string;
@@ -10,15 +11,14 @@ export type EDPComponentsURLS = {
 export const useEDPComponentsURLsQuery = (namespace?: string) => {
     return useEDPComponentsQuery<EDPComponentsURLS>({
         props: {
-            namespace,
+            namespace: namespace || getDefaultNamespace(),
         },
         options: {
             select: data =>
                 data.items.reduce((acc, cur) => {
                     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
@@ -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<PipelineRunKubeObjectInterface>[] => {
-    const { namespace } = useParams<EDPComponentDetailsRouteParams>();
-    const { data: EDPComponentsURLS } = useEDPComponentsURLsQuery(namespace);
+    const { data: EDPComponentsURLS } = useEDPComponentsURLsQuery();
 
     const { setDialog } = useDialogContext();
 
@@ -125,9 +122,18 @@ export const useColumns = (): TableColumn<PipelineRunKubeObjectInterface>[] => {
                     return (
                         <HoverInfoLabel
                             label={time}
-                            hoverInfo={`Start: ${formatFullYear(
-                                startTimeDate
-                            )}. End: ${formatFullYear(completionTimeDate)}`}
+                            hoverInfo={
+                                <>
+                                    <div>Start: {formatFullYear(startTimeDate)}.</div>
+                                    <div>
+                                        End:{' '}
+                                        {completionTimeDate
+                                            ? formatFullYear(completionTimeDate)
+                                            : ''}
+                                        .
+                                    </div>
+                                </>
+                            }
                             icon={ICONS.CALENDAR}
                         />
                     );
@@ -154,6 +160,6 @@ export const useColumns = (): TableColumn<PipelineRunKubeObjectInterface>[] => {
                 },
             },
         ],
-        [EDPComponentsURLS?.tekton, setDialog]
+        [EDPComponentsURLS, setDialog]
     );
 };
diff --git 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
@@ -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,
                 },
             ],
             [