diff options
Diffstat (limited to 'app/assets/javascripts/monitoring/components/dashboard_panel.vue')
-rw-r--r-- | app/assets/javascripts/monitoring/components/dashboard_panel.vue | 43 |
1 files changed, 37 insertions, 6 deletions
diff --git a/app/assets/javascripts/monitoring/components/dashboard_panel.vue b/app/assets/javascripts/monitoring/components/dashboard_panel.vue index 48825fda5c8..9545a211bbd 100644 --- a/app/assets/javascripts/monitoring/components/dashboard_panel.vue +++ b/app/assets/javascripts/monitoring/components/dashboard_panel.vue @@ -6,8 +6,9 @@ import { GlResizeObserverDirective, GlIcon, GlLoadingIcon, - GlDropdown, - GlDropdownItem, + GlNewDropdown as GlDropdown, + GlNewDropdownItem as GlDropdownItem, + GlNewDropdownDivider as GlDropdownDivider, GlModal, GlModalDirective, GlTooltip, @@ -28,6 +29,7 @@ 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', @@ -43,6 +45,7 @@ export default { GlTooltip, GlDropdown, GlDropdownItem, + GlDropdownDivider, GlModal, }, directives: { @@ -115,9 +118,15 @@ export default { timeRange(state) { return state[this.namespace].timeRange; }, + dashboardTimezone(state) { + return state[this.namespace].dashboardTimezone; + }, metricsSavedToDb(state, getters) { return getters[`${this.namespace}/metricsSavedToDb`]; }, + selectedDashboard(state, getters) { + return getters[`${this.namespace}/selectedDashboard`]; + }, }), title() { return this.graphData?.title || ''; @@ -266,6 +275,9 @@ export default { this.$delete(this.allAlerts, alertPath); } }, + safeUrl(url) { + return isSafeURL(url) ? url : '#'; + }, }, panelTypes, }; @@ -276,7 +288,8 @@ export default { <slot name="topLeft"></slot> <h5 ref="graphTitle" - class="prometheus-graph-title gl-font-lg font-weight-bold text-truncate append-right-8" + class="prometheus-graph-title gl-font-lg font-weight-bold text-truncate gl-mr-3" + tabindex="0" > {{ title }} </h5> @@ -304,14 +317,13 @@ export default { <div class="d-flex align-items-center"> <gl-dropdown v-gl-tooltip - toggle-class="btn btn-transparent border-0" + toggle-class="shadow-none border-0" data-qa-selector="prometheus_widgets_dropdown" right - no-caret :title="__('More actions')" > <template slot="button-content"> - <gl-icon name="ellipsis_v" class="text-secondary" /> + <gl-icon name="ellipsis_v" class="dropdown-icon text-secondary" /> </template> <gl-dropdown-item v-if="expandBtnAvailable" @@ -362,6 +374,23 @@ export default { > {{ __('Alerts') }} </gl-dropdown-item> + + <template v-if="graphData.links.length"> + <gl-dropdown-divider /> + <gl-dropdown-item + v-for="(link, index) in graphData.links" + :key="index" + :href="safeUrl(link.url)" + class="text-break" + >{{ link.title }}</gl-dropdown-item + > + </template> + <template v-if="selectedDashboard && selectedDashboard.can_edit"> + <gl-dropdown-divider /> + <gl-dropdown-item ref="manageLinksItem" :href="selectedDashboard.project_blob_path">{{ + s__('Metrics|Manage chart links') + }}</gl-dropdown-item> + </template> </gl-dropdown> </div> </div> @@ -372,6 +401,7 @@ export default { :is="basicChartComponent" v-else-if="basicChartComponent" :graph-data="graphData" + :timezone="dashboardTimezone" v-bind="$attrs" v-on="$listeners" /> @@ -385,6 +415,7 @@ export default { :project-path="projectPath" :thresholds="getGraphAlertValues(graphData.metrics)" :group-id="groupId" + :timezone="dashboardTimezone" v-bind="$attrs" v-on="$listeners" @datazoom="onDatazoom" |