Merge branch 'master' into fill-query-widget

CHANGELOG.md

@@ -6,12 +6,14 @@
 1. [#1943](https://github.com/influxdata/chronograf/pull/1943): Fix inability to add kapacitor from source page on fresh install
 1. [#1947](https://github.com/influxdata/chronograf/pull/1947): Fix DataExplorer crash if field property not present on queryConfig
 1. [#1957](https://github.com/influxdata/chronograf/pull/1957): Fix stacked graphs not being fully displayed
+1. [#1969](https://github.com/influxdata/chronograf/pull/1969): Fix for delayed selection of template variables using URL query params
 
 ### Features
 1. [#1928](https://github.com/influxdata/chronograf/pull/1928): Add prefix, suffix, scale, and other y-axis formatting
 1. [#1886](https://github.com/influxdata/chronograf/pull/1886): Fix limit of 100 alert rules on alert rules page
 1. [#1934](https://github.com/influxdata/chronograf/pull/1934): Update time resolution when zooming in on graphs
 1. [#1945](https://github.com/influxdata/chronograf/pull/1945): Add `present` boolean query param to URL to enable presentation mode
+1. [#1969](https://github.com/influxdata/chronograf/pull/1969): Add `query` query param to URL to add a query to the Data Explorer
 1. [#1885](https://github.com/influxdata/chronograf/pull/1885): Add `fill` options to data explorer and dashboard queries
 
 ### UI Improvements

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

@@ -154,6 +154,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,22 @@
+// Middleware generally used for actions needing parsed queryStrings
+import queryString from 'query-string'
+
+import {enablePresentationMode} from 'src/shared/actions/app'
+import {templateVariablesSelectedByName} from 'src/dashboards/actions'
+
+export const queryStringConfig = () => next => action => {
+  next(action)
+  const qs = queryString.parse(window.location.search)
+
+  // Presentation Mode
+  if (qs.present === 'true') {
+    next(enablePresentationMode())
+  }
+
+  // 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'
-import {enablePresentationMode} from 'src/shared/actions/app'
+export const resizeLayout = () => next => action => {
+  next(action)
 
-export default function resizeLayout() {
-  return next => action => {
-    next(action)
-    if (
-      action.type === 'ENABLE_PRESENTATION_MODE' ||
-      action.type === 'DISABLE_PRESENTATION_MODE'
-    ) {
-      // Uses longer event object creation method due to IE compatibility.
-      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)
-    }
+  if (
+    action.type === 'ENABLE_PRESENTATION_MODE' ||
+    action.type === 'DISABLE_PRESENTATION_MODE'
+  ) {
+    // Uses longer event object creation method due to IE compatibility.
+    const evt = document.createEvent('HTMLEvents')
+    evt.initEvent('resize', false, true)
+    window.dispatchEvent(evt)
   }
 }

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)