From a5d58008713c23431fba26200a68ce7d9fc49e1e Mon Sep 17 00:00:00 2001
From: Yunus M <myounis.ar@live.com>
Date: Fri, 2 Aug 2024 21:51:09 +0530
Subject: [PATCH] feat: enable pagination for service listing,key
 operations,explorer table and dashboard table (#5625)

---
 .../container/MetricsApplication/TopOperationsTable.tsx    | 7 +++++++
 frontend/src/container/QueryTable/QueryTable.tsx           | 7 +++++++
 2 files changed, 14 insertions(+)

diff --git a/frontend/src/container/MetricsApplication/TopOperationsTable.tsx b/frontend/src/container/MetricsApplication/TopOperationsTable.tsx
index bd518d629d..d897c8a205 100644
--- a/frontend/src/container/MetricsApplication/TopOperationsTable.tsx
+++ b/frontend/src/container/MetricsApplication/TopOperationsTable.tsx
@@ -164,6 +164,12 @@ function TopOperationsTable({
 
 	const downloadableData = convertedTracesToDownloadData(data);
 
+	const paginationConfig = {
+		pageSize: 10,
+		showSizeChanger: false,
+		hideOnSinglePage: true,
+	};
+
 	return (
 		<div className="top-operation">
 			<div className="top-operation--download">
@@ -181,6 +187,7 @@ function TopOperationsTable({
 				tableLayout="fixed"
 				dataSource={data}
 				rowKey="name"
+				pagination={paginationConfig}
 			/>
 		</div>
 	);
diff --git a/frontend/src/container/QueryTable/QueryTable.tsx b/frontend/src/container/QueryTable/QueryTable.tsx
index 2fa1d05f65..ccf8221bfe 100644
--- a/frontend/src/container/QueryTable/QueryTable.tsx
+++ b/frontend/src/container/QueryTable/QueryTable.tsx
@@ -48,6 +48,12 @@ export function QueryTable({
 
 	const tableColumns = modifyColumns ? modifyColumns(newColumns) : newColumns;
 
+	const paginationConfig = {
+		pageSize: 10,
+		showSizeChanger: false,
+		hideOnSinglePage: true,
+	};
+
 	return (
 		<div className="query-table">
 			{isDownloadEnabled && (
@@ -64,6 +70,7 @@ export function QueryTable({
 				tableLayout="fixed"
 				dataSource={newDataSource}
 				scroll={{ x: true }}
+				pagination={paginationConfig}
 				// eslint-disable-next-line react/jsx-props-no-spreading
 				{...props}
 			/>