From 580198ca7a30b51a978da53594ae5166035baec0 Mon Sep 17 00:00:00 2001 From: ahmadshaheer1 Date: Sun, 23 Jun 2024 14:33:16 +0430 Subject: [PATCH 1/4] 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} />
From 46b4c8a004554f8bda4dc4fe50c3cfd77103a0b0 Mon Sep 17 00:00:00 2001 From: ahmadshaheer1 Date: Sun, 23 Jun 2024 14:43:51 +0430 Subject: [PATCH 2/4] chore: extract pagination config --- frontend/src/container/ListAlertRules/ListAlert.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/frontend/src/container/ListAlertRules/ListAlert.tsx b/frontend/src/container/ListAlertRules/ListAlert.tsx index 70039a5de9..e53a80dfdf 100644 --- a/frontend/src/container/ListAlertRules/ListAlert.tsx +++ b/frontend/src/container/ListAlertRules/ListAlert.tsx @@ -356,6 +356,10 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element { }); } + const paginationConfig = { + defaultCurrent: Number(paginationParam) || 1, + hideOnSinglePage: true, + }; return ( <> @@ -387,10 +391,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element { dataSource={data} dynamicColumns={dynamicColumns} onChange={handleChange} - pagination={{ - defaultCurrent: Number(paginationParam) || 1, - hideOnSinglePage: true, - }} + pagination={paginationConfig} facingIssueBtn={{ attributes: { screen: 'Alert list page', From f23ceea54e78a2782a36fccc36ea4915d9c74818 Mon Sep 17 00:00:00 2001 From: ahmadshaheer1 Date: Sun, 23 Jun 2024 15:12:56 +0430 Subject: [PATCH 3/4] chore: remove the unnecessary hideOnSinglePage prop --- frontend/src/components/ResizeTable/ResizeTable.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/components/ResizeTable/ResizeTable.tsx b/frontend/src/components/ResizeTable/ResizeTable.tsx index 0f3a53077a..d2bd98f568 100644 --- a/frontend/src/components/ResizeTable/ResizeTable.tsx +++ b/frontend/src/components/ResizeTable/ResizeTable.tsx @@ -64,7 +64,6 @@ function ResizeTable({ ...restProps, components: { header: { cell: ResizableHeader } }, columns: mergedColumns, - hideOnSinglePage: true, pagination: { ...pagination, hideOnSinglePage: true }, }), [mergedColumns, pagination, restProps], From 13df87ed69105f40efa8da70e567c718b60274f2 Mon Sep 17 00:00:00 2001 From: ahmadshaheer1 Date: Sun, 23 Jun 2024 15:14:24 +0430 Subject: [PATCH 4/4] chore: discard passing 'hideOnSinglePage' to diff --git a/frontend/src/container/ListAlertRules/ListAlert.tsx b/frontend/src/container/ListAlertRules/ListAlert.tsx index e53a80dfdf..2a0ccd3d79 100644 --- a/frontend/src/container/ListAlertRules/ListAlert.tsx +++ b/frontend/src/container/ListAlertRules/ListAlert.tsx @@ -358,7 +358,6 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element { const paginationConfig = { defaultCurrent: Number(paginationParam) || 1, - hideOnSinglePage: true, }; return ( <> diff --git a/frontend/src/container/ServiceApplication/ServiceMetrics/ServiceMetricTable.tsx b/frontend/src/container/ServiceApplication/ServiceMetrics/ServiceMetricTable.tsx index 919e88d07e..33a4dd729b 100644 --- a/frontend/src/container/ServiceApplication/ServiceMetrics/ServiceMetricTable.tsx +++ b/frontend/src/container/ServiceApplication/ServiceMetrics/ServiceMetricTable.tsx @@ -83,7 +83,6 @@ function ServiceMetricTable({ defaultPageSize: 10, showTotal: (total: number, range: number[]): string => `${range[0]}-${range[1]} of ${total} items`, - hideOnSinglePage: true, }; return ( <> diff --git a/frontend/src/container/ServiceApplication/ServiceTraces/ServiceTracesTable.tsx b/frontend/src/container/ServiceApplication/ServiceTraces/ServiceTracesTable.tsx index 2ca57f7125..8b03027a16 100644 --- a/frontend/src/container/ServiceApplication/ServiceTraces/ServiceTracesTable.tsx +++ b/frontend/src/container/ServiceApplication/ServiceTraces/ServiceTracesTable.tsx @@ -40,7 +40,6 @@ function ServiceTraceTable({ defaultPageSize: 10, showTotal: (total: number, range: number[]): string => `${range[0]}-${range[1]} of ${total} items`, - hideOnSinglePage: true, }; return ( <> diff --git a/frontend/src/container/Trace/TraceTable/index.tsx b/frontend/src/container/Trace/TraceTable/index.tsx index a9f61f73fc..fc76b2bd79 100644 --- a/frontend/src/container/Trace/TraceTable/index.tsx +++ b/frontend/src/container/Trace/TraceTable/index.tsx @@ -215,7 +215,6 @@ function TraceTable(): JSX.Element { responsive: true, position: ['bottomLeft'], total: totalCount, - hideOnSinglePage: true, }} /> );