1 files changed, 38 insertions, 12 deletions

diff --git a/app/assets/javascripts/pages/admin/jobs/index/index.js b/app/assets/javascripts/pages/admin/jobs/index/index.js
index c82b186f671..9df52557212 100644
--- a/app/assets/javascripts/pages/admin/jobs/index/index.js
+++ b/app/assets/javascripts/pages/admin/jobs/index/index.js
@@ -1,31 +1,33 @@
 import Vue from 'vue';
 import { BV_SHOW_MODAL } from '~/lib/utils/constants';
 import Translate from '~/vue_shared/translate';
-import { STOP_JOBS_MODAL_ID } from './components/constants';
-import StopJobsModal from './components/stop_jobs_modal.vue';
+import { CANCEL_JOBS_MODAL_ID } from './components/constants';
+import CancelJobsModal from './components/cancel_jobs_modal.vue';
+import AdminJobsTableApp from './components/table/admin_jobs_table_app.vue';
 
 Vue.use(Translate);
 
 function initJobs() {
   const buttonId = 'js-stop-jobs-button';
-  const stopJobsButton = document.getElementById(buttonId);
-  if (stopJobsButton) {
+  const cancelJobsButton = document.getElementById(buttonId);
+  if (cancelJobsButton) {
     // eslint-disable-next-line no-new
     new Vue({
-      el: `#js-${STOP_JOBS_MODAL_ID}`,
+      el: `#js-${CANCEL_JOBS_MODAL_ID}`,
       components: {
-        StopJobsModal,
+        CancelJobsModal,
       },
       mounted() {
-        stopJobsButton.classList.remove('disabled');
-        stopJobsButton.addEventListener('click', () => {
-          this.$root.$emit(BV_SHOW_MODAL, STOP_JOBS_MODAL_ID, `#${buttonId}`);
+        cancelJobsButton.classList.remove('disabled');
+        cancelJobsButton.addEventListener('click', () => {
+          this.$root.$emit(BV_SHOW_MODAL, CANCEL_JOBS_MODAL_ID, `#${buttonId}`);
         });
       },
       render(createElement) {
-        return createElement(STOP_JOBS_MODAL_ID, {
+        return createElement(CANCEL_JOBS_MODAL_ID, {
           props: {
-            url: stopJobsButton.dataset.url,
+            url: cancelJobsButton.dataset.url,
+            modalId: CANCEL_JOBS_MODAL_ID,
           },
         });
       },
@@ -33,4 +35,28 @@ function initJobs() {
   }
 }
 
-initJobs();
+export function initAdminJobsApp() {
+  const containerEl = document.getElementById('admin-jobs-app');
+
+  if (!containerEl) return false;
+
+  const { jobStatuses, emptyStateSvgPath, url } = containerEl.dataset;
+
+  return new Vue({
+    el: containerEl,
+    provide: {
+      url,
+      emptyStateSvgPath,
+      jobStatuses: JSON.parse(jobStatuses),
+    },
+    render(createElement) {
+      return createElement(AdminJobsTableApp);
+    },
+  });
+}
+
+if (gon.features.adminJobsVue) {
+  initAdminJobsApp();
+} else {
+  initJobs();
+}