feat(5994): csv download entire dataset (#6036)

* chore(5994): refactor out common steps of runQuery in shared query context

* feat(5994): ability to download raw csv blobs without any processing

* chore(5994): add eventing for end, plus size of payload. Make as separate events, such that can diff all start versus end events.

Author: wiedld

cypress/e2e/shared/fluxQueryBuilder.test.ts

@@ -1,4 +1,5 @@
 import {Organization} from '../../../src/types'
+const path = require('path')
 
 const DEFAULT_SCHEMA = {
   bucket: null,
@@ -106,6 +107,8 @@ describe('Script Builder', () => {
   })
 
   describe('Results display', () => {
+    const downloadsDirectory = Cypress.config('downloadsFolder')
+
     beforeEach(() => {
       resetSession()
       cy.setFeatureFlags({
@@ -137,6 +140,8 @@ describe('Script Builder', () => {
           }
         })
       })
+      cy.log('empty downloads directory')
+      cy.task('deleteDownloads', {dirPath: downloadsDirectory})
     })
 
     it('will allow querying of different data ranges', () => {
@@ -157,6 +162,14 @@ describe('Script Builder', () => {
     })
 
     describe('data completeness', () => {
+      const validateCsv = (csv: string, tableCnt: number) => {
+        cy.wrap(csv)
+          .then(doc => doc.trim().split('\n'))
+          .then(list => {
+            expect(list[list.length - 1]).contains(`,${tableCnt - 1},`)
+          })
+      }
+
       const runTest = (
         tableCnt: number,
         rowCnt: number,
@@ -186,6 +199,19 @@ describe('Script Builder', () => {
             .contains(`${tableCnt} tables`)
           cy.getByTestID('query-stat').contains(`${rowCnt} rows`)
         }
+
+        cy.log('will download complete csv data')
+        cy.getByTestID('data-explorer--csv-download').should('exist').click()
+        const filename = path.join(downloadsDirectory, 'influx.data.csv')
+        if (tableCnt == 0) {
+          cy.readFile(filename, {timeout: 15000})
+            .should('have.length.lt', 50)
+            .then(csv => csv.trim() == '')
+        } else {
+          cy.readFile(filename, {timeout: 15000})
+            .should('have.length.gt', 50)
+            .then(csv => validateCsv(csv, tableCnt))
+        }
       }
 
       it('will return 0 tables and 0 rows, for an empty dataset', () => {

cypress/plugins/index.js

@@ -1,4 +1,6 @@
 const clipboardy = require('clipboardy')
+const path = require('path')
+const fs = require('fs')
 
 module.exports = on => {
   on('before:browser:launch', (browser = {}, launchOptions) => {
@@ -37,5 +39,18 @@ module.exports = on => {
       getClipboard: () => {
         return clipboardy.readSync()
       },
+      deleteDownloads({dirPath}) {
+        fs.readdir(dirPath, (err, files) => {
+          if (!files) {
+            return
+          }
+          for (const file of files) {
+            fs.unlink(path.join(dirPath, file), err => {
+              console.log('Removed ' + file)
+            })
+          }
+        })
+        return null
+      },
     })
 }

src/dataExplorer/components/ResultsPane.tsx

@@ -1,5 +1,12 @@
 // Libraries
-import React, {FC, lazy, Suspense, useContext, useCallback} from 'react'
+import React, {
+  FC,
+  lazy,
+  Suspense,
+  useContext,
+  useCallback,
+  useState,
+} from 'react'
 import {
   DraggableResizer,
   Orientation,
@@ -15,6 +22,7 @@ import {
   JustifyContent,
   AlignItems,
   Icon,
+  ComponentColor,
 } from '@influxdata/clockface'
 
 // Contexts
@@ -34,9 +42,10 @@ import {TimeRange} from 'src/types'
 
 // Utils
 import {getRangeVariable} from 'src/variables/utils/getTimeRangeVars'
-import {downloadTextFile} from 'src/shared/utils/download'
+import {downloadBlob} from 'src/shared/utils/download'
 import {event} from 'src/cloud/utils/reporting'
 import {notify} from 'src/shared/actions/notifications'
+import {bytesFormatter} from 'src/shared/copy/notifications/common'
 import {getWindowPeriodVariableFromVariables} from 'src/variables/utils/getWindowVars'
 
 // Constants
@@ -101,24 +110,33 @@ const ResultsPane: FC = () => {
     setRange,
     selection,
   } = useContext(PersistanceContext)
+  const [csvDownloadCancelID, setCancelId] = useState(null)
 
   const submitButtonDisabled = !text && !selection.measurement
 
   const disabledTitleText = submitButtonDisabled
     ? 'Select measurement before running script'
     : ''
 
-  const download = () => {
+  const download = async () => {
     event('CSV Download Initiated')
-    basic(text, {
-      vars: rangeToParam(range),
-    }).promise.then(response => {
-      if (response.type !== 'SUCCESS') {
-        return
-      }
+    const promise = basic(
+      text,
+      {
+        vars: rangeToParam(range),
+      },
+      {rawBlob: true}
+    )
+    setCancelId(promise.id)
 
-      downloadTextFile(response.csv, 'influx.data', '.csv', 'text/csv')
-    })
+    const response = await promise.promise
+    if (response.type !== 'SUCCESS') {
+      return
+    }
+    setCancelId(null)
+    downloadBlob(response.csv, 'influx.data', '.csv')
+    event('CSV size', {size: bytesFormatter(response.bytesRead)})
+    event('CSV Download End')
   }
 
   const submit = useCallback(() => {
@@ -201,15 +219,27 @@ const ResultsPane: FC = () => {
               margin={ComponentSize.Small}
             >
               <QueryTime />
-              <Button
-                titleText="Download query results as a .CSV file"
-                text="CSV"
-                icon={IconFont.Download_New}
-                onClick={download}
-                status={
-                  text ? ComponentStatus.Default : ComponentStatus.Disabled
-                }
-              />
+              {csvDownloadCancelID == null ? (
+                <Button
+                  titleText="Download query results as a .CSV file"
+                  text="CSV"
+                  icon={IconFont.Download_New}
+                  onClick={download}
+                  status={
+                    text ? ComponentStatus.Default : ComponentStatus.Disabled
+                  }
+                  testID="data-explorer--csv-download"
+                />
+              ) : (
+                <Button
+                  text="Cancel"
+                  onClick={() => {
+                    cancel(csvDownloadCancelID)
+                    setCancelId(null)
+                  }}
+                  color={ComponentColor.Danger}
+                />
+              )}
               {isFlagEnabled('newTimeRangeComponent') ? (
                 <NewDatePicker />
               ) : (