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