Sync URL query upon saving temp vars in manager

Co-authored-by: Deniz Kusefoglu <denizk@gmail.com>
Co-authored-by: Jared Scheib <jared.scheib@gmail.com>

ui/src/dashboards/containers/DashboardPage.js

@@ -33,6 +33,7 @@ import {showOverlay} from 'src/shared/actions/overlayTechnology'
 import {
   applyDashboardTempVarOverrides,
   stripTempVar,
+  generateURLQueryFromTempVars,
 } from 'src/dashboards/utils/templateVariableQueryGenerator'
 
 import {dismissEditingAnnotation} from 'src/shared/actions/annotations'
@@ -297,11 +298,20 @@ class DashboardPage extends Component {
         templates,
       })
       onSaveTemplatesSuccess()
+      this.syncURLQueryFromTempVars(templates)
     } catch (error) {
       console.error(error)
     }
   }
 
+  syncURLQueryFromTempVars = tempVars => {
+    const {dashboardActions, location} = this.props
+
+    const updatedQueries = generateURLQueryFromTempVars(tempVars)
+
+    dashboardActions.updateURLQueryValue(location, updatedQueries)
+  }
+
   handleRunQueryFailure = error => {
     console.error(error)
     this.props.errorThrown(error)

ui/src/dashboards/utils/templateVariableQueryGenerator.js

@@ -62,6 +62,19 @@ export const makeQueryForTemplate = ({influxql, db, measurement, tagKey}) =>
 export const stripTempVar = tempVarName =>
   tempVarName.substr(1, tempVarName.length - 2)
 
+export const generateURLQueryFromTempVars = tempVars => {
+  const queries = {}
+
+  tempVars.forEach(({tempVar, values}) => {
+    const selected = values.find(value => value.selected === true)
+    const strippedTempVar = stripTempVar(tempVar)
+
+    queries[strippedTempVar] = selected.value
+  })
+
+  return queries
+}
+
 const reconcileTempVarsWithOverrides = (currentTempVars, tempVarOverrides) => {
   if (!tempVarOverrides) {
     return currentTempVars