Merge pull request #2072 from influxdata/features/no-tabs-de-2

Remove DE Tabs

CHANGELOG.md

@@ -21,6 +21,7 @@
 1. [#2040](https://github.com/influxdata/chronograf/pull/2040): Prevent the legend from overlapping graphs at the bottom of the screen
 1. [#2054](https://github.com/influxdata/chronograf/pull/2054): Add a "Plus" icon to every button with an Add or Create action for clarity and consistency
 1. [#2052](https://github.com/influxdata/chronograf/pull/2052): Make hovering over series smoother
+1. [#2072](https://github.com/influxdata/chronograf/pull/2072): Remove tabs from Data Explorer
 1. [#2057](https://github.com/influxdata/chronograf/pull/2057): Improve appearance of placeholder text in inputs
 1. [#2057](https://github.com/influxdata/chronograf/pull/2057): Add ability to use "Default" values in Source Connection form
 

ui/src/data_explorer/components/QueryMaker.js

@@ -1,8 +1,6 @@
 import React, {PropTypes} from 'react'
 
 import QueryEditor from './QueryEditor'
-import EmptyQuery from 'src/shared/components/EmptyQuery'
-import QueryTabList from 'src/shared/components/QueryTabList'
 import SchemaExplorer from 'src/shared/components/SchemaExplorer'
 import buildInfluxQLQuery from 'utils/influxql'
 
@@ -12,47 +10,23 @@ const rawTextBinder = (links, id, action) => text =>
 const buildText = (q, timeRange) =>
   q.rawText || buildInfluxQLQuery(timeRange, q) || ''
 
-const QueryMaker = ({
-  source,
-  actions,
-  queries,
-  timeRange,
-  onAddQuery,
-  activeQuery,
-  onDeleteQuery,
-  activeQueryIndex,
-  setActiveQueryIndex,
-}) =>
+const QueryMaker = ({source, actions, timeRange, activeQuery}) =>
   <div className="query-maker query-maker--panel">
-    <QueryTabList
-      queries={queries}
-      timeRange={timeRange}
-      onAddQuery={onAddQuery}
-      onDeleteQuery={onDeleteQuery}
-      activeQueryIndex={activeQueryIndex}
-      setActiveQueryIndex={setActiveQueryIndex}
-    />
-    {activeQuery && activeQuery.id
-      ? <div className="query-maker--tab-contents">
-          <QueryEditor
-            query={buildText(activeQuery, timeRange)}
-            config={activeQuery}
-            onUpdate={rawTextBinder(
-              source.links,
-              activeQuery.id,
-              actions.editRawTextAsync
-            )}
-          />
-          <SchemaExplorer
-            query={activeQuery}
-            actions={actions}
-            onAddQuery={onAddQuery}
-          />
-        </div>
-      : <EmptyQuery onAddQuery={onAddQuery} />}
+    <div className="query-maker--tab-contents">
+      <QueryEditor
+        query={buildText(activeQuery, timeRange)}
+        config={activeQuery}
+        onUpdate={rawTextBinder(
+          source.links,
+          activeQuery.id,
+          actions.editRawTextAsync
+        )}
+      />
+      <SchemaExplorer query={activeQuery} actions={actions} />
+    </div>
   </div>
 
-const {arrayOf, func, number, shape, string} = PropTypes
+const {func, shape, string} = PropTypes
 
 QueryMaker.propTypes = {
   source: shape({
@@ -60,7 +34,6 @@ QueryMaker.propTypes = {
       queries: string.isRequired,
     }).isRequired,
   }).isRequired,
-  queries: arrayOf(shape({})).isRequired,
   timeRange: shape({
     upper: string,
     lower: string,
@@ -77,11 +50,7 @@ QueryMaker.propTypes = {
     applyFuncsToField: func.isRequired,
     editRawTextAsync: func.isRequired,
   }).isRequired,
-  setActiveQueryIndex: func.isRequired,
-  onDeleteQuery: func.isRequired,
-  onAddQuery: func.isRequired,
   activeQuery: shape({}),
-  activeQueryIndex: number,
 }
 
 export default QueryMaker

ui/src/data_explorer/containers/DataExplorer.js

@@ -23,34 +23,16 @@ class DataExplorer extends Component {
     super(props)
 
     this.state = {
-      activeQueryIndex: 0,
       showWriteForm: false,
     }
   }
 
-  handleSetActiveQueryIndex = index => {
-    this.setState({activeQueryIndex: index})
-  }
-
-  handleDeleteQuery = index => {
-    const {queryConfigs, queryConfigActions} = this.props
-    const query = queryConfigs[index]
-    queryConfigActions.deleteQuery(query.id)
-  }
-
-  handleAddQuery = () => {
-    const newIndex = this.props.queryConfigs.length
-    this.props.queryConfigActions.addQuery()
-    this.handleSetActiveQueryIndex(newIndex)
-  }
-
   getActiveQuery = () => {
-    const {activeQueryIndex} = this.state
     const {queryConfigs} = this.props
-    const activeQuery = queryConfigs[activeQueryIndex]
-    const defaultQuery = queryConfigs[0]
-
-    return activeQuery || defaultQuery
+    if (queryConfigs.length === 0) {
+      this.props.queryConfigActions.addQuery()
+    }
+    return queryConfigs[0]
   }
 
   handleCloseWriteData = () => {
@@ -109,14 +91,8 @@ class DataExplorer extends Component {
         >
           <QueryMaker
             source={source}
-            queries={queryConfigs}
             actions={queryConfigActions}
-            autoRefresh={autoRefresh}
             timeRange={timeRange}
-            setActiveQueryIndex={this.handleSetActiveQueryIndex}
-            onDeleteQuery={this.handleDeleteQuery}
-            onAddQuery={this.handleAddQuery}
-            activeQueryIndex={activeQueryIndex}
             activeQuery={this.getActiveQuery()}
           />
           <Visualization