Merge branch '28717-additional-metrics-review-branch' into 'master'

Support additional prometheus metrics - review branch

Closes #28717

See merge request !11712

3 files changed, 229 insertions, 0 deletions

diff --git a/spec/javascripts/fixtures/prometheus_service.rb b/spec/javascripts/fixtures/prometheus_service.rb
new file mode 100644
index 00000000000..3200577b326
--- /dev/null
+++ b/spec/javascripts/fixtures/prometheus_service.rb
@@ -0,0 +1,30 @@
+require 'spec_helper'
+
+describe Projects::ServicesController, '(JavaScript fixtures)', type: :controller do
+  include JavaScriptFixturesHelpers
+
+  let(:admin)     { create(:admin) }
+  let(:namespace) { create(:namespace, name: 'frontend-fixtures' )}
+  let(:project)   { create(:project_empty_repo, namespace: namespace, path: 'services-project') }
+  let!(:service)  { create(:prometheus_service, project: project) }
+  
+  render_views
+
+  before(:all) do
+    clean_frontend_fixtures('services/prometheus')
+  end
+
+  before(:each) do
+    sign_in(admin)
+  end
+
+  it 'services/prometheus/prometheus_service.html.raw' do |example|
+    get :edit,
+      namespace_id: namespace,
+      project_id: project,
+      id: service.to_param
+
+    expect(response).to be_success
+    store_frontend_fixture(response, example.description)
+  end
+end
diff --git a/spec/javascripts/prometheus_metrics/mock_data.js b/spec/javascripts/prometheus_metrics/mock_data.js
new file mode 100644
index 00000000000..3af56df92e2
--- /dev/null
+++ b/spec/javascripts/prometheus_metrics/mock_data.js
@@ -0,0 +1,41 @@
+export const metrics = [
+  {
+    group: 'Kubernetes',
+    priority: 1,
+    active_metrics: 4,
+    metrics_missing_requirements: 0,
+  },
+  {
+    group: 'HAProxy',
+    priority: 2,
+    active_metrics: 3,
+    metrics_missing_requirements: 0,
+  },
+  {
+    group: 'Apache',
+    priority: 3,
+    active_metrics: 5,
+    metrics_missing_requirements: 0,
+  },
+];
+
+export const missingVarMetrics = [
+  {
+    group: 'Kubernetes',
+    priority: 1,
+    active_metrics: 4,
+    metrics_missing_requirements: 0,
+  },
+  {
+    group: 'HAProxy',
+    priority: 2,
+    active_metrics: 3,
+    metrics_missing_requirements: 1,
+  },
+  {
+    group: 'Apache',
+    priority: 3,
+    active_metrics: 5,
+    metrics_missing_requirements: 3,
+  },
+];
diff --git a/spec/javascripts/prometheus_metrics/prometheus_metrics_spec.js b/spec/javascripts/prometheus_metrics/prometheus_metrics_spec.js
new file mode 100644
index 00000000000..2b3a821dbd9
--- /dev/null
+++ b/spec/javascripts/prometheus_metrics/prometheus_metrics_spec.js
@@ -0,0 +1,158 @@
+import PrometheusMetrics from '~/prometheus_metrics/prometheus_metrics';
+import PANEL_STATE from '~/prometheus_metrics/constants';
+import { metrics, missingVarMetrics } from './mock_data';
+
+describe('PrometheusMetrics', () => {
+  const FIXTURE = 'services/prometheus/prometheus_service.html.raw';
+  preloadFixtures(FIXTURE);
+
+  beforeEach(() => {
+    loadFixtures(FIXTURE);
+  });
+
+  describe('constructor', () => {
+    let prometheusMetrics;
+
+    beforeEach(() => {
+      prometheusMetrics = new PrometheusMetrics('.js-prometheus-metrics-monitoring');
+    });
+
+    it('should initialize wrapper element refs on class object', () => {
+      expect(prometheusMetrics.$wrapper).toBeDefined();
+      expect(prometheusMetrics.$monitoredMetricsPanel).toBeDefined();
+      expect(prometheusMetrics.$monitoredMetricsCount).toBeDefined();
+      expect(prometheusMetrics.$monitoredMetricsLoading).toBeDefined();
+      expect(prometheusMetrics.$monitoredMetricsEmpty).toBeDefined();
+      expect(prometheusMetrics.$monitoredMetricsList).toBeDefined();
+      expect(prometheusMetrics.$missingEnvVarPanel).toBeDefined();
+      expect(prometheusMetrics.$panelToggle).toBeDefined();
+      expect(prometheusMetrics.$missingEnvVarMetricCount).toBeDefined();
+      expect(prometheusMetrics.$missingEnvVarMetricsList).toBeDefined();
+    });
+
+    it('should initialize metadata on class object', () => {
+      expect(prometheusMetrics.backOffRequestCounter).toEqual(0);
+      expect(prometheusMetrics.activeMetricsEndpoint).toContain('/test');
+    });
+  });
+
+  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;
+
+    beforeEach(() => {
+      prometheusMetrics = new PrometheusMetrics('.js-prometheus-metrics-monitoring');
+    });
+
+    it('should show monitored metrics list', () => {
+      prometheusMetrics.populateActiveMetrics(metrics);
+
+      const $metricsListLi = prometheusMetrics.$monitoredMetricsList.find('li');
+
+      expect(prometheusMetrics.$monitoredMetricsLoading.hasClass('hidden')).toBeTruthy();
+      expect(prometheusMetrics.$monitoredMetricsList.hasClass('hidden')).toBeFalsy();
+
+      expect(prometheusMetrics.$monitoredMetricsCount.text()).toEqual('12');
+      expect($metricsListLi.length).toEqual(metrics.length);
+      expect($metricsListLi.first().find('.badge').text()).toEqual(`${metrics[0].active_metrics}`);
+    });
+
+    it('should show missing environment variables list', () => {
+      prometheusMetrics.populateActiveMetrics(missingVarMetrics);
+
+      expect(prometheusMetrics.$monitoredMetricsLoading.hasClass('hidden')).toBeTruthy();
+      expect(prometheusMetrics.$missingEnvVarPanel.hasClass('hidden')).toBeFalsy();
+
+      expect(prometheusMetrics.$missingEnvVarMetricCount.text()).toEqual('2');
+      expect(prometheusMetrics.$missingEnvVarPanel.find('li').length).toEqual(2);
+      expect(prometheusMetrics.$missingEnvVarPanel.find('.flash-container')).toBeDefined();
+    });
+  });
+
+  describe('loadActiveMetrics', () => {
+    let prometheusMetrics;
+
+    beforeEach(() => {
+      prometheusMetrics = new PrometheusMetrics('.js-prometheus-metrics-monitoring');
+    });
+
+    it('should show loader animation while response is being loaded and hide it when request is complete', (done) => {
+      const deferred = $.Deferred();
+      spyOn($, 'getJSON').and.returnValue(deferred.promise());
+
+      prometheusMetrics.loadActiveMetrics();
+
+      expect(prometheusMetrics.$monitoredMetricsLoading.hasClass('hidden')).toBeFalsy();
+      expect($.getJSON).toHaveBeenCalledWith(prometheusMetrics.activeMetricsEndpoint);
+
+      deferred.resolve({ data: metrics, success: true });
+
+      setTimeout(() => {
+        expect(prometheusMetrics.$monitoredMetricsLoading.hasClass('hidden')).toBeTruthy();
+        done();
+      });
+    });
+
+    it('should show empty state if response failed to load', (done) => {
+      const deferred = $.Deferred();
+      spyOn($, 'getJSON').and.returnValue(deferred.promise());
+      spyOn(prometheusMetrics, 'populateActiveMetrics');
+
+      prometheusMetrics.loadActiveMetrics();
+
+      deferred.reject();
+
+      setTimeout(() => {
+        expect(prometheusMetrics.$monitoredMetricsLoading.hasClass('hidden')).toBeTruthy();
+        expect(prometheusMetrics.$monitoredMetricsEmpty.hasClass('hidden')).toBeFalsy();
+        done();
+      });
+    });
+
+    it('should populate metrics list once response is loaded', (done) => {
+      const deferred = $.Deferred();
+      spyOn($, 'getJSON').and.returnValue(deferred.promise());
+      spyOn(prometheusMetrics, 'populateActiveMetrics');
+
+      prometheusMetrics.loadActiveMetrics();
+
+      deferred.resolve({ data: metrics, success: true });
+
+      setTimeout(() => {
+        expect(prometheusMetrics.populateActiveMetrics).toHaveBeenCalledWith(metrics);
+        done();
+      });
+    });
+  });
+});