feat: implement page size configuration in infra monitoring (#6950)

frontend/src/container/InfraMonitoringHosts/HostsList.tsx

@@ -13,6 +13,7 @@ import { SorterResult } from 'antd/es/table/interface';
 import logEvent from 'api/common/logEvent';
 import { HostListPayload } from 'api/infraMonitoring/getHostLists';
 import HostMetricDetail from 'components/HostMetricsDetail';
+import { usePageSize } from 'container/InfraMonitoringK8s/utils';
 import { useGetHostList } from 'hooks/infraMonitoring/useGetHostList';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
@@ -48,7 +49,7 @@ function HostsList(): JSX.Element {
 
 	const [selectedHostName, setSelectedHostName] = useState<string | null>(null);
 
-	const pageSize = 10;
+	const { pageSize, setPageSize } = usePageSize('hosts');
 
 	const query = useMemo(() => {
 		const baseQuery = getHostListsQuery();
@@ -61,7 +62,7 @@ function HostsList(): JSX.Element {
 			end: Math.floor(maxTime / 1000000),
 			orderBy,
 		};
-	}, [currentPage, filters, minTime, maxTime, orderBy]);
+	}, [pageSize, currentPage, filters, minTime, maxTime, orderBy]);
 
 	const { data, isFetching, isLoading, isError } = useGetHostList(
 		query as HostListPayload,
@@ -231,8 +232,12 @@ function HostsList(): JSX.Element {
 						current: currentPage,
 						pageSize,
 						total: totalCount,
-						showSizeChanger: false,
+						showSizeChanger: true,
-						hideOnSinglePage: true,
+						hideOnSinglePage: false,
+						onChange: (page, pageSize): void => {
+							setCurrentPage(page);
+							setPageSize(pageSize);
+						},
 					}}
 					scroll={{ x: true }}
 					loading={{

frontend/src/container/InfraMonitoringK8s/Clusters/K8sClustersList.tsx

@@ -32,6 +32,7 @@ import {
 } from '../constants';
 import K8sHeader from '../K8sHeader';
 import LoadingContainer from '../LoadingContainer';
+import { usePageSize } from '../utils';
 import ClusterDetails from './ClusterDetails';
 import {
 	defaultAddedColumns,
@@ -68,7 +69,7 @@ function K8sClustersList({
 		null,
 	);
 
-	const pageSize = 10;
+	const { pageSize, setPageSize } = usePageSize(K8sCategory.CLUSTERS);
 
 	const [groupBy, setGroupBy] = useState<IBuilderQuery['groupBy']>([]);
 
@@ -192,7 +193,7 @@ function K8sClustersList({
 			queryPayload.groupBy = groupBy;
 		}
 		return queryPayload;
-	}, [currentPage, minTime, maxTime, orderBy, groupBy, queryFilters]);
+	}, [pageSize, currentPage, queryFilters, minTime, maxTime, orderBy, groupBy]);
 
 	const formattedGroupedByClustersData = useMemo(
 		() =>
@@ -461,8 +462,12 @@ function K8sClustersList({
 					current: currentPage,
 					pageSize,
 					total: totalCount,
-					showSizeChanger: false,
+					showSizeChanger: true,
-					hideOnSinglePage: true,
+					hideOnSinglePage: false,
+					onChange: (page, pageSize): void => {
+						setCurrentPage(page);
+						setPageSize(pageSize);
+					},
 				}}
 				scroll={{ x: true }}
 				loading={{

frontend/src/container/InfraMonitoringK8s/DaemonSets/K8sDaemonSetsList.tsx

@@ -33,6 +33,7 @@ import {
 } from '../constants';
 import K8sHeader from '../K8sHeader';
 import LoadingContainer from '../LoadingContainer';
+import { usePageSize } from '../utils';
 import DaemonSetDetails from './DaemonSetDetails';
 import {
 	defaultAddedColumns,
@@ -69,7 +70,7 @@ function K8sDaemonSetsList({
 		string | null
 	>(null);
 
-	const pageSize = 10;
+	const { pageSize, setPageSize } = usePageSize(K8sCategory.DAEMONSETS);
 
 	const [groupBy, setGroupBy] = useState<IBuilderQuery['groupBy']>([]);
 
@@ -193,7 +194,7 @@ function K8sDaemonSetsList({
 			queryPayload.groupBy = groupBy;
 		}
 		return queryPayload;
-	}, [currentPage, minTime, maxTime, orderBy, groupBy, queryFilters]);
+	}, [pageSize, currentPage, queryFilters, minTime, maxTime, orderBy, groupBy]);
 
 	const formattedGroupedByDaemonSetsData = useMemo(
 		() =>
@@ -465,8 +466,12 @@ function K8sDaemonSetsList({
 					current: currentPage,
 					pageSize,
 					total: totalCount,
-					showSizeChanger: false,
+					showSizeChanger: true,
-					hideOnSinglePage: true,
+					hideOnSinglePage: false,
+					onChange: (page, pageSize): void => {
+						setCurrentPage(page);
+						setPageSize(pageSize);
+					},
 				}}
 				scroll={{ x: true }}
 				loading={{

frontend/src/container/InfraMonitoringK8s/Deployments/K8sDeploymentsList.tsx

@@ -33,6 +33,7 @@ import {
 } from '../constants';
 import K8sHeader from '../K8sHeader';
 import LoadingContainer from '../LoadingContainer';
+import { usePageSize } from '../utils';
 import DeploymentDetails from './DeploymentDetails';
 import {
 	defaultAddedColumns,
@@ -69,7 +70,7 @@ function K8sDeploymentsList({
 		string | null
 	>(null);
 
-	const pageSize = 10;
+	const { pageSize, setPageSize } = usePageSize(K8sCategory.DEPLOYMENTS);
 
 	const [groupBy, setGroupBy] = useState<IBuilderQuery['groupBy']>([]);
 
@@ -193,7 +194,7 @@ function K8sDeploymentsList({
 			queryPayload.groupBy = groupBy;
 		}
 		return queryPayload;
-	}, [currentPage, minTime, maxTime, orderBy, groupBy, queryFilters]);
+	}, [pageSize, currentPage, queryFilters, minTime, maxTime, orderBy, groupBy]);
 
 	const formattedGroupedByDeploymentsData = useMemo(
 		() =>
@@ -468,8 +469,12 @@ function K8sDeploymentsList({
 					current: currentPage,
 					pageSize,
 					total: totalCount,
-					showSizeChanger: false,
+					showSizeChanger: true,
-					hideOnSinglePage: true,
+					hideOnSinglePage: false,
+					onChange: (page, pageSize): void => {
+						setCurrentPage(page);
+						setPageSize(pageSize);
+					},
 				}}
 				scroll={{ x: true }}
 				loading={{

frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.styles.scss

@@ -880,3 +880,7 @@
 .entity-group-header {
 	width: 300px !important;
 }
+
+.ant-table-content {
+	margin-bottom: 60px !important;
+}

frontend/src/container/InfraMonitoringK8s/Jobs/K8sJobsList.tsx

@@ -33,6 +33,7 @@ import {
 } from '../constants';
 import K8sHeader from '../K8sHeader';
 import LoadingContainer from '../LoadingContainer';
+import { usePageSize } from '../utils';
 import JobDetails from './JobDetails';
 import {
 	defaultAddedColumns,
@@ -67,7 +68,7 @@ function K8sJobsList({
 
 	const [selectedJobUID, setselectedJobUID] = useState<string | null>(null);
 
-	const pageSize = 10;
+	const { pageSize, setPageSize } = usePageSize(K8sCategory.JOBS);
 
 	const [groupBy, setGroupBy] = useState<IBuilderQuery['groupBy']>([]);
 
@@ -186,7 +187,7 @@ function K8sJobsList({
 			queryPayload.groupBy = groupBy;
 		}
 		return queryPayload;
-	}, [currentPage, minTime, maxTime, orderBy, groupBy, queryFilters]);
+	}, [pageSize, currentPage, queryFilters, minTime, maxTime, orderBy, groupBy]);
 
 	const formattedGroupedByJobsData = useMemo(
 		() =>
@@ -450,8 +451,12 @@ function K8sJobsList({
 					current: currentPage,
 					pageSize,
 					total: totalCount,
-					showSizeChanger: false,
+					showSizeChanger: true,
-					hideOnSinglePage: true,
+					hideOnSinglePage: false,
+					onChange: (page, pageSize): void => {
+						setCurrentPage(page);
+						setPageSize(pageSize);
+					},
 				}}
 				scroll={{ x: true }}
 				loading={{

frontend/src/container/InfraMonitoringK8s/Namespaces/K8sNamespacesList.tsx

@@ -32,6 +32,7 @@ import {
 } from '../constants';
 import K8sHeader from '../K8sHeader';
 import LoadingContainer from '../LoadingContainer';
+import { usePageSize } from '../utils';
 import NamespaceDetails from './NamespaceDetails';
 import {
 	defaultAddedColumns,
@@ -68,7 +69,7 @@ function K8sNamespacesList({
 		string | null
 	>(null);
 
-	const pageSize = 10;
+	const { pageSize, setPageSize } = usePageSize(K8sCategory.NAMESPACES);
 
 	const [groupBy, setGroupBy] = useState<IBuilderQuery['groupBy']>([]);
 
@@ -192,7 +193,7 @@ function K8sNamespacesList({
 			queryPayload.groupBy = groupBy;
 		}
 		return queryPayload;
-	}, [currentPage, minTime, maxTime, orderBy, groupBy, queryFilters]);
+	}, [pageSize, currentPage, queryFilters, minTime, maxTime, orderBy, groupBy]);
 
 	const formattedGroupedByNamespacesData = useMemo(
 		() =>
@@ -463,8 +464,12 @@ function K8sNamespacesList({
 					current: currentPage,
 					pageSize,
 					total: totalCount,
-					showSizeChanger: false,
+					showSizeChanger: true,
-					hideOnSinglePage: true,
+					hideOnSinglePage: false,
+					onChange: (page, pageSize): void => {
+						setCurrentPage(page);
+						setPageSize(pageSize);
+					},
 				}}
 				scroll={{ x: true }}
 				loading={{

frontend/src/container/InfraMonitoringK8s/Nodes/K8sNodesList.tsx

@@ -32,6 +32,7 @@ import {
 } from '../constants';
 import K8sHeader from '../K8sHeader';
 import LoadingContainer from '../LoadingContainer';
+import { usePageSize } from '../utils';
 import NodeDetails from './NodeDetails';
 import {
 	defaultAddedColumns,
@@ -66,7 +67,7 @@ function K8sNodesList({
 
 	const [selectedNodeUID, setselectedNodeUID] = useState<string | null>(null);
 
-	const pageSize = 10;
+	const { pageSize, setPageSize } = usePageSize(K8sCategory.NODES);
 
 	const [groupBy, setGroupBy] = useState<IBuilderQuery['groupBy']>([]);
 
@@ -185,7 +186,7 @@ function K8sNodesList({
 			queryPayload.groupBy = groupBy;
 		}
 		return queryPayload;
-	}, [currentPage, minTime, maxTime, orderBy, groupBy, queryFilters]);
+	}, [pageSize, currentPage, queryFilters, minTime, maxTime, orderBy, groupBy]);
 
 	const formattedGroupedByNodesData = useMemo(
 		() =>
@@ -448,8 +449,12 @@ function K8sNodesList({
 					current: currentPage,
 					pageSize,
 					total: totalCount,
-					showSizeChanger: false,
+					showSizeChanger: true,
-					hideOnSinglePage: true,
+					hideOnSinglePage: false,
+					onChange: (page, pageSize): void => {
+						setCurrentPage(page);
+						setPageSize(pageSize);
+					},
 				}}
 				scroll={{ x: true }}
 				loading={{

frontend/src/container/InfraMonitoringK8s/Pods/K8sPodLists.tsx

@@ -41,6 +41,7 @@ import {
 	getK8sPodsListQuery,
 	IEntityColumn,
 	K8sPodsRowData,
+	usePageSize,
 } from '../utils';
 import PodDetails from './PodDetails/PodDetails';
 
@@ -136,7 +137,7 @@ function K8sPodsList({
 
 	const [selectedPodUID, setSelectedPodUID] = useState<string | null>(null);
 
-	const pageSize = 10;
+	const { pageSize, setPageSize } = usePageSize(K8sCategory.PODS);
 
 	const query = useMemo(() => {
 		const baseQuery = getK8sPodsListQuery();
@@ -156,7 +157,7 @@ function K8sPodsList({
 		}
 
 		return queryPayload;
-	}, [currentPage, minTime, maxTime, orderBy, groupBy, queryFilters]);
+	}, [pageSize, currentPage, queryFilters, minTime, maxTime, orderBy, groupBy]);
 
 	const { data, isFetching, isLoading, isError } = useGetK8sPodsList(
 		query as K8sPodsListPayload,
@@ -513,8 +514,12 @@ function K8sPodsList({
 					current: currentPage,
 					pageSize,
 					total: totalCount,
-					showSizeChanger: false,
+					showSizeChanger: true,
-					hideOnSinglePage: true,
+					hideOnSinglePage: false,
+					onChange: (page, pageSize): void => {
+						setCurrentPage(page);
+						setPageSize(pageSize);
+					},
 				}}
 				loading={{
 					spinning: isFetching || isLoading,

frontend/src/container/InfraMonitoringK8s/StatefulSets/K8sStatefulSetsList.tsx

@@ -33,6 +33,7 @@ import {
 } from '../constants';
 import K8sHeader from '../K8sHeader';
 import LoadingContainer from '../LoadingContainer';
+import { usePageSize } from '../utils';
 import StatefulSetDetails from './StatefulSetDetails';
 import {
 	defaultAddedColumns,
@@ -69,7 +70,7 @@ function K8sStatefulSetsList({
 		string | null
 	>(null);
 
-	const pageSize = 10;
+	const { pageSize, setPageSize } = usePageSize(K8sCategory.STATEFULSETS);
 
 	const [groupBy, setGroupBy] = useState<IBuilderQuery['groupBy']>([]);
 
@@ -193,7 +194,7 @@ function K8sStatefulSetsList({
 			queryPayload.groupBy = groupBy;
 		}
 		return queryPayload;
-	}, [currentPage, minTime, maxTime, orderBy, groupBy, queryFilters]);
+	}, [pageSize, currentPage, queryFilters, minTime, maxTime, orderBy, groupBy]);
 
 	const formattedGroupedByStatefulSetsData = useMemo(
 		() =>
@@ -467,8 +468,12 @@ function K8sStatefulSetsList({
 					current: currentPage,
 					pageSize,
 					total: totalCount,
-					showSizeChanger: false,
+					showSizeChanger: true,
-					hideOnSinglePage: true,
+					hideOnSinglePage: false,
+					onChange: (page, pageSize): void => {
+						setCurrentPage(page);
+						setPageSize(pageSize);
+					},
 				}}
 				scroll={{ x: true }}
 				loading={{

frontend/src/container/InfraMonitoringK8s/Volumes/K8sVolumesList.tsx

@@ -33,6 +33,7 @@ import {
 } from '../constants';
 import K8sHeader from '../K8sHeader';
 import LoadingContainer from '../LoadingContainer';
+import { usePageSize } from '../utils';
 import {
 	defaultAddedColumns,
 	formatDataForTable,
@@ -69,7 +70,7 @@ function K8sVolumesList({
 		null,
 	);
 
-	const pageSize = 10;
+	const { pageSize, setPageSize } = usePageSize(K8sCategory.VOLUMES);
 
 	const [groupBy, setGroupBy] = useState<IBuilderQuery['groupBy']>([]);
 
@@ -189,7 +190,7 @@ function K8sVolumesList({
 			queryPayload.groupBy = groupBy;
 		}
 		return queryPayload;
-	}, [currentPage, minTime, maxTime, orderBy, groupBy, queryFilters]);
+	}, [pageSize, currentPage, queryFilters, minTime, maxTime, orderBy, groupBy]);
 
 	const formattedGroupedByVolumesData = useMemo(
 		() =>
@@ -457,8 +458,12 @@ function K8sVolumesList({
 					current: currentPage,
 					pageSize,
 					total: totalCount,
-					showSizeChanger: false,
+					showSizeChanger: true,
-					hideOnSinglePage: true,
+					hideOnSinglePage: false,
+					onChange: (page, pageSize): void => {
+						setCurrentPage(page);
+						setPageSize(pageSize);
+					},
 				}}
 				scroll={{ x: true }}
 				loading={{

frontend/src/container/InfraMonitoringK8s/constants.ts

@@ -6,6 +6,8 @@ import {
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource } from 'types/common/queryBuilder';
 
+export const DEFAULT_PAGE_SIZE = 10;
+
 export enum K8sCategory {
 	HOSTS = 'hosts',
 	PODS = 'pods',

frontend/src/container/InfraMonitoringK8s/utils.tsx

@@ -5,11 +5,14 @@ import './InfraMonitoringK8s.styles.scss';
 import { Color } from '@signozhq/design-tokens';
 import { Tag, Tooltip } from 'antd';
 import { ColumnType } from 'antd/es/table';
+import get from 'api/browser/localstorage/get';
+import set from 'api/browser/localstorage/set';
 import {
 	K8sPodsData,
 	K8sPodsListPayload,
 } from 'api/infraMonitoring/getK8sPodsList';
 import { Group } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
 import {
@@ -17,7 +20,7 @@ import {
 	formatBytes,
 	ValidateColumnValueWrapper,
 } from './commonUtils';
-import { K8sCategory } from './constants';
+import { DEFAULT_PAGE_SIZE, K8sCategory } from './constants';
 
 export interface IEntityColumn {
 	label: string;
@@ -396,3 +399,39 @@ export const formatDataForTable = (
 		...pod.meta,
 		groupedByMeta: pod.meta,
 	}));
+
+/**
+ * Custom hook to manage the page size for a table.
+ * The page size is stored in local storage and is retrieved on initialization.
+ * It also provides a function to update the page size and save it to local storage.
+ */
+export const usePageSize = (
+	key: string,
+): { pageSize: number; setPageSize: (pageSize: number) => void } => {
+	const [pageSize, setPageSize] = useState<number>(DEFAULT_PAGE_SIZE);
+
+	// Memoized key for accessing page size in local storage
+	const storageKey = useMemo(() => `k8s-${key}-page-size`, [key]);
+
+	useEffect(() => {
+		// Retrieve the stored page size from local storage on component mount
+		const storageValue = get(storageKey);
+		if (storageValue) {
+			setPageSize(parseInt(storageValue, 10));
+		}
+	}, [storageKey]);
+
+	// Function to update the page size and save it to local storage
+	const handlePageSizeChange = useCallback(
+		(value: number) => {
+			setPageSize(value);
+			set(storageKey, value.toString());
+		},
+		[storageKey],
+	);
+
+	return {
+		pageSize,
+		setPageSize: handlePageSizeChange,
+	};
+};