diff --git a/public/app/features/explore/hooks/useStateSync/index.ts b/public/app/features/explore/hooks/useStateSync/index.ts index 444ff1d36c6..b2933697bcc 100644 --- a/public/app/features/explore/hooks/useStateSync/index.ts +++ b/public/app/features/explore/hooks/useStateSync/index.ts @@ -112,8 +112,10 @@ export function useStateSync(params: ExploreQueryParams) { // if navigating the history causes one of the time range to not being equal to all the other ones, // we set syncedTimes to false to avoid inconsistent UI state. // Ideally `syncedTimes` should be saved in the URL. - if (Object.values(urlState.panes).some(({ range }, _, [{ range: firstRange }]) => !isEqual(range, firstRange))) { - dispatch(syncTimesAction({ syncedTimes: false })); + const paneArray = Object.values(urlState.panes); + if (paneArray.length > 1) { + const paneTimesUnequal = paneArray.some(({ range }, _, [{ range: firstRange }]) => !isEqual(range, firstRange)); + dispatch(syncTimesAction({ syncedTimes: !paneTimesUnequal })); // if all time ranges are equal, keep them synced } Object.entries(urlState.panes).forEach(([exploreId, urlPane], i) => { @@ -235,6 +237,13 @@ export function useStateSync(params: ExploreQueryParams) { }) ); + if (initializedPanes.length > 1) { + const paneTimesUnequal = initializedPanes.some( + ({ state }, _, [{ state: firstState }]) => !isEqual(state.range.raw, firstState.range.raw) + ); + dispatch(syncTimesAction({ syncedTimes: !paneTimesUnequal })); // if all time ranges are equal, keep them synced + } + const panesObj = initializedPanes.reduce((acc, { exploreId, state }) => { return { ...acc, diff --git a/public/app/features/explore/state/main.ts b/public/app/features/explore/state/main.ts index 64f63323293..ebe59018553 100644 --- a/public/app/features/explore/state/main.ts +++ b/public/app/features/explore/state/main.ts @@ -1,4 +1,5 @@ import { createAction } from '@reduxjs/toolkit'; +import { isEqual } from 'lodash'; import { AnyAction } from 'redux'; import { SplitOpenOptions, TimeRange, EventBusSrv } from '@grafana/data'; @@ -77,17 +78,23 @@ export const splitOpen = createAsyncThunk( } }); + const splitRange = options?.range || originState?.range.raw || DEFAULT_RANGE; + await dispatch( createNewSplitOpenPane({ exploreId: requestId, datasource: options?.datasourceUid || originState?.datasourceInstance?.getRef(), queries: withUniqueRefIds(queries), - range: options?.range || originState?.range.raw || DEFAULT_RANGE, + range: splitRange, panelsState: options?.panelsState || originState?.panelsState, correlationHelperData: options?.correlationHelperData, eventBridge: new EventBusSrv(), }) ); + + if (originState?.range) { + await dispatch(syncTimesAction({ syncedTimes: isEqual(originState.range.raw, splitRange) })); // if time ranges are equal, mark times as synced + } }, { idGenerator: generateExploreId,