Add feature flag and dashboard endpointprom-api-2

First part of FE for Prometheus API
Dashboard endpoint fetches all info except for chart results
Renders empty groups after loading

1 files changed, 22 insertions, 4 deletions

diff --git a/app/assets/javascripts/monitoring/stores/mutations.js b/app/assets/javascripts/monitoring/stores/mutations.js
index c1779333d75..c2b40472b0a 100644
--- a/app/assets/javascripts/monitoring/stores/mutations.js
+++ b/app/assets/javascripts/monitoring/stores/mutations.js
@@ -7,10 +7,24 @@ export default {
     state.showEmptyState = true;
   },
   [types.RECEIVE_METRICS_DATA_SUCCESS](state, groupData) {
-    state.groups = groupData.map(group => ({
-      ...group,
-      metrics: normalizeMetrics(sortMetrics(group.metrics)),
-    }));
+    state.groups = groupData.map(group => {
+      let { metrics } = group;
+
+      // for backwards compatibility, and to limit Vue template changes:
+      // for each group alias panels to metrics
+      // for each panel alias metrics to queries
+      if (state.useDashboardEndpoint) {
+        metrics = group.panels.map(panel => ({
+          ...panel,
+          queries: panel.metrics,
+        }));
+      }
+
+      return {
+        ...group,
+        metrics: normalizeMetrics(sortMetrics(metrics)),
+      };
+    });
 
     if (!state.groups.length) {
       state.emptyState = 'noData';
@@ -38,6 +52,10 @@ export default {
     state.metricsEndpoint = endpoints.metricsEndpoint;
     state.environmentsEndpoint = endpoints.environmentsEndpoint;
     state.deploymentsEndpoint = endpoints.deploymentsEndpoint;
+    state.dashboardEndpoint = endpoints.dashboardEndpoint;
+  },
+  [types.SET_DASHBOARD_ENABLED](state, enabled) {
+    state.useDashboardEndpoint = enabled;
   },
   [types.SET_GETTING_STARTED_EMPTY_STATE](state) {
     state.emptyState = 'gettingStarted';