1 files changed, 49 insertions, 0 deletions
diff --git a/app/assets/javascripts/jobs/components/table/cells/duration_cell.vue b/app/assets/javascripts/jobs/components/table/cells/duration_cell.vue
new file mode 100644
index 00000000000..ba5732d3d43
--- /dev/null
+++ b/app/assets/javascripts/jobs/components/table/cells/duration_cell.vue
@@ -0,0 +1,49 @@
+<script>
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import timeagoMixin from '~/vue_shared/mixins/timeago';
+
+export default {
+  iconSize: 12,
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  components: {
+    GlIcon,
+  },
+  mixins: [timeagoMixin],
+  props: {
+    job: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    finishedTime() {
+      return this.job?.finishedAt;
+    },
+    duration() {
+      return this.job?.duration;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div v-if="duration" data-testid="job-duration">
+      <gl-icon name="timer" :size="$options.iconSize" data-testid="duration-icon" />
+      {{ durationTimeFormatted(duration) }}
+    </div>
+    <div v-if="finishedTime" data-testid="job-finished-time">
+      <gl-icon name="calendar" :size="$options.iconSize" data-testid="finished-time-icon" />
+      <time
+        v-gl-tooltip
+        :title="tooltipTitle(finishedTime)"
+        data-placement="top"
+        data-container="body"
+      >
+        {{ timeFormatted(finishedTime) }}
+      </time>
+    </div>
+  </div>
+</template>