github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

fix(ui/datatables): sync page count with filtering [EE-5890] (#10009)

pull/10108/head
Chaim Lev-Ari 2023-08-22 09:36:27 +03:00 committed by GitHub
parent f24555c6c9
commit 69f3670ce5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 78 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/react/components/PaginationControls/PageSelector.tsx
View File

@ -8,29 +8,22 @@ interface Props {
boundaryLinks?: boolean;
currentPage: number;
directionLinks?: boolean;
itemsPerPage: number;
onPageChange(page: number): void;
totalCount: number;
pageCount: number;
maxSize: number;
isInputVisible?: boolean;
}
export function PageSelector({
currentPage,
totalCount,
itemsPerPage,
pageCount,
onPageChange,
maxSize = 5,
directionLinks = true,
boundaryLinks = false,
isInputVisible = false,
}: Props) {
const pages = generatePagesArray(
currentPage,
totalCount,
itemsPerPage,
maxSize
);
const pages = generatePagesArray(currentPage, pageCount, maxSize);
const last = pages[pages.length - 1];
if (pages.length <= 1) {
@ -42,7 +35,7 @@ export function PageSelector({
{isInputVisible && (
<PageInput
onChange={(page) => onPageChange(page)}
totalPages={Math.ceil(totalCount / itemsPerPage)}
totalPages={pageCount}
/>
)}
<ul className="pagination">

7
app/react/components/PaginationControls/PaginationControls.tsx
View File

@ -9,7 +9,7 @@ interface Props {
page: number;
pageLimit: number;
showAll?: boolean;
totalCount: number;
pageCount: number;
isPageInputVisible?: boolean;
className?: string;
}
@ -20,7 +20,7 @@ export function PaginationControls({
onPageLimitChange,
showAll,
onPageChange,
totalCount,
pageCount,
isPageInputVisible,
className,
}: Props) {
@ -38,8 +38,7 @@ export function PaginationControls({
maxSize={5}
onPageChange={onPageChange}
currentPage={page}
itemsPerPage={pageLimit}
totalCount={totalCount}
pageCount={pageCount}
isInputVisible={isPageInputVisible}
/>
)}

4
app/react/components/PaginationControls/generatePagesArray.ts
View File

@ -12,12 +12,10 @@ export /**
*/
function generatePagesArray(
currentPage: number,
collectionLength: number,
rowsPerPage: number,
totalPages: number,
paginationRange: number
): (number | '...')[] {
const pages: (number | '...')[] = [];
const totalPages = Math.ceil(collectionLength / rowsPerPage);
const halfWay = Math.ceil(paginationRange / 2);
let position;

45
app/react/components/datatables/Datatable.tsx
View File

@ -34,6 +34,20 @@ import { createSelectColumn } from './select-column';
import { TableRow } from './TableRow';
import { type TableState as GlobalTableState } from './useTableState';
export type PaginationProps =
| {
isServerSidePagination?: false;
totalCount?: never;
page?: never;
onPageChange?: never;
}
| {
isServerSidePagination: true;
totalCount: number;
page: number;
onPageChange(page: number): void;
};
export interface Props<
D extends Record<string, unknown>,
TMeta extends TableMeta<D> = TableMeta<D>
@ -50,13 +64,8 @@ export interface Props<
titleIcon?: IconProps['icon'];
initialTableState?: Partial<TableState>;
isLoading?: boolean;
totalCount?: number;
description?: ReactNode;
pageCount?: number;
highlightedItemId?: string;
page?: number;
onPageChange?(page: number): void;
settingsManager: GlobalTableState<BasicTableSettings>;
renderRow?(row: Row<D>, highlightedItemId?: string): ReactNode;
getRowCanExpand?(row: Row<D>): boolean;
@ -80,11 +89,7 @@ export function Datatable<
emptyContentLabel,
initialTableState = {},
isLoading,
totalCount = dataset.length,
description,
pageCount,
page,
onPageChange = () => null,
settingsManager: settings,
renderRow = defaultRenderRow,
highlightedItemId,
@ -92,8 +97,16 @@ export function Datatable<
getRowCanExpand,
'data-cy': dataCy,
meta,
}: Props<D, TMeta>) {
const isServerSidePagination = typeof pageCount !== 'undefined';
onPageChange = () => {},
page,
totalCount = dataset.length,
isServerSidePagination = false,
}: Props<D, TMeta> & PaginationProps) {
const pageCount = useMemo(
() => Math.ceil(totalCount / settings.pageSize),
[settings.pageSize, totalCount]
);
const enableRowSelection = getIsSelectionEnabled(
disableSelect,
isRowSelectable
@ -120,6 +133,7 @@ export function Datatable<
defaultColumn: {
enableColumnFilter: false,
enableHiding: true,
sortingFn: 'alphanumeric',
},
enableRowSelection,
autoResetExpanded: false,
@ -127,7 +141,6 @@ export function Datatable<
getRowId,
getCoreRowModel: getCoreRowModel(),
getFilteredRowModel: getFilteredRowModel(),
getSortedRowModel: getSortedRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getFacetedRowModel: getFacetedRowModel(),
getFacetedUniqueValues: getFacetedUniqueValues(),
@ -135,7 +148,11 @@ export function Datatable<
getExpandedRowModel: getExpandedRowModel(),
getRowCanExpand,
getColumnCanGlobalFilter,
...(isServerSidePagination ? { manualPagination: true, pageCount } : {}),
...(isServerSidePagination
? { manualPagination: true, pageCount }
: {
getSortedRowModel: getSortedRowModel(),
}),
meta,
});
@ -178,7 +195,7 @@ export function Datatable<
onPageSizeChange={handlePageSizeChange}
page={typeof page === 'number' ? page : tableState.pagination.pageIndex}
pageSize={tableState.pagination.pageSize}
totalCount={totalCount}
pageCount={tableInstance.getPageCount()}
totalSelected={selectedItems.length}
/>
</Table.Container>

6
app/react/components/datatables/DatatableFooter.tsx
View File

@ -8,7 +8,7 @@ interface Props {
pageSize: number;
page: number;
onPageChange(page: number): void;
totalCount: number;
pageCount: number;
onPageSizeChange(pageSize: number): void;
}
@ -17,7 +17,7 @@ export function DatatableFooter({
pageSize,
page,
onPageChange,
totalCount,
pageCount,
onPageSizeChange,
}: Props) {
return (
@ -28,7 +28,7 @@ export function DatatableFooter({
pageLimit={pageSize}
page={page + 1}
onPageChange={(page) => onPageChange(page - 1)}
totalCount={totalCount}
pageCount={pageCount}
onPageLimitChange={onPageSizeChange}
/>
</Table.Footer>

8
app/react/components/datatables/ExpandableDatatable.tsx
View File

@ -2,7 +2,11 @@ import { Row } from '@tanstack/react-table';
import { ReactNode } from 'react';
import { ExpandableDatatableTableRow } from './ExpandableDatatableRow';
import { Datatable, Props as DatatableProps } from './Datatable';
import {
Datatable,
Props as DatatableProps,
PaginationProps,
} from './Datatable';
interface Props<D extends Record<string, unknown>>
extends Omit<DatatableProps<D>, 'renderRow' | 'expandable'> {
@ -15,7 +19,7 @@ export function ExpandableDatatable<D extends Record<string, unknown>>({
getRowCanExpand = () => true,
expandOnRowClick,
...props
}: Props<D>) {
}: Props<D> & PaginationProps) {
return (
<Datatable<D>
// eslint-disable-next-line react/jsx-props-no-spreading

1
app/react/components/datatables/NameCell.tsx
View File

@ -17,7 +17,6 @@ export function buildNameColumn<T extends Record<string, unknown>>(
cell,
enableSorting: true,
enableHiding: false,
sortingFn: 'text',
};
function createCell<T extends Record<string, unknown>>() {

9
app/react/edge/components/EdgeGroupAssociationTable.tsx
View File

@ -51,10 +51,10 @@ export function EdgeGroupAssociationTable({
onClickRow: (env: Environment) => void;
} & AutomationTestingProps) {
const tableState = useTableStateWithoutStorage('Name');
const [page, setPage] = useState(1);
const [page, setPage] = useState(0);
const environmentsQuery = useEnvironmentList({
pageLimit: tableState.pageSize,
page,
page: page + 1,
search: tableState.search,
sort: tableState.sortBy.id as 'Group' | 'Name',
order: tableState.sortBy.desc ? 'desc' : 'asc',
@ -87,8 +87,10 @@ export function EdgeGroupAssociationTable({
columns={columns}
settingsManager={tableState}
dataset={environments}
isServerSidePagination
page={page}
onPageChange={setPage}
pageCount={Math.ceil(totalCount / tableState.pageSize)}
totalCount={totalCount}
renderRow={(row) => (
<TableRow<DecoratedEnvironment>
cells={row.getVisibleCells()}
@ -98,7 +100,6 @@ export function EdgeGroupAssociationTable({
emptyContentLabel={emptyContentLabel}
data-cy={dataCy}
disableSelect
totalCount={totalCount}
/>
);
}

6
app/react/edge/edge-devices/WaitingRoomView/Datatable/Datatable.tsx
View File

@ -24,8 +24,6 @@ export function Datatable() {
search: tableState.search,
});
const pageCount = Math.ceil(totalCount / tableState.pageSize);
return (
<GenericDatatable
settingsManager={tableState}
@ -37,10 +35,10 @@ export function Datatable() {
<TableActions selectedRows={selectedRows} />
)}
isLoading={isLoading}
totalCount={totalCount}
pageCount={pageCount}
isServerSidePagination
page={page}
onPageChange={setPage}
totalCount={totalCount}
description={<Filter />}
/>
);

12
app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentsDatatable.tsx
View File

@ -40,7 +40,7 @@ export function EnvironmentsDatatable() {
(value) => (value ? parseInt(value, 10) : undefined)
);
const tableState = useTableStateWithoutStorage('name');
const endpointsQuery = useEnvironmentList({
const environmentsQuery = useEnvironmentList({
pageLimit: tableState.pageSize,
page: page + 1,
search: tableState.search,
@ -56,7 +56,7 @@ export function EnvironmentsDatatable() {
const gitConfigCommitHash = edgeStackQuery.data?.GitConfig?.ConfigHash || '';
const environments: Array<EdgeStackEnvironment> = useMemo(
() =>
endpointsQuery.environments.map(
environmentsQuery.environments.map(
(env) =>
({
...env,
@ -72,7 +72,7 @@ export function EnvironmentsDatatable() {
[
currentFileVersion,
edgeStackQuery.data?.Status,
endpointsQuery.environments,
environmentsQuery.environments,
gitConfigCommitHash,
gitConfigURL,
]
@ -81,13 +81,15 @@ export function EnvironmentsDatatable() {
return (
<Datatable
columns={columns}
isLoading={endpointsQuery.isLoading}
isLoading={environmentsQuery.isLoading}
dataset={environments}
settingsManager={tableState}
title="Environments Status"
titleIcon={HardDrive}
isServerSidePagination
page={page}
onPageChange={setPage}
totalCount={endpointsQuery.totalCount}
totalCount={environmentsQuery.totalCount}
emptyContentLabel="No environment available."
disableSelect
description={

1
app/react/nomad/jobs/EventsView/EventsDatatable/EventsDatatable.tsx
View File

@ -28,7 +28,6 @@ export function EventsDatatable({ data, isLoading }: EventsDatatableProps) {
dataset={data}
titleIcon={History}
title="Events"
totalCount={data.length}
getRowId={(row) => `${row.Date}-${row.Message}-${row.Type}`}
disableSelect
/>

2
app/react/portainer/HomeView/EnvironmentList/AMTButton/AssociateAMTDialog.tsx
View File

@ -83,7 +83,7 @@ export function AssociateAMTDialog({
onPageChange={setPage}
pageLimit={pageLimit}
onPageLimitChange={setPageLimit}
totalCount={totalCount}
pageCount={Math.ceil(totalCount / pageLimit)}
/>
</div>
</div>

2
app/react/portainer/HomeView/EnvironmentList/EnvironmentList.tsx
View File

@ -239,7 +239,7 @@ export function EnvironmentList({ onClickBrowse, onRefresh }: Props) {
pageLimit={pageLimit}
page={page}
onPageChange={setPage}
totalCount={totalCount}
pageCount={Math.ceil(totalCount / pageLimit)}
onPageLimitChange={setPageLimit}
/>
</TableFooter>

2
app/react/portainer/HomeView/EnvironmentList/KubeconfigButton/KubeconfigPrompt.tsx
View File

@ -111,7 +111,7 @@ export function KubeconfigPrompt({
onPageChange={setPage}
pageLimit={pageLimit}
onPageLimitChange={setPageLimit}
totalCount={totalCount}
pageCount={Math.ceil(totalCount / pageLimit)}
/>
</div>
</div>

9
app/react/portainer/environments/ListView/EnvironmentsDatatable.tsx
View File

@ -12,6 +12,7 @@ import { useTableState } from '@@/datatables/useTableState';
import { isBE } from '../../feature-flags/feature-flags.service';
import { isSortType } from '../queries/useEnvironmentList';
import { EnvironmentStatus } from '../types';
import { columns } from './columns';
import { EnvironmentListItem } from './types';
@ -60,10 +61,14 @@ export function EnvironmentsDatatable({
dataset={environmentsWithGroups}
columns={columns}
settingsManager={tableState}
pageCount={Math.ceil(totalCount / tableState.pageSize)}
isServerSidePagination
page={page}
onPageChange={setPage}
isLoading={isLoading}
totalCount={totalCount}
isLoading={isLoading}
isRowSelectable={(row) =>
row.original.Status !== EnvironmentStatus.Provisioning
}
renderTableActions={(selectedRows) => (
<div className="flex items-center gap-2">
<Button

1
app/react/portainer/environments/environment-groups/components/AssociatedEnvironmentsSelector.tsx
View File

@ -28,6 +28,7 @@ export function AssociatedEnvironmentsSelector({
emptyContentLabel="No environment available"
query={{
groupIds: [1],
excludeIds: value,
}}
onClickRow={(env) => {
if (!value.includes(env.Id)) {

9
app/react/portainer/environments/environment-groups/components/GroupAssociationTable.tsx
View File

@ -33,10 +33,10 @@ export function GroupAssociationTable({
onClickRow?: (env: Environment) => void;
} & AutomationTestingProps) {
const tableState = useTableStateWithoutStorage('Name');
const [page, setPage] = useState(1);
const [page, setPage] = useState(0);
const environmentsQuery = useEnvironmentList({
pageLimit: tableState.pageSize,
page,
page: page + 1,
search: tableState.search,
sort: tableState.sortBy.id as 'Name',
order: tableState.sortBy.desc ? 'desc' : 'asc',
@ -51,8 +51,10 @@ export function GroupAssociationTable({
columns={columns}
settingsManager={tableState}
dataset={environments}
isServerSidePagination
page={page}
onPageChange={setPage}
pageCount={Math.ceil(environmentsQuery.totalCount / tableState.pageSize)}
totalCount={environmentsQuery.totalCount}
renderRow={(row) => (
<TableRow<Environment>
cells={row.getVisibleCells()}
@ -62,7 +64,6 @@ export function GroupAssociationTable({
emptyContentLabel={emptyContentLabel}
data-cy={dataCy}
disableSelect
totalCount={environmentsQuery.totalCount}
/>
);
}

1
app/react/portainer/environments/update-schedules/ListView/ListView.tsx
View File

@ -53,7 +53,6 @@ export function ListView() {
titleIcon={Clock}
emptyContentLabel="No schedules found"
isLoading={listQuery.isLoading}
totalCount={listQuery.data.length}
renderTableActions={(selectedRows) => (
<TableActions selectedRows={selectedRows} />
)}

1
app/react/portainer/notifications/NotificationsView.tsx
View File

@ -48,7 +48,6 @@ export function NotificationsView() {
dataset={userNotifications}
settingsManager={tableState}
emptyContentLabel="No notifications found"
totalCount={userNotifications.length}
renderTableActions={(selectedRows) => (
<TableActions selectedRows={selectedRows} />
)}