diff options
Diffstat (limited to 'app/assets/javascripts/monitoring/components')
23 files changed, 92 insertions, 87 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: { |