Populate Missing env var panel

app/assets/javascripts/prometheus_metrics/prometheus_metrics.js

@@ -12,7 +12,10 @@ export default class PrometheusMetrics {
     this.$monitoredMetricsEmpty = this.$monitoredMetricsPanel.find('.js-empty-metrics');
     this.$monitoredMetricsList = this.$monitoredMetricsPanel.find('.js-metrics-list');
 
-    this.$panelToggle = this.$wrapper.find('.js-panel-toggle');
+    this.$missingEnvVarPanel = this.$wrapper.find('.js-panel-missing-env-vars');
+    this.$panelToggle = this.$missingEnvVarPanel.find('.js-panel-toggle');
+    this.$missingEnvVarMetricCount = this.$missingEnvVarPanel.find('.js-env-var-count');
+    this.$missingEnvVarMetricsList = this.$missingEnvVarPanel.find('.js-missing-var-metrics-list');
 
     this.activeMetricsEndpoint = this.$monitoredMetricsPanel.data('active-metrics');
   }
@@ -35,14 +38,25 @@ export default class PrometheusMetrics {
 
   populateActiveMetrics(metrics) {
     let totalMonitoredMetrics = 0;
+    let totalMissingEnvVarMetrics = 0;
+
     metrics.forEach((metric) => {
       this.$monitoredMetricsList.append(`<li>${metric.group}<span class="badge-count">${metric.active_metrics}</span></li>`);
       totalMonitoredMetrics += metric.active_metrics;
+      if (metric.metrics_missing_requirements > 0) {
+        this.$missingEnvVarMetricsList.append(`<li>${metric.group}</li>`);
+        totalMissingEnvVarMetrics += 1;
+      }
     });
 
     this.$monitoredMetricsCount.text(totalMonitoredMetrics);
     this.$monitoredMetricsLoading.addClass('hidden');
     this.$monitoredMetricsList.removeClass('hidden');
+
+    if (totalMissingEnvVarMetrics > 0) {
+      this.$missingEnvVarPanel.removeClass('hidden');
+      this.$missingEnvVarMetricCount.text(totalMissingEnvVarMetrics);
+    }
   }
 
   loadActiveMetrics() {

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

@@ -8,7 +8,7 @@
     %p
       Metrics are automatically configured and monitored
       based on a library of metrics from popular exporters.
-      More information
+      = link_to 'More information', '#'
 
   .col-lg-9
     .panel.panel-default.js-panel-monitored-metrics{ data: { "active-metrics" => "#{namespace_project_prometheus_active_metrics_path(@project.namespace, @project)}.json" } }
@@ -27,12 +27,19 @@
             View environments
         %ul.metrics-list.hidden.js-metrics-list
 
-    .panel.panel-default.js-panel-missing-env-vars
+    .panel.panel-default.hidden.js-panel-missing-env-vars
       .panel-heading
         %h3.panel-title
           = icon('caret-right lg', class: 'panel-toggle js-panel-toggle', 'aria-label' => 'Toggle panel')
           Missing environment variable(s)
           %span.badge-count.js-env-var-count 0
       .panel-body.hidden
-        .empty-metrics
-          %p Nothing to show here at the moment
\ No newline at end of file
+        .flash-container
+          .flash-notice
+            .flash-text
+              To set up automatic monitoring, add the environment variable
+              %code
+                $CI_ENVIRONMENT_SLUG
+              to exporter's queries.
+              = link_to 'More information', '#'
+        %ul.metrics-list.js-missing-var-metrics-list
\ No newline at end of file