fix(5994): timeMachine download complete csv (#6062)

* fix(5994): have timeMachine submit and download query be identical, and have saem error notifcation to user. Then have download query post-network call processing be different, to avoid truncation.

* chore(5994): regression test for old timeMachine, can at least download the file with contents

* chore(5994): make controller private prop not have preceeding underscore

* feat(5994): switch to using direct download to the filesystem, triggered by application of the appropriate headers.

* fix(5994): fix downloads explorer test

* chore(5994): code clean of naming and error messaging

Author: wiedld

cypress/e2e/shared/explorer.test.ts

@@ -2,6 +2,8 @@ import {Organization} from '../../../src/types'
 import {points} from '../../support/commands'
 
 describe('DataExplorer', () => {
+  let route: string
+
   beforeEach(() => {
     cy.flush()
     cy.signin()
@@ -15,7 +17,8 @@ describe('DataExplorer', () => {
     cy.get('@org').then(({id}: Organization) => {
       cy.createMapVariable(id)
       cy.fixture('routes').then(({orgs, explorer}) => {
-        cy.visit(`${orgs}/${id}${explorer}`)
+        route = `${orgs}/${id}${explorer}`
+        cy.visit(route)
         cy.getByTestID('tree-nav').should('be.visible')
       })
     })
@@ -909,4 +912,54 @@ describe('DataExplorer', () => {
       })
     })
   })
+
+  describe('download csv', () => {
+    // docs for how to test form submission as file download:
+    // https://github.com/cypress-io/cypress-example-recipes/blob/cc13866e55bd28e1d1323ba6d498d85204f292b5/examples/testing-dom__download/cypress/e2e/form-submission-spec.cy.js
+    const downloadsDirectory = Cypress.config('downloadsFolder')
+
+    const validateCsv = (csv: string, rowCnt: number) => {
+      const numHeaderRows = 4
+      cy.wrap(csv)
+        .then(doc => doc.trim().split('\n'))
+        .then(list => {
+          expect(list.length).to.equal(rowCnt + numHeaderRows)
+        })
+    }
+
+    beforeEach(() => {
+      cy.writeData(points(20))
+      cy.task('deleteDownloads', {dirPath: downloadsDirectory})
+      cy.getByTestID('switch-to-script-editor').should('be.visible').click()
+    })
+
+    it('can download a file', () => {
+      cy.intercept('POST', '/api/v2/query?*', req => {
+        req.redirect(route)
+      }).as('query')
+
+      cy.getByTestID('time-machine--bottom').within(() => {
+        cy.getByTestID('flux-editor', {timeout: 30000}).should('be.visible')
+          .monacoType(`from(bucket: "defbuck")
+  |> range(start: -10h)`)
+        cy.getByTestID('time-machine--download-csv')
+          .should('be.visible')
+          .click()
+      })
+
+      cy.wait('@query')
+        .its('request')
+        .then(req => {
+          cy.request(req)
+            .then(({body, headers}) => {
+              expect(headers).to.have.property(
+                'content-type',
+                'text/csv; charset=utf-8'
+              )
+              return Promise.resolve(body)
+            })
+            .then(csv => validateCsv(csv, 1))
+        })
+    })
+  })
 })

src/shared/components/CSVExportButton.tsx

@@ -1,72 +1,93 @@
 // Libraries
 import React, {PureComponent} from 'react'
-import {connect} from 'react-redux'
+import {connect, ConnectedProps} from 'react-redux'
 
 // Components
 import {Button, ComponentStatus, IconFont} from '@influxdata/clockface'
 
-// Utils
-import {downloadTextFile} from 'src/shared/utils/download'
-import {getActiveTimeMachine} from 'src/timeMachine/selectors'
-import {createDateTimeFormatter} from 'src/utils/datetime/formatters'
+// Selectors and Actions
+import {getActiveQuery} from 'src/timeMachine/selectors'
+import {runDownloadQuery} from 'src/timeMachine/actions/queries'
 
 // Types
 import {AppState} from 'src/types'
 
-interface StateProps {
-  files: string[] | null
+// Worker
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import downloadWorker from 'worker-plugin/loader!../workers/downloadHelper'
+
+type Props = ConnectedProps<typeof connector>
+
+interface State {
+  browserSupportsDownload: boolean
 }
 
-class CSVExportButton extends PureComponent<StateProps, {}> {
+class CSVExportButton extends PureComponent<Props, State> {
+  constructor(props) {
+    super(props)
+    this.state = {browserSupportsDownload: false}
+
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register(downloadWorker).then(
+        () => this.setState({browserSupportsDownload: true}),
+        function (err) {
+          console.error(
+            'Feature not available, because ServiceWorker registration failed: ',
+            err
+          )
+        }
+      )
+    }
+  }
+
   public render() {
+    if (!this.state.browserSupportsDownload) {
+      return null
+    }
+
     return (
       <Button
         titleText={this.titleText}
         text="CSV"
         icon={IconFont.Download_New}
         onClick={this.handleClick}
-        status={this.buttonStatus}
+        status={
+          this.props.disabled
+            ? ComponentStatus.Disabled
+            : ComponentStatus.Default
+        }
+        testID="time-machine--download-csv"
       />
     )
   }
 
-  private get buttonStatus(): ComponentStatus {
-    const {files} = this.props
-
-    if (files) {
-      return ComponentStatus.Default
-    }
-
-    return ComponentStatus.Disabled
-  }
-
   private get titleText(): string {
-    const {files} = this.props
+    const {disabled} = this.props
 
-    if (files) {
+    if (!disabled) {
       return 'Download query results as a .CSV file'
     }
 
     return 'Create a query in order to download results as .CSV'
   }
 
   private handleClick = () => {
-    const {files} = this.props
-    const formatter = createDateTimeFormatter('YYYY-MM-DD HH:mm')
-    const csv = files.join('\n\n')
-    const now = formatter.format(new Date()).replace(/[:\s]+/gi, '_')
-    const filename = `${now} InfluxDB Data`
-
-    downloadTextFile(csv, filename, '.csv', 'text/csv')
+    this.props.download()
   }
 }
 
 const mstp = (state: AppState) => {
-  const {
-    queryResults: {files},
-  } = getActiveTimeMachine(state)
+  const activeQueryText = getActiveQuery(state).text
+  const disabled = activeQueryText === ''
+
+  return {disabled}
+}
 
-  return {files}
+const mdtp = {
+  download: runDownloadQuery,
 }
 
-export default connect<StateProps>(mstp)(CSVExportButton)
+const connector = connect(mstp, mdtp)
+
+export default connector(CSVExportButton)

src/shared/copy/notifications/categories/dashboard.ts

@@ -140,3 +140,8 @@ export const copyQueryFailure = (cellName: string = ''): Notification => {
     message: `There was an error copying the query${fromCellName}. Please try again.`,
   }
 }
+
+export const csvDownloadFailure = (): Notification => ({
+  ...defaultErrorNotification,
+  message: 'Failed to download csv.',
+})

src/shared/workers/downloadHelper.ts

@@ -0,0 +1,69 @@
+/*
+    Background:
+        * the traditional approaches to file downloads will load the data first into browser memory.
+        * this includes:
+            * reading the response.body ReadableStream
+            * converting to a file Blob
+        * there is a web API for FileSystem writes, but it's not implemented for Firefox.
+            * https://developer.mozilla.org/en-US/docs/Web/API/File_and_Directory_Entries_API/Firefox_support
+            * Firefox focused on uploadable streams from the fs. The result == firefox's web API does not support our use case.
+
+    In order to trigger a direct to filesystem download, bypassing the browser memory, we needed:
+        * have a response header:
+            * `Content-Disposition`
+            * which the server attaches in response to a request header `Prefer: return-download`
+        * have a form submission request:
+            * the XMLhttpRequest does not directly download, even with the appropriate header.
+            * cannot use the `a` tag download feature, as that is only GET requests
+            * a form submit is build into the browser to allow downloads. **this is the only approach**
+
+    To get the form submit to have a http request which looked like our normal query requests:
+        * we used a service worker, which can be an interceptor/listener for form submissions.
+            * forms themselves do not allow headers to be attached.
+        * then modify the headers, and parse the body to the appropriate format
+*/
+
+self.addEventListener('fetch', function (event: any) {
+  const contentType = (event.request.headers as Headers).get('Content-Type')
+  if (
+    new URL(event.request.url).pathname == '/api/v2/query' &&
+    contentType == 'application/x-www-form-urlencoded'
+  ) {
+    const headers = new Headers()
+    for (const [headerType, headerValue] of event.request.headers) {
+      switch (headerType) {
+        case 'content-type':
+          headers.append('Content-Type', 'application/json')
+          break
+        case 'accept':
+          headers.append('Accept', '*/*')
+          break
+        default:
+          headers.append(headerType, headerValue)
+      }
+    }
+    headers.append('Prefer', 'return-download')
+
+    return event.respondWith(
+      (async () => {
+        const body = (await event.request.formData()).get('data')
+        const request = new Request(event.request.url, {
+          body,
+          headers,
+          method: event.request.method,
+          mode: 'cors',
+          credentials: event.request.credentials,
+          signal: event.request.signal,
+          cache: event.request.cache,
+          referrer: event.request.referrer,
+          referrerPolicy: event.request.referrerPolicy,
+          redirect: event.request.redirect,
+          keepalive: true,
+        })
+        return fetch(request)
+      })()
+    )
+  } else {
+    event.respondWith(fetch(event.request))
+  }
+})