diff options
Diffstat (limited to 'app/assets/javascripts/monitoring/components/charts/area.vue')
-rw-r--r-- | app/assets/javascripts/monitoring/components/charts/area.vue | 31 |
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 |