Separate QueryEditor from SchemaExplorer

ui/src/dashboards/components/QueryMaker.js

@@ -2,16 +2,26 @@ import React, {PropTypes} from 'react'
 
 import EmptyQuery from 'src/dashboards/components/EmptyQuery'
 import QueryTabList from 'src/dashboards/components/QueryTabList'
+import QueryEditor from 'src/data_explorer/components/QueryEditor'
 import SchemaExplorer from 'src/dashboards/components/SchemaExplorer'
+import buildInfluxQLQuery from 'utils/influxql'
+
+const TEMPLATE_RANGE = {upper: null, lower: ':dashboardTime:'}
+const rawTextBinder = (links, id, action) => text =>
+  action(links.queries, id, text)
+
+const buildText = (rawText, range, q) =>
+  rawText || buildInfluxQLQuery(range || TEMPLATE_RANGE, q) || ''
 
 const QueryMaker = ({
-  source,
+  source: {links},
   actions,
   queries,
   timeRange,
   templates,
   onAddQuery,
   activeQuery,
+  activeQuery: {id, range, rawText},
   onDeleteQuery,
   activeQueryIndex,
   setActiveQueryIndex,
@@ -27,13 +37,20 @@ const QueryMaker = ({
         setActiveQueryIndex={setActiveQueryIndex}
       />
       {activeQuery
-        ? <SchemaExplorer
-            query={activeQuery}
-            source={source}
-            actions={actions}
-            templates={templates}
-            onAddQuery={onAddQuery}
-          />
+        ? <div className="query-maker--tab-contents">
+            <QueryEditor
+              query={buildText(rawText, range, activeQuery)}
+              config={activeQuery}
+              onUpdate={rawTextBinder(links, id, actions.editRawTextAsync)}
+              templates={templates}
+            />
+            <SchemaExplorer
+              query={activeQuery}
+              actions={actions}
+              templates={templates}
+              onAddQuery={onAddQuery}
+            />
+          </div>
         : <EmptyQuery onAddQuery={onAddQuery} />}
     </div>
   )

ui/src/dashboards/components/SchemaExplorer.js

@@ -3,81 +3,49 @@ import React, {PropTypes} from 'react'
 import DatabaseList from 'src/data_explorer/components/DatabaseList'
 import MeasurementList from 'src/data_explorer/components/MeasurementList'
 import FieldList from 'src/data_explorer/components/FieldList'
-import QueryEditor from 'src/data_explorer/components/QueryEditor'
-import buildInfluxQLQuery from 'utils/influxql'
-
-const TEMPLATE_RANGE = {upper: null, lower: ':dashboardTime:'}
 
 const actionBinder = (id, action) => item => action(id, item)
 
-const rawTextBinder = (links, id, action) => text =>
-  action(links.queries, id, text)
-
 const SchemaExplorer = ({
-  source: {links},
   query,
-  query: {id, range},
-  templates,
+  query: {id},
   actions: {
     chooseTag,
     groupByTag,
     groupByTime,
     chooseNamespace,
-    editRawTextAsync,
     chooseMeasurement,
     applyFuncsToField,
     toggleTagAcceptance,
     toggleFieldWithGroupByInterval,
   },
 }) =>
-  <div className="query-maker--tab-contents">
-    <QueryEditor
-      query={
-        query.rawText ||
-        buildInfluxQLQuery(range || TEMPLATE_RANGE, query) ||
-        ''
-      }
-      config={query}
-      onUpdate={rawTextBinder(links, id, editRawTextAsync)}
-      templates={templates}
+  <div className="query-builder">
+    <DatabaseList
+      query={query}
+      onChooseNamespace={actionBinder(id, chooseNamespace)}
+    />
+    <MeasurementList
+      query={query}
+      onChooseTag={actionBinder(id, chooseTag)}
+      onGroupByTag={actionBinder(id, groupByTag)}
+      onChooseMeasurement={actionBinder(id, chooseMeasurement)}
+      onToggleTagAcceptance={actionBinder(id, toggleTagAcceptance)}
+    />
+    <FieldList
+      query={query}
+      onToggleField={actionBinder(id, toggleFieldWithGroupByInterval)}
+      onGroupByTime={actionBinder(id, groupByTime)}
+      applyFuncsToField={actionBinder(id, applyFuncsToField)}
     />
-    <div className="query-builder">
-      <DatabaseList
-        query={query}
-        onChooseNamespace={actionBinder(id, chooseNamespace)}
-      />
-      <MeasurementList
-        query={query}
-        onChooseTag={actionBinder(id, chooseTag)}
-        onGroupByTag={actionBinder(id, groupByTag)}
-        onChooseMeasurement={actionBinder(id, chooseMeasurement)}
-        onToggleTagAcceptance={actionBinder(id, toggleTagAcceptance)}
-      />
-      <FieldList
-        query={query}
-        onToggleField={actionBinder(id, toggleFieldWithGroupByInterval)}
-        onGroupByTime={actionBinder(id, groupByTime)}
-        applyFuncsToField={actionBinder(id, applyFuncsToField)}
-      />
-    </div>
   </div>
 
-const {arrayOf, func, shape, string} = PropTypes
+const {func, shape, string} = PropTypes
 
 SchemaExplorer.propTypes = {
-  source: shape({
-    links: shape({
-      queries: string.isRequired,
-    }).isRequired,
-  }).isRequired,
   query: shape({
     id: string,
   }).isRequired,
-  templates: arrayOf(
-    shape({
-      tempVar: string.isRequired,
-    })
-  ),
   actions: shape({
     chooseNamespace: func.isRequired,
     chooseMeasurement: func.isRequired,