fix(ui): repair visual comparison with time variables

ui/src/shared/query/helpers.js

@@ -6,7 +6,7 @@ import {
   RELATIVE_LOWER,
   RELATIVE_UPPER,
 } from 'shared/constants/timeRange'
-const now = /^now/
+const now = /^now|^:/ // ether now() or variable reference (':dashboardTime:') is present
 
 export const timeRangeType = ({upper, lower, type}) => {
   if (!upper && !lower) {
@@ -16,9 +16,16 @@ export const timeRangeType = ({upper, lower, type}) => {
   if (type && type !== INFLUXQL) {
     return INVALID
   }
-
-  const isUpperValid = moment(new Date(upper)).isValid()
-  const isLowerValid = moment(new Date(lower)).isValid()
+  const isUpperValid =
+    upper !== null &&
+    upper !== undefined &&
+    upper !== '' &&
+    (upper === ':upperDashboardTime:' || moment(new Date(upper)).isValid())
+  const isLowerValid =
+    lower !== null &&
+    lower !== undefined &&
+    lower !== '' &&
+    (lower === ':dashboardTime:' || moment(new Date(lower)).isValid())
 
   // {lower: <Date>, upper: <Date>}
   if (isLowerValid && isUpperValid) {

ui/test/shared/query/helpers.test.js

@@ -47,6 +47,33 @@ describe('Shared.Query.Helpers', () => {
 
       expect(timeRangeType(timeRange)).toBe(RELATIVE_UPPER)
     })
+
+    it('can detect absolute type with variables', () => {
+      const upper = ':upperDashboardTime:'
+      const lower = ':dashboardTime:'
+
+      const timeRange = {lower, upper, format}
+
+      expect(timeRangeType(timeRange)).toBe(ABSOLUTE)
+    })
+
+    it('can detect exclusive relative lower with variable', () => {
+      const lower = ':dashboardTime:'
+      const upper = null
+
+      const timeRange = {lower, upper, format}
+
+      expect(timeRangeType(timeRange)).toBe(RELATIVE_LOWER)
+    })
+
+    it('can detect relative upper with variable', () => {
+      const upper = 'now()'
+      const lower = ':dashboardTime:'
+
+      const timeRange = {lower, upper, format}
+
+      expect(timeRangeType(timeRange)).toBe(RELATIVE_UPPER)
+    })
   })
 
   describe('timeRangeShift', () => {
@@ -104,5 +131,40 @@ describe('Shared.Query.Helpers', () => {
       expect(type).toBe(ABSOLUTE)
       expect(actual).toEqual(expected)
     })
+
+    it('can calculate the shift for absolute timeRanges with variables', () => {
+      const upper = ':upperDashboardTime:'
+      const lower = ':dashboardTime:'
+      const shift = {quantity: 7, unit: 'd'}
+      const timeRange = {upper, lower}
+
+      const type = timeRangeType(timeRange)
+      const actual = shiftTimeRange(timeRange, shift)
+      const expected = {
+        lower: `${lower} - 7d`,
+        upper: `${upper} - 7d`,
+        type: 'shifted',
+      }
+
+      expect(type).toBe(ABSOLUTE)
+      expect(actual).toEqual(expected)
+    })
+
+    it('can calculate the shift for relative lower timeRanges with variables', () => {
+      const shift = {quantity: 7, unit: 'd'}
+      const lower = ':dashboardTime:'
+      const timeRange = {lower, upper: null}
+
+      const type = timeRangeType(timeRange)
+      const actual = shiftTimeRange(timeRange, shift)
+      const expected = {
+        lower: `${lower} - 7d`,
+        upper: `now() - 7d`,
+        type: 'shifted',
+      }
+
+      expect(type).toBe(RELATIVE_LOWER)
+      expect(actual).toEqual(expected)
+    })
   })
 })