Revert "fix(ui): adding times in script editor will default start and…

… endtime for timerange queries (#16201)"

This reverts commit eefb8dd.

CHANGELOG.md

@@ -25,7 +25,6 @@
 1. [16175](https://github.com/influxdata/influxdb/pull/16175): Added delete functionality to note cells so that they can be deleted
 1. [16204](https://github.com/influxdata/influxdb/pull/16204): Fix failure to create labels when creating telegraf configs
 1. [16207](https://github.com/influxdata/influxdb/pull/16207): Fix crash when editing a Telegraf config
-1. [16201](https://github.com/influxdata/influxdb/pull/16201): Updated start/endtime functionality so that custom script timeranges overwrite dropdown selections
 
 ### UI Improvements
 

ui/src/shared/components/HeatmapPlot.tsx

@@ -16,25 +16,22 @@ import {DEFAULT_LINE_COLORS} from 'src/shared/constants/graphColorPalettes'
 import {INVALID_DATA_COPY} from 'src/shared/copy/cell'
 
 // Types
-import {
-  RemoteDataState,
-  HeatmapViewProperties,
-  TimeZone,
-  TimeRange,
-} from 'src/types'
+import {RemoteDataState, HeatmapViewProperties, TimeZone} from 'src/types'
 
 interface Props {
+  endTime: number
   loading: RemoteDataState
-  timeRange: TimeRange | null
+  startTime: number
   table: Table
   timeZone: TimeZone
   viewProperties: HeatmapViewProperties
   children: (config: Config) => JSX.Element
 }
 
 const HeatmapPlot: FunctionComponent<Props> = ({
+  endTime,
   loading,
-  timeRange,
+  startTime,
   table,
   timeZone,
   viewProperties: {
@@ -59,7 +56,8 @@ const HeatmapPlot: FunctionComponent<Props> = ({
   const [xDomain, onSetXDomain, onResetXDomain] = useVisDomainSettings(
     storedXDomain,
     table.getColumn(xColumn, 'number'),
-    timeRange
+    startTime,
+    endTime
   )
 
   const [yDomain, onSetYDomain, onResetYDomain] = useVisDomainSettings(

ui/src/shared/components/RefreshingView.tsx

@@ -10,12 +10,13 @@ import ViewSwitcher from 'src/shared/components/ViewSwitcher'
 // Utils
 import {GlobalAutoRefresher} from 'src/utils/AutoRefresher'
 import {getTimeRangeVars} from 'src/variables/utils/getTimeRangeVars'
-import {
-  getVariableAssignments,
-  getDashboardValuesStatus,
-} from 'src/variables/selectors'
+import {getVariableAssignments} from 'src/variables/selectors'
+import {getDashboardValuesStatus} from 'src/variables/selectors'
 import {checkResultsLength} from 'src/shared/utils/vis'
-import {getActiveTimeRange} from 'src/timeMachine/selectors/index'
+
+// Selectors
+import {getEndTime, getStartTime} from 'src/timeMachine/selectors/index'
+import {getTimeRangeByDashboardID} from 'src/dashboards/selectors/index'
 
 // Types
 import {
@@ -38,7 +39,8 @@ interface OwnProps {
 }
 
 interface StateProps {
-  ranges: TimeRange | null
+  endTime: number
+  startTime: number
   timeZone: TimeZone
   variableAssignments: VariableAssignment[]
   variablesStatus: RemoteDataState
@@ -71,7 +73,14 @@ class RefreshingView extends PureComponent<Props, State> {
   }
 
   public render() {
-    const {check, ranges, properties, manualRefresh, timeZone} = this.props
+    const {
+      check,
+      endTime,
+      properties,
+      manualRefresh,
+      startTime,
+      timeZone,
+    } = this.props
     const {submitToken} = this.state
 
     return (
@@ -102,11 +111,12 @@ class RefreshingView extends PureComponent<Props, State> {
             >
               <ViewSwitcher
                 check={check}
+                endTime={endTime}
                 files={files}
                 giraffeResult={giraffeResult}
                 loading={loading}
                 properties={properties}
-                timeRange={ranges}
+                startTime={startTime}
                 statuses={statuses}
                 timeZone={timeZone}
               />
@@ -158,13 +168,15 @@ const mstp = (state: AppState, ownProps: OwnProps): StateProps => {
     state,
     ownProps.dashboardID
   )
+  const timeRange = getTimeRangeByDashboardID(state, ownProps.dashboardID)
+
   const valuesStatus = getDashboardValuesStatus(state, ownProps.dashboardID)
-  const {properties} = ownProps
-  const timeRange = getActiveTimeRange(ownProps.timeRange, properties.queries)
+
   const timeZone = state.app.persisted.timeZone
 
   return {
-    ranges: timeRange,
+    endTime: getEndTime(timeRange),
+    startTime: getStartTime(timeRange),
     timeZone,
     variableAssignments,
     variablesStatus: valuesStatus,

ui/src/shared/components/ScatterPlot.tsx

@@ -20,27 +20,24 @@ import {DEFAULT_LINE_COLORS} from 'src/shared/constants/graphColorPalettes'
 import {INVALID_DATA_COPY} from 'src/shared/copy/cell'
 
 // Types
-import {
-  RemoteDataState,
-  ScatterViewProperties,
-  TimeZone,
-  TimeRange,
-} from 'src/types'
+import {RemoteDataState, ScatterViewProperties, TimeZone} from 'src/types'
 
 interface Props {
   children: (config: Config) => JSX.Element
+  endTime: number
   fluxGroupKeyUnion?: string[]
   loading: RemoteDataState
-  timeRange: TimeRange | null
+  startTime: number
   table: Table
   timeZone: TimeZone
   viewProperties: ScatterViewProperties
 }
 
 const ScatterPlot: FunctionComponent<Props> = ({
   children,
+  endTime,
   loading,
-  timeRange,
+  startTime,
   timeZone,
   table,
   viewProperties: {
@@ -71,7 +68,8 @@ const ScatterPlot: FunctionComponent<Props> = ({
   const [xDomain, onSetXDomain, onResetXDomain] = useVisDomainSettings(
     storedXDomain,
     table.getColumn(xColumn, 'number'),
-    timeRange
+    startTime,
+    endTime
   )
 
   const [yDomain, onSetYDomain, onResetYDomain] = useVisDomainSettings(

ui/src/shared/components/ViewSwitcher.tsx

@@ -24,7 +24,6 @@ import {
   StatusRow,
   TimeZone,
   XYViewProperties,
-  TimeRange,
 } from 'src/types'
 
 interface Props {
@@ -35,16 +34,18 @@ interface Props {
   properties: QueryViewProperties | CheckViewProperties
   timeZone: TimeZone
   statuses: StatusRow[][]
-  timeRange: TimeRange | null
+  endTime: number
+  startTime: number
 }
 
 const ViewSwitcher: FunctionComponent<Props> = ({
   properties,
   check,
   loading,
-  timeRange,
+  endTime,
   files,
   giraffeResult: {table, fluxGroupKeyUnion},
+  startTime,
   timeZone,
   statuses,
 }) => {
@@ -82,9 +83,10 @@ const ViewSwitcher: FunctionComponent<Props> = ({
     case 'xy':
       return (
         <XYPlot
-          timeRange={timeRange}
+          endTime={endTime}
           fluxGroupKeyUnion={fluxGroupKeyUnion}
           loading={loading}
+          startTime={startTime}
           table={table}
           timeZone={timeZone}
           viewProperties={properties}
@@ -109,9 +111,10 @@ const ViewSwitcher: FunctionComponent<Props> = ({
 
       return (
         <XYPlot
-          timeRange={timeRange}
+          endTime={endTime}
           fluxGroupKeyUnion={fluxGroupKeyUnion}
           loading={loading}
+          startTime={startTime}
           table={table}
           timeZone={timeZone}
           viewProperties={xyProperties}
@@ -150,8 +153,9 @@ const ViewSwitcher: FunctionComponent<Props> = ({
     case 'heatmap':
       return (
         <HeatmapPlot
-          timeRange={timeRange}
+          endTime={endTime}
           loading={loading}
+          startTime={startTime}
           table={table}
           timeZone={timeZone}
           viewProperties={properties}
@@ -163,8 +167,9 @@ const ViewSwitcher: FunctionComponent<Props> = ({
     case 'scatter':
       return (
         <ScatterPlot
-          timeRange={timeRange}
+          endTime={endTime}
           loading={loading}
+          startTime={startTime}
           table={table}
           viewProperties={properties}
           timeZone={timeZone}

ui/src/shared/components/XYPlot.tsx

@@ -23,23 +23,25 @@ import {DEFAULT_LINE_COLORS} from 'src/shared/constants/graphColorPalettes'
 import {INVALID_DATA_COPY} from 'src/shared/copy/cell'
 
 // Types
-import {RemoteDataState, XYViewProperties, TimeZone, TimeRange} from 'src/types'
+import {RemoteDataState, XYViewProperties, TimeZone} from 'src/types'
 
 interface Props {
   children: (config: Config) => JSX.Element
+  endTime: number
   fluxGroupKeyUnion: string[]
   loading: RemoteDataState
-  timeRange: TimeRange | null
+  startTime: number
   table: Table
   timeZone: TimeZone
   viewProperties: XYViewProperties
 }
 
 const XYPlot: FunctionComponent<Props> = ({
   children,
+  endTime,
   fluxGroupKeyUnion,
   loading,
-  timeRange,
+  startTime,
   table,
   timeZone,
   viewProperties: {
@@ -79,7 +81,8 @@ const XYPlot: FunctionComponent<Props> = ({
   const [xDomain, onSetXDomain, onResetXDomain] = useVisDomainSettings(
     storedXDomain,
     table.getColumn(xColumn, 'number'),
-    timeRange
+    startTime,
+    endTime
   )
 
   const [yDomain, onSetYDomain, onResetYDomain] = useVisDomainSettings(

ui/src/shared/utils/useVisDomainSettings.test.ts

@@ -3,50 +3,29 @@ import {getValidRange} from 'src/shared/utils/useVisDomainSettings'
 
 // Types
 import {numericColumnData as data} from 'mocks/dummyData'
-import {CustomTimeRange} from 'src/types/queries'
 
 describe('getValidRange', () => {
-  const startTime: string = 'Nov 07 2019 02:46:51 GMT-0800'
-  const unixStart: number = 1573123611000
-  const endTime: string = 'Nov 28 2019 14:46:51 GMT-0800'
-  const unixEnd: number = 1574981211000
+  const startTime: number = 1573123611000
+  const endTime: number = 1574981211000
   it('should return null when no parameters are input', () => {
-    expect(getValidRange(undefined, undefined)).toEqual(null)
+    expect(getValidRange()).toEqual(null)
   })
   it('should return null when no data is passed', () => {
-    const timeRange: CustomTimeRange = {
-      type: 'custom',
-      lower: startTime,
-      upper: endTime,
-    }
-    expect(getValidRange([], timeRange)).toEqual(null)
+    expect(getValidRange([], startTime, endTime)).toEqual(null)
   })
   it("should return the startTime as startTime if it's before the first time in the data array", () => {
-    const timeRange: CustomTimeRange = {
-      type: 'custom',
-      lower: startTime,
-      upper: endTime,
-    }
-    const [start] = getValidRange(data, timeRange)
-    expect(start).toEqual(unixStart)
-    timeRange.lower = endTime
-    const [beginning] = getValidRange(data, timeRange)
+    const [start] = getValidRange(data, startTime, endTime)
+    expect(start).toEqual(startTime)
+    const [beginning] = getValidRange(data, endTime, endTime)
     expect(beginning).toEqual(data[0])
   })
   it("should return the endTime as endTime if it's before the last time in the data array", () => {
-    const timeRange: CustomTimeRange = {
-      type: 'custom',
-      lower: startTime,
-      upper: endTime,
-    }
-    const range = getValidRange(data, timeRange)
-    expect(range[1]).toEqual(unixEnd)
-    timeRange.lower = endTime
-    timeRange.upper = startTime
-    const newRange = getValidRange(data, timeRange)
+    const range = getValidRange(data, startTime, endTime)
+    expect(range[1]).toEqual(endTime)
+    const newRange = getValidRange(data, endTime, startTime)
     expect(newRange[1]).toEqual(data[data.length - 1])
   })
   it('should return the the start and end times based on the data array if no start / endTime are passed', () => {
-    expect(getValidRange(data, null)).toEqual([data[0], data[data.length - 1]])
+    expect(getValidRange(data)).toEqual([data[0], data[data.length - 1]])
   })
 })

ui/src/shared/utils/useVisDomainSettings.ts

@@ -5,10 +5,7 @@ import {NumericColumnData} from '@influxdata/giraffe'
 // Utils
 import {useOneWayState} from 'src/shared/utils/useOneWayState'
 import {extent} from 'src/shared/utils/vis'
-import {getStartTime, getEndTime} from 'src/timeMachine/selectors/index'
 
-// Types
-import {TimeRange} from 'src/types'
 /*
   This hook helps map the domain setting stored for line graph to the
   appropriate settings on a @influxdata/giraffe `Config` object.
@@ -19,15 +16,11 @@ import {TimeRange} from 'src/types'
 */
 export const getValidRange = (
   data: NumericColumnData = [],
-  timeRange: TimeRange | null
+  startTime: number = Infinity,
+  endTime: number = -Infinity
 ) => {
   const range = extent((data as number[]) || [])
-  if (!timeRange) {
-    return range
-  }
   if (range && range.length >= 2) {
-    const startTime = getStartTime(timeRange)
-    const endTime = getEndTime(timeRange)
     const start = Math.min(startTime, range[0])
     const end = Math.max(endTime, range[1])
     return [start, end]
@@ -38,14 +31,15 @@ export const getValidRange = (
 export const useVisDomainSettings = (
   storedDomain: number[],
   data: NumericColumnData,
-  timeRange: TimeRange | null = null
+  startTime: number = Infinity,
+  endTime: number = -Infinity
 ) => {
   const initialDomain = useMemo(() => {
     if (storedDomain) {
       return storedDomain
     }
 
-    return getValidRange(data, timeRange)
+    return getValidRange(data, startTime, endTime)
   }, [storedDomain, data])
 
   const [domain, setDomain] = useOneWayState(initialDomain)