Update as per review feedback

app/assets/javascripts/prometheus_metrics/constants.js

+export default {
+  EMPTY: 'empty',
+  LOADING: 'loading',
+  LIST: 'list',
+};

app/assets/javascripts/prometheus_metrics/index.js

@@ -2,6 +2,5 @@ import PrometheusMetrics from './prometheus_metrics';
 
 $(() => {
   const prometheusMetrics = new PrometheusMetrics('.js-prometheus-metrics-monitoring');
-  prometheusMetrics.init();
   prometheusMetrics.loadActiveMetrics();
 });

app/assets/javascripts/prometheus_metrics/prometheus_metrics.js

+import PANEL_STATE from './constants';
+
 export default class PrometheusMetrics {
   constructor(wrapperSelector) {
     this.backOffRequestCounter = 0;
@@ -16,31 +18,48 @@ export default class PrometheusMetrics {
     this.$missingEnvVarMetricsList = this.$missingEnvVarPanel.find('.js-missing-var-metrics-list');
 
     this.activeMetricsEndpoint = this.$monitoredMetricsPanel.data('active-metrics');
-  }
 
-  init() {
     this.$panelToggle.on('click', e => this.handlePanelToggle(e));
   }
 
   /* eslint-disable class-methods-use-this */
   handlePanelToggle(e) {
     const $toggleBtn = $(e.currentTarget);
-    const $currentPanelBody = $toggleBtn.parents('.panel').find('.panel-body');
-    if ($currentPanelBody.is(':visible')) {
-      $currentPanelBody.addClass('hidden');
+    const $currentPanelBody = $toggleBtn.closest('.panel').find('.panel-body');
+    $currentPanelBody.toggleClass('hidden');
+    if ($toggleBtn.hasClass('fa-caret-down')) {
       $toggleBtn.removeClass('fa-caret-down').addClass('fa-caret-right');
     } else {
-      $currentPanelBody.removeClass('hidden');
       $toggleBtn.removeClass('fa-caret-right').addClass('fa-caret-down');
     }
   }
 
+  showMonitoringMetricsPanelState(stateName) {
+    switch (stateName) {
+      case PANEL_STATE.LOADING:
+        this.$monitoredMetricsLoading.removeClass('hidden');
+        this.$monitoredMetricsEmpty.addClass('hidden');
+        this.$monitoredMetricsList.addClass('hidden');
+        break;
+      case PANEL_STATE.LIST:
+        this.$monitoredMetricsLoading.addClass('hidden');
+        this.$monitoredMetricsEmpty.addClass('hidden');
+        this.$monitoredMetricsList.removeClass('hidden');
+        break;
+      default:
+        this.$monitoredMetricsLoading.addClass('hidden');
+        this.$monitoredMetricsEmpty.removeClass('hidden');
+        this.$monitoredMetricsList.addClass('hidden');
+        break;
+    }
+  }
+
   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>`);
+      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>`);
@@ -49,17 +68,17 @@ export default class PrometheusMetrics {
     });
 
     this.$monitoredMetricsCount.text(totalMonitoredMetrics);
-    this.$monitoredMetricsLoading.addClass('hidden');
-    this.$monitoredMetricsList.removeClass('hidden');
+    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.$monitoredMetricsLoading.removeClass('hidden');
+    this.showMonitoringMetricsPanelState(PANEL_STATE.LOADING);
     gl.utils.backOff((next, stop) => {
       $.getJSON(this.activeMetricsEndpoint)
         .done((res) => {
@@ -80,13 +99,11 @@ export default class PrometheusMetrics {
       if (res && res.data && res.data.length) {
         this.populateActiveMetrics(res.data);
       } else {
-        this.$monitoredMetricsLoading.addClass('hidden');
-        this.$monitoredMetricsEmpty.removeClass('hidden');
+        this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY);
       }
     })
     .catch(() => {
-      this.$monitoredMetricsLoading.addClass('hidden');
-      this.$monitoredMetricsEmpty.removeClass('hidden');
+      this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY);
     });
   }
 }

app/assets/stylesheets/pages/settings.scss

@@ -39,11 +39,11 @@
 .prometheus-metrics-monitoring {
   .panel {
     .panel-toggle {
-      width: 12px;
-
-      &.fa-caret-right {
-        padding-left: 4px;
+      width: 14px;
     }
+
+    .badge {
+      font-size: inherit;
     }
 
     .panel-heading .badge-count {
@@ -55,14 +55,9 @@
       padding: 0;
     }
 
-    .badge-count {
-      margin-left: 3px;
-      padding: 3px 8px;
-      border-radius: 40%;
-    }
-
     .flash-container {
       margin-bottom: 0;
+      cursor: default;
 
       .flash-notice {
         border-radius: 0;
@@ -80,25 +75,20 @@
       margin-top: 10px;
       margin-bottom: 0;
     }
-
-    p {
-      color: $gl-gray-light;
-    }
   }
 
-  .loading-metrics .fa-spin {
+  .loading-metrics .metrics-load-spinner {
     color: $loading-color;
   }
 
   .metrics-list {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
+    margin-bottom: 0;
 
     li {
-      padding: 16px;
+      padding: $gl-padding;
 
-      .badge-count {
+      .badge {
+        margin-left: 5px;
         background: $badge-bg;
       }
     }

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

@@ -11,28 +11,28 @@
       = 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" } }
+    .panel.panel-default.js-panel-monitored-metrics{ data: { "active-metrics" => "#{namespace_project_prometheus_active_metrics_path(@project.namespace, @project, :json)}" } }
       .panel-heading
         %h3.panel-title
           Monitored
-          %span.badge-count.js-monitored-count 0
+          %span.badge.js-monitored-count 0
       .panel-body
         .loading-metrics.js-loading-metrics
-          = icon('spinner spin 3x')
+          = icon('spinner spin 3x', class: 'metrics-load-spinner')
           %p Finding and configuring metrics...
         .empty-metrics.hidden.js-empty-metrics
           = custom_icon('icon_empty_metrics')
           %p No metrics are being monitored. To start monitoring, deploy to an environment.
           = link_to project_environments_path(@project), title: 'View environments', class: 'btn btn-success' do
             View environments
-        %ul.metrics-list.hidden.js-metrics-list
+        %ul.list-unstyled.metrics-list.hidden.js-metrics-list
 
     .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')
+          = icon('caret-right lg fw', class: 'panel-toggle js-panel-toggle', 'aria-label' => 'Toggle panel')
           Missing environment variable
-          %span.badge-count.js-env-var-count 0
+          %span.badge.js-env-var-count 0
       .panel-body.hidden
         .flash-container
           .flash-notice
@@ -42,4 +42,4 @@
                 $CI_ENVIRONMENT_SLUG
               to exporter’s queries.
               = link_to 'More information', '#'
-        %ul.metrics-list.js-missing-var-metrics-list
+        %ul.list-unstyled.metrics-list.js-missing-var-metrics-list

spec/javascripts/prometheus_metrics/prometheus_metrics_spec.js

 import PrometheusMetrics from '~/prometheus_metrics/prometheus_metrics';
+import PANEL_STATE from '~/prometheus_metrics/constants';
 import { metrics, missingVarMetrics } from './mock_data';
 
 describe('PrometheusMetrics', () => {
@@ -35,6 +36,38 @@ describe('PrometheusMetrics', () => {
     });
   });
 
+  describe('showMonitoringMetricsPanelState', () => {
+    let prometheusMetrics;
+
+    beforeEach(() => {
+      prometheusMetrics = new PrometheusMetrics('.js-prometheus-metrics-monitoring');
+    });
+
+    it('should show loading state when called with `loading`', () => {
+      prometheusMetrics.showMonitoringMetricsPanelState(PANEL_STATE.LOADING);
+
+      expect(prometheusMetrics.$monitoredMetricsLoading.hasClass('hidden')).toBeFalsy();
+      expect(prometheusMetrics.$monitoredMetricsEmpty.hasClass('hidden')).toBeTruthy();
+      expect(prometheusMetrics.$monitoredMetricsList.hasClass('hidden')).toBeTruthy();
+    });
+
+    it('should show metrics list when called with `list`', () => {
+      prometheusMetrics.showMonitoringMetricsPanelState(PANEL_STATE.LIST);
+
+      expect(prometheusMetrics.$monitoredMetricsLoading.hasClass('hidden')).toBeTruthy();
+      expect(prometheusMetrics.$monitoredMetricsEmpty.hasClass('hidden')).toBeTruthy();
+      expect(prometheusMetrics.$monitoredMetricsList.hasClass('hidden')).toBeFalsy();
+    });
+
+    it('should show empty state when called with `empty`', () => {
+      prometheusMetrics.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY);
+
+      expect(prometheusMetrics.$monitoredMetricsLoading.hasClass('hidden')).toBeTruthy();
+      expect(prometheusMetrics.$monitoredMetricsEmpty.hasClass('hidden')).toBeFalsy();
+      expect(prometheusMetrics.$monitoredMetricsList.hasClass('hidden')).toBeTruthy();
+    });
+  });
+
   describe('populateActiveMetrics', () => {
     let prometheusMetrics;
 
@@ -52,7 +85,7 @@ describe('PrometheusMetrics', () => {
 
       expect(prometheusMetrics.$monitoredMetricsCount.text()).toEqual('12');
       expect($metricsListLi.length).toEqual(metrics.length);
-      expect($metricsListLi.first().find('.badge-count').text()).toEqual(`${metrics[0].active_metrics}`);
+      expect($metricsListLi.first().find('.badge').text()).toEqual(`${metrics[0].active_metrics}`);
     });
 
     it('should show missing environment variables list', () => {