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

pull/18920/head
Ariel Salem 2020-07-13 05:04:08 -07:00 committed by GitHub
parent ff35a29a38
commit 7d8285aded
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 78 additions and 4 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,6 +1,7 @@
// Libraries // Libraries
import React, {PureComponent} from 'react' import React, {PureComponent} from 'react'
import {connect, ConnectedProps} from 'react-redux' import {connect, ConnectedProps} from 'react-redux'
import {withRouter, RouteComponentProps} from 'react-router'
// Components // Components
import TimeMachineFluxEditor from 'src/timeMachine/components/TimeMachineFluxEditor' import TimeMachineFluxEditor from 'src/timeMachine/components/TimeMachineFluxEditor'
@ -23,6 +24,7 @@ import {
// Actions // Actions
import {setAutoRefresh} from 'src/timeMachine/actions' import {setAutoRefresh} from 'src/timeMachine/actions'
import {setTimeRange} from 'src/timeMachine/actions' import {setTimeRange} from 'src/timeMachine/actions'
import {enableUpdatedTimeRangeInVEO} from 'src/shared/actions/app'
// Utils // Utils
import { import {
@ -36,7 +38,12 @@ import {getTimeRange} from 'src/dashboards/selectors'
import {AppState, TimeRange, AutoRefreshStatus} from 'src/types' import {AppState, TimeRange, AutoRefreshStatus} from 'src/types'
type ReduxProps = ConnectedProps<typeof connector> 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> { class TimeMachineQueries extends PureComponent<Props> {
public render() { public render() {
@ -74,8 +81,22 @@ class TimeMachineQueries extends PureComponent<Props> {
} }
private handleSetTimeRange = (timeRange: TimeRange) => { 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) onSetTimeRange(timeRange)
if (timeRange.type === 'custom') { if (timeRange.type === 'custom') {
@ -122,9 +143,10 @@ const mstp = (state: AppState) => {
const mdtp = { const mdtp = {
onSetTimeRange: setTimeRange, onSetTimeRange: setTimeRange,
onEnableUpdatedTimeRangeInVEO: enableUpdatedTimeRangeInVEO,
onSetAutoRefresh: setAutoRefresh, onSetAutoRefresh: setAutoRefresh,
} }
const connector = connect(mstp, mdtp) const connector = connect(mstp, mdtp)
export default connector(TimeMachineQueries) export default connector(withRouter(TimeMachineQueries))