Add clipboard button to metric chart dropdown

Adds a clipboard button to the metrics dashboard, that allows
copying a link to an individual chart.

3 files changed, 42 insertions, 3 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 587392adbc3..dfeeba238ca 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -10,9 +10,9 @@ import {
 } from '@gitlab/ui';
 import _ from 'underscore';
 import { mapActions, mapState } from 'vuex';
-import { s__ } from '~/locale';
+import { __, s__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
-import { getParameterValues } from '~/lib/utils/url_utility';
+import { getParameterValues, mergeUrlParams } from '~/lib/utils/url_utility';
 import invalidUrl from '~/lib/utils/invalid_url';
 import MonitorAreaChart from './charts/area.vue';
 import MonitorSingleStatChart from './charts/single_stat.vue';
@@ -168,8 +168,11 @@ export default {
       'multipleDashboardsEnabled',
       'additionalPanelTypesEnabled',
     ]),
+    firstDashboard() {
+      return this.allDashboards[0] || {};
+    },
     selectedDashboardText() {
-      return this.currentDashboard || (this.allDashboards[0] && this.allDashboards[0].display_name);
+      return this.currentDashboard || this.firstDashboard.display_name;
     },
     addingMetricsAvailable() {
       return IS_EE && this.canAddMetrics && !this.showEmptyState;
@@ -258,6 +261,14 @@ export default {
     getGraphAlertValues(queries) {
       return Object.values(this.getGraphAlerts(queries));
     },
+    showToast() {
+      this.$toast.show(__('Link copied to clipboard'));
+    },
+    generateLink(group, title, yLabel) {
+      const dashboard = this.currentDashboard || this.firstDashboard.path;
+      const params = { dashboard, group, title, y_label: yLabel };
+      return mergeUrlParams(params, window.location.href);
+    },
     // TODO: END
     hideAddMetricModal() {
       this.$refs.addMetricModal.hide();
@@ -435,6 +446,7 @@ export default {
           <panel-type
             v-for="(graphData, graphIndex) in groupData.metrics"
             :key="`panel-type-${graphIndex}`"
+            :clipboard-text="generateLink(groupData.group, graphData.title, graphData.y_label)"
             :graph-data="graphData"
             :dashboard-width="elWidth"
             :index="`${index}-${graphIndex}`"
@@ -475,6 +487,15 @@ export default {
                   {{ __('Download CSV') }}
                 </gl-dropdown-item>
                 <gl-dropdown-item
+                  class="js-chart-link"
+                  :data-clipboard-text="
+                    generateLink(groupData.group, graphData.title, graphData.y_label)
+                  "
+                  @click="showToast"
+                >
+                  {{ __('Generate link to chart') }}
+                </gl-dropdown-item>
+                <gl-dropdown-item
                   v-if="alertWidgetAvailable"
                   v-gl-modal="`alert-modal-${index}-${graphIndex}`"
                 >
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>
diff --git a/app/assets/javascripts/monitoring/monitoring_bundle.js b/app/assets/javascripts/monitoring/monitoring_bundle.js
index c0fee1ebb99..51cef20455c 100644
--- a/app/assets/javascripts/monitoring/monitoring_bundle.js
+++ b/app/assets/javascripts/monitoring/monitoring_bundle.js
@@ -1,9 +1,12 @@
 import Vue from 'vue';
+import { GlToast } from '@gitlab/ui';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import { getParameterValues } from '~/lib/utils/url_utility';
 import Dashboard from 'ee_else_ce/monitoring/components/dashboard.vue';
 import store from './stores';
 
+Vue.use(GlToast);
+
 export default (props = {}) => {
   const el = document.getElementById('prometheus-graphs');