1 files changed, 98 insertions, 0 deletions
diff --git a/app/assets/javascripts/pipelines/components/time_ago.js b/app/assets/javascripts/pipelines/components/time_ago.js
new file mode 100644
index 00000000000..188f74cc705
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/time_ago.js
@@ -0,0 +1,98 @@
+import iconTimerSvg from 'icons/_icon_timer.svg';
+import '../../lib/utils/datetime_utility';
+
+export default {
+  props: {
+    finishedTime: {
+      type: String,
+      required: true,
+    },
+
+    duration: {
+      type: Number,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      iconTimerSvg,
+    };
+  },
+
+  updated() {
+    $(this.$refs.tooltip).tooltip('fixTitle');
+  },
+
+  computed: {
+    hasDuration() {
+      return this.duration > 0;
+    },
+
+    hasFinishedTime() {
+      return this.finishedTime !== '';
+    },
+
+    localTimeFinished() {
+      return gl.utils.formatDate(this.finishedTime);
+    },
+
+    durationFormated() {
+      const date = new Date(this.duration * 1000);
+
+      let hh = date.getUTCHours();
+      let mm = date.getUTCMinutes();
+      let ss = date.getSeconds();
+
+      // left pad
+      if (hh < 10) {
+        hh = `0${hh}`;
+      }
+      if (mm < 10) {
+        mm = `0${mm}`;
+      }
+      if (ss < 10) {
+        ss = `0${ss}`;
+      }
+
+      return `${hh}:${mm}:${ss}`;
+    },
+
+    finishedTimeFormated() {
+      const timeAgo = gl.utils.getTimeago();
+
+      return timeAgo.format(this.finishedTime);
+    },
+  },
+
+  template: `
+    <td class="pipelines-time-ago">
+      <p
+        class="duration"
+        v-if="hasDuration">
+        <span
+          v-html="iconTimerSvg">
+        </span>
+        {{durationFormated}}
+      </p>
+
+      <p
+        class="finished-at"
+        v-if="hasFinishedTime">
+
+        <i
+          class="fa fa-calendar"
+          aria-hidden="true" />
+
+        <time
+          ref="tooltip"
+          data-toggle="tooltip"
+          data-placement="top"
+          data-container="body"
+          :title="localTimeFinished">
+          {{finishedTimeFormated}}
+        </time>
+      </p>
+    </td>
+  `,
+};