summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/monitoring
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/javascripts/monitoring')
-rw-r--r--app/assets/javascripts/monitoring/components/alert_widget.vue11
-rw-r--r--app/assets/javascripts/monitoring/components/alert_widget_form.vue8
-rw-r--r--app/assets/javascripts/monitoring/components/charts/anomaly.vue4
-rw-r--r--app/assets/javascripts/monitoring/components/charts/column.vue4
-rw-r--r--app/assets/javascripts/monitoring/components/charts/gauge.vue2
-rw-r--r--app/assets/javascripts/monitoring/components/charts/heatmap.vue2
-rw-r--r--app/assets/javascripts/monitoring/components/charts/options.js2
-rw-r--r--app/assets/javascripts/monitoring/components/charts/single_stat.vue16
-rw-r--r--app/assets/javascripts/monitoring/components/charts/stacked_column.vue4
-rw-r--r--app/assets/javascripts/monitoring/components/charts/time_series.vue12
-rw-r--r--app/assets/javascripts/monitoring/components/create_dashboard_modal.vue2
-rw-r--r--app/assets/javascripts/monitoring/components/dashboard.vue31
-rw-r--r--app/assets/javascripts/monitoring/components/dashboard_actions_menu.vue10
-rw-r--r--app/assets/javascripts/monitoring/components/dashboard_header.vue15
-rw-r--r--app/assets/javascripts/monitoring/components/dashboard_panel.vue28
-rw-r--r--app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue2
-rw-r--r--app/assets/javascripts/monitoring/components/dashboards_dropdown.vue2
-rw-r--r--app/assets/javascripts/monitoring/components/duplicate_dashboard_modal.vue2
-rw-r--r--app/assets/javascripts/monitoring/components/embeds/embed_group.vue4
-rw-r--r--app/assets/javascripts/monitoring/components/embeds/metric_embed.vue4
-rw-r--r--app/assets/javascripts/monitoring/components/links_section.vue6
-rw-r--r--app/assets/javascripts/monitoring/components/refresh_button.vue4
-rw-r--r--app/assets/javascripts/monitoring/components/variables_section.vue4
-rw-r--r--app/assets/javascripts/monitoring/constants.js2
-rw-r--r--app/assets/javascripts/monitoring/monitoring_app.js23
-rw-r--r--app/assets/javascripts/monitoring/pages/panel_new_page.vue4
-rw-r--r--app/assets/javascripts/monitoring/requests/index.js2
-rw-r--r--app/assets/javascripts/monitoring/stores/actions.js24
-rw-r--r--app/assets/javascripts/monitoring/stores/mutations.js8
-rw-r--r--app/assets/javascripts/monitoring/stores/state.js4
-rw-r--r--app/assets/javascripts/monitoring/stores/utils.js8
-rw-r--r--app/assets/javascripts/monitoring/stores/variable_mapping.js2
-rw-r--r--app/assets/javascripts/monitoring/utils.js12
33 files changed, 145 insertions, 123 deletions
diff --git a/app/assets/javascripts/monitoring/components/alert_widget.vue b/app/assets/javascripts/monitoring/components/alert_widget.vue
index bf31b86561a..9724ef9950b 100644
--- a/app/assets/javascripts/monitoring/components/alert_widget.vue
+++ b/app/assets/javascripts/monitoring/components/alert_widget.vue
@@ -1,12 +1,13 @@
<script>
import { GlBadge, GlLoadingIcon, GlModalDirective, GlIcon, GlTooltip, GlSprintf } from '@gitlab/ui';
import { values, get } from 'lodash';
-import { s__ } from '~/locale';
import { deprecatedCreateFlash as createFlash } from '~/flash';
-import AlertWidgetForm from './alert_widget_form.vue';
+import { BV_SHOW_MODAL, BV_HIDE_MODAL } from '~/lib/utils/constants';
+import { s__ } from '~/locale';
+import { OPERATORS } from '../constants';
import AlertsService from '../services/alerts_service';
import { alertsValidator, queriesValidator } from '../validators';
-import { OPERATORS } from '../constants';
+import AlertWidgetForm from './alert_widget_form.vue';
export default {
components: {
@@ -165,11 +166,11 @@ export default {
return get(alertQuery, 'result[0].values', []).map((value) => get(value, '[1]', null));
},
showModal() {
- this.$root.$emit('bv::show::modal', this.modalId);
+ this.$root.$emit(BV_SHOW_MODAL, this.modalId);
},
hideModal() {
this.errorMessage = null;
- this.$root.$emit('bv::hide::modal', this.modalId);
+ this.$root.$emit(BV_HIDE_MODAL, this.modalId);
},
handleSetApiAction(apiAction) {
this.apiAction = apiAction;
diff --git a/app/assets/javascripts/monitoring/components/alert_widget_form.vue b/app/assets/javascripts/monitoring/components/alert_widget_form.vue
index b26941891e4..68fd3e256ec 100644
--- a/app/assets/javascripts/monitoring/components/alert_widget_form.vue
+++ b/app/assets/javascripts/monitoring/components/alert_widget_form.vue
@@ -1,6 +1,4 @@
<script>
-import { isEmpty, findKey } from 'lodash';
-import Vue from 'vue';
import {
GlLink,
GlButton,
@@ -13,12 +11,14 @@ import {
GlTooltipDirective,
GlIcon,
} from '@gitlab/ui';
+import { isEmpty, findKey } from 'lodash';
+import Vue from 'vue';
import { __, s__ } from '~/locale';
-import Translate from '~/vue_shared/translate';
import TrackEventDirective from '~/vue_shared/directives/track_event';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { alertsValidator, queriesValidator } from '../validators';
+import Translate from '~/vue_shared/translate';
import { OPERATORS } from '../constants';
+import { alertsValidator, queriesValidator } from '../validators';
Vue.use(Translate);
diff --git a/app/assets/javascripts/monitoring/components/charts/anomaly.vue b/app/assets/javascripts/monitoring/components/charts/anomaly.vue
index cb533c38fa0..8569a67da34 100644
--- a/app/assets/javascripts/monitoring/components/charts/anomaly.vue
+++ b/app/assets/javascripts/monitoring/components/charts/anomaly.vue
@@ -1,9 +1,9 @@
<script>
+import { GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
import produce from 'immer';
import { flattenDeep, isNumber } from 'lodash';
-import { GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
-import { roundOffFloat } from '~/lib/utils/common_utils';
import { hexToRgb } from '~/lib/utils/color_utils';
+import { roundOffFloat } from '~/lib/utils/common_utils';
import { areaOpacityValues, symbolSizes, colorValues, panelTypes } from '../../constants';
import { graphDataValidatorForAnomalyValues } from '../../utils';
import MonitorTimeSeriesChart from './time_series.vue';
diff --git a/app/assets/javascripts/monitoring/components/charts/column.vue b/app/assets/javascripts/monitoring/components/charts/column.vue
index ba947c2fa9c..37251af2049 100644
--- a/app/assets/javascripts/monitoring/components/charts/column.vue
+++ b/app/assets/javascripts/monitoring/components/charts/column.vue
@@ -1,12 +1,12 @@
<script>
import { GlResizeObserverDirective } from '@gitlab/ui';
import { GlColumnChart } from '@gitlab/ui/dist/charts';
+import { makeDataSeries } from '~/helpers/monitor_helper';
import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
import { chartHeight } from '../../constants';
-import { makeDataSeries } from '~/helpers/monitor_helper';
+import { timezones } from '../../format_date';
import { graphDataValidatorForValues } from '../../utils';
import { getTimeAxisOptions, getYAxisOptions, getChartGrid } from './options';
-import { timezones } from '../../format_date';
export default {
components: {
diff --git a/app/assets/javascripts/monitoring/components/charts/gauge.vue b/app/assets/javascripts/monitoring/components/charts/gauge.vue
index 63fa60bbdf0..461ff06be72 100644
--- a/app/assets/javascripts/monitoring/components/charts/gauge.vue
+++ b/app/assets/javascripts/monitoring/components/charts/gauge.vue
@@ -2,9 +2,9 @@
import { GlResizeObserverDirective } from '@gitlab/ui';
import { GlGaugeChart } from '@gitlab/ui/dist/charts';
import { isFinite, isArray, isInteger } from 'lodash';
+import { getFormatter, SUPPORTED_FORMATS } from '~/lib/utils/unit_format';
import { graphDataValidatorForValues } from '../../utils';
import { getValidThresholds } from './options';
-import { getFormatter, SUPPORTED_FORMATS } from '~/lib/utils/unit_format';
export default {
components: {
diff --git a/app/assets/javascripts/monitoring/components/charts/heatmap.vue b/app/assets/javascripts/monitoring/components/charts/heatmap.vue
index 22214a76aba..ed888ef022c 100644
--- a/app/assets/javascripts/monitoring/components/charts/heatmap.vue
+++ b/app/assets/javascripts/monitoring/components/charts/heatmap.vue
@@ -1,8 +1,8 @@
<script>
import { GlResizeObserverDirective } from '@gitlab/ui';
import { GlHeatmap } from '@gitlab/ui/dist/charts';
-import { graphDataValidatorForValues } from '../../utils';
import { formatDate, timezones, formats } from '../../format_date';
+import { graphDataValidatorForValues } from '../../utils';
export default {
components: {
diff --git a/app/assets/javascripts/monitoring/components/charts/options.js b/app/assets/javascripts/monitoring/components/charts/options.js
index 163a7be6973..643550a7144 100644
--- a/app/assets/javascripts/monitoring/components/charts/options.js
+++ b/app/assets/javascripts/monitoring/components/charts/options.js
@@ -1,8 +1,8 @@
import { isFinite, uniq, sortBy, includes } from 'lodash';
import { SUPPORTED_FORMATS, getFormatter } from '~/lib/utils/unit_format';
import { __, s__ } from '~/locale';
-import { formatDate, timezones, formats } from '../../format_date';
import { thresholdModeTypes } from '../../constants';
+import { formatDate, timezones, formats } from '../../format_date';
const yAxisBoundaryGap = [0.1, 0.1];
/**
diff --git a/app/assets/javascripts/monitoring/components/charts/single_stat.vue b/app/assets/javascripts/monitoring/components/charts/single_stat.vue
index a8ab41ebf26..6d6a7af600b 100644
--- a/app/assets/javascripts/monitoring/components/charts/single_stat.vue
+++ b/app/assets/javascripts/monitoring/components/charts/single_stat.vue
@@ -1,7 +1,7 @@
<script>
import { GlSingleStat } from '@gitlab/ui/dist/charts';
-import { __ } from '~/locale';
import { SUPPORTED_FORMATS, getFormatter } from '~/lib/utils/unit_format';
+import { __ } from '~/locale';
import { graphDataValidatorForValues } from '../../utils';
const defaultPrecision = 2;
@@ -45,12 +45,18 @@ export default {
}
if (this.graphData?.maxValue) {
- formatter = getFormatter(SUPPORTED_FORMATS.percent);
- return formatter(this.queryResult / Number(this.graphData.maxValue), defaultPrecision);
+ formatter = getFormatter(SUPPORTED_FORMATS.number);
+ return formatter(
+ (this.queryResult / Number(this.graphData.maxValue)) * 100,
+ defaultPrecision,
+ );
}
formatter = getFormatter(SUPPORTED_FORMATS.number);
- return `${formatter(this.queryResult, defaultPrecision)}${this.queryInfo.unit ?? ''}`;
+ return `${formatter(this.queryResult, defaultPrecision)}`;
+ },
+ unit() {
+ return this.graphData?.maxValue ? '%' : this.queryInfo.unit;
},
graphTitle() {
return this.queryInfo.label;
@@ -60,6 +66,6 @@ export default {
</script>
<template>
<div>
- <gl-single-stat :value="statValue" :title="graphTitle" variant="success" />
+ <gl-single-stat :value="statValue" :title="graphTitle" :unit="unit" variant="success" />
</div>
</template>
diff --git a/app/assets/javascripts/monitoring/components/charts/stacked_column.vue b/app/assets/javascripts/monitoring/components/charts/stacked_column.vue
index b5ae6bcfd13..a53f899f752 100644
--- a/app/assets/javascripts/monitoring/components/charts/stacked_column.vue
+++ b/app/assets/javascripts/monitoring/components/charts/stacked_column.vue
@@ -2,11 +2,11 @@
import { GlResizeObserverDirective } from '@gitlab/ui';
import { GlStackedColumnChart } from '@gitlab/ui/dist/charts';
import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
-import { chartHeight, legendLayoutTypes } from '../../constants';
import { s__ } from '~/locale';
+import { chartHeight, legendLayoutTypes } from '../../constants';
+import { formats, timezones } from '../../format_date';
import { graphDataValidatorForValues } from '../../utils';
import { getTimeAxisOptions, axisTypes } from './options';
-import { formats, timezones } from '../../format_date';
export default {
components: {
diff --git a/app/assets/javascripts/monitoring/components/charts/time_series.vue b/app/assets/javascripts/monitoring/components/charts/time_series.vue
index e9f7b11c977..99008d047af 100644
--- a/app/assets/javascripts/monitoring/components/charts/time_series.vue
+++ b/app/assets/javascripts/monitoring/components/charts/time_series.vue
@@ -1,15 +1,15 @@
<script>
-import { isEmpty, omit, throttle } from 'lodash';
import { GlLink, GlTooltip, GlResizeObserverDirective, GlIcon } from '@gitlab/ui';
import { GlAreaChart, GlLineChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
-import { s__ } from '~/locale';
+import { isEmpty, omit, throttle } from 'lodash';
+import { makeDataSeries } from '~/helpers/monitor_helper';
import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
+import { s__ } from '~/locale';
import { panelTypes, chartHeight, lineTypes, lineWidths, legendLayoutTypes } from '../../constants';
-import { getYAxisOptions, getTimeAxisOptions, getChartGrid, getTooltipFormatter } from './options';
-import { annotationsYAxis, generateAnnotationsSeries } from './annotations';
-import { makeDataSeries } from '~/helpers/monitor_helper';
-import { graphDataValidatorForValues } from '../../utils';
import { formatDate, timezones } from '../../format_date';
+import { graphDataValidatorForValues } from '../../utils';
+import { annotationsYAxis, generateAnnotationsSeries } from './annotations';
+import { getYAxisOptions, getTimeAxisOptions, getChartGrid, getTooltipFormatter } from './options';
export const timestampToISODate = (timestamp) => new Date(timestamp).toISOString();
diff --git a/app/assets/javascripts/monitoring/components/create_dashboard_modal.vue b/app/assets/javascripts/monitoring/components/create_dashboard_modal.vue
index 74799002b17..bfaf8b2bd28 100644
--- a/app/assets/javascripts/monitoring/components/create_dashboard_modal.vue
+++ b/app/assets/javascripts/monitoring/components/create_dashboard_modal.vue
@@ -1,7 +1,7 @@
<script>
import { GlButton, GlModal, GlSprintf } from '@gitlab/ui';
-import { s__ } from '~/locale';
import { isSafeURL } from '~/lib/utils/url_utility';
+import { s__ } from '~/locale';
export default {
components: { GlButton, GlModal, GlSprintf },
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 16c2c87a4b7..bfb18206b62 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -1,31 +1,30 @@
<script>
-import { mapActions, mapState, mapGetters } from 'vuex';
-import VueDraggable from 'vuedraggable';
-import Mousetrap from 'mousetrap';
import { GlButton, GlModalDirective, GlTooltipDirective, GlIcon } from '@gitlab/ui';
-import DashboardHeader from './dashboard_header.vue';
-import DashboardPanel from './dashboard_panel.vue';
-import { s__ } from '~/locale';
+import Mousetrap from 'mousetrap';
+import VueDraggable from 'vuedraggable';
+import { mapActions, mapState, mapGetters } from 'vuex';
import { deprecatedCreateFlash as 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';
-import invalidUrl from '~/lib/utils/invalid_url';
-
-import GraphGroup from './graph_group.vue';
-import EmptyState from './empty_state.vue';
-import GroupEmptyState from './group_empty_state.vue';
-import VariablesSection from './variables_section.vue';
-import LinksSection from './links_section.vue';
-
+import { s__ } from '~/locale';
+import { defaultTimeRange } from '~/vue_shared/constants';
import TrackEventDirective from '~/vue_shared/directives/track_event';
+import { metricStates, keyboardShortcutKeys } from '../constants';
import {
timeRangeFromUrl,
panelToUrl,
expandedPanelPayloadFromUrl,
convertVariablesForURL,
} from '../utils';
-import { metricStates, keyboardShortcutKeys } from '../constants';
-import { defaultTimeRange } from '~/vue_shared/constants';
+import DashboardHeader from './dashboard_header.vue';
+import DashboardPanel from './dashboard_panel.vue';
+
+import EmptyState from './empty_state.vue';
+import GraphGroup from './graph_group.vue';
+import GroupEmptyState from './group_empty_state.vue';
+import LinksSection from './links_section.vue';
+import VariablesSection from './variables_section.vue';
export default {
components: {
diff --git a/app/assets/javascripts/monitoring/components/dashboard_actions_menu.vue b/app/assets/javascripts/monitoring/components/dashboard_actions_menu.vue
index 9d1926dca54..94cfb562ce3 100644
--- a/app/assets/javascripts/monitoring/components/dashboard_actions_menu.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard_actions_menu.vue
@@ -1,5 +1,4 @@
<script>
-import { mapState, mapGetters, mapActions } from 'vuex';
import {
GlButton,
GlDropdown,
@@ -10,15 +9,16 @@ import {
GlModalDirective,
GlTooltipDirective,
} from '@gitlab/ui';
+import { mapState, mapGetters, mapActions } from 'vuex';
import CustomMetricsFormFields from '~/custom_metrics/components/custom_metrics_form_fields.vue';
-import { PANEL_NEW_PAGE } from '../router/constants';
-import DuplicateDashboardModal from './duplicate_dashboard_modal.vue';
-import CreateDashboardModal from './create_dashboard_modal.vue';
-import { s__ } from '~/locale';
import invalidUrl from '~/lib/utils/invalid_url';
import { redirectTo } from '~/lib/utils/url_utility';
+import { s__ } from '~/locale';
import TrackEventDirective from '~/vue_shared/directives/track_event';
+import { PANEL_NEW_PAGE } from '../router/constants';
import { getAddMetricTrackingOptions } from '../utils';
+import CreateDashboardModal from './create_dashboard_modal.vue';
+import DuplicateDashboardModal from './duplicate_dashboard_modal.vue';
export default {
components: {
diff --git a/app/assets/javascripts/monitoring/components/dashboard_header.vue b/app/assets/javascripts/monitoring/components/dashboard_header.vue
index 0f6a9ce3814..3c423bea368 100644
--- a/app/assets/javascripts/monitoring/components/dashboard_header.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard_header.vue
@@ -1,6 +1,4 @@
<script>
-import { debounce } from 'lodash';
-import { mapActions, mapState, mapGetters } from 'vuex';
import {
GlButton,
GlDropdown,
@@ -12,17 +10,18 @@ import {
GlTooltipDirective,
GlIcon,
} from '@gitlab/ui';
-import { mergeUrlParams, redirectTo } from '~/lib/utils/url_utility';
+import { debounce } from 'lodash';
+import { mapActions, mapState, mapGetters } from 'vuex';
import invalidUrl from '~/lib/utils/invalid_url';
+import { mergeUrlParams, redirectTo } from '~/lib/utils/url_utility';
import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
-import DashboardsDropdown from './dashboards_dropdown.vue';
-import RefreshButton from './refresh_button.vue';
-import ActionsMenu from './dashboard_actions_menu.vue';
-
-import { timeRangeToUrl } from '../utils';
import { timeRanges } from '~/vue_shared/constants';
import { timezones } from '../format_date';
+import { timeRangeToUrl } from '../utils';
+import ActionsMenu from './dashboard_actions_menu.vue';
+import DashboardsDropdown from './dashboards_dropdown.vue';
+import RefreshButton from './refresh_button.vue';
export default {
components: {
diff --git a/app/assets/javascripts/monitoring/components/dashboard_panel.vue b/app/assets/javascripts/monitoring/components/dashboard_panel.vue
index 2b0c3d03b8d..55e73d17842 100644
--- a/app/assets/javascripts/monitoring/components/dashboard_panel.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard_panel.vue
@@ -1,6 +1,4 @@
<script>
-import { mapState } from 'vuex';
-import { mapValues, pickBy } from 'lodash';
import {
GlResizeObserverDirective,
GlIcon,
@@ -15,26 +13,28 @@ import {
GlTooltip,
GlTooltipDirective,
} from '@gitlab/ui';
-import invalidUrl from '~/lib/utils/invalid_url';
+import { mapValues, pickBy } from 'lodash';
+import { mapState } from 'vuex';
+import { BV_SHOW_MODAL } from '~/lib/utils/constants';
import { convertToFixedRange } from '~/lib/utils/datetime_range';
+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 { panelTypes } from '../constants';
-import MonitorEmptyChart from './charts/empty_chart.vue';
-import MonitorTimeSeriesChart from './charts/time_series.vue';
+import { graphDataToCsv } from '../csv_export';
+import { timeRangeToUrl, downloadCSVOptions, generateLinkToChartOptions } from '../utils';
+import AlertWidget from './alert_widget.vue';
import MonitorAnomalyChart from './charts/anomaly.vue';
-import MonitorSingleStatChart from './charts/single_stat.vue';
+import MonitorBarChart from './charts/bar.vue';
+import MonitorColumnChart from './charts/column.vue';
+import MonitorEmptyChart from './charts/empty_chart.vue';
import MonitorGaugeChart from './charts/gauge.vue';
import MonitorHeatmapChart from './charts/heatmap.vue';
-import MonitorColumnChart from './charts/column.vue';
-import MonitorBarChart from './charts/bar.vue';
+import MonitorSingleStatChart from './charts/single_stat.vue';
import MonitorStackedColumnChart from './charts/stacked_column.vue';
-
-import TrackEventDirective from '~/vue_shared/directives/track_event';
-import AlertWidget from './alert_widget.vue';
-import { timeRangeToUrl, downloadCSVOptions, generateLinkToChartOptions } from '../utils';
-import { graphDataToCsv } from '../csv_export';
+import MonitorTimeSeriesChart from './charts/time_series.vue';
const events = {
timeRangeZoom: 'timerangezoom',
@@ -318,7 +318,7 @@ export default {
return isSafeURL(url) ? url : '#';
},
showAlertModal() {
- this.$root.$emit('bv::show::modal', this.alertModalId);
+ this.$root.$emit(BV_SHOW_MODAL, this.alertModalId);
},
showAlertModalFromKeyboardShortcut() {
if (this.isContextualMenuShown) {
diff --git a/app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue b/app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue
index bcfa1b04322..847339e814a 100644
--- a/app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue
@@ -1,5 +1,4 @@
<script>
-import { mapActions, mapState } from 'vuex';
import {
GlCard,
GlForm,
@@ -10,6 +9,7 @@ import {
GlAlert,
GlTooltipDirective,
} from '@gitlab/ui';
+import { mapActions, mapState } from 'vuex';
import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
import { timeRanges } from '~/vue_shared/constants';
import DashboardPanel from './dashboard_panel.vue';
diff --git a/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue b/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue
index 1a349aa154a..1238996154d 100644
--- a/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue
+++ b/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue
@@ -1,5 +1,4 @@
<script>
-import { mapState, mapGetters } from 'vuex';
import {
GlIcon,
GlDropdown,
@@ -9,6 +8,7 @@ import {
GlSearchBoxByType,
GlModalDirective,
} from '@gitlab/ui';
+import { mapState, mapGetters } from 'vuex';
const events = {
selectDashboard: 'selectDashboard',
diff --git a/app/assets/javascripts/monitoring/components/duplicate_dashboard_modal.vue b/app/assets/javascripts/monitoring/components/duplicate_dashboard_modal.vue
index b87934a1db2..49d7e3a48a7 100644
--- a/app/assets/javascripts/monitoring/components/duplicate_dashboard_modal.vue
+++ b/app/assets/javascripts/monitoring/components/duplicate_dashboard_modal.vue
@@ -1,6 +1,6 @@
<script>
-import { mapActions, mapGetters } from 'vuex';
import { GlAlert, GlLoadingIcon, GlModal } from '@gitlab/ui';
+import { mapActions, mapGetters } from 'vuex';
import { s__ } from '~/locale';
import DuplicateDashboardForm from './duplicate_dashboard_form.vue';
diff --git a/app/assets/javascripts/monitoring/components/embeds/embed_group.vue b/app/assets/javascripts/monitoring/components/embeds/embed_group.vue
index c114ae1809f..8eef3d69a4f 100644
--- a/app/assets/javascripts/monitoring/components/embeds/embed_group.vue
+++ b/app/assets/javascripts/monitoring/components/embeds/embed_group.vue
@@ -1,7 +1,7 @@
<script>
-import { mapState, mapActions, mapGetters } from 'vuex';
-import sum from 'lodash/sum';
import { GlButton, GlCard, GlIcon } from '@gitlab/ui';
+import sum from 'lodash/sum';
+import { mapState, mapActions, mapGetters } from 'vuex';
import { n__ } from '~/locale';
import { monitoringDashboard } from '~/monitoring/stores';
import MetricEmbed from './metric_embed.vue';
diff --git a/app/assets/javascripts/monitoring/components/embeds/metric_embed.vue b/app/assets/javascripts/monitoring/components/embeds/metric_embed.vue
index 2fe49152c4f..25500747573 100644
--- a/app/assets/javascripts/monitoring/components/embeds/metric_embed.vue
+++ b/app/assets/javascripts/monitoring/components/embeds/metric_embed.vue
@@ -1,10 +1,10 @@
<script>
import { mapState, mapActions } from 'vuex';
-import DashboardPanel from '~/monitoring/components/dashboard_panel.vue';
import { convertToFixedRange } from '~/lib/utils/datetime_range';
+import DashboardPanel from '~/monitoring/components/dashboard_panel.vue';
import { defaultTimeRange } from '~/vue_shared/constants';
-import { timeRangeFromUrl, removeTimeRangeParams } from '../../utils';
import { sidebarAnimationDuration } from '../../constants';
+import { timeRangeFromUrl, removeTimeRangeParams } from '../../utils';
let sidebarMutationObserver;
diff --git a/app/assets/javascripts/monitoring/components/links_section.vue b/app/assets/javascripts/monitoring/components/links_section.vue
index ca1e9c4d0d4..3f9f57d4ac1 100644
--- a/app/assets/javascripts/monitoring/components/links_section.vue
+++ b/app/assets/javascripts/monitoring/components/links_section.vue
@@ -1,6 +1,6 @@
<script>
-import { mapGetters } from 'vuex';
import { GlIcon, GlLink } from '@gitlab/ui';
+import { mapGetters } from 'vuex';
export default {
components: {
@@ -15,12 +15,12 @@ export default {
<template>
<div
ref="linksSection"
- class="gl-display-sm-flex gl-flex-sm-wrap gl-mt-5 gl-p-3 gl-bg-gray-10 border gl-rounded-base links-section"
+ class="gl-sm-display-flex gl-flex-sm-wrap gl-mt-5 gl-p-3 gl-bg-gray-10 border gl-rounded-base links-section"
>
<div
v-for="(link, key) in links"
:key="key"
- class="gl-mb-1 gl-mr-5 gl-display-flex gl-display-sm-block gl-hover-text-blue-600-children gl-word-break-all"
+ class="gl-mb-1 gl-mr-5 gl-display-flex gl-sm-display-block gl-hover-text-blue-600-children gl-word-break-all"
>
<gl-link :href="link.url" class="gl-text-gray-900 gl-text-decoration-none!"
><gl-icon name="link" class="gl-text-gray-500 gl-vertical-align-text-bottom gl-mr-2" />{{
diff --git a/app/assets/javascripts/monitoring/components/refresh_button.vue b/app/assets/javascripts/monitoring/components/refresh_button.vue
index e0d9f92440b..3daf5b38933 100644
--- a/app/assets/javascripts/monitoring/components/refresh_button.vue
+++ b/app/assets/javascripts/monitoring/components/refresh_button.vue
@@ -1,6 +1,4 @@
<script>
-import Visibility from 'visibilityjs';
-import { mapActions } from 'vuex';
import {
GlButtonGroup,
GlButton,
@@ -9,6 +7,8 @@ import {
GlDropdownDivider,
GlTooltipDirective,
} from '@gitlab/ui';
+import Visibility from 'visibilityjs';
+import { mapActions } from 'vuex';
import { n__, __ } from '~/locale';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
diff --git a/app/assets/javascripts/monitoring/components/variables_section.vue b/app/assets/javascripts/monitoring/components/variables_section.vue
index 7c4fb135ec8..493d37ce263 100644
--- a/app/assets/javascripts/monitoring/components/variables_section.vue
+++ b/app/assets/javascripts/monitoring/components/variables_section.vue
@@ -1,9 +1,9 @@
<script>
import { mapState, mapActions } from 'vuex';
+import { VARIABLE_TYPES } from '../constants';
+import { setCustomVariablesFromUrl } from '../utils';
import DropdownField from './variables/dropdown_field.vue';
import TextField from './variables/text_field.vue';
-import { setCustomVariablesFromUrl } from '../utils';
-import { VARIABLE_TYPES } from '../constants';
export default {
components: {
diff --git a/app/assets/javascripts/monitoring/constants.js b/app/assets/javascripts/monitoring/constants.js
index 81ad3137b8b..060ed896d7c 100644
--- a/app/assets/javascripts/monitoring/constants.js
+++ b/app/assets/javascripts/monitoring/constants.js
@@ -151,7 +151,7 @@ export const linkTypes = {
* chart legend layout.
*
* Currently defined in
- * https://gitlab.com/gitlab-org/gitlab-ui/-/blob/master/src/utils/charts/constants.js
+ * https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/src/utils/charts/constants.js
*
*/
export const legendLayoutTypes = {
diff --git a/app/assets/javascripts/monitoring/monitoring_app.js b/app/assets/javascripts/monitoring/monitoring_app.js
index 307154c9a84..ee67e5dd827 100644
--- a/app/assets/javascripts/monitoring/monitoring_app.js
+++ b/app/assets/javascripts/monitoring/monitoring_app.js
@@ -1,7 +1,7 @@
-import Vue from 'vue';
import { GlToast } from '@gitlab/ui';
-import { createStore } from './stores';
+import Vue from 'vue';
import createRouter from './router';
+import { createStore } from './stores';
import { stateAndPropsFromDataset } from './utils';
Vue.use(GlToast);
@@ -26,7 +26,24 @@ export default (props = {}) => {
dashboardProps: { ...dataProps, ...props },
};
},
- template: `<router-view :dashboardProps="dashboardProps"/>`,
+ render(h) {
+ return h('RouterView', {
+ // This is attrs rather than props because:
+ // 1. RouterView only actually defines one prop: `name`.
+ // 2. The RouterView [throws away other props][1] given to it, in
+ // favour of those configured in the route config/params.
+ // 3. The Vue template compiler itself in general compiles anything
+ // like <some-component :foo="bar" /> into roughly
+ // h('some-component', { attrs: { foo: bar } }). Then later, Vue
+ // [extract props from attrs and merges them with props][2],
+ // matching them up according to the component's definition.
+ // [1]: https://github.com/vuejs/vue-router/blob/v3.4.9/src/components/view.js#L124
+ // [2]: https://github.com/vuejs/vue/blob/v2.6.12/src/core/vdom/helpers/extract-props.js#L12-L50
+ attrs: {
+ dashboardProps: this.dashboardProps,
+ },
+ });
+ },
});
}
};
diff --git a/app/assets/javascripts/monitoring/pages/panel_new_page.vue b/app/assets/javascripts/monitoring/pages/panel_new_page.vue
index 8ff6adb47ca..dbda6e80dac 100644
--- a/app/assets/javascripts/monitoring/pages/panel_new_page.vue
+++ b/app/assets/javascripts/monitoring/pages/panel_new_page.vue
@@ -1,9 +1,9 @@
<script>
-import { mapState } from 'vuex';
import { GlButton, GlTooltipDirective } from '@gitlab/ui';
+import { mapState } from 'vuex';
import { s__ } from '~/locale';
-import { DASHBOARD_PAGE } from '../router/constants';
import DashboardPanelBuilder from '../components/dashboard_panel_builder.vue';
+import { DASHBOARD_PAGE } from '../router/constants';
export default {
components: {
diff --git a/app/assets/javascripts/monitoring/requests/index.js b/app/assets/javascripts/monitoring/requests/index.js
index 4a12ca06197..26fedb9c81c 100644
--- a/app/assets/javascripts/monitoring/requests/index.js
+++ b/app/assets/javascripts/monitoring/requests/index.js
@@ -1,6 +1,6 @@
import axios from '~/lib/utils/axios_utils';
-import statusCodes from '~/lib/utils/http_status';
import { backOff } from '~/lib/utils/common_utils';
+import statusCodes from '~/lib/utils/http_status';
import { PROMETHEUS_TIMEOUT } from '../constants';
const cancellableBackOffRequest = (makeRequestCallback) =>
diff --git a/app/assets/javascripts/monitoring/stores/actions.js b/app/assets/javascripts/monitoring/stores/actions.js
index 44c200cdb54..8522ac6a57d 100644
--- a/app/assets/javascripts/monitoring/stores/actions.js
+++ b/app/assets/javascripts/monitoring/stores/actions.js
@@ -1,23 +1,23 @@
-import * as Sentry from '~/sentry/wrapper';
-import * as types from './mutation_types';
-import axios from '~/lib/utils/axios_utils';
import { deprecatedCreateFlash as createFlash } from '~/flash';
+import axios from '~/lib/utils/axios_utils';
import { convertToFixedRange } from '~/lib/utils/datetime_range';
+import * as Sentry from '~/sentry/wrapper';
+import { convertObjectPropsToCamelCase } from '../../lib/utils/common_utils';
+import { s__, sprintf } from '../../locale';
+import { ENVIRONMENT_AVAILABLE_STATE, OVERVIEW_DASHBOARD_PATH, VARIABLE_TYPES } from '../constants';
+import trackDashboardLoad from '../monitoring_tracking_helper';
+import getAnnotations from '../queries/getAnnotations.query.graphql';
+import getDashboardValidationWarnings from '../queries/getDashboardValidationWarnings.query.graphql';
+import getEnvironments from '../queries/getEnvironments.query.graphql';
+import { getDashboard, getPrometheusQueryData } from '../requests';
+
+import * as types from './mutation_types';
import {
gqClient,
parseEnvironmentsResponse,
parseAnnotationsResponse,
removeLeadingSlash,
} from './utils';
-import trackDashboardLoad from '../monitoring_tracking_helper';
-import getEnvironments from '../queries/getEnvironments.query.graphql';
-import getAnnotations from '../queries/getAnnotations.query.graphql';
-import getDashboardValidationWarnings from '../queries/getDashboardValidationWarnings.query.graphql';
-import { convertObjectPropsToCamelCase } from '../../lib/utils/common_utils';
-import { s__, sprintf } from '../../locale';
-import { getDashboard, getPrometheusQueryData } from '../requests';
-
-import { ENVIRONMENT_AVAILABLE_STATE, OVERVIEW_DASHBOARD_PATH, VARIABLE_TYPES } from '../constants';
const axiosCancelToken = axios.CancelToken;
let cancelTokenSource;
diff --git a/app/assets/javascripts/monitoring/stores/mutations.js b/app/assets/javascripts/monitoring/stores/mutations.js
index 5c5a7d03b97..e0eaf76b5f6 100644
--- a/app/assets/javascripts/monitoring/stores/mutations.js
+++ b/app/assets/javascripts/monitoring/stores/mutations.js
@@ -1,10 +1,10 @@
-import Vue from 'vue';
import { pick } from 'lodash';
-import * as types from './mutation_types';
-import { mapToDashboardViewModel, mapPanelToViewModel, normalizeQueryResponseData } from './utils';
-import httpStatusCodes from '~/lib/utils/http_status';
+import Vue from 'vue';
import { BACKOFF_TIMEOUT } from '~/lib/utils/common_utils';
+import httpStatusCodes from '~/lib/utils/http_status';
import { dashboardEmptyStates, endpointKeys, initialStateKeys, metricStates } from '../constants';
+import * as types from './mutation_types';
+import { mapToDashboardViewModel, mapPanelToViewModel, normalizeQueryResponseData } from './utils';
import { optionsFromSeriesData } from './variable_mapping';
/**
diff --git a/app/assets/javascripts/monitoring/stores/state.js b/app/assets/javascripts/monitoring/stores/state.js
index ef8b1adb624..3883fa3380d 100644
--- a/app/assets/javascripts/monitoring/stores/state.js
+++ b/app/assets/javascripts/monitoring/stores/state.js
@@ -1,7 +1,7 @@
import invalidUrl from '~/lib/utils/invalid_url';
-import { timezones } from '../format_date';
-import { dashboardEmptyStates } from '../constants';
import { defaultTimeRange } from '~/vue_shared/constants';
+import { dashboardEmptyStates } from '../constants';
+import { timezones } from '../format_date';
export default () => ({
// API endpoints
diff --git a/app/assets/javascripts/monitoring/stores/utils.js b/app/assets/javascripts/monitoring/stores/utils.js
index 36e5a135d59..20f7c5cdb60 100644
--- a/app/assets/javascripts/monitoring/stores/utils.js
+++ b/app/assets/javascripts/monitoring/stores/utils.js
@@ -1,12 +1,12 @@
-import { slugify } from '~/lib/utils/text_utility';
-import createGqClient, { fetchPolicies } from '~/lib/graphql';
-import { SUPPORTED_FORMATS } from '~/lib/utils/unit_format';
import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import { mergeURLVariables, parseTemplatingVariables } from './variable_mapping';
+import createGqClient, { fetchPolicies } from '~/lib/graphql';
import { DATETIME_RANGE_TYPES } from '~/lib/utils/constants';
import { timeRangeToParams, getRangeType } from '~/lib/utils/datetime_range';
+import { slugify } from '~/lib/utils/text_utility';
+import { SUPPORTED_FORMATS } from '~/lib/utils/unit_format';
import { isSafeURL, mergeUrlParams } from '~/lib/utils/url_utility';
import { NOT_IN_DB_PREFIX, linkTypes, OUT_OF_THE_BOX_DASHBOARDS_PATH_PREFIX } from '../constants';
+import { mergeURLVariables, parseTemplatingVariables } from './variable_mapping';
export const gqClient = createGqClient(
{},
diff --git a/app/assets/javascripts/monitoring/stores/variable_mapping.js b/app/assets/javascripts/monitoring/stores/variable_mapping.js
index c9e0e383582..4ca7a0b51d6 100644
--- a/app/assets/javascripts/monitoring/stores/variable_mapping.js
+++ b/app/assets/javascripts/monitoring/stores/variable_mapping.js
@@ -1,6 +1,6 @@
import { isString } from 'lodash';
-import { templatingVariablesFromUrl } from '../utils';
import { VARIABLE_TYPES } from '../constants';
+import { templatingVariablesFromUrl } from '../utils';
/**
* This file exclusively deals with parsing user-defined variables
diff --git a/app/assets/javascripts/monitoring/utils.js b/app/assets/javascripts/monitoring/utils.js
index 01cae7127e5..6306415a8b9 100644
--- a/app/assets/javascripts/monitoring/utils.js
+++ b/app/assets/javascripts/monitoring/utils.js
@@ -1,16 +1,16 @@
import { pickBy, mapKeys } from 'lodash';
-import {
- queryToObject,
- mergeUrlParams,
- removeParams,
- updateHistory,
-} from '~/lib/utils/url_utility';
import { parseBoolean } from '~/lib/utils/common_utils';
import {
timeRangeParamNames,
timeRangeFromParams,
timeRangeToParams,
} from '~/lib/utils/datetime_range';
+import {
+ queryToObject,
+ mergeUrlParams,
+ removeParams,
+ updateHistory,
+} from '~/lib/utils/url_utility';
import { VARIABLE_PREFIX } from './constants';
/**