Introduce gl-countdown directive for updating delayed job timers

app/assets/javascripts/pipelines/components/pipelines_actions.vue

@@ -4,10 +4,12 @@ import { formatTime } from '~/lib/utils/datetime_utility';
 import eventHub from '../event_hub';
 import icon from '../../vue_shared/components/icon.vue';
 import tooltip from '../../vue_shared/directives/tooltip';
+import glCountdown from '~/vue_shared/directives/gl_countdown';
 export default {
   directives: {
     tooltip,
+    glCountdown,
   },
   components: {
     icon,
@@ -100,7 +102,10 @@ export default {
             class="pull-right"
           >
             <icon name="clock" />
-            {{ remainingTime(action) }}
+            <time
+              v-gl-countdown="{ endDate: action.scheduled_at }"
+              :datetime="action.scheduled_at"
+            >00:00:00</time>
           </span>
         </button>
       </li>

app/assets/javascripts/vue_shared/directives/gl_countdown.js

+import { formatTime } from '~/lib/utils/datetime_utility';
+
+const updateRemainingTime = (el, binding) => {
+  const { endDate } = binding.value;
+
+  const remainingMilliseconds = new Date(endDate).getTime() - Date.now();
+  if (remainingMilliseconds >= 0) {
+    el.innerText = formatTime(remainingMilliseconds);
+  }
+};
+
+export default {
+  bind(el, binding) {
+    updateRemainingTime(el, binding);
+    el.dataset.countdownUpdateIntervalId = window.setInterval(
+      () => updateRemainingTime(el, binding),
+      1000,
+    );
+  },
+
+  unbind(el) {
+    window.clearInterval(el.dataset.countdownUpdateIntervalId);
+  }
+};