From 45f81db3a34e5bd0de6ed8bd003ab8e32f1e75a9 Mon Sep 17 00:00:00 2001
From: Olivier <volerig@gmail.com>
Date: Sun, 5 Jan 2020 10:11:34 +0100
Subject: [PATCH] Show job duration in job detail

---
 client/src/utils/dates.js | 13 +++++++++++--
 client/src/views/job.js   |  2 ++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/client/src/utils/dates.js b/client/src/utils/dates.js
index e599684..98f005f 100644
--- a/client/src/utils/dates.js
+++ b/client/src/utils/dates.js
@@ -26,6 +26,15 @@ const shortEnglishHumanizer = HumanizeDuration.humanizer({
   * 
   */ 
 export default function fromNow(epochtimestampMs) {
-    var diff = Date.now() - new Date(epochtimestampMs).getTime()
-    return shortEnglishHumanizer(diff).split(",")[0]
+    const diff = Date.now() - new Date(epochtimestampMs).getTime();
+    return formatDuration(diff);
 }
+
+
+/**
+ * Humanize the given duration (in ms)
+ * @param {diffDurationMs} diffDurationMs 
+ */
+export function formatDuration(diffDurationMs){
+     return shortEnglishHumanizer(diffDurationMs).split(",")[0];
+} 
diff --git a/client/src/views/job.js b/client/src/views/job.js
index 719e9a3..7d04541 100644
--- a/client/src/views/job.js
+++ b/client/src/views/job.js
@@ -16,6 +16,7 @@ import getMetrics from '../utils/metricsHelpers';
 import {filterByOwner} from '../utils/filterHelper';
 import {defaultSortInfo} from '../components/sorter';
 import ChartsContainer from '../components/chartsContainer';
+import {formatDuration}  from '../utils/dates';
 
 const service = api.job;
 
@@ -79,6 +80,7 @@ export default class Job extends Base {
                             <MetadataFields item={item} />
                             <Field name='Start Time' value={item.status.startTime} />
                             <Field name='Completion Time' value={item.status.completionTime} />
+                            <Field name='Duration' value={item.status.completionTime ? formatDuration(Date.parse(item.status.completionTime) - Date.parse(item.status.startTime)) : ''} />
                         </div>
                     )}
                 </div>