diff --git a/ui/src/dashboards/components/EditVEO.tsx b/ui/src/dashboards/components/EditVEO.tsx index 64061442fc..55b2633717 100644 --- a/ui/src/dashboards/components/EditVEO.tsx +++ b/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 = ({ const handleClose = () => { history.push(`/orgs/${orgID}/dashboards/${dashboardID}`) + dispatch(disableUpdatedTimeRangeInVEO()) } const handleSave = () => { diff --git a/ui/src/dashboards/selectors/index.test.ts b/ui/src/dashboards/selectors/index.test.ts index 3633abbdf9..ad4fb07d78 100644 --- a/ui/src/dashboards/selectors/index.test.ts +++ b/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, diff --git a/ui/src/mockState.tsx b/ui/src/mockState.tsx index 0f2315822b..02d852536d 100644 --- a/ui/src/mockState.tsx +++ b/ui/src/mockState.tsx @@ -17,6 +17,7 @@ export const localState: LocalStorage = { app: { ephemeral: { inPresentationMode: false, + hasUpdatedTimeRangeInVEO: false, }, persisted: { autoRefresh: 0, diff --git a/ui/src/shared/actions/app.ts b/ui/src/shared/actions/app.ts index 0f1c3c4f83..56fb614d31 100644 --- a/ui/src/shared/actions/app.ts +++ b/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 | ReturnType + | ReturnType + | ReturnType | ReturnType | ReturnType | ReturnType @@ -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 | PublishNotificationAction diff --git a/ui/src/shared/components/TimeSeries.tsx b/ui/src/shared/components/TimeSeries.tsx index 91d9ad25df..de76670e69 100644 --- a/ui/src/shared/components/TimeSeries.tsx +++ b/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 { } 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(state, ResourceType.Buckets), variables, diff --git a/ui/src/shared/reducers/app.test.ts b/ui/src/shared/reducers/app.test.ts index f7fd0a247a..00c2bf93dc 100644 --- a/ui/src/shared/reducers/app.test.ts +++ b/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, diff --git a/ui/src/shared/reducers/app.ts b/ui/src/shared/reducers/app.ts index 3ebb37bf30..bc39707e54 100644 --- a/ui/src/shared/reducers/app.ts +++ b/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 } diff --git a/ui/src/shared/selectors/app.ts b/ui/src/shared/selectors/app.ts index e5ee334995..0d0eeb15b3 100644 --- a/ui/src/shared/selectors/app.ts +++ b/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 diff --git a/ui/src/timeMachine/components/Queries.tsx b/ui/src/timeMachine/components/Queries.tsx index 10b8d18778..96afde3d64 100644 --- a/ui/src/timeMachine/components/Queries.tsx +++ b/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 -type Props = ReduxProps +type RouterProps = RouteComponentProps<{ + cellID: string + dashboardID: string + orgID: string +}> +type Props = ReduxProps & RouterProps class TimeMachineQueries extends PureComponent { public render() { @@ -74,8 +81,22 @@ class TimeMachineQueries extends PureComponent { } 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))