Update as per review feedback

3 files changed, 36 insertions, 15 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);
     });
   }
 }