Remove MultiTable

ui/src/data_explorer/components/MultiTable.js

@@ -1,94 +0,0 @@
-import React, {PropTypes} from 'react'
-import Table from './Table'
-import classNames from 'classnames'
-
-const {
-  arrayOf,
-  bool,
-  func,
-  number,
-  shape,
-  string,
-} = PropTypes
-
-const MultiTable = React.createClass({
-  propTypes: {
-    queries: arrayOf(shape({
-      host: arrayOf(string.isRequired).isRequired,
-      text: string.isRequired,
-    })),
-    height: number,
-    onEditRawStatus: func.isRequired,
-    activeQueryIndex: number,
-    onSetActiveQueryIndex: func.isRequired,
-  },
-
-  getActiveQuery() {
-    const {queries, activeQueryIndex} = this.props
-    const activeQuery = queries[activeQueryIndex]
-    const defaultQuery = queries[0]
-
-    return activeQuery || defaultQuery
-  },
-
-  render() {
-    return (
-      <div>
-        {this.renderTabs()}
-        {this.renderTable()}
-      </div>
-    )
-  },
-
-  renderTable() {
-    const {height, onEditRawStatus} = this.props
-    const query = this.getActiveQuery()
-    const noQuery = !query || !query.text
-    if (noQuery) {
-      return null
-    }
-
-    return <Table key={query.text} query={query} height={height} onEditRawStatus={onEditRawStatus} />
-  },
-
-  renderTabs() {
-    const {queries, onSetActiveQueryIndex} = this.props
-    return (
-      <div className="multi-table__tabs">
-        {queries.map((q, i) => {
-          return (
-            <TabItem
-              isActive={this.getActiveQuery().id === q.id}
-              key={q.id}
-              query={q}
-              onSelect={() => onSetActiveQueryIndex(i)}
-            />
-          )
-        })}
-      </div>
-    )
-  },
-})
-
-const TabItem = React.createClass({
-  propTypes: {
-    query: shape({
-      text: string.isRequired,
-      id: string.isRequired,
-      host: arrayOf(string.isRequired).isRequired,
-    }).isRequired,
-    onSelect: func.isRequired,
-    isActive: bool.isRequired,
-  },
-
-  render() {
-    const {isActive, onSelect} = this.props
-    return (
-      <div className={classNames("multi-table__tab", {active: isActive})} onClick={onSelect}>
-        {"Query"}
-      </div>
-    )
-  },
-})
-
-export default MultiTable

ui/src/data_explorer/components/QueryBuilder.js

@@ -3,6 +3,7 @@ import React, {PropTypes} from 'react'
 import QueryEditor from './QueryEditor'
 import QueryTabItem from './QueryTabItem'
 import SimpleDropdown from 'src/shared/components/SimpleDropdown'
+import buildInfluxQLQuery from 'utils/influxql'
 
 const {
   arrayOf,
@@ -98,7 +99,7 @@ const QueryBuilder = React.createClass({
   },
 
   renderQueryTabList() {
-    const {queries, activeQueryIndex, onDeleteQuery} = this.props
+    const {queries, activeQueryIndex, onDeleteQuery, timeRange} = this.props
     return (
       <div className="query-builder--tabs">
         <div className="query-builder--tabs-heading">
@@ -106,15 +107,6 @@ const QueryBuilder = React.createClass({
           {this.renderAddQuery()}
         </div>
         {queries.map((q, i) => {
-          let queryTabText
-          if (q.rawText) {
-            queryTabText = 'Query Editor'
-          } else if (q.measurement && q.fields.length !== 0) {
-            queryTabText = `${q.measurement}.${q.fields[0].field}`
-          } else {
-            queryTabText = 'Query Builder'
-          }
-
           return (
             <QueryTabItem
               isActive={i === activeQueryIndex}
@@ -123,7 +115,7 @@ const QueryBuilder = React.createClass({
               query={q}
               onSelect={this.handleSetActiveQueryIndex}
               onDelete={onDeleteQuery}
-              queryTabText={queryTabText}
+              queryTabText={q.rawText || buildInfluxQLQuery(timeRange, q) || `SELECT "fields" FROM "db"."rp"."measurement"`}
             />
           )
         })}

ui/src/data_explorer/components/Table.js

@@ -102,7 +102,7 @@ const ChronoTable = React.createClass({
 
   // Table data as a list of array.
   render() {
-    const {containerWidth, height} = this.props
+    const {containerWidth, height, query} = this.props
     const {cellData, columnWidths, isLoading} = this.state
     const {columns, values} = cellData
 
@@ -117,6 +117,10 @@ const ChronoTable = React.createClass({
     const minWidth = 70
     const styleAdjustedHeight = height - stylePixelOffset
 
+    if (!query) {
+      return <div className="generic-empty-state">Please add a query below</div>
+    }
+
     if (!isLoading && !values.length) {
       return <div className="generic-empty-state">Your query returned no data</div>
     }

ui/src/data_explorer/components/Visualization.js

@@ -4,7 +4,7 @@ import classNames from 'classnames'
 import AutoRefresh from 'shared/components/AutoRefresh'
 import LineGraph from 'shared/components/LineGraph'
 import SingleStat from 'shared/components/SingleStat'
-import MultiTable from './MultiTable'
+import Table from './Table'
 import VisHeader from 'src/data_explorer/components/VisHeader'
 
 const RefreshingLineGraph = AutoRefresh(LineGraph)
@@ -36,7 +36,6 @@ const Visualization = React.createClass({
     height: string,
     heightPixels: number,
     onEditRawStatus: func.isRequired,
-    onSetActiveQueryIndex: func.isRequired,
   },
 
   contextTypes: {
@@ -77,7 +76,7 @@ const Visualization = React.createClass({
   },
 
   render() {
-    const {queryConfigs, timeRange, height, heightPixels, onEditRawStatus, activeQueryIndex, onSetActiveQueryIndex} = this.props
+    const {queryConfigs, timeRange, height, heightPixels, onEditRawStatus, activeQueryIndex} = this.props
     const {source} = this.context
     const proxyLink = source.links.proxy
     const {view} = this.state
@@ -94,24 +93,21 @@ const Visualization = React.createClass({
       <div className={classNames("graph", {active: true})} style={{height}}>
         <VisHeader views={VIEWS} view={view} onToggleView={this.handleToggleView} name={name || 'Graph'}/>
         <div className={classNames({"graph-container": view === GRAPH, "table-container": view === TABLE})}>
-          {this.renderVisualization(view, queries, heightPixels, onEditRawStatus, activeQueryIndex, onSetActiveQueryIndex)}
+          {this.renderVisualization(view, queries, heightPixels, onEditRawStatus, activeQueryIndex)}
         </div>
       </div>
     )
   },
 
-  renderVisualization(view, queries, heightPixels, onEditRawStatus, activeQueryIndex, onSetActiveQueryIndex) {
+  renderVisualization(view, queries, heightPixels, onEditRawStatus, activeQueryIndex) {
+    const activeQuery = queries[activeQueryIndex]
+    const defaultQuery = queries[0]
+
     switch (view) {
       case GRAPH:
         return this.renderGraph(queries)
       case TABLE:
-        return (<MultiTable
-          queries={queries}
-          height={heightPixels}
-          onEditRawStatus={onEditRawStatus}
-          activeQueryIndex={activeQueryIndex}
-          onSetActiveQueryIndex={onSetActiveQueryIndex}
-        />)
+        return (<Table query={activeQuery || defaultQuery} height={heightPixels} onEditRawStatus={onEditRawStatus} />)
       default:
         this.renderGraph(queries)
     }

ui/src/data_explorer/containers/DataExplorer.js

@@ -89,7 +89,6 @@ const DataExplorer = React.createClass({
             queryConfigs={queryConfigs}
             activeQueryIndex={activeQueryIndex}
             onEditRawStatus={queryConfigActions.editRawQueryStatus}
-            onSetActiveQueryIndex={this.handleSetActiveQueryIndex}
           />
           <ResizeBottom>
             <QueryBuilder