2019-06-05 18:03:30 -04:00
|
|
|
import Vue from 'vue';
|
2019-11-04 04:06:21 -05:00
|
|
|
import { slugify } from '~/lib/utils/text_utility';
|
2019-05-27 18:30:36 -04:00
|
|
|
import * as types from './mutation_types';
|
2019-11-28 10:06:57 -05:00
|
|
|
import { normalizeMetric, normalizeQueryResult } from './utils';
|
2019-09-20 17:06:18 -04:00
|
|
|
|
2019-11-28 10:06:57 -05:00
|
|
|
const normalizePanelMetrics = (metrics, defaultLabel) =>
|
|
|
|
metrics.map(metric => ({
|
|
|
|
...normalizeMetric(metric),
|
|
|
|
label: metric.label || defaultLabel,
|
|
|
|
}));
|
2019-05-27 18:30:36 -04:00
|
|
|
|
|
|
|
export default {
|
|
|
|
[types.REQUEST_METRICS_DATA](state) {
|
|
|
|
state.emptyState = 'loading';
|
|
|
|
state.showEmptyState = true;
|
|
|
|
},
|
|
|
|
[types.RECEIVE_METRICS_DATA_SUCCESS](state, groupData) {
|
2019-11-04 04:06:21 -05:00
|
|
|
state.dashboard.panel_groups = groupData.map((group, i) => {
|
|
|
|
const key = `${slugify(group.group || 'default')}-${i}`;
|
2019-11-28 10:06:57 -05:00
|
|
|
let { panels = [] } = group;
|
2019-09-20 17:06:18 -04:00
|
|
|
|
|
|
|
// each panel has metric information that needs to be normalized
|
|
|
|
panels = panels.map(panel => ({
|
|
|
|
...panel,
|
2019-11-28 10:06:57 -05:00
|
|
|
metrics: normalizePanelMetrics(panel.metrics, panel.y_label),
|
2019-11-13 13:06:51 -05:00
|
|
|
}));
|
2019-06-05 18:03:30 -04:00
|
|
|
|
|
|
|
return {
|
|
|
|
...group,
|
2019-09-20 17:06:18 -04:00
|
|
|
panels,
|
2019-11-04 04:06:21 -05:00
|
|
|
key,
|
2019-06-05 18:03:30 -04:00
|
|
|
};
|
|
|
|
});
|
2019-05-27 18:30:36 -04:00
|
|
|
|
2019-11-04 04:06:21 -05:00
|
|
|
if (!state.dashboard.panel_groups.length) {
|
2019-05-27 18:30:36 -04:00
|
|
|
state.emptyState = 'noData';
|
|
|
|
}
|
|
|
|
},
|
|
|
|
[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 = [];
|
|
|
|
},
|
2019-11-28 10:06:57 -05:00
|
|
|
|
2019-06-05 18:03:30 -04:00
|
|
|
[types.SET_QUERY_RESULT](state, { metricId, result }) {
|
|
|
|
if (!metricId || !result || result.length === 0) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
state.showEmptyState = false;
|
|
|
|
|
2019-11-28 10:06:57 -05:00
|
|
|
/**
|
|
|
|
* Search the dashboard state for a matching id
|
|
|
|
*/
|
2019-11-04 04:06:21 -05:00
|
|
|
state.dashboard.panel_groups.forEach(group => {
|
2019-11-28 10:06:57 -05:00
|
|
|
group.panels.forEach(panel => {
|
|
|
|
panel.metrics.forEach(metric => {
|
|
|
|
if (metric.metric_id === metricId) {
|
2019-06-05 18:03:30 -04:00
|
|
|
// ensure dates/numbers are correctly formatted for charts
|
|
|
|
const normalizedResults = result.map(normalizeQueryResult);
|
2019-11-28 10:06:57 -05:00
|
|
|
Vue.set(metric, 'result', Object.freeze(normalizedResults));
|
2019-06-05 18:03:30 -04:00
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
2019-05-27 18:30:36 -04:00
|
|
|
[types.SET_ENDPOINTS](state, endpoints) {
|
|
|
|
state.metricsEndpoint = endpoints.metricsEndpoint;
|
|
|
|
state.environmentsEndpoint = endpoints.environmentsEndpoint;
|
|
|
|
state.deploymentsEndpoint = endpoints.deploymentsEndpoint;
|
2019-06-05 18:03:30 -04:00
|
|
|
state.dashboardEndpoint = endpoints.dashboardEndpoint;
|
2019-06-26 18:14:41 -04:00
|
|
|
state.currentDashboard = endpoints.currentDashboard;
|
2019-07-10 17:12:46 -04:00
|
|
|
state.projectPath = endpoints.projectPath;
|
2019-06-05 18:03:30 -04:00
|
|
|
},
|
2019-05-27 18:30:36 -04:00
|
|
|
[types.SET_GETTING_STARTED_EMPTY_STATE](state) {
|
|
|
|
state.emptyState = 'gettingStarted';
|
|
|
|
},
|
2019-06-05 18:03:30 -04:00
|
|
|
[types.SET_NO_DATA_EMPTY_STATE](state) {
|
|
|
|
state.showEmptyState = true;
|
|
|
|
state.emptyState = 'noData';
|
|
|
|
},
|
2019-06-26 18:14:41 -04:00
|
|
|
[types.SET_ALL_DASHBOARDS](state, dashboards) {
|
2019-11-15 07:06:12 -05:00
|
|
|
state.allDashboards = dashboards || [];
|
2019-06-26 18:14:41 -04:00
|
|
|
},
|
2019-07-22 08:01:42 -04:00
|
|
|
[types.SET_SHOW_ERROR_BANNER](state, enabled) {
|
|
|
|
state.showErrorBanner = enabled;
|
|
|
|
},
|
2019-11-04 04:06:21 -05:00
|
|
|
[types.SET_PANEL_GROUP_METRICS](state, payload) {
|
|
|
|
const panelGroup = state.dashboard.panel_groups.find(pg => payload.key === pg.key);
|
2019-11-28 10:06:57 -05:00
|
|
|
panelGroup.panels = payload.panels;
|
2019-11-04 04:06:21 -05:00
|
|
|
},
|
2019-05-27 18:30:36 -04:00
|
|
|
};
|