IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-12-02 05:29:42 -06:00
Code Issues Packages Projects Releases Wiki Activity

Nested folders: Paginate child folder items (#70730)

Browse Source 
* make handleLoadMore aware of child folders

* combine PAGE_SIZE and ROOT_PAGE_SIZE
This commit is contained in:
Ashley Harrison 2023-06-27 11:38:33 +01:00 committed by GitHub
parent 2785ed80d9
commit 135ef088ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 34 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
public/app/features/browse-dashboards/api/browseDashboardsAPI.ts
View File

@ -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,
})
);
});

3
public/app/features/browse-dashboards/api/services.ts
View File

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

2
public/app/features/browse-dashboards/components/BrowseView.tsx
View File

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

7
public/app/features/browse-dashboards/components/DashboardsTree.tsx
View File

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

4
public/app/features/browse-dashboards/state/actions.ts
View File

@ -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 }));
}
}
);

30
public/app/features/browse-dashboards/state/hooks.ts
View File

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

1
public/app/features/browse-dashboards/types.ts
View File

@ -39,6 +39,7 @@ export interface DashboardsTreeItem<T extends DashboardViewItemWithUIItems = Das
item: T;
level: number;
isOpen: boolean;
parentUID?: string;
}
export const INDENT_AMOUNT_CSS_VAR = '--dashboards-tree-indentation';