Merge pull request #5316 from SigNoz/remove-pagination-for-single-page-lists-

feat: remove pagination for single-page lists

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<ColumnsType>([]);
@@ -63,8 +64,9 @@ function ResizeTable({
 			...restProps,
 			components: { header: { cell: ResizableHeader } },
 			columns: mergedColumns,
+			pagination: { ...pagination, hideOnSinglePage: true },
 		}),
-		[mergedColumns, restProps],
+		[mergedColumns, pagination, restProps],
 	);
 
 	useEffect(() => {

frontend/src/container/ListAlertRules/ListAlert.tsx

@@ -356,6 +356,9 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 		});
 	}
 
+	const paginationConfig = {
+		defaultCurrent: Number(paginationParam) || 1,
+	};
 	return (
 		<>
 			<SearchContainer>
@@ -387,9 +390,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 				dataSource={data}
 				dynamicColumns={dynamicColumns}
 				onChange={handleChange}
-				pagination={{
-					defaultCurrent: Number(paginationParam) || 1,
-				}}
+				pagination={paginationConfig}
 				facingIssueBtn={{
 					attributes: {
 						screen: 'Alert list page',

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 (
 		<div className="dashboards-list-container">
 			<div className="dashboards-list-view-content">
@@ -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}
 								/>
 							</>
 						)}

frontend/src/container/PipelinePage/Layouts/config.ts

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

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 (
 		<Table<DowntimeSchedulesTableData>
 			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}
 		/>
 	);
 }

frontend/src/container/ServiceApplication/ServiceMetrics/ServiceMetricTable.tsx

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

frontend/src/container/ServiceApplication/ServiceTraces/ServiceTracesTable.tsx

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

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 (
 		<div className="integration-data-collected">
 			<div className="logs-section">
@@ -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"
 				/>
 			</div>
@@ -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"
 				/>
 			</div>

frontend/src/pages/SaveView/index.tsx

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