Changes initial state for disabled prometheus integrations

ee/app/assets/javascripts/pages/projects/services/edit/index.js

@@ -8,6 +8,10 @@ document.addEventListener('DOMContentLoaded', () => {
   const prometheusSettingsWrapper = document.querySelector('.js-prometheus-metrics-monitoring');
   if (prometheusSettingsWrapper) {
     const prometheusMetrics = new PrometheusMetrics('.js-prometheus-metrics-monitoring');
-    prometheusMetrics.loadActiveCustomMetrics();
+    if (prometheusMetrics.isServiceActive) {
+      prometheusMetrics.loadActiveCustomMetrics();
+    } else {
+      prometheusMetrics.setNoIntegrationActiveState();
+    }
   }
 });

ee/app/assets/javascripts/prometheus_metrics/constants.js

+import PANEL_STATE from '~/prometheus_metrics/constants';
+
+const PANEL_STATE_EE = {
+  NO_INTEGRATION: 'no-integration',
+};
+
+export default Object.assign({}, PANEL_STATE, PANEL_STATE_EE);

ee/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js

 import $ from 'jquery';
 import _ from 'underscore';
 import PrometheusMetrics from '~/prometheus_metrics/prometheus_metrics';
-import PANEL_STATE from '~/prometheus_metrics/constants';
+import PANEL_STATE from './constants';
 import axios from '~/lib/utils/axios_utils';
 import { s__ } from '~/locale';
 import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
@@ -9,8 +9,12 @@ import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 export default class EEPrometheusMetrics extends PrometheusMetrics {
   constructor(wrapperSelector) {
     super(wrapperSelector);
+    this.customMetrics = [];
+    this.environmentsData = [];
+    this.$els = [];
 
     this.$wrapperCustomMetrics = $(wrapperSelector);
+
     this.$monitoredCustomMetricsPanel = this.$wrapperCustomMetrics.find(
       '.js-panel-custom-monitored-metrics',
     );
@@ -26,10 +30,23 @@ export default class EEPrometheusMetrics extends PrometheusMetrics {
     this.$monitoredCustomMetricsList = this.$monitoredCustomMetricsPanel.find(
       '.js-custom-metrics-list',
     );
+    this.$monitoredCustomMetricsNoIntegrationText = this.$monitoredCustomMetricsPanel.find(
+      '.js-no-active-integration-text',
+    );
     this.$newCustomMetricButton = this.$monitoredCustomMetricsPanel.find('.js-new-metric-button');
+    this.$newCustomMetricButtonBody = this.$monitoredCustomMetricsPanel.find(
+      '.js-new-metric-body-button',
+    );
     this.$flashCustomMetricsContainer = this.$wrapperCustomMetrics.find('.flash-container');
-    this.customMetrics = [];
-    this.environmentsData = [];
+
+    this.$els = [
+      this.$monitoredCustomMetricsLoading,
+      this.$monitoredCustomMetricsList,
+      this.$newCustomMetricButton,
+      this.$newCustomMetricButtonBody,
+      this.$monitoredCustomMetricsNoIntegrationText,
+      this.$monitoredCustomMetricsEmpty,
+    ];
 
     this.activeCustomMetricsEndpoint = this.$monitoredCustomMetricsPanel.data(
       'active-custom-metrics',
@@ -37,27 +54,40 @@ export default class EEPrometheusMetrics extends PrometheusMetrics {
     this.environmentsDataEndpoint = this.$monitoredCustomMetricsPanel.data(
       'environments-data-endpoint',
     );
+    this.isServiceActive = this.$monitoredCustomMetricsPanel.data('service-active');
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  setHidden(els) {
+    els.forEach(el => el.addClass('hidden'));
+  }
+
+  setVisible(...els) {
+    this.setHidden(_.difference(this.$els, els));
+    els.forEach(el => el.removeClass('hidden'));
   }
 
   showMonitoringCustomMetricsPanelState(stateName) {
     switch (stateName) {
       case PANEL_STATE.LOADING:
-        this.$monitoredCustomMetricsLoading.removeClass('hidden');
-        this.$monitoredCustomMetricsEmpty.addClass('hidden');
-        this.$monitoredCustomMetricsList.addClass('hidden');
-        this.$newCustomMetricButton.addClass('hidden');
+        this.setVisible(this.$monitoredCustomMetricsLoading);
         break;
       case PANEL_STATE.LIST:
-        this.$monitoredCustomMetricsLoading.addClass('hidden');
-        this.$monitoredCustomMetricsEmpty.addClass('hidden');
-        this.$newCustomMetricButton.removeClass('hidden');
-        this.$monitoredCustomMetricsList.removeClass('hidden');
+        this.setVisible(this.$newCustomMetricButton, this.$monitoredCustomMetricsList);
+
+        break;
+      case PANEL_STATE.NO_INTEGRATION:
+        this.setVisible(
+          this.$monitoredCustomMetricsNoIntegrationText,
+          this.$monitoredCustomMetricsEmpty,
+        );
         break;
       default:
-        this.$monitoredCustomMetricsLoading.addClass('hidden');
-        this.$monitoredCustomMetricsEmpty.removeClass('hidden');
-        this.$monitoredCustomMetricsList.addClass('hidden');
-        this.$newCustomMetricButton.addClass('hidden');
+        this.setVisible(
+          this.$monitoredCustomMetricsEmpty,
+          this.$newCustomMetricButton,
+          this.$newCustomMetricButtonBody,
+        );
         break;
     }
   }
@@ -90,6 +120,11 @@ export default class EEPrometheusMetrics extends PrometheusMetrics {
     this.$flashCustomMetricsContainer.find('.flash-text').text(message);
   }
 
+  setNoIntegrationActiveState() {
+    this.showMonitoringCustomMetricsPanelState(PANEL_STATE.NO_INTEGRATION);
+    this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY);
+  }
+
   loadActiveCustomMetrics() {
     super.loadActiveMetrics();
     Promise.all([

ee/app/views/projects/services/prometheus/_metrics.html.haml

 - project = local_assigns.fetch(:project)
 
-.card.custom-monitored-metrics.js-panel-custom-monitored-metrics{ data: { active_custom_metrics: project_prometheus_metrics_path(project), environments_data: environments_list_data } }
+.card.custom-monitored-metrics.js-panel-custom-monitored-metrics{ data: { active_custom_metrics: project_prometheus_metrics_path(project), environments_data: environments_list_data, service_active: "#{@service.active}" } }
   .card-header
     %h3.card-title
       = s_('PrometheusService|Custom metrics')
@@ -15,7 +15,9 @@
         = icon('spinner spin', class: 'metrics-load-spinner')
         = s_('PrometheusService|Finding custom metrics...')
     .empty-metrics.hidden.js-empty-custom-metrics
-      = link_to s_('PrometheusService|New metric'), new_project_prometheus_metric_path(project), class: 'btn btn-success prepend-top-10 prepend-left-10 append-bottom-10'
+      %p.text-tertiary.prepend-top-10.prepend-left-10.js-no-active-integration-text.hidden
+        = s_('PrometheusService|Enable Prometheus to define custom metrics, using either option above')
+      = link_to s_('PrometheusService|New metric'), new_project_prometheus_metric_path(project), class: 'btn btn-success prepend-top-10 prepend-left-10 append-bottom-10 js-new-metric-body-button hidden'
     %ul.list-unstyled.metrics-list.hidden.js-custom-metrics-list
 
 = render_ce 'projects/services/prometheus/metrics', project: project

ee/changelogs/unreleased/jivl-add-empty-state-for-custom-metrics.yml

+---
+title: Changes initial state for disabled prometheus integrations
+merge_request: 8434
+author:
+type: fixed

ee/spec/javascripts/prometheus_metrics/prometheus_metrics_spec.js

@@ -51,6 +51,12 @@ describe('PrometheusMetrics EE', () => {
       expect(prometheusMetrics.$monitoredCustomMetricsLoading.hasClass('hidden')).toEqual(false);
       expect(prometheusMetrics.$monitoredCustomMetricsEmpty.hasClass('hidden')).toBeTruthy();
       expect(prometheusMetrics.$monitoredCustomMetricsList.hasClass('hidden')).toBeTruthy();
+      expect(
+        prometheusMetrics.$monitoredCustomMetricsNoIntegrationText.hasClass('hidden'),
+      ).toBeTruthy();
+
+      expect(prometheusMetrics.$newCustomMetricButton.hasClass('hidden')).toBeTruthy();
+      expect(prometheusMetrics.$newCustomMetricButtonBody.hasClass('hidden')).toBeTruthy();
     });
 
     it('should show metrics list when called with `list`', () => {
@@ -59,6 +65,12 @@ describe('PrometheusMetrics EE', () => {
       expect(prometheusMetrics.$monitoredCustomMetricsLoading.hasClass('hidden')).toBeTruthy();
       expect(prometheusMetrics.$monitoredCustomMetricsEmpty.hasClass('hidden')).toBeTruthy();
       expect(prometheusMetrics.$monitoredCustomMetricsList.hasClass('hidden')).toEqual(false);
+      expect(
+        prometheusMetrics.$monitoredCustomMetricsNoIntegrationText.hasClass('hidden'),
+      ).toBeTruthy();
+
+      expect(prometheusMetrics.$newCustomMetricButton.hasClass('hidden')).toEqual(false);
+      expect(prometheusMetrics.$newCustomMetricButtonBody.hasClass('hidden')).toBeTruthy();
     });
 
     it('should show empty state when called with `empty`', () => {
@@ -67,6 +79,12 @@ describe('PrometheusMetrics EE', () => {
       expect(prometheusMetrics.$monitoredCustomMetricsLoading.hasClass('hidden')).toBeTruthy();
       expect(prometheusMetrics.$monitoredCustomMetricsEmpty.hasClass('hidden')).toEqual(false);
       expect(prometheusMetrics.$monitoredCustomMetricsList.hasClass('hidden')).toBeTruthy();
+      expect(
+        prometheusMetrics.$monitoredCustomMetricsNoIntegrationText.hasClass('hidden'),
+      ).toBeTruthy();
+
+      expect(prometheusMetrics.$newCustomMetricButton.hasClass('hidden')).toEqual(false);
+      expect(prometheusMetrics.$newCustomMetricButtonBody.hasClass('hidden')).toEqual(false);
     });
 
     it('should show monitored metrics list', () => {
@@ -77,8 +95,28 @@ describe('PrometheusMetrics EE', () => {
 
       expect(prometheusMetrics.$monitoredCustomMetricsLoading.hasClass('hidden')).toBeTruthy();
       expect(prometheusMetrics.$monitoredCustomMetricsList.hasClass('hidden')).toEqual(false);
+      expect(
+        prometheusMetrics.$monitoredCustomMetricsNoIntegrationText.hasClass('hidden'),
+      ).toBeTruthy();
+
+      expect(prometheusMetrics.$newCustomMetricButton.hasClass('hidden')).toEqual(false);
+      expect(prometheusMetrics.$newCustomMetricButtonBody.hasClass('hidden')).toBeTruthy();
 
       expect($metricsListLi.length).toEqual(metrics.length);
     });
+
+    it('should show the NO-INTEGRATION empty state', () => {
+      prometheusMetrics.setNoIntegrationActiveState();
+
+      expect(prometheusMetrics.$monitoredCustomMetricsEmpty.hasClass('hidden')).toEqual(false);
+      expect(prometheusMetrics.$monitoredCustomMetricsNoIntegrationText.hasClass('hidden')).toEqual(
+        false,
+      );
+
+      expect(prometheusMetrics.$monitoredCustomMetricsLoading.hasClass('hidden')).toBeTruthy();
+      expect(prometheusMetrics.$monitoredCustomMetricsList.hasClass('hidden')).toBeTruthy();
+      expect(prometheusMetrics.$newCustomMetricButton.hasClass('hidden')).toBeTruthy();
+      expect(prometheusMetrics.$newCustomMetricButtonBody.hasClass('hidden')).toBeTruthy();
+    });
   });
 });

locale/gitlab.pot

@@ -6778,6 +6778,9 @@ msgstr ""
 msgid "PrometheusService|Custom metrics"
 msgstr ""
 
+msgid "PrometheusService|Enable Prometheus to define custom metrics, using either option above"
+msgstr ""
+
 msgid "PrometheusService|Finding and configuring metrics..."
 msgstr ""