Skip to content

G
gitlab-ce
Commit 1f6e9f8d authored by Jose Ivan Vargas's avatar Jose Ivan Vargas
Browse files
Options

Corrected FE code

parent 5c2844cd
Show whitespace changes
Inline Side-by-side
Showing with 50 additions and 66 deletions
app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
View file @ 1f6e9f8d
import _ from 'underscore';
import { s__, n__, sprintf } from '~/locale';
import axios from '../lib/utils/axios_utils';
import PANEL_STATE from './constants';
......@@ -21,6 +22,7 @@ export default class PrometheusMetrics {
this.$missingEnvVarMetricsList = this.$missingEnvVarPanel.find('.js-missing-var-metrics-list');
this.activeMetricsEndpoint = this.$monitoredMetricsPanel.data('activeMetrics');
this.helpMetricsPath = this.$monitoredMetricsPanel.data('metrics-help-path');
this.$panelToggle.on('click', e => this.handlePanelToggle(e));
}
......@@ -65,10 +67,10 @@ export default class PrometheusMetrics {
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>${_.escape(metric.group)}<span class="badge">${_.escape(metric.active_metrics)}</span></li>`);
totalMonitoredMetrics += metric.active_metrics;
if (metric.metrics_missing_requirements > 0) {
this.$missingEnvVarMetricsList.append(`<li>${metric.group}</li>`);
this.$missingEnvVarMetricsList.append(`<li>${_.escape(metric.group)}</li>`);
totalMissingEnvVarMetrics += 1;
}
}
......@@ -76,22 +78,21 @@ export default class PrometheusMetrics {
if (totalMonitoredMetrics === 0) {
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',
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: `${totalExporters} ${n__('exporter', 'exporters', totalExporters)}`,
metrics: `${totalMonitoredMetrics} ${n__('metric', 'metrics', totalMonitoredMetrics)}`,
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) {
this.$missingEnvVarPanel.removeClass('hidden');
this.$missingEnvVarPanel.find('.flash-container').off('click');
this.$missingEnvVarMetricCount.text(totalMissingEnvVarMetrics);
}
}
......
app/assets/stylesheets/pages/settings.scss
View file @ 1f6e9f8d
......@@ -266,20 +266,11 @@
.custom-metric {
display: flex;
align-items: center;
a {
font-weight: bold;
text-decoration: none;
}
}
}
.empty-metrics,
.loading-metrics {
p,
.btn {
margin: 10px 0;
margin-left: 10px;
.custom-metric-link-bold {
font-weight: $gl-font-weight-bold;
text-decoration: none;
}
}
......
app/views/projects/services/prometheus/_show.html.haml
View file @ 1f6e9f8d
......@@ -7,7 +7,7 @@
= link_to s_('PrometheusService|More information'), help_page_path('user/project/integrations/prometheus_library/metrics'), target: '_blank', rel: "noopener noreferrer"
.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), environments_data: environments_list_data } }
.panel-heading
%h3.panel-title
= s_('PrometheusService|Custom metrics')
......@@ -18,25 +18,25 @@
.flash-warning
.flash-text
.loading-metrics.js-loading-custom-metrics
%p
%p.prepend-top-10.prepend-left-10
= icon('spinner spin', class: 'metrics-load-spinner')
= s_('PrometheusService|Finding custom metrics...')
.empty-metrics.hidden.js-empty-custom-metrics
= link_to s_('PrometheusService|New metric'), new_project_prometheus_metric_path(@project), class: 'btn btn-success'
= link_to s_('PrometheusService|New metric'), new_project_prometheus_metric_path(@project), class: 'btn btn-success prepend-top-10 prepend-left-10'
%ul.list-unstyled.metrics-list.hidden.js-custom-metrics-list
.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
%h3.panel-title
= s_('PrometheusService|Common metrics')
%span.badge.js-monitored-count 0
.panel-body
.loading-metrics.js-loading-metrics
%p
%p.prepend-top-10.prepend-left-10
= icon('spinner spin', class: 'metrics-load-spinner')
= s_('PrometheusService|Finding and configuring metrics...')
.empty-metrics.hidden.js-empty-metrics
%p.text-tertiary
%p.text-tertiary.prepend-top-10.prepend-left-10
= s_('PrometheusService|Waiting for your first deployment to an environment to find common metrics')
%ul.list-unstyled.metrics-list.hidden.js-metrics-list
......
ee/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
View file @ 1f6e9f8d
......@@ -5,16 +5,6 @@ import axios from '~/lib/utils/axios_utils';
import { s__ } from '~/locale';
import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
function customMetricTemplate(metric) {
return `
<li class="custom-metric">
<a href="${metric.edit_path}">
${_.escape(metric.group)} / ${_.escape(metric.title)} (${_.escape(metric.unit)})
</a>
</li>
`;
}
export default class EEPrometheusMetrics extends PrometheusMetrics {
constructor(wrapperSelector) {
super(wrapperSelector);
......@@ -32,7 +22,6 @@ export default class EEPrometheusMetrics extends PrometheusMetrics {
this.activeCustomMetricsEndpoint = this.$monitoredCustomMetricsPanel.data('active-custom-metrics');
this.environmentsDataEndpoint = this.$monitoredCustomMetricsPanel.data('environments-data-endpoint');
this.customMetricsEndpoint = this.activeCustomMetricsEndpoint.replace('.json', '/');
}
showMonitoringCustomMetricsPanelState(stateName) {
......@@ -66,7 +55,7 @@ export default class EEPrometheusMetrics extends PrometheusMetrics {
.value();
sortedMetrics.forEach((metric) => {
this.$monitoredCustomMetricsList.append(customMetricTemplate(metric));
this.$monitoredCustomMetricsList.append(EEPrometheusMetrics.customMetricTemplate(metric));
});
this.$monitoredCustomMetricsCount.text(this.customMetrics.length);
......@@ -84,20 +73,16 @@ export default class EEPrometheusMetrics extends PrometheusMetrics {
loadActiveCustomMetrics() {
super.loadActiveMetrics();
Promise.all([
axios.get(this.activeCustomMetricsEndpoint)
.then(resp => resp.data)
.catch(err => err),
axios.get(this.environmentsDataEndpoint)
.then(resp => resp.data)
.catch(err => err),
axios.get(this.activeCustomMetricsEndpoint),
axios.get(this.environmentsDataEndpoint),
])
.then(([customMetrics, environmentsData]) => {
this.environmentsData = environmentsData.environments;
if (!customMetrics || !customMetrics.metrics) {
this.environmentsData = environmentsData.data.environments;
if (!customMetrics.data || !customMetrics.data.metrics) {
this.showMonitoringCustomMetricsPanelState(PANEL_STATE.EMPTY);
} else {
this.customMetrics = customMetrics.metrics;
this.populateCustomMetrics(customMetrics.metrics);
this.customMetrics = customMetrics.data.metrics;
this.populateCustomMetrics(customMetrics.data.metrics);
}
})
.catch((customMetricError) => {
......@@ -105,4 +90,14 @@ export default class EEPrometheusMetrics extends PrometheusMetrics {
this.showMonitoringCustomMetricsPanelState(PANEL_STATE.EMPTY);
});
}
static customMetricTemplate(metric) {
return `
<li class="custom-metric">
<a href="${_.escape(metric.edit_path)}" class="custom-metric-link-bold">
${_.escape(metric.group)} / ${_.escape(metric.title)} (${_.escape(metric.unit)})
</a>
</li>
`;
}
}
ee/app/views/projects/prometheus/metrics/_form.html.haml
View file @ 1f6e9f8d
......@@ -53,7 +53,7 @@
= s_('Metrics|Used if the query returns a single series. If it returns multiple series, their legend labels will be picked up from the response.')
.form-actions
= f.submit save_button_text, class: 'btn btn-save'
= link_to _('Cancel'), edit_project_service_path(project, PrometheusService), class: 'btn btn-cancel pull-right'
= f.submit save_button_text, class: 'btn btn-success'
= link_to _('Cancel'), edit_project_service_path(project, PrometheusService), class: 'btn btn-default pull-right'
- if metric.persisted?
= link_to _('Delete'), project_prometheus_metric_path(project, metric), data: { confirm: s_("This will delete the custom metric, Are you sure?") }, method: :delete, class: "btn btn-remove pull-right append-right-default"
= link_to _('Delete'), project_prometheus_metric_path(project, metric), data: { confirm: s_("This will delete the custom metric, Are you sure?") }, method: :delete, class: "btn btn-danger pull-right append-right-default"
ee/app/views/projects/prometheus/metrics/edit.html.haml
View file @ 1f6e9f8d
- add_to_breadcrumbs "Settings", edit_project_path(@project)
- add_to_breadcrumbs "Integrations", project_settings_integrations_path(@project)
- add_to_breadcrumbs _("Settings"), edit_project_path(@project)
- add_to_breadcrumbs _("Integrations"), project_settings_integrations_path(@project)
- add_to_breadcrumbs "Prometheus", edit_project_service_path(@project, PrometheusService)
- breadcrumb_title = s_('Metrics|Edit metric')
- page_title @metric.title, "Edit metric"
- page_title @metric.title, s_('Metrics|Edit metric')
= render 'form', project: @project, metric: @metric
ee/app/views/projects/prometheus/metrics/new.html.haml
View file @ 1f6e9f8d
- add_to_breadcrumbs "Settings", edit_project_path(@project)
- add_to_breadcrumbs "Integrations", project_settings_integrations_path(@project)
- add_to_breadcrumbs _("Settings"), edit_project_path(@project)
- add_to_breadcrumbs _("Integrations"), project_settings_integrations_path(@project)
- add_to_breadcrumbs "Prometheus", edit_project_service_path(@project, PrometheusService)
- breadcrumb_title = s_('Metrics|Edit metric')
- page_title "New metric"
%div{ class: container_class }
= render 'form', project: @project, metric: @metric
- breadcrumb_title = s_('Metrics|New metric')
- page_title s_('Metrics|New metric')
= render 'form', project: @project, metric: @metric
spec/javascripts/prometheus_metrics/ee/prometheus_metrics_spec.js
View file @ 1f6e9f8d
......@@ -4,9 +4,9 @@ import PrometheusMetrics from 'ee/prometheus_metrics/prometheus_metrics';
import PANEL_STATE from '~/prometheus_metrics/constants';
import metrics from './mock_data';
describe('PrometheusMetrics EE', () => {
fdescribe('PrometheusMetrics EE', () => {
const FIXTURE = 'services/prometheus/prometheus_service.html.raw';
const customMetricsEndpoint = 'http://test.host/frontend-fixtures/services-project/prometheus/metrics.json';
const customMetricsEndpoint = 'http://test.host/frontend-fixtures/services-project/prometheus/metrics';
let mock;
preloadFixtures(FIXTURE);
......@@ -41,14 +41,13 @@ describe('PrometheusMetrics EE', () => {
});
it('should contain api endpoints', () => {
expect(prometheusMetrics.activeCustomMetricsEndpoint).not.toBeNull();
expect(prometheusMetrics.activeCustomMetricsEndpoint).toEqual(customMetricsEndpoint);
});
it('should show loading state when called with `loading`', () => {
prometheusMetrics.showMonitoringCustomMetricsPanelState(PANEL_STATE.LOADING);
expect(prometheusMetrics.$monitoredCustomMetricsLoading.hasClass('hidden')).toBeFalsy();
expect(prometheusMetrics.$monitoredCustomMetricsLoading.hasClass('hidden')).toEqual(false);
expect(prometheusMetrics.$monitoredCustomMetricsEmpty.hasClass('hidden')).toBeTruthy();
expect(prometheusMetrics.$monitoredCustomMetricsList.hasClass('hidden')).toBeTruthy();
});
......@@ -58,14 +57,14 @@ describe('PrometheusMetrics EE', () => {
expect(prometheusMetrics.$monitoredCustomMetricsLoading.hasClass('hidden')).toBeTruthy();
expect(prometheusMetrics.$monitoredCustomMetricsEmpty.hasClass('hidden')).toBeTruthy();
expect(prometheusMetrics.$monitoredCustomMetricsList.hasClass('hidden')).toBeFalsy();
expect(prometheusMetrics.$monitoredCustomMetricsList.hasClass('hidden')).toEqual(false);
});
it('should show empty state when called with `empty`', () => {
prometheusMetrics.showMonitoringCustomMetricsPanelState(PANEL_STATE.EMPTY);
expect(prometheusMetrics.$monitoredCustomMetricsLoading.hasClass('hidden')).toBeTruthy();
expect(prometheusMetrics.$monitoredCustomMetricsEmpty.hasClass('hidden')).toBeFalsy();
expect(prometheusMetrics.$monitoredCustomMetricsEmpty.hasClass('hidden')).toEqual(false);
expect(prometheusMetrics.$monitoredCustomMetricsList.hasClass('hidden')).toBeTruthy();
});
......@@ -76,7 +75,7 @@ describe('PrometheusMetrics EE', () => {
const $metricsListLi = prometheusMetrics.$monitoredCustomMetricsList.find('li');
expect(prometheusMetrics.$monitoredCustomMetricsLoading.hasClass('hidden')).toBeTruthy();
expect(prometheusMetrics.$monitoredCustomMetricsList.hasClass('hidden')).toBeFalsy();
expect(prometheusMetrics.$monitoredCustomMetricsList.hasClass('hidden')).toEqual(false);
expect($metricsListLi.length).toEqual(metrics.length);
});
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7