From 3f0eff82592f4a30abb6ffd15ac248a5f773c994 Mon Sep 17 00:00:00 2001
From: kushalpandya <kushal@gitlab.com>
Date: Thu, 1 Jun 2017 21:24:56 +0530
Subject: Update as per review feedback

---
 .../javascripts/prometheus_metrics/constants.js    |  5 +++
 app/assets/javascripts/prometheus_metrics/index.js |  1 -
 .../prometheus_metrics/prometheus_metrics.js       | 45 +++++++++++++++-------
 3 files changed, 36 insertions(+), 15 deletions(-)
 create mode 100644 app/assets/javascripts/prometheus_metrics/constants.js

(limited to 'app/assets/javascripts/prometheus_metrics')

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);
     });
   }
 }
-- 
cgit v1.2.3