From 9fe22a786fa41974cba08b0570c3742c07ab6657 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Garc=C3=ADa=20Crespo?= <jesus@sevein.com>
Date: Thu, 23 Jan 2020 11:14:28 -0800
Subject: [PATCH] ui: add duration to workflow view

---
 ui/src/filters/index.ts                 | 14 ++++++++++++++
 ui/src/views/CollectionShow.vue         |  9 +--------
 ui/src/views/CollectionShowWorkflow.vue |  6 ++++--
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/ui/src/filters/index.ts b/ui/src/filters/index.ts
index c0c24322..42abe597 100644
--- a/ui/src/filters/index.ts
+++ b/ui/src/filters/index.ts
@@ -1,4 +1,6 @@
 import Vue from 'vue';
+import moment from 'moment';
+import humanizeDuration from 'humanize-duration';
 
 Vue.filter('formatDateTimeString', (value: string) => {
   const date = new Date(value);
@@ -19,3 +21,15 @@ Vue.filter('formatEpoch', (value: number) => {
   const date = new Date(value / 1000 / 1000); // TODO: is this right?
   return date.toLocaleString();
 });
+
+Vue.filter('formatDuration', (from: Date, to: Date) => {
+  const diff = moment(to).diff(from);
+  return humanizeDuration(moment.duration(diff).asMilliseconds());
+});
+
+Vue.filter('formatEpochDuration', (from: number, to: number) => {
+  const f = new Date(Math.round(from / 1000 / 1000));
+  const t = new Date(Math.round(to / 1000 / 1000));
+  const diff = moment(t).diff(f);
+  return humanizeDuration(moment.duration(diff).asMilliseconds());
+});
diff --git a/ui/src/views/CollectionShow.vue b/ui/src/views/CollectionShow.vue
index 6ac35b17..d5672826 100644
--- a/ui/src/views/CollectionShow.vue
+++ b/ui/src/views/CollectionShow.vue
@@ -34,7 +34,7 @@
           <dt>Stored</dt>
           <dd>
             {{ collection.completedAt | formatDateTime }}
-            (took {{ took(collection.startedAt, collection.completedAt) }})
+            (took {{ collection.startedAt | formatDuration(collection.completedAt) }})
           </dd>
         </template>
 
@@ -106,8 +106,6 @@ import { Component, Vue } from 'vue-property-decorator';
 import { namespace } from 'vuex-class';
 import * as CollectionStore from '../store/collection';
 import CollectionStatusBadge from '@/components/CollectionStatusBadge.vue';
-import moment from 'moment';
-import humanizeDuration from 'humanize-duration';
 
 import { api, EnduroCollectionClient } from '../client';
 
@@ -126,11 +124,6 @@ export default class CollectionShow extends Vue {
   @collectionStoreNs.Action(CollectionStore.SEARCH_COLLECTION)
   private search: any;
 
-  private took(created: Date, completed: Date): string {
-    const diff = moment(completed).diff(created);
-    return humanizeDuration(moment.duration(diff).asMilliseconds());
-  }
-
   private retry(id: string): Promise<any> {
     return EnduroCollectionClient.collectionRetry({id: +id});
   }
diff --git a/ui/src/views/CollectionShowWorkflow.vue b/ui/src/views/CollectionShowWorkflow.vue
index 29412be7..a9dfb4b6 100644
--- a/ui/src/views/CollectionShowWorkflow.vue
+++ b/ui/src/views/CollectionShowWorkflow.vue
@@ -39,7 +39,10 @@
 
         <template v-if="completedAt">
           <dt>Completed</dt>
-          <dd>{{ completedAt | formatEpoch }}</dd>
+          <dd>
+            {{ completedAt | formatEpoch }}
+            (took {{ startedAt | formatEpochDuration(completedAt) }})
+          </dd>
         </template>
 
         <dt>Activity summary</dt>
@@ -193,7 +196,6 @@ export default class CollectionShowWorkflow extends Vue {
       } else if (event.type === 'WorkflowExecutionStarted') {
         this.startedAt = details.timestamp;
       } else if (event.type === 'WorkflowExecutionCompleted') {
-        console.log(details);
         this.completedAt = details.timestamp;
       } else if (event.type === 'WorkflowExecutionFailed') {
         const attrs = details.workflowExecutionFailedEventAttributes;