1 files changed, 33 insertions, 5 deletions
diff --git a/app/assets/javascripts/pipelines/components/pipelines_actions.vue b/app/assets/javascripts/pipelines/components/pipelines_actions.vue
index 017dd560621..16e69759091 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_actions.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_actions.vue
@@ -1,4 +1,6 @@
 <script>
+import { s__, sprintf } from '~/locale';
+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';
@@ -22,10 +24,24 @@ export default {
     };
   },
   methods: {
-    onClickAction(endpoint) {
+    onClickAction(action) {
+      if (action.scheduled_at) {
+        const confirmationMessage = sprintf(
+          s__(
+            "DelayedJobs|Are you sure you want to run %{jobName} immediately? This job will run automatically after it's timer finishes.",
+          ),
+          { jobName: action.name },
+        );
+        // https://gitlab.com/gitlab-org/gitlab-ce/issues/52156
+        // eslint-disable-next-line no-alert
+        if (!window.confirm(confirmationMessage)) {
+          return;
+        }
+      }
+
       this.isLoading = true;
 
-      eventHub.$emit('postAction', endpoint);
+      eventHub.$emit('postAction', action.path);
     },
 
     isActionDisabled(action) {
@@ -35,6 +51,11 @@ export default {
 
       return !action.playable;
     },
+
+    remainingTime(action) {
+      const remainingMilliseconds = new Date(action.scheduled_at).getTime() - Date.now();
+      return formatTime(Math.max(0, remainingMilliseconds));
+    },
   },
 };
 </script>
@@ -63,17 +84,24 @@ 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) }"
           :disabled="isActionDisabled(action)"
           type="button"
           class="js-pipeline-action-link no-btn btn"
-          @click="onClickAction(action.path)"
+          @click="onClickAction(action)"
         >
           {{ action.name }}
+          <span
+            v-if="action.scheduled_at"
+            class="pull-right"
+          >
+            <icon name="clock" />
+            {{ remainingTime(action) }}
+          </span>
         </button>
       </li>
     </ul>