Multiple metrics edit navigates to prom edit page

Chart option to edit custom metrics currently
navigates to first metric edit page. This MR
navigates to prometheus edit page

app/assets/javascripts/monitoring/components/dashboard.vue

@@ -552,6 +552,7 @@ export default {
       <dashboard-panel
         v-show="expandedPanel.panel"
         ref="expandedPanel"
+        :settings-path="settingsPath"
         :clipboard-text="generatePanelLink(expandedPanel.group, expandedPanel.panel)"
         :graph-data="expandedPanel.panel"
         :alerts-endpoint="alertsEndpoint"
@@ -610,6 +611,7 @@ export default {
                 </div>
 
                 <dashboard-panel
+                  :settings-path="settingsPath"
                   :clipboard-text="generatePanelLink(groupData.group, graphData)"
                   :graph-data="graphData"
                   :alerts-endpoint="alertsEndpoint"

app/assets/javascripts/monitoring/components/dashboard_panel.vue

@@ -82,6 +82,11 @@ export default {
       required: false,
       default: false,
     },
+    settingsPath: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   data() {
     return {
@@ -196,6 +201,9 @@ export default {
       return Boolean(this.graphDataHasResult && !this.basicChartComponent);
     },
     editCustomMetricLink() {
+      if (this.graphData.metrics.length > 1) {
+        return this.settingsPath;
+      }
       return this.graphData?.metrics[0].edit_path;
     },
     editCustomMetricLinkText() {

changelogs/unreleased/set-multiple-custom-metrics-edit-path.yml

+---
+title: Multiple metrics edit navigates to prom edit page
+merge_request: 30666
+author:
+type: added

spec/frontend/monitoring/components/dashboard_panel_spec.js

@@ -18,6 +18,7 @@ import {
   singleStatMetricsResult,
   graphDataPrometheusQueryRangeMultiTrack,
   barMockData,
+  propsData,
 } from '../mock_data';
 
 import { panelTypes } from '~/monitoring/constants';
@@ -60,6 +61,7 @@ describe('Dashboard Panel', () => {
     wrapper = shallowMount(DashboardPanel, {
       propsData: {
         graphData,
+        settingsPath: propsData.settingsPath,
         ...props,
       },
       store,
@@ -239,6 +241,7 @@ describe('Dashboard Panel', () => {
 
   describe('Edit custom metric dropdown item', () => {
     const findEditCustomMetricLink = () => wrapper.find({ ref: 'editMetricLink' });
+    const mockEditPath = '/root/kubernetes-gke-project/prometheus/metrics/23/edit';
 
     beforeEach(() => {
       createWrapper();
@@ -257,7 +260,7 @@ describe('Dashboard Panel', () => {
           metrics: [
             {
               ...graphData.metrics[0],
-              edit_path: '/root/kubernetes-gke-project/prometheus/metrics/23/edit',
+              edit_path: mockEditPath,
             },
           ],
         },
@@ -266,10 +269,11 @@ describe('Dashboard Panel', () => {
       return wrapper.vm.$nextTick(() => {
         expect(findEditCustomMetricLink().exists()).toBe(true);
         expect(findEditCustomMetricLink().text()).toBe('Edit metric');
+        expect(findEditCustomMetricLink().attributes('href')).toBe(mockEditPath);
       });
     });
 
-    it('shows an "Edit metrics" link for a panel with multiple metrics', () => {
+    it('shows an "Edit metrics" link pointing to settingsPath for a panel with multiple metrics', () => {
       wrapper.setProps({
         graphData: {
           ...graphData,
@@ -288,6 +292,7 @@ describe('Dashboard Panel', () => {
 
       return wrapper.vm.$nextTick(() => {
         expect(findEditCustomMetricLink().text()).toBe('Edit metrics');
+        expect(findEditCustomMetricLink().attributes('href')).toBe(propsData.settingsPath);
       });
     });
   });
@@ -396,6 +401,7 @@ describe('Dashboard Panel', () => {
       wrapper = shallowMount(DashboardPanel, {
         propsData: {
           clipboardText: exampleText,
+          settingsPath: propsData.settingsPath,
           graphData: {
             y_label: 'metric',
             ...graphData,
@@ -445,6 +451,7 @@ describe('Dashboard Panel', () => {
       wrapper = shallowMount(DashboardPanel, {
         propsData: {
           graphData,
+          settingsPath: propsData.settingsPath,
           namespace: mockNamespace,
         },
         store,
@@ -529,12 +536,12 @@ describe('Dashboard Panel', () => {
     });
 
     describe.each`
-      desc                                              | metricsSavedToDb                   | propsData                               | isShown
+      desc                                              | metricsSavedToDb                   | props                                   | isShown
       ${'with permission and no metrics in db'}         | ${[]}                              | ${{}}                                   | ${false}
       ${'with permission and related metrics in db'}    | ${[graphData.metrics[0].metricId]} | ${{}}                                   | ${true}
       ${'without permission and related metrics in db'} | ${[graphData.metrics[0].metricId]} | ${{ prometheusAlertsAvailable: false }} | ${false}
       ${'with permission and unrelated metrics in db'}  | ${['another_metric_id']}           | ${{}}                                   | ${false}
-    `('$desc', ({ metricsSavedToDb, isShown, propsData }) => {
+    `('$desc', ({ metricsSavedToDb, isShown, props }) => {
       const showsDesc = isShown ? 'shows' : 'does not show';
 
       beforeEach(() => {
@@ -542,7 +549,7 @@ describe('Dashboard Panel', () => {
         createWrapper({
           alertsEndpoint: '/endpoint',
           prometheusAlertsAvailable: true,
-          ...propsData,
+          ...props,
         });
         return wrapper.vm.$nextTick();
       });