Set Dashboard time range from query string middleware

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

ui/src/dashboards/actions/index.js

@@ -45,14 +45,6 @@ export const loadDeafaultDashTimeV1 = dashboardID => ({
   },
 })
 
-export const addDashTimeV1 = (dashboardID, timeRange) => ({
-  type: 'ADD_DASHBOARD_TIME_V1',
-  payload: {
-    dashboardID,
-    timeRange,
-  },
-})
-
 export const setDashTimeV1 = (dashboardID, timeRange) => ({
   type: 'SET_DASHBOARD_TIME_V1',
   payload: {

ui/src/dashboards/containers/DashboardPage.js

@@ -49,6 +49,7 @@ import {
   TEMP_VAR_DASHBOARD_TIME,
   TEMP_VAR_UPPER_DASHBOARD_TIME,
 } from 'shared/constants'
+import {FORMAT_INFLUXQL, defaultTimeRange} from 'src/shared/data/timeRanges'
 import {
   notifyDashboardNotFound,
   notifyInvalidTempVarValueInURLQuery,
@@ -57,14 +58,6 @@ import {colorsStringSchema, colorsNumberSchema} from 'shared/schemas'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import {OverlayContext} from 'src/shared/components/OverlayTechnology'
 
-const FORMAT_INFLUXQL = 'influxql'
-const defaultTimeRange = {
-  upper: null,
-  lower: 'now() - 15m',
-  seconds: 900,
-  format: FORMAT_INFLUXQL,
-}
-
 @ErrorHandling
 class DashboardPage extends Component {
   constructor(props) {

ui/src/dashboards/reducers/dashTimeV1.js

@@ -5,13 +5,6 @@ const initialState = {
 
 const dashTimeV1 = (state = initialState, action) => {
   switch (action.type) {
-    case 'ADD_DASHBOARD_TIME_V1': {
-      const {dashboardID, timeRange} = action.payload
-      const ranges = [...state.ranges, {dashboardID, timeRange}]
-
-      return {...state, ranges}
-    }
-
     case 'DELETE_DASHBOARD': {
       const {dashboardID} = action.payload
       const ranges = state.ranges.filter(r => r.dashboardID !== dashboardID)

ui/src/shared/data/timeRanges.js

@@ -72,3 +72,12 @@ export const timeRanges = [
     menuOption: 'Past 30d',
   },
 ]
+
+export const FORMAT_INFLUXQL = 'influxql'
+
+export const defaultTimeRange = {
+  upper: null,
+  lower: 'now() - 15m',
+  seconds: 900,
+  format: FORMAT_INFLUXQL,
+}

ui/src/shared/middleware/queryStringConfig.js

@@ -2,8 +2,13 @@
 import queryString from 'query-string'
 
 import {enablePresentationMode} from 'src/shared/actions/app'
+import {setDashTimeV1} from 'src/dashboards/actions'
+import {timeRanges, defaultTimeRange} from 'src/shared/data/timeRanges'
+import idNormalizer, {TYPE_ID} from 'src/normalizers/id'
 
-export const queryStringConfig = () => dispatch => action => {
+export const queryStringConfig = store => {
+  let prevPath
+  return dispatch => action => {
     dispatch(action)
     const urlQueries = queryString.parse(window.location.search)
 
@@ -11,4 +16,37 @@ export const queryStringConfig = () => dispatch => action => {
     if (urlQueries.present === 'true') {
       dispatch(enablePresentationMode())
     }
+
+    const dashboardRegex = /\/sources\/\d+\/dashboards\/(\d+)/
+    if (dashboardRegex.test(window.location.pathname)) {
+      const currentPath = window.location.pathname
+      const dashboardID = currentPath.match(dashboardRegex)[1]
+      if (currentPath !== prevPath) {
+        const {dashTimeV1} = store.getState()
+
+        const foundTimeRange = dashTimeV1.ranges.find(
+          r => r.dashboardID === idNormalizer(TYPE_ID, dashboardID)
+        )
+
+        let timeRange = foundTimeRange || defaultTimeRange
+
+        // if lower and upper in urlQueries.
+        // and if valid.
+
+        if (urlQueries.upper) {
+          timeRange = {
+            ...timeRange,
+            upper: urlQueries.upper,
+            lower: urlQueries.lower,
+          }
+        } else {
+          timeRange = timeRanges.find(t => t.lower === urlQueries.lower)
+        }
+        if (foundTimeRange) {
+          dispatch(setDashTimeV1(+dashboardID, timeRange))
+        }
+      }
+      prevPath = currentPath
+    }
+  }
 }

ui/test/dashboards/reducers/dashTimeV1.test.js

@@ -1,9 +1,5 @@
 import reducer from 'src/dashboards/reducers/dashTimeV1'
-import {
-  addDashTimeV1,
-  setDashTimeV1,
-  deleteDashboard,
-} from 'src/dashboards/actions/index'
+import {setDashTimeV1, deleteDashboard} from 'src/dashboards/actions/index'
 
 const emptyState = undefined
 const dashboardID = 1
@@ -18,13 +14,6 @@ describe('Dashboards.Reducers.DashTimeV1', () => {
     expect(actual).toEqual(expected)
   })
 
-  it('can add a dashboard time', () => {
-    const actual = reducer(emptyState, addDashTimeV1(dashboardID, timeRange))
-    const expected = [{dashboardID, timeRange}]
-
-    expect(actual.ranges).toEqual(expected)
-  })
-
   it('can delete a dashboard time range', () => {
     const state = {
       ranges: [{dashboardID, timeRange}],