1 files changed, 15 insertions, 0 deletions
diff --git a/app/assets/javascripts/monitoring/components/panel_type.vue b/app/assets/javascripts/monitoring/components/panel_type.vue
index 3fbac71f3d7..96f62bc85ee 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 { __ } from '~/locale';
 import {
   GlDropdown,
   GlDropdownItem,
@@ -28,6 +29,10 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   props: {
+    clipboardText: {
+      type: String,
+      required: true,
+    },
     graphData: {
       type: Object,
       required: true,
@@ -76,6 +81,9 @@ export default {
     isPanelType(type) {
       return this.graphData.type && this.graphData.type === type;
     },
+    showToast() {
+      this.$toast.show(__('Link copied to clipboard'));
+    },
   },
 };
 </script>
@@ -116,6 +124,13 @@ export default {
         <gl-dropdown-item :href="downloadCsv" download="chart_metrics.csv">
           {{ __('Download CSV') }}
         </gl-dropdown-item>
+        <gl-dropdown-item
+          class="js-chart-link"
+          :data-clipboard-text="clipboardText"
+          @click="showToast"
+        >
+          {{ __('Generate link to chart') }}
+        </gl-dropdown-item>
         <gl-dropdown-item v-if="alertWidgetAvailable" v-gl-modal="`alert-modal-${index}`">
           {{ __('Alerts') }}
         </gl-dropdown-item>