diff options
author | kushalpandya <kushal@gitlab.com> | 2017-05-31 14:38:22 +0300 |
---|---|---|
committer | kushalpandya <kushal@gitlab.com> | 2017-05-31 14:38:22 +0300 |
commit | 2559a880eebd2b8beb0a29bad6ab9948dca0c010 (patch) | |
tree | 3fd34fe5d643e3381adbbec8c950e16b34031990 /app | |
parent | 33fe2af4a3cfe0d1f1b93b8c6546f796cde141f2 (diff) |
Prometheus Metrics Bundle
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/prometheus_metrics/index.js | 7 | ||||
-rw-r--r-- | app/assets/javascripts/prometheus_metrics/prometheus_metrics.js | 75 |
2 files changed, 82 insertions, 0 deletions
diff --git a/app/assets/javascripts/prometheus_metrics/index.js b/app/assets/javascripts/prometheus_metrics/index.js new file mode 100644 index 00000000000..9f20161783b --- /dev/null +++ b/app/assets/javascripts/prometheus_metrics/index.js @@ -0,0 +1,7 @@ +import PrometheusMetrics from './prometheus_metrics'; + +$(() => { + const prometheusMetrics = new PrometheusMetrics('.js-prometheus-metrics-monitoring'); + prometheusMetrics.init(); + prometheusMetrics.loadActiveMetrics(); +}); diff --git a/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js b/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js new file mode 100644 index 00000000000..0dc6f7727a2 --- /dev/null +++ b/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js @@ -0,0 +1,75 @@ +/* eslint-disable class-methods-use-this, promise/catch-or-return */ + +export default class PrometheusMetrics { + constructor(wrapperSelector) { + this.backOffRequestCounter = 0; + + this.$wrapper = $(wrapperSelector); + + this.$monitoredMetricsPanel = this.$wrapper.find('.js-panel-monitored-metrics'); + this.$monitoredMetricsCount = this.$monitoredMetricsPanel.find('.js-monitored-count'); + this.$monitoredMetricsLoading = this.$monitoredMetricsPanel.find('.js-loading-metrics'); + this.$monitoredMetricsEmpty = this.$monitoredMetricsPanel.find('.js-empty-metrics'); + this.$monitoredMetricsList = this.$monitoredMetricsPanel.find('.js-metrics-list'); + + this.$panelToggle = this.$wrapper.find('.js-panel-toggle'); + + this.activeMetricsEndpoint = this.$monitoredMetricsPanel.data('active-metrics'); + } + + init() { + this.$panelToggle.on('click', e => this.handlePanelToggle(e)); + } + + handlePanelToggle(e) { + const $toggleBtn = $(e.currentTarget); + const $currentPanelBody = $toggleBtn.parents('.panel').find('.panel-body'); + if ($currentPanelBody.is(':visible')) { + $currentPanelBody.addClass('hidden'); + $toggleBtn.removeClass('fa-caret-down').addClass('fa-caret-right'); + } else { + $currentPanelBody.removeClass('hidden'); + $toggleBtn.removeClass('fa-caret-right').addClass('fa-caret-down'); + } + } + + populateActiveMetrics(metrics) { + let totalMonitoredMetrics = 0; + metrics.forEach((metric) => { + this.$monitoredMetricsList.append(`<li>${metric.group}<span class="badge-count">${metric.active_metrics}</span></li>`); + totalMonitoredMetrics += metric.active_metrics; + }); + + this.$monitoredMetricsCount.text(totalMonitoredMetrics); + this.$monitoredMetricsLoading.addClass('hidden'); + this.$monitoredMetricsList.removeClass('hidden'); + } + + loadActiveMetrics() { + this.$monitoredMetricsLoading.removeClass('hidden'); + gl.utils.backOff((next, stop) => { + $.getJSON(this.activeMetricsEndpoint) + .done((res) => { + if (res && res.success) { + stop(res); + } else { + this.backOffRequestCounter = this.backOffRequestCounter += 1; + if (this.backOffRequestCounter < 3) { + next(); + } else { + stop(res); + } + } + }) + .fail(stop); + }) + .then((res) => { + if (res && res.data && res.data.length) { + this.populateActiveMetrics(res.data); + } else { + this.$monitoredMetricsLoading.addClass('hidden'); + this.$monitoredMetricsEmpty.removeClass('hidden'); + } + }); + } +} |