diff options
Diffstat (limited to 'app/assets/javascripts/monitoring/components')
19 files changed, 69 insertions, 66 deletions
diff --git a/app/assets/javascripts/monitoring/components/alert_widget.vue b/app/assets/javascripts/monitoring/components/alert_widget.vue index 8f9c181258f..bf31b86561a 100644 --- a/app/assets/javascripts/monitoring/components/alert_widget.vue +++ b/app/assets/javascripts/monitoring/components/alert_widget.vue @@ -97,12 +97,12 @@ export default { return Boolean(this.firingAlerts.length); }, firingAlerts() { - return values(this.alertsToManage).filter(alert => + return values(this.alertsToManage).filter((alert) => this.passedAlertThreshold(this.getQueryData(alert), alert), ); }, formattedFiringAlerts() { - return this.firingAlerts.map(alert => this.formatAlertSummary(alert.alert_path)); + return this.firingAlerts.map((alert) => this.formatAlertSummary(alert.alert_path)); }, configuredAlert() { return this.hasAlerts ? values(this.alertsToManage)[0].metricId : ''; @@ -116,13 +116,13 @@ export default { fetchAlertData() { this.isLoading = true; - const queriesWithAlerts = this.relevantQueries.filter(query => query.alert_path); + const queriesWithAlerts = this.relevantQueries.filter((query) => query.alert_path); return Promise.all( - queriesWithAlerts.map(query => + queriesWithAlerts.map((query) => this.service .readAlert(query.alert_path) - .then(alertAttributes => this.setAlert(alertAttributes, query.metricId)), + .then((alertAttributes) => this.setAlert(alertAttributes, query.metricId)), ), ) .then(() => { @@ -141,7 +141,7 @@ export default { }, formatAlertSummary(alertPath) { const alert = this.alertsToManage[alertPath]; - const alertQuery = this.relevantQueries.find(query => query.metricId === alert.metricId); + const alertQuery = this.relevantQueries.find((query) => query.metricId === alert.metricId); return `${alertQuery.label} ${alert.operator} ${alert.threshold}`; }, @@ -150,19 +150,19 @@ export default { switch (operator) { case OPERATORS.greaterThan: - return data.some(value => value > threshold); + return data.some((value) => value > threshold); case OPERATORS.lessThan: - return data.some(value => value < threshold); + return data.some((value) => value < threshold); case OPERATORS.equalTo: - return data.some(value => value === threshold); + return data.some((value) => value === threshold); default: return false; } }, getQueryData(alert) { - const alertQuery = this.relevantQueries.find(query => query.metricId === alert.metricId); + const alertQuery = this.relevantQueries.find((query) => query.metricId === alert.metricId); - return get(alertQuery, 'result[0].values', []).map(value => get(value, '[1]', null)); + return get(alertQuery, 'result[0].values', []).map((value) => get(value, '[1]', null)); }, showModal() { this.$root.$emit('bv::show::modal', this.modalId); @@ -179,7 +179,7 @@ export default { this.isLoading = true; this.service .createAlert(newAlert) - .then(alertAttributes => { + .then((alertAttributes) => { this.setAlert(alertAttributes, prometheus_metric_id); this.isLoading = false; this.hideModal(); @@ -194,7 +194,7 @@ export default { this.isLoading = true; this.service .updateAlert(alert, updatedAlert) - .then(alertAttributes => { + .then((alertAttributes) => { this.setAlert(alertAttributes, this.alertsToManage[alert].metricId); this.isLoading = false; this.hideModal(); diff --git a/app/assets/javascripts/monitoring/components/alert_widget_form.vue b/app/assets/javascripts/monitoring/components/alert_widget_form.vue index 71691429ece..b26941891e4 100644 --- a/app/assets/javascripts/monitoring/components/alert_widget_form.vue +++ b/app/assets/javascripts/monitoring/components/alert_widget_form.vue @@ -99,7 +99,7 @@ export default { return this.alertQuery.length ? true : null; }, currentQuery() { - return this.relevantQueries.find(query => query.metricId === this.prometheusMetricId) || {}; + return this.relevantQueries.find((query) => query.metricId === this.prometheusMetricId) || {}; }, formDisabled() { // We need a prometheusMetricId to determine whether we're @@ -151,7 +151,7 @@ export default { }, methods: { selectQuery(queryId) { - const existingAlertPath = findKey(this.alertsToManage, alert => alert.metricId === queryId); + const existingAlertPath = findKey(this.alertsToManage, (alert) => alert.metricId === queryId); const existingAlert = this.alertsToManage[existingAlertPath]; if (existingAlert) { diff --git a/app/assets/javascripts/monitoring/components/charts/annotations.js b/app/assets/javascripts/monitoring/components/charts/annotations.js index 418107c4126..aac9d2f8a01 100644 --- a/app/assets/javascripts/monitoring/components/charts/annotations.js +++ b/app/assets/javascripts/monitoring/components/charts/annotations.js @@ -52,7 +52,7 @@ export const annotationsYAxis = { * @param {Object} annotation object * @returns {Object} markLine object */ -export const parseAnnotations = annotations => +export const parseAnnotations = (annotations) => annotations.reduce( (acc, annotation) => { acc.lines.push({ @@ -87,7 +87,7 @@ export const parseAnnotations = annotations => */ export const generateAnnotationsSeries = ({ deployments = [], annotations = [] } = {}) => { // deployment data points - const data = deployments.map(deployment => { + const data = deployments.map((deployment) => { return { name: 'deployments', value: [deployment.createdAt, annotationsYAxisCoords.pos], diff --git a/app/assets/javascripts/monitoring/components/charts/anomaly.vue b/app/assets/javascripts/monitoring/components/charts/anomaly.vue index ac401c6e381..cb533c38fa0 100644 --- a/app/assets/javascripts/monitoring/components/charts/anomaly.vue +++ b/app/assets/javascripts/monitoring/components/charts/anomaly.vue @@ -1,4 +1,5 @@ <script> +import produce from 'immer'; import { flattenDeep, isNumber } from 'lodash'; import { GlChartSeriesLabel } from '@gitlab/ui/dist/charts'; import { roundOffFloat } from '~/lib/utils/common_utils'; @@ -61,7 +62,7 @@ export default { }, computed: { series() { - return this.graphData.metrics.map(metric => { + return this.graphData.metrics.map((metric) => { const values = metric.result && metric.result[0] ? metric.result[0].values : []; return { label: metric.label, @@ -77,18 +78,20 @@ export default { * This offset is the lowest value. */ yOffset() { - const values = flattenDeep(this.series.map(ser => ser.data.map(([, y]) => y))); + const values = flattenDeep(this.series.map((ser) => ser.data.map(([, y]) => y))); const min = values.length ? Math.floor(Math.min(...values)) : 0; return min < 0 ? -min : 0; }, metricData() { const originalMetricQuery = this.graphData.metrics[0]; - const metricQuery = { ...originalMetricQuery }; - metricQuery.result[0].values = metricQuery.result[0].values.map(([x, y]) => [ - x, - y + this.yOffset, - ]); + const metricQuery = produce(originalMetricQuery, (draftQuery) => { + // eslint-disable-next-line no-param-reassign + draftQuery.result[0].values = draftQuery.result[0].values.map(([x, y]) => [ + x, + y + this.yOffset, + ]); + }); return { ...this.graphData, type: panelTypes.LINE_CHART, @@ -109,7 +112,7 @@ export default { }, showSymbol: true, itemStyle: { - color: params => { + color: (params) => { if (this.isDatapointAnomaly(params.dataIndex)) { return colorValues.anomalySymbol; } @@ -128,7 +131,7 @@ export default { const yAxisWithOffset = { axisLabel: { - formatter: num => roundOffFloat(num - this.yOffset, 3).toString(), + formatter: (num) => roundOffFloat(num - this.yOffset, 3).toString(), }, }; @@ -153,7 +156,7 @@ export default { boundarySeries.push( this.makeBoundarySeries({ name: this.formatLegendLabel(upperSeries), - data: calcOffsetY(upperSeries.data, i => -this.yValue(LOWER, i)), + data: calcOffsetY(upperSeries.data, (i) => -this.yValue(LOWER, i)), areaStyle: { color: AREA_COLOR, opacity: AREA_OPACITY, diff --git a/app/assets/javascripts/monitoring/components/charts/bar.vue b/app/assets/javascripts/monitoring/components/charts/bar.vue index e1018cd5952..a4cef5ea256 100644 --- a/app/assets/javascripts/monitoring/components/charts/bar.vue +++ b/app/assets/javascripts/monitoring/components/charts/bar.vue @@ -67,12 +67,12 @@ export default { }, setSvg(name) { getSvgIconPathContent(name) - .then(path => { + .then((path) => { if (path) { this.$set(this.svgs, name, `path://${path}`); } }) - .catch(e => { + .catch((e) => { // eslint-disable-next-line no-console, @gitlab/require-i18n-strings console.error('SVG could not be rendered correctly: ', e); }); diff --git a/app/assets/javascripts/monitoring/components/charts/column.vue b/app/assets/javascripts/monitoring/components/charts/column.vue index 511f77a441b..ba947c2fa9c 100644 --- a/app/assets/javascripts/monitoring/components/charts/column.vue +++ b/app/assets/javascripts/monitoring/components/charts/column.vue @@ -90,7 +90,7 @@ export default { }, setSvg(name) { getSvgIconPathContent(name) - .then(path => { + .then((path) => { if (path) { this.$set(this.svgs, name, `path://${path}`); } diff --git a/app/assets/javascripts/monitoring/components/charts/heatmap.vue b/app/assets/javascripts/monitoring/components/charts/heatmap.vue index 7003e2d37cf..22214a76aba 100644 --- a/app/assets/javascripts/monitoring/components/charts/heatmap.vue +++ b/app/assets/javascripts/monitoring/components/charts/heatmap.vue @@ -42,10 +42,10 @@ export default { return this.graphData.y_label || ''; }, xAxisLabels() { - return this.metrics.result.map(res => Object.values(res.metric)[0]); + return this.metrics.result.map((res) => Object.values(res.metric)[0]); }, yAxisLabels() { - return this.result.values.map(val => { + return this.result.values.map((val) => { const [yLabel] = val; return formatDate(new Date(yLabel), { diff --git a/app/assets/javascripts/monitoring/components/charts/options.js b/app/assets/javascripts/monitoring/components/charts/options.js index 0cd4a02311c..163a7be6973 100644 --- a/app/assets/javascripts/monitoring/components/charts/options.js +++ b/app/assets/javascripts/monitoring/components/charts/options.js @@ -51,7 +51,7 @@ const getDataAxisOptions = ({ format, precision, name }) => { nameLocation: 'center', // same as gitlab-ui's default scale: true, axisLabel: { - formatter: val => formatter(val, precision, maxDataAxisTickLength), + formatter: (val) => formatter(val, precision, maxDataAxisTickLength), }, }; }; @@ -85,7 +85,7 @@ export const getTimeAxisOptions = ({ name: __('Time'), type: axisTypes.time, axisLabel: { - formatter: date => formatDate(date, { format, timezone }), + formatter: (date) => formatDate(date, { format, timezone }), }, axisPointer: { snap: false, @@ -109,7 +109,7 @@ export const getTooltipFormatter = ({ precision = defaultTooltipPrecision, } = {}) => { const formatter = getFormatter(format); - return num => formatter(num, precision); + return (num) => formatter(num, precision); }; // Thresholds @@ -138,9 +138,9 @@ export const getValidThresholds = ({ mode, range = {}, values = [] } = {}) => { const uniqueThresholds = uniq(values); - const numberThresholds = uniqueThresholds.filter(threshold => isFinite(threshold)); + const numberThresholds = uniqueThresholds.filter((threshold) => isFinite(threshold)); - const validThresholds = numberThresholds.filter(threshold => { + const validThresholds = numberThresholds.filter((threshold) => { let isValid; if (mode === thresholdModeTypes.PERCENTAGE) { @@ -152,7 +152,7 @@ export const getValidThresholds = ({ mode, range = {}, values = [] } = {}) => { return isValid; }); - const transformedThresholds = validThresholds.map(threshold => { + const transformedThresholds = validThresholds.map((threshold) => { let transformedThreshold; if (mode === 'percentage') { diff --git a/app/assets/javascripts/monitoring/components/charts/stacked_column.vue b/app/assets/javascripts/monitoring/components/charts/stacked_column.vue index 66b4d0d86e6..b5ae6bcfd13 100644 --- a/app/assets/javascripts/monitoring/components/charts/stacked_column.vue +++ b/app/assets/javascripts/monitoring/components/charts/stacked_column.vue @@ -68,7 +68,7 @@ export default { if (!result || result.length === 0) { return []; } - return { name, data: result[0].values.map(val => val[1]) }; + return { name, data: result[0].values.map((val) => val[1]) }; }) .slice(0, 1); }, @@ -89,7 +89,7 @@ export default { if (!result || result.length === 0) { return []; } - return result[0].values.map(val => val[0]); + return result[0].values.map((val) => val[0]); }, dataZoomConfig() { const handleIcon = this.svgs['scroll-handle']; @@ -106,7 +106,7 @@ export default { }; }, seriesNames() { - return this.graphData.metrics.map(metric => metric.label); + return this.graphData.metrics.map((metric) => metric.label); }, }, created() { @@ -115,12 +115,12 @@ export default { methods: { setSvg(name) { getSvgIconPathContent(name) - .then(path => { + .then((path) => { if (path) { this.$set(this.svgs, name, `path://${path}`); } }) - .catch(e => { + .catch((e) => { // eslint-disable-next-line no-console, @gitlab/require-i18n-strings console.error('SVG could not be rendered correctly: ', e); }); diff --git a/app/assets/javascripts/monitoring/components/charts/time_series.vue b/app/assets/javascripts/monitoring/components/charts/time_series.vue index 170c5ff7695..e9f7b11c977 100644 --- a/app/assets/javascripts/monitoring/components/charts/time_series.vue +++ b/app/assets/javascripts/monitoring/components/charts/time_series.vue @@ -11,7 +11,7 @@ import { makeDataSeries } from '~/helpers/monitor_helper'; import { graphDataValidatorForValues } from '../../utils'; import { formatDate, timezones } from '../../format_date'; -export const timestampToISODate = timestamp => new Date(timestamp).toISOString(); +export const timestampToISODate = (timestamp) => new Date(timestamp).toISOString(); const THROTTLED_DATAZOOM_WAIT = 1000; // milliseconds @@ -304,7 +304,7 @@ export default { this.tooltip.content = []; - params.seriesData.forEach(dataPoint => { + params.seriesData.forEach((dataPoint) => { if (dataPoint.value) { const [, yVal] = dataPoint.value; this.tooltip.type = dataPoint.name; @@ -327,12 +327,12 @@ export default { }, setSvg(name) { getSvgIconPathContent(name) - .then(path => { + .then((path) => { if (path) { this.$set(this.svgs, name, `path://${path}`); } }) - .catch(e => { + .catch((e) => { // eslint-disable-next-line no-console, @gitlab/require-i18n-strings console.error('SVG could not be rendered correctly: ', e); }); diff --git a/app/assets/javascripts/monitoring/components/dashboard_actions_menu.vue b/app/assets/javascripts/monitoring/components/dashboard_actions_menu.vue index 070277fe2dc..9d1926dca54 100644 --- a/app/assets/javascripts/monitoring/components/dashboard_actions_menu.vue +++ b/app/assets/javascripts/monitoring/components/dashboard_actions_menu.vue @@ -1,7 +1,7 @@ <script> import { mapState, mapGetters, mapActions } from 'vuex'; import { - GlDeprecatedButton, + GlButton, GlDropdown, GlDropdownDivider, GlDropdownItem, @@ -22,7 +22,7 @@ import { getAddMetricTrackingOptions } from '../utils'; export default { components: { - GlDeprecatedButton, + GlButton, GlDropdown, GlDropdownDivider, GlDropdownItem, @@ -178,10 +178,10 @@ export default { /> </form> <div slot="modal-footer"> - <gl-deprecated-button @click="hideAddMetricModal"> + <gl-button @click="hideAddMetricModal"> {{ __('Cancel') }} - </gl-deprecated-button> - <gl-deprecated-button + </gl-button> + <gl-button v-track-event="getAddMetricTrackingOptions()" data-testid="add-metric-modal-submit-button" :disabled="!customMetricsFormIsValid" @@ -189,7 +189,7 @@ export default { @click="submitCustomMetricsForm" > {{ __('Save changes') }} - </gl-deprecated-button> + </gl-button> </div> </gl-modal> </template> diff --git a/app/assets/javascripts/monitoring/components/dashboard_panel.vue b/app/assets/javascripts/monitoring/components/dashboard_panel.vue index ad7127d97de..2b0c3d03b8d 100644 --- a/app/assets/javascripts/monitoring/components/dashboard_panel.vue +++ b/app/assets/javascripts/monitoring/components/dashboard_panel.vue @@ -271,8 +271,8 @@ export default { methods: { getGraphAlerts(queries) { if (!this.allAlerts) return {}; - const metricIdsForChart = queries.map(q => q.metricId); - return pickBy(this.allAlerts, alert => metricIdsForChart.includes(alert.metricId)); + const metricIdsForChart = queries.map((q) => q.metricId); + return pickBy(this.allAlerts, (alert) => metricIdsForChart.includes(alert.metricId)); }, getGraphAlertValues(queries) { return Object.values(this.getGraphAlerts(queries)); @@ -346,10 +346,10 @@ export default { } }, getAlertRunbooks(queries) { - const hasRunbook = alert => Boolean(alert.runbookUrl); + const hasRunbook = (alert) => Boolean(alert.runbookUrl); const graphAlertsWithRunbooks = pickBy(this.getGraphAlerts(queries), hasRunbook); - const alertToRunbookTransform = alert => { - const alertQuery = queries.find(query => query.metricId === alert.metricId); + const alertToRunbookTransform = (alert) => { + const alertQuery = queries.find((query) => query.metricId === alert.metricId); return { key: alert.metricId, href: alert.runbookUrl, diff --git a/app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue b/app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue index 0a1b1cd2c08..bcfa1b04322 100644 --- a/app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue +++ b/app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue @@ -146,7 +146,7 @@ export default { ) " > - <template #code="{content}"> + <template #code="{ content }"> <code>{{ content }}</code> </template> </gl-sprintf> diff --git a/app/assets/javascripts/monitoring/components/duplicate_dashboard_form.vue b/app/assets/javascripts/monitoring/components/duplicate_dashboard_form.vue index db5b853d451..627af202028 100644 --- a/app/assets/javascripts/monitoring/components/duplicate_dashboard_form.vue +++ b/app/assets/javascripts/monitoring/components/duplicate_dashboard_form.vue @@ -3,7 +3,7 @@ import { GlFormGroup, GlFormInput, GlFormRadioGroup, GlFormTextarea } from '@git import { escape as esc } from 'lodash'; import { __, s__, sprintf } from '~/locale'; -const defaultFileName = dashboard => dashboard.path.split('/').reverse()[0]; +const defaultFileName = (dashboard) => dashboard.path.split('/').reverse()[0]; export default { components: { diff --git a/app/assets/javascripts/monitoring/components/duplicate_dashboard_modal.vue b/app/assets/javascripts/monitoring/components/duplicate_dashboard_modal.vue index e64afc01fd9..b87934a1db2 100644 --- a/app/assets/javascripts/monitoring/components/duplicate_dashboard_modal.vue +++ b/app/assets/javascripts/monitoring/components/duplicate_dashboard_modal.vue @@ -42,7 +42,7 @@ export default { this.loading = true; this.alert = null; this.duplicateSystemDashboard(this.form) - .then(createdDashboard => { + .then((createdDashboard) => { this.loading = false; this.alert = null; @@ -55,7 +55,7 @@ export default { this.form.branch === this.defaultBranch ? createdDashboard : this.selectedDashboard; this.$emit(events.dashboardDuplicated, dashboard); }) - .catch(error => { + .catch((error) => { this.loading = false; this.alert = error; }); diff --git a/app/assets/javascripts/monitoring/components/embeds/embed_group.vue b/app/assets/javascripts/monitoring/components/embeds/embed_group.vue index 481ba3636cb..c114ae1809f 100644 --- a/app/assets/javascripts/monitoring/components/embeds/embed_group.vue +++ b/app/assets/javascripts/monitoring/components/embeds/embed_group.vue @@ -17,7 +17,7 @@ export default { urls: { type: Array, required: true, - validator: urls => urls.length > 0, + validator: (urls) => urls.length > 0, }, }, data() { diff --git a/app/assets/javascripts/monitoring/components/embeds/metric_embed.vue b/app/assets/javascripts/monitoring/components/embeds/metric_embed.vue index 1557a49137e..2fe49152c4f 100644 --- a/app/assets/javascripts/monitoring/components/embeds/metric_embed.vue +++ b/app/assets/javascripts/monitoring/components/embeds/metric_embed.vue @@ -101,7 +101,7 @@ export default { }, }), chartHasData(chart) { - return chart.metrics.some(metric => this.metricsWithData.includes(metric.metricId)); + return chart.metrics.some((metric) => this.metricsWithData.includes(metric.metricId)); }, onSidebarMutation() { setTimeout(() => { diff --git a/app/assets/javascripts/monitoring/components/empty_state.vue b/app/assets/javascripts/monitoring/components/empty_state.vue index 5e7c9b5d906..867f7139d71 100644 --- a/app/assets/javascripts/monitoring/components/empty_state.vue +++ b/app/assets/javascripts/monitoring/components/empty_state.vue @@ -12,7 +12,7 @@ export default { selectedState: { type: String, required: true, - validator: state => Object.values(dashboardEmptyStates).includes(state), + validator: (state) => Object.values(dashboardEmptyStates).includes(state), }, documentationPath: { type: String, diff --git a/app/assets/javascripts/monitoring/components/variables/dropdown_field.vue b/app/assets/javascripts/monitoring/components/variables/dropdown_field.vue index 4e48292c48d..ff0327f5f99 100644 --- a/app/assets/javascripts/monitoring/components/variables/dropdown_field.vue +++ b/app/assets/javascripts/monitoring/components/variables/dropdown_field.vue @@ -28,7 +28,7 @@ export default { }, computed: { text() { - const selectedOpt = this.options.values?.find(opt => opt.value === this.value); + const selectedOpt = this.options.values?.find((opt) => opt.value === this.value); return selectedOpt?.text || this.value; }, }, |