ui: add duration to workflow view

artefactual-labs · Jan 23, 2020 · 9fe22a7 · 9fe22a7
1 parent 1f5dd1a
commit 9fe22a7
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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;