show relative time for pipeline run duration

frontend/packages/dev-console/src/components/pipelines/detail-page-tabs/pipeline-details/pipeline-step-utils.ts

@@ -1,5 +1,5 @@
-import { formatDuration } from '@console/internal/components/utils/datetime';
 import { runStatus } from '../../../../utils/pipeline-augment';
+import { calculateRelativeTime } from '../../../../utils/pipeline-utils';
 
 enum TerminatedReasons {
   Completed = 'Completed',
@@ -31,22 +31,14 @@ const getMatchingStep = (step, status: TaskStatus): TaskStatusStep => {
   });
 };
 
-const calculateDurationFormatted = ({ startedAt, finishedAt }): string => {
-  const date = new Date(finishedAt).getTime() - new Date(startedAt).getTime();
-  return formatDuration(date);
-};
-
 const getMatchingStepDuration = (matchingStep?: TaskStatusStep) => {
   if (!matchingStep) return '';
 
   if (matchingStep.terminated) {
-    return calculateDurationFormatted(matchingStep.terminated);
+    return calculateRelativeTime(matchingStep.terminated.startedAt);
   }
   if (matchingStep.running) {
-    return calculateDurationFormatted({
-      startedAt: matchingStep.running.startedAt,
-      finishedAt: Date.now(),
-    });
+    return calculateRelativeTime(matchingStep.running.startedAt);
   }
 
   return '';

frontend/packages/dev-console/src/utils/__tests__/pipeline-utils.spec.ts

@@ -14,6 +14,7 @@ import {
   getPipelineRunParams,
   pipelineRunDuration,
   getSecretAnnotations,
+  calculateRelativeTime,
 } from '../pipeline-utils';
 import {
   constructPipelineData,
@@ -103,7 +104,7 @@ describe('pipeline-utils ', () => {
   it('expect duration to be a time formatted string for PipelineRun with start and end Time', () => {
     const duration = pipelineRunDuration(mockRunDurationTest[2]);
     expect(duration).not.toBeNull();
-    expect(duration).toBe('1m 13s');
+    expect(duration).toBe('about a minute');
   });
   it('expect annotation to return an empty object if keyValue pair is not passed', () => {
     const annotation = getSecretAnnotations(null);
@@ -129,4 +130,29 @@ describe('pipeline-utils ', () => {
       'tekton.dev/docker-0': 'docker.io',
     });
   });
+
+  it('expected relative time should be "a few seconds"', () => {
+    const relativeTime = calculateRelativeTime('2020-05-22T11:57:53Z', '2020-05-22T11:57:57Z');
+    expect(relativeTime).toBe('a few seconds');
+  });
+
+  it('expected relative time should be "about a minute"', () => {
+    const relativeTime = calculateRelativeTime('2020-05-22T10:57:00Z', '2020-05-22T10:57:57Z');
+    expect(relativeTime).toBe('about a minute');
+  });
+
+  it('expected relative time should be "about 4 minutes"', () => {
+    const relativeTime = calculateRelativeTime('2020-05-22T11:57:53Z', '2020-05-22T12:02:20Z');
+    expect(relativeTime).toBe('about 4 minutes');
+  });
+
+  it('expected relative time should be "about an hour"', () => {
+    const relativeTime = calculateRelativeTime('2020-05-22T11:57:53Z', '2020-05-22T12:57:57Z');
+    expect(relativeTime).toBe('about an hour');
+  });
+
+  it('expected relative time should be "about 2 hours"', () => {
+    const relativeTime = calculateRelativeTime('2020-05-22T10:57:53Z', '2020-05-22T12:57:57Z');
+    expect(relativeTime).toBe('about 2 hours');
+  });
 });

frontend/packages/dev-console/src/utils/pipeline-utils.ts

@@ -314,6 +314,30 @@ export const getPipelineRunWorkspaces = (
   );
 };
 
+export const calculateRelativeTime = (startTime: string, completionTime?: string) => {
+  const start = new Date(startTime).getTime();
+  const end = completionTime ? new Date(completionTime).getTime() : new Date().getTime();
+  const secondsAgo = (end - start) / 1000;
+  const minutesAgo = secondsAgo / 60;
+  const hoursAgo = minutesAgo / 60;
+
+  if (minutesAgo > 90) {
+    const count = Math.round(hoursAgo);
+    return `about ${count} hours`;
+  }
+  if (minutesAgo > 45) {
+    return 'about an hour';
+  }
+  if (secondsAgo > 90) {
+    const count = Math.round(minutesAgo);
+    return `about ${count} minutes`;
+  }
+  if (secondsAgo > 45) {
+    return 'about a minute';
+  }
+  return 'a few seconds';
+};
+
 export const pipelineRunDuration = (run: PipelineRun): string => {
   const startTime = _.get(run, ['status', 'startTime'], null);
   const completionTime = _.get(run, ['status', 'completionTime'], null);
@@ -322,13 +346,7 @@ export const pipelineRunDuration = (run: PipelineRun): string => {
   if (!startTime || (!completionTime && pipelineRunStatus(run) !== 'Running')) {
     return '-';
   }
-  const start = new Date(startTime).getTime();
-
-  // For running pipelines duration must be current time - starttime.
-  const duration = completionTime
-    ? new Date(completionTime).getTime() - start
-    : new Date().getTime() - start;
-  return formatDuration(duration);
+  return calculateRelativeTime(startTime, completionTime);
 };
 
 export const updateServiceAccount = (