Refactor query string middleware. Adds novel DE query config functionality.

ui/src/dashboards/actions/index.js

@@ -265,7 +265,3 @@ export const updateTempVarValues = (source, dashboard) => async dispatch => {
     dispatch(errorThrown(error))
   }
 }
-
-export const selectTempVarsFromUrl = (dashboardID, query = {}) => dispatch => {
-  dispatch(templateVariablesSelectedByName(dashboardID, query))
-}

ui/src/dashboards/containers/DashboardPage.js

@@ -41,11 +41,9 @@ class DashboardPage extends Component {
       dashboardActions: {
         getDashboardsAsync,
         updateTempVarValues,
-        selectTempVarsFromUrl,
         putDashboardByID,
       },
       source,
-      location: {query},
     } = this.props
 
     const dashboards = await getDashboardsAsync()
@@ -53,7 +51,6 @@ class DashboardPage extends Component {
 
     // Refresh and persists influxql generated template variable values
     await updateTempVarValues(source, dashboard)
-    selectTempVarsFromUrl(+dashboardID, query)
     await putDashboardByID(dashboardID)
   }
 

ui/src/data_explorer/actions/view/index.js

@@ -138,6 +138,7 @@ export const editRawTextAsync = (url, id, text) => async dispatch => {
   try {
     const {data} = await getQueryConfig(url, [{query: text, id}])
     const config = data.queries.find(q => q.id === id)
+    config.queryConfig.rawText = text
     dispatch(updateQueryConfig(config.queryConfig))
   } catch (error) {
     dispatch(errorThrown(error))

ui/src/shared/middleware/queryStringConfig.js

@@ -0,0 +1,52 @@
+// Middleware generally used for actions needing parsed queryStrings
+import queryString from 'query-string'
+import uuid from 'node-uuid'
+
+import {enablePresentationMode} from 'src/shared/actions/app'
+import {editRawTextAsync} from 'src/data_explorer/actions/view'
+import {templateVariablesSelectedByName} from 'src/dashboards/actions'
+
+export const queryStringConfig = store => next => action => {
+  next(action)
+  const qs = queryString.parse(window.location.search)
+
+  // Presentation Mode
+  if (qs.present === 'true') {
+    next(enablePresentationMode())
+  }
+
+  // Data Explorer Query Config
+  if (qs.query) {
+    const query = decodeURIComponent(qs.query)
+    const state = store.getState()
+    const defaultSource = state.sources.find(source => source.default)
+    let id = window.location.hash // Stored on hash to prevent page reload
+
+    if (defaultSource && !id) {
+      // Find query by raw text
+      for (const qid in state.dataExplorerQueryConfigs) {
+        const qc = state.dataExplorerQueryConfigs[qid]
+        if (qc && qc.rawText === query) {
+          id = qid
+        }
+      }
+
+      id = id || uuid.v4()
+
+      qs.queryID = id
+      window.location.hash = id
+    }
+
+    if (defaultSource && !state.dataExplorerQueryConfigs[id]) {
+      const url = defaultSource.links.queries
+      editRawTextAsync(url, id, query)(next)
+    }
+  }
+
+  // Select Template Variable By Name
+  const dashboardRegex = /\/sources\/(\d+?)\/dashboards\/(\d+?)/
+  if (dashboardRegex.test(window.location.pathname)) {
+    const dashboardID = window.location.pathname.match(dashboardRegex)[2]
+    next(templateVariablesSelectedByName(+dashboardID, qs))
+  }
+}

ui/src/shared/middleware/resizeLayout.js

@@ -1,25 +1,14 @@
 // Trigger resize event to relayout the React Layout plugin
-import queryString from 'query-string'
+export const resizeLayout = () => next => action => {
-import {enablePresentationMode} from 'src/shared/actions/app'
+  next(action)
 
-export default function resizeLayout() {
+  if (
-  return next => action => {
+    action.type === 'ENABLE_PRESENTATION_MODE' ||
-    next(action)
+    action.type === 'DISABLE_PRESENTATION_MODE'
-    if (
+  ) {
-      action.type === 'ENABLE_PRESENTATION_MODE' ||
+    // Uses longer event object creation method due to IE compatibility.
-      action.type === 'DISABLE_PRESENTATION_MODE'
+    const evt = document.createEvent('HTMLEvents')
-    ) {
+    evt.initEvent('resize', false, true)
-      // Uses longer event object creation method due to IE compatibility.
+    window.dispatchEvent(evt)
-      const evt = document.createEvent('HTMLEvents')
-      evt.initEvent('resize', false, true)
-      window.dispatchEvent(evt)
-    }
-
-    const qs = queryString.parse(window.location.search)
-
-    if (qs.present === 'true') {
-      next(enablePresentationMode())
-      next(action)
-    }
   }
 }

ui/src/store/configureStore.js

@@ -4,7 +4,8 @@ import {routerReducer, routerMiddleware} from 'react-router-redux'
 import thunkMiddleware from 'redux-thunk'
 
 import errorsMiddleware from 'shared/middleware/errors'
-import resizeLayout from 'shared/middleware/resizeLayout'
+import {resizeLayout} from 'shared/middleware/resizeLayout'
+import {queryStringConfig} from 'shared/middleware/queryStringConfig'
 import statusReducers from 'src/status/reducers'
 import sharedReducers from 'shared/reducers'
 import dataExplorerReducers from 'src/data_explorer/reducers'
@@ -33,6 +34,7 @@ export default function configureStore(initialState, browserHistory) {
       thunkMiddleware,
       routingMiddleware,
       errorsMiddleware,
+      queryStringConfig,
       resizeLayout
     )
   )(createStore)