1 files changed, 66 insertions, 0 deletions
diff --git a/app/assets/javascripts/pages/admin/jobs/components/cancel_jobs_modal.vue b/app/assets/javascripts/pages/admin/jobs/components/cancel_jobs_modal.vue
new file mode 100644
index 00000000000..b2c5326fefd
--- /dev/null
+++ b/app/assets/javascripts/pages/admin/jobs/components/cancel_jobs_modal.vue
@@ -0,0 +1,66 @@
+<script>
+import { GlModal } from '@gitlab/ui';
+import { createAlert } from '~/alert';
+import axios from '~/lib/utils/axios_utils';
+import { redirectTo } from '~/lib/utils/url_utility'; // eslint-disable-line import/no-deprecated
+import {
+  CANCEL_TEXT,
+  CANCEL_JOBS_FAILED_TEXT,
+  CANCEL_JOBS_MODAL_TITLE,
+  CANCEL_JOBS_WARNING,
+  PRIMARY_ACTION_TEXT,
+} from './constants';
+
+export default {
+  components: {
+    GlModal,
+  },
+  props: {
+    url: {
+      type: String,
+      required: true,
+    },
+    modalId: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    onSubmit() {
+      return axios
+        .post(this.url)
+        .then((response) => {
+          // follow the rediect to refresh the page
+          redirectTo(response.request.responseURL); // eslint-disable-line import/no-deprecated
+        })
+        .catch((error) => {
+          createAlert({
+            message: CANCEL_JOBS_FAILED_TEXT,
+          });
+          throw error;
+        });
+    },
+  },
+  primaryAction: {
+    text: PRIMARY_ACTION_TEXT,
+    attributes: { variant: 'danger' },
+  },
+  cancelAction: {
+    text: CANCEL_TEXT,
+  },
+  CANCEL_JOBS_WARNING,
+  CANCEL_JOBS_MODAL_TITLE,
+};
+</script>
+
+<template>
+  <gl-modal
+    :modal-id="modalId"
+    :action-primary="$options.primaryAction"
+    :action-cancel="$options.cancelAction"
+    :title="$options.CANCEL_JOBS_MODAL_TITLE"
+    @primary="onSubmit"
+  >
+    {{ $options.CANCEL_JOBS_WARNING }}
+  </gl-modal>
+</template>