diff --git a/app/assets/javascripts/pages/admin/integrations/edit/index.js b/app/assets/javascripts/pages/admin/integrations/edit/index.js index c354ed1c1426d2e9885dd6ff3d8afbf29697315d..a1a887ad15669f85904b0320e3f421b8f7816cfb 100644 --- a/app/assets/javascripts/pages/admin/integrations/edit/index.js +++ b/app/assets/javascripts/pages/admin/integrations/edit/index.js @@ -1,11 +1,3 @@ import initIntegrationSettingsForm from '~/integrations/edit'; -import PrometheusMetrics from '~/prometheus_metrics/prometheus_metrics'; initIntegrationSettingsForm(); - -const prometheusSettingsSelector = '.js-prometheus-metrics-monitoring'; -const prometheusSettingsWrapper = document.querySelector(prometheusSettingsSelector); -if (prometheusSettingsWrapper) { - const prometheusMetrics = new PrometheusMetrics(prometheusSettingsSelector); - prometheusMetrics.loadActiveMetrics(); -} diff --git a/app/assets/javascripts/pages/groups/settings/integrations/edit/index.js b/app/assets/javascripts/pages/groups/settings/integrations/edit/index.js index c354ed1c1426d2e9885dd6ff3d8afbf29697315d..a1a887ad15669f85904b0320e3f421b8f7816cfb 100644 --- a/app/assets/javascripts/pages/groups/settings/integrations/edit/index.js +++ b/app/assets/javascripts/pages/groups/settings/integrations/edit/index.js @@ -1,11 +1,3 @@ import initIntegrationSettingsForm from '~/integrations/edit'; -import PrometheusMetrics from '~/prometheus_metrics/prometheus_metrics'; initIntegrationSettingsForm(); - -const prometheusSettingsSelector = '.js-prometheus-metrics-monitoring'; -const prometheusSettingsWrapper = document.querySelector(prometheusSettingsSelector); -if (prometheusSettingsWrapper) { - const prometheusMetrics = new PrometheusMetrics(prometheusSettingsSelector); - prometheusMetrics.loadActiveMetrics(); -} diff --git a/app/assets/javascripts/pages/projects/settings/integrations/edit/index.js b/app/assets/javascripts/pages/projects/settings/integrations/edit/index.js index 64df0d07d743a5ad35e423401f190251d785aed2..a1a887ad15669f85904b0320e3f421b8f7816cfb 100644 --- a/app/assets/javascripts/pages/projects/settings/integrations/edit/index.js +++ b/app/assets/javascripts/pages/projects/settings/integrations/edit/index.js @@ -1,11 +1,3 @@ import initIntegrationSettingsForm from '~/integrations/edit'; -import CustomMetrics from '~/prometheus_metrics/custom_metrics'; initIntegrationSettingsForm(); - -const prometheusSettingsSelector = '.js-prometheus-metrics-monitoring'; -const prometheusSettingsWrapper = document.querySelector(prometheusSettingsSelector); -if (prometheusSettingsWrapper) { - const customMetrics = new CustomMetrics(prometheusSettingsSelector); - customMetrics.init(); -} diff --git a/app/assets/javascripts/prometheus_metrics/constants.js b/app/assets/javascripts/prometheus_metrics/constants.js deleted file mode 100644 index 0ffd977f04ce418f45ff0a75e07e575d8eb2f68c..0000000000000000000000000000000000000000 --- a/app/assets/javascripts/prometheus_metrics/constants.js +++ /dev/null @@ -1,6 +0,0 @@ -export default { - EMPTY: 'empty', - LOADING: 'loading', - LIST: 'list', - NO_INTEGRATION: 'no-integration', -}; diff --git a/app/assets/javascripts/prometheus_metrics/custom_metrics.js b/app/assets/javascripts/prometheus_metrics/custom_metrics.js deleted file mode 100644 index a5bc912dcc36d860172db7253db2063393e93502..0000000000000000000000000000000000000000 --- a/app/assets/javascripts/prometheus_metrics/custom_metrics.js +++ /dev/null @@ -1,161 +0,0 @@ -import $ from 'jquery'; -import { escape, sortBy } from 'lodash'; -import axios from '~/lib/utils/axios_utils'; -import { capitalizeFirstCharacter } from '~/lib/utils/text_utility'; -import { s__ } from '~/locale'; -import PANEL_STATE from './constants'; -import PrometheusMetrics from './prometheus_metrics'; - -export default class CustomMetrics 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', - ); - this.$monitoredCustomMetricsCount = this.$monitoredCustomMetricsPanel.find( - '.js-custom-monitored-count', - ); - this.$monitoredCustomMetricsLoading = this.$monitoredCustomMetricsPanel.find( - '.js-loading-custom-metrics', - ); - this.$monitoredCustomMetricsEmpty = this.$monitoredCustomMetricsPanel.find( - '.js-empty-custom-metrics', - ); - 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.$newCustomMetricText = this.$monitoredCustomMetricsPanel.find('.js-new-metric-text'); - this.$flashCustomMetricsContainer = this.$wrapperCustomMetrics.find('.flash-container'); - - this.$els = [ - this.$monitoredCustomMetricsLoading, - this.$monitoredCustomMetricsList, - this.$newCustomMetricButton, - this.$newCustomMetricText, - this.$monitoredCustomMetricsNoIntegrationText, - this.$monitoredCustomMetricsEmpty, - ]; - - this.activeCustomMetricsEndpoint = - this.$monitoredCustomMetricsPanel.data('active-custom-metrics'); - this.environmentsDataEndpoint = this.$monitoredCustomMetricsPanel.data( - 'environments-data-endpoint', - ); - this.isServiceActive = this.$monitoredCustomMetricsPanel.data('service-active'); - } - - init() { - if (this.isServiceActive) { - this.loadActiveCustomMetrics(); - } else { - this.setNoIntegrationActiveState(); - } - } - - // eslint-disable-next-line class-methods-use-this - setHidden(els) { - els.forEach((el) => el.addClass('hidden')); - } - - setVisible(...els) { - this.setHidden(this.$els.filter((el) => !els.includes(el))); - els.forEach((el) => el.removeClass('hidden')); - } - - showMonitoringCustomMetricsPanelState(stateName) { - switch (stateName) { - case PANEL_STATE.LOADING: - this.setVisible(this.$monitoredCustomMetricsLoading); - break; - case PANEL_STATE.LIST: - this.setVisible(this.$newCustomMetricButton, this.$monitoredCustomMetricsList); - break; - case PANEL_STATE.NO_INTEGRATION: - this.setVisible( - this.$monitoredCustomMetricsNoIntegrationText, - this.$monitoredCustomMetricsEmpty, - ); - break; - default: - this.setVisible( - this.$monitoredCustomMetricsEmpty, - this.$newCustomMetricButton, - this.$newCustomMetricText, - ); - break; - } - } - - populateCustomMetrics() { - const capitalizeGroup = (metric) => ({ - ...metric, - group: capitalizeFirstCharacter(metric.group), - }); - - const sortedMetrics = sortBy(this.customMetrics.map(capitalizeGroup), ['group', 'title']); - - sortedMetrics.forEach((metric) => { - this.$monitoredCustomMetricsList.append(CustomMetrics.customMetricTemplate(metric)); - }); - - this.$monitoredCustomMetricsCount.text(this.customMetrics.length); - this.showMonitoringCustomMetricsPanelState(PANEL_STATE.LIST); - if (!this.environmentsData) { - this.showFlashMessage( - s__( - 'PrometheusService|These metrics will only be monitored after your first deployment to an environment', - ), - ); - } - } - - showFlashMessage(message) { - this.$flashCustomMetricsContainer.removeClass('hidden'); - this.$flashCustomMetricsContainer.find('.flash-text').text(message); - } - - setNoIntegrationActiveState() { - this.showMonitoringCustomMetricsPanelState(PANEL_STATE.NO_INTEGRATION); - this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY); - } - - loadActiveCustomMetrics() { - super.loadActiveMetrics(); - Promise.all([ - axios.get(this.activeCustomMetricsEndpoint), - axios.get(this.environmentsDataEndpoint), - ]) - .then(([customMetrics, environmentsData]) => { - this.environmentsData = environmentsData.data.environments; - if (!customMetrics.data || !customMetrics.data.metrics) { - this.showMonitoringCustomMetricsPanelState(PANEL_STATE.EMPTY); - } else { - this.customMetrics = customMetrics.data.metrics; - this.populateCustomMetrics(customMetrics.data.metrics); - } - }) - .catch((customMetricError) => { - this.showFlashMessage(customMetricError); - this.showMonitoringCustomMetricsPanelState(PANEL_STATE.EMPTY); - }); - } - - static customMetricTemplate(metric) { - return ` - <li class="custom-metric"> - <a href="${escape(metric.edit_path)}" class="custom-metric-link-bold"> - ${escape(metric.group)} / ${escape(metric.title)} (${escape(metric.unit)}) - </a> - </li> - `; - } -} diff --git a/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js b/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js deleted file mode 100644 index 821de0560cd7fa2e43eb067c215fde20db5a1a22..0000000000000000000000000000000000000000 --- a/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js +++ /dev/null @@ -1,151 +0,0 @@ -import $ from 'jquery'; -import { escape } from 'lodash'; -import { s__, n__, sprintf } from '~/locale'; -import axios from '../lib/utils/axios_utils'; -import { backOff } from '../lib/utils/common_utils'; -import PANEL_STATE from './constants'; - -export default class PrometheusMetrics { - constructor(wrapperSelector) { - this.backOffRequestCounter = 0; - - this.$wrapper = $(wrapperSelector); - - this.$monitoredMetricsPanel = this.$wrapper.find('.js-panel-monitored-metrics'); - this.$monitoredMetricsCount = this.$monitoredMetricsPanel.find('.js-monitored-count'); - this.$monitoredMetricsLoading = this.$monitoredMetricsPanel.find('.js-loading-metrics'); - this.$monitoredMetricsEmpty = this.$monitoredMetricsPanel.find('.js-empty-metrics'); - this.$monitoredMetricsList = this.$monitoredMetricsPanel.find('.js-metrics-list'); - - this.$missingEnvVarPanel = this.$wrapper.find('.js-panel-missing-env-vars'); - this.$panelToggleRight = this.$missingEnvVarPanel.find('.js-panel-toggle-right'); - this.$panelToggleDown = this.$missingEnvVarPanel.find('.js-panel-toggle-down'); - this.$missingEnvVarMetricCount = this.$missingEnvVarPanel.find('.js-env-var-count'); - this.$missingEnvVarMetricsList = this.$missingEnvVarPanel.find('.js-missing-var-metrics-list'); - - this.activeMetricsEndpoint = this.$monitoredMetricsPanel.data('activeMetrics'); - this.helpMetricsPath = this.$monitoredMetricsPanel.data('metrics-help-path'); - - this.$panelToggleRight.on('click', (e) => this.handlePanelToggle(e)); - this.$panelToggleDown.on('click', (e) => this.handlePanelToggle(e)); - } - - init() { - this.loadActiveMetrics(); - } - - handlePanelToggle(e) { - const $toggleBtn = $(e.currentTarget); - const $currentPanelBody = $toggleBtn.closest('.card').find('.card-body'); - $currentPanelBody.toggleClass('hidden'); - if ($toggleBtn.hasClass('js-panel-toggle-right')) { - $toggleBtn.addClass('hidden'); - this.$panelToggleDown.removeClass('hidden'); - } else if ($toggleBtn.hasClass('js-panel-toggle-down')) { - $toggleBtn.addClass('hidden'); - this.$panelToggleRight.removeClass('hidden'); - } - } - - 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; - let totalExporters = 0; - - metrics.forEach((metric) => { - if (metric.active_metrics > 0) { - totalExporters += 1; - this.$monitoredMetricsList.append( - `<li>${escape(metric.group)}<span class="badge">${escape( - metric.active_metrics, - )}</span></li>`, - ); - totalMonitoredMetrics += metric.active_metrics; - if (metric.metrics_missing_requirements > 0) { - this.$missingEnvVarMetricsList.append(`<li>${escape(metric.group)}</li>`); - totalMissingEnvVarMetrics += 1; - } - } - }); - - if (totalMonitoredMetrics === 0) { - const emptyCommonMetricsText = sprintf( - s__('PrometheusService|No %{docsUrlStart}common metrics%{docsUrlEnd} were found'), - { - docsUrlStart: `<a href="${this.helpMetricsPath}">`, - docsUrlEnd: '</a>', - }, - false, - ); - this.$monitoredMetricsEmpty.empty(); - this.$monitoredMetricsEmpty.append(`<p class="text-tertiary">${emptyCommonMetricsText}</p>`); - this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY); - } else { - const metricsCountText = sprintf( - s__('PrometheusService|%{exporters} with %{metrics} were found'), - { - exporters: n__('%d exporter', '%d exporters', totalExporters), - metrics: n__('%d metric', '%d metrics', totalMonitoredMetrics), - }, - ); - this.$monitoredMetricsCount.text(metricsCountText); - this.showMonitoringMetricsPanelState(PANEL_STATE.LIST); - - if (totalMissingEnvVarMetrics > 0) { - this.$missingEnvVarPanel.removeClass('hidden'); - this.$missingEnvVarMetricCount.text(totalMissingEnvVarMetrics); - } - } - } - - loadActiveMetrics() { - this.showMonitoringMetricsPanelState(PANEL_STATE.LOADING); - backOff((next, stop) => { - axios - .get(this.activeMetricsEndpoint) - .then(({ data }) => { - if (data && data.success) { - stop(data); - } else { - this.backOffRequestCounter += 1; - if (this.backOffRequestCounter < 3) { - next(); - } else { - stop(data); - } - } - }) - .catch(stop); - }) - .then((res) => { - if (res && res.data && res.data.length) { - this.populateActiveMetrics(res.data); - } else { - this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY); - } - }) - .catch(() => { - this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY); - }); - } -} diff --git a/locale/gitlab.pot b/locale/gitlab.pot index f13002be4839b84654e4a5eda72c361b93168b60..71e51eb5c9eec8555280a6be3ed50b1c8298949c 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -260,11 +260,6 @@ msgid_plural "%d epics" msgstr[0] "" msgstr[1] "" -msgid "%d exporter" -msgid_plural "%d exporters" -msgstr[0] "" -msgstr[1] "" - msgid "%d failed security job" msgid_plural "%d failed security jobs" msgstr[0] "" @@ -350,11 +345,6 @@ msgid_plural "%d merge requests" msgstr[0] "" msgstr[1] "" -msgid "%d metric" -msgid_plural "%d metrics" -msgstr[0] "" -msgstr[1] "" - msgid "%d milestone" msgid_plural "%d milestones" msgstr[0] "" @@ -42449,9 +42439,6 @@ msgstr "" msgid "PrometheusAlerts|is less than" msgstr "" -msgid "PrometheusService|%{exporters} with %{metrics} were found" -msgstr "" - msgid "PrometheusService|Active" msgstr "" @@ -42503,9 +42490,6 @@ msgstr "" msgid "PrometheusService|New metric" msgstr "" -msgid "PrometheusService|No %{docsUrlStart}common metrics%{docsUrlEnd} were found" -msgstr "" - msgid "PrometheusService|No custom metrics have been created. Create one using the button above" msgstr "" @@ -42524,9 +42508,6 @@ msgstr "" msgid "PrometheusService|The contents of the credentials.json file of your service account." msgstr "" -msgid "PrometheusService|These metrics will only be monitored after your first deployment to an environment" -msgstr "" - msgid "PrometheusService|To set up automatic monitoring, add the environment variable %{variable} to exporter's queries." msgstr "" diff --git a/spec/frontend/prometheus_metrics/custom_metrics_spec.js b/spec/frontend/prometheus_metrics/custom_metrics_spec.js deleted file mode 100644 index 706f932aa8dd95fc48baf4c441d07fb33d04b0af..0000000000000000000000000000000000000000 --- a/spec/frontend/prometheus_metrics/custom_metrics_spec.js +++ /dev/null @@ -1,116 +0,0 @@ -import MockAdapter from 'axios-mock-adapter'; -import prometheusIntegration from 'test_fixtures/integrations/prometheus/prometheus_integration.html'; -import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; -import axios from '~/lib/utils/axios_utils'; -import { HTTP_STATUS_OK } from '~/lib/utils/http_status'; -import PANEL_STATE from '~/prometheus_metrics/constants'; -import CustomMetrics from '~/prometheus_metrics/custom_metrics'; -import { metrics1 as metrics } from './mock_data'; - -describe('PrometheusMetrics', () => { - const customMetricsEndpoint = - 'http://test.host/frontend-fixtures/integrations-project/prometheus/metrics'; - let mock; - - beforeEach(() => { - mock = new MockAdapter(axios); - mock.onGet(customMetricsEndpoint).reply(HTTP_STATUS_OK, { - metrics, - }); - setHTMLFixture(prometheusIntegration); - }); - - afterEach(() => { - mock.restore(); - resetHTMLFixture(); - }); - - describe('Custom Metrics', () => { - let customMetrics; - - beforeEach(() => { - customMetrics = new CustomMetrics('.js-prometheus-metrics-monitoring'); - }); - - it('should initialize wrapper element refs on the class object', () => { - expect(customMetrics.$wrapperCustomMetrics).not.toBeNull(); - expect(customMetrics.$monitoredCustomMetricsPanel).not.toBeNull(); - expect(customMetrics.$monitoredCustomMetricsCount).not.toBeNull(); - expect(customMetrics.$monitoredCustomMetricsLoading).not.toBeNull(); - expect(customMetrics.$monitoredCustomMetricsEmpty).not.toBeNull(); - expect(customMetrics.$monitoredCustomMetricsList).not.toBeNull(); - expect(customMetrics.$newCustomMetricButton).not.toBeNull(); - expect(customMetrics.$flashCustomMetricsContainer).not.toBeNull(); - }); - - it('should contain api endpoints', () => { - expect(customMetrics.activeCustomMetricsEndpoint).toEqual(customMetricsEndpoint); - }); - - it('should show loading state when called with `loading`', () => { - customMetrics.showMonitoringCustomMetricsPanelState(PANEL_STATE.LOADING); - - expect(customMetrics.$monitoredCustomMetricsLoading.hasClass('hidden')).toEqual(false); - expect(customMetrics.$monitoredCustomMetricsEmpty.hasClass('hidden')).toBe(true); - expect(customMetrics.$monitoredCustomMetricsList.hasClass('hidden')).toBe(true); - expect(customMetrics.$monitoredCustomMetricsNoIntegrationText.hasClass('hidden')).toBe(true); - - expect(customMetrics.$newCustomMetricButton.hasClass('hidden')).toBe(true); - expect(customMetrics.$newCustomMetricText.hasClass('hidden')).toBe(true); - }); - - it('should show metrics list when called with `list`', () => { - customMetrics.showMonitoringCustomMetricsPanelState(PANEL_STATE.LIST); - - expect(customMetrics.$monitoredCustomMetricsLoading.hasClass('hidden')).toBe(true); - expect(customMetrics.$monitoredCustomMetricsEmpty.hasClass('hidden')).toBe(true); - expect(customMetrics.$monitoredCustomMetricsList.hasClass('hidden')).toEqual(false); - expect(customMetrics.$monitoredCustomMetricsNoIntegrationText.hasClass('hidden')).toBe(true); - - expect(customMetrics.$newCustomMetricButton.hasClass('hidden')).toEqual(false); - expect(customMetrics.$newCustomMetricText.hasClass('hidden')).toBe(true); - }); - - it('should show empty state when called with `empty`', () => { - customMetrics.showMonitoringCustomMetricsPanelState(PANEL_STATE.EMPTY); - - expect(customMetrics.$monitoredCustomMetricsLoading.hasClass('hidden')).toBe(true); - expect(customMetrics.$monitoredCustomMetricsEmpty.hasClass('hidden')).toEqual(false); - expect(customMetrics.$monitoredCustomMetricsList.hasClass('hidden')).toBe(true); - expect(customMetrics.$monitoredCustomMetricsNoIntegrationText.hasClass('hidden')).toBe(true); - - expect(customMetrics.$newCustomMetricButton.hasClass('hidden')).toEqual(false); - expect(customMetrics.$newCustomMetricText.hasClass('hidden')).toEqual(false); - }); - - it('should show monitored metrics list', () => { - customMetrics.customMetrics = metrics; - customMetrics.populateCustomMetrics(); - - const $metricsListLi = customMetrics.$monitoredCustomMetricsList.find('li'); - - expect(customMetrics.$monitoredCustomMetricsLoading.hasClass('hidden')).toBe(true); - expect(customMetrics.$monitoredCustomMetricsList.hasClass('hidden')).toEqual(false); - expect(customMetrics.$monitoredCustomMetricsNoIntegrationText.hasClass('hidden')).toBe(true); - - expect(customMetrics.$newCustomMetricButton.hasClass('hidden')).toEqual(false); - expect(customMetrics.$newCustomMetricText.hasClass('hidden')).toBe(true); - - expect($metricsListLi.length).toEqual(metrics.length); - }); - - it('should show the NO-INTEGRATION empty state', () => { - customMetrics.setNoIntegrationActiveState(); - - expect(customMetrics.$monitoredCustomMetricsEmpty.hasClass('hidden')).toEqual(false); - expect(customMetrics.$monitoredCustomMetricsNoIntegrationText.hasClass('hidden')).toEqual( - false, - ); - - expect(customMetrics.$monitoredCustomMetricsLoading.hasClass('hidden')).toBe(true); - expect(customMetrics.$monitoredCustomMetricsList.hasClass('hidden')).toBe(true); - expect(customMetrics.$newCustomMetricButton.hasClass('hidden')).toBe(true); - expect(customMetrics.$newCustomMetricText.hasClass('hidden')).toBe(true); - }); - }); -}); diff --git a/spec/frontend/prometheus_metrics/mock_data.js b/spec/frontend/prometheus_metrics/mock_data.js deleted file mode 100644 index 375447ac3bef99e1e9c46b1b09dd2de7f3a5a137..0000000000000000000000000000000000000000 --- a/spec/frontend/prometheus_metrics/mock_data.js +++ /dev/null @@ -1,62 +0,0 @@ -export const metrics1 = [ - { - edit_path: '/root/prometheus-test/prometheus/metrics/3/edit', - id: 3, - title: 'Requests', - group: 'Business', - }, - { - edit_path: '/root/prometheus-test/prometheus/metrics/2/edit', - id: 2, - title: 'Sales by the hour', - group: 'Business', - }, - { - edit_path: '/root/prometheus-test/prometheus/metrics/1/edit', - id: 1, - title: 'Requests', - group: 'Business', - }, -]; - -export const metrics2 = [ - { - 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/frontend/prometheus_metrics/prometheus_metrics_spec.js b/spec/frontend/prometheus_metrics/prometheus_metrics_spec.js deleted file mode 100644 index 64cf69b7f5be1806a2414347c805bf85e38c8647..0000000000000000000000000000000000000000 --- a/spec/frontend/prometheus_metrics/prometheus_metrics_spec.js +++ /dev/null @@ -1,176 +0,0 @@ -import MockAdapter from 'axios-mock-adapter'; -import prometheusIntegration from 'test_fixtures/integrations/prometheus/prometheus_integration.html'; -import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; -import waitForPromises from 'helpers/wait_for_promises'; -import axios from '~/lib/utils/axios_utils'; -import { HTTP_STATUS_OK } from '~/lib/utils/http_status'; -import PANEL_STATE from '~/prometheus_metrics/constants'; -import PrometheusMetrics from '~/prometheus_metrics/prometheus_metrics'; -import { metrics2 as metrics, missingVarMetrics } from './mock_data'; - -describe('PrometheusMetrics', () => { - beforeEach(() => { - setHTMLFixture(prometheusIntegration); - }); - - describe('constructor', () => { - let prometheusMetrics; - - beforeEach(() => { - prometheusMetrics = new PrometheusMetrics('.js-prometheus-metrics-monitoring'); - }); - - afterEach(() => { - resetHTMLFixture(); - }); - - 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.$panelToggleRight).toBeDefined(); - expect(prometheusMetrics.$panelToggleDown).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')).toBe(false); - expect(prometheusMetrics.$monitoredMetricsEmpty.hasClass('hidden')).toBe(true); - expect(prometheusMetrics.$monitoredMetricsList.hasClass('hidden')).toBe(true); - }); - - it('should show metrics list when called with `list`', () => { - prometheusMetrics.showMonitoringMetricsPanelState(PANEL_STATE.LIST); - - expect(prometheusMetrics.$monitoredMetricsLoading.hasClass('hidden')).toBe(true); - expect(prometheusMetrics.$monitoredMetricsEmpty.hasClass('hidden')).toBe(true); - expect(prometheusMetrics.$monitoredMetricsList.hasClass('hidden')).toBe(false); - }); - - it('should show empty state when called with `empty`', () => { - prometheusMetrics.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY); - - expect(prometheusMetrics.$monitoredMetricsLoading.hasClass('hidden')).toBe(true); - expect(prometheusMetrics.$monitoredMetricsEmpty.hasClass('hidden')).toBe(false); - expect(prometheusMetrics.$monitoredMetricsList.hasClass('hidden')).toBe(true); - }); - }); - - 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')).toBe(true); - expect(prometheusMetrics.$monitoredMetricsList.hasClass('hidden')).toBe(false); - - expect(prometheusMetrics.$monitoredMetricsCount.text()).toEqual( - '3 exporters with 12 metrics were found', - ); - - 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')).toBe(true); - expect(prometheusMetrics.$missingEnvVarPanel.hasClass('hidden')).toBe(false); - - 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; - let mock; - - function mockSuccess() { - mock.onGet(prometheusMetrics.activeMetricsEndpoint).reply(HTTP_STATUS_OK, { - data: metrics, - success: true, - }); - } - - function mockError() { - mock.onGet(prometheusMetrics.activeMetricsEndpoint).networkError(); - } - - beforeEach(() => { - jest.spyOn(axios, 'get'); - - prometheusMetrics = new PrometheusMetrics('.js-prometheus-metrics-monitoring'); - - mock = new MockAdapter(axios); - }); - - afterEach(() => { - mock.restore(); - }); - - it('should show loader animation while response is being loaded and hide it when request is complete', async () => { - mockSuccess(); - - prometheusMetrics.loadActiveMetrics(); - - expect(prometheusMetrics.$monitoredMetricsLoading.hasClass('hidden')).toBe(false); - expect(axios.get).toHaveBeenCalledWith(prometheusMetrics.activeMetricsEndpoint); - - await waitForPromises(); - - expect(prometheusMetrics.$monitoredMetricsLoading.hasClass('hidden')).toBe(true); - }); - - it('should show empty state if response failed to load', async () => { - mockError(); - - prometheusMetrics.loadActiveMetrics(); - - await waitForPromises(); - - expect(prometheusMetrics.$monitoredMetricsLoading.hasClass('hidden')).toBe(true); - expect(prometheusMetrics.$monitoredMetricsEmpty.hasClass('hidden')).toBe(false); - }); - - it('should populate metrics list once response is loaded', async () => { - jest.spyOn(prometheusMetrics, 'populateActiveMetrics').mockImplementation(); - mockSuccess(); - - prometheusMetrics.loadActiveMetrics(); - - await waitForPromises(); - - expect(prometheusMetrics.populateActiveMetrics).toHaveBeenCalledWith(metrics); - }); - }); -});