Explore: Default synced to true, only show synced status if panes are split (#77759)

* Default synced to true, only show synced status if panes are split

* Don’t default sync to true until split happens, handle syncing when init or history change sync happens

* Sync times if origin pane and new pane have the same range
This commit is contained in:
Kristina 2023-11-21 07:55:01 -06:00 committed by GitHub
parent 1f49d0b662
commit 165de515cd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 3 deletions

View File

@ -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,

View File

@ -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,