diff options
author | Phil Hughes <me@iamphill.com> | 2017-04-25 21:03:10 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-04-25 21:03:10 +0300 |
commit | cc52dfab92116ca91fda37e07ad9cef21a62ce69 (patch) | |
tree | a1c13c4c8a843491a12034eb459adaf5b5fe27ad | |
parent | 9852cae8d7a8ef6fd5ab30987a126f9bb9ba904b (diff) | |
parent | 61abdb1544c487cfe62f2ab6ac746757615ce518 (diff) |
Merge branch 'metrics-graph-error-fix' into 'master'
Metrics graph error fix
Closes #30840
See merge request !10839
-rw-r--r-- | app/assets/javascripts/monitoring/prometheus_graph.js | 63 | ||||
-rw-r--r-- | changelogs/unreleased/metrics-graph-error-fix.yml | 4 |
2 files changed, 38 insertions, 29 deletions
diff --git a/app/assets/javascripts/monitoring/prometheus_graph.js b/app/assets/javascripts/monitoring/prometheus_graph.js index aff507abb91..78bb0e6fb47 100644 --- a/app/assets/javascripts/monitoring/prometheus_graph.js +++ b/app/assets/javascripts/monitoring/prometheus_graph.js @@ -22,6 +22,7 @@ class PrometheusGraph { const hasMetrics = $prometheusContainer.data('has-metrics'); this.docLink = $prometheusContainer.data('doc-link'); this.integrationLink = $prometheusContainer.data('prometheus-integration'); + this.state = ''; $(document).ajaxError(() => {}); @@ -38,8 +39,9 @@ class PrometheusGraph { this.configureGraph(); this.init(); } else { + const prevState = this.state; this.state = '.js-getting-started'; - this.updateState(); + this.updateState(prevState); } } @@ -53,26 +55,26 @@ class PrometheusGraph { } init() { - this.getData().then((metricsResponse) => { + return this.getData().then((metricsResponse) => { let enoughData = true; - Object.keys(metricsResponse.metrics).forEach((key) => { - let currentKey; - if (key === 'cpu_values' || key === 'memory_values') { - currentKey = metricsResponse.metrics[key]; - if (Object.keys(currentKey).length === 0) { - enoughData = false; - } - } - }); - if (!enoughData) { - this.state = '.js-loading'; - this.updateState(); + if (typeof metricsResponse === 'undefined') { + enoughData = false; } else { + Object.keys(metricsResponse.metrics).forEach((key) => { + if (key === 'cpu_values' || key === 'memory_values') { + const currentData = (metricsResponse.metrics[key])[0]; + if (currentData.values.length <= 2) { + enoughData = false; + } + } + }); + } + if (enoughData) { + $(prometheusStatesContainer).hide(); + $(prometheusParentGraphContainer).show(); this.transformData(metricsResponse); this.createGraph(); } - }).catch(() => { - new Flash('An error occurred when trying to load metrics. Please try again.'); }); } @@ -342,6 +344,8 @@ class PrometheusGraph { getData() { const maxNumberOfRequests = 3; + this.state = '.js-loading'; + this.updateState(); return gl.utils.backOff((next, stop) => { $.ajax({ url: metricsEndpoint, @@ -352,12 +356,11 @@ class PrometheusGraph { this.backOffRequestCounter = this.backOffRequestCounter += 1; if (this.backOffRequestCounter < maxNumberOfRequests) { next(); - } else { - stop({ - status: resp.status, - metrics: data, - }); + } else if (this.backOffRequestCounter >= maxNumberOfRequests) { + stop(new Error('loading')); } + } else if (!data.success) { + stop(new Error('loading')); } else { stop({ status: resp.status, @@ -373,8 +376,9 @@ class PrometheusGraph { return resp.metrics; }) .catch(() => { + const prevState = this.state; this.state = '.js-unable-to-connect'; - this.updateState(); + this.updateState(prevState); }); } @@ -382,19 +386,20 @@ class PrometheusGraph { Object.keys(metricsResponse.metrics).forEach((key) => { if (key === 'cpu_values' || key === 'memory_values') { const metricValues = (metricsResponse.metrics[key])[0]; - if (metricValues !== undefined) { - this.graphSpecificProperties[key].data = metricValues.values.map(metric => ({ - time: new Date(metric[0] * 1000), - value: metric[1], - })); - } + this.graphSpecificProperties[key].data = metricValues.values.map(metric => ({ + time: new Date(metric[0] * 1000), + value: metric[1], + })); } }); } - updateState() { + updateState(prevState) { const $statesContainer = $(prometheusStatesContainer); $(prometheusParentGraphContainer).hide(); + if (prevState) { + $(`${prevState}`, $statesContainer).addClass('hidden'); + } $(`${this.state}`, $statesContainer).removeClass('hidden'); $(prometheusStatesContainer).show(); } diff --git a/changelogs/unreleased/metrics-graph-error-fix.yml b/changelogs/unreleased/metrics-graph-error-fix.yml new file mode 100644 index 00000000000..2698b92e1f1 --- /dev/null +++ b/changelogs/unreleased/metrics-graph-error-fix.yml @@ -0,0 +1,4 @@ +--- +title: Fixed Prometheus monitoring graphs not showing empty states in certain scenarios +merge_request: +author: |