diff options
author | Mike Greiling <mgreiling@gitlab.com> | 2017-09-13 15:57:51 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-09-13 15:57:51 +0300 |
commit | 70e9e8844b97f01b6592526e9c4734c89d375ac5 (patch) | |
tree | 3824b48e44c79dc5ed0fbeeeeeedb3be00aa8b4d /app/assets/javascripts/monitoring | |
parent | 7771afd536e8f11108c295e415252055c0ae6adb (diff) |
Refactor MonitoringService class
Diffstat (limited to 'app/assets/javascripts/monitoring')
-rw-r--r-- | app/assets/javascripts/monitoring/components/dashboard.vue | 61 | ||||
-rw-r--r-- | app/assets/javascripts/monitoring/services/monitoring_service.js | 49 |
2 files changed, 56 insertions, 54 deletions
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue index b596c4f383f..5d96b193fce 100644 --- a/app/assets/javascripts/monitoring/components/dashboard.vue +++ b/app/assets/javascripts/monitoring/components/dashboard.vue @@ -1,7 +1,6 @@ <script> /* global Flash */ import _ from 'underscore'; - import statusCodes from '../../lib/utils/http_status'; import MonitoringService from '../services/monitoring_service'; import GraphGroup from './graph_group.vue'; import Graph from './graph.vue'; @@ -21,10 +20,9 @@ hasMetrics: gl.utils.convertPermissionToBoolean(metricsData.hasMetrics), documentationPath: metricsData.documentationPath, settingsPath: metricsData.settingsPath, - endpoint: metricsData.additionalMetrics, + metricsEndpoint: metricsData.additionalMetrics, deploymentEndpoint: metricsData.deploymentEndpoint, showEmptyState: true, - backOffRequestCounter: 0, updateAspectRatio: false, updatedAspectRatios: 0, resizeThrottled: {}, @@ -39,50 +37,16 @@ methods: { getGraphsData() { - const maxNumberOfRequests = 3; this.state = 'loading'; - gl.utils.backOff((next, stop) => { - this.service.get().then((resp) => { - if (resp.status === statusCodes.NO_CONTENT) { - this.backOffRequestCounter = this.backOffRequestCounter += 1; - if (this.backOffRequestCounter < maxNumberOfRequests) { - next(); - } else { - stop(new Error('Failed to connect to the prometheus server')); - } - } else { - stop(resp); - } - }).catch(stop); - }) - .then((resp) => { - if (resp.status === statusCodes.NO_CONTENT) { - this.state = 'unableToConnect'; - return false; - } - return resp.json(); - }) - .then((metricGroupsData) => { - if (!metricGroupsData) return false; - this.store.storeMetrics(metricGroupsData.data); - return this.getDeploymentData(); - }) - .then((deploymentData) => { - if (deploymentData !== false) { - this.store.storeDeploymentData(deploymentData.deployments); - this.showEmptyState = false; - } - return {}; - }) - .catch(() => { - this.state = 'unableToConnect'; - }); - }, - - getDeploymentData() { - return this.service.getDeploymentData(this.deploymentEndpoint) - .then(resp => resp.json()) - .catch(() => new Flash('Error getting deployment information.')); + Promise.all([ + this.service.getGraphsData() + .then(data => this.store.storeMetrics(data)), + this.service.getDeploymentData() + .then(data => this.store.storeDeploymentData(data)) + .catch(() => new Flash('Error getting deployment information.')), + ]) + .then(() => { this.showEmptyState = false; }) + .catch(() => { this.state = 'unableToConnect'; }); }, resize() { @@ -99,7 +63,10 @@ }, created() { - this.service = new MonitoringService(this.endpoint); + this.service = new MonitoringService({ + metricsEndpoint: this.metricsEndpoint, + deploymentEndpoint: this.deploymentEndpoint, + }); eventHub.$on('toggleAspectRatio', this.toggleAspectRatio); }, diff --git a/app/assets/javascripts/monitoring/services/monitoring_service.js b/app/assets/javascripts/monitoring/services/monitoring_service.js index 1e9ae934853..4ed651d5740 100644 --- a/app/assets/javascripts/monitoring/services/monitoring_service.js +++ b/app/assets/javascripts/monitoring/services/monitoring_service.js @@ -1,19 +1,54 @@ import Vue from 'vue'; import VueResource from 'vue-resource'; +import statusCodes from '../../lib/utils/http_status'; Vue.use(VueResource); +const MAX_REQUESTS = 3; + +function backOffRequest(makeRequestCallback) { + let requestCounter = 0; + return gl.utils.backOff((next, stop) => { + makeRequestCallback().then((resp) => { + if (resp.status === statusCodes.NO_CONTENT) { + requestCounter += 1; + if (requestCounter < MAX_REQUESTS) { + next(); + } else { + stop(new Error('Failed to connect to the prometheus server')); + } + } else { + stop(resp); + } + }).catch(stop); + }); +} + export default class MonitoringService { - constructor(endpoint) { - this.graphs = Vue.resource(endpoint); + constructor({ metricsEndpoint, deploymentEndpoint }) { + this.metricsEndpoint = metricsEndpoint; + this.deploymentEndpoint = deploymentEndpoint; } - get() { - return this.graphs.get(); + getGraphsData() { + return backOffRequest(() => Vue.http.get(this.metricsEndpoint)) + .then(resp => resp.json()) + .then((response) => { + if (!response || !response.data) { + throw new Error('Unexpected metrics data response from prometheus endpoint'); + } + return response.data; + }); } - // eslint-disable-next-line class-methods-use-this - getDeploymentData(endpoint) { - return Vue.http.get(endpoint); + getDeploymentData() { + return backOffRequest(() => Vue.http.get(this.deploymentEndpoint)) + .then(resp => resp.json()) + .then((response) => { + if (!response || !response.deployments) { + throw new Error('Unexpected deployment data response from prometheus endpoint'); + } + return response.deployments; + }); } } |