Add UX improvements

app/assets/javascripts/prometheus_metrics/prometheus_metrics.js

@@ -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);

app/assets/stylesheets/pages/settings.scss

@@ -328,3 +328,7 @@
 .deprecated-service {
   cursor: default;
 }
+
+.custom-metrics-light-text {
+  color: $gl-text-color-tertiary;
+}

app/models/prometheus_metric.rb

@@ -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'),

app/views/projects/prometheus/metrics/_form.html.haml

@@ -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

app/views/projects/prometheus/metrics/new.html.haml

-- @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

app/views/projects/services/prometheus/_show.html.haml

@@ -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')

ee/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js

@@ -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);
-    });
+      });
   }
 }

spec/lib/gitlab/prometheus_client_spec.rb

@@ -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, '/', {}) }