diff options
Diffstat (limited to 'app/assets/javascripts/monitoring')
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'; /** |