diff --git a/public/app/features/browse-dashboards/api/browseDashboardsAPI.ts b/public/app/features/browse-dashboards/api/browseDashboardsAPI.ts index 7b97b71a5a4..c2b8d63189f 100644 --- a/public/app/features/browse-dashboards/api/browseDashboardsAPI.ts +++ b/public/app/features/browse-dashboards/api/browseDashboardsAPI.ts @@ -13,7 +13,7 @@ import { DashboardDTO, DescendantCount, DescendantCountDTO, FolderDTO, SaveDashb import { refetchChildren, refreshParents } from '../state'; import { DashboardTreeSelection } from '../types'; -import { PAGE_SIZE, ROOT_PAGE_SIZE } from './services'; +import { PAGE_SIZE } from './services'; interface RequestOptions extends BackendSrvRequest { manageError?: (err: unknown) => { error: unknown }; @@ -74,7 +74,7 @@ export const browseDashboardsAPI = createApi({ dispatch( refetchChildren({ parentUID: parentUid, - pageSize: parentUid ? PAGE_SIZE : ROOT_PAGE_SIZE, + pageSize: PAGE_SIZE, }) ); locationService.push(locationUtil.stripBaseFromUrl(folder.url)); @@ -100,7 +100,7 @@ export const browseDashboardsAPI = createApi({ dispatch( refetchChildren({ parentUID: parentUid, - pageSize: parentUid ? PAGE_SIZE : ROOT_PAGE_SIZE, + pageSize: PAGE_SIZE, }) ); }); @@ -120,13 +120,13 @@ export const browseDashboardsAPI = createApi({ dispatch( refetchChildren({ parentUID: parentUid, - pageSize: parentUid ? PAGE_SIZE : ROOT_PAGE_SIZE, + pageSize: PAGE_SIZE, }) ); dispatch( refetchChildren({ parentUID: destinationUID, - pageSize: destinationUID ? PAGE_SIZE : ROOT_PAGE_SIZE, + pageSize: PAGE_SIZE, }) ); }); @@ -148,7 +148,7 @@ export const browseDashboardsAPI = createApi({ dispatch( refetchChildren({ parentUID: parentUid, - pageSize: parentUid ? PAGE_SIZE : ROOT_PAGE_SIZE, + pageSize: PAGE_SIZE, }) ); }); @@ -228,7 +228,7 @@ export const browseDashboardsAPI = createApi({ dispatch( refetchChildren({ parentUID: destinationUID, - pageSize: destinationUID ? PAGE_SIZE : ROOT_PAGE_SIZE, + pageSize: PAGE_SIZE, }) ); dispatch(refreshParents([...selectedFolders, ...selectedDashboards])); @@ -291,7 +291,7 @@ export const browseDashboardsAPI = createApi({ dispatch( refetchChildren({ parentUID: folderUid, - pageSize: folderUid ? PAGE_SIZE : ROOT_PAGE_SIZE, + pageSize: PAGE_SIZE, }) ); }); diff --git a/public/app/features/browse-dashboards/api/services.ts b/public/app/features/browse-dashboards/api/services.ts index 417865d9eb4..360fee5ab41 100644 --- a/public/app/features/browse-dashboards/api/services.ts +++ b/public/app/features/browse-dashboards/api/services.ts @@ -4,8 +4,7 @@ import { getGrafanaSearcher, NestedFolderDTO } from 'app/features/search/service import { queryResultToViewItem } from 'app/features/search/service/utils'; import { DashboardViewItem } from 'app/features/search/types'; -export const ROOT_PAGE_SIZE = 50; -export const PAGE_SIZE = 999; +export const PAGE_SIZE = 50; export async function listFolders( parentUID?: string, diff --git a/public/app/features/browse-dashboards/components/BrowseView.tsx b/public/app/features/browse-dashboards/components/BrowseView.tsx index 691d272c086..21baa345355 100644 --- a/public/app/features/browse-dashboards/components/BrowseView.tsx +++ b/public/app/features/browse-dashboards/components/BrowseView.tsx @@ -110,7 +110,7 @@ export function BrowseView({ folderUID, width, height, canSelect }: BrowseViewPr [flatTree] ); - const handleLoadMore = useLoadNextChildrenPage(folderUID); + const handleLoadMore = useLoadNextChildrenPage(); if (status === 'fulfilled' && flatTree.length === 0) { return ( diff --git a/public/app/features/browse-dashboards/components/DashboardsTree.tsx b/public/app/features/browse-dashboards/components/DashboardsTree.tsx index 70cd87e19ee..9a9713574b6 100644 --- a/public/app/features/browse-dashboards/components/DashboardsTree.tsx +++ b/public/app/features/browse-dashboards/components/DashboardsTree.tsx @@ -35,7 +35,7 @@ interface DashboardsTreeProps { onItemSelectionChange: (item: DashboardViewItem, newState: boolean) => void; isItemLoaded: (itemIndex: number) => boolean; - requestLoadMore: (startIndex: number, endIndex: number) => void; + requestLoadMore: (folderUid: string | undefined) => void; } const HEADER_HEIGHT = 35; @@ -119,9 +119,10 @@ export function DashboardsTree({ const handleLoadMore = useCallback( (startIndex: number, endIndex: number) => { - requestLoadMore(startIndex, endIndex); + const { parentUID } = items[startIndex]; + requestLoadMore(parentUID); }, - [requestLoadMore] + [requestLoadMore, items] ); return ( diff --git a/public/app/features/browse-dashboards/state/actions.ts b/public/app/features/browse-dashboards/state/actions.ts index 2c29587e690..d04d401042c 100644 --- a/public/app/features/browse-dashboards/state/actions.ts +++ b/public/app/features/browse-dashboards/state/actions.ts @@ -2,7 +2,7 @@ import { GENERAL_FOLDER_UID } from 'app/features/search/constants'; import { DashboardViewItem, DashboardViewItemKind } from 'app/features/search/types'; import { createAsyncThunk } from 'app/types'; -import { listDashboards, listFolders, PAGE_SIZE, ROOT_PAGE_SIZE } from '../api/services'; +import { listDashboards, listFolders, PAGE_SIZE } from '../api/services'; import { findItem } from './utils'; @@ -44,7 +44,7 @@ export const refreshParents = createAsyncThunk( } for (const parentUID of parentsToRefresh) { - dispatch(refetchChildren({ parentUID, pageSize: parentUID ? PAGE_SIZE : ROOT_PAGE_SIZE })); + dispatch(refetchChildren({ parentUID, pageSize: PAGE_SIZE })); } } ); diff --git a/public/app/features/browse-dashboards/state/hooks.ts b/public/app/features/browse-dashboards/state/hooks.ts index 86bc7e33aa6..71d0fd6596b 100644 --- a/public/app/features/browse-dashboards/state/hooks.ts +++ b/public/app/features/browse-dashboards/state/hooks.ts @@ -4,7 +4,7 @@ import { createSelector } from 'reselect'; import { DashboardViewItem } from 'app/features/search/types'; import { useSelector, StoreState, useDispatch } from 'app/types'; -import { ROOT_PAGE_SIZE } from '../api/services'; +import { PAGE_SIZE } from '../api/services'; import { BrowseDashboardsState, DashboardsTreeItem, DashboardTreeSelection } from '../types'; import { fetchNextChildrenPage } from './actions'; @@ -97,22 +97,25 @@ export function useActionSelectionState() { return useSelector((state) => selectedItemsForActionsSelector(state)); } -export function useLoadNextChildrenPage(folderUID: string | undefined) { +export function useLoadNextChildrenPage() { const dispatch = useDispatch(); const requestInFlightRef = useRef(false); - const handleLoadMore = useCallback(() => { - if (requestInFlightRef.current) { - return Promise.resolve(); - } + const handleLoadMore = useCallback( + (folderUID: string | undefined) => { + if (requestInFlightRef.current) { + return Promise.resolve(); + } - requestInFlightRef.current = true; + requestInFlightRef.current = true; - const promise = dispatch(fetchNextChildrenPage({ parentUID: folderUID, pageSize: ROOT_PAGE_SIZE })); - promise.finally(() => (requestInFlightRef.current = false)); + const promise = dispatch(fetchNextChildrenPage({ parentUID: folderUID, pageSize: PAGE_SIZE })); + promise.finally(() => (requestInFlightRef.current = false)); - return promise; - }, [dispatch, folderUID]); + return promise; + }, + [dispatch] + ); return handleLoadMore; } @@ -143,6 +146,7 @@ function createFlatTree( isOpen: false, level: level + 1, item: { kind: 'ui', uiKind: 'empty-folder', uid: item.uid + 'empty-folder' }, + parentUID, }); } @@ -166,8 +170,8 @@ function createFlatTree( let children = (items || []).flatMap((item) => mapItem(item, folderUID, level)); - if (level === 0 && (!collection || !collection.isFullyLoaded)) { - children = children.concat(getPaginationPlaceholders(ROOT_PAGE_SIZE, folderUID, level)); + if ((level === 0 && !collection) || (isOpen && collection && !collection.isFullyLoaded)) { + children = children.concat(getPaginationPlaceholders(PAGE_SIZE, folderUID, level)); } return children; diff --git a/public/app/features/browse-dashboards/types.ts b/public/app/features/browse-dashboards/types.ts index 1b43f1bf07d..98ba83280bd 100644 --- a/public/app/features/browse-dashboards/types.ts +++ b/public/app/features/browse-dashboards/types.ts @@ -39,6 +39,7 @@ export interface DashboardsTreeItem