Merge pull request #4065 from influxdata/fix/download-csv

Fix cell CSV downloading

ui/src/shared/components/Layout.tsx

@@ -17,6 +17,7 @@ import {IS_STATIC_LEGEND} from 'src/shared/constants'
 import {TimeRange, Cell, Template, Source} from 'src/types'
 
 import {ErrorHandling} from 'src/shared/decorators/errors'
+import {GrabDataForDownloadHandler} from 'src/types/layout'
 
 interface Props {
   cell: Cell
@@ -94,7 +95,7 @@ class Layout extends Component<Props> {
     )
   }
 
-  private grabDataForDownload = cellData => {
+  private grabDataForDownload: GrabDataForDownloadHandler = cellData => {
     this.setState({cellData})
   }
 

ui/src/shared/components/RefreshingGraph.tsx

@@ -24,6 +24,7 @@ import {setHoverTime} from 'src/dashboards/actions'
 import {ColorString} from 'src/types/colors'
 import {Source, Axes, TimeRange, Template, Query, CellType} from 'src/types'
 import {TableOptions, FieldOption, DecimalPlaces} from 'src/types/dashboards'
+import {GrabDataForDownloadHandler} from 'src/types/layout'
 
 interface Props {
   axes: Axes
@@ -48,8 +49,8 @@ interface Props {
   onZoom: () => void
   editQueryStatus: () => void
   onSetResolution: () => void
-  grabDataForDownload: () => void
   handleSetHoverTime: () => void
+  grabDataForDownload?: GrabDataForDownloadHandler
 }
 
 class RefreshingGraph extends PureComponent<Props> {
@@ -69,6 +70,7 @@ class RefreshingGraph extends PureComponent<Props> {
       source,
       templates,
       editQueryStatus,
+      grabDataForDownload,
     } = this.props
 
     if (!queries.length) {
@@ -86,6 +88,7 @@ class RefreshingGraph extends PureComponent<Props> {
         queries={this.queries}
         templates={templates}
         editQueryStatus={editQueryStatus}
+        grabDataForDownload={grabDataForDownload}
       >
         {({timeSeries, loading}) => {
           switch (type) {
@@ -129,7 +132,6 @@ class RefreshingGraph extends PureComponent<Props> {
       decimalPlaces,
       manualRefresh,
       handleSetHoverTime,
-      grabDataForDownload,
       isInCEO,
     } = this.props
 
@@ -143,7 +145,6 @@ class RefreshingGraph extends PureComponent<Props> {
         fieldOptions={fieldOptions}
         timeFormat={timeFormat}
         decimalPlaces={decimalPlaces}
-        grabDataForDownload={grabDataForDownload}
         handleSetHoverTime={handleSetHoverTime}
       />
     )

ui/src/shared/components/time_series/TimeSeries.tsx

@@ -8,6 +8,7 @@ import {fetchTimeSeries} from 'src/shared/apis/query'
 // Types
 import {Template, Source, Query, RemoteDataState} from 'src/types'
 import {TimeSeriesServerResponse, TimeSeriesResponse} from 'src/types/series'
+import {GrabDataForDownloadHandler} from 'src/types/layout'
 
 // Utils
 import AutoRefresh from 'src/utils/AutoRefresh'
@@ -26,6 +27,7 @@ interface Props {
   inView?: boolean
   templates?: Template[]
   editQueryStatus?: () => void
+  grabDataForDownload?: GrabDataForDownloadHandler
 }
 
 interface State {
@@ -68,7 +70,14 @@ class TimeSeries extends Component<Props, State> {
   }
 
   public executeQueries = async (isFirstFetch: boolean = false) => {
-    const {source, inView, queries, templates, editQueryStatus} = this.props
+    const {
+      source,
+      inView,
+      queries,
+      templates,
+      editQueryStatus,
+      grabDataForDownload,
+    } = this.props
 
     if (!inView) {
       return
@@ -99,6 +108,10 @@ class TimeSeries extends Component<Props, State> {
         timeSeries: newSeries,
         loading: RemoteDataState.Done,
       })
+
+      if (grabDataForDownload) {
+        grabDataForDownload(newSeries)
+      }
     } catch (err) {
       this.setState({
         timeSeries: [],

ui/src/types/layout.ts

@@ -0,0 +1,5 @@
+import {TimeSeriesServerResponse} from 'src/types/series'
+
+export type GrabDataForDownloadHandler = (
+  timeSeries: TimeSeriesServerResponse[]
+) => void