✨ : use timer component to display durations of job and step

gaia-app · Oct 25, 2019 · 22918d0 · 22918d0
1 parent 1d7acb3
commit 22918d0
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>