1 files changed, 13 insertions, 5 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
index 19594c4955d..120f01db8f0 100644
--- a/app/assets/javascripts/jobs/components/table/cells/duration_cell.vue
+++ b/app/assets/javascripts/jobs/components/table/cells/duration_cell.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
-import timeagoMixin from '~/vue_shared/mixins/timeago';
+import { formatDate, getTimeago, durationTimeFormatted } from '~/lib/utils/datetime_utility';
 
 export default {
   iconSize: 12,
@@ -10,7 +10,6 @@ export default {
   components: {
     GlIcon,
   },
-  mixins: [timeagoMixin],
   props: {
     job: {
       type: Object,
@@ -24,6 +23,15 @@ export default {
     duration() {
       return this.job?.duration;
     },
+    timeFormatted() {
+      return getTimeago().format(this.finishedTime);
+    },
+    tooltipTitle() {
+      return formatDate(this.finishedTime);
+    },
+    durationFormatted() {
+      return durationTimeFormatted(this.duration);
+    },
   },
 };
 </script>
@@ -32,18 +40,18 @@ export default {
   <div>
     <div v-if="duration" data-testid="job-duration">
       <gl-icon name="timer" :size="$options.iconSize" data-testid="duration-icon" />
-      {{ durationTimeFormatted(duration) }}
+      {{ durationFormatted }}
     </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)"
+        :title="tooltipTitle"
         :datetime="finishedTime"
         data-placement="top"
         data-container="body"
       >
-        {{ timeFormatted(finishedTime) }}
+        {{ timeFormatted }}
       </time>
     </div>
   </div>