Migrate the monitoring dashboard store to vuex

This changes the monitoring javascript store from
an object based to a vuex one

9 files changed, 244 insertions, 161 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index ff1e1805948..a55a47c277d 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -8,16 +8,14 @@ import {
   GlLink,
 } from '@gitlab/ui';
 import _ from 'underscore';
+import { mapActions, mapState } from 'vuex';
 import { s__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import '~/vue_shared/mixins/is_ee';
 import { getParameterValues } from '~/lib/utils/url_utility';
-import Flash from '../../flash';
-import MonitoringService from '../services/monitoring_service';
 import MonitorAreaChart from './charts/area.vue';
 import GraphGroup from './graph_group.vue';
 import EmptyState from './empty_state.vue';
-import MonitoringStore from '../stores/monitoring_store';
 import { timeWindows, timeWindowsKeyNames } from '../constants';
 import { getTimeDiff } from '../utils';
 
@@ -128,9 +126,7 @@ export default {
   },
   data() {
     return {
-      store: new MonitoringStore(),
       state: 'gettingStarted',
-      showEmptyState: true,
       elWidth: 0,
       selectedTimeWindow: '',
       selectedTimeWindowKey: '',
@@ -141,13 +137,21 @@ export default {
     canAddMetrics() {
       return this.customMetricsAvailable && this.customMetricsPath.length;
     },
+    ...mapState('monitoringDashboard', [
+      'groups',
+      'emptyState',
+      'showEmptyState',
+      'environments',
+      'deploymentData',
+    ]),
   },
   created() {
-    this.service = new MonitoringService({
+    this.setEndpoints({
       metricsEndpoint: this.metricsEndpoint,
-      deploymentEndpoint: this.deploymentEndpoint,
       environmentsEndpoint: this.environmentsEndpoint,
+      deploymentsEndpoint: this.deploymentEndpoint,
     });
+
     this.timeWindows = timeWindows;
     this.selectedTimeWindowKey =
       _.escape(getParameterValues('time_window')[0]) || timeWindowsKeyNames.eightHours;
@@ -165,31 +169,11 @@ export default {
     }
   },
   mounted() {
-    const startEndWindow = getTimeDiff(this.timeWindows[this.selectedTimeWindowKey]);
-    this.servicePromises = [
-      this.service
-        .getGraphsData(startEndWindow)
-        .then(data => this.store.storeMetrics(data))
-        .catch(() => Flash(s__('Metrics|There was an error while retrieving metrics'))),
-      this.service
-        .getDeploymentData()
-        .then(data => this.store.storeDeploymentData(data))
-        .catch(() => Flash(s__('Metrics|There was an error getting deployment information.'))),
-    ];
     if (!this.hasMetrics) {
-      this.state = 'gettingStarted';
+      this.setGettingStartedEmptyState();
     } else {
-      if (this.environmentsEndpoint) {
-        this.servicePromises.push(
-          this.service
-            .getEnvironmentsData()
-            .then(data => this.store.storeEnvironmentsData(data))
-            .catch(() =>
-              Flash(s__('Metrics|There was an error getting environments information.')),
-            ),
-        );
-      }
-      this.getGraphsData();
+      this.fetchData(getTimeDiff(this.timeWindows.eightHours));
+
       sidebarMutationObserver = new MutationObserver(this.onSidebarMutation);
       sidebarMutationObserver.observe(document.querySelector('.layout-page'), {
         attributes: true,
@@ -199,6 +183,11 @@ export default {
     }
   },
   methods: {
+    ...mapActions('monitoringDashboard', [
+      'fetchData',
+      'setGettingStartedEmptyState',
+      'setEndpoints',
+    ]),
     getGraphAlerts(queries) {
       if (!this.allAlerts) return {};
       const metricIdsForChart = queries.map(q => q.metricId);
@@ -207,21 +196,6 @@ export default {
     getGraphAlertValues(queries) {
       return Object.values(this.getGraphAlerts(queries));
     },
-    getGraphsData() {
-      this.state = 'loading';
-      Promise.all(this.servicePromises)
-        .then(() => {
-          if (this.store.groups.length < 1) {
-            this.state = 'noData';
-            return;
-          }
-
-          this.showEmptyState = false;
-        })
-        .catch(() => {
-          this.state = 'unableToConnect';
-        });
-    },
     hideAddMetricModal() {
       this.$refs.addMetricModal.hide();
     },
@@ -263,10 +237,10 @@ export default {
             class="prepend-left-10 js-environments-dropdown"
             toggle-class="dropdown-menu-toggle"
             :text="currentEnvironmentName"
-            :disabled="store.environmentsData.length === 0"
+            :disabled="environments.length === 0"
           >
             <gl-dropdown-item
-              v-for="environment in store.environmentsData"
+              v-for="environment in environments"
               :key="environment.id"
               :active="environment.name === currentEnvironmentName"
               active-class="is-active"
@@ -336,7 +310,7 @@ export default {
       </div>
     </div>
     <graph-group
-      v-for="(groupData, index) in store.groups"
+      v-for="(groupData, index) in groups"
       :key="index"
       :name="groupData.group"
       :show-panels="showPanels"
@@ -345,7 +319,7 @@ export default {
         v-for="(graphData, graphIndex) in groupData.metrics"
         :key="graphIndex"
         :graph-data="graphData"
-        :deployment-data="store.deploymentData"
+        :deployment-data="deploymentData"
         :thresholds="getGraphAlertValues(graphData.queries)"
         :container-width="elWidth"
         group-id="monitor-area-chart"
@@ -362,7 +336,7 @@ export default {
   </div>
   <empty-state
     v-else
-    :selected-state="state"
+    :selected-state="emptyState"
     :documentation-path="documentationPath"
     :settings-path="settingsPath"
     :clusters-path="clustersPath"
diff --git a/app/assets/javascripts/monitoring/monitoring_bundle.js b/app/assets/javascripts/monitoring/monitoring_bundle.js
index 08dc57d545c..57771ccf4d9 100644
--- a/app/assets/javascripts/monitoring/monitoring_bundle.js
+++ b/app/assets/javascripts/monitoring/monitoring_bundle.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import Dashboard from 'ee_else_ce/monitoring/components/dashboard.vue';
+import store from './stores';
 
 export default (props = {}) => {
   const el = document.getElementById('prometheus-graphs');
@@ -9,6 +10,7 @@ export default (props = {}) => {
     // eslint-disable-next-line no-new
     new Vue({
       el,
+      store,
       render(createElement) {
         return createElement(Dashboard, {
           props: {
diff --git a/app/assets/javascripts/monitoring/services/monitoring_service.js b/app/assets/javascripts/monitoring/services/monitoring_service.js
deleted file mode 100644
index 1efa5189996..00000000000
--- a/app/assets/javascripts/monitoring/services/monitoring_service.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import axios from '../../lib/utils/axios_utils';
-import statusCodes from '../../lib/utils/http_status';
-import { backOff } from '../../lib/utils/common_utils';
-import { s__, __ } from '../../locale';
-
-const MAX_REQUESTS = 3;
-
-function backOffRequest(makeRequestCallback) {
-  let requestCounter = 0;
-  return backOff((next, stop) => {
-    makeRequestCallback()
-      .then(resp => {
-        if (resp.status === statusCodes.NO_CONTENT) {
-          requestCounter += 1;
-          if (requestCounter < MAX_REQUESTS) {
-            next();
-          } else {
-            stop(new Error(__('Failed to connect to the prometheus server')));
-          }
-        } else {
-          stop(resp);
-        }
-      })
-      .catch(stop);
-  });
-}
-
-export default class MonitoringService {
-  constructor({ metricsEndpoint, deploymentEndpoint, environmentsEndpoint }) {
-    this.metricsEndpoint = metricsEndpoint;
-    this.deploymentEndpoint = deploymentEndpoint;
-    this.environmentsEndpoint = environmentsEndpoint;
-  }
-
-  getGraphsData(params = {}) {
-    return backOffRequest(() => axios.get(this.metricsEndpoint, { params }))
-      .then(resp => resp.data)
-      .then(response => {
-        if (!response || !response.data || !response.success) {
-          throw new Error(s__('Metrics|Unexpected metrics data response from prometheus endpoint'));
-        }
-        return response.data;
-      });
-  }
-
-  getDeploymentData() {
-    if (!this.deploymentEndpoint) {
-      return Promise.resolve([]);
-    }
-    return backOffRequest(() => axios.get(this.deploymentEndpoint))
-      .then(resp => resp.data)
-      .then(response => {
-        if (!response || !response.deployments) {
-          throw new Error(
-            s__('Metrics|Unexpected deployment data response from prometheus endpoint'),
-          );
-        }
-        return response.deployments;
-      });
-  }
-
-  getEnvironmentsData() {
-    return axios
-      .get(this.environmentsEndpoint)
-      .then(resp => resp.data)
-      .then(response => {
-        if (!response || !response.environments) {
-          throw new Error(
-            s__('Metrics|There was an error fetching the environments data, please try again'),
-          );
-        }
-        return response.environments;
-      });
-  }
-}
diff --git a/app/assets/javascripts/monitoring/stores/actions.js b/app/assets/javascripts/monitoring/stores/actions.js
new file mode 100644
index 00000000000..63c23e8449d
--- /dev/null
+++ b/app/assets/javascripts/monitoring/stores/actions.js
@@ -0,0 +1,117 @@
+import * as types from './mutation_types';
+import axios from '~/lib/utils/axios_utils';
+import createFlash from '~/flash';
+import statusCodes from '../../lib/utils/http_status';
+import { backOff } from '../../lib/utils/common_utils';
+import { s__, __ } from '../../locale';
+
+const MAX_REQUESTS = 3;
+
+function backOffRequest(makeRequestCallback) {
+  let requestCounter = 0;
+  return backOff((next, stop) => {
+    makeRequestCallback()
+      .then(resp => {
+        if (resp.status === statusCodes.NO_CONTENT) {
+          requestCounter += 1;
+          if (requestCounter < MAX_REQUESTS) {
+            next();
+          } else {
+            stop(new Error(__('Failed to connect to the prometheus server')));
+          }
+        } else {
+          stop(resp);
+        }
+      })
+      .catch(stop);
+  });
+}
+
+export const setGettingStartedEmptyState = ({ commit }) => {
+  commit(types.SET_GETTING_STARTED_EMPTY_STATE);
+};
+
+export const setEndpoints = ({ commit }, endpoints) => {
+  commit(types.SET_ENDPOINTS, endpoints);
+};
+
+export const requestMetricsData = ({ commit }) => commit(types.REQUEST_METRICS_DATA);
+export const receiveMetricsDataSuccess = ({ commit }, data) =>
+  commit(types.RECEIVE_METRICS_DATA_SUCCESS, data);
+export const receiveMetricsDataFailure = ({ commit }, error) =>
+  commit(types.RECEIVE_METRICS_DATA_FAILURE, error);
+export const receiveDeploymentsDataSuccess = ({ commit }, data) =>
+  commit(types.RECEIVE_DEPLOYMENTS_DATA_SUCCESS, data);
+export const receiveDeploymentsDataFailure = ({ commit }) =>
+  commit(types.RECEIVE_DEPLOYMENTS_DATA_FAILURE);
+export const receiveEnvironmentsDataSuccess = ({ commit }, data) =>
+  commit(types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS, data);
+export const receiveEnvironmentsDataFailure = ({ commit }) =>
+  commit(types.RECEIVE_ENVIRONMENTS_DATA_FAILURE);
+
+export const fetchData = ({ dispatch }, params) => {
+  dispatch('fetchMetricsData', params);
+  dispatch('fetchDeploymentsData');
+  dispatch('fetchEnvironmentsData');
+};
+
+export const fetchMetricsData = ({ state, dispatch }, params) => {
+  dispatch('requestMetricsData');
+
+  return backOffRequest(() => axios.get(state.metricsEndpoint, { params }))
+    .then(resp => resp.data)
+    .then(response => {
+      if (!response || !response.data || !response.success) {
+        dispatch('receiveMetricsDataFailure', null);
+        createFlash(s__('Metrics|Unexpected metrics data response from prometheus endpoint'));
+      }
+      dispatch('receiveMetricsDataSuccess', response.data);
+    })
+    .catch(error => {
+      dispatch('receiveMetricsDataFailure', error);
+      createFlash(s__('Metrics|There was an error while retrieving metrics'));
+    });
+};
+
+export const fetchDeploymentsData = ({ state, dispatch }) => {
+  if (!state.deploymentEndpoint) {
+    return Promise.resolve([]);
+  }
+  return backOffRequest(() => axios.get(state.deploymentEndpoint))
+    .then(resp => resp.data)
+    .then(response => {
+      if (!response || !response.deployments) {
+        createFlash(s__('Metrics|Unexpected deployment data response from prometheus endpoint'));
+      }
+
+      dispatch('receiveDeploymentsDataSuccess', response.deployments);
+    })
+    .catch(() => {
+      dispatch('receiveDeploymentsDataFailure');
+      createFlash(s__('Metrics|There was an error getting deployment information.'));
+    });
+};
+
+export const fetchEnvironmentsData = ({ state, dispatch }) => {
+  if (!state.environmentsEndpoint) {
+    return Promise.resolve([]);
+  }
+  return axios
+    .get(state.environmentsEndpoint)
+    .then(resp => resp.data)
+    .then(response => {
+      if (!response || !response.environments) {
+        createFlash(
+          s__('Metrics|There was an error fetching the environments data, please try again'),
+        );
+      }
+      dispatch('receiveEnvironmentsDataSuccess', response.environments);
+    })
+    .catch(() => {
+      dispatch('receiveEnvironmentsDataFailure');
+      createFlash(s__('Metrics|There was an error getting environments information.'));
+    });
+};
+
+// prevent babel-plugin-rewire from generating an invalid default during karma tests
+export default () => {};
diff --git a/app/assets/javascripts/monitoring/stores/index.js b/app/assets/javascripts/monitoring/stores/index.js
new file mode 100644
index 00000000000..d58398c54ae
--- /dev/null
+++ b/app/assets/javascripts/monitoring/stores/index.js
@@ -0,0 +1,21 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import * as actions from './actions';
+import mutations from './mutations';
+import state from './state';
+
+Vue.use(Vuex);
+
+export const createStore = () =>
+  new Vuex.Store({
+    modules: {
+      monitoringDashboard: {
+        namespaced: true,
+        actions,
+        mutations,
+        state,
+      },
+    },
+  });
+
+export default createStore();
diff --git a/app/assets/javascripts/monitoring/stores/mutation_types.js b/app/assets/javascripts/monitoring/stores/mutation_types.js
new file mode 100644
index 00000000000..74c4ae64712
--- /dev/null
+++ b/app/assets/javascripts/monitoring/stores/mutation_types.js
@@ -0,0 +1,15 @@
+export const REQUEST_METRICS_DATA = 'REQUEST_METRICS_DATA';
+export const RECEIVE_METRICS_DATA_SUCCESS = 'RECEIVE_METRICS_DATA_SUCCESS';
+export const RECEIVE_METRICS_DATA_FAILURE = 'RECEIVE_METRICS_DATA_FAILURE';
+export const REQUEST_DEPLOYMENTS_DATA = 'REQUEST_DEPLOYMENTS_DATA';
+export const RECEIVE_DEPLOYMENTS_DATA_SUCCESS = 'RECEIVE_DEPLOYMENTS_DATA_SUCCESS';
+export const RECEIVE_DEPLOYMENTS_DATA_FAILURE = 'RECEIVE_DEPLOYMENTS_DATA_FAILURE';
+export const REQUEST_ENVIRONMENTS_DATA = 'REQUEST_ENVIRONMENTS_DATA';
+export const RECEIVE_ENVIRONMENTS_DATA_SUCCESS = 'RECEIVE_ENVIRONMENTS_DATA_SUCCESS';
+export const RECEIVE_ENVIRONMENTS_DATA_FAILURE = 'RECEIVE_ENVIRONMENTS_DATA_FAILURE';
+export const SET_TIME_WINDOW = 'SET_TIME_WINDOW';
+export const SET_METRICS_ENDPOINT = 'SET_METRICS_ENDPOINT';
+export const SET_ENVIRONMENTS_ENDPOINT = 'SET_ENVIRONMENTS_ENDPOINT';
+export const SET_DEPLOYMENTS_ENDPOINT = 'SET_DEPLOYMENTS_ENDPOINT';
+export const SET_ENDPOINTS = 'SET_ENDPOINTS';
+export const SET_GETTING_STARTED_EMPTY_STATE = 'SET_GETTING_STARTED_EMPTY_STATE';
diff --git a/app/assets/javascripts/monitoring/stores/mutations.js b/app/assets/javascripts/monitoring/stores/mutations.js
new file mode 100644
index 00000000000..c1779333d75
--- /dev/null
+++ b/app/assets/javascripts/monitoring/stores/mutations.js
@@ -0,0 +1,45 @@
+import * as types from './mutation_types';
+import { normalizeMetrics, sortMetrics } from './utils';
+
+export default {
+  [types.REQUEST_METRICS_DATA](state) {
+    state.emptyState = 'loading';
+    state.showEmptyState = true;
+  },
+  [types.RECEIVE_METRICS_DATA_SUCCESS](state, groupData) {
+    state.groups = groupData.map(group => ({
+      ...group,
+      metrics: normalizeMetrics(sortMetrics(group.metrics)),
+    }));
+
+    if (!state.groups.length) {
+      state.emptyState = 'noData';
+    } else {
+      state.showEmptyState = false;
+    }
+  },
+  [types.RECEIVE_METRICS_DATA_FAILURE](state, error) {
+    state.emptyState = error ? 'unableToConnect' : 'noData';
+    state.showEmptyState = true;
+  },
+  [types.RECEIVE_DEPLOYMENTS_DATA_SUCCESS](state, deployments) {
+    state.deploymentData = deployments;
+  },
+  [types.RECEIVE_DEPLOYMENTS_DATA_FAILURE](state) {
+    state.deploymentData = [];
+  },
+  [types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS](state, environments) {
+    state.environments = environments;
+  },
+  [types.RECEIVE_ENVIRONMENTS_DATA_FAILURE](state) {
+    state.environments = [];
+  },
+  [types.SET_ENDPOINTS](state, endpoints) {
+    state.metricsEndpoint = endpoints.metricsEndpoint;
+    state.environmentsEndpoint = endpoints.environmentsEndpoint;
+    state.deploymentsEndpoint = endpoints.deploymentsEndpoint;
+  },
+  [types.SET_GETTING_STARTED_EMPTY_STATE](state) {
+    state.emptyState = 'gettingStarted';
+  },
+};
diff --git a/app/assets/javascripts/monitoring/stores/state.js b/app/assets/javascripts/monitoring/stores/state.js
new file mode 100644
index 00000000000..5103122612a
--- /dev/null
+++ b/app/assets/javascripts/monitoring/stores/state.js
@@ -0,0 +1,12 @@
+export default () => ({
+  hasMetrics: false,
+  showPanels: true,
+  metricsEndpoint: null,
+  environmentsEndpoint: null,
+  deploymentsEndpoint: null,
+  emptyState: 'gettingStarted',
+  showEmptyState: true,
+  groups: [],
+  deploymentData: [],
+  environments: [],
+});
diff --git a/app/assets/javascripts/monitoring/stores/monitoring_store.js b/app/assets/javascripts/monitoring/stores/utils.js
index 013fb0d4540..9216554ecbf 100644
--- a/app/assets/javascripts/monitoring/stores/monitoring_store.js
+++ b/app/assets/javascripts/monitoring/stores/utils.js
@@ -1,12 +1,5 @@
 import _ from 'underscore';
 
-function sortMetrics(metrics) {
-  return _.chain(metrics)
-    .sortBy('title')
-    .sortBy('weight')
-    .value();
-}
-
 function checkQueryEmptyData(query) {
   return {
     ...query,
@@ -59,7 +52,13 @@ function groupQueriesByChartInfo(metrics) {
   return Object.values(metricsByChart);
 }
 
-function normalizeMetrics(metrics) {
+export const sortMetrics = metrics =>
+  _.chain(metrics)
+    .sortBy('title')
+    .sortBy('weight')
+    .value();
+
+export const normalizeMetrics = metrics => {
   const groupedMetrics = groupQueriesByChartInfo(metrics);
 
   return groupedMetrics.map(metric => {
@@ -81,31 +80,4 @@ function normalizeMetrics(metrics) {
       queries: removeTimeSeriesNoData(queries),
     };
   });
-}
-
-export default class MonitoringStore {
-  constructor() {
-    this.groups = [];
-    this.deploymentData = [];
-    this.environmentsData = [];
-  }
-
-  storeMetrics(groups = []) {
-    this.groups = groups.map(group => ({
-      ...group,
-      metrics: normalizeMetrics(sortMetrics(group.metrics)),
-    }));
-  }
-
-  storeDeploymentData(deploymentData = []) {
-    this.deploymentData = deploymentData;
-  }
-
-  storeEnvironmentsData(environmentsData = []) {
-    this.environmentsData = environmentsData.filter(environment => !!environment.last_deployment);
-  }
-
-  getMetricsCount() {
-    return this.groups.reduce((count, group) => count + group.metrics.length, 0);
-  }
-}
+};