Added the custom application metric lists and form adjustments

app/assets/stylesheets/framework/flash.scss

@@ -12,6 +12,12 @@
     margin: 0;
   }
 
+  .flash-warning {
+    @extend .alert;
+    @extend .alert-warning;
+    margin: 0;
+  }
+
   .flash-alert {
     @extend .alert;
     @extend .alert-danger;

app/assets/stylesheets/pages/settings.scss

@@ -242,8 +242,6 @@
   }
 
   .custom-monitored-metrics {
-    margin-bottom: 0;
-
     .panel-title {
       display: flex;
       align-items: center;

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

 .row.prepend-top-default.append-bottom-default
-  = form_for [@project.namespace.becomes(Namespace), @project, @metric], html: { class: 'col-lg-9' } 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-group
       = f.label :title, 'Title', class: 'label-light'
-      = f.text_field :title, required: true, class: 'form-control'
+      = f.text_field :title, required: true, class: 'form-control', placeholder: 'e.g. Throughput'
+      %span.help-block
+        Used as a title for the chart
     .form-group
       = f.label :query, 'Query', class: 'label-light'
-      = f.text_field :query, required: true, class: 'form-control'
+      = f.text_field :query, required: true, class: 'form-control', placeholder: 'e.g. sum(metric...'
+      %span.help-block
+        Must be a valid PromQL query.
+        = link_to "https://prometheus.io/docs/prometheus/latest/querying/basics/" do
+          = sprite_icon("external-link", size: 12)
+          Prometheus Query Documentation
     .form-group
       = f.label :y_label, 'Y-axis label', class: 'label-light'
-      = f.text_field :y_label, class: 'form-control'
+      = f.text_field :y_label, class: 'form-control', placeholder: 'e.g. Requests/second'
+      %span.help-block
+        Label of the chart's vertical axis. Usually the type of the unit being charted. The horizontal axis (X-axis) always represents time
     .form-group
       = f.label :unit, 'Unit label', class: 'label-light'
-      = f.text_field :unit, class: 'form-control'
+      = f.text_field :unit, class: 'form-control', placeholder: 'e.g. req/sec'
     .form-group
       = f.label :legend, 'Legend label', class: 'label-light'
-      = f.text_field :legend, class: 'form-control'
+      = f.text_field :legend, class: 'form-control', placeholder: 'e.g. HTTP requests'
+      %span.help-block
+        Used if the query returns a single series. If it returns multiple series, their legends labels will be picked up from the response
 
     .form-actions
       = f.submit 'Save', class: 'btn btn-save'

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

@@ -17,6 +17,9 @@
           %span.badge.js-custom-monitored-count 0
           = link_to s_('PrometheusService|New metric'), new_project_prometheus_metric_path(@project), class: 'btn btn-success js-new-metric-button hidden'
       .panel-body
+        .flash-container.hidden
+          .flash-warning
+            .flash-text
         .loading-metrics.js-loading-custom-metrics
           %p
             = icon('spinner spin', class: 'metrics-load-spinner')

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

@@ -26,7 +26,6 @@ function backOffRequest(makeRequestCallback) {
 
 export default class PrometheusMetrics {
   constructor(wrapperSelector) {
-    // Call the common metrics (CE stuff basically)
     const cePrometheusMetrics = new CEPrometheusMetrics(wrapperSelector);
     cePrometheusMetrics.loadActiveMetrics();
 
@@ -36,6 +35,8 @@ export default class PrometheusMetrics {
     this.$monitoredCustomMetricsLoading = this.$monitoredCustomMetricsPanel.find('.js-loading-custom-metrics');
     this.$monitoredCustomMetricsEmpty = this.$monitoredCustomMetricsPanel.find('.js-empty-custom-metrics');
     this.$monitoredCustomMetricsList = this.$monitoredCustomMetricsPanel.find('.js-custom-metrics-list');
+    this.$newCustomMetricButton = this.$monitoredCustomMetricsPanel.find('.js-new-metric-button');
+    this.$flashCustomMetricsContainer = this.$wrapperCustomMetrics.find('.flash-container');
 
     this.activeCustomMetricsEndpoint = this.$monitoredCustomMetricsPanel.data('active-custom-metrics');
   }
@@ -46,43 +47,48 @@ export default class PrometheusMetrics {
         this.$monitoredCustomMetricsLoading.removeClass('hidden');
         this.$monitoredCustomMetricsEmpty.addClass('hidden');
         this.$monitoredCustomMetricsList.addClass('hidden');
+        this.$newCustomMetricButton.addClass('hidden');
         break;
       case PANEL_STATE.LIST:
         this.$monitoredCustomMetricsLoading.addClass('hidden');
         this.$monitoredCustomMetricsEmpty.addClass('hidden');
+        this.$newCustomMetricButton.removeClass('hidden');
         this.$monitoredCustomMetricsList.removeClass('hidden');
         break;
       default:
         this.$monitoredCustomMetricsLoading.addClass('hidden');
         this.$monitoredCustomMetricsEmpty.removeClass('hidden');
         this.$monitoredCustomMetricsList.addClass('hidden');
+        this.$newCustomMetricButton.addClass('hidden');
         break;
     }
   }
 
-  populateActiveMetrics(metrics) {
-    let totalMonitoredMetrics = 0;
-
+  populateCustomMetrics(metrics) {
     metrics.forEach((metric) => {
-      this.$monitoredMetricsList.append(`<li>${metric.group}</li>`);
-      totalMonitoredMetrics += metric.active_metrics;
+      this.$monitoredCustomMetricsList.append(`<li><a href="${metric.edit_path}">${metric.title}</a></li>`);
     });
 
-    this.$monitoredMetricsCount.text(totalMonitoredMetrics);
+    this.$monitoredCustomMetricsCount.text(metrics.length);
     this.showMonitoringCustomMetricsPanelState(PANEL_STATE.LIST);
   }
 
+  showFlashMessage(message) {
+    this.$flashCustomMetricsContainer.removeClass('hidden');
+    this.$flashCustomMetricsContainer.find('.flash-text').text(message);
+  }
+
   loadActiveCustomMetrics() {
     backOffRequest(() => axios.get(this.activeCustomMetricsEndpoint))
     .then(resp => resp.data)
     .then((response) => {
-      if (!response || !response.data) {
-        // add a flash
+      if (!response || !response.metrics) {
         this.showMonitoringCustomMetricsPanelState(PANEL_STATE.EMPTY);
       } else {
-        this.populateActiveMetrics(response.data);
+        this.populateCustomMetrics(response.metrics);
       }
     }).catch((err) => {
+      this.showFlashMessage(err);
       this.showMonitoringCustomMetricsPanelState(PANEL_STATE.EMPTY);
     });
   }