1 files changed, 28 insertions, 3 deletions
diff --git a/app/assets/javascripts/monitoring/components/charts/area.vue b/app/assets/javascripts/monitoring/components/charts/area.vue
index edf9423c74c..5b950f8c966 100644
--- a/app/assets/javascripts/monitoring/components/charts/area.vue
+++ b/app/assets/javascripts/monitoring/components/charts/area.vue
@@ -1,6 +1,7 @@
 <script>
 import { __ } from '~/locale';
-import { GlLink } from '@gitlab/ui';
+import { mapState } from 'vuex';
+import { GlLink, GlButton } from '@gitlab/ui';
 import { GlAreaChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
 import dateFormat from 'dateformat';
 import { debounceByAnimationFrame, roundOffFloat } from '~/lib/utils/common_utils';
@@ -15,6 +16,7 @@ let debouncedResize;
 export default {
   components: {
     GlAreaChart,
+    GlButton,
     GlChartSeriesLabel,
     GlLink,
     Icon,
@@ -67,6 +69,7 @@ export default {
     };
   },
   computed: {
+    ...mapState('monitoringDashboard', ['exportMetricsToCsvEnabled']),
     chartData() {
       // Transforms & supplements query data to render appropriate labels & styles
       // Input: [{ queryAttributes1 }, { queryAttributes2 }]
@@ -176,6 +179,18 @@ export default {
     yAxisLabel() {
       return `${this.graphData.y_label}`;
     },
+    csvText() {
+      const chartData = this.chartData[0].data;
+      const header = `timestamp,${this.graphData.y_label}\r\n`; // eslint-disable-line @gitlab/i18n/no-non-i18n-strings
+      return chartData.reduce((csv, data) => {
+        const row = data.join(',');
+        return `${csv}${row}\r\n`;
+      }, header);
+    },
+    downloadLink() {
+      const data = new Blob([this.csvText], { type: 'text/plain' });
+      return window.URL.createObjectURL(data);
+    },
   },
   watch: {
     containerWidth: 'onResize',
@@ -240,10 +255,20 @@ export default {
 </script>
 
 <template>
-  <div class="col-12 col-lg-6" :class="[showBorder ? 'p-2' : 'p-0']">
-    <div class="prometheus-graph" :class="{ 'prometheus-graph-embed w-100 p-3': showBorder }">
+  <div class="prometheus-graph col-12 col-lg-6" :class="[showBorder ? 'p-2' : 'p-0']">
+    <div :class="{ 'prometheus-graph-embed w-100 p-3': showBorder }">
       <div class="prometheus-graph-header">
         <h5 ref="graphTitle" class="prometheus-graph-title">{{ graphData.title }}</h5>
+        <gl-button
+          v-if="exportMetricsToCsvEnabled"
+          :href="downloadLink"
+          :title="__('Download CSV')"
+          :aria-label="__('Download CSV')"
+          style="margin-left: 200px;"
+          download="chart_metrics.csv"
+        >
+          {{ __('Download CSV') }}
+        </gl-button>
         <div ref="graphWidgets" class="prometheus-graph-widgets"><slot></slot></div>
       </div>
       <gl-area-chart