Remove duplicate data in metric_id

`metricId` has replaced `metric_id` in most monitoring components.

This is the last step to remove `metric_id` from the frontend
view models.

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

@@ -67,7 +67,7 @@ export default {
       'setShowErrorBanner',
     ]),
     chartHasData(chart) {
-      return chart.metrics.some(metric => this.metricsWithData().includes(metric.metric_id));
+      return chart.metrics.some(metric => this.metricsWithData().includes(metric.metricId));
     },
     onSidebarMutation() {
       setTimeout(() => {

app/assets/javascripts/monitoring/stores/utils.js

@@ -13,11 +13,12 @@ export const gqClient = createGqClient(
 /**
  * Metrics loaded from project-defined dashboards do not have a metric_id.
  * This method creates a unique ID combining metric_id and id, if either is present.
- * This is hopefully a temporary solution until BE processes metrics before passing to fE
+ * This is hopefully a temporary solution until BE processes metrics before passing to FE
  * @param {Object} metric - metric
  * @returns {Object} - normalized metric with a uniqueID
  */
-export const uniqMetricsId = metric => `${metric.metric_id}_${metric.id}`;
+// eslint-disable-next-line babel/camelcase
+export const uniqMetricsId = ({ metric_id, id }) => `${metric_id}_${id}`;
 
 /**
  * Project path has a leading slash that doesn't work well
@@ -68,10 +69,6 @@ const mapToMetricsViewModel = (metrics, defaultLabel) =>
     queryRange: query_range,
     prometheusEndpointPath: prometheus_endpoint_path,
     metricId: uniqMetricsId({ metric_id, id }),
-
-    // `metric_id` is used by embed.vue, keeping this duplicated.
-    // https://gitlab.com/gitlab-org/gitlab/issues/37492
-    metric_id: uniqMetricsId({ metric_id, id }),
     ...metric,
   }));
 

spec/frontend/monitoring/embed/mock_data.js

-export const metricsWithData = [15, 16];
+export const metricsWithData = ['15_metric_a', '16_metric_b'];
 
 export const groups = [
   {
@@ -7,39 +7,10 @@ export const groups = [
         title: 'Memory Usage (Total)',
         type: 'area-chart',
         y_label: 'Total Memory Used',
-        weight: 4,
-        metrics: [
-          {
-            id: 'system_metrics_kubernetes_container_memory_total',
-            metric_id: 15,
-          },
-        ],
-      },
-      {
-        title: 'Core Usage (Total)',
-        type: 'area-chart',
-        y_label: 'Total Cores',
-        weight: 3,
-        metrics: [
-          {
-            id: 'system_metrics_kubernetes_container_cores_total',
-            metric_id: 16,
+        metrics: null,
       },
     ],
   },
-    ],
-  },
-];
-
-export const metrics = [
-  {
-    id: 'system_metrics_kubernetes_container_memory_total',
-    metric_id: 15,
-  },
-  {
-    id: 'system_metrics_kubernetes_container_cores_total',
-    metric_id: 16,
-  },
 ];
 
 const result = [
@@ -60,7 +31,7 @@ export const metricsData = [
   {
     metrics: [
       {
-        metric_id: 15,
+        metricId: '15_metric_a',
         result,
       },
     ],
@@ -68,7 +39,7 @@ export const metricsData = [
   {
     metrics: [
       {
-        metric_id: 16,
+        metricId: '16_metric_b',
         result,
       },
     ],

spec/frontend/monitoring/store/utils_spec.js

@@ -213,20 +213,16 @@ describe('mapToDashboardViewModel', () => {
       expect(getMappedMetric(dashboard)).toEqual({
         label: expect.any(String),
         metricId: expect.any(String),
-        metric_id: expect.any(String),
       });
     });
 
-    it('creates a metric with a correct ids', () => {
+    it('creates a metric with a correct id', () => {
       const dashboard = dashboardWithMetric({
         id: 'http_responses',
         metric_id: 1,
       });
 
-      expect(getMappedMetric(dashboard)).toMatchObject({
-        metricId: '1_http_responses',
-        metric_id: '1_http_responses',
-      });
+      expect(getMappedMetric(dashboard).metricId).toEqual('1_http_responses');
     });
 
     it('creates a metric with a default label', () => {