backport of custom metrics for the common metrics section of CEjivl-backport-custom-metrics-frontend

1 files changed, 39 insertions, 20 deletions

diff --git a/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js b/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
index e8126ac573d..03bb281395a 100644
--- a/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
+++ b/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
@@ -1,3 +1,5 @@
+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,23 +62,39 @@ 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>`);
-      totalMonitoredMetrics += metric.active_metrics;
-      if (metric.metrics_missing_requirements > 0) {
-        this.$missingEnvVarMetricsList.append(`<li>${metric.group}</li>`);
-        totalMissingEnvVarMetrics += 1;
+      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>${_.escape(metric.group)}</li>`);
+          totalMissingEnvVarMetrics += 1;
+        }
       }
     });
 
-    this.$monitoredMetricsCount.text(totalMonitoredMetrics);
-    this.showMonitoringMetricsPanelState(PANEL_STATE.LIST);
+    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);
+      if (totalMissingEnvVarMetrics > 0) {
+        this.$missingEnvVarPanel.removeClass('hidden');
+        this.$missingEnvVarMetricCount.text(totalMissingEnvVarMetrics);
+      }
     }
   }
 
@@ -97,15 +116,15 @@ export default class PrometheusMetrics {
         })
         .catch(stop);
     })
-    .then((res) => {
-      if (res && res.data && res.data.length) {
-        this.populateActiveMetrics(res.data);
-      } else {
+      .then((res) => {
+        if (res && res.data && res.data.length) {
+          this.populateActiveMetrics(res.data);
+        } else {
+          this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY);
+        }
+      })
+      .catch(() => {
         this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY);
-      }
-    })
-    .catch(() => {
-      this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY);
-    });
+      });
   }
 }