Fix run duration bug (kubeflow#1827)

* Allows durations >=24h and renames 'showLink' in RunList

* Update, fix tests

frontend/mock-backend/fixed-data.ts

@@ -272,6 +272,7 @@ const runs: ApiRunDetail[] = [
     run: {
       created_at: new Date('2018-03-17T20:58:23.000Z'),
       description: 'A recursive coinflip run',
+      finished_at: new Date('2018-03-18T21:01:23.000Z'),
       id: '3308d0ec-f1b3-4488-a2d3-8ad0f91e88e7',
       metrics: [
         {
@@ -323,6 +324,7 @@ const runs: ApiRunDetail[] = [
     run: {
       created_at: new Date('2018-04-17T21:00:00.000Z'),
       description: 'A coinflip run with an error. No metrics',
+      finished_at: new Date('2018-04-17T21:00:33.000Z'),
       id: '47a3d09c-7db4-4788-ac55-3f8d908574aa',
       metrics: [],
       name: 'coinflip-error-nklng2',
@@ -386,6 +388,7 @@ const runs: ApiRunDetail[] = [
     run: {
       created_at: new Date('2018-06-17T22:58:23.000Z'),
       description: 'A simple hello world run, but with steps. Not attached to any experiment',
+      finished_at: new Date('2018-06-18T21:00:33.000Z'),
       id: '21afb688-7597-47e9-b6c3-35d3145fe5e1',
       metrics: [{
         format: RunMetricFormat.PERCENTAGE,
@@ -474,6 +477,7 @@ const runs: ApiRunDetail[] = [
         + ' Ut nec dapibus eros, vitae iaculis nunc. In aliquet accumsan rhoncus. Donec vitae'
         + ' ipsum a tellus fermentum pharetra in in neque. Pellentesque consequat felis non est'
         + ' vulputate pellentesque. Aliquam eget cursus enim.',
+      finished_at: new Date('2018-08-20T21:01:23.000Z'),
       id: '7fc01714-4a13-4c05-8044-a8a72c14253b',
       metrics: [
         {
@@ -517,6 +521,7 @@ const runs: ApiRunDetail[] = [
     run: {
       created_at: new Date('2018-08-18T20:58:23.000Z'),
       description: 'simple run with pipeline spec embedded in it.',
+      finished_at: new Date('2018-08-18T21:01:23.000Z'),
       id: '7fc01715-4a93-4c00-8044-a8a72c14253b',
       metrics: [
         {
@@ -584,6 +589,7 @@ function generateNRuns(): ApiRunDetail[] {
       run: {
         created_at: new Date('2018-02-12T20:' + padStartTwoZeroes(i.toString()) + ':23.000Z'),
         description: 'The description of a dummy run',
+        finished_at: new Date('2018-02-12T20:' + padStartTwoZeroes(((2 * i) % 60).toString()) + ':25.000Z'),
         id: 'Some-run-id-' + i,
         metrics: [
           {

frontend/src/lib/Utils.test.ts

@@ -114,7 +114,7 @@ describe('Utils', () => {
 
     it('computes seconds', () => {
       const run = {
-        created_at: new Date(2018, 1, 2, 3, 55, 30).toISOString(),
+        created_at: new Date(2018, 1, 3, 3, 55, 30).toISOString(),
         finished_at: new Date(2018, 1, 3, 3, 56, 25).toISOString(),
         status: NodePhase.SUCCEEDED,
       } as any;
@@ -123,29 +123,29 @@ describe('Utils', () => {
 
     it('computes minutes/seconds', () => {
       const run = {
-        created_at: new Date(2018, 1, 2, 3, 55, 10).toISOString(),
+        created_at: new Date(2018, 1, 3, 3, 55, 10).toISOString(),
         finished_at: new Date(2018, 1, 3, 3, 59, 25).toISOString(),
         status: NodePhase.SUCCEEDED,
       } as any;
       expect(getRunDuration(run)).toBe('0:04:15');
     });
 
-    it('computes days/minutes/seconds', () => {
+    it('computes hours/minutes/seconds', () => {
       const run = {
         created_at: new Date(2018, 1, 2, 3, 55, 10).toISOString(),
         finished_at: new Date(2018, 1, 3, 4, 55, 10).toISOString(),
         status: NodePhase.SUCCEEDED,
       } as any;
-      expect(getRunDuration(run)).toBe('1:00:00');
+      expect(getRunDuration(run)).toBe('25:00:00');
     });
 
-    it('computes padded days/minutes/seconds', () => {
+    it('computes padded hours/minutes/seconds', () => {
       const run = {
         created_at: new Date(2018, 1, 2, 3, 55, 10).toISOString(),
         finished_at: new Date(2018, 1, 3, 4, 56, 11).toISOString(),
         status: NodePhase.SUCCEEDED,
       } as any;
-      expect(getRunDuration(run)).toBe('1:01:01');
+      expect(getRunDuration(run)).toBe('25:01:01');
     });
 
     it('shows negative sign if start date is after end date', () => {
@@ -190,7 +190,7 @@ describe('Utils', () => {
       const workflow = {
         status: {
           finishedAt: new Date(2018, 1, 3, 3, 56, 25).toISOString(),
-          startedAt: new Date(2018, 1, 2, 3, 55, 30).toISOString(),
+          startedAt: new Date(2018, 1, 3, 3, 55, 30).toISOString(),
         }
       } as any;
       expect(getRunDurationFromWorkflow(workflow)).toBe('0:00:55');
@@ -200,27 +200,27 @@ describe('Utils', () => {
       const workflow = {
         status: {
           finishedAt: new Date(2018, 1, 3, 3, 59, 25).toISOString(),
-          startedAt: new Date(2018, 1, 2, 3, 55, 10).toISOString(),
+          startedAt: new Date(2018, 1, 3, 3, 55, 10).toISOString(),
         }
       } as any;
       expect(getRunDurationFromWorkflow(workflow)).toBe('0:04:15');
     });
 
-    it('computes days/minutes/seconds run time if status is provided', () => {
+    it('computes hours/minutes/seconds run time if status is provided', () => {
       const workflow = {
         status: {
           finishedAt: new Date(2018, 1, 3, 4, 55, 10).toISOString(),
-          startedAt: new Date(2018, 1, 2, 3, 55, 10).toISOString(),
+          startedAt: new Date(2018, 1, 3, 3, 55, 10).toISOString(),
         }
       } as any;
       expect(getRunDurationFromWorkflow(workflow)).toBe('1:00:00');
     });
 
-    it('computes padded days/minutes/seconds run time if status is provided', () => {
+    it('computes padded hours/minutes/seconds run time if status is provided', () => {
       const workflow = {
         status: {
           finishedAt: new Date(2018, 1, 3, 4, 56, 11).toISOString(),
-          startedAt: new Date(2018, 1, 2, 3, 55, 10).toISOString(),
+          startedAt: new Date(2018, 1, 3, 3, 55, 10).toISOString(),
         }
       } as any;
       expect(getRunDurationFromWorkflow(workflow)).toBe('1:01:01');

frontend/src/lib/Utils.ts

@@ -71,7 +71,7 @@ function getDuration(start: Date, end: Date): string {
   const seconds = ('0' + Math.floor((diff / SECOND) % 60).toString()).slice(-2);
   const minutes = ('0' + Math.floor((diff / MINUTE) % 60).toString()).slice(-2);
   // Hours are the largest denomination, so we don't pad them
-  const hours = Math.floor((diff / HOUR) % 24).toString();
+  const hours = Math.floor(diff / HOUR).toString();
   return `${sign}${hours}:${minutes}:${seconds}`;
 }
 

frontend/src/pages/__snapshots__/RunDetails.test.tsx.snap

@@ -1835,7 +1835,7 @@ exports[`RunDetails shows run config fields - handles no description 1`] = `
               ],
               Array [
                 "Duration",
-                "1:01:01",
+                "25:01:01",
               ],
             ]
           }
@@ -1896,7 +1896,7 @@ exports[`RunDetails shows run config fields - handles no metadata 1`] = `
               ],
               Array [
                 "Duration",
-                "1:01:01",
+                "25:01:01",
               ],
             ]
           }
@@ -1957,7 +1957,7 @@ exports[`RunDetails shows run config fields 1`] = `
               ],
               Array [
                 "Duration",
-                "1:01:01",
+                "25:01:01",
               ],
             ]
           }