diff options
Diffstat (limited to 'app/assets/javascripts/monitoring/components/dashboard_panel.vue')
-rw-r--r-- | app/assets/javascripts/monitoring/components/dashboard_panel.vue | 67 |
1 files changed, 58 insertions, 9 deletions
diff --git a/app/assets/javascripts/monitoring/components/dashboard_panel.vue b/app/assets/javascripts/monitoring/components/dashboard_panel.vue index 9545a211bbd..3e3c8408de3 100644 --- a/app/assets/javascripts/monitoring/components/dashboard_panel.vue +++ b/app/assets/javascripts/monitoring/components/dashboard_panel.vue @@ -2,6 +2,7 @@ import { mapState } from 'vuex'; import { pickBy } from 'lodash'; import invalidUrl from '~/lib/utils/invalid_url'; +import { relativePathToAbsolute, getBaseURL, visitUrl, isSafeURL } from '~/lib/utils/url_utility'; import { GlResizeObserverDirective, GlIcon, @@ -29,7 +30,6 @@ 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 { isSafeURL } from '~/lib/utils/url_utility'; const events = { timeRangeZoom: 'timerangezoom', @@ -132,7 +132,8 @@ export default { return this.graphData?.title || ''; }, graphDataHasResult() { - return this.graphData?.metrics?.[0]?.result?.length > 0; + const metrics = this.graphData?.metrics || []; + return metrics.some(({ result }) => result?.length > 0); }, graphDataIsLoading() { const metrics = this.graphData?.metrics || []; @@ -207,7 +208,17 @@ export default { return MonitorTimeSeriesChart; }, isContextualMenuShown() { - return Boolean(this.graphDataHasResult && !this.basicChartComponent); + if (!this.graphDataHasResult) { + return false; + } + // Only a few charts have a contextual menu, support + // for more chart types planned at: + // https://gitlab.com/groups/gitlab-org/-/epics/3573 + return ( + this.isPanelType(panelTypes.AREA_CHART) || + this.isPanelType(panelTypes.LINE_CHART) || + this.isPanelType(panelTypes.SINGLE_STAT) + ); }, editCustomMetricLink() { if (this.graphData.metrics.length > 1) { @@ -223,13 +234,19 @@ export default { return metrics.some(({ metricId }) => this.metricsSavedToDb.includes(metricId)); }, alertWidgetAvailable() { + const supportsAlerts = + this.isPanelType(panelTypes.AREA_CHART) || this.isPanelType(panelTypes.LINE_CHART); return ( + supportsAlerts && this.prometheusAlertsAvailable && this.alertsEndpoint && this.graphData && this.hasMetricsInDb ); }, + alertModalId() { + return `alert-modal-${this.graphData.id}`; + }, }, mounted() { this.refreshTitleTooltip(); @@ -268,6 +285,11 @@ export default { onExpand() { this.$emit(events.expand); }, + onExpandFromKeyboardShortcut() { + if (this.isContextualMenuShown) { + this.onExpand(); + } + }, setAlerts(alertPath, alertAttributes) { if (alertAttributes) { this.$set(this.allAlerts, alertPath, alertAttributes); @@ -278,18 +300,45 @@ export default { safeUrl(url) { return isSafeURL(url) ? url : '#'; }, + showAlertModal() { + this.$root.$emit('bv::show::modal', this.alertModalId); + }, + showAlertModalFromKeyboardShortcut() { + if (this.isContextualMenuShown) { + this.showAlertModal(); + } + }, + visitLogsPage() { + if (this.logsPathWithTimeRange) { + visitUrl(relativePathToAbsolute(this.logsPathWithTimeRange, getBaseURL())); + } + }, + visitLogsPageFromKeyboardShortcut() { + if (this.isContextualMenuShown) { + this.visitLogsPage(); + } + }, + downloadCsvFromKeyboardShortcut() { + if (this.csvText && this.isContextualMenuShown) { + this.$refs.downloadCsvLink.$el.firstChild.click(); + } + }, + copyChartLinkFromKeyboardShotcut() { + if (this.clipboardText && this.isContextualMenuShown) { + this.$refs.copyChartLink.$el.firstChild.click(); + } + }, }, panelTypes, }; </script> <template> <div v-gl-resize-observer="onResize" class="prometheus-graph"> - <div class="d-flex align-items-center mr-3"> + <div class="d-flex align-items-center"> <slot name="topLeft"></slot> <h5 ref="graphTitle" class="prometheus-graph-title gl-font-lg font-weight-bold text-truncate gl-mr-3" - tabindex="0" > {{ title }} </h5> @@ -299,7 +348,7 @@ export default { <alert-widget v-if="isContextualMenuShown && alertWidgetAvailable" class="mx-1" - :modal-id="`alert-modal-${graphData.id}`" + :modal-id="alertModalId" :alerts-endpoint="alertsEndpoint" :relevant-queries="graphData.metrics" :alerts-to-manage="getGraphAlerts(graphData.metrics)" @@ -314,7 +363,7 @@ export default { ref="contextualMenu" data-qa-selector="prometheus_graph_widgets" > - <div class="d-flex align-items-center"> + <div data-testid="dropdown-wrapper" class="d-flex align-items-center"> <gl-dropdown v-gl-tooltip toggle-class="shadow-none border-0" @@ -369,13 +418,13 @@ export default { </gl-dropdown-item> <gl-dropdown-item v-if="alertWidgetAvailable" - v-gl-modal="`alert-modal-${graphData.id}`" + v-gl-modal="alertModalId" data-qa-selector="alert_widget_menu_item" > {{ __('Alerts') }} </gl-dropdown-item> - <template v-if="graphData.links.length"> + <template v-if="graphData.links && graphData.links.length"> <gl-dropdown-divider /> <gl-dropdown-item v-for="(link, index) in graphData.links" |