diff --git a/src/plugins/discover/public/application/main/components/layout/discover_layout.tsx b/src/plugins/discover/public/application/main/components/layout/discover_layout.tsx index 57c5a9041dac2..69bf6d44fad4d 100644 --- a/src/plugins/discover/public/application/main/components/layout/discover_layout.tsx +++ b/src/plugins/discover/public/application/main/components/layout/discover_layout.tsx @@ -81,7 +81,10 @@ export function DiscoverLayout({ stateContainer }: DiscoverLayoutProps) { if (uiSettings.get(SHOW_FIELD_STATISTICS) !== true) return VIEW_MODE.DOCUMENT_LEVEL; return state.viewMode ?? VIEW_MODE.DOCUMENT_LEVEL; }); - const dataView = useInternalStateSelector((state) => state.dataView!); + const [dataView, dataViewLoading] = useInternalStateSelector((state) => [ + state.dataView!, + state.dataViewLoading, + ]); const dataState: DataMainMsg = useDataState(main$); const savedSearch = useSavedSearchInitial(); @@ -223,12 +226,13 @@ export function DiscoverLayout({ stateContainer }: DiscoverLayoutProps) { onDropFieldToTable={onDropFieldToTable} panelsToggle={panelsToggle} /> - {resultState === 'loading' && } + {(resultState === 'loading' || dataViewLoading) && } ); }, [ currentColumns, dataView, + dataViewLoading, docLinks, isPlainRecord, mainContainer, @@ -243,8 +247,8 @@ export function DiscoverLayout({ stateContainer }: DiscoverLayoutProps) { const isLoading = documentState.fetchStatus === FetchStatus.LOADING || - documentState.fetchStatus === FetchStatus.PARTIAL; - + documentState.fetchStatus === FetchStatus.PARTIAL || + dataViewLoading; const onCancelClick = useCallback(() => { stateContainer.dataState.cancel(); sendErrorMsg(stateContainer.dataState.data$.documents$); diff --git a/src/plugins/discover/public/application/main/hooks/utils/change_data_view.test.ts b/src/plugins/discover/public/application/main/hooks/utils/change_data_view.test.ts index 07c1a04918b62..d94f01f1a7f1e 100644 --- a/src/plugins/discover/public/application/main/hooks/utils/change_data_view.test.ts +++ b/src/plugins/discover/public/application/main/hooks/utils/change_data_view.test.ts @@ -15,6 +15,8 @@ import { savedSearchMock } from '../../../../__mocks__/saved_search'; import { discoverServiceMock } from '../../../../__mocks__/services'; import type { DataView } from '@kbn/data-views-plugin/common'; import { getDiscoverStateMock } from '../../../../__mocks__/discover_state.mock'; +import { PureTransitionsToTransitions } from '@kbn/kibana-utils-plugin/common/state_containers'; +import { InternalStateTransitions } from '../../services/discover_internal_state_container'; const setupTestParams = (dataView: DataView | undefined) => { const savedSearch = savedSearchMock; @@ -26,12 +28,13 @@ const setupTestParams = (dataView: DataView | undefined) => { discoverState.internalState.transitions.setDataView(savedSearch.searchSource.getField('index')!); services.dataViews.get = jest.fn(() => Promise.resolve(dataView as DataView)); discoverState.appState.update = jest.fn(); - discoverState.dataState.reset = jest.fn(); + discoverState.internalState.transitions = { + setDataViewLoading: jest.fn(), + } as unknown as Readonly>; return { services, appState: discoverState.appState, internalState: discoverState.internalState, - dataState: discoverState.dataState, }; }; @@ -44,7 +47,7 @@ describe('changeDataView', () => { index: 'data-view-with-user-default-column-id', sort: [['@timestamp', 'desc']], }); - expect(params.dataState.reset).toHaveBeenCalled(); + expect(params.internalState.transitions.setDataViewLoading).toBeCalledTimes(2); }); it('should set the right app state when a valid data view to switch to is given', async () => { @@ -55,13 +58,13 @@ describe('changeDataView', () => { index: 'data-view-with-various-field-types-id', sort: [['data', 'desc']], }); - expect(params.dataState.reset).toHaveBeenCalled(); + expect(params.internalState.transitions.setDataViewLoading).toBeCalledTimes(2); }); it('should not set the app state when an invalid data view to switch to is given', async () => { const params = setupTestParams(undefined); await changeDataView('data-view-with-various-field-types', params); expect(params.appState.update).not.toHaveBeenCalled(); - expect(params.dataState.reset).toHaveBeenCalled(); + expect(params.internalState.transitions.setDataViewLoading).toBeCalledTimes(2); }); }); diff --git a/src/plugins/discover/public/application/main/hooks/utils/change_data_view.ts b/src/plugins/discover/public/application/main/hooks/utils/change_data_view.ts index 4b0b79fb5be47..3754079f6a10a 100644 --- a/src/plugins/discover/public/application/main/hooks/utils/change_data_view.ts +++ b/src/plugins/discover/public/application/main/hooks/utils/change_data_view.ts @@ -13,7 +13,6 @@ import { SORT_DEFAULT_ORDER_SETTING, DEFAULT_COLUMNS_SETTING, } from '@kbn/discover-utils'; -import { DiscoverDataStateContainer } from '../../services/discover_data_state_container'; import { DiscoverInternalStateContainer } from '../../services/discover_internal_state_container'; import { DiscoverAppStateContainer } from '../../services/discover_app_state_container'; import { addLog } from '../../../../utils/add_log'; @@ -29,12 +28,10 @@ export async function changeDataView( services, internalState, appState, - dataState, }: { services: DiscoverServices; internalState: DiscoverInternalStateContainer; appState: DiscoverAppStateContainer; - dataState: DiscoverDataStateContainer; } ) { addLog('[ui] changeDataView', { id }); @@ -43,7 +40,7 @@ export async function changeDataView( const state = appState.getState(); let nextDataView: DataView | null = null; // switch to the loading state of Discover Data, to make sure loading indication is displayed when loading the new data view - dataState.reset(); + internalState.transitions.setDataViewLoading(true); try { nextDataView = typeof id === 'string' ? await dataViews.get(id, false) : id; @@ -68,4 +65,5 @@ export async function changeDataView( internalState.transitions.setExpandedDoc(undefined); } } + internalState.transitions.setDataViewLoading(false); } diff --git a/src/plugins/discover/public/application/main/services/discover_internal_state_container.ts b/src/plugins/discover/public/application/main/services/discover_internal_state_container.ts index ec8d7ec6c57f2..8604803a062ef 100644 --- a/src/plugins/discover/public/application/main/services/discover_internal_state_container.ts +++ b/src/plugins/discover/public/application/main/services/discover_internal_state_container.ts @@ -17,14 +17,16 @@ import type { DataTableRecord } from '@kbn/discover-utils/types'; export interface InternalState { dataView: DataView | undefined; + dataViewLoading: boolean; savedDataViews: DataViewListItem[]; adHocDataViews: DataView[]; expandedDoc: DataTableRecord | undefined; customFilters: Filter[]; } -interface InternalStateTransitions { +export interface InternalStateTransitions { setDataView: (state: InternalState) => (dataView: DataView) => InternalState; + setDataViewLoading: (state: InternalState) => (isLoading: boolean) => InternalState; setSavedDataViews: (state: InternalState) => (dataView: DataViewListItem[]) => InternalState; setAdHocDataViews: (state: InternalState) => (dataViews: DataView[]) => InternalState; appendAdHocDataViews: ( @@ -52,6 +54,7 @@ export function getInternalStateContainer() { return createStateContainer( { dataView: undefined, + dataViewLoading: false, adHocDataViews: [], savedDataViews: [], expandedDoc: undefined, @@ -62,6 +65,10 @@ export function getInternalStateContainer() { ...prevState, dataView: nextDataView, }), + setDataViewLoading: (prevState: InternalState) => (loading: boolean) => ({ + ...prevState, + dataViewLoading: loading, + }), setSavedDataViews: (prevState: InternalState) => (nextDataViewList: DataViewListItem[]) => ({ ...prevState, savedDataViews: nextDataViewList, diff --git a/src/plugins/discover/public/application/main/services/discover_state.ts b/src/plugins/discover/public/application/main/services/discover_state.ts index 2a0097f3e8d42..1e9be0600c3af 100644 --- a/src/plugins/discover/public/application/main/services/discover_state.ts +++ b/src/plugins/discover/public/application/main/services/discover_state.ts @@ -454,7 +454,6 @@ export function getDiscoverStateContainer({ services, internalState: internalStateContainer, appState: appStateContainer, - dataState: dataStateContainer, }); }; /** diff --git a/src/plugins/discover/public/application/main/utils/fetch_all.test.ts b/src/plugins/discover/public/application/main/utils/fetch_all.test.ts index 744ca9039d8c0..80696f8dce28e 100644 --- a/src/plugins/discover/public/application/main/utils/fetch_all.test.ts +++ b/src/plugins/discover/public/application/main/utils/fetch_all.test.ts @@ -72,6 +72,7 @@ describe('test fetchAll', () => { getAppState: () => ({}), getInternalState: () => ({ dataView: undefined, + dataViewLoading: false, savedDataViews: [], adHocDataViews: [], expandedDoc: undefined, @@ -269,6 +270,7 @@ describe('test fetchAll', () => { getAppState: () => ({ query }), getInternalState: () => ({ dataView: undefined, + dataViewLoading: false, savedDataViews: [], adHocDataViews: [], expandedDoc: undefined, @@ -394,6 +396,7 @@ describe('test fetchAll', () => { getAppState: () => ({ query }), getInternalState: () => ({ dataView: undefined, + dataViewLoading: false, savedDataViews: [], adHocDataViews: [], expandedDoc: undefined,