Add edit custom metric link to metrics dashboard

This adds a `Edit metric` link inside panel actions
dropdown for custom metrics inside the monitoring
dashboard

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

@@ -11,7 +11,7 @@ import {
   GlTooltip,
   GlTooltipDirective,
 } from '@gitlab/ui';
-import { __ } from '~/locale';
+import { __, n__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import MonitorTimeSeriesChart from './charts/time_series.vue';
 import MonitorAnomalyChart from './charts/anomaly.vue';
@@ -120,6 +120,12 @@ export default {
         !this.isPanelType('stacked-column')
       );
     },
+    editCustomMetricLink() {
+      return this.graphData?.metrics[0].edit_path;
+    },
+    editCustomMetricLinkText() {
+      return n__('Metrics|Edit metric', 'Metrics|Edit metrics', this.graphData.metrics.length);
+    },
   },
   mounted() {
     this.refreshTitleTooltip();
@@ -195,7 +201,13 @@ export default {
             <template slot="button-content">
               <icon name="ellipsis_v" class="text-secondary" />
             </template>
-
+            <gl-dropdown-item
+              v-if="editCustomMetricLink"
+              ref="editMetricLink"
+              :href="editCustomMetricLink"
+            >
+              {{ editCustomMetricLinkText }}
+            </gl-dropdown-item>
             <gl-dropdown-item
               v-if="logsPathWithTimeRange"
               ref="viewLogsLink"

changelogs/unreleased/jivanvl-add-edit-custom-metric-link.yml

+---
+title: Add edit custom metric link to metrics dashboard
+merge_request: 26511
+author:
+type: changed

locale/gitlab.pot

@@ -12507,7 +12507,9 @@ msgid "Metrics|Duplicating..."
 msgstr ""
 
 msgid "Metrics|Edit metric"
-msgstr ""
+msgid_plural "Metrics|Edit metrics"
+msgstr[0] ""
+msgstr[1] ""
 
 msgid "Metrics|Environment"
 msgstr ""

spec/frontend/monitoring/components/panel_type_spec.js

@@ -148,6 +148,82 @@ describe('Panel Type component', () => {
     });
   });
 
+  describe('Edit custom metric dropdown item', () => {
+    const findEditCustomMetricLink = () => wrapper.find({ ref: 'editMetricLink' });
+
+    beforeEach(() => {
+      createWrapper({
+        graphData: {
+          ...graphDataPrometheusQueryRange,
+        },
+      });
+
+      return wrapper.vm.$nextTick();
+    });
+
+    it('is not present if the panel is not a custom metric', () => {
+      expect(findEditCustomMetricLink().exists()).toBe(false);
+    });
+
+    it('is present when the panel contains an edit_path property', () => {
+      wrapper.setProps({
+        graphData: {
+          ...graphDataPrometheusQueryRange,
+          metrics: [
+            {
+              ...graphDataPrometheusQueryRange.metrics[0],
+              edit_path: '/root/kubernetes-gke-project/prometheus/metrics/23/edit',
+            },
+          ],
+        },
+      });
+
+      return wrapper.vm.$nextTick(() => {
+        expect(findEditCustomMetricLink().exists()).toBe(true);
+      });
+    });
+
+    it('shows an "Edit metric" link for a panel with a single metric', () => {
+      wrapper.setProps({
+        graphData: {
+          ...graphDataPrometheusQueryRange,
+          metrics: [
+            {
+              ...graphDataPrometheusQueryRange.metrics[0],
+              edit_path: '/root/kubernetes-gke-project/prometheus/metrics/23/edit',
+            },
+          ],
+        },
+      });
+
+      return wrapper.vm.$nextTick(() => {
+        expect(findEditCustomMetricLink().text()).toBe('Edit metric');
+      });
+    });
+
+    it('shows an "Edit metrics" link for a panel with multiple metrics', () => {
+      wrapper.setProps({
+        graphData: {
+          ...graphDataPrometheusQueryRange,
+          metrics: [
+            {
+              ...graphDataPrometheusQueryRange.metrics[0],
+              edit_path: '/root/kubernetes-gke-project/prometheus/metrics/23/edit',
+            },
+            {
+              ...graphDataPrometheusQueryRange.metrics[0],
+              edit_path: '/root/kubernetes-gke-project/prometheus/metrics/23/edit',
+            },
+          ],
+        },
+      });
+
+      return wrapper.vm.$nextTick(() => {
+        expect(findEditCustomMetricLink().text()).toBe('Edit metrics');
+      });
+    });
+  });
+
   describe('View Logs dropdown item', () => {
     const mockLogsPath = '/path/to/logs';
     const mockTimeRange = { duration: { seconds: 120 } };