diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/pipelines/pipelinesTopology.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/pipelines/pipelinesTopology.cy.ts index b7b1c68176..d3ca4a37bb 100644 --- a/frontend/src/__tests__/cypress/cypress/tests/mocked/pipelines/pipelinesTopology.cy.ts +++ b/frontend/src/__tests__/cypress/cypress/tests/mocked/pipelines/pipelinesTopology.cy.ts @@ -465,9 +465,15 @@ describe('Pipeline topology', () => { .findValue() .contains(mockRecurringRun.display_name); pipelineRunDetails.findDetailItem('Workflow name').findValue().contains('test-pipeline'); - pipelineRunDetails.findDetailItem('Started').findValue().contains('March 15, 2024'); - pipelineRunDetails.findDetailItem('Finished').findValue().contains('March 15, 2024'); - pipelineRunDetails.findDetailItem('Duration').findValue().contains('0:50'); + pipelineRunDetails + .findDetailItem('Started') + .findValue() + .contains('Friday, March 15, 2024 at 5:59:35 PM UTC'); + pipelineRunDetails + .findDetailItem('Finished') + .findValue() + .contains('Friday, March 15, 2024 at 6:00:25 PM UTC'); + pipelineRunDetails.findDetailItem('Duration').findValue().contains('50 seconds'); }); it('Test pipeline triggered run tab parameters', () => { diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/utils.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/utils.tsx index 08b646ac83..d36e4f024f 100644 --- a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/utils.tsx +++ b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/utils.tsx @@ -52,7 +52,13 @@ export const asTimestamp = (date: Date): React.ReactNode => ( - + ); diff --git a/frontend/src/utilities/__tests__/time.spec.ts b/frontend/src/utilities/__tests__/time.spec.ts index f348c79254..6e63c44524 100644 --- a/frontend/src/utilities/__tests__/time.spec.ts +++ b/frontend/src/utilities/__tests__/time.spec.ts @@ -14,11 +14,11 @@ import { describe('relativeDuration', () => { it('should convert milliseconds to minutes and seconds', () => { - expect(relativeDuration(123456)).toBe('2:03'); + expect(relativeDuration(123456)).toBe('2 minutes, 3 seconds'); }); it('should calculate values if minutes is less than 0', () => { - expect(relativeDuration(-123456)).toBe('0:0-124'); + expect(relativeDuration(-123456)).toBe('-124 seconds'); }); }); @@ -117,7 +117,7 @@ describe('ensureTimeFormat', () => { describe('printSeconds', () => { it('should print seconds', () => { - expect(printSeconds(3661)).toBe('1 second, 1 minute, 1 hour'); + expect(printSeconds(3661)).toBe('1 hour, 1 minute, 1 second'); }); it('should handle a single unit', () => { @@ -127,6 +127,10 @@ describe('printSeconds', () => { it('should handle a single unit at max', () => { expect(printSeconds(60)).toBe('1 minute'); }); + + it('should handle zero seconds', () => { + expect(printSeconds(0)).toBe('0 seconds'); + }); }); describe('relativeTime', () => { diff --git a/frontend/src/utilities/time.ts b/frontend/src/utilities/time.ts index bd5c73e2ee..e5148ed388 100644 --- a/frontend/src/utilities/time.ts +++ b/frontend/src/utilities/time.ts @@ -8,17 +8,8 @@ const printAgo = (time: number, unit: string) => `${time} ${unit}${time > 1 ? 's const printIn = (time: number, unit: string) => `in ${time} ${unit}${time > 1 ? 's' : ''}`; const leadZero = (v: number) => (v < 10 ? `0${v}` : `${v}`); -export const relativeDuration = (valueInMs: number): string => { - let seconds = Math.floor(valueInMs / 1000); - - let minutes = 0; - if (seconds > 60) { - minutes = Math.floor(seconds / 60); - seconds %= 60; - } - - return `${minutes}:${leadZero(seconds)}`; -}; +export const relativeDuration = (valueInMs: number): string => + printSeconds(Math.floor(valueInMs / 1000)); /** As YYYY-MM-DD */ export const convertDateToSimpleDateString = (date?: Date): string | null => { @@ -73,6 +64,9 @@ export const ensureTimeFormat = (time: string): string | null => { }; export const printSeconds = (seconds: number): string => { + if (seconds === 0) { + return '0 seconds'; + } const timeBlocks = [ { unit: 'second', maxPer: 60 }, { unit: 'minute', maxPer: 60 }, @@ -107,11 +101,10 @@ export const printSeconds = (seconds: number): string => { return [thisText, newUnit]; } - return [`${currentText}, ${thisText}`, newUnit]; + return [`${thisText}, ${currentText}`, newUnit]; }, ['', seconds], ); - return text; };