feat: remove pagination for single-page lists

This commit is contained in:
ahmadshaheer1 2024-06-23 14:33:16 +04:30 committed by Yunus M
parent 2fb5b16840
commit 580198ca7a
11 changed files with 46 additions and 25 deletions

View File

@ -20,6 +20,7 @@ import { ResizeTableProps } from './types';
function ResizeTable({ function ResizeTable({
columns, columns,
onDragColumn, onDragColumn,
pagination,
...restProps ...restProps
}: ResizeTableProps): JSX.Element { }: ResizeTableProps): JSX.Element {
const [columnsData, setColumns] = useState<ColumnsType>([]); const [columnsData, setColumns] = useState<ColumnsType>([]);
@ -63,8 +64,10 @@ function ResizeTable({
...restProps, ...restProps,
components: { header: { cell: ResizableHeader } }, components: { header: { cell: ResizableHeader } },
columns: mergedColumns, columns: mergedColumns,
hideOnSinglePage: true,
pagination: { ...pagination, hideOnSinglePage: true },
}), }),
[mergedColumns, restProps], [mergedColumns, pagination, restProps],
); );
useEffect(() => { useEffect(() => {

View File

@ -423,6 +423,7 @@ function AllErrors(): JSX.Element {
current: getUpdatedOffset / 10 + 1, current: getUpdatedOffset / 10 + 1,
position: ['bottomLeft'], position: ['bottomLeft'],
total: errorCountResponse.data?.payload || 0, total: errorCountResponse.data?.payload || 0,
hideOnSinglePage: true,
}} }}
onChange={onChangeHandler} onChange={onChangeHandler}
/> />

View File

@ -389,6 +389,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
onChange={handleChange} onChange={handleChange}
pagination={{ pagination={{
defaultCurrent: Number(paginationParam) || 1, defaultCurrent: Number(paginationParam) || 1,
hideOnSinglePage: true,
}} }}
facingIssueBtn={{ facingIssueBtn={{
attributes: { attributes: {

View File

@ -609,6 +609,16 @@ function DashboardsList(): JSX.Element {
</> </>
); );
const paginationConfig = data.length > 20 && {
pageSize: 20,
showTotal: showPaginationItem,
showSizeChanger: false,
onChange: (page: any): void => handlePageSizeUpdate(page),
current: Number(sortOrder.pagination),
defaultCurrent: Number(sortOrder.pagination) || 1,
hideOnSinglePage: true,
};
return ( return (
<div className="dashboards-list-container"> <div className="dashboards-list-container">
<div className="dashboards-list-view-content"> <div className="dashboards-list-view-content">
@ -822,16 +832,7 @@ function DashboardsList(): JSX.Element {
showSorterTooltip showSorterTooltip
loading={isDashboardListLoading || isFilteringDashboards} loading={isDashboardListLoading || isFilteringDashboards}
showHeader={false} showHeader={false}
pagination={ pagination={paginationConfig}
data.length > 20 && {
pageSize: 20,
showTotal: showPaginationItem,
showSizeChanger: false,
onChange: (page): void => handlePageSizeUpdate(page),
current: Number(sortOrder.pagination),
defaultCurrent: Number(sortOrder.pagination) || 1,
}
}
/> />
</> </>
)} )}

View File

@ -1,3 +1,4 @@
export const historyPagination = { export const historyPagination = {
defaultPageSize: 5, defaultPageSize: 5,
hideOnSinglePage: true,
}; };

View File

@ -334,6 +334,11 @@ export function PlannedDowntimeList({
} }
}, [downtimeSchedules.error, downtimeSchedules.isError, notifications]); }, [downtimeSchedules.error, downtimeSchedules.isError, notifications]);
const paginationConfig = {
pageSize: 5,
showSizeChanger: false,
hideOnSinglePage: true,
};
return ( return (
<Table<DowntimeSchedulesTableData> <Table<DowntimeSchedulesTableData>
columns={columns} columns={columns}
@ -342,7 +347,7 @@ export function PlannedDowntimeList({
dataSource={tableData || []} dataSource={tableData || []}
loading={downtimeSchedules.isLoading || downtimeSchedules.isFetching} loading={downtimeSchedules.isLoading || downtimeSchedules.isFetching}
showHeader={false} showHeader={false}
pagination={{ pageSize: 5, showSizeChanger: false }} pagination={paginationConfig}
/> />
); );
} }

View File

@ -79,6 +79,12 @@ function ServiceMetricTable({
} }
}, [services, licenseData, isFetching, isCloudUserVal]); }, [services, licenseData, isFetching, isCloudUserVal]);
const paginationConfig = {
defaultPageSize: 10,
showTotal: (total: number, range: number[]): string =>
`${range[0]}-${range[1]} of ${total} items`,
hideOnSinglePage: true,
};
return ( return (
<> <>
{RPS > MAX_RPS_LIMIT && ( {RPS > MAX_RPS_LIMIT && (
@ -92,11 +98,7 @@ function ServiceMetricTable({
<ResourceAttributesFilter /> <ResourceAttributesFilter />
<ResizeTable <ResizeTable
pagination={{ pagination={paginationConfig}
defaultPageSize: 10,
showTotal: (total: number, range: number[]): string =>
`${range[0]}-${range[1]} of ${total} items`,
}}
columns={tableColumns} columns={tableColumns}
loading={isLoading} loading={isLoading}
dataSource={services} dataSource={services}

View File

@ -36,6 +36,12 @@ function ServiceTraceTable({
} }
}, [services, licenseData, isFetching, isCloudUserVal]); }, [services, licenseData, isFetching, isCloudUserVal]);
const paginationConfig = {
defaultPageSize: 10,
showTotal: (total: number, range: number[]): string =>
`${range[0]}-${range[1]} of ${total} items`,
hideOnSinglePage: true,
};
return ( return (
<> <>
{RPS > MAX_RPS_LIMIT && ( {RPS > MAX_RPS_LIMIT && (
@ -49,11 +55,7 @@ function ServiceTraceTable({
<ResourceAttributesFilter /> <ResourceAttributesFilter />
<ResizeTable <ResizeTable
pagination={{ pagination={paginationConfig}
defaultPageSize: 10,
showTotal: (total: number, range: number[]): string =>
`${range[0]}-${range[1]} of ${total} items`,
}}
columns={tableColumns} columns={tableColumns}
loading={loading} loading={loading}
dataSource={services} dataSource={services}

View File

@ -215,6 +215,7 @@ function TraceTable(): JSX.Element {
responsive: true, responsive: true,
position: ['bottomLeft'], position: ['bottomLeft'],
total: totalCount, total: totalCount,
hideOnSinglePage: true,
}} }}
/> />
); );

View File

@ -46,6 +46,8 @@ function DataCollected(props: DataCollectedProps): JSX.Element {
}, },
]; ];
const paginationConfig = { pageSize: 20, hideOnSinglePage: true };
return ( return (
<div className="integration-data-collected"> <div className="integration-data-collected">
<div className="logs-section"> <div className="logs-section">
@ -59,7 +61,7 @@ function DataCollected(props: DataCollectedProps): JSX.Element {
index % 2 === 0 ? 'table-row-dark' : '' index % 2 === 0 ? 'table-row-dark' : ''
} }
dataSource={logsData} dataSource={logsData}
pagination={{ pageSize: 20 }} pagination={paginationConfig}
className="logs-section-table" className="logs-section-table"
/> />
</div> </div>
@ -74,7 +76,7 @@ function DataCollected(props: DataCollectedProps): JSX.Element {
index % 2 === 0 ? 'table-row-dark' : '' index % 2 === 0 ? 'table-row-dark' : ''
} }
dataSource={metricsData} dataSource={metricsData}
pagination={{ pageSize: 20 }} pagination={paginationConfig}
className="metrics-section-table" className="metrics-section-table"
/> />
</div> </div>

View File

@ -277,6 +277,8 @@ function SaveView(): JSX.Element {
}, },
]; ];
const paginationConfig = { pageSize: 5, hideOnSinglePage: true };
return ( return (
<div className="save-view-container"> <div className="save-view-container">
<div className="save-view-content"> <div className="save-view-content">
@ -303,7 +305,7 @@ function SaveView(): JSX.Element {
dataSource={dataSource} dataSource={dataSource}
loading={isLoading || isRefetching} loading={isLoading || isRefetching}
showHeader={false} showHeader={false}
pagination={{ pageSize: 5 }} pagination={paginationConfig}
/> />
</div> </div>