WIP add table vis to TimeMachine

ui/src/ifql/components/TimeMachineTable.tsx

@@ -0,0 +1,45 @@
+import React, {PureComponent} from 'react'
+import {Grid, GridCellProps, AutoSizer} from 'react-virtualized'
+
+import {ErrorHandling} from 'src/shared/decorators/errors'
+import {ScriptResult} from 'src/types'
+
+@ErrorHandling
+export default class TimeMachineTable extends PureComponent<ScriptResult> {
+  public render() {
+    const {data} = this.props
+
+    return (
+      <div style={{flex: '1 1 auto'}}>
+        <AutoSizer>
+          {({height, width}) => (
+            <Grid
+              className="table-graph--scroll-window"
+              cellRenderer={this.cellRenderer}
+              columnCount={data[0].length}
+              columnWidth={100}
+              height={height}
+              rowCount={data.length}
+              rowHeight={30}
+              width={width}
+            />
+          )}
+        </AutoSizer>
+      </div>
+    )
+  }
+
+  private cellRenderer = ({
+    columnIndex,
+    key,
+    rowIndex,
+    style,
+  }: GridCellProps): React.ReactNode => {
+    const {data} = this.props
+    return (
+      <div key={key} style={style}>
+        {data[rowIndex][columnIndex]}
+      </div>
+    )
+  }
+}

ui/src/ifql/components/TimeMachineVis.tsx

@@ -1,9 +1,9 @@
 import React, {PureComponent, CSSProperties} from 'react'
 
-import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import {ScriptResult, ScriptStatus} from 'src/types'
 import TableSidebar from 'src/ifql/components/TableSidebar'
+import TimeMachineTable from 'src/ifql/components/TimeMachineTable'
 import {HANDLE_PIXELS} from 'src/shared/constants'
 
 interface Props {
@@ -32,7 +32,9 @@ class TimeMachineVis extends PureComponent<Props, State> {
           onSelectResult={this.handleSelectResult}
         />
         <div className="time-machine--vis">
-          <FancyScrollbar />
+          {this.shouldShowTable && (
+            <TimeMachineTable {...this.selectedResult} />
+          )}
         </div>
       </div>
     )
@@ -47,6 +49,14 @@ class TimeMachineVis extends PureComponent<Props, State> {
       padding: `${HANDLE_PIXELS}px`,
     }
   }
+
+  private get shouldShowTable(): boolean {
+    return !!this.selectedResult
+  }
+
+  private get selectedResult(): ScriptResult {
+    return this.props.data.find(d => d.id === this.state.selectedResultID)
+  }
 }
 
 export default TimeMachineVis

ui/src/shared/parsing/ifql.ts

@@ -5,7 +5,10 @@ import uuid from 'uuid'
 import {ScriptResult} from 'src/types'
 
 export const parseResults = (resp: string): ScriptResult[] => {
-  return resp.split('\n\n').map(parseResult)
+  return resp
+    .trim()
+    .split('\n\n')
+    .map(parseResult)
 }
 
 export const parseResult = (raw: string, index: number): ScriptResult => {

ui/test/shared/parsing/constants.ts

@@ -1367,6 +1367,7 @@ export const RESPONSE_METADATA = `#datatype,string,long,dateTime:RFC3339,dateTim
 
 export const RESPONSE_NO_METADATA = `,result,table,_start,_stop,_time,_value,_field,_measurement,cpu,host
 ,,0,2018-05-23T17:42:29.536834648Z,2018-05-23T17:43:29.536834648Z,2018-05-23T17:42:29.654Z,0,usage_guest,cpu,cpu-total,WattsInfluxDB
+
 `
 
 export const RESPONSE_NO_MEASUREMENT = `,result,table,_start,_stop,_time,_value,_field,cpu,host
@@ -1893,4 +1894,6 @@ export const LARGE_RESPONSE = `#datatype,string,long,dateTime:RFC3339,dateTime:R
 #default,_result,,,,,,,,
 ,result,table,_start,_stop,_time,_value,_field,_measurement,host
 ,,241,1677-09-21T00:12:43.145224192Z,2018-05-22T22:39:17.042276772Z,2018-05-22T22:39:12.34Z,"1 day,  1:11",uptime_format,system,WattsInfluxDB
+
+
 `

ui/test/shared/parsing/ifql.test.ts

@@ -11,6 +11,7 @@ import {
 describe('IFQL response parser', () => {
   it('parseResults into the right number of tables', () => {
     const result = parseResults(LARGE_RESPONSE)
+
     expect(result).toHaveLength(47)
   })