Add dynamic timer for delayed jobs in job list

app/assets/javascripts/pages/projects/jobs/index/index.js

+import Vue from 'vue';
+import GlCountdown from '~/vue_shared/components/gl_countdown.vue';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const remainingTimeElements = document.querySelectorAll('.js-remaining-time');
+  remainingTimeElements.forEach(
+    el =>
+      new Vue({
+        ...GlCountdown,
+        el,
+        propsData: {
+          endDateString: el.dateTime,
+        },
+      }),
+  );
+});

app/views/projects/ci/builds/_build.html.haml

@@ -105,10 +105,10 @@
             = icon('remove', class: 'cred')
         - elsif job.scheduled?
           .btn-group
-            .btn.btn-default.has-tooltip{ disabled: true,
-              title: job.scheduled_at }
+            .btn.btn-default{ disabled: true }
               = sprite_icon('planning')
-              = duration_in_numbers(job.execute_in)
+              %time.js-remaining-time{ datetime: job.scheduled_at.utc.iso8601 }
+                = duration_in_numbers(job.execute_in)
             - confirmation_message = s_("DelayedJobs|Are you sure you want to run %{job_name} immediately? This job will run automatically after it's timer finishes.") % { job_name: job.name }
             = link_to play_project_job_path(job.project, job, return_to: request.original_url),
               method: :post,

changelogs/unreleased/winh-job-list-dynamic-timer.yml

+---
+title: Add dynamic timer for delayed jobs in job list
+merge_request: 22656
+author:
+type: changed