Add current env name to monitoring store

The monitoring dashboard sets endpoints on initial
load. This MR adds a new property that needs to be
added on initial load

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

@@ -250,7 +250,7 @@ export default {
     },
   },
   created() {
-    this.setEndpoints({
+    this.setInitialState({
       metricsEndpoint: this.metricsEndpoint,
       deploymentsEndpoint: this.deploymentsEndpoint,
       dashboardEndpoint: this.dashboardEndpoint,
@@ -258,6 +258,7 @@ export default {
       currentDashboard: this.currentDashboard,
       projectPath: this.projectPath,
       logsPath: this.logsPath,
+      currentEnvironmentName: this.currentEnvironmentName,
     });
   },
   mounted() {
@@ -273,7 +274,7 @@ export default {
       'setTimeRange',
       'fetchData',
       'setGettingStartedEmptyState',
-      'setEndpoints',
+      'setInitialState',
       'setPanelGroupMetrics',
       'filterEnvironments',
     ]),

app/assets/javascripts/monitoring/components/embeds/metric_embed.vue

@@ -64,7 +64,10 @@ export default {
     },
   },
   mounted() {
-    this.setInitialState();
+    this.setInitialState({
+      dashboardEndpoint: removeTimeRangeParams(this.dashboardUrl),
+    });
+    this.setShowErrorBanner(false);
     this.setTimeRange(this.timeRange);
     this.fetchDashboard();
 
@@ -90,11 +93,8 @@ export default {
       fetchDashboard(dispatch, payload) {
         return dispatch(`${this.namespace}/fetchDashboard`, payload);
       },
-      setEndpoints(dispatch, payload) {
-        return dispatch(`${this.namespace}/setEndpoints`, payload);
-      },
-      setFeatureFlags(dispatch, payload) {
-        return dispatch(`${this.namespace}/setFeatureFlags`, payload);
+      setInitialState(dispatch, payload) {
+        return dispatch(`${this.namespace}/setInitialState`, payload);
       },
       setShowErrorBanner(dispatch, payload) {
         return dispatch(`${this.namespace}/setShowErrorBanner`, payload);
@@ -108,12 +108,6 @@ export default {
         this.elWidth = this.$el.clientWidth;
       }, sidebarAnimationDuration);
     },
-    setInitialState() {
-      this.setEndpoints({
-        dashboardEndpoint: removeTimeRangeParams(this.dashboardUrl),
-      });
-      this.setShowErrorBanner(false);
-    },
   },
 };
 </script>

app/assets/javascripts/monitoring/constants.js

@@ -79,3 +79,28 @@ export const dateFormats = {
   timeOfDay: 'h:MM TT',
   default: 'dd mmm yyyy, h:MMTT',
 };
+
+/**
+ * These Vuex store properties are allowed to be
+ * replaced dynamically after component has been created
+ * and initial state has been set.
+ *
+ * Currently used in `receiveMetricsDashboardSuccess` action.
+ */
+export const endpointKeys = [
+  'metricsEndpoint',
+  'deploymentsEndpoint',
+  'dashboardEndpoint',
+  'dashboardsEndpoint',
+  'currentDashboard',
+  'projectPath',
+  'logsPath',
+];
+
+/**
+ * These Vuex store properties are set as soon as the
+ * dashboard component has been created. The values are
+ * passed as data-* attributes and received by dashboard
+ * as Vue props.
+ */
+export const initialStateKeys = [...endpointKeys, 'currentEnvironmentName'];

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

@@ -30,8 +30,8 @@ export const setGettingStartedEmptyState = ({ commit }) => {
   commit(types.SET_GETTING_STARTED_EMPTY_STATE);
 };
 
-export const setEndpoints = ({ commit }, endpoints) => {
-  commit(types.SET_ENDPOINTS, endpoints);
+export const setInitialState = ({ commit }, initialState) => {
+  commit(types.SET_INITIAL_STATE, initialState);
 };
 
 export const setTimeRange = ({ commit }, timeRange) => {

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

@@ -17,6 +17,7 @@ export const RECEIVE_METRIC_RESULT_FAILURE = 'RECEIVE_METRIC_RESULT_FAILURE';
 export const SET_TIME_RANGE = 'SET_TIME_RANGE';
 export const SET_ALL_DASHBOARDS = 'SET_ALL_DASHBOARDS';
 export const SET_ENDPOINTS = 'SET_ENDPOINTS';
+export const SET_INITIAL_STATE = 'SET_INITIAL_STATE';
 export const SET_GETTING_STARTED_EMPTY_STATE = 'SET_GETTING_STARTED_EMPTY_STATE';
 export const SET_NO_DATA_EMPTY_STATE = 'SET_NO_DATA_EMPTY_STATE';
 export const SET_SHOW_ERROR_BANNER = 'SET_SHOW_ERROR_BANNER';

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

@@ -3,7 +3,7 @@ import pick from 'lodash/pick';
 import * as types from './mutation_types';
 import { mapToDashboardViewModel, normalizeQueryResult } from './utils';
 import { BACKOFF_TIMEOUT } from '../../lib/utils/common_utils';
-import { metricStates } from '../constants';
+import { endpointKeys, initialStateKeys, metricStates } from '../constants';
 import httpStatusCodes from '~/lib/utils/http_status';
 
 /**
@@ -150,19 +150,11 @@ export default {
       state: emptyStateFromError(error),
     });
   },
+  [types.SET_INITIAL_STATE](state, initialState = {}) {
+    Object.assign(state, pick(initialState, initialStateKeys));
+  },
   [types.SET_ENDPOINTS](state, endpoints = {}) {
-    const endpointKeys = [
-      'metricsEndpoint',
-      'deploymentsEndpoint',
-      'dashboardEndpoint',
-      'dashboardsEndpoint',
-      'currentDashboard',
-      'projectPath',
-      'logsPath',
-    ];
-    Object.entries(pick(endpoints, endpointKeys)).forEach(([key, value]) => {
-      state[key] = value;
-    });
+    Object.assign(state, pick(endpoints, endpointKeys));
   },
   [types.SET_TIME_RANGE](state, timeRange) {
     state.timeRange = timeRange;

spec/frontend/monitoring/components/dashboard_spec.js

@@ -88,11 +88,17 @@ describe('Dashboard', () => {
       expect(findEnvironmentsDropdown().exists()).toBe(true);
     });
 
-    it('sets endpoints: logs path', () => {
-      expect(store.dispatch).toHaveBeenCalledWith(
-        'monitoringDashboard/setEndpoints',
-        expect.objectContaining({ logsPath: propsData.logsPath }),
-      );
+    it('sets initial state', () => {
+      expect(store.dispatch).toHaveBeenCalledWith('monitoringDashboard/setInitialState', {
+        currentDashboard: '',
+        currentEnvironmentName: 'production',
+        dashboardEndpoint: 'https://invalid',
+        dashboardsEndpoint: 'https://invalid',
+        deploymentsEndpoint: null,
+        logsPath: '/path/to/logs',
+        metricsEndpoint: 'http://test.host/monitoring/mock',
+        projectPath: '/path/to/project',
+      });
     });
   });
 

spec/frontend/monitoring/components/embeds/metric_embed_spec.js

@@ -26,9 +26,8 @@ describe('MetricEmbed', () => {
 
   beforeEach(() => {
     actions = {
-      setFeatureFlags: jest.fn(),
+      setInitialState: jest.fn(),
       setShowErrorBanner: jest.fn(),
-      setEndpoints: jest.fn(),
       setTimeRange: jest.fn(),
       fetchDashboard: jest.fn(),
     };

spec/frontend/monitoring/store/actions_spec.js

@@ -16,7 +16,7 @@ import {
   fetchEnvironmentsData,
   fetchPrometheusMetrics,
   fetchPrometheusMetric,
-  setEndpoints,
+  setInitialState,
   filterEnvironments,
   setGettingStartedEmptyState,
   duplicateSystemDashboard,
@@ -208,14 +208,14 @@ describe('Monitoring store actions', () => {
     });
   });
 
-  describe('Set endpoints', () => {
+  describe('Set initial state', () => {
     let mockedState;
     beforeEach(() => {
       mockedState = storeState();
     });
-    it('should commit SET_ENDPOINTS mutation', done => {
+    it('should commit SET_INITIAL_STATE mutation', done => {
       testAction(
-        setEndpoints,
+        setInitialState,
         {
           metricsEndpoint: 'additional_metrics.json',
           deploymentsEndpoint: 'deployments.json',
@@ -223,7 +223,7 @@ describe('Monitoring store actions', () => {
         mockedState,
         [
           {
-            type: types.SET_ENDPOINTS,
+            type: types.SET_INITIAL_STATE,
             payload: {
               metricsEndpoint: 'additional_metrics.json',
               deploymentsEndpoint: 'deployments.json',

spec/frontend/monitoring/store/mutations_spec.js

@@ -86,6 +86,58 @@ describe('Monitoring mutations', () => {
       expect(typeof stateCopy.deploymentData[0]).toEqual('object');
     });
   });
+
+  describe('SET_INITIAL_STATE', () => {
+    it('should set all the endpoints', () => {
+      mutations[types.SET_INITIAL_STATE](stateCopy, {
+        metricsEndpoint: 'additional_metrics.json',
+        deploymentsEndpoint: 'deployments.json',
+        dashboardEndpoint: 'dashboard.json',
+        projectPath: '/gitlab-org/gitlab-foss',
+        currentEnvironmentName: 'production',
+      });
+      expect(stateCopy.metricsEndpoint).toEqual('additional_metrics.json');
+      expect(stateCopy.deploymentsEndpoint).toEqual('deployments.json');
+      expect(stateCopy.dashboardEndpoint).toEqual('dashboard.json');
+      expect(stateCopy.projectPath).toEqual('/gitlab-org/gitlab-foss');
+      expect(stateCopy.currentEnvironmentName).toEqual('production');
+    });
+
+    it('should not remove previously set properties', () => {
+      const defaultLogsPath = stateCopy.logsPath;
+
+      mutations[types.SET_INITIAL_STATE](stateCopy, {
+        logsPath: defaultLogsPath,
+      });
+      mutations[types.SET_INITIAL_STATE](stateCopy, {
+        dashboardEndpoint: 'dashboard.json',
+      });
+      mutations[types.SET_INITIAL_STATE](stateCopy, {
+        projectPath: '/gitlab-org/gitlab-foss',
+      });
+      mutations[types.SET_INITIAL_STATE](stateCopy, {
+        currentEnvironmentName: 'canary',
+      });
+
+      expect(stateCopy).toMatchObject({
+        logsPath: defaultLogsPath,
+        dashboardEndpoint: 'dashboard.json',
+        projectPath: '/gitlab-org/gitlab-foss',
+        currentEnvironmentName: 'canary',
+      });
+    });
+
+    it('should not update unknown properties', () => {
+      mutations[types.SET_INITIAL_STATE](stateCopy, {
+        dashboardEndpoint: 'dashboard.json',
+        someOtherProperty: 'some invalid value', // someOtherProperty is not allowed
+      });
+
+      expect(stateCopy.dashboardEndpoint).toBe('dashboard.json');
+      expect(stateCopy.someOtherProperty).toBeUndefined();
+    });
+  });
+
   describe('SET_ENDPOINTS', () => {
     it('should set all the endpoints', () => {
       mutations[types.SET_ENDPOINTS](stateCopy, {