From 580198ca7a30b51a978da53594ae5166035baec0 Mon Sep 17 00:00:00 2001 From: ahmadshaheer1 Date: Sun, 23 Jun 2024 14:33:16 +0430 Subject: [PATCH] feat: remove pagination for single-page lists --- .../components/ResizeTable/ResizeTable.tsx | 5 ++++- frontend/src/container/AllError/index.tsx | 1 + .../container/ListAlertRules/ListAlert.tsx | 1 + .../ListOfDashboard/DashboardsList.tsx | 21 ++++++++++--------- .../container/PipelinePage/Layouts/config.ts | 1 + .../PlannedDowntime/PlannedDowntimeList.tsx | 7 ++++++- .../ServiceMetrics/ServiceMetricTable.tsx | 12 ++++++----- .../ServiceTraces/ServiceTracesTable.tsx | 12 ++++++----- .../src/container/Trace/TraceTable/index.tsx | 1 + .../DataCollected.tsx | 6 ++++-- frontend/src/pages/SaveView/index.tsx | 4 +++- 11 files changed, 46 insertions(+), 25 deletions(-) diff --git a/frontend/src/components/ResizeTable/ResizeTable.tsx b/frontend/src/components/ResizeTable/ResizeTable.tsx index 90cc588c47..0f3a53077a 100644 --- a/frontend/src/components/ResizeTable/ResizeTable.tsx +++ b/frontend/src/components/ResizeTable/ResizeTable.tsx @@ -20,6 +20,7 @@ import { ResizeTableProps } from './types'; function ResizeTable({ columns, onDragColumn, + pagination, ...restProps }: ResizeTableProps): JSX.Element { const [columnsData, setColumns] = useState([]); @@ -63,8 +64,10 @@ function ResizeTable({ ...restProps, components: { header: { cell: ResizableHeader } }, columns: mergedColumns, + hideOnSinglePage: true, + pagination: { ...pagination, hideOnSinglePage: true }, }), - [mergedColumns, restProps], + [mergedColumns, pagination, restProps], ); useEffect(() => { diff --git a/frontend/src/container/AllError/index.tsx b/frontend/src/container/AllError/index.tsx index e8c13d88cd..a112301bf0 100644 --- a/frontend/src/container/AllError/index.tsx +++ b/frontend/src/container/AllError/index.tsx @@ -423,6 +423,7 @@ function AllErrors(): JSX.Element { current: getUpdatedOffset / 10 + 1, position: ['bottomLeft'], total: errorCountResponse.data?.payload || 0, + hideOnSinglePage: true, }} onChange={onChangeHandler} /> diff --git a/frontend/src/container/ListAlertRules/ListAlert.tsx b/frontend/src/container/ListAlertRules/ListAlert.tsx index 91e0786e05..70039a5de9 100644 --- a/frontend/src/container/ListAlertRules/ListAlert.tsx +++ b/frontend/src/container/ListAlertRules/ListAlert.tsx @@ -389,6 +389,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element { onChange={handleChange} pagination={{ defaultCurrent: Number(paginationParam) || 1, + hideOnSinglePage: true, }} facingIssueBtn={{ attributes: { diff --git a/frontend/src/container/ListOfDashboard/DashboardsList.tsx b/frontend/src/container/ListOfDashboard/DashboardsList.tsx index 1c8e96b6f7..39326a558a 100644 --- a/frontend/src/container/ListOfDashboard/DashboardsList.tsx +++ b/frontend/src/container/ListOfDashboard/DashboardsList.tsx @@ -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 (
@@ -822,16 +832,7 @@ function DashboardsList(): JSX.Element { showSorterTooltip loading={isDashboardListLoading || isFilteringDashboards} showHeader={false} - pagination={ - data.length > 20 && { - pageSize: 20, - showTotal: showPaginationItem, - showSizeChanger: false, - onChange: (page): void => handlePageSizeUpdate(page), - current: Number(sortOrder.pagination), - defaultCurrent: Number(sortOrder.pagination) || 1, - } - } + pagination={paginationConfig} /> )} diff --git a/frontend/src/container/PipelinePage/Layouts/config.ts b/frontend/src/container/PipelinePage/Layouts/config.ts index 46d2d2738e..6984fd7b57 100644 --- a/frontend/src/container/PipelinePage/Layouts/config.ts +++ b/frontend/src/container/PipelinePage/Layouts/config.ts @@ -1,3 +1,4 @@ export const historyPagination = { defaultPageSize: 5, + hideOnSinglePage: true, }; diff --git a/frontend/src/container/PlannedDowntime/PlannedDowntimeList.tsx b/frontend/src/container/PlannedDowntime/PlannedDowntimeList.tsx index 40c468bfb2..b8c1ec405a 100644 --- a/frontend/src/container/PlannedDowntime/PlannedDowntimeList.tsx +++ b/frontend/src/container/PlannedDowntime/PlannedDowntimeList.tsx @@ -334,6 +334,11 @@ export function PlannedDowntimeList({ } }, [downtimeSchedules.error, downtimeSchedules.isError, notifications]); + const paginationConfig = { + pageSize: 5, + showSizeChanger: false, + hideOnSinglePage: true, + }; return ( columns={columns} @@ -342,7 +347,7 @@ export function PlannedDowntimeList({ dataSource={tableData || []} loading={downtimeSchedules.isLoading || downtimeSchedules.isFetching} showHeader={false} - pagination={{ pageSize: 5, showSizeChanger: false }} + pagination={paginationConfig} /> ); } diff --git a/frontend/src/container/ServiceApplication/ServiceMetrics/ServiceMetricTable.tsx b/frontend/src/container/ServiceApplication/ServiceMetrics/ServiceMetricTable.tsx index f592f6a540..919e88d07e 100644 --- a/frontend/src/container/ServiceApplication/ServiceMetrics/ServiceMetricTable.tsx +++ b/frontend/src/container/ServiceApplication/ServiceMetrics/ServiceMetricTable.tsx @@ -79,6 +79,12 @@ function ServiceMetricTable({ } }, [services, licenseData, isFetching, isCloudUserVal]); + const paginationConfig = { + defaultPageSize: 10, + showTotal: (total: number, range: number[]): string => + `${range[0]}-${range[1]} of ${total} items`, + hideOnSinglePage: true, + }; return ( <> {RPS > MAX_RPS_LIMIT && ( @@ -92,11 +98,7 @@ function ServiceMetricTable({ - `${range[0]}-${range[1]} of ${total} items`, - }} + pagination={paginationConfig} columns={tableColumns} loading={isLoading} dataSource={services} diff --git a/frontend/src/container/ServiceApplication/ServiceTraces/ServiceTracesTable.tsx b/frontend/src/container/ServiceApplication/ServiceTraces/ServiceTracesTable.tsx index 717060d901..2ca57f7125 100644 --- a/frontend/src/container/ServiceApplication/ServiceTraces/ServiceTracesTable.tsx +++ b/frontend/src/container/ServiceApplication/ServiceTraces/ServiceTracesTable.tsx @@ -36,6 +36,12 @@ function ServiceTraceTable({ } }, [services, licenseData, isFetching, isCloudUserVal]); + const paginationConfig = { + defaultPageSize: 10, + showTotal: (total: number, range: number[]): string => + `${range[0]}-${range[1]} of ${total} items`, + hideOnSinglePage: true, + }; return ( <> {RPS > MAX_RPS_LIMIT && ( @@ -49,11 +55,7 @@ function ServiceTraceTable({ - `${range[0]}-${range[1]} of ${total} items`, - }} + pagination={paginationConfig} columns={tableColumns} loading={loading} dataSource={services} diff --git a/frontend/src/container/Trace/TraceTable/index.tsx b/frontend/src/container/Trace/TraceTable/index.tsx index fc76b2bd79..a9f61f73fc 100644 --- a/frontend/src/container/Trace/TraceTable/index.tsx +++ b/frontend/src/container/Trace/TraceTable/index.tsx @@ -215,6 +215,7 @@ function TraceTable(): JSX.Element { responsive: true, position: ['bottomLeft'], total: totalCount, + hideOnSinglePage: true, }} /> ); diff --git a/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContentTabs/DataCollected.tsx b/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContentTabs/DataCollected.tsx index 1c605ec863..768a4a7941 100644 --- a/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContentTabs/DataCollected.tsx +++ b/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContentTabs/DataCollected.tsx @@ -46,6 +46,8 @@ function DataCollected(props: DataCollectedProps): JSX.Element { }, ]; + const paginationConfig = { pageSize: 20, hideOnSinglePage: true }; + return (
@@ -59,7 +61,7 @@ function DataCollected(props: DataCollectedProps): JSX.Element { index % 2 === 0 ? 'table-row-dark' : '' } dataSource={logsData} - pagination={{ pageSize: 20 }} + pagination={paginationConfig} className="logs-section-table" />
@@ -74,7 +76,7 @@ function DataCollected(props: DataCollectedProps): JSX.Element { index % 2 === 0 ? 'table-row-dark' : '' } dataSource={metricsData} - pagination={{ pageSize: 20 }} + pagination={paginationConfig} className="metrics-section-table" />
diff --git a/frontend/src/pages/SaveView/index.tsx b/frontend/src/pages/SaveView/index.tsx index 86a511291e..02a2578f0a 100644 --- a/frontend/src/pages/SaveView/index.tsx +++ b/frontend/src/pages/SaveView/index.tsx @@ -277,6 +277,8 @@ function SaveView(): JSX.Element { }, ]; + const paginationConfig = { pageSize: 5, hideOnSinglePage: true }; + return (
@@ -303,7 +305,7 @@ function SaveView(): JSX.Element { dataSource={dataSource} loading={isLoading || isRefetching} showHeader={false} - pagination={{ pageSize: 5 }} + pagination={paginationConfig} />