1 files changed, 64 insertions, 12 deletions

diff --git a/app/assets/javascripts/monitoring/stores/mutations.js b/app/assets/javascripts/monitoring/stores/mutations.js
index 744441c8935..09a5861b475 100644
--- a/app/assets/javascripts/monitoring/stores/mutations.js
+++ b/app/assets/javascripts/monitoring/stores/mutations.js
@@ -1,9 +1,9 @@
 import Vue from 'vue';
 import { pick } from 'lodash';
 import * as types from './mutation_types';
-import { mapToDashboardViewModel, normalizeQueryResponseData } from './utils';
+import { mapToDashboardViewModel, mapPanelToViewModel, normalizeQueryResponseData } from './utils';
 import httpStatusCodes from '~/lib/utils/http_status';
-import { BACKOFF_TIMEOUT } from '../../lib/utils/common_utils';
+import { BACKOFF_TIMEOUT } from '~/lib/utils/common_utils';
 import { dashboardEmptyStates, endpointKeys, initialStateKeys, metricStates } from '../constants';
 import { optionsFromSeriesData } from './variable_mapping';
 
@@ -53,6 +53,14 @@ const emptyStateFromError = error => {
   return metricStates.UNKNOWN_ERROR;
 };
 
+export const metricStateFromData = data => {
+  if (data?.result?.length) {
+    const result = normalizeQueryResponseData(data);
+    return { state: metricStates.OK, result: Object.freeze(result) };
+  }
+  return { state: metricStates.NO_DATA, result: null };
+};
+
 export default {
   /**
    * Dashboard panels structure and global state
@@ -154,17 +162,11 @@ export default {
   },
   [types.RECEIVE_METRIC_RESULT_SUCCESS](state, { metricId, data }) {
     const metric = findMetricInDashboard(metricId, state.dashboard);
-    metric.loading = false;
+    const metricState = metricStateFromData(data);
 
-    if (!data.result || data.result.length === 0) {
-      metric.state = metricStates.NO_DATA;
-      metric.result = null;
-    } else {
-      const result = normalizeQueryResponseData(data);
-
-      metric.state = metricStates.OK;
-      metric.result = Object.freeze(result);
-    }
+    metric.loading = false;
+    metric.state = metricState.state;
+    metric.result = metricState.result;
   },
   [types.RECEIVE_METRIC_RESULT_FAILURE](state, { metricId, error }) {
     const metric = findMetricInDashboard(metricId, state.dashboard);
@@ -218,4 +220,54 @@ export default {
     // Add new options with assign to ensure Vue reactivity
     Object.assign(variable.options, { values });
   },
+
+  [types.REQUEST_PANEL_PREVIEW](state, panelPreviewYml) {
+    state.panelPreviewIsLoading = true;
+
+    state.panelPreviewYml = panelPreviewYml;
+    state.panelPreviewGraphData = null;
+    state.panelPreviewError = null;
+  },
+  [types.RECEIVE_PANEL_PREVIEW_SUCCESS](state, payload) {
+    state.panelPreviewIsLoading = false;
+
+    state.panelPreviewGraphData = mapPanelToViewModel(payload);
+    state.panelPreviewError = null;
+  },
+  [types.RECEIVE_PANEL_PREVIEW_FAILURE](state, error) {
+    state.panelPreviewIsLoading = false;
+
+    state.panelPreviewGraphData = null;
+    state.panelPreviewError = error;
+  },
+
+  [types.REQUEST_PANEL_PREVIEW_METRIC_RESULT](state, { index }) {
+    const metric = state.panelPreviewGraphData.metrics[index];
+
+    metric.loading = true;
+    if (!metric.result) {
+      metric.state = metricStates.LOADING;
+    }
+  },
+  [types.RECEIVE_PANEL_PREVIEW_METRIC_RESULT_SUCCESS](state, { index, data }) {
+    const metric = state.panelPreviewGraphData.metrics[index];
+    const metricState = metricStateFromData(data);
+
+    metric.loading = false;
+    metric.state = metricState.state;
+    metric.result = metricState.result;
+  },
+  [types.RECEIVE_PANEL_PREVIEW_METRIC_RESULT_FAILURE](state, { index, error }) {
+    const metric = state.panelPreviewGraphData.metrics[index];
+
+    metric.loading = false;
+    metric.state = emptyStateFromError(error);
+    metric.result = null;
+  },
+  [types.SET_PANEL_PREVIEW_TIME_RANGE](state, timeRange) {
+    state.panelPreviewTimeRange = timeRange;
+  },
+  [types.SET_PANEL_PREVIEW_IS_SHOWN](state, isPreviewShown) {
+    state.panelPreviewIsShown = isPreviewShown;
+  },
 };