Automatically select table on initial render

ui/src/ifql/components/TimeMachineTable.tsx

@@ -37,7 +37,7 @@ export default class TimeMachineTable extends PureComponent<ScriptResult> {
   }: GridCellProps): React.ReactNode => {
     const {data} = this.props
     return (
-      <div key={key} style={style}>
+      <div key={key} style={style} className="table-graph-cell">
         {data[rowIndex][columnIndex]}
       </div>
     )

ui/src/ifql/components/TimeMachineVis.tsx

@@ -1,4 +1,5 @@
 import React, {PureComponent, CSSProperties} from 'react'
+import _ from 'lodash'
 
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import {ScriptResult, ScriptStatus} from 'src/types'
@@ -20,7 +21,13 @@ class TimeMachineVis extends PureComponent<Props, State> {
   constructor(props) {
     super(props)
 
-    this.state = {selectedResultID: null}
+    this.state = {selectedResultID: this.initialResultID}
+  }
+
+  public componentDidUpdate(__, prevState) {
+    if (prevState.selectedResultID === null) {
+      this.setState({selectedResultID: this.initialResultID})
+    }
   }
 
   public render() {
@@ -40,6 +47,10 @@ class TimeMachineVis extends PureComponent<Props, State> {
     )
   }
 
+  private get initialResultID(): string {
+    return _.get(this.props.data, '0.id', null)
+  }
+
   private handleSelectResult = (selectedResultID: string): void => {
     this.setState({selectedResultID})
   }
@@ -51,7 +62,7 @@ class TimeMachineVis extends PureComponent<Props, State> {
   }
 
   private get shouldShowTable(): boolean {
-    return !!this.selectedResult
+    return !!this.props.data && !!this.selectedResult
   }
 
   private get selectedResult(): ScriptResult {

ui/src/ifql/containers/CheckServices.tsx

@@ -36,6 +36,10 @@ export class CheckServices extends PureComponent<Props & WithRouterProps> {
   }
 
   public render() {
+    if (!this.props.services.length) {
+      return null
+    }
+
     return this.props.children
   }
 

ui/src/ifql/containers/IFQLPage.tsx

@@ -93,6 +93,7 @@ export class IFQLPage extends PureComponent<Props, State> {
     }
 
     this.getASTResponse(script)
+    this.getTimeSeries()
   }
 
   public render() {

ui/src/shared/parsing/ifql.ts

@@ -4,10 +4,10 @@ import uuid from 'uuid'
 
 import {ScriptResult} from 'src/types'
 
-export const parseResults = (resp: string): ScriptResult[] => {
-  return resp
+export const parseResults = (response: string): ScriptResult[] => {
+  return response
     .trim()
-    .split('\n\n')
+    .split(/\n\s*\n/)
     .map(parseResult)
 }