Add feature flag and dashboard endpoint

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

4 files changed, 89 insertions, 6 deletions

diff --git a/spec/javascripts/monitoring/dashboard_spec.js b/spec/javascripts/monitoring/dashboard_spec.js
index cf72cce1781..ab8360193be 100644
--- a/spec/javascripts/monitoring/dashboard_spec.js
+++ b/spec/javascripts/monitoring/dashboard_spec.js
@@ -10,6 +10,7 @@ import {
   mockApiEndpoint,
   environmentData,
   singleGroupResponse,
+  dashboardGitResponse,
 } from './mock_data';
 
 const propsData = {
@@ -309,10 +310,6 @@ describe('Dashboard', () => {
       const getTimeDiffSpy = spyOnDependency(Dashboard, 'getTimeDiff');
 
       component.$store.commit(
-        `monitoringDashboard/${types.SET_ENVIRONMENTS_ENDPOINT}`,
-        '/environments',
-      );
-      component.$store.commit(
         `monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`,
         environmentData,
       );
@@ -430,4 +427,49 @@ describe('Dashboard', () => {
       });
     });
   });
+
+  describe('Dashboard dropdown', () => {
+    beforeEach(() => {
+      mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse);
+
+      component = new DashboardComponent({
+        el: document.querySelector('.prometheus-graphs'),
+        propsData: {
+          ...propsData,
+          hasMetrics: true,
+          showPanels: false,
+        },
+        store,
+      });
+
+      component.$store.dispatch('monitoringDashboard/setFeatureFlags', {
+        prometheusEndpoint: false,
+        multipleDashboardsEnabled: true,
+      });
+
+      component.$store.commit(
+        `monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`,
+        environmentData,
+      );
+
+      component.$store.commit(
+        `monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`,
+        singleGroupResponse,
+      );
+
+      component.$store.commit(
+        `monitoringDashboard/${types.SET_ALL_DASHBOARDS}`,
+        dashboardGitResponse,
+      );
+    });
+
+    it('shows the dashboard dropdown', done => {
+      setTimeout(() => {
+        const dashboardDropdown = component.$el.querySelector('.js-dashboards-dropdown');
+
+        expect(dashboardDropdown).not.toEqual(null);
+        done();
+      });
+    });
+  });
 });
diff --git a/spec/javascripts/monitoring/mock_data.js b/spec/javascripts/monitoring/mock_data.js
index 82e42fe9ade..7bbb215475a 100644
--- a/spec/javascripts/monitoring/mock_data.js
+++ b/spec/javascripts/monitoring/mock_data.js
@@ -922,3 +922,16 @@ export const metricsDashboardResponse = {
   },
   status: 'success',
 };
+
+export const dashboardGitResponse = [
+  {
+    path: 'config/prometheus/common_metrics.yml',
+    display_name: 'Common Metrics',
+    default: true,
+  },
+  {
+    path: '.gitlab/dashboards/super.yml',
+    display_name: 'Custom Dashboard 1',
+    default: false,
+  },
+];
diff --git a/spec/javascripts/monitoring/store/actions_spec.js b/spec/javascripts/monitoring/store/actions_spec.js
index 083a01c4d74..677455275de 100644
--- a/spec/javascripts/monitoring/store/actions_spec.js
+++ b/spec/javascripts/monitoring/store/actions_spec.js
@@ -22,6 +22,7 @@ import {
   environmentData,
   metricsDashboardResponse,
   metricsGroupsAPIResponse,
+  dashboardGitResponse,
 } from '../mock_data';
 
 describe('Monitoring store actions', () => {
@@ -212,17 +213,19 @@ describe('Monitoring store actions', () => {
   describe('receiveMetricsDashboardSuccess', () => {
     let commit;
     let dispatch;
+    let state;
 
     beforeEach(() => {
       commit = jasmine.createSpy();
       dispatch = jasmine.createSpy();
+      state = storeState();
     });
 
     it('stores groups ', () => {
       const params = {};
       const response = metricsDashboardResponse;
 
-      receiveMetricsDashboardSuccess({ commit, dispatch }, { response, params });
+      receiveMetricsDashboardSuccess({ state, commit, dispatch }, { response, params });
 
       expect(commit).toHaveBeenCalledWith(
         types.RECEIVE_METRICS_DATA_SUCCESS,
@@ -231,6 +234,18 @@ describe('Monitoring store actions', () => {
 
       expect(dispatch).toHaveBeenCalledWith('fetchPrometheusMetrics', params);
     });
+
+    it('sets the dashboards loaded from the repository', () => {
+      const params = {};
+      const response = metricsDashboardResponse;
+
+      response.all_dashboards = dashboardGitResponse;
+      state.multipleDashboardsEnabled = true;
+
+      receiveMetricsDashboardSuccess({ state, commit, dispatch }, { response, params });
+
+      expect(commit).toHaveBeenCalledWith(types.SET_ALL_DASHBOARDS, dashboardGitResponse);
+    });
   });
 
   describe('receiveMetricsDashboardFailure', () => {
diff --git a/spec/javascripts/monitoring/store/mutations_spec.js b/spec/javascripts/monitoring/store/mutations_spec.js
index 02ff5847b34..91580366531 100644
--- a/spec/javascripts/monitoring/store/mutations_spec.js
+++ b/spec/javascripts/monitoring/store/mutations_spec.js
@@ -1,7 +1,12 @@
 import mutations from '~/monitoring/stores/mutations';
 import * as types from '~/monitoring/stores/mutation_types';
 import state from '~/monitoring/stores/state';
-import { metricsGroupsAPIResponse, deploymentData, metricsDashboardResponse } from '../mock_data';
+import {
+  metricsGroupsAPIResponse,
+  deploymentData,
+  metricsDashboardResponse,
+  dashboardGitResponse,
+} from '../mock_data';
 
 describe('Monitoring mutations', () => {
   let stateCopy;
@@ -156,4 +161,12 @@ describe('Monitoring mutations', () => {
       expect(stateCopy.metricsWithData).toEqual([]);
     });
   });
+
+  describe('SET_ALL_DASHBOARDS', () => {
+    it('stores the dashboards loaded from the git repository', () => {
+      mutations[types.SET_ALL_DASHBOARDS](stateCopy, dashboardGitResponse);
+
+      expect(stateCopy.allDashboards).toEqual(dashboardGitResponse);
+    });
+  });
 });