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"