Fix alert creation dropdown menu

2 files changed, 51 insertions, 3 deletions

diff --git a/app/assets/javascripts/monitoring/stores/utils.js b/app/assets/javascripts/monitoring/stores/utils.js
index 84e1f1c4c20..721942f9d3b 100644
--- a/app/assets/javascripts/monitoring/stores/utils.js
+++ b/app/assets/javascripts/monitoring/stores/utils.js
@@ -36,15 +36,26 @@ function removeTimeSeriesNoData(queries) {
 //                                                       { metricId: 2, ...query2Attrs }] },
 //            { title: 'new title', y_label: 'MB', queries: [{ metricId: 3, ...query3Attrs }]}
 //          ]
-function groupQueriesByChartInfo(metrics) {
+export function groupQueriesByChartInfo(metrics) {
   const metricsByChart = metrics.reduce((accumulator, metric) => {
     const { queries, ...chart } = metric;
-    const metricId = chart.id ? chart.id.toString() : null;
 
     const chartKey = `${chart.title}|${chart.y_label}`;
     accumulator[chartKey] = accumulator[chartKey] || { ...chart, queries: [] };
 
-    queries.forEach(queryAttrs => accumulator[chartKey].queries.push({ metricId, ...queryAttrs }));
+    queries.forEach(queryAttrs => {
+      let metricId;
+
+      if (chart.id) {
+        metricId = chart.id.toString();
+      } else if (queryAttrs.metric_id) {
+        metricId = queryAttrs.metric_id.toString();
+      } else {
+        metricId = null;
+      }
+
+      accumulator[chartKey].queries.push({ metricId, ...queryAttrs });
+    });
 
     return accumulator;
   }, {});
diff --git a/spec/javascripts/monitoring/store/utils_spec.js b/spec/javascripts/monitoring/store/utils_spec.js
new file mode 100644
index 00000000000..73dd370ffb3
--- /dev/null
+++ b/spec/javascripts/monitoring/store/utils_spec.js
@@ -0,0 +1,37 @@
+import { groupQueriesByChartInfo } from '~/monitoring/stores/utils';
+
+describe('groupQueriesByChartInfo', () => {
+  let input;
+  let output;
+
+  it('groups metrics with the same chart title and y_axis label', () => {
+    input = [
+      { title: 'title', y_label: 'MB', queries: [{}] },
+      { title: 'title', y_label: 'MB', queries: [{}] },
+      { title: 'new title', y_label: 'MB', queries: [{}] },
+    ];
+
+    output = [
+      { title: 'title', y_label: 'MB', queries: [{ metricId: null }, { metricId: null }] },
+      { title: 'new title', y_label: 'MB', queries: [{ metricId: null }] },
+    ];
+
+    expect(groupQueriesByChartInfo(input)).toEqual(output);
+  });
+
+  // Functionality associated with the /additional_metrics endpoint
+  it("associates a chart's stringified metric_id with the metric", () => {
+    input = [{ id: 3, title: 'new title', y_label: 'MB', queries: [{}] }];
+    output = [{ id: 3, title: 'new title', y_label: 'MB', queries: [{ metricId: '3' }] }];
+
+    expect(groupQueriesByChartInfo(input)).toEqual(output);
+  });
+
+  // Functionality associated with the /metrics_dashboard endpoint
+  it('aliases a stringified metrics_id on the metric to the metricId key', () => {
+    input = [{ title: 'new title', y_label: 'MB', queries: [{ metric_id: 3 }] }];
+    output = [{ title: 'new title', y_label: 'MB', queries: [{ metricId: '3', metric_id: 3 }] }];
+
+    expect(groupQueriesByChartInfo(input)).toEqual(output);
+  });
+});