fix: Update card component utilities

app/components/pipeline/event/card/util.js

@@ -1,6 +1,25 @@
 import humanizeDuration from 'humanize-duration';
 import { toCustomLocaleString } from 'screwdriver-ui/utils/time-range';
 
+const shortEnglishHumanizer = humanizeDuration.humanizer({
+  round: true,
+  spacer: '',
+  delimiter: ' ',
+  language: 'shortEn',
+  languages: {
+    shortEn: {
+      y: () => 'y',
+      mo: () => 'mo',
+      w: () => 'w',
+      d: () => 'd',
+      h: () => 'h',
+      m: () => 'm',
+      s: () => 's',
+      ms: () => 'ms'
+    }
+  }
+});
+
 export const getTruncatedSha = event => {
   return event.sha.slice(0, 7);
 };
@@ -26,19 +45,27 @@ export const getStartDate = (event, userSettings) => {
   return `${toCustomLocaleString(new Date(startDate))}`;
 };
 
+export const getFirstCreateTime = builds => {
+  return builds
+    ? builds
+        .map(build => {
+          return new Date(build.createTime);
+        })
+        .sort()[0]
+    : null;
+};
+
 export const getDuration = builds => {
-  const firstCreateTime = builds
-    .map(build => {
-      return new Date(build.createTime);
-    })
-    .sort()[0];
+  const firstCreateTime = getFirstCreateTime(builds);
 
   const lastEndTime = builds
-    .map(build => {
-      return new Date(build.endTime);
-    })
-    .sort()
-    .pop();
+    ? builds
+        .map(build => {
+          return new Date(build.endTime);
+        })
+        .sort()
+        .pop()
+    : null;
 
   if (!firstCreateTime || !lastEndTime) {
     return 0;
@@ -48,28 +75,11 @@ export const getDuration = builds => {
 };
 
 export const getDurationText = builds => {
-  const shortEnglishHumanizer = humanizeDuration.humanizer({
-    language: 'shortEn',
-    languages: {
-      shortEn: {
-        y: () => 'y',
-        mo: () => 'mo',
-        w: () => 'w',
-        d: () => 'd',
-        h: () => 'h',
-        m: () => 'm',
-        s: () => 's',
-        ms: () => 'ms'
-      }
-    }
-  });
-
-  const buildsToUse = builds || [];
+  return shortEnglishHumanizer(getDuration(builds));
+};
 
-  return shortEnglishHumanizer(getDuration(buildsToUse), {
-    round: true,
-    largest: 1
-  });
+export const getRunningDurationText = (startTime, endTime) => {
+  return shortEnglishHumanizer(endTime - startTime);
 };
 
 export const isExternalTrigger = event => {

tests/unit/components/pipeline/event/card/util-test.js

@@ -3,7 +3,9 @@ import {
   getDuration,
   getDurationText,
   getExternalPipelineId,
+  getFirstCreateTime,
   getFailureCount,
+  getRunningDurationText,
   getStartDate,
   getTruncatedMessage,
   getTruncatedSha,
@@ -41,12 +43,34 @@ module('Unit | Component | pipeline/event/card/util', function () {
     assert.equal(startDate, '04/01/2021, 04:34 PM UTC');
   });
 
-  test('getDuration returns correct duration', function (assert) {
-    let builds = [];
+  test('getFirstCreateTime returns start date', function (assert) {
+    assert.equal(getFirstCreateTime(null), null);
+    assert.equal(getFirstCreateTime([]), null);
+
+    const expectedDateString = '2024-03-05T18:16:07.760Z';
+    const builds = [
+      {
+        createTime: '2024-03-05T18:30:07.760Z',
+        endTime: '2024-03-05T18:31:07.760Z'
+      },
+      {
+        createTime: '2024-03-05T18:25:07.760Z',
+        endTime: '2024-03-05T18:26:07.760Z'
+      },
+      {
+        createTime: expectedDateString,
+        endTime: '2024-03-05T18:17:07.760Z'
+      }
+    ];
+
+    assert.deepEqual(getFirstCreateTime(builds), new Date(expectedDateString));
+  });
 
-    assert.equal(getDuration(builds), 0);
+  test('getDuration returns correct duration', function (assert) {
+    assert.equal(getDuration(null), 0);
+    assert.equal(getDuration([]), 0);
 
-    builds = [
+    const builds = [
       {
         createTime: '2024-03-05T18:30:07.760Z',
         endTime: '2024-03-05T18:31:07.760Z'
@@ -65,8 +89,8 @@ module('Unit | Component | pipeline/event/card/util', function () {
   });
 
   test('getDurationText returns correct text format', function (assert) {
-    assert.equal(getDurationText(null), '0 s');
-    assert.equal(getDurationText([]), '0 s');
+    assert.equal(getDurationText(null), '0s');
+    assert.equal(getDurationText([]), '0s');
     assert.equal(
       getDurationText([
         {
@@ -82,10 +106,17 @@ module('Unit | Component | pipeline/event/card/util', function () {
           endTime: '2024-03-05T18:17:07.760Z'
         }
       ]),
-      '15 m'
+      '15m 10s'
     );
   });
 
+  test('getRunningDurationText returns correct text format', function (assert) {
+    const now = Date.now();
+    const start = new Date(now - 1000 * 60 * 5 - 30 * 1000);
+
+    assert.equal(getRunningDurationText(start, now), '5m 30s');
+  });
+
   test('isExternalTrigger calculates value correctly', function (assert) {
     assert.equal(
       isExternalTrigger({ id: 123, pipelineId: 999, startFrom: '~commit' }),