Sync Url Query to timerange selections for lower,upper, and zoomed ranges

ui/src/dashboards/actions/index.js

@@ -388,12 +388,19 @@ export const syncURLQueryFromQueryObject = (
 export const syncURLQueryFromTempVars = (
   location,
   tempVars,
-  deletedTempVars = []
+  deletedTempVars = [],
+  timeRange = {}
 ) => dispatch => {
   const updatedURLQueries = generateURLQueryFromTempVars(tempVars)
   const deletedURLQueries = generateURLQueryFromTempVars(deletedTempVars)
 
+  const updatedURLQueriesWithTimeRange = {...updatedURLQueries, ...timeRange}
+
   dispatch(
-    syncURLQueryFromQueryObject(location, updatedURLQueries, deletedURLQueries)
+    syncURLQueryFromQueryObject(
+      location,
+      updatedURLQueriesWithTimeRange,
+      deletedURLQueries
+    )
   )
 }

ui/src/dashboards/containers/DashboardPage.js

@@ -126,7 +126,8 @@ class DashboardPage extends Component {
       notify(notifyInvalidTempVarValueInURLQuery(invalidURLQuery))
     })
 
-    syncURLQueryFromTempVars(location, dashboard.templates)
+    const {upper, lower} = timeRange
+    syncURLQueryFromTempVars(location, dashboard.templates, [], {upper, lower})
 
     // Refresh and persists influxql generated template variable values.
     // If using auth and role is Viewer, temp vars will be stale until dashboard
@@ -222,6 +223,11 @@ class DashboardPage extends Component {
       format: FORMAT_INFLUXQL,
     })
 
+    dashboardActions.syncURLQueryFromQueryObject(location, {
+      lower: timeRange.lower,
+      upper: timeRange.upper,
+    })
+
     const annotationRange = millisecondTimeRange(timeRange)
     getAnnotationsAsync(source.links.annotations, annotationRange)
   }
@@ -337,6 +343,11 @@ class DashboardPage extends Component {
 
   handleZoomedTimeRange = (zoomedLower, zoomedUpper) => {
     this.setState({zoomedTimeRange: {zoomedLower, zoomedUpper}})
+    const {dashboardActions, location} = this.props
+    dashboardActions.syncURLQueryFromQueryObject(location, {
+      zoomedLower,
+      zoomedUpper,
+    })
   }
 
   setScrollTop = event => {
@@ -374,12 +385,11 @@ class DashboardPage extends Component {
       params: {sourceID, dashboardID},
     } = this.props
 
-    const low = zoomedLower ? zoomedLower : lower
-    const up = zoomedUpper ? zoomedUpper : upper
+    const low = zoomedLower || lower
+    const up = zoomedUpper || upper
 
     const lowerType = low && low.includes(':') ? 'timeStamp' : 'constant'
     const upperType = up && up.includes(':') ? 'timeStamp' : 'constant'
-
     const dashboardTime = {
       id: 'dashtime',
       tempVar: TEMP_VAR_DASHBOARD_TIME,