1 files changed, 24 insertions, 50 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"