Commit 3b701231 authored by Jose Ivan Vargas's avatar Jose Ivan Vargas

Add UX improvements

parent f3a427b5
......@@ -70,8 +70,9 @@ export default class PrometheusMetrics {
});
if (totalMonitoredMetrics === 0) {
const docsUrl = 'https://docs.gitlab.com/ee/user/project/integrations/prometheus_library/metrics.html';
this.$monitoredMetricsEmpty.empty();
this.$monitoredMetricsEmpty.append('<p>No common metrics were found</p>');
this.$monitoredMetricsEmpty.append(`<p>No <a href="${docsUrl}">common metrics</a>were found</p>`);
this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY);
} else {
this.$monitoredMetricsCount.text(totalMonitoredMetrics);
......
......@@ -328,3 +328,7 @@
.deprecated-service {
cursor: default;
}
.custom-metrics-light-text {
color: $gl-text-color-tertiary;
}
......@@ -7,7 +7,6 @@ class PrometheusMetric < ActiveRecord::Base
validates :group, presence: true
validates :y_label, presence: true
validates :unit, presence: true
validates :legend, presence: true
GROUP_TITLES = {
business: _('Business metrics'),
......
......@@ -3,30 +3,36 @@
- save_button_text = metric.persisted? ? _('Save changes') : s_('Metrics|Create metric')
.row.prepend-top-default.append-bottom-default
%h3.page-title.text-center
- if metric.persisted?
Edit metric
- else
New metric
= form_for [project.namespace.becomes(Namespace), project, metric], html: { class: 'col-lg-8 col-lg-offset-2' } do |f|
= form_errors(metric)
.form-group
= f.label :title, s_('Metrics|Name'), class: 'label-light'
= f.text_field :title, required: true, class: 'form-control', placeholder: s_('Metrics|e.g. Throughput')
= f.text_field :title, required: true, class: 'form-control', placeholder: s_('Metrics|e.g. Throughput'), autofocus: true
%span.help-block
= s_('Metrics|Used as a title for the chart')
.form-group
= label_tag :group, s_("Metrics|Type"), class: 'append-bottom-10'
.form-group
.form-group.append-bottom-0
= f.radio_button :group, :business, checked: true
= f.label :group_business, s_("Metrics|Business"), class: 'label-light'
= f.label :group_business, s_("Metrics|Business"), class: 'label-light append-right-10'
= f.radio_button :group, :response
= f.label :group_response, s_("Metrics|Response"), class: 'label-light'
= f.label :group_response, s_("Metrics|Response"), class: 'label-light append-right-10'
= f.radio_button :group, :system
= f.label :group_system, s_("Metrics|System"), class: 'label-light'
= s_('Metrics|For grouping similar metrics')
%p.custom-metrics-light-text
= s_('Metrics|For grouping similar metrics')
.form-group
= f.label :query, s_('Metrics|Query'), class: 'label-light'
= f.text_field :query, required: true, class: 'form-control', placeholder: s_('Metrics|e.g. sum(metric)')
= f.text_field :query, required: true, class: 'form-control', placeholder: s_('Metrics|e.g. rate(http_requests_total[5m])')
%span.help-block
= s_('Metrics|Must be a valid PromQL query.')
= link_to "https://prometheus.io/docs/prometheus/latest/querying/basics/", target: "_blank" do
......
- @no_container = true
- 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)
......@@ -6,7 +5,4 @@
- page_title "New metric"
%div{ class: container_class }
%h3.page-title
New metric
%hr
= render 'form', project: @project, metric: @metric
......@@ -4,10 +4,10 @@
= s_('PrometheusService|Metrics')
%p
= 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')
= link_to s_('PrometheusService|More information'), help_page_path('user/project/integrations/prometheus_library/metrics'), target: '_blank'
.col-lg-9
.panel.panel-default.custom-monitored-metrics.js-panel-custom-monitored-metrics{ data: { active_custom_metrics: project_prometheus_metrics_path(@project, :json) } }
.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-heading
%h3.panel-title
= s_('PrometheusService|Custom metrics')
......
......@@ -2,6 +2,8 @@ import _ from 'underscore';
import PrometheusMetrics from '~/prometheus_metrics/prometheus_metrics';
import PANEL_STATE from '~/prometheus_metrics/constants';
import axios from '~/lib/utils/axios_utils';
import { s__ } from '~/locale';
import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
function customMetricTemplate(metric) {
return `
......@@ -26,8 +28,10 @@ export default class EEPrometheusMetrics extends PrometheusMetrics {
this.$newCustomMetricButton = this.$monitoredCustomMetricsPanel.find('.js-new-metric-button');
this.$flashCustomMetricsContainer = this.$wrapperCustomMetrics.find('.flash-container');
this.customMetrics = [];
this.environmentsData = [];
this.activeCustomMetricsEndpoint = this.$monitoredCustomMetricsPanel.data('active-custom-metrics');
this.environmentsDataEndpoint = this.$monitoredCustomMetricsPanel.data('environments-data-endpoint');
this.customMetricsEndpoint = this.activeCustomMetricsEndpoint.replace('.json', '/');
}
......@@ -77,12 +81,21 @@ export default class EEPrometheusMetrics extends PrometheusMetrics {
}
populateCustomMetrics() {
this.customMetrics.forEach((metric) => {
const sortedMetrics = _(this.customMetrics).chain()
.map(metric => ({ ...metric, group: capitalizeFirstCharacter(metric.group) }))
.sortBy('title')
.sortBy('group')
.value();
sortedMetrics.forEach((metric) => {
this.$monitoredCustomMetricsList.append(customMetricTemplate(metric));
});
this.$monitoredCustomMetricsCount.text(this.customMetrics.length);
this.showMonitoringCustomMetricsPanelState(PANEL_STATE.LIST);
if (!this.environmentsData) {
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);
});
......@@ -95,19 +108,26 @@ export default class EEPrometheusMetrics extends PrometheusMetrics {
loadActiveCustomMetrics() {
super.loadActiveMetrics();
axios.get(this.activeCustomMetricsEndpoint)
.then(resp => resp.data)
.then((response) => {
if (!response || !response.metrics) {
Promise.all([
axios.get(this.activeCustomMetricsEndpoint)
.then(resp => resp.data)
.catch(err => err),
axios.get(this.environmentsDataEndpoint)
.then(resp => resp.data)
.catch(err => err),
])
.then(([customMetrics, environmentsData]) => {
this.environmentsData = environmentsData.environments;
if (!customMetrics || !customMetrics.metrics) {
this.showMonitoringCustomMetricsPanelState(PANEL_STATE.EMPTY);
} else {
this.customMetrics = customMetrics.metrics;
this.populateCustomMetrics(customMetrics.metrics);
}
})
.catch((customMetricError) => {
this.showFlashMessage(customMetricError);
this.showMonitoringCustomMetricsPanelState(PANEL_STATE.EMPTY);
} else {
this.customMetrics = response.metrics;
this.populateCustomMetrics(response.metrics);
}
})
.catch((err) => {
this.showFlashMessage(err);
this.showMonitoringCustomMetricsPanelState(PANEL_STATE.EMPTY);
});
});
}
}
......@@ -33,11 +33,7 @@ describe Gitlab::PrometheusClient do
req_stub = stub_prometheus_request(query_url, status: 400)
expect { execute_query }
<<<<<<< HEAD
.to raise_error(Gitlab::PrometheusClient::QueryError, 'Bad data received')
=======
.to raise_error(Gitlab::PrometheusClient::Error, 'Bad data received')
>>>>>>> master
expect(req_stub).to have_been_requested
end
end
......@@ -85,11 +81,7 @@ describe Gitlab::PrometheusClient do
expect(req_stub).to have_been_requested
end
<<<<<<< HEAD
it 'raises a Gitlab::PrometheusClient::Error error when a HTTParty::Error is rescued' do
=======
it 'raises a Gitlab::PrometheusClient::Error error when a RestClient::Exception is rescued' do
>>>>>>> master
req_stub = stub_prometheus_request_with_exception(prometheus_url, RestClient::Exception)
expect { subject.send(:get, '/', {}) }
......
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