Corrected FE code

app/assets/javascripts/prometheus_metrics/prometheus_metrics.js

+import _ from 'underscore';
 import { s__, n__, sprintf } from '~/locale';
 import axios from '../lib/utils/axios_utils';
 import PANEL_STATE from './constants';
@@ -21,6 +22,7 @@ export default class PrometheusMetrics {
     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.$panelToggle.on('click', e => this.handlePanelToggle(e));
   }
@@ -65,10 +67,10 @@ export default class PrometheusMetrics {
     metrics.forEach((metric) => {
       if (metric.active_metrics > 0) {
         totalExporters += 1;
-        this.$monitoredMetricsList.append(`<li>${metric.group}<span class="badge">${metric.active_metrics}</span></li>`);
+        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>${metric.group}</li>`);
+          this.$missingEnvVarMetricsList.append(`<li>${_.escape(metric.group)}</li>`);
           totalMissingEnvVarMetrics += 1;
         }
       }
@@ -76,22 +78,21 @@ export default class PrometheusMetrics {
 
     if (totalMonitoredMetrics === 0) {
       const emptyCommonMetricsText = sprintf(s__('PrometheusService|<p class="text-tertiary">No <a href="%{docsUrl}">common metrics</a> were found</p>'), {
-        docsUrl: '/help/user/project/integrations/prometheus_library/metrics',
+        docsUrl: this.helpMetricsPath,
       }, false);
       this.$monitoredMetricsEmpty.empty();
       this.$monitoredMetricsEmpty.append(emptyCommonMetricsText);
       this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY);
     } else {
       const metricsCountText = sprintf(s__('PrometheusService|%{exporters} with %{metrics} were found'), {
-        exporters: `${totalExporters} ${n__('exporter', 'exporters', totalExporters)}`,
-        metrics: `${totalMonitoredMetrics} ${n__('metric', 'metrics', totalMonitoredMetrics)}`,
+        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.$missingEnvVarPanel.find('.flash-container').off('click');
         this.$missingEnvVarMetricCount.text(totalMissingEnvVarMetrics);
       }
     }

app/assets/stylesheets/pages/settings.scss

@@ -266,20 +266,11 @@
     .custom-metric {
       display: flex;
       align-items: center;
-
-      a {
-        font-weight: bold;
-        text-decoration: none;
-      }
     }
-  }
 
-  .empty-metrics,
-  .loading-metrics {
-    p,
-    .btn {
-      margin: 10px 0;
-      margin-left: 10px;
+    .custom-metric-link-bold {
+      font-weight: $gl-font-weight-bold;
+      text-decoration: none;
     }
   }
 

app/views/projects/services/prometheus/_show.html.haml

@@ -7,7 +7,7 @@
       = link_to s_('PrometheusService|More information'), help_page_path('user/project/integrations/prometheus_library/metrics'), target: '_blank', rel: "noopener noreferrer"
 
   .col-lg-9
-    .panel.panel-default.custom-monitored-metrics.js-panel-custom-monitored-metrics{ data: { active_custom_metrics: project_prometheus_metrics_path(@project, :json), environments_data: environments_list_data } }
+    .panel.panel-default.custom-monitored-metrics.js-panel-custom-monitored-metrics{ data: { active_custom_metrics: project_prometheus_metrics_path(@project), environments_data: environments_list_data } }
       .panel-heading
         %h3.panel-title
           = s_('PrometheusService|Custom metrics')
@@ -18,25 +18,25 @@
           .flash-warning
             .flash-text
         .loading-metrics.js-loading-custom-metrics
-          %p
+          %p.prepend-top-10.prepend-left-10
             = 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'
+          = link_to s_('PrometheusService|New metric'), new_project_prometheus_metric_path(@project), class: 'btn btn-success prepend-top-10 prepend-left-10'
         %ul.list-unstyled.metrics-list.hidden.js-custom-metrics-list
 
-    .panel.panel-default.js-panel-monitored-metrics{ data: { active_metrics: active_common_project_prometheus_metrics_path(@project, :json) } }
+    .panel.panel-default.js-panel-monitored-metrics{ data: { active_metrics: active_common_project_prometheus_metrics_path(@project, :json), metrics_help_path: help_page_path('user/project/integrations/prometheus_library/metrics') } }
       .panel-heading
         %h3.panel-title
           = s_('PrometheusService|Common metrics')
           %span.badge.js-monitored-count 0
       .panel-body
         .loading-metrics.js-loading-metrics
-          %p
+          %p.prepend-top-10.prepend-left-10
             = icon('spinner spin', class: 'metrics-load-spinner')
             = s_('PrometheusService|Finding and configuring metrics...')
         .empty-metrics.hidden.js-empty-metrics
-          %p.text-tertiary
+          %p.text-tertiary.prepend-top-10.prepend-left-10
             = s_('PrometheusService|Waiting for your first deployment to an environment to find common metrics')
         %ul.list-unstyled.metrics-list.hidden.js-metrics-list
 

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

@@ -5,16 +5,6 @@ import axios from '~/lib/utils/axios_utils';
 import { s__ } from '~/locale';
 import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 
-function customMetricTemplate(metric) {
-  return `
-      <li class="custom-metric">
-        <a href="${metric.edit_path}">
-          ${_.escape(metric.group)} / ${_.escape(metric.title)} (${_.escape(metric.unit)})
-        </a>
-      </li>
-    `;
-}
-
 export default class EEPrometheusMetrics extends PrometheusMetrics {
   constructor(wrapperSelector) {
     super(wrapperSelector);
@@ -32,7 +22,6 @@ export default class EEPrometheusMetrics extends PrometheusMetrics {
 
     this.activeCustomMetricsEndpoint = this.$monitoredCustomMetricsPanel.data('active-custom-metrics');
     this.environmentsDataEndpoint = this.$monitoredCustomMetricsPanel.data('environments-data-endpoint');
-    this.customMetricsEndpoint = this.activeCustomMetricsEndpoint.replace('.json', '/');
   }
 
   showMonitoringCustomMetricsPanelState(stateName) {
@@ -66,7 +55,7 @@ export default class EEPrometheusMetrics extends PrometheusMetrics {
       .value();
 
     sortedMetrics.forEach((metric) => {
-      this.$monitoredCustomMetricsList.append(customMetricTemplate(metric));
+      this.$monitoredCustomMetricsList.append(EEPrometheusMetrics.customMetricTemplate(metric));
     });
 
     this.$monitoredCustomMetricsCount.text(this.customMetrics.length);
@@ -84,20 +73,16 @@ export default class EEPrometheusMetrics extends PrometheusMetrics {
   loadActiveCustomMetrics() {
     super.loadActiveMetrics();
     Promise.all([
-      axios.get(this.activeCustomMetricsEndpoint)
-        .then(resp => resp.data)
-        .catch(err => err),
-      axios.get(this.environmentsDataEndpoint)
-        .then(resp => resp.data)
-        .catch(err => err),
+      axios.get(this.activeCustomMetricsEndpoint),
+      axios.get(this.environmentsDataEndpoint),
     ])
       .then(([customMetrics, environmentsData]) => {
-        this.environmentsData = environmentsData.environments;
-        if (!customMetrics || !customMetrics.metrics) {
+        this.environmentsData = environmentsData.data.environments;
+        if (!customMetrics.data || !customMetrics.data.metrics) {
           this.showMonitoringCustomMetricsPanelState(PANEL_STATE.EMPTY);
         } else {
-          this.customMetrics = customMetrics.metrics;
-          this.populateCustomMetrics(customMetrics.metrics);
+          this.customMetrics = customMetrics.data.metrics;
+          this.populateCustomMetrics(customMetrics.data.metrics);
         }
       })
       .catch((customMetricError) => {
@@ -105,4 +90,14 @@ export default class EEPrometheusMetrics extends PrometheusMetrics {
         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>
+  `;
+  }
 }

ee/app/views/projects/prometheus/metrics/_form.html.haml

@@ -53,7 +53,7 @@
         = s_('Metrics|Used if the query returns a single series. If it returns multiple series, their legend labels will be picked up from the response.')
 
     .form-actions
-      = f.submit save_button_text, class: 'btn btn-save'
-      = link_to _('Cancel'), edit_project_service_path(project, PrometheusService), class: 'btn btn-cancel pull-right'
+      = f.submit save_button_text, class: 'btn btn-success'
+      = link_to _('Cancel'), edit_project_service_path(project, PrometheusService), class: 'btn btn-default pull-right'
       - if metric.persisted?
-        = link_to _('Delete'), project_prometheus_metric_path(project, metric), data: { confirm: s_("This will delete the custom metric, Are you sure?") }, method: :delete, class: "btn btn-remove pull-right append-right-default"
+        = link_to _('Delete'), project_prometheus_metric_path(project, metric), data: { confirm: s_("This will delete the custom metric, Are you sure?") }, method: :delete, class: "btn btn-danger pull-right append-right-default"

ee/app/views/projects/prometheus/metrics/edit.html.haml

-- add_to_breadcrumbs "Settings", edit_project_path(@project)
-- add_to_breadcrumbs "Integrations", project_settings_integrations_path(@project)
+- add_to_breadcrumbs _("Settings"), edit_project_path(@project)
+- add_to_breadcrumbs _("Integrations"), project_settings_integrations_path(@project)
 - add_to_breadcrumbs "Prometheus", edit_project_service_path(@project, PrometheusService)
 - breadcrumb_title = s_('Metrics|Edit metric')
-- page_title @metric.title, "Edit metric"
+- page_title @metric.title, s_('Metrics|Edit metric')
 = render 'form', project: @project, metric: @metric

ee/app/views/projects/prometheus/metrics/new.html.haml

-- add_to_breadcrumbs "Settings", edit_project_path(@project)
-- add_to_breadcrumbs "Integrations", project_settings_integrations_path(@project)
+- add_to_breadcrumbs _("Settings"), edit_project_path(@project)
+- add_to_breadcrumbs _("Integrations"), project_settings_integrations_path(@project)
 - add_to_breadcrumbs "Prometheus", edit_project_service_path(@project, PrometheusService)
-- breadcrumb_title = s_('Metrics|Edit metric')
-- page_title "New metric"
-
-%div{ class: container_class }
-  = render 'form', project: @project, metric: @metric
+- breadcrumb_title = s_('Metrics|New metric')
+- page_title s_('Metrics|New metric')
+= render 'form', project: @project, metric: @metric

spec/javascripts/prometheus_metrics/ee/prometheus_metrics_spec.js

@@ -4,9 +4,9 @@ import PrometheusMetrics from 'ee/prometheus_metrics/prometheus_metrics';
 import PANEL_STATE from '~/prometheus_metrics/constants';
 import metrics from './mock_data';
 
-describe('PrometheusMetrics EE', () => {
+fdescribe('PrometheusMetrics EE', () => {
   const FIXTURE = 'services/prometheus/prometheus_service.html.raw';
-  const customMetricsEndpoint = 'http://test.host/frontend-fixtures/services-project/prometheus/metrics.json';
+  const customMetricsEndpoint = 'http://test.host/frontend-fixtures/services-project/prometheus/metrics';
   let mock;
   preloadFixtures(FIXTURE);
 
@@ -41,14 +41,13 @@ describe('PrometheusMetrics EE', () => {
     });
 
     it('should contain api endpoints', () => {
-      expect(prometheusMetrics.activeCustomMetricsEndpoint).not.toBeNull();
       expect(prometheusMetrics.activeCustomMetricsEndpoint).toEqual(customMetricsEndpoint);
     });
 
     it('should show loading state when called with `loading`', () => {
       prometheusMetrics.showMonitoringCustomMetricsPanelState(PANEL_STATE.LOADING);
 
-      expect(prometheusMetrics.$monitoredCustomMetricsLoading.hasClass('hidden')).toBeFalsy();
+      expect(prometheusMetrics.$monitoredCustomMetricsLoading.hasClass('hidden')).toEqual(false);
       expect(prometheusMetrics.$monitoredCustomMetricsEmpty.hasClass('hidden')).toBeTruthy();
       expect(prometheusMetrics.$monitoredCustomMetricsList.hasClass('hidden')).toBeTruthy();
     });
@@ -58,14 +57,14 @@ describe('PrometheusMetrics EE', () => {
 
       expect(prometheusMetrics.$monitoredCustomMetricsLoading.hasClass('hidden')).toBeTruthy();
       expect(prometheusMetrics.$monitoredCustomMetricsEmpty.hasClass('hidden')).toBeTruthy();
-      expect(prometheusMetrics.$monitoredCustomMetricsList.hasClass('hidden')).toBeFalsy();
+      expect(prometheusMetrics.$monitoredCustomMetricsList.hasClass('hidden')).toEqual(false);
     });
 
     it('should show empty state when called with `empty`', () => {
       prometheusMetrics.showMonitoringCustomMetricsPanelState(PANEL_STATE.EMPTY);
 
       expect(prometheusMetrics.$monitoredCustomMetricsLoading.hasClass('hidden')).toBeTruthy();
-      expect(prometheusMetrics.$monitoredCustomMetricsEmpty.hasClass('hidden')).toBeFalsy();
+      expect(prometheusMetrics.$monitoredCustomMetricsEmpty.hasClass('hidden')).toEqual(false);
       expect(prometheusMetrics.$monitoredCustomMetricsList.hasClass('hidden')).toBeTruthy();
     });
 
@@ -76,7 +75,7 @@ describe('PrometheusMetrics EE', () => {
       const $metricsListLi = prometheusMetrics.$monitoredCustomMetricsList.find('li');
 
       expect(prometheusMetrics.$monitoredCustomMetricsLoading.hasClass('hidden')).toBeTruthy();
-      expect(prometheusMetrics.$monitoredCustomMetricsList.hasClass('hidden')).toBeFalsy();
+      expect(prometheusMetrics.$monitoredCustomMetricsList.hasClass('hidden')).toEqual(false);
 
       expect($metricsListLi.length).toEqual(metrics.length);
     });