Commit dfd69fee authored by Jose Ivan Vargas's avatar Jose Ivan Vargas

Deleted unused code, added ux improvements and translations

parent c4e46877
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';
...@@ -59,23 +60,33 @@ export default class PrometheusMetrics { ...@@ -59,23 +60,33 @@ 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) => {
if (metric.active_metrics > 0) {
totalExporters += 1;
this.$monitoredMetricsList.append(`<li>${metric.group}<span class="badge">${metric.active_metrics}</span></li>`); this.$monitoredMetricsList.append(`<li>${metric.group}<span class="badge">${metric.active_metrics}</span></li>`);
totalMonitoredMetrics += metric.active_metrics; totalMonitoredMetrics += metric.active_metrics;
if (metric.metrics_missing_requirements > 0) { if (metric.metrics_missing_requirements > 0) {
this.$missingEnvVarMetricsList.append(`<li>${metric.group}</li>`); this.$missingEnvVarMetricsList.append(`<li>${metric.group}</li>`);
totalMissingEnvVarMetrics += 1; totalMissingEnvVarMetrics += 1;
} }
}
}); });
if (totalMonitoredMetrics === 0) { if (totalMonitoredMetrics === 0) {
const docsUrl = 'https://docs.gitlab.com/ee/user/project/integrations/prometheus_library/metrics.html'; const emptyCommonMetricsText = sprintf(s__('PrometheusService|<p class="text-tertiary">No <a href="%{docsUrl}">common metrics</a> were found</p>'), {
docsUrl: '/help/user/project/integrations/prometheus_library/metrics',
}, false);
this.$monitoredMetricsEmpty.empty(); this.$monitoredMetricsEmpty.empty();
this.$monitoredMetricsEmpty.append(`<p>No <a href="${docsUrl}">common metrics</a>were found</p>`); this.$monitoredMetricsEmpty.append(emptyCommonMetricsText);
this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY); this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY);
} else { } else {
this.$monitoredMetricsCount.text(totalMonitoredMetrics); const metricsCountText = sprintf(s__('PrometheusService|%{exporters} with %{metrics} were found'), {
exporters: `${totalExporters} ${n__('exporter', 'exporters', totalExporters)}`,
metrics: `${totalMonitoredMetrics} ${n__('metric', 'metrics', totalMonitoredMetrics)}`,
});
this.$monitoredMetricsCount.text(metricsCountText);
this.showMonitoringMetricsPanelState(PANEL_STATE.LIST); this.showMonitoringMetricsPanelState(PANEL_STATE.LIST);
if (totalMissingEnvVarMetrics > 0) { if (totalMissingEnvVarMetrics > 0) {
......
...@@ -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;
......
...@@ -328,7 +328,3 @@ ...@@ -328,7 +328,3 @@
.deprecated-service { .deprecated-service {
cursor: default; cursor: default;
} }
.custom-metrics-light-text {
color: $gl-text-color-tertiary;
}
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
= s_('PrometheusService|Metrics') = s_('PrometheusService|Metrics')
%p %p
= s_('PrometheusService|Common metrics are automatically monitored based on a library of metrics from popular exporters.') = s_('PrometheusService|Common metrics are automatically monitored based on a library of metrics from popular exporters.')
= link_to s_('PrometheusService|More information'), help_page_path('user/project/integrations/prometheus_library/metrics'), target: '_blank' = link_to s_('PrometheusService|More information'), help_page_path('user/project/integrations/prometheus_library/metrics'), target: '_blank', rel: "noopener noreferrer"
.col-lg-9 .col-lg-9
.panel.panel-default.custom-monitored-metrics.js-panel-custom-monitored-metrics{ data: { active_custom_metrics: project_prometheus_metrics_path(@project, :json), environments_data: environments_list_data } } .panel.panel-default.custom-monitored-metrics.js-panel-custom-monitored-metrics{ data: { active_custom_metrics: project_prometheus_metrics_path(@project, :json), environments_data: environments_list_data } }
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
= icon('spinner spin', class: 'metrics-load-spinner') = icon('spinner spin', class: 'metrics-load-spinner')
= s_('PrometheusService|Finding and configuring metrics...') = s_('PrometheusService|Finding and configuring metrics...')
.empty-metrics.hidden.js-empty-metrics .empty-metrics.hidden.js-empty-metrics
%p %p.text-tertiary
= s_('PrometheusService|Waiting for your first deployment to an environment to find common metrics') = s_('PrometheusService|Waiting for your first deployment to an environment to find common metrics')
%ul.list-unstyled.metrics-list.hidden.js-metrics-list %ul.list-unstyled.metrics-list.hidden.js-metrics-list
......
import IntegrationSettingsForm from '~/integrations/integration_settings_form'; import IntegrationSettingsForm from '~/integrations/integration_settings_form';
import PrometheusMetrics from '../../../../prometheus_metrics/prometheus_metrics'; import PrometheusMetrics from 'ee/prometheus_metrics/prometheus_metrics';
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const prometheusSettingsWrapper = document.querySelector('.js-prometheus-metrics-monitoring');
const integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form'); const integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form');
integrationSettingsForm.init(); integrationSettingsForm.init();
const prometheusSettingsWrapper = document.querySelector('.js-prometheus-metrics-monitoring');
if (prometheusSettingsWrapper) { if (prometheusSettingsWrapper) {
const prometheusMetrics = new PrometheusMetrics('.js-prometheus-metrics-monitoring'); const prometheusMetrics = new PrometheusMetrics('.js-prometheus-metrics-monitoring');
prometheusMetrics.loadActiveCustomMetrics(); prometheusMetrics.loadActiveCustomMetrics();
......
...@@ -9,7 +9,7 @@ function customMetricTemplate(metric) { ...@@ -9,7 +9,7 @@ function customMetricTemplate(metric) {
return ` return `
<li class="custom-metric"> <li class="custom-metric">
<a href="${metric.edit_path}"> <a href="${metric.edit_path}">
${metric.group} / ${metric.title} ${_.escape(metric.group)} / ${_.escape(metric.title)} (${_.escape(metric.unit)})
</a> </a>
</li> </li>
`; `;
...@@ -35,28 +35,6 @@ export default class EEPrometheusMetrics extends PrometheusMetrics { ...@@ -35,28 +35,6 @@ export default class EEPrometheusMetrics extends PrometheusMetrics {
this.customMetricsEndpoint = this.activeCustomMetricsEndpoint.replace('.json', '/'); this.customMetricsEndpoint = this.activeCustomMetricsEndpoint.replace('.json', '/');
} }
deleteMetricEndpoint(id) {
return `${this.customMetricsEndpoint}${id}`;
}
deleteMetric(currentTarget) {
const targetId = currentTarget.dataset.metricId;
axios.delete(this.deleteMetricEndpoint(targetId))
.then(() => {
currentTarget.parentElement.parentElement.remove();
const elementToFind = { id: parseInt(targetId, 10) };
const indexToDelete = _.findLastIndex(this.customMetrics, elementToFind);
this.customMetrics.splice(indexToDelete, 1);
this.$monitoredCustomMetricsCount.text(this.customMetrics.length);
if (this.customMetrics.length === 0) {
this.showMonitoringCustomMetricsPanelState(PANEL_STATE.EMPTY);
}
})
.catch((err) => {
this.showFlashMessage(err);
});
}
showMonitoringCustomMetricsPanelState(stateName) { showMonitoringCustomMetricsPanelState(stateName) {
switch (stateName) { switch (stateName) {
case PANEL_STATE.LOADING: case PANEL_STATE.LOADING:
...@@ -96,9 +74,6 @@ export default class EEPrometheusMetrics extends PrometheusMetrics { ...@@ -96,9 +74,6 @@ export default class EEPrometheusMetrics extends PrometheusMetrics {
if (!this.environmentsData) { if (!this.environmentsData) {
this.showFlashMessage(s__('PrometheusService|These metrics will only be monitored after your first deployment to an environment')); this.showFlashMessage(s__('PrometheusService|These metrics will only be monitored after your first deployment to an environment'));
} }
this.$monitoredCustomMetricsList.find('.delete-custom-metric').on('click', (event) => {
this.deleteMetric(event.currentTarget);
});
} }
showFlashMessage(message) { showFlashMessage(message) {
......
...@@ -9,9 +9,9 @@ class PrometheusMetric < ActiveRecord::Base ...@@ -9,9 +9,9 @@ class PrometheusMetric < ActiveRecord::Base
validates :unit, presence: true validates :unit, presence: true
GROUP_TITLES = { GROUP_TITLES = {
business: _('Business metrics'), business: _('Business'),
response: _('Response metrics'), response: _('Response'),
system: _('System metrics') system: _('System')
}.freeze }.freeze
def group_title def group_title
......
...@@ -6,6 +6,7 @@ class PrometheusMetricEntity < Grape::Entity ...@@ -6,6 +6,7 @@ class PrometheusMetricEntity < Grape::Entity
expose :group expose :group
expose :group_title expose :group_title
expose :unit
expose :edit_path do |prometheus_metric| expose :edit_path do |prometheus_metric|
edit_project_prometheus_metric_path(prometheus_metric.project, prometheus_metric) edit_project_prometheus_metric_path(prometheus_metric.project, prometheus_metric)
......
...@@ -5,9 +5,9 @@ ...@@ -5,9 +5,9 @@
.row.prepend-top-default.append-bottom-default .row.prepend-top-default.append-bottom-default
%h3.page-title.text-center %h3.page-title.text-center
- if metric.persisted? - if metric.persisted?
Edit metric = s_('Metrics|Edit metric')
- else - else
New metric = s_('Metrics|New metric')
= form_for [project.namespace.becomes(Namespace), project, metric], html: { class: 'col-lg-8 col-lg-offset-2' } do |f| = form_for [project.namespace.becomes(Namespace), project, metric], html: { class: 'col-lg-8 col-lg-offset-2' } do |f|
= form_errors(metric) = form_errors(metric)
.form-group .form-group
...@@ -28,14 +28,14 @@ ...@@ -28,14 +28,14 @@
= f.radio_button :group, :system = f.radio_button :group, :system
= f.label :group_system, s_("Metrics|System"), class: 'label-light' = f.label :group_system, s_("Metrics|System"), class: 'label-light'
%p.custom-metrics-light-text %p.text-tertiary
= s_('Metrics|For grouping similar metrics') = s_('Metrics|For grouping similar metrics')
.form-group .form-group
= f.label :query, s_('Metrics|Query'), class: 'label-light' = f.label :query, s_('Metrics|Query'), class: 'label-light'
= f.text_field :query, required: true, class: 'form-control', placeholder: s_('Metrics|e.g. rate(http_requests_total[5m])') = f.text_field :query, required: true, class: 'form-control', placeholder: s_('Metrics|e.g. rate(http_requests_total[5m])')
%span.help-block %span.help-block
= s_('Metrics|Must be a valid PromQL query.') = s_('Metrics|Must be a valid PromQL query.')
= link_to "https://prometheus.io/docs/prometheus/latest/querying/basics/", target: "_blank" do = link_to "https://prometheus.io/docs/prometheus/latest/querying/basics/", target: "_blank", rel: "noopener noreferrer" do
= sprite_icon("external-link", size: 12) = sprite_icon("external-link", size: 12)
= s_('Metrics|Prometheus Query Documentation') = s_('Metrics|Prometheus Query Documentation')
.form-group .form-group
......
- add_to_breadcrumbs "Settings", edit_project_path(@project) - add_to_breadcrumbs "Settings", edit_project_path(@project)
- add_to_breadcrumbs "Integrations", project_settings_integrations_path(@project) - add_to_breadcrumbs "Integrations", project_settings_integrations_path(@project)
- add_to_breadcrumbs "Prometheus", edit_project_service_path(@project, PrometheusService) - add_to_breadcrumbs "Prometheus", edit_project_service_path(@project, PrometheusService)
- breadcrumb_title "Edit metric" - breadcrumb_title = s_('Metrics|Edit metric')
- page_title @metric.title, "Edit metric" - page_title @metric.title, "Edit metric"
= render 'form', project: @project, metric: @metric = render 'form', project: @project, metric: @metric
- add_to_breadcrumbs "Settings", edit_project_path(@project) - add_to_breadcrumbs "Settings", edit_project_path(@project)
- add_to_breadcrumbs "Integrations", project_settings_integrations_path(@project) - add_to_breadcrumbs "Integrations", project_settings_integrations_path(@project)
- add_to_breadcrumbs "Prometheus", edit_project_service_path(@project, PrometheusService) - add_to_breadcrumbs "Prometheus", edit_project_service_path(@project, PrometheusService)
- breadcrumb_title "New metric" - breadcrumb_title = s_('Metrics|Edit metric')
- page_title "New metric" - page_title "New metric"
%div{ class: container_class } %div{ class: container_class }
......
...@@ -17,9 +17,9 @@ describe PrometheusMetric do ...@@ -17,9 +17,9 @@ describe PrometheusMetric do
end end
end end
it_behaves_like 'group_title', :business, 'Business metrics' it_behaves_like 'group_title', :business, 'Business'
it_behaves_like 'group_title', :response, 'Response metrics' it_behaves_like 'group_title', :response, 'Response'
it_behaves_like 'group_title', :system, 'System metrics' it_behaves_like 'group_title', :system, 'System'
end end
describe '#to_query_metric' do describe '#to_query_metric' do
......
...@@ -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