diff options
author | Mike Greiling <mike@pixelcog.com> | 2019-06-12 19:17:37 +0300 |
---|---|---|
committer | Mike Greiling <mike@pixelcog.com> | 2019-06-12 19:17:37 +0300 |
commit | eabd1b9e6ad53b3b8e01e64a1425ad7c87b6361b (patch) | |
tree | a9cf69a2b27d67c8c29f5c64ccca73a94c21313f /app/assets | |
parent | ac01310fddc4d3d52c575e15b1e7589e02186312 (diff) | |
parent | fba991dc482f726f7f5afd0ef4facbc1552e8d3c (diff) |
Merge branch 'prom-api-2' into 'master'
Switch charts to Prometheus API endpoint CE-2
See merge request gitlab-org/gitlab-ce!29226
Diffstat (limited to 'app/assets')
8 files changed, 79 insertions, 7 deletions
diff --git a/app/assets/javascripts/lib/utils/invalid_url.js b/app/assets/javascripts/lib/utils/invalid_url.js new file mode 100644 index 00000000000..481bd059fc9 --- /dev/null +++ b/app/assets/javascripts/lib/utils/invalid_url.js @@ -0,0 +1,6 @@ +/** + * Invalid URL that ensures we don't make a network request + * Can be used as a default value for URLs. Using an empty + * string can still result in request being made to the current page + */ +export default 'https://invalid'; diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue index b0de142d9d8..ef69a9e1b7e 100644 --- a/app/assets/javascripts/monitoring/components/dashboard.vue +++ b/app/assets/javascripts/monitoring/components/dashboard.vue @@ -6,6 +6,7 @@ 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 invalidUrl from '~/lib/utils/invalid_url'; import MonitorAreaChart from './charts/area.vue'; import GraphGroup from './graph_group.vue'; import EmptyState from './empty_state.vue'; @@ -111,6 +112,11 @@ export default { type: String, required: true, }, + dashboardEndpoint: { + type: String, + required: false, + default: invalidUrl, + }, }, data() { return { @@ -138,6 +144,7 @@ export default { metricsEndpoint: this.metricsEndpoint, environmentsEndpoint: this.environmentsEndpoint, deploymentsEndpoint: this.deploymentEndpoint, + dashboardEndpoint: this.dashboardEndpoint, }); this.timeWindows = timeWindows; diff --git a/app/assets/javascripts/monitoring/monitoring_bundle.js b/app/assets/javascripts/monitoring/monitoring_bundle.js index 62c0f44c1e6..1d33537b3b2 100644 --- a/app/assets/javascripts/monitoring/monitoring_bundle.js +++ b/app/assets/javascripts/monitoring/monitoring_bundle.js @@ -7,6 +7,11 @@ export default (props = {}) => { const el = document.getElementById('prometheus-graphs'); if (el && el.dataset) { + store.dispatch( + 'monitoringDashboard/setDashboardEnabled', + gon.features.environmentMetricsUsePrometheusEndpoint, + ); + // eslint-disable-next-line no-new new Vue({ el, diff --git a/app/assets/javascripts/monitoring/stores/actions.js b/app/assets/javascripts/monitoring/stores/actions.js index 63c23e8449d..b336f12eab2 100644 --- a/app/assets/javascripts/monitoring/stores/actions.js +++ b/app/assets/javascripts/monitoring/stores/actions.js @@ -35,6 +35,20 @@ export const setEndpoints = ({ commit }, endpoints) => { commit(types.SET_ENDPOINTS, endpoints); }; +export const setDashboardEnabled = ({ commit }, enabled) => { + commit(types.SET_DASHBOARD_ENABLED, enabled); +}; + +export const requestMetricsDashboard = ({ commit }) => { + commit(types.REQUEST_METRICS_DATA); +}; +export const receiveMetricsDashboardSuccess = ({ commit }, { response }) => { + commit(types.RECEIVE_METRICS_DATA_SUCCESS, response.dashboard.panel_groups); +}; +export const receiveMetricsDashboardFailure = ({ commit }, error) => { + commit(types.RECEIVE_METRICS_DATA_FAILURE, error); +}; + export const requestMetricsData = ({ commit }) => commit(types.REQUEST_METRICS_DATA); export const receiveMetricsDataSuccess = ({ commit }, data) => commit(types.RECEIVE_METRICS_DATA_SUCCESS, data); @@ -56,6 +70,10 @@ export const fetchData = ({ dispatch }, params) => { }; export const fetchMetricsData = ({ state, dispatch }, params) => { + if (state.useDashboardEndpoint) { + return dispatch('fetchDashboard', params); + } + dispatch('requestMetricsData'); return backOffRequest(() => axios.get(state.metricsEndpoint, { params })) @@ -73,6 +91,21 @@ export const fetchMetricsData = ({ state, dispatch }, params) => { }); }; +export const fetchDashboard = ({ state, dispatch }, params) => { + dispatch('requestMetricsDashboard'); + + return axios + .get(state.dashboardEndpoint, { params }) + .then(resp => resp.data) + .then(response => { + dispatch('receiveMetricsDashboardSuccess', { response }); + }) + .catch(error => { + dispatch('receiveMetricsDashboardFailure', error); + createFlash(s__('Metrics|There was an error while retrieving metrics')); + }); +}; + export const fetchDeploymentsData = ({ state, dispatch }) => { if (!state.deploymentEndpoint) { return Promise.resolve([]); diff --git a/app/assets/javascripts/monitoring/stores/mutation_types.js b/app/assets/javascripts/monitoring/stores/mutation_types.js index 3fd9e07fa8b..09fdc0b5b05 100644 --- a/app/assets/javascripts/monitoring/stores/mutation_types.js +++ b/app/assets/javascripts/monitoring/stores/mutation_types.js @@ -8,5 +8,6 @@ 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_DASHBOARD_ENABLED = 'SET_DASHBOARD_ENABLED'; 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 index c1779333d75..c2b40472b0a 100644 --- a/app/assets/javascripts/monitoring/stores/mutations.js +++ b/app/assets/javascripts/monitoring/stores/mutations.js @@ -7,10 +7,24 @@ export default { state.showEmptyState = true; }, [types.RECEIVE_METRICS_DATA_SUCCESS](state, groupData) { - state.groups = groupData.map(group => ({ - ...group, - metrics: normalizeMetrics(sortMetrics(group.metrics)), - })); + state.groups = groupData.map(group => { + let { metrics } = group; + + // for backwards compatibility, and to limit Vue template changes: + // for each group alias panels to metrics + // for each panel alias metrics to queries + if (state.useDashboardEndpoint) { + metrics = group.panels.map(panel => ({ + ...panel, + queries: panel.metrics, + })); + } + + return { + ...group, + metrics: normalizeMetrics(sortMetrics(metrics)), + }; + }); if (!state.groups.length) { state.emptyState = 'noData'; @@ -38,6 +52,10 @@ export default { state.metricsEndpoint = endpoints.metricsEndpoint; state.environmentsEndpoint = endpoints.environmentsEndpoint; state.deploymentsEndpoint = endpoints.deploymentsEndpoint; + state.dashboardEndpoint = endpoints.dashboardEndpoint; + }, + [types.SET_DASHBOARD_ENABLED](state, enabled) { + state.useDashboardEndpoint = enabled; }, [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 index 5103122612a..b3649a3852b 100644 --- a/app/assets/javascripts/monitoring/stores/state.js +++ b/app/assets/javascripts/monitoring/stores/state.js @@ -4,6 +4,8 @@ export default () => ({ metricsEndpoint: null, environmentsEndpoint: null, deploymentsEndpoint: null, + dashboardEndpoint: null, + useDashboardEndpoint: false, emptyState: 'gettingStarted', showEmptyState: true, groups: [], diff --git a/app/assets/javascripts/monitoring/stores/utils.js b/app/assets/javascripts/monitoring/stores/utils.js index 9216554ecbf..10537600240 100644 --- a/app/assets/javascripts/monitoring/stores/utils.js +++ b/app/assets/javascripts/monitoring/stores/utils.js @@ -66,9 +66,9 @@ export const normalizeMetrics = metrics => { ...query, // custom metrics do not require a label, so we should ensure this attribute is defined label: query.label || metric.y_label, - result: query.result.map(result => ({ - ...result, - values: result.values.map(([timestamp, value]) => [ + result: (query.result || []).map(timeSeries => ({ + ...timeSeries, + values: timeSeries.values.map(([timestamp, value]) => [ new Date(timestamp * 1000).toISOString(), Number(value), ]), |