format duration in vue: time_ago computed property in a dynamic fashion

1 files changed, 11 insertions, 2 deletions

diff --git a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6
index 7e6d17d4e13..655110feba1 100644
--- a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6
@@ -31,8 +31,17 @@
       },
       duration() {
         const { duration } = this.pipeline.details;
-        if (duration === 0) return '00:00:00';
-        if (duration !== null) return duration;
+        const date = new Date(duration * 1000);
+
+        let hh = date.getUTCHours();
+        let mm = date.getUTCMinutes();
+        let ss = date.getSeconds();
+
+        if (hh < 10) hh = `0${hh}`;
+        if (mm < 10) mm = `0${mm}`;
+        if (ss < 10) ss = `0${ss}`;
+
+        if (duration !== null) return `${hh}:${mm}:${ss}`;
         return false;
       },
     },