Add scheduled job dropdown to pipelines list

2 files changed, 20 insertions, 4 deletions

diff --git a/app/assets/javascripts/pipelines/components/pipelines_actions.vue b/app/assets/javascripts/pipelines/components/pipelines_actions.vue
index 017dd560621..fa5ad62f438 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_actions.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_actions.vue
@@ -1,4 +1,5 @@
 <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>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
index a39cc265601..bae6ff43ee4 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
+++ b/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