Deleted unused code, added ux improvements and translations

app/assets/javascripts/prometheus_metrics/prometheus_metrics.js

+import { s__, n__, sprintf } from '~/locale';
 import axios from '../lib/utils/axios_utils';
 import PANEL_STATE from './constants';
 import { backOff } from '../lib/utils/common_utils';
@@ -59,23 +60,33 @@ export default class PrometheusMetrics {
   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>${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>`);
           totalMissingEnvVarMetrics += 1;
         }
+      }
     });
 
     if (totalMonitoredMetrics === 0) {
-      const docsUrl = 'https://docs.gitlab.com/ee/user/project/integrations/prometheus_library/metrics.html';
+      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',
+      }, false);
       this.$monitoredMetricsEmpty.empty();
-      this.$monitoredMetricsEmpty.append(`<p>No <a href="${docsUrl}">common metrics</a>were found</p>`);
+      this.$monitoredMetricsEmpty.append(emptyCommonMetricsText);
       this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY);
     } else {
-      this.$monitoredMetricsCount.text(totalMonitoredMetrics);
+      const metricsCountText = sprintf(s__('PrometheusService|%{exporters} with %{metrics} were found'), {
+        exporters: `${totalExporters} ${n__('exporter', 'exporters', totalExporters)}`,
+        metrics: `${totalMonitoredMetrics} ${n__('metric', 'metrics', totalMonitoredMetrics)}`,
+      });
+      this.$monitoredMetricsCount.text(metricsCountText);
       this.showMonitoringMetricsPanelState(PANEL_STATE.LIST);
 
       if (totalMissingEnvVarMetrics > 0) {

app/assets/stylesheets/framework/common.scss

@@ -14,6 +14,10 @@
   color: $gl-text-color-secondary;
 }
 
+.text-tertiary {
+  color: $gl-text-color-tertiary;
+}
+
 .text-primary,
 .text-primary:hover {
   color: $brand-primary;

app/assets/stylesheets/pages/settings.scss

@@ -328,7 +328,3 @@
 .deprecated-service {
   cursor: default;
 }
-
-.custom-metrics-light-text {
-  color: $gl-text-color-tertiary;
-}

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

@@ -4,7 +4,7 @@
       = s_('PrometheusService|Metrics')
     %p
       = s_('PrometheusService|Common metrics are automatically monitored based on a library of metrics from popular exporters.')
-      = link_to s_('PrometheusService|More information'), help_page_path('user/project/integrations/prometheus_library/metrics'), target: '_blank'
+      = 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 } }
@@ -36,7 +36,7 @@
             = icon('spinner spin', class: 'metrics-load-spinner')
             = s_('PrometheusService|Finding and configuring metrics...')
         .empty-metrics.hidden.js-empty-metrics
-          %p
+          %p.text-tertiary
             = 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/pages/projects/services/edit/index.js

 import IntegrationSettingsForm from '~/integrations/integration_settings_form';
-import PrometheusMetrics from '../../../../prometheus_metrics/prometheus_metrics';
+import PrometheusMetrics from 'ee/prometheus_metrics/prometheus_metrics';
 
 document.addEventListener('DOMContentLoaded', () => {
-  const prometheusSettingsWrapper = document.querySelector('.js-prometheus-metrics-monitoring');
   const integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form');
   integrationSettingsForm.init();
 
+  const prometheusSettingsWrapper = document.querySelector('.js-prometheus-metrics-monitoring');
   if (prometheusSettingsWrapper) {
     const prometheusMetrics = new PrometheusMetrics('.js-prometheus-metrics-monitoring');
     prometheusMetrics.loadActiveCustomMetrics();

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

@@ -9,7 +9,7 @@ function customMetricTemplate(metric) {
   return `
       <li class="custom-metric">
         <a href="${metric.edit_path}">
-          ${metric.group} / ${metric.title}
+          ${_.escape(metric.group)} / ${_.escape(metric.title)} (${_.escape(metric.unit)})
         </a>
       </li>
     `;
@@ -35,28 +35,6 @@ export default class EEPrometheusMetrics extends PrometheusMetrics {
     this.customMetricsEndpoint = this.activeCustomMetricsEndpoint.replace('.json', '/');
   }
 
-  deleteMetricEndpoint(id) {
-    return `${this.customMetricsEndpoint}${id}`;
-  }
-
-  deleteMetric(currentTarget) {
-    const targetId = currentTarget.dataset.metricId;
-    axios.delete(this.deleteMetricEndpoint(targetId))
-      .then(() => {
-        currentTarget.parentElement.parentElement.remove();
-        const elementToFind = { id: parseInt(targetId, 10) };
-        const indexToDelete = _.findLastIndex(this.customMetrics, elementToFind);
-        this.customMetrics.splice(indexToDelete, 1);
-        this.$monitoredCustomMetricsCount.text(this.customMetrics.length);
-        if (this.customMetrics.length === 0) {
-          this.showMonitoringCustomMetricsPanelState(PANEL_STATE.EMPTY);
-        }
-      })
-      .catch((err) => {
-        this.showFlashMessage(err);
-      });
-  }
-
   showMonitoringCustomMetricsPanelState(stateName) {
     switch (stateName) {
       case PANEL_STATE.LOADING:
@@ -96,9 +74,6 @@ export default class EEPrometheusMetrics extends PrometheusMetrics {
     if (!this.environmentsData) {
       this.showFlashMessage(s__('PrometheusService|These metrics will only be monitored after your first deployment to an environment'));
     }
-    this.$monitoredCustomMetricsList.find('.delete-custom-metric').on('click', (event) => {
-      this.deleteMetric(event.currentTarget);
-    });
   }
 
   showFlashMessage(message) {

ee/app/models/prometheus_metric.rb

@@ -9,9 +9,9 @@ class PrometheusMetric < ActiveRecord::Base
   validates :unit, presence: true
 
   GROUP_TITLES = {
-    business: _('Business metrics'),
-    response: _('Response metrics'),
-    system: _('System metrics')
+    business: _('Business'),
+    response: _('Response'),
+    system: _('System')
   }.freeze
 
   def group_title

ee/app/serializers/prometheus_metric_entity.rb

@@ -6,6 +6,7 @@ class PrometheusMetricEntity < Grape::Entity
 
   expose :group
   expose :group_title
+  expose :unit
 
   expose :edit_path do |prometheus_metric|
     edit_project_prometheus_metric_path(prometheus_metric.project, prometheus_metric)

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

@@ -5,9 +5,9 @@
 .row.prepend-top-default.append-bottom-default
   %h3.page-title.text-center
     - if metric.persisted?
-      Edit metric
+      = s_('Metrics|Edit metric')
     - else
-      New metric
+      = s_('Metrics|New metric')
   = form_for [project.namespace.becomes(Namespace), project, metric], html: { class: 'col-lg-8 col-lg-offset-2' } do |f|
     = form_errors(metric)
     .form-group
@@ -28,14 +28,14 @@
         = f.radio_button :group, :system
         = f.label :group_system, s_("Metrics|System"), class: 'label-light'
 
-      %p.custom-metrics-light-text
+      %p.text-tertiary
         = s_('Metrics|For grouping similar metrics')
     .form-group
       = f.label :query, s_('Metrics|Query'), class: 'label-light'
       = f.text_field :query, required: true, class: 'form-control', placeholder: s_('Metrics|e.g. rate(http_requests_total[5m])')
       %span.help-block
         = s_('Metrics|Must be a valid PromQL query.')
-        = link_to "https://prometheus.io/docs/prometheus/latest/querying/basics/", target: "_blank" do
+        = link_to "https://prometheus.io/docs/prometheus/latest/querying/basics/", target: "_blank", rel: "noopener noreferrer" do
           = sprite_icon("external-link", size: 12)
           = s_('Metrics|Prometheus Query Documentation')
     .form-group

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 "Prometheus", edit_project_service_path(@project, PrometheusService)
-- breadcrumb_title "Edit metric"
+- breadcrumb_title = s_('Metrics|Edit metric')
 - page_title @metric.title, "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 "Prometheus", edit_project_service_path(@project, PrometheusService)
-- breadcrumb_title "New metric"
+- breadcrumb_title = s_('Metrics|Edit metric')
 - page_title "New metric"
 
 %div{ class: container_class }

ee/spec/models/prometheus_metric_spec.rb

@@ -17,9 +17,9 @@ describe PrometheusMetric do
       end
     end
 
-    it_behaves_like 'group_title', :business, 'Business metrics'
-    it_behaves_like 'group_title', :response, 'Response metrics'
-    it_behaves_like 'group_title', :system, 'System metrics'
+    it_behaves_like 'group_title', :business, 'Business'
+    it_behaves_like 'group_title', :response, 'Response'
+    it_behaves_like 'group_title', :system, 'System'
   end
 
   describe '#to_query_metric' do

spec/javascripts/prometheus_metrics/prometheus_metrics_spec.js

@@ -85,7 +85,7 @@ describe('PrometheusMetrics', () => {
       expect(prometheusMetrics.$monitoredMetricsLoading.hasClass('hidden')).toBeTruthy();
       expect(prometheusMetrics.$monitoredMetricsList.hasClass('hidden')).toBeFalsy();
 
-      expect(prometheusMetrics.$monitoredMetricsCount.text()).toEqual('12');
+      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}`);
     });