2 files changed, 76 insertions, 0 deletions
diff --git a/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue b/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue
new file mode 100644
index 00000000000..555725cbe12
--- /dev/null
+++ b/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue
@@ -0,0 +1,47 @@
+<script>
+  import axios from '~/lib/utils/axios_utils';
+  import Flash from '~/flash';
+  import modal from '~/vue_shared/components/modal.vue';
+  import { s__ } from '~/locale';
+  import { redirectTo } from '~/lib/utils/url_utility';
+
+  export default {
+    components: {
+      modal,
+    },
+    props: {
+      url: {
+        type: String,
+        required: true,
+      },
+    },
+    computed: {
+      text() {
+        return s__('AdminArea|You’re about to stop all jobs. This will halt all current jobs that are running.');
+      },
+    },
+    methods: {
+      onSubmit() {
+        return axios.post(this.url)
+          .then((response) => {
+            // follow the rediect to refresh the page
+            redirectTo(response.request.responseURL);
+          })
+          .catch((error) => {
+            Flash(s__('AdminArea|Stopping jobs failed'));
+            throw error;
+          });
+      },
+    },
+  };
+</script>
+
+<template>
+  <modal
+    id="stop-jobs-modal"
+    :title="s__('AdminArea|Stop all jobs?')"
+    :text="text"
+    kind="danger"
+    :primary-button-label="s__('AdminArea|Stop jobs')"
+    @submit="onSubmit" />
+</template>
diff --git a/app/assets/javascripts/pages/admin/jobs/index/index.js b/app/assets/javascripts/pages/admin/jobs/index/index.js
new file mode 100644
index 00000000000..0e004bd9174
--- /dev/null
+++ b/app/assets/javascripts/pages/admin/jobs/index/index.js
@@ -0,0 +1,29 @@
+import Vue from 'vue';
+
+import Translate from '~/vue_shared/translate';
+
+import stopJobsModal from './components/stop_jobs_modal.vue';
+
+Vue.use(Translate);
+
+export default () => {
+  const stopJobsButton = document.getElementById('stop-jobs-button');
+
+  // eslint-disable-next-line no-new
+  new Vue({
+    el: '#stop-jobs-modal',
+    components: {
+      stopJobsModal,
+    },
+    mounted() {
+      stopJobsButton.classList.remove('disabled');
+    },
+    render(createElement) {
+      return createElement('stop-jobs-modal', {
+        props: {
+          url: stopJobsButton.dataset.url,
+        },
+      });
+    },
+  });
+};