diff options
Diffstat (limited to 'app/assets/javascripts/monitoring')
5 files changed, 74 insertions, 41 deletions
diff --git a/app/assets/javascripts/monitoring/components/alert_widget.vue b/app/assets/javascripts/monitoring/components/alert_widget.vue index 9724ef9950b..c18c13f2574 100644 --- a/app/assets/javascripts/monitoring/components/alert_widget.vue +++ b/app/assets/javascripts/monitoring/components/alert_widget.vue @@ -1,7 +1,7 @@ <script> import { GlBadge, GlLoadingIcon, GlModalDirective, GlIcon, GlTooltip, GlSprintf } from '@gitlab/ui'; import { values, get } from 'lodash'; -import { deprecatedCreateFlash as createFlash } from '~/flash'; +import createFlash from '~/flash'; import { BV_SHOW_MODAL, BV_HIDE_MODAL } from '~/lib/utils/constants'; import { s__ } from '~/locale'; import { OPERATORS } from '../constants'; @@ -130,7 +130,9 @@ export default { this.isLoading = false; }) .catch(() => { - createFlash(s__('PrometheusAlerts|Error fetching alert')); + createFlash({ + message: s__('PrometheusAlerts|Error fetching alert'), + }); this.isLoading = false; }); }, diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue index 05e7fb7a3e9..be9f104b81e 100644 --- a/app/assets/javascripts/monitoring/components/dashboard.vue +++ b/app/assets/javascripts/monitoring/components/dashboard.vue @@ -3,7 +3,7 @@ import { GlButton, GlModalDirective, GlTooltipDirective, GlIcon } from '@gitlab/ import Mousetrap from 'mousetrap'; import VueDraggable from 'vuedraggable'; import { mapActions, mapState, mapGetters } from 'vuex'; -import { deprecatedCreateFlash as createFlash } from '~/flash'; +import createFlash from '~/flash'; import invalidUrl from '~/lib/utils/invalid_url'; import { ESC_KEY } from '~/lib/utils/keys'; import { mergeUrlParams, updateHistory } from '~/lib/utils/url_utility'; @@ -11,6 +11,7 @@ import { s__ } from '~/locale'; import AlertsDeprecationWarning from '~/vue_shared/components/alerts_deprecation_warning.vue'; import { defaultTimeRange } from '~/vue_shared/constants'; import TrackEventDirective from '~/vue_shared/directives/track_event'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { metricStates, keyboardShortcutKeys } from '../constants'; import { timeRangeFromUrl, @@ -46,6 +47,7 @@ export default { GlTooltip: GlTooltipDirective, TrackEvent: TrackEventDirective, }, + mixins: [glFeatureFlagMixin()], props: { hasMetrics: { type: Boolean, @@ -176,11 +178,11 @@ export default { this.setExpandedPanel(expandedPanel); } } catch { - createFlash( - s__( + createFlash({ + message: s__( 'Metrics|Link contains invalid chart information, please verify the link to see the expanded panel.', ), - ); + }); } }, expandedPanel: { @@ -201,12 +203,13 @@ export default { * This watcher is set for future SPA behaviour of the dashboard */ if (hasWarnings) { - createFlash( - s__( + createFlash({ + message: s__( 'Metrics|Your dashboard schema is invalid. Edit the dashboard to correct the YAML schema.', ), - 'warning', - ); + + type: 'warning', + }); } }, }, @@ -318,11 +321,11 @@ export default { this.isRearrangingPanels = isRearrangingPanels; }, onDateTimePickerInvalid() { - createFlash( - s__( + createFlash({ + message: s__( 'Metrics|Link contains an invalid time window, please verify the link to see the requested time range.', ), - ); + }); // As a fallback, switch to default time range instead this.selectedTimeRange = defaultTimeRange; }, @@ -396,7 +399,7 @@ export default { <template> <div class="prometheus-graphs" data-qa-selector="prometheus_graphs"> - <alerts-deprecation-warning /> + <alerts-deprecation-warning v-if="!glFeatures.managedAlertsDeprecation" /> <dashboard-header v-if="showHeader" diff --git a/app/assets/javascripts/monitoring/components/dashboard_panel.vue b/app/assets/javascripts/monitoring/components/dashboard_panel.vue index 55e73d17842..202d18ac721 100644 --- a/app/assets/javascripts/monitoring/components/dashboard_panel.vue +++ b/app/assets/javascripts/monitoring/components/dashboard_panel.vue @@ -21,6 +21,7 @@ import invalidUrl from '~/lib/utils/invalid_url'; import { relativePathToAbsolute, getBaseURL, visitUrl, isSafeURL } from '~/lib/utils/url_utility'; import { __, n__ } from '~/locale'; import TrackEventDirective from '~/vue_shared/directives/track_event'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { panelTypes } from '../constants'; import { graphDataToCsv } from '../csv_export'; @@ -61,6 +62,7 @@ export default { GlTooltip: GlTooltipDirective, TrackEvent: TrackEventDirective, }, + mixins: [glFeatureFlagMixin()], props: { clipboardText: { type: String, @@ -258,7 +260,8 @@ export default { this.prometheusAlertsAvailable && this.alertsEndpoint && this.graphData && - this.hasMetricsInDb + this.hasMetricsInDb && + !this.glFeatures.managedAlertsDeprecation ); }, alertModalId() { diff --git a/app/assets/javascripts/monitoring/stores/actions.js b/app/assets/javascripts/monitoring/stores/actions.js index a0b4fd0b608..215b4b7b2d7 100644 --- a/app/assets/javascripts/monitoring/stores/actions.js +++ b/app/assets/javascripts/monitoring/stores/actions.js @@ -1,5 +1,5 @@ import * as Sentry from '@sentry/browser'; -import { deprecatedCreateFlash as createFlash } from '~/flash'; +import createFlash from '~/flash'; import axios from '~/lib/utils/axios_utils'; import { convertToFixedRange } from '~/lib/utils/datetime_range'; import { convertObjectPropsToCamelCase } from '../../lib/utils/common_utils'; @@ -134,15 +134,17 @@ export const fetchDashboard = ({ state, commit, dispatch, getters }) => { if (state.showErrorBanner) { if (error.response.data && error.response.data.message) { const { message } = error.response.data; - createFlash( - sprintf( + createFlash({ + message: sprintf( s__('Metrics|There was an error while retrieving metrics. %{message}'), { message }, false, ), - ); + }); } else { - createFlash(s__('Metrics|There was an error while retrieving metrics')); + createFlash({ + message: s__('Metrics|There was an error while retrieving metrics'), + }); } } }); @@ -174,7 +176,10 @@ export const fetchDashboardData = ({ state, dispatch, getters }) => { dispatch('fetchDeploymentsData'); if (!state.timeRange) { - createFlash(s__(`Metrics|Invalid time range, please verify.`), 'warning'); + createFlash({ + message: s__(`Metrics|Invalid time range, please verify.`), + type: 'warning', + }); return Promise.reject(); } @@ -202,7 +207,10 @@ export const fetchDashboardData = ({ state, dispatch, getters }) => { }); }) .catch(() => { - createFlash(s__(`Metrics|There was an error while retrieving metrics`), 'warning'); + createFlash({ + message: s__(`Metrics|There was an error while retrieving metrics`), + type: 'warning', + }); }); }; @@ -254,7 +262,9 @@ export const fetchDeploymentsData = ({ state, dispatch }) => { .then((resp) => resp.data) .then((response) => { if (!response || !response.deployments) { - createFlash(s__('Metrics|Unexpected deployment data response from prometheus endpoint')); + createFlash({ + message: s__('Metrics|Unexpected deployment data response from prometheus endpoint'), + }); } dispatch('receiveDeploymentsDataSuccess', response.deployments); @@ -262,7 +272,9 @@ export const fetchDeploymentsData = ({ state, dispatch }) => { .catch((error) => { Sentry.captureException(error); dispatch('receiveDeploymentsDataFailure'); - createFlash(s__('Metrics|There was an error getting deployment information.')); + createFlash({ + message: s__('Metrics|There was an error getting deployment information.'), + }); }); }; export const receiveDeploymentsDataSuccess = ({ commit }, data) => { @@ -290,9 +302,11 @@ export const fetchEnvironmentsData = ({ state, dispatch }) => { ) .then((environments) => { if (!environments) { - createFlash( - s__('Metrics|There was an error fetching the environments data, please try again'), - ); + createFlash({ + message: s__( + 'Metrics|There was an error fetching the environments data, please try again', + ), + }); } dispatch('receiveEnvironmentsDataSuccess', environments); @@ -300,7 +314,9 @@ export const fetchEnvironmentsData = ({ state, dispatch }) => { .catch((err) => { Sentry.captureException(err); dispatch('receiveEnvironmentsDataFailure'); - createFlash(s__('Metrics|There was an error getting environments information.')); + createFlash({ + message: s__('Metrics|There was an error getting environments information.'), + }); }); }; export const requestEnvironmentsData = ({ commit }) => { @@ -332,7 +348,9 @@ export const fetchAnnotations = ({ state, dispatch, getters }) => { .then(parseAnnotationsResponse) .then((annotations) => { if (!annotations) { - createFlash(s__('Metrics|There was an error fetching annotations. Please try again.')); + createFlash({ + message: s__('Metrics|There was an error fetching annotations. Please try again.'), + }); } dispatch('receiveAnnotationsSuccess', annotations); @@ -340,7 +358,9 @@ export const fetchAnnotations = ({ state, dispatch, getters }) => { .catch((err) => { Sentry.captureException(err); dispatch('receiveAnnotationsFailure'); - createFlash(s__('Metrics|There was an error getting annotations information.')); + createFlash({ + message: s__('Metrics|There was an error getting annotations information.'), + }); }); }; @@ -377,9 +397,11 @@ export const fetchDashboardValidationWarnings = ({ state, dispatch, getters }) = .catch((err) => { Sentry.captureException(err); dispatch('receiveDashboardValidationWarningsFailure'); - createFlash( - s__('Metrics|There was an error getting dashboard validation warnings information.'), - ); + createFlash({ + message: s__( + 'Metrics|There was an error getting dashboard validation warnings information.', + ), + }); }); }; @@ -480,11 +502,14 @@ export const fetchVariableMetricLabelValues = ({ state, commit }, { defaultQuery 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, - }), - ); + createFlash({ + message: sprintf( + s__('Metrics|There was an error getting options for variable "%{name}".'), + { + name: variable.name, + }, + ), + }); }); optionsRequests.push(optionsRequest); } diff --git a/app/assets/javascripts/monitoring/utils.js b/app/assets/javascripts/monitoring/utils.js index 8adf1862af2..74b777d7b44 100644 --- a/app/assets/javascripts/monitoring/utils.js +++ b/app/assets/javascripts/monitoring/utils.js @@ -175,7 +175,7 @@ export const graphDataValidatorForAnomalyValues = (graphData) => { * Returns `null` if no parameters form a time range. */ export const timeRangeFromUrl = (search = window.location.search) => { - const params = queryToObject(search); + const params = queryToObject(search, { legacySpacesDecode: true }); return timeRangeFromParams(params); }; @@ -228,7 +228,7 @@ export const convertVariablesForURL = (variables) => * @returns {Object} The custom variables defined by the user in the URL */ export const templatingVariablesFromUrl = (search = window.location.search) => { - const params = queryToObject(search); + const params = queryToObject(search, { legacySpacesDecode: true }); // pick the params with variable prefix const paramsWithVars = pickBy(params, (val, key) => key.startsWith(VARIABLE_PREFIX)); // remove the prefix before storing in the Vuex store @@ -289,7 +289,7 @@ export const timeRangeToUrl = (timeRange, url = window.location.href) => { * @throws Will throw an error if Panel cannot be located. */ export const expandedPanelPayloadFromUrl = (dashboard, search = window.location.search) => { - const params = queryToObject(search); + const params = queryToObject(search, { legacySpacesDecode: true }); // Search for the panel if any of the search params is identified if (params.group || params.title || params.y_label) { |