Add dynamic timer for delayed jobs in job sidebar

2 files changed, 39 insertions, 1 deletions

diff --git a/app/assets/javascripts/jobs/components/job_container_item.vue b/app/assets/javascripts/jobs/components/job_container_item.vue
index cdac8a391d1..2bd4338722c 100644
--- a/app/assets/javascripts/jobs/components/job_container_item.vue
+++ b/app/assets/javascripts/jobs/components/job_container_item.vue
@@ -2,6 +2,8 @@
 import { GlTooltipDirective, GlLink } from '@gitlab-org/gitlab-ui';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import Icon from '~/vue_shared/components/icon.vue';
+import delayedJobMixin from '~/jobs/mixins/delayed_job_mixin';
+import { sprintf } from '~/locale';
 
 export default {
   components: {
@@ -12,6 +14,7 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  mixins: [delayedJobMixin],
   props: {
     job: {
       type: Object,
@@ -24,7 +27,14 @@ export default {
   },
   computed: {
     tooltipText() {
-      return `${this.job.name} - ${this.job.status.tooltip}`;
+      const { name, status } = this.job;
+      const text = `${name} - ${status.tooltip}`;
+
+      if (this.isDelayedJob) {
+        return sprintf(text, { remainingTime: this.remainingTime })
+      }
+
+      return text;
     },
   },
 };
diff --git a/spec/javascripts/jobs/components/job_container_item_spec.js b/spec/javascripts/jobs/components/job_container_item_spec.js
index 8588eda19c8..1bfb083b8d8 100644
--- a/spec/javascripts/jobs/components/job_container_item_spec.js
+++ b/spec/javascripts/jobs/components/job_container_item_spec.js
@@ -4,6 +4,7 @@ import mountComponent from 'spec/helpers/vue_mount_component_helper';
 import job from '../mock_data';
 
 describe('JobContainerItem', () => {
+  const delayedJobFixture = getJSONFixture('jobs/delayed.json');
   const Component = Vue.extend(JobContainerItem);
   let vm;
 
@@ -70,4 +71,31 @@ describe('JobContainerItem', () => {
       expect(vm.$el).toHaveSpriteIcon('retry');
     });
   });
+
+  describe('for delayed job', () => {
+    beforeEach(() => {
+      const remainingMilliseconds = 1337000;
+      spyOn(Date, 'now').and.callFake(
+        () => new Date(delayedJobFixture.scheduled_at).getTime() - remainingMilliseconds,
+      );
+    });
+
+    it('displays remaining time in tooltip', done => {
+      vm = mountComponent(Component, {
+        job: delayedJobFixture,
+        isActive: false,
+      });
+
+      Vue.nextTick()
+        .then(() => {
+          expect(
+            vm.$el
+              .querySelector('.js-job-link')
+              .getAttribute('data-original-title'),
+          ).toEqual('delayed job - delayed manual action (00:22:17)');
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
 });