Remove duplicate button to add new metrics

- Remove "new metrics" duplicated button and replace with a message
- Replace css with utility classes in the prometheus metrics view
- Remove unused css

app/assets/stylesheets/pages/settings.scss

@@ -272,7 +272,7 @@
   }
 
   .custom-monitored-metrics {
-    .card-title {
+    .card-header {
       display: flex;
       align-items: center;
 
@@ -292,17 +292,6 @@
     }
   }
 
-  .loading-metrics,
-  .empty-metrics {
-    padding: 30px 10px;
-
-    p,
-    .btn {
-      margin-top: 10px;
-      margin-bottom: 0;
-    }
-  }
-
   .loading-metrics .metrics-load-spinner {
     color: $gl-gray-700;
   }

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

@@ -8,15 +8,16 @@
 .col-lg-9
   .card.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/index') } }
     .card-header
-      = s_('PrometheusService|Common metrics')
+      %strong
+        = s_('PrometheusService|Common metrics')
       %span.badge.badge-pill.js-monitored-count 0
     .card-body
       .loading-metrics.js-loading-metrics
-        %p.prepend-top-10.prepend-left-10
+        %p.m-3
           = icon('spinner spin', class: 'metrics-load-spinner')
           = s_('PrometheusService|Finding and configuring metrics...')
       .empty-metrics.hidden.js-empty-metrics
-        %p.text-tertiary.prepend-top-10.prepend-left-10
+        %p.text-tertiary.m-3
           = 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

@@ -34,16 +34,14 @@ export default class EEPrometheusMetrics extends PrometheusMetrics {
       '.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.$newCustomMetricText = this.$monitoredCustomMetricsPanel.find('.js-new-metric-text');
     this.$flashCustomMetricsContainer = this.$wrapperCustomMetrics.find('.flash-container');
 
     this.$els = [
       this.$monitoredCustomMetricsLoading,
       this.$monitoredCustomMetricsList,
       this.$newCustomMetricButton,
-      this.$newCustomMetricButtonBody,
+      this.$newCustomMetricText,
       this.$monitoredCustomMetricsNoIntegrationText,
       this.$monitoredCustomMetricsEmpty,
     ];
@@ -74,7 +72,6 @@ export default class EEPrometheusMetrics extends PrometheusMetrics {
         break;
       case PANEL_STATE.LIST:
         this.setVisible(this.$newCustomMetricButton, this.$monitoredCustomMetricsList);
-
         break;
       case PANEL_STATE.NO_INTEGRATION:
         this.setVisible(
@@ -86,7 +83,7 @@ export default class EEPrometheusMetrics extends PrometheusMetrics {
         this.setVisible(
           this.$monitoredCustomMetricsEmpty,
           this.$newCustomMetricButton,
-          this.$newCustomMetricButtonBody,
+          this.$newCustomMetricText,
         );
         break;
     }

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

@@ -8,22 +8,23 @@
 .col-lg-9
   .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
+      %strong
         = s_('PrometheusService|Custom metrics')
-        %span.badge.badge-pill.js-custom-monitored-count 0
-        = link_to s_('PrometheusService|New metric'), new_project_prometheus_metric_path(project), class: 'btn btn-success js-new-metric-button hidden'
+      %span.badge.badge-pill.js-custom-monitored-count 0
+      = link_to s_('PrometheusService|New metric'), new_project_prometheus_metric_path(project), class: 'btn btn-success js-new-metric-button hidden'
     .card-body
       .flash-container.hidden
         .flash-warning
           .flash-text
       .loading-metrics.js-loading-custom-metrics
-        %p.prepend-top-10.prepend-left-10
+        %p.m-3
           = icon('spinner spin', class: 'metrics-load-spinner')
           = s_('PrometheusService|Finding custom metrics...')
       .empty-metrics.hidden.js-empty-custom-metrics
-        %p.text-tertiary.prepend-top-10.prepend-left-10.js-no-active-integration-text.hidden
+        %p.text-tertiary.m-3.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'
+        %p.text-tertiary.m-3.js-new-metric-text.hidden
+          = s_('PrometheusService|No custom metrics have been created. Create one using the button above')
       %ul.list-unstyled.metrics-list.hidden.js-custom-metrics-list
 
 = render_ce 'projects/services/prometheus/metrics', project: project

ee/changelogs/unreleased/9510-new-metric-button-should-not-be-duplicated-on-custom-metrics-page.yml

+---
+title: Remove duplicated 'New metric' button in prometheus configuration
+merge_request: 14964
+author:
+type: changed

ee/spec/javascripts/prometheus_metrics/prometheus_metrics_spec.js

@@ -56,7 +56,7 @@ describe('PrometheusMetrics EE', () => {
       ).toBeTruthy();
 
       expect(prometheusMetrics.$newCustomMetricButton.hasClass('hidden')).toBeTruthy();
-      expect(prometheusMetrics.$newCustomMetricButtonBody.hasClass('hidden')).toBeTruthy();
+      expect(prometheusMetrics.$newCustomMetricText.hasClass('hidden')).toBeTruthy();
     });
 
     it('should show metrics list when called with `list`', () => {
@@ -70,7 +70,7 @@ describe('PrometheusMetrics EE', () => {
       ).toBeTruthy();
 
       expect(prometheusMetrics.$newCustomMetricButton.hasClass('hidden')).toEqual(false);
-      expect(prometheusMetrics.$newCustomMetricButtonBody.hasClass('hidden')).toBeTruthy();
+      expect(prometheusMetrics.$newCustomMetricText.hasClass('hidden')).toBeTruthy();
     });
 
     it('should show empty state when called with `empty`', () => {
@@ -84,7 +84,7 @@ describe('PrometheusMetrics EE', () => {
       ).toBeTruthy();
 
       expect(prometheusMetrics.$newCustomMetricButton.hasClass('hidden')).toEqual(false);
-      expect(prometheusMetrics.$newCustomMetricButtonBody.hasClass('hidden')).toEqual(false);
+      expect(prometheusMetrics.$newCustomMetricText.hasClass('hidden')).toEqual(false);
     });
 
     it('should show monitored metrics list', () => {
@@ -100,7 +100,7 @@ describe('PrometheusMetrics EE', () => {
       ).toBeTruthy();
 
       expect(prometheusMetrics.$newCustomMetricButton.hasClass('hidden')).toEqual(false);
-      expect(prometheusMetrics.$newCustomMetricButtonBody.hasClass('hidden')).toBeTruthy();
+      expect(prometheusMetrics.$newCustomMetricText.hasClass('hidden')).toBeTruthy();
 
       expect($metricsListLi.length).toEqual(metrics.length);
     });
@@ -116,7 +116,7 @@ describe('PrometheusMetrics EE', () => {
       expect(prometheusMetrics.$monitoredCustomMetricsLoading.hasClass('hidden')).toBeTruthy();
       expect(prometheusMetrics.$monitoredCustomMetricsList.hasClass('hidden')).toBeTruthy();
       expect(prometheusMetrics.$newCustomMetricButton.hasClass('hidden')).toBeTruthy();
-      expect(prometheusMetrics.$newCustomMetricButtonBody.hasClass('hidden')).toBeTruthy();
+      expect(prometheusMetrics.$newCustomMetricText.hasClass('hidden')).toBeTruthy();
     });
   });
 });

locale/gitlab.pot

@@ -11614,6 +11614,9 @@ msgstr ""
 msgid "PrometheusService|New metric"
 msgstr ""
 
+msgid "PrometheusService|No custom metrics have been created. Create one using the button above"
+msgstr ""
+
 msgid "PrometheusService|Prometheus API Base URL, like http://prometheus.example.com/"
 msgstr ""