WIP Fix zoomedTimeRange from URL queries

Zoomed time ranges are being passed down correctly to the cells,
but it appears in the Network tab that the cells are not updating
according to the zoomed temp var value data. The proxy is hit many
times, without the correct zoomed time range, but the final request
does contain the correct zoomed time range. At this point, I would
expect the graphs to refresh to the zoomed range, but they don't.

A setState waiting for all tempVars to be synced doesn't seem to
do the trick either.

Previously, this was working when zoomedTimeRange was on state
and the values were found from the query string while in the
constructor. After refactoring to put zoomedTimeRange into redux
so that it could be included in all of the temp var reconciliation
thunks, it is no longer working correctly.

ui/src/dashboards/actions/index.js

@@ -481,8 +481,8 @@ const syncDashboardTimeRangeFromURLQueries = (
   const dashboard = dashboards.find(d => d.id === dashboardID)
 
   const timeRangeFromQueries = {
-    upper: urlQueries.upper,
     lower: urlQueries.lower,
+    upper: urlQueries.upper,
   }
   const zoomedTimeRangeFromQueries = {
     lower: urlQueries.zoomedLower,
@@ -570,5 +570,9 @@ export const setZoomedTimeRangeAsync = (
   location
 ) => async dispatch => {
   dispatch(setZoomedTimeRange(zoomedTimeRange))
-  dispatch(syncURLQueryFromQueriesObject(location, zoomedTimeRange))
+  const urlQueryZoomedTimeRange = {
+    zoomedLower: zoomedTimeRange.lower,
+    zoomedUpper: zoomedTimeRange.upper,
+  }
+  dispatch(syncURLQueryFromQueriesObject(location, urlQueryZoomedTimeRange))
 }

ui/src/dashboards/components/DashboardHeader.js

@@ -29,7 +29,7 @@ const DashboardHeader = ({
   showTemplateControlBar,
   timeRange: {upper, lower},
   handleClickPresentationButton,
-  zoomedTimeRange: {zoomedLower, zoomedUpper},
+  zoomedTimeRange: {lower: zoomedLower, upper: zoomedUpper},
 }) =>
   isHidden ? null : (
     <div className="page-header full-width">
@@ -115,8 +115,8 @@ const {arrayOf, bool, func, number, shape, string} = PropTypes
 
 DashboardHeader.defaultProps = {
   zoomedTimeRange: {
-    zoomedLower: null,
-    zoomedUpper: null,
+    lower: null,
+    upper: null,
   },
 }
 

ui/src/dashboards/containers/DashboardPage.js

@@ -317,7 +317,7 @@ class DashboardPage extends Component {
 
   handleZoomedTimeRange = (zoomedLower, zoomedUpper) => {
     const {dashboardActions, location} = this.props
-    const zoomedTimeRange = {zoomedLower, zoomedUpper}
+    const zoomedTimeRange = {lower: zoomedLower, upper: zoomedUpper}
     dashboardActions.setZoomedTimeRangeAsync(zoomedTimeRange, location)
   }