1 files changed, 78 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_pipelines_index/time_ago.js b/app/assets/javascripts/vue_pipelines_index/time_ago.js
new file mode 100644
index 00000000000..a383570857d
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/time_ago.js
@@ -0,0 +1,78 @@
+/* global Vue, gl */
+/* eslint-disable no-param-reassign */
+
+window.Vue = require('vue');
+require('../lib/utils/datetime_utility');
+
+const iconTimerSvg = require('../../../views/shared/icons/_icon_timer.svg');
+
+((gl) => {
+  gl.VueTimeAgo = Vue.extend({
+    data() {
+      return {
+        currentTime: new Date(),
+        iconTimerSvg,
+      };
+    },
+    props: ['pipeline'],
+    computed: {
+      timeAgo() {
+        return gl.utils.getTimeago();
+      },
+      localTimeFinished() {
+        return gl.utils.formatDate(this.pipeline.details.finished_at);
+      },
+      timeStopped() {
+        const changeTime = this.currentTime;
+        const options = {
+          weekday: 'long',
+          year: 'numeric',
+          month: 'short',
+          day: 'numeric',
+        };
+        options.timeZoneName = 'short';
+        const finished = this.pipeline.details.finished_at;
+        if (!finished && changeTime) return false;
+        return ({ words: this.timeAgo.format(finished) });
+      },
+      duration() {
+        const { duration } = this.pipeline.details;
+        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;
+      },
+    },
+    methods: {
+      changeTime() {
+        this.currentTime = new Date();
+      },
+    },
+    template: `
+      <td class="pipelines-time-ago">
+        <p class="duration" v-if='duration'>
+          <span v-html="iconTimerSvg"></span>
+          {{duration}}
+        </p>
+        <p class="finished-at" v-if='timeStopped'>
+          <i class="fa fa-calendar"></i>
+          <time
+            data-toggle="tooltip"
+            data-placement="top"
+            data-container="body"
+            :data-original-title='localTimeFinished'>
+            {{timeStopped.words}}
+          </time>
+        </p>
+      </td>
+    `,
+  });
+})(window.gl || (window.gl = {}));