Adds download CSV functionality to dropdown in metrics

This MR adds the functionality to download metrics data
as CSV. It also removes the exportMetricsToCsvEnabled feature
flag which was used before the dropdown was implemented to
display a button.

2 files changed, 34 insertions, 30 deletions

diff --git a/spec/javascripts/monitoring/charts/area_spec.js b/spec/javascripts/monitoring/charts/area_spec.js
index 4541119dd2e..57f99a09002 100644
--- a/spec/javascripts/monitoring/charts/area_spec.js
+++ b/spec/javascripts/monitoring/charts/area_spec.js
@@ -24,7 +24,6 @@ describe('Area component', () => {
     store.commit(`monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`, MonitoringMock.data);
     store.commit(`monitoringDashboard/${types.RECEIVE_DEPLOYMENTS_DATA_SUCCESS}`, deploymentData);
 
-    store.dispatch('monitoringDashboard/setFeatureFlags', { exportMetricsToCsvEnabled: true });
     [mockGraphData] = store.state.monitoringDashboard.groups[0].metrics;
 
     areaChart = shallowMount(Area, {
@@ -109,16 +108,6 @@ describe('Area component', () => {
     });
   });
 
-  describe('when exportMetricsToCsvEnabled is disabled', () => {
-    beforeEach(() => {
-      store.dispatch('monitoringDashboard/setFeatureFlags', { exportMetricsToCsvEnabled: false });
-    });
-
-    it('does not render the Download CSV button', () => {
-      expect(areaChart.contains('glbutton-stub')).toBe(false);
-    });
-  });
-
   describe('methods', () => {
     describe('formatTooltipText', () => {
       const mockDate = deploymentData[0].created_at;
@@ -264,23 +253,5 @@ describe('Area component', () => {
         expect(areaChart.vm.yAxisLabel).toBe('CPU');
       });
     });
-
-    describe('csvText', () => {
-      it('converts data from json to csv', () => {
-        const header = `timestamp,${mockGraphData.y_label}`;
-        const data = mockGraphData.queries[0].result[0].values;
-        const firstRow = `${data[0][0]},${data[0][1]}`;
-
-        expect(areaChart.vm.csvText).toMatch(`^${header}\r\n${firstRow}`);
-      });
-    });
-
-    describe('downloadLink', () => {
-      it('produces a link to download metrics as csv', () => {
-        const link = areaChart.vm.downloadLink;
-
-        expect(link).toContain('blob:');
-      });
-    });
   });
 });
diff --git a/spec/javascripts/monitoring/dashboard_spec.js b/spec/javascripts/monitoring/dashboard_spec.js
index 36f650d5933..b78896c45fc 100644
--- a/spec/javascripts/monitoring/dashboard_spec.js
+++ b/spec/javascripts/monitoring/dashboard_spec.js
@@ -5,7 +5,7 @@ import { timeWindows, timeWindowsKeyNames } from '~/monitoring/constants';
 import * as types from '~/monitoring/stores/mutation_types';
 import { createStore } from '~/monitoring/stores';
 import axios from '~/lib/utils/axios_utils';
-import {
+import MonitoringMock, {
   metricsGroupsAPIResponse,
   mockApiEndpoint,
   environmentData,
@@ -40,6 +40,7 @@ describe('Dashboard', () => {
   let mock;
   let store;
   let component;
+  let mockGraphData;
 
   beforeEach(() => {
     setFixtures(`
@@ -482,4 +483,36 @@ describe('Dashboard', () => {
       });
     });
   });
+
+  describe('when downloading metrics data as CSV', () => {
+    beforeEach(() => {
+      component = new DashboardComponent({
+        propsData: {
+          ...propsData,
+        },
+        store,
+      });
+      store.commit(
+        `monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`,
+        MonitoringMock.data,
+      );
+      [mockGraphData] = component.$store.state.monitoringDashboard.groups[0].metrics;
+    });
+
+    describe('csvText', () => {
+      it('converts metrics data from json to csv', () => {
+        const header = `timestamp,${mockGraphData.y_label}`;
+        const data = mockGraphData.queries[0].result[0].values;
+        const firstRow = `${data[0][0]},${data[0][1]}`;
+
+        expect(component.csvText(mockGraphData)).toMatch(`^${header}\r\n${firstRow}`);
+      });
+    });
+
+    describe('downloadCsv', () => {
+      it('produces a link with a Blob', () => {
+        expect(component.downloadCsv(mockGraphData)).toContain(`blob:`);
+      });
+    });
+  });
 });