Update as per review feedback

4 files changed, 46 insertions, 35 deletions

diff --git a/app/assets/javascripts/prometheus_metrics/constants.js b/app/assets/javascripts/prometheus_metrics/constants.js
new file mode 100644
index 00000000000..50f1248456e
--- /dev/null
+++ b/app/assets/javascripts/prometheus_metrics/constants.js
@@ -0,0 +1,5 @@
+export default {
+  EMPTY: 'empty',
+  LOADING: 'loading',
+  LIST: 'list',
+};
diff --git a/app/assets/javascripts/prometheus_metrics/index.js b/app/assets/javascripts/prometheus_metrics/index.js
index 9f20161783b..a0c43c5abe1 100644
--- a/app/assets/javascripts/prometheus_metrics/index.js
+++ b/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();
 });
diff --git a/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js b/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
index d83e85b2026..ef4d6df5138 100644
--- a/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
+++ b/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
@@ -1,3 +1,5 @@
+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);
     });
   }
 }
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index deed4501399..e2ed1239541 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -39,11 +39,11 @@
 .prometheus-metrics-monitoring {
   .panel {
     .panel-toggle {
-      width: 12px;
+      width: 14px;
+    }
 
-      &.fa-caret-right {
-        padding-left: 4px;
-      }
+    .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;
       }
     }