feat(VEO-timerange-toggle): prevents timerange selections in the VEO from rerunning queries until the VEO is closed (#18677)

ui/src/dashboards/components/EditVEO.tsx

@@ -10,6 +10,7 @@ import TimeMachine from 'src/timeMachine/components/TimeMachine'
 import VEOHeader from 'src/dashboards/components/VEOHeader'
 
 // Actions
+import {disableUpdatedTimeRangeInVEO} from 'src/shared/actions/app'
 import {setName} from 'src/timeMachine/actions'
 import {saveVEOView} from 'src/dashboards/actions/thunks'
 import {getViewAndResultsForVEO} from 'src/views/actions/thunks'
@@ -44,6 +45,7 @@ const EditViewVEO: FunctionComponent<Props> = ({
 
   const handleClose = () => {
     history.push(`/orgs/${orgID}/dashboards/${dashboardID}`)
+    dispatch(disableUpdatedTimeRangeInVEO())
   }
 
   const handleSave = () => {

ui/src/dashboards/selectors/index.test.ts

@@ -77,6 +77,7 @@ describe('Dashboards.Selector', () => {
     const app: AppPresentationState = {
       ephemeral: {
         inPresentationMode: false,
+        hasUpdatedTimeRangeInVEO: false,
       },
       persisted: {
         autoRefresh: 0,
@@ -99,6 +100,7 @@ describe('Dashboards.Selector', () => {
     const app: AppPresentationState = {
       ephemeral: {
         inPresentationMode: false,
+        hasUpdatedTimeRangeInVEO: false,
       },
       persisted: {
         autoRefresh: 0,

ui/src/mockState.tsx

@@ -17,6 +17,7 @@ export const localState: LocalStorage = {
   app: {
     ephemeral: {
       inPresentationMode: false,
+      hasUpdatedTimeRangeInVEO: false,
     },
     persisted: {
       autoRefresh: 0,

ui/src/shared/actions/app.ts

@@ -12,6 +12,8 @@ import {TimeZone, Theme, NavBarState, NotebookMiniMapState} from 'src/types'
 export enum ActionTypes {
   EnablePresentationMode = 'ENABLE_PRESENTATION_MODE',
   DisablePresentationMode = 'DISABLE_PRESENTATION_MODE',
+  EnableUpdatedTimeRangeInVEO = 'ENABLE_UPDATED_TIMERANGE_IN_VEO',
+  DisableUpdatedTimeRangeInVEO = 'DISABLE_UPDATED_TIMERANGE_IN_VEO',
   SetNavBarState = 'SET_NAV_BAR_STATE',
   SetNotebookMiniMapState = 'SET_NOTEBOOK_MINI_MAP_STATE',
   SetAutoRefresh = 'SET_AUTOREFRESH',
@@ -23,6 +25,8 @@ export enum ActionTypes {
 export type Action =
   | ReturnType<typeof enablePresentationMode>
   | ReturnType<typeof disablePresentationMode>
+  | ReturnType<typeof enableUpdatedTimeRangeInVEO>
+  | ReturnType<typeof disableUpdatedTimeRangeInVEO>
   | ReturnType<typeof setNavBarState>
   | ReturnType<typeof setNotebookMiniMapState>
   | ReturnType<typeof setAutoRefresh>
@@ -41,6 +45,16 @@ export const disablePresentationMode = () =>
     type: ActionTypes.DisablePresentationMode,
   } as const)
 
+export const enableUpdatedTimeRangeInVEO = () =>
+  ({
+    type: ActionTypes.EnableUpdatedTimeRangeInVEO,
+  } as const)
+
+export const disableUpdatedTimeRangeInVEO = () =>
+  ({
+    type: ActionTypes.DisableUpdatedTimeRangeInVEO,
+  } as const)
+
 export const delayEnablePresentationMode = () => (
   dispatch: Dispatch<
     ReturnType<typeof enablePresentationMode> | PublishNotificationAction

ui/src/shared/components/TimeSeries.tsx

@@ -42,9 +42,10 @@ import {
 } from 'src/shared/copy/notifications'
 import {TIME_RANGE_START, TIME_RANGE_STOP} from 'src/variables/constants'
 
-// Actions
+// Actions & Selectors
 import {notify as notifyAction} from 'src/shared/actions/notifications'
 import {setQueryResultsByQueryID} from 'src/queryCache/actions'
+import {hasUpdatedTimeRangeInVEO} from 'src/shared/selectors/app'
 
 // Types
 import {
@@ -303,6 +304,17 @@ class TimeSeries extends Component<Props, State> {
   }
 
   private shouldReload(prevProps: Props) {
+    if (this.props.hasUpdatedTimeRangeInVEO) {
+      return false
+    }
+
+    if (
+      prevProps.hasUpdatedTimeRangeInVEO &&
+      !this.props.hasUpdatedTimeRangeInVEO
+    ) {
+      return true
+    }
+
     if (prevProps.submitToken !== this.props.submitToken) {
       return true
     }
@@ -343,6 +355,7 @@ const mstp = (state: AppState, props: OwnProps) => {
   ]
 
   return {
+    hasUpdatedTimeRangeInVEO: hasUpdatedTimeRangeInVEO(state),
     queryLink: state.links.query.self,
     buckets: getAll<Bucket>(state, ResourceType.Buckets),
     variables,

ui/src/shared/reducers/app.test.ts

@@ -14,6 +14,7 @@ describe('Shared.Reducers.appReducer', () => {
   const initialState: AppPresentationState = {
     ephemeral: {
       inPresentationMode: false,
+      hasUpdatedTimeRangeInVEO: false,
     },
     persisted: {
       autoRefresh: 0,

ui/src/shared/reducers/app.ts

@@ -8,6 +8,7 @@ import {TimeZone, NavBarState, Theme, NotebookMiniMapState} from 'src/types'
 export interface AppState {
   ephemeral: {
     inPresentationMode: boolean
+    hasUpdatedTimeRangeInVEO: boolean
   }
   persisted: {
     autoRefresh: number
@@ -22,6 +23,7 @@ export interface AppState {
 const initialState: AppState = {
   ephemeral: {
     inPresentationMode: false,
+    hasUpdatedTimeRangeInVEO: false,
   },
   persisted: {
     theme: 'dark',
@@ -57,6 +59,20 @@ const appEphemeralReducer = (
       }
     }
 
+    case ActionTypes.EnableUpdatedTimeRangeInVEO: {
+      return {
+        ...state,
+        hasUpdatedTimeRangeInVEO: true,
+      }
+    }
+
+    case ActionTypes.DisableUpdatedTimeRangeInVEO: {
+      return {
+        ...state,
+        hasUpdatedTimeRangeInVEO: false,
+      }
+    }
+
     default:
       return state
   }

ui/src/shared/selectors/app.ts

@@ -2,3 +2,6 @@ import {AppState, TimeZone} from 'src/types'
 
 export const timeZone = (state: AppState): TimeZone =>
   state.app.persisted.timeZone || ('Local' as TimeZone)
+
+export const hasUpdatedTimeRangeInVEO = (state: AppState): boolean =>
+  state.app.ephemeral.hasUpdatedTimeRangeInVEO || false

ui/src/timeMachine/components/Queries.tsx

@@ -1,6 +1,7 @@
 // Libraries
 import React, {PureComponent} from 'react'
 import {connect, ConnectedProps} from 'react-redux'
+import {withRouter, RouteComponentProps} from 'react-router'
 
 // Components
 import TimeMachineFluxEditor from 'src/timeMachine/components/TimeMachineFluxEditor'
@@ -23,6 +24,7 @@ import {
 // Actions
 import {setAutoRefresh} from 'src/timeMachine/actions'
 import {setTimeRange} from 'src/timeMachine/actions'
+import {enableUpdatedTimeRangeInVEO} from 'src/shared/actions/app'
 
 // Utils
 import {
@@ -36,7 +38,12 @@ import {getTimeRange} from 'src/dashboards/selectors'
 import {AppState, TimeRange, AutoRefreshStatus} from 'src/types'
 
 type ReduxProps = ConnectedProps<typeof connector>
-type Props = ReduxProps
+type RouterProps = RouteComponentProps<{
+  cellID: string
+  dashboardID: string
+  orgID: string
+}>
+type Props = ReduxProps & RouterProps
 
 class TimeMachineQueries extends PureComponent<Props> {
   public render() {
@@ -74,8 +81,22 @@ class TimeMachineQueries extends PureComponent<Props> {
   }
 
   private handleSetTimeRange = (timeRange: TimeRange) => {
-    const {autoRefresh, onSetAutoRefresh, onSetTimeRange} = this.props
+    const {
+      autoRefresh,
+      location: {pathname},
+      onEnableUpdatedTimeRangeInVEO,
+      onSetAutoRefresh,
+      onSetTimeRange,
+      match: {
+        params: {cellID, dashboardID, orgID},
+      },
+    } = this.props
 
+    const inVEOMode =
+      pathname === `orgs/${orgID}/dashboards/${dashboardID}/cell/${cellID}/edit`
+    if (inVEOMode) {
+      onEnableUpdatedTimeRangeInVEO()
+    }
     onSetTimeRange(timeRange)
 
     if (timeRange.type === 'custom') {
@@ -122,9 +143,10 @@ const mstp = (state: AppState) => {
 
 const mdtp = {
   onSetTimeRange: setTimeRange,
+  onEnableUpdatedTimeRangeInVEO: enableUpdatedTimeRangeInVEO,
   onSetAutoRefresh: setAutoRefresh,
 }
 
 const connector = connect(mstp, mdtp)
 
-export default connector(TimeMachineQueries)
+export default connector(withRouter(TimeMachineQueries))