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"