debian-mirror-gitlab/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js

152 lines
5.4 KiB
JavaScript
Raw Normal View History

2018-05-09 12:01:36 +05:30
import $ from 'jquery';
2020-04-08 14:13:33 +05:30
import { escape } from 'lodash';
2018-03-27 19:54:05 +05:30
import { s__, n__, sprintf } from '~/locale';
2018-03-17 18:26:18 +05:30
import axios from '../lib/utils/axios_utils';
import { backOff } from '../lib/utils/common_utils';
2021-03-11 19:13:27 +05:30
import PANEL_STATE from './constants';
2017-09-10 17:25:29 +05:30
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.$missingEnvVarPanel = this.$wrapper.find('.js-panel-missing-env-vars');
2021-01-29 00:20:46 +05:30
this.$panelToggleRight = this.$missingEnvVarPanel.find('.js-panel-toggle-right');
this.$panelToggleDown = this.$missingEnvVarPanel.find('.js-panel-toggle-down');
2017-09-10 17:25:29 +05:30
this.$missingEnvVarMetricCount = this.$missingEnvVarPanel.find('.js-env-var-count');
this.$missingEnvVarMetricsList = this.$missingEnvVarPanel.find('.js-missing-var-metrics-list');
2018-03-27 19:54:05 +05:30
this.activeMetricsEndpoint = this.$monitoredMetricsPanel.data('activeMetrics');
this.helpMetricsPath = this.$monitoredMetricsPanel.data('metrics-help-path');
2017-09-10 17:25:29 +05:30
2021-03-08 18:12:59 +05:30
this.$panelToggleRight.on('click', (e) => this.handlePanelToggle(e));
this.$panelToggleDown.on('click', (e) => this.handlePanelToggle(e));
2017-09-10 17:25:29 +05:30
}
2020-04-22 19:07:51 +05:30
init() {
this.loadActiveMetrics();
}
2017-09-10 17:25:29 +05:30
handlePanelToggle(e) {
const $toggleBtn = $(e.currentTarget);
2018-11-08 19:23:39 +05:30
const $currentPanelBody = $toggleBtn.closest('.card').find('.card-body');
2017-09-10 17:25:29 +05:30
$currentPanelBody.toggleClass('hidden');
2021-01-29 00:20:46 +05:30
if ($toggleBtn.hasClass('js-panel-toggle-right')) {
$toggleBtn.addClass('hidden');
this.$panelToggleDown.removeClass('hidden');
} else if ($toggleBtn.hasClass('js-panel-toggle-down')) {
$toggleBtn.addClass('hidden');
this.$panelToggleRight.removeClass('hidden');
2017-09-10 17:25:29 +05:30
}
}
showMonitoringMetricsPanelState(stateName) {
switch (stateName) {
case PANEL_STATE.LOADING:
this.$monitoredMetricsLoading.removeClass('hidden');
this.$monitoredMetricsEmpty.addClass('hidden');
this.$monitoredMetricsList.addClass('hidden');
break;
case PANEL_STATE.LIST:
this.$monitoredMetricsLoading.addClass('hidden');
this.$monitoredMetricsEmpty.addClass('hidden');
this.$monitoredMetricsList.removeClass('hidden');
break;
default:
this.$monitoredMetricsLoading.addClass('hidden');
this.$monitoredMetricsEmpty.removeClass('hidden');
this.$monitoredMetricsList.addClass('hidden');
break;
}
}
populateActiveMetrics(metrics) {
let totalMonitoredMetrics = 0;
let totalMissingEnvVarMetrics = 0;
2018-03-27 19:54:05 +05:30
let totalExporters = 0;
2017-09-10 17:25:29 +05:30
2021-03-08 18:12:59 +05:30
metrics.forEach((metric) => {
2018-03-27 19:54:05 +05:30
if (metric.active_metrics > 0) {
totalExporters += 1;
2018-12-13 13:39:08 +05:30
this.$monitoredMetricsList.append(
2020-04-08 14:13:33 +05:30
`<li>${escape(metric.group)}<span class="badge">${escape(
2018-12-13 13:39:08 +05:30
metric.active_metrics,
)}</span></li>`,
);
2018-03-27 19:54:05 +05:30
totalMonitoredMetrics += metric.active_metrics;
if (metric.metrics_missing_requirements > 0) {
2020-04-08 14:13:33 +05:30
this.$missingEnvVarMetricsList.append(`<li>${escape(metric.group)}</li>`);
2018-03-27 19:54:05 +05:30
totalMissingEnvVarMetrics += 1;
}
2017-09-10 17:25:29 +05:30
}
});
2018-03-27 19:54:05 +05:30
if (totalMonitoredMetrics === 0) {
2018-12-13 13:39:08 +05:30
const emptyCommonMetricsText = sprintf(
2020-10-24 23:57:45 +05:30
s__('PrometheusService|No %{docsUrlStart}common metrics%{docsUrlEnd} were found'),
2018-12-13 13:39:08 +05:30
{
2020-10-24 23:57:45 +05:30
docsUrlStart: `<a href="${this.helpMetricsPath}">`,
docsUrlEnd: '</a>',
2018-12-13 13:39:08 +05:30
},
false,
);
2018-03-27 19:54:05 +05:30
this.$monitoredMetricsEmpty.empty();
2020-10-24 23:57:45 +05:30
this.$monitoredMetricsEmpty.append(`<p class="text-tertiary">${emptyCommonMetricsText}</p>`);
2018-03-27 19:54:05 +05:30
this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY);
} else {
2018-12-13 13:39:08 +05:30
const metricsCountText = sprintf(
s__('PrometheusService|%{exporters} with %{metrics} were found'),
{
exporters: n__('%d exporter', '%d exporters', totalExporters),
metrics: n__('%d metric', '%d metrics', totalMonitoredMetrics),
},
);
2018-03-27 19:54:05 +05:30
this.$monitoredMetricsCount.text(metricsCountText);
this.showMonitoringMetricsPanelState(PANEL_STATE.LIST);
2017-09-10 17:25:29 +05:30
2018-03-27 19:54:05 +05:30
if (totalMissingEnvVarMetrics > 0) {
this.$missingEnvVarPanel.removeClass('hidden');
this.$missingEnvVarMetricCount.text(totalMissingEnvVarMetrics);
}
2017-09-10 17:25:29 +05:30
}
}
loadActiveMetrics() {
this.showMonitoringMetricsPanelState(PANEL_STATE.LOADING);
2018-03-17 18:26:18 +05:30
backOff((next, stop) => {
2018-12-13 13:39:08 +05:30
axios
.get(this.activeMetricsEndpoint)
2018-03-17 18:26:18 +05:30
.then(({ data }) => {
if (data && data.success) {
stop(data);
2017-09-10 17:25:29 +05:30
} else {
2018-11-08 19:23:39 +05:30
this.backOffRequestCounter += 1;
2017-09-10 17:25:29 +05:30
if (this.backOffRequestCounter < 3) {
next();
} else {
2018-03-17 18:26:18 +05:30
stop(data);
2017-09-10 17:25:29 +05:30
}
}
})
2018-03-17 18:26:18 +05:30
.catch(stop);
2017-09-10 17:25:29 +05:30
})
2021-03-08 18:12:59 +05:30
.then((res) => {
2018-03-27 19:54:05 +05:30
if (res && res.data && res.data.length) {
this.populateActiveMetrics(res.data);
} else {
this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY);
}
})
.catch(() => {
2017-09-10 17:25:29 +05:30
this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY);
2018-03-27 19:54:05 +05:30
});
2017-09-10 17:25:29 +05:30
}
}