Add scheduled job dropdown to pipelines list

app/assets/javascripts/lib/utils/datetime_utility.js

@@ -370,3 +370,23 @@ window.gl.utils = {
   getTimeago,
   localTimeAgo,
 };
+
+/**
+ * Formats milliseconds as timestamp (e.g. 01:02:03).
+ *
+ * @param milliseconds
+ * @returns {string}
+ */
+export const formatTime = milliseconds => {
+  const remainingSeconds = Math.floor(milliseconds / 1000) % 60;
+  const remainingMinutes = Math.floor(milliseconds / 1000 / 60) % 60;
+  const remainingHours = Math.floor(milliseconds / 1000 / 60 / 60);
+  let formattedTime = '';
+  if (remainingHours < 10) formattedTime += '0';
+  formattedTime += `${remainingHours}:`;
+  if (remainingMinutes < 10) formattedTime += '0';
+  formattedTime += `${remainingMinutes}:`;
+  if (remainingSeconds < 10) formattedTime += '0';
+  formattedTime += remainingSeconds;
+  return formattedTime;
+};

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

 <script>
+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';
@@ -35,6 +36,11 @@ export default {
       return !action.playable;
     },
+
+    remainingTime(action) {
+      const remainingMilliseconds = new Date(action.scheduled_at).getTime() - Date.now();
+      return formatTime(remainingMilliseconds);
+    },
   },
 };
 </script>
@@ -63,8 +69,8 @@ export default {
     <ul class="dropdown-menu dropdown-menu-right">
       <li
-        v-for="(action, i) in actions"
-        :key="i"
+        v-for="action in actions"
+        :key="action.path"
       >
         <button
           :class="{ disabled: isActionDisabled(action) }"
@@ -74,6 +80,13 @@ export default {
           @click="onClickAction(action.path)"
         >
           {{ action.name }}
+          <span
+            v-if="action.scheduled_at"
+            class="pull-right"
+          >
+            <icon name="clock" />
+            {{ remainingTime(action) }}
+          </span>
         </button>
       </li>
     </ul>

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

@@ -59,6 +59,9 @@ export default {
     };
   },
   computed: {
+    actions() {
+      return [...this.pipeline.details.manual_actions, ...this.pipeline.details.scheduled_actions];
+    },
     /**
      * If provided, returns the commit tag.
      * Needed to render the commit component column.
@@ -321,8 +324,8 @@ export default {
     >
       <div class="btn-group table-action-buttons">
         <pipelines-actions-component
-          v-if="pipeline.details.manual_actions.length"
-          :actions="pipeline.details.manual_actions"
+          v-if="actions.length > 0"
+          :actions="actions"
         />
         <pipelines-artifacts-component

spec/javascripts/datetime_utility_spec.js

@@ -6,9 +6,7 @@ describe('Date time utils', () => {
       const date = new Date();
       date.setFullYear(date.getFullYear() - 1);
-      expect(
-        datetimeUtility.timeFor(date),
-      ).toBe('Past due');
+      expect(datetimeUtility.timeFor(date)).toBe('Past due');
     });
     it('returns remaining time when in the future', () => {
@@ -19,9 +17,7 @@ describe('Date time utils', () => {
       // short of a full year, timeFor will return '11 months remaining'
       date.setDate(date.getDate() + 1);
-      expect(
-        datetimeUtility.timeFor(date),
-      ).toBe('1 year remaining');
+      expect(datetimeUtility.timeFor(date)).toBe('1 year remaining');
     });
   });
@@ -168,3 +164,20 @@ describe('getTimeframeWindowFrom', () => {
     });
   });
 });
+
+describe('formatTime', () => {
+  const expectedTimestamps = [
+    [0, '00:00:00'],
+    [1000, '00:00:01'],
+    [42000, '00:00:42'],
+    [121000, '00:02:01'],
+    [10921000, '03:02:01'],
+    [108000000, '30:00:00'],
+  ];
+
+  expectedTimestamps.forEach(([milliseconds, expectedTimestamp]) => {
+    it(`formats ${milliseconds}ms as ${expectedTimestamp}`, () => {
+      expect(datetimeUtility.formatTime(milliseconds)).toBe(expectedTimestamp);
+    });
+  });
+});