Add Data Explorer InfluxQL query and location query synchronization

ui/src/data_explorer/components/QueryMaker.js

@@ -2,19 +2,16 @@ import React, {PropTypes} from 'react'
 
 import QueryEditor from './QueryEditor'
 import SchemaExplorer from 'src/shared/components/SchemaExplorer'
-import buildInfluxQLQuery from 'utils/influxql'
+import {buildRawText} from 'utils/influxql'
 
 const rawTextBinder = (links, id, action) => text =>
   action(links.queries, id, text)
 
-const buildText = (q, timeRange) =>
-  q.rawText || buildInfluxQLQuery(timeRange, q) || ''
-
 const QueryMaker = ({source, actions, timeRange, activeQuery}) =>
   <div className="query-maker query-maker--panel">
     <div className="query-maker--tab-contents">
       <QueryEditor
-        query={buildText(activeQuery, timeRange)}
+        query={buildRawText(activeQuery, timeRange)}
         config={activeQuery}
         onUpdate={rawTextBinder(
           source.links,

ui/src/data_explorer/containers/DataExplorer.js

@@ -1,6 +1,8 @@
 import React, {PropTypes, Component} from 'react'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
+import {withRouter} from 'react-router'
+import queryString from 'query-string'
 
 import _ from 'lodash'
 
@@ -17,6 +19,7 @@ import {errorThrown} from 'shared/actions/errors'
 import {setAutoRefresh} from 'shared/actions/app'
 import * as dataExplorerActionCreators from 'src/data_explorer/actions/view'
 import {writeLineProtocolAsync} from 'src/data_explorer/actions/view/write'
+import {buildRawText} from 'src/utils/influxql'
 
 class DataExplorer extends Component {
   constructor(props) {
@@ -35,6 +38,25 @@ class DataExplorer extends Component {
     return queryConfigs[0]
   }
 
+  componentDidMount() {
+    const {query} = queryString.parse(window.location.search)
+    if (query && query.length) {
+      const qc = this.props.queryConfigs[0]
+      this.props.queryConfigActions.editRawText(qc.id, query)
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const {router} = this.props
+    const {queryConfigs, timeRange} = nextProps
+    const query = buildRawText(queryConfigs[0], timeRange)
+    const qsCurrent = queryString.parse(router.location.search)
+    if (query.length && qsCurrent.query !== query) {
+      const qsNew = queryString.stringify({query})
+      router.push(`${window.location.pathname}?${qsNew}`)
+    }
+  }
+
   handleCloseWriteData = () => {
     this.setState({showWriteForm: false})
   }
@@ -56,12 +78,8 @@ class DataExplorer extends Component {
       writeLineProtocol,
     } = this.props
 
-    const {activeQueryIndex, showWriteForm} = this.state
+    const {showWriteForm} = this.state
-    const selectedDatabase = _.get(
+    const selectedDatabase = _.get(queryConfigs, ['0', 'database'], null)
-      queryConfigs,
-      [`${activeQueryIndex}`, 'database'],
-      null
-    )
 
     return (
       <div className="data-explorer">
@@ -101,7 +119,7 @@ class DataExplorer extends Component {
             timeRange={timeRange}
             queryConfigs={queryConfigs}
             errorThrown={errorThrownAction}
-            activeQueryIndex={activeQueryIndex}
+            activeQueryIndex={0}
             editQueryStatus={queryConfigActions.editQueryStatus}
             views={VIS_VIEWS}
           />
@@ -121,6 +139,12 @@ DataExplorer.propTypes = {
       queries: string.isRequired,
     }).isRequired,
   }).isRequired,
+  router: shape({
+    location: shape({
+      search: string,
+      pathanme: string,
+    }),
+  }),
   queryConfigs: arrayOf(shape({})).isRequired,
   queryConfigActions: shape({
     editQueryStatus: func.isRequired,
@@ -181,4 +205,6 @@ const mapDispatchToProps = dispatch => {
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(DataExplorer)
+export default connect(mapStateToProps, mapDispatchToProps)(
+  withRouter(DataExplorer)
+)

ui/src/utils/influxql.js

@@ -199,3 +199,6 @@ export const buildQueriesForLayouts = (cell, source, timeRange, host) => {
     return {...query, host: source.links.proxy, text: queryText}
   })
 }
+
+export const buildRawText = (q, timeRange) =>
+  q.rawText || buildInfluxQLQuery(timeRange, q) || ''