From 22918d00119029704ab865a60901db48d10419a2 Mon Sep 17 00:00:00 2001
From: Cyril Dubuisson <cyril.dubuisson@gmail.com>
Date: Fri, 25 Oct 2019 15:28:17 +0200
Subject: [PATCH] :sparkles: : use timer component to display durations of job
 and step

---
 src/main/resources/static/css/style.css               | 11 ++++++++---
 src/main/resources/templates/job.html                 |  2 ++
 .../templates/vue_templates/job/job-metadata.vue      | 10 ++++++++--
 .../templates/vue_templates/job/job-step.vue          | 10 ++++++++--
 4 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
index 666e1984f..12f533a29 100755
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css
@@ -1848,17 +1848,22 @@ button.main_bt {
     display: flex;
     flex-direction: column;
     justify-content: center;
+    flex: 0 0 30%;
     border-left: 2px dashed cadetblue;
-    margin-left: 10px;
-    padding-left: 10px;
+    margin-left: 15px;
+    padding-left: 15px;
 }
 
 .job_list .job .job_attr_id {
     width: 50px;
 }
 
+.job_list .job .job_attr_icon {
+    width: 20px;
+}
+
 .job_list .job .job_attr_value {
-    font-weight: bold;
+    font-weight: bolder;
     margin-left: 5px;
 }
 
diff --git a/src/main/resources/templates/job.html b/src/main/resources/templates/job.html
index 1a56eb1b4..99244f63c 100644
--- a/src/main/resources/templates/job.html
+++ b/src/main/resources/templates/job.html
@@ -78,6 +78,7 @@ <h2>Stack {{stack.name}}</h2>
 <script src="/webjars/popper.js/1.14.3/umd/popper.min.js"></script>
 <script src="/webjars/bootstrap/4.3.1/js/bootstrap.min.js"></script>
 <script src="/webjars/momentjs/2.24.0/min/moment.min.js"></script>
+<script src="/webjars/moment-duration-format/1.3.0/lib/moment-duration-format.js"></script>
 
 <script src="/webjars/vue/2.5.16/vue.js"></script>
 <script src="/webjars/bootstrap-vue/2.0.4/dist/bootstrap-vue.js"></script>
@@ -93,6 +94,7 @@ <h2>Stack {{stack.name}}</h2>
 <div th:replace="vue_templates/job/job-metadata"></div>
 <div th:replace="vue_templates/job/job-step"></div>
 <div th:replace="vue_templates/job/job-apply-confirm"></div>
+<div th:replace="vue_templates/job/job-timer"></div>
 
 <script src="/js/ansi_to_html.js"></script>
 
diff --git a/src/main/resources/templates/vue_templates/job/job-metadata.vue b/src/main/resources/templates/vue_templates/job/job-metadata.vue
index a99711e74..9604d2c55 100644
--- a/src/main/resources/templates/vue_templates/job/job-metadata.vue
+++ b/src/main/resources/templates/vue_templates/job/job-metadata.vue
@@ -25,9 +25,15 @@
                 <i class="fas fa-stop"></i>
                 Ended&nbsp;<b>{{job.endDateTime | dateTime}}</b>
             </p>
-            <p v-if="job.executionTime">
+            <p>
                 <i class="fas fa-stopwatch"></i>
-                Duration&nbsp;<b>{{job.executionTime}}ms</b>
+                Duration&nbsp;
+                <b>
+                    <job-timer
+                            :start-time="job.startDateTime"
+                            :end-time="job.endDateTime">
+                    </job-timer>
+                </b>
             </p>
         </div>
         <div class="job-actions" v-if="isRetryAvailable">
diff --git a/src/main/resources/templates/vue_templates/job/job-step.vue b/src/main/resources/templates/vue_templates/job/job-step.vue
index ee8cffe64..6b89f6a37 100644
--- a/src/main/resources/templates/vue_templates/job/job-step.vue
+++ b/src/main/resources/templates/vue_templates/job/job-step.vue
@@ -27,9 +27,15 @@
                     <i class="fas fa-stop"></i>
                     Ended&nbsp;<b>{{step.endDateTime | dateTime}}</b>
                 </p>
-                <p v-if="step.executionTime">
+                <p>
                     <i class="fas fa-stopwatch"></i>
-                    Duration&nbsp;<b>{{step.executionTime}}ms</b>
+                    Duration&nbsp;
+                    <b>
+                        <job-timer
+                                :start-time="step.startDateTime"
+                                :end-time="step.endDateTime">
+                        </job-timer>
+                    </b>
                 </p>
             </div>
             <console :id="'logs-' + id" :css-style="'max-height: 300px'" :logs="step.logs"></console>