Converted prometheus_metrics.js to use axios

2 files changed, 33 insertions, 28 deletions

diff --git a/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js b/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
index 55c93923cc8..59ad5b45855 100644
--- a/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
+++ b/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
@@ -1,3 +1,4 @@
+import axios from '../lib/utils/axios_utils';
 import PANEL_STATE from './constants';
 import { backOff } from '../lib/utils/common_utils';
 
@@ -81,24 +82,20 @@ export default class PrometheusMetrics {
   loadActiveMetrics() {
     this.showMonitoringMetricsPanelState(PANEL_STATE.LOADING);
     backOff((next, stop) => {
-      $.ajax({
-        url: this.activeMetricsEndpoint,
-        dataType: 'json',
-        global: false,
-      })
-        .done((res) => {
-          if (res && res.success) {
-            stop(res);
+      axios.get(this.activeMetricsEndpoint)
+        .then(({ data }) => {
+          if (data && data.success) {
+            stop(data);
           } else {
             this.backOffRequestCounter = this.backOffRequestCounter += 1;
             if (this.backOffRequestCounter < 3) {
               next();
             } else {
-              stop(res);
+              stop(data);
             }
           }
         })
-        .fail(stop);
+        .catch(stop);
     })
     .then((res) => {
       if (res && res.data && res.data.length) {
diff --git a/spec/javascripts/prometheus_metrics/prometheus_metrics_spec.js b/spec/javascripts/prometheus_metrics/prometheus_metrics_spec.js
index b24567ffc0c..f6c0f51cf62 100644
--- a/spec/javascripts/prometheus_metrics/prometheus_metrics_spec.js
+++ b/spec/javascripts/prometheus_metrics/prometheus_metrics_spec.js
@@ -1,3 +1,5 @@
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import PrometheusMetrics from '~/prometheus_metrics/prometheus_metrics';
 import PANEL_STATE from '~/prometheus_metrics/constants';
 import { metrics, missingVarMetrics } from './mock_data';
@@ -102,25 +104,38 @@ describe('PrometheusMetrics', () => {
 
   describe('loadActiveMetrics', () => {
     let prometheusMetrics;
+    let mock;
+
+    function mockSuccess() {
+      mock.onGet(prometheusMetrics.activeMetricsEndpoint).reply(200, {
+        data: metrics,
+        success: true,
+      });
+    }
+
+    function mockError() {
+      mock.onGet(prometheusMetrics.activeMetricsEndpoint).networkError();
+    }
 
     beforeEach(() => {
+      spyOn(axios, 'get').and.callThrough();
+
       prometheusMetrics = new PrometheusMetrics('.js-prometheus-metrics-monitoring');
+
+      mock = new MockAdapter(axios);
+    });
+
+    afterEach(() => {
+      mock.restore();
     });
 
     it('should show loader animation while response is being loaded and hide it when request is complete', (done) => {
-      const deferred = $.Deferred();
-      spyOn($, 'ajax').and.returnValue(deferred.promise());
+      mockSuccess();
 
       prometheusMetrics.loadActiveMetrics();
 
       expect(prometheusMetrics.$monitoredMetricsLoading.hasClass('hidden')).toBeFalsy();
-      expect($.ajax).toHaveBeenCalledWith({
-        url: prometheusMetrics.activeMetricsEndpoint,
-        dataType: 'json',
-        global: false,
-      });
-
-      deferred.resolve({ data: metrics, success: true });
+      expect(axios.get).toHaveBeenCalledWith(prometheusMetrics.activeMetricsEndpoint);
 
       setTimeout(() => {
         expect(prometheusMetrics.$monitoredMetricsLoading.hasClass('hidden')).toBeTruthy();
@@ -129,14 +144,10 @@ describe('PrometheusMetrics', () => {
     });
 
     it('should show empty state if response failed to load', (done) => {
-      const deferred = $.Deferred();
-      spyOn($, 'ajax').and.returnValue(deferred.promise());
-      spyOn(prometheusMetrics, 'populateActiveMetrics');
+      mockError();
 
       prometheusMetrics.loadActiveMetrics();
 
-      deferred.reject();
-
       setTimeout(() => {
         expect(prometheusMetrics.$monitoredMetricsLoading.hasClass('hidden')).toBeTruthy();
         expect(prometheusMetrics.$monitoredMetricsEmpty.hasClass('hidden')).toBeFalsy();
@@ -145,14 +156,11 @@ describe('PrometheusMetrics', () => {
     });
 
     it('should populate metrics list once response is loaded', (done) => {
-      const deferred = $.Deferred();
-      spyOn($, 'ajax').and.returnValue(deferred.promise());
       spyOn(prometheusMetrics, 'populateActiveMetrics');
+      mockSuccess();
 
       prometheusMetrics.loadActiveMetrics();
 
-      deferred.resolve({ data: metrics, success: true });
-
       setTimeout(() => {
         expect(prometheusMetrics.populateActiveMetrics).toHaveBeenCalledWith(metrics);
         done();