Create formatPipelineDuration method

app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue

@@ -2,6 +2,7 @@
 import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import '~/lib/utils/datetime_utility';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
+import { formatPipelineDuration } from '~/pipelines/utils';
 
 export default {
   directives: {
@@ -27,24 +28,7 @@ export default {
       return this.finishedTime !== '';
     },
     durationFormatted() {
-      const date = new Date(this.duration * 1000);
-
-      let hh = date.getUTCHours();
-      let mm = date.getUTCMinutes();
-      let ss = date.getSeconds();
-
-      // left pad
-      if (hh < 10) {
-        hh = `0${hh}`;
-      }
-      if (mm < 10) {
-        mm = `0${mm}`;
-      }
-      if (ss < 10) {
-        ss = `0${ss}`;
-      }
-
-      return `${hh}:${mm}:${ss}`;
+      return formatPipelineDuration(this.duration);
     },
   },
 };

app/assets/javascripts/pipelines/utils.js

@@ -94,3 +94,22 @@ export const generateJobNeedsDict = ({ jobs }) => {
     return { ...acc, [jobs[value].id]: uniqueValues };
   }, {});
 };
+
+export const formatPipelineDuration = duration => {
+  let ss = duration % 60;
+  let mm = Math.floor(duration / 60) % 60;
+  let hh = Math.floor(duration / 60 / 60);
+
+  // left pad with 0s
+  if (hh < 10) {
+    hh = `0${hh}`;
+  }
+  if (mm < 10) {
+    mm = `0${mm}`;
+  }
+  if (ss < 10) {
+    ss = `0${ss}`;
+  }
+
+  return `${hh}:${mm}:${ss}`;
+};

spec/frontend/pipelines/pipeline_graph/utils_spec.js

@@ -2,6 +2,7 @@ import {
   preparePipelineGraphData,
   createUniqueJobId,
   generateJobNeedsDict,
+  formatPipelineDuration,
 } from '~/pipelines/utils';
 
 describe('utils functions', () => {
@@ -209,3 +210,30 @@ describe('utils functions', () => {
     });
   });
 });
+
+describe('formatPipelineDuration', () => {
+  it('formats durations >= 1 day correctly', () => {
+    const oneDay = 60 * 60 * 24;
+
+    expect(formatPipelineDuration(oneDay)).toBe('24:00:00');
+    expect(formatPipelineDuration(oneDay * 2)).toBe('48:00:00');
+    expect(formatPipelineDuration(oneDay + 60 * 5 + 34)).toBe('24:05:34');
+    expect(formatPipelineDuration(oneDay * 10)).toBe('240:00:00');
+    expect(formatPipelineDuration(oneDay * 100)).toBe('2400:00:00');
+  });
+
+  describe('durations < 1 day', () => {
+    it.each`
+      input    | output
+      ${0}     | ${'00:00:00'}
+      ${10}    | ${'00:00:10'}
+      ${60}    | ${'00:01:00'}
+      ${61}    | ${'00:01:01'}
+      ${3600}  | ${'01:00:00'}
+      ${4660}  | ${'01:17:40'}
+      ${86399} | ${'23:59:59'}
+    `('returns $output for $input', ({ input, output }) => {
+      expect(formatPipelineDuration(input)).toBe(output);
+    });
+  });
+});