Refactor time range validation logic to always return TimeRange

Clean up namespace & logic flow in
syncDashboardTimeRangeFromURLQueries.

Authored-by: Jared Scheib <jared.scheib@gmail.com>

ui/src/dashboards/actions/index.js

@@ -474,34 +474,28 @@ const syncDashboardTimeRangeFromURLQueries = (
   urlQueries,
   location
 ) => (dispatch, getState) => {
-  const dashboard = getState().dashboardUI.dashboards.find(
-    d => d.id === dashboardID
-  )
-
   const {
-    upper = null,
-    lower = null,
-    zoomedUpper = null,
-    zoomedLower = null,
-  } = urlQueries
-
-  let timeRange
-  const {dashTimeV1} = getState()
+    dashboardUI: {dashboards},
+    dashTimeV1,
+  } = getState()
+  const dashboard = dashboards.find(d => d.id === dashboardID)
 
   const timeRangeFromQueries = {
     upper: urlQueries.upper,
     lower: urlQueries.lower,
   }
-  const timeRangeOrNull = validTimeRange(timeRangeFromQueries)
+  const zoomedTimeRangeFromQueries = {
+    lower: urlQueries.zoomedLower,
+    upper: urlQueries.zoomedUpper,
+  }
 
-  if (timeRangeOrNull) {
-    timeRange = timeRangeOrNull
-  } else {
+  let validatedTimeRange = validTimeRange(timeRangeFromQueries)
+  if (!validatedTimeRange.lower) {
     const dashboardTimeRange = dashTimeV1.ranges.find(
       r => r.dashboardID === idNormalizer(TYPE_ID, dashboardID)
     )
 
-    timeRange = dashboardTimeRange || defaultTimeRange
+    validatedTimeRange = dashboardTimeRange || defaultTimeRange
 
     if (timeRangeFromQueries.lower || timeRangeFromQueries.upper) {
       dispatch(
@@ -509,22 +503,23 @@ const syncDashboardTimeRangeFromURLQueries = (
       )
     }
   }
+  dispatch(setDashTimeV1(dashboardID, validatedTimeRange))
 
-  dispatch(setDashTimeV1(dashboardID, timeRange))
-
-  if (!validAbsoluteTimeRange({lower: zoomedLower, upper: zoomedUpper})) {
-    if (zoomedLower || zoomedUpper) {
-      dispatch(notify(notifyInvalidZoomedTimeRangeValueInURLQuery()))
-    }
+  const validatedZoomedTimeRange = validAbsoluteTimeRange(
+    zoomedTimeRangeFromQueries
+  )
+  if (
+    !validatedZoomedTimeRange.lower &&
+    (urlQueries.zoomedLower || urlQueries.zoomedUpper)
+  ) {
+    dispatch(notify(notifyInvalidZoomedTimeRangeValueInURLQuery()))
   }
-
-  dispatch(setZoomedTimeRange({zoomedLower, zoomedUpper}))
-
+  dispatch(setZoomedTimeRange(validatedZoomedTimeRange))
   const urlQueryTimeRanges = {
-    upper,
-    lower,
-    zoomedUpper,
-    zoomedLower,
+    lower: validatedTimeRange.lower,
+    upper: validatedTimeRange.upper,
+    zoomedLower: validatedZoomedTimeRange.lower,
+    zoomedUpper: validatedZoomedTimeRange.upper,
   }
   dispatch(
     syncURLQueryFromTempVars(

ui/src/dashboards/utils/time.ts

@@ -34,35 +34,37 @@ export const millisecondTimeRange = ({
   return {since, until}
 }
 
-const validRelativeTimeRange = (timeRange: TimeRange): TimeRange | null => {
-  const matchedRange = timeRanges.find(t => t.lower === timeRange.lower)
+const nullTimeRange: TimeRange = {lower: null, upper: null}
 
-  if (matchedRange) {
-    return matchedRange
+const validRelativeTimeRange = (timeRange: TimeRange): TimeRange => {
+  const validatedTimeRange = timeRanges.find(t => t.lower === timeRange.lower)
+
+  if (validatedTimeRange) {
+    return validatedTimeRange
   }
 
-  return null
+  return nullTimeRange
 }
 
-export const validAbsoluteTimeRange = (
-  timeRange: TimeRange
-): TimeRange | null => {
-  if (
-    timeRange.lower &&
-    timeRange.upper &&
-    moment(timeRange.lower).isValid() &&
-    moment(timeRange.upper).isValid() &&
-    moment(timeRange.lower).isBefore(moment(timeRange.upper))
-  ) {
-    return timeRange
+export const validAbsoluteTimeRange = (timeRange: TimeRange): TimeRange => {
+  if (timeRange.lower && timeRange.upper) {
+    if (moment(timeRange.lower).isValid()) {
+      if (
+        timeRange.upper === 'now()' ||
+        (moment(timeRange.upper).isValid() &&
+          moment(timeRange.lower).isBefore(moment(timeRange.upper)))
+      ) {
+        return timeRange
+      }
+    }
   }
-  return null
+  return nullTimeRange
 }
 
-export const validTimeRange = (timeRange: TimeRange): TimeRange | null => {
-  let timeRangeOrNull = validRelativeTimeRange(timeRange)
-  if (!timeRangeOrNull) {
-    timeRangeOrNull = validAbsoluteTimeRange(timeRange)
+export const validTimeRange = (timeRange: TimeRange): TimeRange => {
+  const validatedTimeRange = validRelativeTimeRange(timeRange)
+  if (validatedTimeRange.lower) {
+    return validatedTimeRange
   }
-  return timeRangeOrNull
+  return validAbsoluteTimeRange(timeRange)
 }