backport of custom metrics for the common metrics section of CE

app/assets/javascripts/prometheus_metrics/prometheus_metrics.js

+import _ from 'underscore';
+import { s__, n__, sprintf } from '~/locale';
 import axios from '../lib/utils/axios_utils';
 import PANEL_STATE from './constants';
 import { backOff } from '../lib/utils/common_utils';
@@ -20,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));
   }
@@ -59,25 +62,41 @@ export default class PrometheusMetrics {
   populateActiveMetrics(metrics) {
     let totalMonitoredMetrics = 0;
     let totalMissingEnvVarMetrics = 0;
+    let totalExporters = 0;
 
     metrics.forEach((metric) => {
-      this.$monitoredMetricsList.append(`<li>${metric.group}<span class="badge">${metric.active_metrics}</span></li>`);
+      if (metric.active_metrics > 0) {
+        totalExporters += 1;
+        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;
         }
+      }
     });
 
-    this.$monitoredMetricsCount.text(totalMonitoredMetrics);
+    if (totalMonitoredMetrics === 0) {
+      const emptyCommonMetricsText = sprintf(s__('PrometheusService|<p class="text-tertiary">No <a href="%{docsUrl}">common metrics</a> were found</p>'), {
+        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: 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);
       }
     }
+  }
 
   loadActiveMetrics() {
     this.showMonitoringMetricsPanelState(PANEL_STATE.LOADING);

app/assets/stylesheets/framework/common.scss

@@ -14,6 +14,10 @@
   color: $gl-text-color-secondary;
 }
 
+.text-tertiary {
+  color: $gl-text-color-tertiary;
+}
+
 .text-primary,
 .text-primary:hover {
   color: $brand-primary;

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

@@ -205,7 +205,8 @@
     }
 
     .badge {
-      font-size: inherit;
+      font-size: 12px;
+      line-height: 12px;
     }
 
     .panel-heading .badge-count {

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

@@ -7,21 +7,19 @@
       = link_to s_('PrometheusService|More information'), help_page_path('user/project/integrations/prometheus')
 
   .col-lg-9
-    .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|Monitored')
+          = s_('PrometheusService|Common metrics')
           %span.badge.js-monitored-count 0
       .panel-body
-        .loading-metrics.text-center.js-loading-metrics
-          = icon('spinner spin 3x', class: 'metrics-load-spinner')
-          %p
+        .loading-metrics.js-loading-metrics
+          %p.prepend-top-10.prepend-left-10
+            = icon('spinner spin', class: 'metrics-load-spinner')
             = s_('PrometheusService|Finding and configuring metrics...')
-        .empty-metrics.text-center.hidden.js-empty-metrics
-          = custom_icon('icon_empty_metrics')
-          %p
-            = s_('PrometheusService|No metrics are being monitored. To start monitoring, deploy to an environment.')
-          = link_to s_('PrometheusService|View environments'), project_environments_path(@project), class: 'btn btn-success'
+        .empty-metrics.hidden.js-empty-metrics
+          %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
 
     .panel.panel-default.hidden.js-panel-missing-env-vars

spec/javascripts/prometheus_metrics/prometheus_metrics_spec.js

@@ -85,7 +85,7 @@ describe('PrometheusMetrics', () => {
       expect(prometheusMetrics.$monitoredMetricsLoading.hasClass('hidden')).toBeTruthy();
       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.first().find('.badge').text()).toEqual(`${metrics[0].active_metrics}`);
     });