From 47fb1169899e592204bb35c5899545e61db68a49 Mon Sep 17 00:00:00 2001 From: Alex Khomenko Date: Mon, 29 Jul 2024 12:21:04 +0300 Subject: [PATCH] Paginate migrated resources (#91055) * E2C: Add snapshot table pagination * Fix default page number * Update defaults * Reduce page size to 50, correctly calculate number of pages --------- Co-authored-by: joshhunt --- .../features/migrate-to-cloud/onprem/Page.tsx | 21 +++++++++++----- .../onprem/ResourcesTable.test.tsx | 24 +++++++++++-------- .../onprem/ResourcesTable.tsx | 14 +++++++---- 3 files changed, 39 insertions(+), 20 deletions(-) diff --git a/public/app/features/migrate-to-cloud/onprem/Page.tsx b/public/app/features/migrate-to-cloud/onprem/Page.tsx index 899dfeee8b7..af6396ca485 100644 --- a/public/app/features/migrate-to-cloud/onprem/Page.tsx +++ b/public/app/features/migrate-to-cloud/onprem/Page.tsx @@ -58,20 +58,23 @@ const SHOULD_POLL_STATUSES: Array = [ ]; const SNAPSHOT_REBUILD_STATUSES: Array = ['PENDING_PROCESSING', 'FINISHED', 'ERROR', 'UNKNOWN']; - const SNAPSHOT_BUILDING_STATUSES: Array = ['INITIALIZING', 'CREATING']; - const SNAPSHOT_UPLOADING_STATUSES: Array = ['UPLOADING', 'PENDING_PROCESSING', 'PROCESSING']; const STATUS_POLL_INTERVAL = 5 * 1000; -function useGetLatestSnapshot(sessionUid?: string) { +const PAGE_SIZE = 50; + +function useGetLatestSnapshot(sessionUid?: string, page = 1) { const [shouldPoll, setShouldPoll] = useState(false); const listResult = useGetShapshotListQuery(sessionUid ? { uid: sessionUid } : skipToken); const lastItem = listResult.data?.snapshots?.at(0); - const getSnapshotQueryArgs = sessionUid && lastItem?.uid ? { uid: sessionUid, snapshotUid: lastItem.uid } : skipToken; + const getSnapshotQueryArgs = + sessionUid && lastItem?.uid + ? { uid: sessionUid, snapshotUid: lastItem.uid, resultLimit: PAGE_SIZE, resultPage: page } + : skipToken; const snapshotResult = useGetSnapshotQuery(getSnapshotQueryArgs, { pollingInterval: shouldPoll ? STATUS_POLL_INTERVAL : 0, @@ -99,7 +102,8 @@ function useGetLatestSnapshot(sessionUid?: string) { export const Page = () => { const [disconnectModalOpen, setDisconnectModalOpen] = useState(false); const session = useGetLatestSession(); - const snapshot = useGetLatestSnapshot(session.data?.uid); + const [page, setPage] = useState(1); + const snapshot = useGetLatestSnapshot(session.data?.uid, page); const [performCreateSnapshot, createSnapshotResult] = useCreateSnapshotMutation(); const [performUploadSnapshot, uploadSnapshotResult] = useUploadSnapshotMutation(); const [performCancelSnapshot, cancelSnapshotResult] = useCancelSnapshotMutation(); @@ -228,7 +232,12 @@ export const Page = () => { )} {snapshot.data?.results && snapshot.data.results.length > 0 && ( - + )} diff --git a/public/app/features/migrate-to-cloud/onprem/ResourcesTable.test.tsx b/public/app/features/migrate-to-cloud/onprem/ResourcesTable.test.tsx index 0bd74ef63c5..9e7d5778c8f 100644 --- a/public/app/features/migrate-to-cloud/onprem/ResourcesTable.test.tsx +++ b/public/app/features/migrate-to-cloud/onprem/ResourcesTable.test.tsx @@ -8,12 +8,16 @@ import { wellFormedDashboardMigrationItem, wellFormedDatasourceMigrationItem } f import { registerMockAPI } from '../fixtures/mswAPI'; import { wellFormedDatasource } from '../fixtures/others'; -import { ResourcesTable } from './ResourcesTable'; +import { ResourcesTable, ResourcesTableProps } from './ResourcesTable'; setBackendSrv(backendSrv); -function render(...[ui, options]: Parameters) { - rtlRender({ui}, options); +function render(props: Partial) { + rtlRender( + + {}} numberOfPages={10} page={0} resources={props.resources || []} /> + + ); } describe('ResourcesTable', () => { @@ -46,7 +50,7 @@ describe('ResourcesTable', () => { }), ]; - render(); + render({ resources }); expect(screen.getByText('Datasource A')).toBeInTheDocument(); }); @@ -55,7 +59,7 @@ describe('ResourcesTable', () => { const item = wellFormedDatasourceMigrationItem(2); const resources = [item]; - render(); + render({ resources }); expect(screen.getByText(`Data source ${item.refId}`)).toBeInTheDocument(); expect(screen.getByText(`Unknown data source`)).toBeInTheDocument(); @@ -64,7 +68,7 @@ describe('ResourcesTable', () => { it('renders dashboards', async () => { const resources = [wellFormedDashboardMigrationItem(1)]; - render(); + render({ resources }); expect(await screen.findByText('My Dashboard')).toBeInTheDocument(); }); @@ -76,7 +80,7 @@ describe('ResourcesTable', () => { }), ]; - render(); + render({ resources }); expect(await screen.findByText('Unable to load dashboard')).toBeInTheDocument(); expect(await screen.findByText('Dashboard dashboard-404')).toBeInTheDocument(); @@ -90,7 +94,7 @@ describe('ResourcesTable', () => { }), ]; - render(); + render({ resources }); expect(screen.getByText('Uploaded to cloud')).toBeInTheDocument(); }); @@ -103,7 +107,7 @@ describe('ResourcesTable', () => { }), ]; - render(); + render({ resources }); expect(screen.getByText('Error')).toBeInTheDocument(); }); @@ -117,7 +121,7 @@ describe('ResourcesTable', () => { }), ]; - render(); + render({ resources }); expect( screen.getByRole('button', { diff --git a/public/app/features/migrate-to-cloud/onprem/ResourcesTable.tsx b/public/app/features/migrate-to-cloud/onprem/ResourcesTable.tsx index 47f9a3536eb..e2422d5f59b 100644 --- a/public/app/features/migrate-to-cloud/onprem/ResourcesTable.tsx +++ b/public/app/features/migrate-to-cloud/onprem/ResourcesTable.tsx @@ -1,6 +1,6 @@ import { useCallback, useMemo, useState } from 'react'; -import { InteractiveTable } from '@grafana/ui'; +import { InteractiveTable, Pagination, Stack } from '@grafana/ui'; import { MigrateDataResponseItemDto } from '../api'; @@ -10,8 +10,11 @@ import { StatusCell } from './StatusCell'; import { TypeCell } from './TypeCell'; import { ResourceTableItem } from './types'; -interface ResourcesTableProps { +export interface ResourcesTableProps { resources: MigrateDataResponseItemDto[]; + page: number; + numberOfPages: number; + onChangePage: (page: number) => void; } const columns = [ @@ -20,7 +23,7 @@ const columns = [ { id: 'status', header: 'Status', cell: StatusCell }, ]; -export function ResourcesTable({ resources }: ResourcesTableProps) { +export function ResourcesTable({ resources, numberOfPages = 0, onChangePage, page = 1 }: ResourcesTableProps) { const [erroredResource, setErroredResource] = useState(); const handleShowErrorModal = useCallback((resource: ResourceTableItem) => { @@ -33,7 +36,10 @@ export function ResourcesTable({ resources }: ResourcesTableProps) { return ( <> - r.refId} pageSize={15} /> + r.refId} /> + + + setErroredResource(undefined)} />