debian-mirror-gitlab/app/assets/javascripts/monitoring/stores/actions.js

512 lines
16 KiB
JavaScript
Raw Normal View History

2020-04-08 14:13:33 +05:30
import * as Sentry from '@sentry/browser';
2019-09-04 21:01:54 +05:30
import * as types from './mutation_types';
import axios from '~/lib/utils/axios_utils';
import createFlash from '~/flash';
2020-03-13 15:44:24 +05:30
import { convertToFixedRange } from '~/lib/utils/datetime_range';
2020-04-22 19:07:51 +05:30
import {
gqClient,
parseEnvironmentsResponse,
parseAnnotationsResponse,
removeLeadingSlash,
} from './utils';
2020-01-01 13:55:28 +05:30
import trackDashboardLoad from '../monitoring_tracking_helper';
2020-03-13 15:44:24 +05:30
import getEnvironments from '../queries/getEnvironments.query.graphql';
2020-04-22 19:07:51 +05:30
import getAnnotations from '../queries/getAnnotations.query.graphql';
2020-07-28 23:09:34 +05:30
import getDashboardValidationWarnings from '../queries/getDashboardValidationWarnings.query.graphql';
2019-09-04 21:01:54 +05:30
import statusCodes from '../../lib/utils/http_status';
2020-05-24 23:13:21 +05:30
import { backOff, convertObjectPropsToCamelCase } from '../../lib/utils/common_utils';
2020-01-01 13:55:28 +05:30
import { s__, sprintf } from '../../locale';
2019-09-04 21:01:54 +05:30
2020-04-22 19:07:51 +05:30
import {
PROMETHEUS_TIMEOUT,
ENVIRONMENT_AVAILABLE_STATE,
DEFAULT_DASHBOARD_PATH,
2020-07-28 23:09:34 +05:30
VARIABLE_TYPES,
2020-04-22 19:07:51 +05:30
} from '../constants';
function prometheusMetricQueryParams(timeRange) {
const { start, end } = convertToFixedRange(timeRange);
const timeDiff = (new Date(end) - new Date(start)) / 1000;
const minStep = 60;
const queryDataPoints = 600;
return {
start_time: start,
end_time: end,
step: Math.max(minStep, Math.ceil(timeDiff / queryDataPoints)),
};
}
2019-09-04 21:01:54 +05:30
2020-01-01 13:55:28 +05:30
function backOffRequest(makeRequestCallback) {
2019-09-04 21:01:54 +05:30
return backOff((next, stop) => {
makeRequestCallback()
.then(resp => {
if (resp.status === statusCodes.NO_CONTENT) {
2020-01-01 13:55:28 +05:30
next();
2019-09-04 21:01:54 +05:30
} else {
stop(resp);
}
})
.catch(stop);
2020-01-01 13:55:28 +05:30
}, PROMETHEUS_TIMEOUT);
2019-09-04 21:01:54 +05:30
}
2020-07-28 23:09:34 +05:30
function getPrometheusQueryData(prometheusEndpoint, params) {
2020-04-22 19:07:51 +05:30
return backOffRequest(() => axios.get(prometheusEndpoint, { params }))
.then(res => res.data)
.then(response => {
if (response.status === 'error') {
throw new Error(response.error);
}
2020-07-28 23:09:34 +05:30
return response.data;
2020-04-22 19:07:51 +05:30
});
}
// Setup
2019-09-04 21:01:54 +05:30
export const setGettingStartedEmptyState = ({ commit }) => {
commit(types.SET_GETTING_STARTED_EMPTY_STATE);
};
2020-04-22 19:07:51 +05:30
export const setInitialState = ({ commit }, initialState) => {
commit(types.SET_INITIAL_STATE, initialState);
2019-09-04 21:01:54 +05:30
};
2020-03-13 15:44:24 +05:30
export const setTimeRange = ({ commit }, timeRange) => {
commit(types.SET_TIME_RANGE, timeRange);
};
export const filterEnvironments = ({ commit, dispatch }, searchTerm) => {
commit(types.SET_ENVIRONMENTS_FILTER, searchTerm);
dispatch('fetchEnvironmentsData');
};
2019-10-12 21:52:04 +05:30
export const setShowErrorBanner = ({ commit }, enabled) => {
commit(types.SET_SHOW_ERROR_BANNER, enabled);
};
2020-05-24 23:13:21 +05:30
export const setExpandedPanel = ({ commit }, { group, panel }) => {
commit(types.SET_EXPANDED_PANEL, { group, panel });
};
export const clearExpandedPanel = ({ commit }) => {
commit(types.SET_EXPANDED_PANEL, {
group: null,
panel: null,
});
};
2020-07-28 23:09:34 +05:30
export const setCurrentDashboard = ({ commit }, { currentDashboard }) => {
commit(types.SET_CURRENT_DASHBOARD, currentDashboard);
};
2020-04-22 19:07:51 +05:30
// All Data
2019-09-04 21:01:54 +05:30
2020-05-24 23:13:21 +05:30
/**
* Fetch all dashboard data.
*
* @param {Object} store
* @returns A promise that resolves when the dashboard
* skeleton has been loaded.
*/
2020-03-13 15:44:24 +05:30
export const fetchData = ({ dispatch }) => {
2019-09-04 21:01:54 +05:30
dispatch('fetchEnvironmentsData');
2020-04-22 19:07:51 +05:30
dispatch('fetchDashboard');
2020-05-24 23:13:21 +05:30
dispatch('fetchAnnotations');
2019-09-04 21:01:54 +05:30
};
2020-04-22 19:07:51 +05:30
// Metrics dashboard
2020-07-28 23:09:34 +05:30
export const fetchDashboard = ({ state, commit, dispatch, getters }) => {
2019-09-04 21:01:54 +05:30
dispatch('requestMetricsDashboard');
2020-03-13 15:44:24 +05:30
const params = {};
2020-07-28 23:09:34 +05:30
if (getters.fullDashboardPath) {
params.dashboard = getters.fullDashboardPath;
2019-09-30 21:07:59 +05:30
}
2019-12-26 22:10:19 +05:30
return backOffRequest(() => axios.get(state.dashboardEndpoint, { params }))
2019-09-04 21:01:54 +05:30
.then(resp => resp.data)
2020-07-28 23:09:34 +05:30
.then(response => {
dispatch('receiveMetricsDashboardSuccess', { response });
/**
* After the dashboard is fetched, there can be non-blocking invalid syntax
* in the dashboard file. This call will fetch such syntax warnings
* and surface a warning on the UI. If the invalid syntax is blocking,
* the `fetchDashboard` returns a 404 with error messages that are displayed
* on the UI.
*/
dispatch('fetchDashboardValidationWarnings');
})
2020-04-08 14:13:33 +05:30
.catch(error => {
Sentry.captureException(error);
commit(types.SET_ALL_DASHBOARDS, error.response?.data?.all_dashboards ?? []);
dispatch('receiveMetricsDashboardFailure', error);
2020-01-01 13:55:28 +05:30
if (state.showErrorBanner) {
2020-04-08 14:13:33 +05:30
if (error.response.data && error.response.data.message) {
const { message } = error.response.data;
2020-01-01 13:55:28 +05:30
createFlash(
sprintf(
s__('Metrics|There was an error while retrieving metrics. %{message}'),
{ message },
false,
),
);
} else {
createFlash(s__('Metrics|There was an error while retrieving metrics'));
}
2019-10-12 21:52:04 +05:30
}
2019-09-04 21:01:54 +05:30
});
};
2020-04-22 19:07:51 +05:30
export const requestMetricsDashboard = ({ commit }) => {
commit(types.REQUEST_METRICS_DASHBOARD);
};
export const receiveMetricsDashboardSuccess = ({ commit, dispatch }, { response }) => {
const { all_dashboards, dashboard, metrics_data } = response;
2019-09-04 21:01:54 +05:30
2020-04-22 19:07:51 +05:30
commit(types.SET_ALL_DASHBOARDS, all_dashboards);
commit(types.RECEIVE_METRICS_DASHBOARD_SUCCESS, dashboard);
commit(types.SET_ENDPOINTS, convertObjectPropsToCamelCase(metrics_data));
2019-09-04 21:01:54 +05:30
2020-04-22 19:07:51 +05:30
return dispatch('fetchDashboardData');
};
export const receiveMetricsDashboardFailure = ({ commit }, error) => {
commit(types.RECEIVE_METRICS_DASHBOARD_FAILURE, error);
};
2019-09-04 21:01:54 +05:30
2020-04-22 19:07:51 +05:30
// Metrics
2020-01-01 13:55:28 +05:30
2020-04-22 19:07:51 +05:30
/**
* Loads timeseries data: Prometheus data points and deployment data from the project
* @param {Object} Vuex store
*/
export const fetchDashboardData = ({ state, dispatch, getters }) => {
dispatch('fetchDeploymentsData');
2020-04-08 14:13:33 +05:30
2020-04-22 19:07:51 +05:30
if (!state.timeRange) {
createFlash(s__(`Metrics|Invalid time range, please verify.`), 'warning');
return Promise.reject();
}
2019-09-04 21:01:54 +05:30
2020-07-28 23:09:34 +05:30
// Time range params must be pre-calculated once for all metrics and options
// A subsequent call, may calculate a different time range
2020-04-22 19:07:51 +05:30
const defaultQueryParams = prometheusMetricQueryParams(state.timeRange);
2019-09-04 21:01:54 +05:30
2020-07-28 23:09:34 +05:30
dispatch('fetchVariableMetricLabelValues', { defaultQueryParams });
2019-09-04 21:01:54 +05:30
const promises = [];
2020-04-08 14:13:33 +05:30
state.dashboard.panelGroups.forEach(group => {
2019-09-04 21:01:54 +05:30
group.panels.forEach(panel => {
panel.metrics.forEach(metric => {
2020-04-22 19:07:51 +05:30
promises.push(dispatch('fetchPrometheusMetric', { metric, defaultQueryParams }));
2019-09-04 21:01:54 +05:30
});
});
});
2020-01-01 13:55:28 +05:30
return Promise.all(promises)
.then(() => {
2020-07-28 23:09:34 +05:30
const dashboardType = getters.fullDashboardPath === '' ? 'default' : 'custom';
2020-01-01 13:55:28 +05:30
trackDashboardLoad({
label: `${dashboardType}_metrics_dashboard`,
value: getters.metricsWithData().length,
});
})
.catch(() => {
createFlash(s__(`Metrics|There was an error while retrieving metrics`), 'warning');
});
2019-09-04 21:01:54 +05:30
};
2020-04-22 19:07:51 +05:30
/**
* Returns list of metrics in data.result
* {"status":"success", "data":{"resultType":"matrix","result":[]}}
*
* @param {metric} metric
*/
2020-05-24 23:13:21 +05:30
export const fetchPrometheusMetric = (
{ commit, state, getters },
{ metric, defaultQueryParams },
) => {
2020-05-30 21:06:31 +05:30
let queryParams = { ...defaultQueryParams };
2020-04-22 19:07:51 +05:30
if (metric.step) {
queryParams.step = metric.step;
}
2020-07-28 23:09:34 +05:30
if (state.variables.length > 0) {
2020-05-30 21:06:31 +05:30
queryParams = {
...queryParams,
...getters.getCustomVariablesParams,
};
2020-05-24 23:13:21 +05:30
}
2020-04-22 19:07:51 +05:30
commit(types.REQUEST_METRIC_RESULT, { metricId: metric.metricId });
2020-07-28 23:09:34 +05:30
return getPrometheusQueryData(metric.prometheusEndpointPath, queryParams)
.then(data => {
commit(types.RECEIVE_METRIC_RESULT_SUCCESS, { metricId: metric.metricId, data });
2020-04-22 19:07:51 +05:30
})
.catch(error => {
Sentry.captureException(error);
commit(types.RECEIVE_METRIC_RESULT_FAILURE, { metricId: metric.metricId, error });
// Continue to throw error so the dashboard can notify using createFlash
throw error;
});
};
// Deployments
2019-09-04 21:01:54 +05:30
export const fetchDeploymentsData = ({ state, dispatch }) => {
if (!state.deploymentsEndpoint) {
return Promise.resolve([]);
}
2020-01-01 13:55:28 +05:30
return axios
.get(state.deploymentsEndpoint)
2019-09-04 21:01:54 +05:30
.then(resp => resp.data)
.then(response => {
if (!response || !response.deployments) {
createFlash(s__('Metrics|Unexpected deployment data response from prometheus endpoint'));
}
dispatch('receiveDeploymentsDataSuccess', response.deployments);
})
2020-04-08 14:13:33 +05:30
.catch(error => {
Sentry.captureException(error);
2019-09-04 21:01:54 +05:30
dispatch('receiveDeploymentsDataFailure');
createFlash(s__('Metrics|There was an error getting deployment information.'));
});
};
2020-04-22 19:07:51 +05:30
export const receiveDeploymentsDataSuccess = ({ commit }, data) => {
commit(types.RECEIVE_DEPLOYMENTS_DATA_SUCCESS, data);
};
export const receiveDeploymentsDataFailure = ({ commit }) => {
commit(types.RECEIVE_DEPLOYMENTS_DATA_FAILURE);
};
// Environments
2019-09-04 21:01:54 +05:30
export const fetchEnvironmentsData = ({ state, dispatch }) => {
2020-03-13 15:44:24 +05:30
dispatch('requestEnvironmentsData');
return gqClient
.mutate({
mutation: getEnvironments,
variables: {
projectPath: removeLeadingSlash(state.projectPath),
search: state.environmentsSearchTerm,
2020-04-22 19:07:51 +05:30
states: [ENVIRONMENT_AVAILABLE_STATE],
2020-03-13 15:44:24 +05:30
},
})
.then(resp =>
parseEnvironmentsResponse(resp.data?.project?.data?.environments, state.projectPath),
)
.then(environments => {
if (!environments) {
2019-09-04 21:01:54 +05:30
createFlash(
s__('Metrics|There was an error fetching the environments data, please try again'),
);
}
2020-03-13 15:44:24 +05:30
dispatch('receiveEnvironmentsDataSuccess', environments);
2019-09-04 21:01:54 +05:30
})
2020-04-08 14:13:33 +05:30
.catch(err => {
Sentry.captureException(err);
2019-09-04 21:01:54 +05:30
dispatch('receiveEnvironmentsDataFailure');
createFlash(s__('Metrics|There was an error getting environments information.'));
});
};
2020-04-22 19:07:51 +05:30
export const requestEnvironmentsData = ({ commit }) => {
commit(types.REQUEST_ENVIRONMENTS_DATA);
};
export const receiveEnvironmentsDataSuccess = ({ commit }, data) => {
commit(types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS, data);
};
export const receiveEnvironmentsDataFailure = ({ commit }) => {
commit(types.RECEIVE_ENVIRONMENTS_DATA_FAILURE);
};
2020-07-28 23:09:34 +05:30
export const fetchAnnotations = ({ state, dispatch, getters }) => {
2020-04-22 19:07:51 +05:30
const { start } = convertToFixedRange(state.timeRange);
2020-07-28 23:09:34 +05:30
const dashboardPath = getters.fullDashboardPath || DEFAULT_DASHBOARD_PATH;
2020-04-22 19:07:51 +05:30
return gqClient
.mutate({
mutation: getAnnotations,
variables: {
projectPath: removeLeadingSlash(state.projectPath),
environmentName: state.currentEnvironmentName,
dashboardPath,
startingFrom: start,
},
})
.then(resp => resp.data?.project?.environments?.nodes?.[0].metricsDashboard?.annotations.nodes)
.then(parseAnnotationsResponse)
.then(annotations => {
if (!annotations) {
createFlash(s__('Metrics|There was an error fetching annotations. Please try again.'));
}
dispatch('receiveAnnotationsSuccess', annotations);
})
.catch(err => {
Sentry.captureException(err);
dispatch('receiveAnnotationsFailure');
createFlash(s__('Metrics|There was an error getting annotations information.'));
});
};
export const receiveAnnotationsSuccess = ({ commit }, data) =>
commit(types.RECEIVE_ANNOTATIONS_SUCCESS, data);
export const receiveAnnotationsFailure = ({ commit }) => commit(types.RECEIVE_ANNOTATIONS_FAILURE);
2020-07-28 23:09:34 +05:30
export const fetchDashboardValidationWarnings = ({ state, dispatch, getters }) => {
/**
* Normally, the default dashboard won't throw any validation warnings.
*
* However, if a bug sneaks into the default dashboard making it invalid,
* this might come handy for our clients
*/
const dashboardPath = getters.fullDashboardPath || DEFAULT_DASHBOARD_PATH;
return gqClient
.mutate({
mutation: getDashboardValidationWarnings,
variables: {
projectPath: removeLeadingSlash(state.projectPath),
environmentName: state.currentEnvironmentName,
dashboardPath,
},
})
.then(resp => resp.data?.project?.environments?.nodes?.[0]?.metricsDashboard)
.then(({ schemaValidationWarnings } = {}) => {
const hasWarnings = schemaValidationWarnings && schemaValidationWarnings.length !== 0;
/**
* The payload of the dispatch is a boolean, because at the moment a standard
* warning message is shown instead of the warnings the BE returns
*/
dispatch('receiveDashboardValidationWarningsSuccess', hasWarnings || false);
})
.catch(err => {
Sentry.captureException(err);
dispatch('receiveDashboardValidationWarningsFailure');
createFlash(
s__('Metrics|There was an error getting dashboard validation warnings information.'),
);
});
};
export const receiveDashboardValidationWarningsSuccess = ({ commit }, hasWarnings) =>
commit(types.RECEIVE_DASHBOARD_VALIDATION_WARNINGS_SUCCESS, hasWarnings);
export const receiveDashboardValidationWarningsFailure = ({ commit }) =>
commit(types.RECEIVE_DASHBOARD_VALIDATION_WARNINGS_FAILURE);
2020-04-22 19:07:51 +05:30
// Dashboard manipulation
2019-09-04 21:01:54 +05:30
2020-05-24 23:13:21 +05:30
export const toggleStarredValue = ({ commit, state, getters }) => {
const { selectedDashboard } = getters;
if (state.isUpdatingStarredValue) {
// Prevent repeating requests for the same change
return;
}
if (!selectedDashboard) {
return;
}
const method = selectedDashboard.starred ? 'DELETE' : 'POST';
const url = selectedDashboard.user_starred_path;
const newStarredValue = !selectedDashboard.starred;
commit(types.REQUEST_DASHBOARD_STARRING);
axios({
url,
method,
})
.then(() => {
2020-06-23 00:09:42 +05:30
commit(types.RECEIVE_DASHBOARD_STARRING_SUCCESS, { selectedDashboard, newStarredValue });
2020-05-24 23:13:21 +05:30
})
.catch(() => {
commit(types.RECEIVE_DASHBOARD_STARRING_FAILURE);
});
};
2019-12-26 22:10:19 +05:30
/**
* Set a new array of metrics to a panel group
* @param {*} data An object containing
* - `key` with a unique panel key
* - `metrics` with the metrics array
*/
export const setPanelGroupMetrics = ({ commit }, data) => {
commit(types.SET_PANEL_GROUP_METRICS, data);
};
2020-03-13 15:44:24 +05:30
export const duplicateSystemDashboard = ({ state }, payload) => {
const params = {
dashboard: payload.dashboard,
file_name: payload.fileName,
branch: payload.branch,
commit_message: payload.commitMessage,
};
return axios
.post(state.dashboardsEndpoint, params)
.then(response => response.data)
.then(data => data.dashboard)
.catch(error => {
2020-04-08 14:13:33 +05:30
Sentry.captureException(error);
2020-03-13 15:44:24 +05:30
const { response } = error;
2020-04-08 14:13:33 +05:30
2020-03-13 15:44:24 +05:30
if (response && response.data && response.data.error) {
throw sprintf(s__('Metrics|There was an error creating the dashboard. %{error}'), {
error: response.data.error,
});
} else {
throw s__('Metrics|There was an error creating the dashboard.');
}
});
};
2020-05-24 23:13:21 +05:30
// Variables manipulation
2020-06-23 00:09:42 +05:30
export const updateVariablesAndFetchData = ({ commit, dispatch }, updatedVariable) => {
2020-07-28 23:09:34 +05:30
commit(types.UPDATE_VARIABLE_VALUE, updatedVariable);
2020-06-23 00:09:42 +05:30
return dispatch('fetchDashboardData');
2020-05-24 23:13:21 +05:30
};
2020-07-28 23:09:34 +05:30
export const fetchVariableMetricLabelValues = ({ state, commit }, { defaultQueryParams }) => {
const { start_time, end_time } = defaultQueryParams;
const optionsRequests = [];
state.variables.forEach(variable => {
if (variable.type === VARIABLE_TYPES.metric_label_values) {
const { prometheusEndpointPath, label } = variable.options;
const optionsRequest = backOffRequest(() =>
axios.get(prometheusEndpointPath, {
params: { start_time, end_time },
}),
)
.then(({ data }) => data.data)
.then(data => {
commit(types.UPDATE_VARIABLE_METRIC_LABEL_VALUES, { variable, label, data });
})
.catch(() => {
createFlash(
sprintf(s__('Metrics|There was an error getting options for variable "%{name}".'), {
name: variable.name,
}),
);
});
optionsRequests.push(optionsRequest);
}
});
return Promise.all(optionsRequests);
};
2019-09-04 21:01:54 +05:30
// prevent babel-plugin-rewire from generating an invalid default during karma tests
export default () => {};