Use axios instead of vue resource - step 1

5 files changed, 30 insertions, 19 deletions

diff --git a/app/assets/javascripts/clusters/services/clusters_service.js b/app/assets/javascripts/clusters/services/clusters_service.js
index 0ac8e68187d..ce14c9a9945 100644
--- a/app/assets/javascripts/clusters/services/clusters_service.js
+++ b/app/assets/javascripts/clusters/services/clusters_service.js
@@ -1,10 +1,7 @@
-import axios from 'axios';
-import setAxiosCsrfToken from '../../lib/utils/axios_utils';
+import axios from '../../lib/utils/axios_utils';
 
 export default class ClusterService {
   constructor(options = {}) {
-    setAxiosCsrfToken();
-
     this.options = options;
     this.appInstallEndpointMap = {
       helm: this.options.installHelmEndpoint,
@@ -18,7 +15,6 @@ export default class ClusterService {
   }
 
   installApplication(appId) {
-    const endpoint = this.appInstallEndpointMap[appId];
-    return axios.post(endpoint);
+    return axios.post(this.appInstallEndpointMap[appId]);
   }
 }
diff --git a/app/assets/javascripts/jobs/job_details_mediator.js b/app/assets/javascripts/jobs/job_details_mediator.js
index 3e2658f9fc1..5a216f8fae2 100644
--- a/app/assets/javascripts/jobs/job_details_mediator.js
+++ b/app/assets/javascripts/jobs/job_details_mediator.js
@@ -29,8 +29,8 @@ export default class JobMediator {
     this.poll = new Poll({
       resource: this.service,
       method: 'getJob',
-      successCallback: this.successCallback.bind(this),
-      errorCallback: this.errorCallback.bind(this),
+      successCallback: response => this.successCallback(response),
+      errorCallback: () => this.errorCallback(),
     });
 
     if (!Visibility.hidden()) {
@@ -57,7 +57,7 @@ export default class JobMediator {
 
   successCallback(response) {
     this.state.isLoading = false;
-    return response.json().then(data => this.store.storeJob(data));
+    return this.store.storeJob(response.data);
   }
 
   errorCallback() {
diff --git a/app/assets/javascripts/jobs/services/job_service.js b/app/assets/javascripts/jobs/services/job_service.js
index eaf1c6e500a..b746489c45c 100644
--- a/app/assets/javascripts/jobs/services/job_service.js
+++ b/app/assets/javascripts/jobs/services/job_service.js
@@ -1,14 +1,11 @@
-import Vue from 'vue';
-import VueResource from 'vue-resource';
-
-Vue.use(VueResource);
+import axios from '../../lib/utils/axios_utils';
 
 export default class JobService {
   constructor(endpoint) {
-    this.job = Vue.resource(endpoint);
+    this.job = endpoint;
   }
 
   getJob() {
-    return this.job.get();
+    return axios.get(this.job);
   }
 }
diff --git a/app/assets/javascripts/lib/utils/axios_utils.js b/app/assets/javascripts/lib/utils/axios_utils.js
index 45bff245827..7aeeca3b283 100644
--- a/app/assets/javascripts/lib/utils/axios_utils.js
+++ b/app/assets/javascripts/lib/utils/axios_utils.js
@@ -1,6 +1,22 @@
 import axios from 'axios';
 import csrf from './csrf';
 
-export default function setAxiosCsrfToken() {
-  axios.defaults.headers.common[csrf.headerKey] = csrf.token;
-}
+axios.defaults.headers.common[csrf.headerKey] = csrf.token;
+
+// Maintain a global counter for active requests
+// see: spec/support/wait_for_requests.rb
+axios.interceptors.request.use((config) => {
+  window.activeVueResources = window.activeVueResources || 0;
+  window.activeVueResources += 1;
+
+  return config;
+});
+
+// Remove the global counter
+axios.interceptors.response.use((config) => {
+  window.activeVueResources -= 1;
+
+  return config;
+});
+
+export default axios;
diff --git a/app/assets/javascripts/lib/utils/poll.js b/app/assets/javascripts/lib/utils/poll.js
index 65a8cf2c891..7fca80c2fdb 100644
--- a/app/assets/javascripts/lib/utils/poll.js
+++ b/app/assets/javascripts/lib/utils/poll.js
@@ -3,7 +3,9 @@ import { normalizeHeaders } from './common_utils';
 
 /**
  * Polling utility for handling realtime updates.
- * Service for vue resouce and method need to be provided as props
+ * Requirements: Promise based HTTP client
+ *
+ * Service for promise based http client and method need to be provided as props
  *
  * @example
  * new Poll({