Commit 8780abfd authored by Jose Ivan Vargas's avatar Jose Ivan Vargas

backport of custom metrics for the common metrics section of CE

parent 5e8138aa
import _ from 'underscore';
import { s__, n__, sprintf } from '~/locale';
import axios from '../lib/utils/axios_utils'; import axios from '../lib/utils/axios_utils';
import PANEL_STATE from './constants'; import PANEL_STATE from './constants';
import { backOff } from '../lib/utils/common_utils'; import { backOff } from '../lib/utils/common_utils';
...@@ -20,6 +22,7 @@ export default class PrometheusMetrics { ...@@ -20,6 +22,7 @@ export default class PrometheusMetrics {
this.$missingEnvVarMetricsList = this.$missingEnvVarPanel.find('.js-missing-var-metrics-list'); this.$missingEnvVarMetricsList = this.$missingEnvVarPanel.find('.js-missing-var-metrics-list');
this.activeMetricsEndpoint = this.$monitoredMetricsPanel.data('activeMetrics'); this.activeMetricsEndpoint = this.$monitoredMetricsPanel.data('activeMetrics');
this.helpMetricsPath = this.$monitoredMetricsPanel.data('metrics-help-path');
this.$panelToggle.on('click', e => this.handlePanelToggle(e)); this.$panelToggle.on('click', e => this.handlePanelToggle(e));
} }
...@@ -59,23 +62,39 @@ export default class PrometheusMetrics { ...@@ -59,23 +62,39 @@ export default class PrometheusMetrics {
populateActiveMetrics(metrics) { populateActiveMetrics(metrics) {
let totalMonitoredMetrics = 0; let totalMonitoredMetrics = 0;
let totalMissingEnvVarMetrics = 0; let totalMissingEnvVarMetrics = 0;
let totalExporters = 0;
metrics.forEach((metric) => { metrics.forEach((metric) => {
this.$monitoredMetricsList.append(`<li>${metric.group}<span class="badge">${metric.active_metrics}</span></li>`); if (metric.active_metrics > 0) {
totalMonitoredMetrics += metric.active_metrics; totalExporters += 1;
if (metric.metrics_missing_requirements > 0) { this.$monitoredMetricsList.append(`<li>${_.escape(metric.group)}<span class="badge">${_.escape(metric.active_metrics)}</span></li>`);
this.$missingEnvVarMetricsList.append(`<li>${metric.group}</li>`); totalMonitoredMetrics += metric.active_metrics;
totalMissingEnvVarMetrics += 1; if (metric.metrics_missing_requirements > 0) {
this.$missingEnvVarMetricsList.append(`<li>${_.escape(metric.group)}</li>`);
totalMissingEnvVarMetrics += 1;
}
} }
}); });
this.$monitoredMetricsCount.text(totalMonitoredMetrics); if (totalMonitoredMetrics === 0) {
this.showMonitoringMetricsPanelState(PANEL_STATE.LIST); const emptyCommonMetricsText = sprintf(s__('PrometheusService|<p class="text-tertiary">No <a href="%{docsUrl}">common metrics</a> were found</p>'), {
docsUrl: this.helpMetricsPath,
}, false);
this.$monitoredMetricsEmpty.empty();
this.$monitoredMetricsEmpty.append(emptyCommonMetricsText);
this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY);
} else {
const metricsCountText = sprintf(s__('PrometheusService|%{exporters} with %{metrics} were found'), {
exporters: n__('%d exporter', '%d exporters', totalExporters),
metrics: n__('%d metric', '%d metrics', totalMonitoredMetrics),
});
this.$monitoredMetricsCount.text(metricsCountText);
this.showMonitoringMetricsPanelState(PANEL_STATE.LIST);
if (totalMissingEnvVarMetrics > 0) { if (totalMissingEnvVarMetrics > 0) {
this.$missingEnvVarPanel.removeClass('hidden'); this.$missingEnvVarPanel.removeClass('hidden');
this.$missingEnvVarPanel.find('.flash-container').off('click'); this.$missingEnvVarMetricCount.text(totalMissingEnvVarMetrics);
this.$missingEnvVarMetricCount.text(totalMissingEnvVarMetrics); }
} }
} }
...@@ -97,15 +116,15 @@ export default class PrometheusMetrics { ...@@ -97,15 +116,15 @@ export default class PrometheusMetrics {
}) })
.catch(stop); .catch(stop);
}) })
.then((res) => { .then((res) => {
if (res && res.data && res.data.length) { if (res && res.data && res.data.length) {
this.populateActiveMetrics(res.data); this.populateActiveMetrics(res.data);
} else { } else {
this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY);
}
})
.catch(() => {
this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY); this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY);
} });
})
.catch(() => {
this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY);
});
} }
} }
...@@ -14,6 +14,10 @@ ...@@ -14,6 +14,10 @@
color: $gl-text-color-secondary; color: $gl-text-color-secondary;
} }
.text-tertiary {
color: $gl-text-color-tertiary;
}
.text-primary, .text-primary,
.text-primary:hover { .text-primary:hover {
color: $brand-primary; color: $brand-primary;
......
...@@ -12,6 +12,12 @@ ...@@ -12,6 +12,12 @@
margin: 0; margin: 0;
} }
.flash-warning {
@extend .alert;
@extend .alert-warning;
margin: 0;
}
.flash-alert { .flash-alert {
@extend .alert; @extend .alert;
@extend .alert-danger; @extend .alert-danger;
......
...@@ -205,7 +205,8 @@ ...@@ -205,7 +205,8 @@
} }
.badge { .badge {
font-size: inherit; font-size: 12px;
line-height: 12px;
} }
.panel-heading .badge-count { .panel-heading .badge-count {
......
...@@ -7,21 +7,19 @@ ...@@ -7,21 +7,19 @@
= link_to s_('PrometheusService|More information'), help_page_path('user/project/integrations/prometheus') = link_to s_('PrometheusService|More information'), help_page_path('user/project/integrations/prometheus')
.col-lg-9 .col-lg-9
.panel.panel-default.js-panel-monitored-metrics{ data: { active_metrics: active_common_project_prometheus_metrics_path(@project, :json) } } .panel.panel-default.js-panel-monitored-metrics{ data: { active_metrics: active_common_project_prometheus_metrics_path(@project, :json), metrics_help_path: help_page_path('user/project/integrations/prometheus_library/metrics') } }
.panel-heading .panel-heading
%h3.panel-title %h3.panel-title
= s_('PrometheusService|Monitored') = s_('PrometheusService|Common metrics')
%span.badge.js-monitored-count 0 %span.badge.js-monitored-count 0
.panel-body .panel-body
.loading-metrics.text-center.js-loading-metrics .loading-metrics.js-loading-metrics
= icon('spinner spin 3x', class: 'metrics-load-spinner') %p.prepend-top-10.prepend-left-10
%p = icon('spinner spin', class: 'metrics-load-spinner')
= s_('PrometheusService|Finding and configuring metrics...') = s_('PrometheusService|Finding and configuring metrics...')
.empty-metrics.text-center.hidden.js-empty-metrics .empty-metrics.hidden.js-empty-metrics
= custom_icon('icon_empty_metrics') %p.text-tertiary.prepend-top-10.prepend-left-10
%p = s_('PrometheusService|Waiting for your first deployment to an environment to find common metrics')
= s_('PrometheusService|No metrics are being monitored. To start monitoring, deploy to an environment.')
= link_to s_('PrometheusService|View environments'), project_environments_path(@project), class: 'btn btn-success'
%ul.list-unstyled.metrics-list.hidden.js-metrics-list %ul.list-unstyled.metrics-list.hidden.js-metrics-list
.panel.panel-default.hidden.js-panel-missing-env-vars .panel.panel-default.hidden.js-panel-missing-env-vars
......
...@@ -85,7 +85,7 @@ describe('PrometheusMetrics', () => { ...@@ -85,7 +85,7 @@ describe('PrometheusMetrics', () => {
expect(prometheusMetrics.$monitoredMetricsLoading.hasClass('hidden')).toBeTruthy(); expect(prometheusMetrics.$monitoredMetricsLoading.hasClass('hidden')).toBeTruthy();
expect(prometheusMetrics.$monitoredMetricsList.hasClass('hidden')).toBeFalsy(); expect(prometheusMetrics.$monitoredMetricsList.hasClass('hidden')).toBeFalsy();
expect(prometheusMetrics.$monitoredMetricsCount.text()).toEqual('12'); expect(prometheusMetrics.$monitoredMetricsCount.text()).toEqual('3 exporters with 12 metrics were found');
expect($metricsListLi.length).toEqual(metrics.length); expect($metricsListLi.length).toEqual(metrics.length);
expect($metricsListLi.first().find('.badge').text()).toEqual(`${metrics[0].active_metrics}`); expect($metricsListLi.first().find('.badge').text()).toEqual(`${metrics[0].active_metrics}`);
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment