1 files changed, 33 insertions, 8 deletions
diff --git a/app/assets/javascripts/monitoring/components/panel_type.vue b/app/assets/javascripts/monitoring/components/panel_type.vue
index f1f02964a29..295c0851f12 100644
--- a/app/assets/javascripts/monitoring/components/panel_type.vue
+++ b/app/assets/javascripts/monitoring/components/panel_type.vue
@@ -1,6 +1,7 @@
 <script>
 import { mapState } from 'vuex';
 import _ from 'underscore';
+import { GlDropdown, GlDropdownItem, GlModal, GlModalDirective } from '@gitlab/ui';
 import MonitorAreaChart from './charts/area.vue';
 import MonitorSingleStatChart from './charts/single_stat.vue';
 import MonitorEmptyChart from './charts/empty_chart.vue';
@@ -10,6 +11,12 @@ export default {
     MonitorAreaChart,
     MonitorSingleStatChart,
     MonitorEmptyChart,
+    GlDropdown,
+    GlDropdownItem,
+    GlModal,
+  },
+  directives: {
+    GlModal: GlModalDirective,
   },
   props: {
     graphData: {
@@ -64,14 +71,32 @@ export default {
     :container-width="dashboardWidth"
     group-id="monitor-area-chart"
   >
-    <alert-widget
-      v-if="alertWidgetAvailable"
-      :alerts-endpoint="alertsEndpoint"
-      :relevant-queries="graphData.queries"
-      :alerts-to-manage="getGraphAlerts(graphData.queries)"
-      :modal-id="`alert-modal-${index}`"
-      @setAlerts="setAlerts"
-    />
+    <div class="d-flex align-items-center">
+      <alert-widget
+        v-if="alertWidgetAvailable && graphData"
+        :modal-id="`alert-modal-${index}`"
+        :alerts-endpoint="alertsEndpoint"
+        :relevant-queries="graphData.queries"
+        :alerts-to-manage="getGraphAlerts(graphData.queries)"
+        @setAlerts="setAlerts"
+      />
+      <gl-dropdown
+        v-if="alertWidgetAvailable"
+        v-gl-tooltip
+        class="mx-2"
+        toggle-class="btn btn-transparent border-0"
+        :right="true"
+        :no-caret="true"
+        :title="__('More actions')"
+      >
+        <template slot="button-content">
+          <icon name="ellipsis_v" class="text-secondary" />
+        </template>
+        <gl-dropdown-item v-if="alertWidgetAvailable" v-gl-modal="`alert-modal-${index}`">
+          {{ __('Alerts') }}
+        </gl-dropdown-item>
+      </gl-dropdown>
+    </div>
   </monitor-area-chart>
   <monitor-empty-chart v-else :graph-title="graphData.title" />
 </template>