Replaced vue-resource for axios in the prometheus dashboard

app/assets/javascripts/monitoring/services/monitoring_service.js

@@ -1,10 +1,7 @@
-import Vue from 'vue';
-import VueResource from 'vue-resource';
+import axios from '../../lib/utils/axios_utils';
 import statusCodes from '../../lib/utils/http_status';
 import { backOff } from '../../lib/utils/common_utils';
 
-Vue.use(VueResource);
-
 const MAX_REQUESTS = 3;
 
 function backOffRequest(makeRequestCallback) {
@@ -32,8 +29,8 @@ export default class MonitoringService {
   }
 
   getGraphsData() {
-    return backOffRequest(() => Vue.http.get(this.metricsEndpoint))
-      .then(resp => resp.json())
+    return backOffRequest(() => axios.get(this.metricsEndpoint))
+      .then(resp => resp.data)
       .then((response) => {
         if (!response || !response.data) {
           throw new Error('Unexpected metrics data response from prometheus endpoint');
@@ -43,8 +40,8 @@ export default class MonitoringService {
   }
 
   getDeploymentData() {
-    return backOffRequest(() => Vue.http.get(this.deploymentEndpoint))
-      .then(resp => resp.json())
+    return backOffRequest(() => axios.get(this.deploymentEndpoint))
+      .then(resp => resp.data)
       .then((response) => {
         if (!response || !response.deployments) {
           throw new Error('Unexpected deployment data response from prometheus endpoint');

spec/javascripts/monitoring/dashboard_spec.js

@@ -1,6 +1,8 @@
 import Vue from 'vue';
+import MockAdapter from 'axios-mock-adapter';
 import Dashboard from '~/monitoring/components/dashboard.vue';
-import { MonitorMockInterceptor } from './mock_data';
+import axios from '~/lib/utils/axios_utils';
+import { metricsGroupsAPIResponse, mockApiEndpoint } from './mock_data';
 
 describe('Dashboard', () => {
   const fixtureName = 'environments/metrics/metrics.html.raw';
@@ -26,13 +28,17 @@ describe('Dashboard', () => {
   });
 
   describe('requests information to the server', () => {
+    let mock;
     beforeEach(() => {
       document.querySelector('#prometheus-graphs').setAttribute('data-has-metrics', 'true');
-      Vue.http.interceptors.push(MonitorMockInterceptor);
+      mock = new MockAdapter(axios);
+      mock.onGet(mockApiEndpoint).reply(200, {
+        metricsGroupsAPIResponse,
+      });
     });
 
     afterEach(() => {
-      Vue.http.interceptors = _.without(Vue.http.interceptors, MonitorMockInterceptor);
+      mock.reset();
     });
 
     it('shows up a loading state', (done) => {

spec/javascripts/monitoring/mock_data.js

@@ -2425,13 +2425,6 @@ const metricsGroupsAPIResponse = {
 
 export default metricsGroupsAPIResponse;
 
-const responseMockData = {
-  'GET': {
-    '/root/hello-prometheus/environments/30/additional_metrics.json': metricsGroupsAPIResponse,
-    'http://test.host/frontend-fixtures/environments-project/environments/1/additional_metrics.json': metricsGroupsAPIResponse, // TODO: MAke sure this works in the monitoring_bundle_spec
-  },
-};
-
 export const deploymentData = [
   {
     id: 111,
@@ -8320,11 +8313,3 @@ export function convertDatesMultipleSeries(multipleSeries) {
   });
   return convertedMultiple;
 }
-
-export function MonitorMockInterceptor(request, next) {
-  const body = responseMockData[request.method.toUpperCase()][request.url];
-
-  next(request.respondWith(JSON.stringify(body), {
-    status: 200,
-  }));
-}