Commit e6737300 authored by Jose Ivan Vargas's avatar Jose Ivan Vargas

Replaced vue-resource for axios in the prometheus dashboard

parent 6da130c2
import Vue from 'vue'; import axios from '../../lib/utils/axios_utils';
import VueResource from 'vue-resource';
import statusCodes from '../../lib/utils/http_status'; import statusCodes from '../../lib/utils/http_status';
import { backOff } from '../../lib/utils/common_utils'; import { backOff } from '../../lib/utils/common_utils';
Vue.use(VueResource);
const MAX_REQUESTS = 3; const MAX_REQUESTS = 3;
function backOffRequest(makeRequestCallback) { function backOffRequest(makeRequestCallback) {
...@@ -32,8 +29,8 @@ export default class MonitoringService { ...@@ -32,8 +29,8 @@ export default class MonitoringService {
} }
getGraphsData() { getGraphsData() {
return backOffRequest(() => Vue.http.get(this.metricsEndpoint)) return backOffRequest(() => axios.get(this.metricsEndpoint))
.then(resp => resp.json()) .then(resp => resp.data)
.then((response) => { .then((response) => {
if (!response || !response.data) { if (!response || !response.data) {
throw new Error('Unexpected metrics data response from prometheus endpoint'); throw new Error('Unexpected metrics data response from prometheus endpoint');
...@@ -43,8 +40,8 @@ export default class MonitoringService { ...@@ -43,8 +40,8 @@ export default class MonitoringService {
} }
getDeploymentData() { getDeploymentData() {
return backOffRequest(() => Vue.http.get(this.deploymentEndpoint)) return backOffRequest(() => axios.get(this.deploymentEndpoint))
.then(resp => resp.json()) .then(resp => resp.data)
.then((response) => { .then((response) => {
if (!response || !response.deployments) { if (!response || !response.deployments) {
throw new Error('Unexpected deployment data response from prometheus endpoint'); throw new Error('Unexpected deployment data response from prometheus endpoint');
......
import Vue from 'vue'; import Vue from 'vue';
import MockAdapter from 'axios-mock-adapter';
import Dashboard from '~/monitoring/components/dashboard.vue'; 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', () => { describe('Dashboard', () => {
const fixtureName = 'environments/metrics/metrics.html.raw'; const fixtureName = 'environments/metrics/metrics.html.raw';
...@@ -26,13 +28,17 @@ describe('Dashboard', () => { ...@@ -26,13 +28,17 @@ describe('Dashboard', () => {
}); });
describe('requests information to the server', () => { describe('requests information to the server', () => {
let mock;
beforeEach(() => { beforeEach(() => {
document.querySelector('#prometheus-graphs').setAttribute('data-has-metrics', 'true'); 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(() => { afterEach(() => {
Vue.http.interceptors = _.without(Vue.http.interceptors, MonitorMockInterceptor); mock.reset();
}); });
it('shows up a loading state', (done) => { it('shows up a loading state', (done) => {
......
...@@ -2425,13 +2425,6 @@ const metricsGroupsAPIResponse = { ...@@ -2425,13 +2425,6 @@ const metricsGroupsAPIResponse = {
export default 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 = [ export const deploymentData = [
{ {
id: 111, id: 111,
...@@ -8320,11 +8313,3 @@ export function convertDatesMultipleSeries(multipleSeries) { ...@@ -8320,11 +8313,3 @@ export function convertDatesMultipleSeries(multipleSeries) {
}); });
return convertedMultiple; return convertedMultiple;
} }
export function MonitorMockInterceptor(request, next) {
const body = responseMockData[request.method.toUpperCase()][request.url];
next(request.respondWith(JSON.stringify(body), {
status: 200,
}));
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment