Make query required in table and remove redundancy

ui/src/data_explorer/components/QueryBuilder.js

@@ -40,20 +40,16 @@ const QueryBuilder = React.createClass({
     children: node,
   },
 
-  handleSetActiveQueryIndex(index) {
-    this.props.setActiveQueryIndex(index)
-  },
-
   handleAddQuery() {
     const newIndex = this.props.queries.length
     this.props.actions.addQuery()
-    this.handleSetActiveQueryIndex(newIndex)
+    this.props.setActiveQueryIndex(newIndex)
   },
 
   handleAddRawQuery() {
     const newIndex = this.props.queries.length
     this.props.actions.addQuery({rawText: ''})
-    this.handleSetActiveQueryIndex(newIndex)
+    this.props.setActiveQueryIndex(newIndex)
   },
 
   getActiveQuery() {
@@ -99,7 +95,7 @@ const QueryBuilder = React.createClass({
   },
 
   renderQueryTabList() {
-    const {queries, activeQueryIndex, onDeleteQuery, timeRange} = this.props
+    const {queries, activeQueryIndex, onDeleteQuery, timeRange, setActiveQueryIndex} = this.props
     return (
       <div className="query-builder--tabs">
         <div className="query-builder--tabs-heading">
@@ -113,7 +109,7 @@ const QueryBuilder = React.createClass({
               key={i}
               queryIndex={i}
               query={q}
-              onSelect={this.handleSetActiveQueryIndex}
+              onSelect={setActiveQueryIndex}
               onDelete={onDeleteQuery}
               queryTabText={q.rawText || buildInfluxQLQuery(timeRange, q) || `Query ${i + 1}`}
             />

ui/src/data_explorer/components/Table.js

@@ -35,7 +35,7 @@ const ChronoTable = React.createClass({
     query: shape({
       host: arrayOf(string.isRequired).isRequired,
       text: string.isRequired,
-    }),
+    }).isRequired,
     containerWidth: number.isRequired,
     height: number,
     onEditRawStatus: func.isRequired,
@@ -54,6 +54,19 @@ const ChronoTable = React.createClass({
     }
   },
 
+  componentDidMount() {
+    this.fetchCellData(this.props.query)
+  },
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.query.text === nextProps.query.text) {
+      return
+    }
+
+    this.fetchCellData(nextProps.query)
+  },
+
+
   async fetchCellData(query) {
     if (!query || !query.text) {
       return
@@ -93,22 +106,6 @@ const ChronoTable = React.createClass({
     }
   },
 
-  componentDidMount() {
-    this.fetchCellData(this.props.query)
-  },
-
-  componentWillReceiveProps(nextProps) {
-    if (!this.props.query || !nextProps.query) {
-      return
-    }
-
-    if (this.props.query.text === nextProps.query.text) {
-      return
-    }
-
-    this.fetchCellData(nextProps.query)
-  },
-
   handleColumnResize(newColumnWidth, columnKey) {
     this.setState(({columnWidths}) => ({
       columnWidths: Object.assign({}, columnWidths, {

ui/src/data_explorer/components/Visualization.js

@@ -102,12 +102,13 @@ const Visualization = React.createClass({
   renderVisualization(view, queries, heightPixels, onEditRawStatus, activeQueryIndex) {
     const activeQuery = queries[activeQueryIndex]
     const defaultQuery = queries[0]
+    const q = activeQuery || defaultQuery
 
     switch (view) {
       case GRAPH:
         return this.renderGraph(queries)
       case TABLE:
-        return (<Table query={activeQuery || defaultQuery} height={heightPixels} onEditRawStatus={onEditRawStatus} />)
+        return (q ? <Table query={activeQuery || defaultQuery} height={heightPixels} onEditRawStatus={onEditRawStatus} /> : null)
       default:
         this.renderGraph(queries)
     }