changed fields to be UTC and duration to be more descriptive

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.full}
+        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;
 };