changed fields to be UTC and duration to be more descriptive

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', () => {

frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/utils.tsx

@@ -52,7 +52,13 @@ export const asTimestamp = (date: Date): React.ReactNode => (
       </Icon>
     </FlexItem>
     <FlexItem>
-      <Timestamp date={date} dateFormat={TimestampFormat.full} timeFormat={TimestampFormat.full} />
+      <Timestamp
+        shouldDisplayUTC
+        date={date}
+        dateFormat={TimestampFormat.full}
+        timeFormat={TimestampFormat.medium}
+        displaySuffix="UTC"
+      />
     </FlexItem>
   </Flex>
 );

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', () => {

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;
 };