Add latest changes from gitlab-org/gitlab@master

2 files changed, 24 insertions, 101 deletions

diff --git a/app/assets/javascripts/monitoring/stores/mutations.js b/app/assets/javascripts/monitoring/stores/mutations.js
index 696af5aed75..bfa76aa7cea 100644
--- a/app/assets/javascripts/monitoring/stores/mutations.js
+++ b/app/assets/javascripts/monitoring/stores/mutations.js
@@ -1,9 +1,13 @@
 import Vue from 'vue';
 import { slugify } from '~/lib/utils/text_utility';
 import * as types from './mutation_types';
-import { normalizeMetrics, normalizeMetric, normalizeQueryResult } from './utils';
+import { normalizeMetric, normalizeQueryResult } from './utils';
 
-const normalizePanel = panel => panel.metrics.map(normalizeMetric);
+const normalizePanelMetrics = (metrics, defaultLabel) =>
+  metrics.map(metric => ({
+    ...normalizeMetric(metric),
+    label: metric.label || defaultLabel,
+  }));
 
 export default {
   [types.REQUEST_METRICS_DATA](state) {
@@ -13,28 +17,18 @@ export default {
   [types.RECEIVE_METRICS_DATA_SUCCESS](state, groupData) {
     state.dashboard.panel_groups = groupData.map((group, i) => {
       const key = `${slugify(group.group || 'default')}-${i}`;
-      let { metrics = [], panels = [] } = group;
+      let { panels = [] } = group;
 
       // each panel has metric information that needs to be normalized
-
       panels = panels.map(panel => ({
         ...panel,
-        metrics: normalizePanel(panel),
-      }));
-
-      // for backwards compatibility, and to limit Vue template changes:
-      // for each group alias panels to metrics
-      // for each panel alias metrics to queries
-      metrics = panels.map(panel => ({
-        ...panel,
-        queries: panel.metrics,
+        metrics: normalizePanelMetrics(panel.metrics, panel.y_label),
       }));
 
       return {
         ...group,
         panels,
         key,
-        metrics: normalizeMetrics(metrics),
       };
     });
 
@@ -58,6 +52,7 @@ export default {
   [types.RECEIVE_ENVIRONMENTS_DATA_FAILURE](state) {
     state.environments = [];
   },
+
   [types.SET_QUERY_RESULT](state, { metricId, result }) {
     if (!metricId || !result || result.length === 0) {
       return;
@@ -65,14 +60,17 @@ export default {
 
     state.showEmptyState = false;
 
+    /**
+     * Search the dashboard state for a matching id
+     */
     state.dashboard.panel_groups.forEach(group => {
-      group.metrics.forEach(metric => {
-        metric.queries.forEach(query => {
-          if (query.metric_id === metricId) {
+      group.panels.forEach(panel => {
+        panel.metrics.forEach(metric => {
+          if (metric.metric_id === metricId) {
             state.metricsWithData.push(metricId);
             // ensure dates/numbers are correctly formatted for charts
             const normalizedResults = result.map(normalizeQueryResult);
-            Vue.set(query, 'result', Object.freeze(normalizedResults));
+            Vue.set(metric, 'result', Object.freeze(normalizedResults));
           }
         });
       });
@@ -101,6 +99,6 @@ export default {
   },
   [types.SET_PANEL_GROUP_METRICS](state, payload) {
     const panelGroup = state.dashboard.panel_groups.find(pg => payload.key === pg.key);
-    panelGroup.metrics = payload.metrics;
+    panelGroup.panels = payload.panels;
   },
 };
diff --git a/app/assets/javascripts/monitoring/stores/utils.js b/app/assets/javascripts/monitoring/stores/utils.js
index 8a396b15a31..3300d2032d0 100644
--- a/app/assets/javascripts/monitoring/stores/utils.js
+++ b/app/assets/javascripts/monitoring/stores/utils.js
@@ -1,83 +1,21 @@
 import _ from 'underscore';
 
-function checkQueryEmptyData(query) {
-  return {
-    ...query,
-    result: query.result.filter(timeSeries => {
-      const newTimeSeries = timeSeries;
-      const hasValue = series =>
-        !Number.isNaN(series[1]) && (series[1] !== null || series[1] !== undefined);
-      const hasNonNullValue = timeSeries.values.find(hasValue);
-
-      newTimeSeries.values = hasNonNullValue ? newTimeSeries.values : [];
-
-      return newTimeSeries.values.length > 0;
-    }),
-  };
-}
-
-function removeTimeSeriesNoData(queries) {
-  return queries.reduce((series, query) => series.concat(checkQueryEmptyData(query)), []);
-}
-
-// Metrics and queries are currently stored 1:1, so `queries` is an array of length one.
-// We want to group queries onto a single chart by title & y-axis label.
-// This function will no longer be required when metrics:queries are 1:many,
-// though there is no consequence if the function stays in use.
-// @param metrics [Array<Object>]
-//      Ex) [
-//            { id: 1, title: 'title', y_label: 'MB', queries: [{ ...query1Attrs }] },
-//            { id: 2, title: 'title', y_label: 'MB', queries: [{ ...query2Attrs }] },
-//            { id: 3, title: 'new title', y_label: 'MB', queries: [{ ...query3Attrs }] }
-//          ]
-// @return [Array<Object>]
-//      Ex) [
-//            { title: 'title', y_label: 'MB', queries: [{ metricId: 1, ...query1Attrs },
-//                                                       { metricId: 2, ...query2Attrs }] },
-//            { title: 'new title', y_label: 'MB', queries: [{ metricId: 3, ...query3Attrs }]}
-//          ]
-export function groupQueriesByChartInfo(metrics) {
-  const metricsByChart = metrics.reduce((accumulator, metric) => {
-    const { queries, ...chart } = metric;
-
-    const chartKey = `${chart.title}|${chart.y_label}`;
-    accumulator[chartKey] = accumulator[chartKey] || { ...chart, queries: [] };
-
-    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;
-  }, {});
-
-  return Object.values(metricsByChart);
-}
-
 export const uniqMetricsId = metric => `${metric.metric_id}_${metric.id}`;
 
 /**
- * Not to confuse with normalizeMetrics (plural)
  * 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
  * @param {Object} metric - metric
  * @returns {Object} - normalized metric with a uniqueID
  */
+
 export const normalizeMetric = (metric = {}) =>
   _.omit(
     {
       ...metric,
       metric_id: uniqMetricsId(metric),
+      metricId: uniqMetricsId(metric),
     },
     'id',
   );
@@ -93,6 +31,11 @@ export const normalizeQueryResult = timeSeries => {
         Number(value),
       ]),
     };
+    // Check result for empty data
+    normalizedResult.values = normalizedResult.values.filter(series => {
+      const hasValue = d => !Number.isNaN(d[1]) && (d[1] !== null || d[1] !== undefined);
+      return series.find(hasValue);
+    });
   } else if (timeSeries.value) {
     normalizedResult = {
       ...timeSeries,
@@ -102,21 +45,3 @@ export const normalizeQueryResult = timeSeries => {
 
   return normalizedResult;
 };
-
-export const normalizeMetrics = metrics => {
-  const groupedMetrics = groupQueriesByChartInfo(metrics);
-
-  return groupedMetrics.map(metric => {
-    const queries = metric.queries.map(query => ({
-      ...query,
-      // custom metrics do not require a label, so we should ensure this attribute is defined
-      label: query.label || metric.y_label,
-      result: (query.result || []).map(normalizeQueryResult),
-    }));
-
-    return {
-      ...metric,
-      queries: removeTimeSeriesNoData(queries),
-    };
-  });
-};