chore: sync with page size config changes

SigNoz · Jan 29, 2025 · df29098 · df29098
1 parent 9865df5
commit df29098
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/frontend/src/container/InfraMonitoringHosts/HostsList.tsx b/frontend/src/container/InfraMonitoringHosts/HostsList.tsx
@@ -6,6 +6,7 @@ import logEvent from 'api/common/logEvent';
 import { HostListPayload } from 'api/infraMonitoring/getHostLists';
 import HostMetricDetail from 'components/HostMetricsDetail';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
+import { usePageSize } from 'container/InfraMonitoringK8s/utils';
 import { useGetHostList } from 'hooks/infraMonitoring/useGetHostList';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
@@ -39,7 +40,7 @@ function HostsList(): JSX.Element {
 
 	const [selectedHostName, setSelectedHostName] = useState<string | null>(null);
 
-	const pageSize = 10;
+	const { pageSize, setPageSize } = usePageSize('hosts');
 
 	const baseQuery = getHostListsQuery();
 	const query = useMemo(
@@ -52,7 +53,7 @@ function HostsList(): JSX.Element {
 			end: Math.floor(maxTime / 1000000),
 			orderBy,
 		}),
-		[baseQuery, currentPage, filters, minTime, maxTime, orderBy],
+		[baseQuery, pageSize, currentPage, filters, minTime, maxTime, orderBy],
 	);
 
 	const { data, isFetching, isLoading, isError } = useGetHostList(
@@ -151,6 +152,7 @@ function HostsList(): JSX.Element {
 						setCurrentPage={setCurrentPage}
 						setSelectedHostName={setSelectedHostName}
 						pageSize={pageSize}
+						setPageSize={setPageSize}
 						setOrderBy={setOrderBy}
 					/>
 				</div>

diff --git a/frontend/src/container/InfraMonitoringHosts/HostsListTable.tsx b/frontend/src/container/InfraMonitoringHosts/HostsListTable.tsx
@@ -31,6 +31,7 @@ export default function HostsListTable({
 	setCurrentPage,
 	pageSize,
 	setOrderBy,
+	setPageSize,
 }: HostsListTableProps): JSX.Element {
 	const columns = useMemo(() => getHostsListColumns(), []);
 
@@ -158,8 +159,12 @@ export default function HostsListTable({
 				current: currentPage,
 				pageSize,
 				total: totalCount,
-				showSizeChanger: false,
-				hideOnSinglePage: true,
+				showSizeChanger: true,
+				hideOnSinglePage: false,
+				onChange: (page, pageSize): void => {
+					setCurrentPage(page);
+					setPageSize(pageSize);
+				},
 			}}
 			scroll={{ x: true }}
 			loading={{

diff --git a/frontend/src/container/InfraMonitoringHosts/utils.tsx b/frontend/src/container/InfraMonitoringHosts/utils.tsx
@@ -51,6 +51,7 @@ export interface HostsListTableProps {
 			order: 'asc' | 'desc';
 		} | null>
 	>;
+	setPageSize: (pageSize: number) => void;
 }
 
 export const getHostListsQuery = (): HostListPayload => ({