Merge branch 'winh-delayed-jobs-dynamic-timer' into 'master'

Add dynamic timer to delayed jobs

See merge request gitlab-org/gitlab-ce!22382

4 files changed, 96 insertions, 10 deletions

diff --git a/app/assets/javascripts/jobs/components/job_app.vue b/app/assets/javascripts/jobs/components/job_app.vue
index aff483876f8..35104c80694 100644
--- a/app/assets/javascripts/jobs/components/job_app.vue
+++ b/app/assets/javascripts/jobs/components/job_app.vue
@@ -16,6 +16,8 @@ import Log from './job_log.vue';
 import LogTopBar from './job_log_controllers.vue';
 import StuckBlock from './stuck_block.vue';
 import Sidebar from './sidebar.vue';
+import { sprintf } from '~/locale';
+import delayedJobMixin from '../mixins/delayed_job_mixin';
 
 export default {
   name: 'JobPageApp',
@@ -33,6 +35,7 @@ export default {
     Sidebar,
     GlLoadingIcon,
   },
+  mixins: [delayedJobMixin],
   props: {
     runnerSettingsUrl: {
       type: String,
@@ -92,6 +95,17 @@ export default {
     shouldRenderContent() {
       return !this.isLoading && !this.hasError;
     },
+
+    emptyStateTitle() {
+      const { emptyStateIllustration, remainingTime } = this;
+      const { title } = emptyStateIllustration;
+
+      if (this.isDelayedJob) {
+        return sprintf(title, { remainingTime });
+      }
+
+      return title;
+    },
   },
   watch: {
     // Once the job log is loaded,
@@ -272,7 +286,7 @@ export default {
           class="js-job-empty-state"
           :illustration-path="emptyStateIllustration.image"
           :illustration-size-class="emptyStateIllustration.size"
-          :title="emptyStateIllustration.title"
+          :title="emptyStateTitle"
           :content="emptyStateIllustration.content"
           :action="emptyStateAction"
         />
diff --git a/app/assets/javascripts/jobs/components/job_container_item.vue b/app/assets/javascripts/jobs/components/job_container_item.vue
index cdac8a391d1..3ddcfd11dca 100644
--- a/app/assets/javascripts/jobs/components/job_container_item.vue
+++ b/app/assets/javascripts/jobs/components/job_container_item.vue
@@ -1,7 +1,10 @@
 <script>
-import { GlTooltipDirective, GlLink } from '@gitlab-org/gitlab-ui';
+import { GlLink } from '@gitlab-org/gitlab-ui';
+import tooltip from '~/vue_shared/directives/tooltip';
 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: {
@@ -10,8 +13,9 @@ export default {
     GlLink,
   },
   directives: {
-    GlTooltip: GlTooltipDirective,
+    tooltip,
   },
+  mixins: [delayedJobMixin],
   props: {
     job: {
       type: Object,
@@ -24,7 +28,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;
     },
   },
 };
@@ -39,7 +50,7 @@ export default {
     }"
   >
     <gl-link
-      v-gl-tooltip
+      v-tooltip
       :href="job.status.details_path"
       :title="tooltipText"
       data-boundary="viewport"
diff --git a/app/assets/javascripts/jobs/mixins/delayed_job_mixin.js b/app/assets/javascripts/jobs/mixins/delayed_job_mixin.js
new file mode 100644
index 00000000000..8c7fb785a61
--- /dev/null
+++ b/app/assets/javascripts/jobs/mixins/delayed_job_mixin.js
@@ -0,0 +1,50 @@
+import { calculateRemainingMilliseconds, formatTime } from '~/lib/utils/datetime_utility';
+
+export default {
+  data() {
+    return {
+      remainingTime: formatTime(0),
+      remainingTimeIntervalId: null,
+    };
+  },
+
+  mounted() {
+    this.startRemainingTimeInterval();
+  },
+
+  beforeDestroy() {
+    if (this.remainingTimeIntervalId) {
+      clearInterval(this.remainingTimeIntervalId);
+    }
+  },
+
+  computed: {
+    isDelayedJob() {
+      return this.job && this.job.scheduled;
+    },
+  },
+
+  watch: {
+    isDelayedJob() {
+      this.startRemainingTimeInterval();
+    },
+  },
+
+  methods: {
+    startRemainingTimeInterval() {
+      if (this.remainingTimeIntervalId) {
+        clearInterval(this.remainingTimeIntervalId);
+      }
+
+      if (this.isDelayedJob) {
+        this.updateRemainingTime();
+        this.remainingTimeIntervalId = setInterval(() => this.updateRemainingTime(), 1000);
+      }
+    },
+
+    updateRemainingTime() {
+      const remainingMilliseconds = calculateRemainingMilliseconds(this.job.scheduled_at);
+      this.remainingTime = formatTime(remainingMilliseconds);
+    },
+  },
+};
diff --git a/app/assets/javascripts/pipelines/components/graph/job_item.vue b/app/assets/javascripts/pipelines/components/graph/job_item.vue
index a1504592bbc..7cdde8a53b3 100644
--- a/app/assets/javascripts/pipelines/components/graph/job_item.vue
+++ b/app/assets/javascripts/pipelines/components/graph/job_item.vue
@@ -2,6 +2,8 @@
 import ActionComponent from './action_component.vue';
 import JobNameComponent from './job_name_component.vue';
 import tooltip from '../../../vue_shared/directives/tooltip';
+import { sprintf } from '~/locale';
+import delayedJobMixin from '~/jobs/mixins/delayed_job_mixin';
 
 /**
  * Renders the badge for the pipeline graph and the job's dropdown.
@@ -36,6 +38,7 @@ export default {
   directives: {
     tooltip,
   },
+  mixins: [delayedJobMixin],
   props: {
     job: {
       type: Object,
@@ -52,6 +55,7 @@ export default {
       default: Infinity,
     },
   },
+
   computed: {
     status() {
       return this.job && this.job.status ? this.job.status : {};
@@ -59,17 +63,23 @@ export default {
 
     tooltipText() {
       const textBuilder = [];
+      const { name: jobName } = this.job;
 
-      if (this.job.name) {
-        textBuilder.push(this.job.name);
+      if (jobName) {
+        textBuilder.push(jobName);
       }
 
-      if (this.job.name && this.status.tooltip) {
+      const { tooltip: statusTooltip } = this.status;
+      if (jobName && statusTooltip) {
         textBuilder.push('-');
       }
 
-      if (this.status.tooltip) {
-        textBuilder.push(this.job.status.tooltip);
+      if (statusTooltip) {
+        if (this.isDelayedJob) {
+          textBuilder.push(sprintf(statusTooltip, { remainingTime: this.remainingTime }));
+        } else {
+          textBuilder.push(statusTooltip);
+        }
       }
 
       return textBuilder.join(' ');
@@ -88,6 +98,7 @@ export default {
       return this.job.status && this.job.status.action && this.job.status.action.path;
     },
   },
+
   methods: {
     pipelineActionRequestComplete() {
       this.$emit('pipelineActionRequestComplete');