diff options
Diffstat (limited to 'app/assets/javascripts/monitoring/components')
13 files changed, 106 insertions, 100 deletions
diff --git a/app/assets/javascripts/monitoring/components/alert_widget.vue b/app/assets/javascripts/monitoring/components/alert_widget.vue index 909ae2980d2..8f9c181258f 100644 --- a/app/assets/javascripts/monitoring/components/alert_widget.vue +++ b/app/assets/javascripts/monitoring/components/alert_widget.vue @@ -236,7 +236,7 @@ export default { > <gl-badge :variant="isFiring ? 'danger' : 'neutral'" class="d-flex-center text-truncate"> <gl-icon name="warning" :size="16" class="flex-shrink-0" /> - <span class="text-truncate gl-pl-1-deprecated-no-really-do-not-use-me"> + <span class="text-truncate gl-pl-2"> <gl-sprintf :message=" hasMultipleAlerts ? multipleAlertsSummary.message : singleAlertSummary.message diff --git a/app/assets/javascripts/monitoring/components/alert_widget_form.vue b/app/assets/javascripts/monitoring/components/alert_widget_form.vue index 5fa0da53a04..132df9c9516 100644 --- a/app/assets/javascripts/monitoring/components/alert_widget_form.vue +++ b/app/assets/javascripts/monitoring/components/alert_widget_form.vue @@ -7,16 +7,16 @@ import { GlButtonGroup, GlFormGroup, GlFormInput, - GlNewDropdown as GlDropdown, - GlNewDropdownItem as GlDropdownItem, + GlDropdown, + GlDropdownItem, GlModal, GlTooltipDirective, + GlIcon, } from '@gitlab/ui'; 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 Icon from '~/vue_shared/components/icon.vue'; import { alertsValidator, queriesValidator } from '../validators'; import { OPERATORS } from '../constants'; @@ -44,7 +44,7 @@ export default { GlDropdownItem, GlModal, GlLink, - Icon, + GlIcon, }, directives: { GlTooltip: GlTooltipDirective, @@ -242,7 +242,7 @@ export default { <template #description> <div class="d-flex align-items-center"> {{ __('Single or combined queries') }} - <icon + <gl-icon v-gl-tooltip="$options.alertQueryText.descriptionTooltip" name="question" class="gl-ml-2" diff --git a/app/assets/javascripts/monitoring/components/charts/empty_chart.vue b/app/assets/javascripts/monitoring/components/charts/empty_chart.vue index ad176637538..446ca8e5090 100644 --- a/app/assets/javascripts/monitoring/components/charts/empty_chart.vue +++ b/app/assets/javascripts/monitoring/components/charts/empty_chart.vue @@ -1,4 +1,5 @@ <script> +/* eslint-disable vue/no-v-html */ import chartEmptyStateIllustration from '@gitlab/svgs/dist/illustrations/chart-empty-state.svg'; import { chartHeight } from '../../constants'; diff --git a/app/assets/javascripts/monitoring/components/charts/time_series.vue b/app/assets/javascripts/monitoring/components/charts/time_series.vue index 054111c203e..6bae3fdcc2e 100644 --- a/app/assets/javascripts/monitoring/components/charts/time_series.vue +++ b/app/assets/javascripts/monitoring/components/charts/time_series.vue @@ -1,10 +1,9 @@ <script> import { isEmpty, omit, throttle } from 'lodash'; -import { GlLink, GlTooltip, GlResizeObserverDirective } from '@gitlab/ui'; +import { GlLink, GlTooltip, GlResizeObserverDirective, GlIcon } from '@gitlab/ui'; import { GlAreaChart, GlLineChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts'; import { s__ } from '~/locale'; import { getSvgIconPathContent } from '~/lib/utils/icon_utils'; -import Icon from '~/vue_shared/components/icon.vue'; import { panelTypes, chartHeight, lineTypes, lineWidths, legendLayoutTypes } from '../../constants'; import { getYAxisOptions, getTimeAxisOptions, getChartGrid, getTooltipFormatter } from './options'; import { annotationsYAxis, generateAnnotationsSeries } from './annotations'; @@ -27,7 +26,7 @@ export default { GlTooltip, GlChartSeriesLabel, GlLink, - Icon, + GlIcon, }, directives: { GlResizeObserverDirective, @@ -407,7 +406,7 @@ export default { {{ __('Deployed') }} </template> <div slot="tooltipContent" class="d-flex align-items-center"> - <icon name="commit" class="mr-2" /> + <gl-icon name="commit" class="mr-2" /> <gl-link :href="tooltip.commitUrl">{{ tooltip.sha }}</gl-link> </div> </template> diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue index 24aa7b3f504..cbfacd73b5b 100644 --- a/app/assets/javascripts/monitoring/components/dashboard.vue +++ b/app/assets/javascripts/monitoring/components/dashboard.vue @@ -2,7 +2,7 @@ import { mapActions, mapState, mapGetters } from 'vuex'; import VueDraggable from 'vuedraggable'; import Mousetrap from 'mousetrap'; -import { GlButton, GlModalDirective, GlTooltipDirective } from '@gitlab/ui'; +import { GlButton, GlModalDirective, GlTooltipDirective, GlIcon } from '@gitlab/ui'; import DashboardHeader from './dashboard_header.vue'; import DashboardPanel from './dashboard_panel.vue'; import { s__ } from '~/locale'; @@ -10,7 +10,6 @@ import { deprecatedCreateFlash as createFlash } from '~/flash'; import { ESC_KEY } from '~/lib/utils/keys'; import { mergeUrlParams, updateHistory } from '~/lib/utils/url_utility'; import invalidUrl from '~/lib/utils/invalid_url'; -import Icon from '~/vue_shared/components/icon.vue'; import GraphGroup from './graph_group.vue'; import EmptyState from './empty_state.vue'; @@ -33,7 +32,7 @@ export default { VueDraggable, DashboardHeader, DashboardPanel, - Icon, + GlIcon, GlButton, GraphGroup, EmptyState, @@ -473,7 +472,7 @@ export default { @click="removePanel(groupData.key, groupData.panels, graphIndex)" > <a class="mx-2 p-2 draggable-remove-link" :aria-label="__('Remove')"> - <icon name="close" /> + <gl-icon name="close" /> </a> </div> diff --git a/app/assets/javascripts/monitoring/components/dashboard_actions_menu.vue b/app/assets/javascripts/monitoring/components/dashboard_actions_menu.vue index 68afa2ace01..070277fe2dc 100644 --- a/app/assets/javascripts/monitoring/components/dashboard_actions_menu.vue +++ b/app/assets/javascripts/monitoring/components/dashboard_actions_menu.vue @@ -2,9 +2,9 @@ import { mapState, mapGetters, mapActions } from 'vuex'; import { GlDeprecatedButton, - GlNewDropdown, - GlNewDropdownDivider, - GlNewDropdownItem, + GlDropdown, + GlDropdownDivider, + GlDropdownItem, GlModal, GlIcon, GlModalDirective, @@ -23,9 +23,9 @@ import { getAddMetricTrackingOptions } from '../utils'; export default { components: { GlDeprecatedButton, - GlNewDropdown, - GlNewDropdownDivider, - GlNewDropdownItem, + GlDropdown, + GlDropdownDivider, + GlDropdownItem, GlModal, GlIcon, DuplicateDashboardModal, @@ -143,7 +143,7 @@ export default { as part of https://gitlab.com/gitlab-org/gitlab-ui/-/issues/936 The variant will create a dropdown with an icon, no text and no caret --> - <gl-new-dropdown + <gl-dropdown v-gl-tooltip data-testid="actions-menu" data-qa-selector="actions_menu_dropdown" @@ -157,13 +157,13 @@ export default { </template> <template v-if="addingMetricsAvailable"> - <gl-new-dropdown-item + <gl-dropdown-item v-gl-modal="$options.modalIds.addMetric" data-qa-selector="add_metric_button" data-testid="add-metric-item" > {{ $options.i18n.addMetric }} - </gl-new-dropdown-item> + </gl-dropdown-item> <gl-modal ref="addMetricModal" :modal-id="$options.modalIds.addMetric" @@ -194,20 +194,20 @@ export default { </gl-modal> </template> - <gl-new-dropdown-item + <gl-dropdown-item v-if="isMenuItemEnabled.addPanel" data-testid="add-panel-item-enabled" :to="newPanelPageLocation" > {{ $options.i18n.addPanel }} - </gl-new-dropdown-item> + </gl-dropdown-item> <!-- wrapper for tooltip as button can be `disabled` https://bootstrap-vue.org/docs/components/tooltip#disabled-elements --> <div v-else v-gl-tooltip :title="$options.i18n.addPanelInfo"> - <gl-new-dropdown-item + <gl-dropdown-item :alt="$options.i18n.addPanelInfo" :to="newPanelPageLocation" data-testid="add-panel-item-disabled" @@ -215,24 +215,24 @@ export default { class="gl-cursor-not-allowed" > <span class="gl-text-gray-400">{{ $options.i18n.addPanel }}</span> - </gl-new-dropdown-item> + </gl-dropdown-item> </div> - <gl-new-dropdown-item + <gl-dropdown-item v-if="isMenuItemEnabled.editDashboard" :href="selectedDashboard ? selectedDashboard.project_blob_path : null" data-qa-selector="edit_dashboard_button_enabled" data-testid="edit-dashboard-item-enabled" > {{ $options.i18n.editDashboard }} - </gl-new-dropdown-item> + </gl-dropdown-item> <!-- wrapper for tooltip as button can be `disabled` https://bootstrap-vue.org/docs/components/tooltip#disabled-elements --> <div v-else v-gl-tooltip :title="$options.i18n.editDashboardInfo"> - <gl-new-dropdown-item + <gl-dropdown-item :alt="$options.i18n.editDashboardInfo" :href="selectedDashboard ? selectedDashboard.project_blob_path : null" data-testid="edit-dashboard-item-disabled" @@ -240,16 +240,16 @@ export default { class="gl-cursor-not-allowed" > <span class="gl-text-gray-400">{{ $options.i18n.editDashboard }}</span> - </gl-new-dropdown-item> + </gl-dropdown-item> </div> <template v-if="isMenuItemShown.duplicateDashboard"> - <gl-new-dropdown-item + <gl-dropdown-item v-gl-modal="$options.modalIds.duplicateDashboard" data-testid="duplicate-dashboard-item" > {{ $options.i18n.duplicateDashboard }} - </gl-new-dropdown-item> + </gl-dropdown-item> <duplicate-dashboard-modal :default-branch="defaultBranch" @@ -259,25 +259,25 @@ export default { /> </template> - <gl-new-dropdown-item + <gl-dropdown-item v-if="selectedDashboard" data-testid="star-dashboard-item" :disabled="isUpdatingStarredValue" @click="toggleStarredValue()" > {{ selectedDashboard.starred ? $options.i18n.unstarDashboard : $options.i18n.starDashboard }} - </gl-new-dropdown-item> + </gl-dropdown-item> - <gl-new-dropdown-divider /> + <gl-dropdown-divider /> - <gl-new-dropdown-item + <gl-dropdown-item v-gl-modal="$options.modalIds.createDashboard" data-testid="create-dashboard-item" :disabled="!isMenuItemEnabled.createDashboard" :class="{ 'monitoring-actions-item-disabled': !isMenuItemEnabled.createDashboard }" > {{ $options.i18n.createDashboard }} - </gl-new-dropdown-item> + </gl-dropdown-item> <template v-if="isMenuItemEnabled.createDashboard"> <create-dashboard-modal @@ -287,5 +287,5 @@ export default { :project-path="projectPath" /> </template> - </gl-new-dropdown> + </gl-dropdown> </template> diff --git a/app/assets/javascripts/monitoring/components/dashboard_header.vue b/app/assets/javascripts/monitoring/components/dashboard_header.vue index 6a7bf81c643..e468728a954 100644 --- a/app/assets/javascripts/monitoring/components/dashboard_header.vue +++ b/app/assets/javascripts/monitoring/components/dashboard_header.vue @@ -3,17 +3,17 @@ import { debounce } from 'lodash'; import { mapActions, mapState, mapGetters } from 'vuex'; import { GlButton, - GlNewDropdown, + GlDropdown, GlLoadingIcon, - GlNewDropdownItem, - GlNewDropdownHeader, + GlDropdownItem, + GlDropdownSectionHeader, GlSearchBoxByType, GlModalDirective, GlTooltipDirective, + GlIcon, } from '@gitlab/ui'; import { mergeUrlParams, redirectTo } from '~/lib/utils/url_utility'; import invalidUrl from '~/lib/utils/invalid_url'; -import Icon from '~/vue_shared/components/icon.vue'; import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue'; import DashboardsDropdown from './dashboards_dropdown.vue'; @@ -26,12 +26,12 @@ import { timezones } from '../format_date'; export default { components: { - Icon, + GlIcon, GlButton, - GlNewDropdown, + GlDropdown, GlLoadingIcon, - GlNewDropdownItem, - GlNewDropdownHeader, + GlDropdownItem, + GlDropdownSectionHeader, GlSearchBoxByType, @@ -181,7 +181,7 @@ export default { <span aria-hidden="true" class="gl-pl-3 border-left gl-mb-3 d-none d-sm-block"></span> <div class="mb-2 pr-2 d-flex d-sm-block"> - <gl-new-dropdown + <gl-dropdown id="monitor-environments-dropdown" ref="monitorEnvironmentsDropdown" class="flex-grow-1" @@ -191,12 +191,12 @@ export default { :text="environmentDropdownText" > <div class="d-flex flex-column overflow-hidden"> - <gl-new-dropdown-header>{{ __('Environment') }}</gl-new-dropdown-header> - <gl-search-box-by-type class="m-2" @input="debouncedEnvironmentsSearch" /> + <gl-dropdown-section-header>{{ __('Environment') }}</gl-dropdown-section-header> + <gl-search-box-by-type class="gl-m-3" @input="debouncedEnvironmentsSearch" /> <gl-loading-icon v-if="environmentsLoading" :inline="true" /> <div v-else class="flex-fill overflow-auto"> - <gl-new-dropdown-item + <gl-dropdown-item v-for="environment in filteredEnvironments" :key="environment.id" :is-check-item="true" @@ -204,7 +204,7 @@ export default { :href="getEnvironmentPath(environment.id)" > {{ environment.name }} - </gl-new-dropdown-item> + </gl-dropdown-item> </div> <div v-show="shouldShowEnvironmentsDropdownNoMatchedMsg" @@ -214,7 +214,7 @@ export default { {{ __('No matching results') }} </div> </div> - </gl-new-dropdown> + </gl-dropdown> </div> <div class="mb-2 pr-2 d-flex d-sm-block"> @@ -260,7 +260,7 @@ export default { target="_blank" rel="noopener noreferrer" > - {{ __('View full dashboard') }} <icon name="external-link" /> + {{ __('View full dashboard') }} <gl-icon name="external-link" /> </gl-button> </div> diff --git a/app/assets/javascripts/monitoring/components/dashboard_panel.vue b/app/assets/javascripts/monitoring/components/dashboard_panel.vue index 278858d3a94..18310f7c71e 100644 --- a/app/assets/javascripts/monitoring/components/dashboard_panel.vue +++ b/app/assets/javascripts/monitoring/components/dashboard_panel.vue @@ -6,9 +6,9 @@ import { GlIcon, GlLink, GlLoadingIcon, - GlNewDropdown as GlDropdown, - GlNewDropdownItem as GlDropdownItem, - GlNewDropdownDivider as GlDropdownDivider, + GlDropdown, + GlDropdownItem, + GlDropdownDivider, GlModal, GlModalDirective, GlSprintf, diff --git a/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue b/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue index aed27b5ea51..932efeaaf0e 100644 --- a/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue +++ b/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue @@ -2,10 +2,10 @@ import { mapState, mapGetters } from 'vuex'; import { GlIcon, - GlNewDropdown, - GlNewDropdownItem, - GlNewDropdownHeader, - GlNewDropdownDivider, + GlDropdown, + GlDropdownItem, + GlDropdownSectionHeader, + GlDropdownDivider, GlSearchBoxByType, GlModalDirective, } from '@gitlab/ui'; @@ -17,10 +17,10 @@ const events = { export default { components: { GlIcon, - GlNewDropdown, - GlNewDropdownItem, - GlNewDropdownHeader, - GlNewDropdownDivider, + GlDropdown, + GlDropdownItem, + GlDropdownSectionHeader, + GlDropdownDivider, GlSearchBoxByType, }, directives: { @@ -73,21 +73,21 @@ export default { }; </script> <template> - <gl-new-dropdown + <gl-dropdown toggle-class="dropdown-menu-toggle" menu-class="monitor-dashboard-dropdown-menu" :text="selectedDashboardText" > <div class="d-flex flex-column overflow-hidden"> - <gl-new-dropdown-header>{{ __('Dashboard') }}</gl-new-dropdown-header> + <gl-dropdown-section-header>{{ __('Dashboard') }}</gl-dropdown-section-header> <gl-search-box-by-type ref="monitorDashboardsDropdownSearch" v-model="searchTerm" - class="m-2" + class="gl-m-3" /> <div class="flex-fill overflow-auto"> - <gl-new-dropdown-item + <gl-dropdown-item v-for="dashboard in starredDashboards" :key="dashboard.path" :is-check-item="true" @@ -95,28 +95,28 @@ export default { @click="selectDashboard(dashboard)" > <div class="gl-display-flex"> - <div class="gl-flex-grow-1 gl-min-w-0"> - <div class="gl-word-break-all"> - {{ dashboardDisplayName(dashboard) }} - </div> - </div> - <gl-icon class="text-muted gl-flex-shrink-0" name="star" /> + <span class="gl-flex-grow-1 gl-min-w-0 gl-overflow-hidden gl-overflow-wrap-break"> + {{ dashboardDisplayName(dashboard) }} + </span> + <gl-icon class="text-muted gl-flex-shrink-0 gl-ml-3 gl-align-self-center" name="star" /> </div> - </gl-new-dropdown-item> - <gl-new-dropdown-divider + </gl-dropdown-item> + <gl-dropdown-divider v-if="starredDashboards.length && nonStarredDashboards.length" ref="starredListDivider" /> - <gl-new-dropdown-item + <gl-dropdown-item v-for="dashboard in nonStarredDashboards" :key="dashboard.path" :is-check-item="true" :is-checked="dashboard.path === selectedDashboardPath" @click="selectDashboard(dashboard)" > - {{ dashboardDisplayName(dashboard) }} - </gl-new-dropdown-item> + <span class="gl-overflow-hidden gl-overflow-wrap-break"> + {{ dashboardDisplayName(dashboard) }} + </span> + </gl-dropdown-item> </div> <div @@ -127,5 +127,5 @@ export default { {{ __('No matching results') }} </div> </div> - </gl-new-dropdown> + </gl-dropdown> </template> diff --git a/app/assets/javascripts/monitoring/components/embeds/embed_group.vue b/app/assets/javascripts/monitoring/components/embeds/embed_group.vue index b60c87fee82..f07483c34b8 100644 --- a/app/assets/javascripts/monitoring/components/embeds/embed_group.vue +++ b/app/assets/javascripts/monitoring/components/embeds/embed_group.vue @@ -1,14 +1,14 @@ <script> import { mapState, mapActions, mapGetters } from 'vuex'; import sum from 'lodash/sum'; -import { GlDeprecatedButton, GlCard, GlIcon } from '@gitlab/ui'; +import { GlButton, GlCard, GlIcon } from '@gitlab/ui'; import { n__ } from '~/locale'; import { monitoringDashboard } from '~/monitoring/stores'; import MetricEmbed from './metric_embed.vue'; export default { components: { - GlDeprecatedButton, + GlButton, GlCard, GlIcon, MetricEmbed, @@ -78,15 +78,16 @@ export default { :body-class="bodyClass" > <template #header> - <gl-deprecated-button - class="collapsible-card-btn d-flex text-decoration-none" + <gl-button + class="collapsible-card-btn gl-display-flex gl-text-decoration-none gl-reset-color! gl-hover-text-blue-800! gl-shadow-none!" :aria-label="buttonLabel" variant="link" + category="tertiary" @click="toggleCollapsed" > <gl-icon class="mr-1" :name="arrowIconName" /> {{ buttonLabel }} - </gl-deprecated-button> + </gl-button> </template> <div class="d-flex flex-wrap"> <metric-embed diff --git a/app/assets/javascripts/monitoring/components/group_empty_state.vue b/app/assets/javascripts/monitoring/components/group_empty_state.vue index 9cf492dd537..499823fae3f 100644 --- a/app/assets/javascripts/monitoring/components/group_empty_state.vue +++ b/app/assets/javascripts/monitoring/components/group_empty_state.vue @@ -1,4 +1,5 @@ <script> +/* eslint-disable vue/no-v-html */ import { GlEmptyState } from '@gitlab/ui'; import { __, sprintf } from '~/locale'; import { metricStates } from '../constants'; diff --git a/app/assets/javascripts/monitoring/components/refresh_button.vue b/app/assets/javascripts/monitoring/components/refresh_button.vue index 0e9605450ed..e0d9f92440b 100644 --- a/app/assets/javascripts/monitoring/components/refresh_button.vue +++ b/app/assets/javascripts/monitoring/components/refresh_button.vue @@ -4,9 +4,9 @@ import { mapActions } from 'vuex'; import { GlButtonGroup, GlButton, - GlNewDropdown, - GlNewDropdownItem, - GlNewDropdownDivider, + GlDropdown, + GlDropdownItem, + GlDropdownDivider, GlTooltipDirective, } from '@gitlab/ui'; import { n__, __ } from '~/locale'; @@ -48,9 +48,9 @@ export default { components: { GlButtonGroup, GlButton, - GlNewDropdown, - GlNewDropdownItem, - GlNewDropdownDivider, + GlDropdown, + GlDropdownItem, + GlDropdownDivider, }, directives: { GlTooltip: GlTooltipDirective, @@ -152,27 +152,27 @@ export default { icon="retry" @click="refresh" /> - <gl-new-dropdown + <gl-dropdown v-if="!disableMetricDashboardRefreshRate" v-gl-tooltip :title="s__('Metrics|Set refresh rate')" :text="dropdownText" > - <gl-new-dropdown-item + <gl-dropdown-item :is-check-item="true" :is-checked="refreshInterval === null" @click="removeRefreshInterval()" - >{{ __('Off') }}</gl-new-dropdown-item + >{{ __('Off') }}</gl-dropdown-item > - <gl-new-dropdown-divider /> - <gl-new-dropdown-item + <gl-dropdown-divider /> + <gl-dropdown-item v-for="(option, i) in $options.refreshIntervals" :key="i" :is-check-item="true" :is-checked="isChecked(option)" @click="setRefreshInterval(option)" - >{{ option.label }}</gl-new-dropdown-item + >{{ option.label }}</gl-dropdown-item > - </gl-new-dropdown> + </gl-dropdown> </gl-button-group> </template> diff --git a/app/assets/javascripts/monitoring/components/variables_section.vue b/app/assets/javascripts/monitoring/components/variables_section.vue index 25d900b07ad..7c4fb135ec8 100644 --- a/app/assets/javascripts/monitoring/components/variables_section.vue +++ b/app/assets/javascripts/monitoring/components/variables_section.vue @@ -37,7 +37,11 @@ export default { }; </script> <template> - <div ref="variablesSection" class="d-sm-flex flex-sm-wrap pt-2 pr-1 pb-0 pl-2 variables-section"> + <div + ref="variablesSection" + class="d-sm-flex flex-sm-wrap pt-2 pr-1 pb-0 pl-2 variables-section" + data-qa-selector="variables_content" + > <div v-for="variable in variables" :key="variable.name" class="mb-1 pr-2 d-flex d-sm-block"> <component :is="variableField(variable.type)" @@ -46,6 +50,7 @@ export default { :value="variable.value" :name="variable.name" :options="variable.options" + data-qa-selector="variable_item" @input="refreshDashboard(variable, $event)" /> </div> |