diff --git a/frontend/src/container/InfraMonitoringHosts/HostsList.tsx b/frontend/src/container/InfraMonitoringHosts/HostsList.tsx index cfa11a5cbf73..eab4ec0033b4 100644 --- a/frontend/src/container/InfraMonitoringHosts/HostsList.tsx +++ b/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(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, - hideOnSinglePage: true, + showSizeChanger: true, + hideOnSinglePage: false, + onChange: (page, pageSize): void => { + setCurrentPage(page); + setPageSize(pageSize); + }, }} scroll={{ x: true }} loading={{ diff --git a/frontend/src/container/InfraMonitoringK8s/Clusters/K8sClustersList.tsx b/frontend/src/container/InfraMonitoringK8s/Clusters/K8sClustersList.tsx index 2b5eb9f9cc4f..bf0d27598658 100644 --- a/frontend/src/container/InfraMonitoringK8s/Clusters/K8sClustersList.tsx +++ b/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([]); @@ -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, - hideOnSinglePage: true, + showSizeChanger: true, + hideOnSinglePage: false, + onChange: (page, pageSize): void => { + setCurrentPage(page); + setPageSize(pageSize); + }, }} scroll={{ x: true }} loading={{ diff --git a/frontend/src/container/InfraMonitoringK8s/DaemonSets/K8sDaemonSetsList.tsx b/frontend/src/container/InfraMonitoringK8s/DaemonSets/K8sDaemonSetsList.tsx index 5fc60527c4d3..7044f10fd2fb 100644 --- a/frontend/src/container/InfraMonitoringK8s/DaemonSets/K8sDaemonSetsList.tsx +++ b/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([]); @@ -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, - hideOnSinglePage: true, + showSizeChanger: true, + hideOnSinglePage: false, + onChange: (page, pageSize): void => { + setCurrentPage(page); + setPageSize(pageSize); + }, }} scroll={{ x: true }} loading={{ diff --git a/frontend/src/container/InfraMonitoringK8s/Deployments/K8sDeploymentsList.tsx b/frontend/src/container/InfraMonitoringK8s/Deployments/K8sDeploymentsList.tsx index 3831a3d1e7d0..5635522d9317 100644 --- a/frontend/src/container/InfraMonitoringK8s/Deployments/K8sDeploymentsList.tsx +++ b/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([]); @@ -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, - hideOnSinglePage: true, + showSizeChanger: true, + hideOnSinglePage: false, + onChange: (page, pageSize): void => { + setCurrentPage(page); + setPageSize(pageSize); + }, }} scroll={{ x: true }} loading={{ diff --git a/frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.styles.scss b/frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.styles.scss index 76ae43618312..f2075114018f 100644 --- a/frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.styles.scss +++ b/frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.styles.scss @@ -880,3 +880,7 @@ .entity-group-header { width: 300px !important; } + +.ant-table-content { + margin-bottom: 60px !important; +} diff --git a/frontend/src/container/InfraMonitoringK8s/Jobs/K8sJobsList.tsx b/frontend/src/container/InfraMonitoringK8s/Jobs/K8sJobsList.tsx index 98a3a23caaa6..c3f3ac542954 100644 --- a/frontend/src/container/InfraMonitoringK8s/Jobs/K8sJobsList.tsx +++ b/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(null); - const pageSize = 10; + const { pageSize, setPageSize } = usePageSize(K8sCategory.JOBS); const [groupBy, setGroupBy] = useState([]); @@ -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, - hideOnSinglePage: true, + showSizeChanger: true, + hideOnSinglePage: false, + onChange: (page, pageSize): void => { + setCurrentPage(page); + setPageSize(pageSize); + }, }} scroll={{ x: true }} loading={{ diff --git a/frontend/src/container/InfraMonitoringK8s/Namespaces/K8sNamespacesList.tsx b/frontend/src/container/InfraMonitoringK8s/Namespaces/K8sNamespacesList.tsx index 4dc90954a062..af6833a1b07f 100644 --- a/frontend/src/container/InfraMonitoringK8s/Namespaces/K8sNamespacesList.tsx +++ b/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([]); @@ -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, - hideOnSinglePage: true, + showSizeChanger: true, + hideOnSinglePage: false, + onChange: (page, pageSize): void => { + setCurrentPage(page); + setPageSize(pageSize); + }, }} scroll={{ x: true }} loading={{ diff --git a/frontend/src/container/InfraMonitoringK8s/Nodes/K8sNodesList.tsx b/frontend/src/container/InfraMonitoringK8s/Nodes/K8sNodesList.tsx index 32b0b7a9a339..80efef725d09 100644 --- a/frontend/src/container/InfraMonitoringK8s/Nodes/K8sNodesList.tsx +++ b/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(null); - const pageSize = 10; + const { pageSize, setPageSize } = usePageSize(K8sCategory.NODES); const [groupBy, setGroupBy] = useState([]); @@ -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, - hideOnSinglePage: true, + showSizeChanger: true, + hideOnSinglePage: false, + onChange: (page, pageSize): void => { + setCurrentPage(page); + setPageSize(pageSize); + }, }} scroll={{ x: true }} loading={{ diff --git a/frontend/src/container/InfraMonitoringK8s/Pods/K8sPodLists.tsx b/frontend/src/container/InfraMonitoringK8s/Pods/K8sPodLists.tsx index d8a6e5583ef1..35a2046d2565 100644 --- a/frontend/src/container/InfraMonitoringK8s/Pods/K8sPodLists.tsx +++ b/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(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, - hideOnSinglePage: true, + showSizeChanger: true, + hideOnSinglePage: false, + onChange: (page, pageSize): void => { + setCurrentPage(page); + setPageSize(pageSize); + }, }} loading={{ spinning: isFetching || isLoading, diff --git a/frontend/src/container/InfraMonitoringK8s/StatefulSets/K8sStatefulSetsList.tsx b/frontend/src/container/InfraMonitoringK8s/StatefulSets/K8sStatefulSetsList.tsx index cd85cc5e131b..b5c08997da56 100644 --- a/frontend/src/container/InfraMonitoringK8s/StatefulSets/K8sStatefulSetsList.tsx +++ b/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([]); @@ -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, - hideOnSinglePage: true, + showSizeChanger: true, + hideOnSinglePage: false, + onChange: (page, pageSize): void => { + setCurrentPage(page); + setPageSize(pageSize); + }, }} scroll={{ x: true }} loading={{ diff --git a/frontend/src/container/InfraMonitoringK8s/Volumes/K8sVolumesList.tsx b/frontend/src/container/InfraMonitoringK8s/Volumes/K8sVolumesList.tsx index 149f2cb8659f..c2e8f393e209 100644 --- a/frontend/src/container/InfraMonitoringK8s/Volumes/K8sVolumesList.tsx +++ b/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([]); @@ -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, - hideOnSinglePage: true, + showSizeChanger: true, + hideOnSinglePage: false, + onChange: (page, pageSize): void => { + setCurrentPage(page); + setPageSize(pageSize); + }, }} scroll={{ x: true }} loading={{ diff --git a/frontend/src/container/InfraMonitoringK8s/constants.ts b/frontend/src/container/InfraMonitoringK8s/constants.ts index 928462fc60c4..12e71ee844bd 100644 --- a/frontend/src/container/InfraMonitoringK8s/constants.ts +++ b/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', diff --git a/frontend/src/container/InfraMonitoringK8s/utils.tsx b/frontend/src/container/InfraMonitoringK8s/utils.tsx index d590c6273cb1..fae703aaf841 100644 --- a/frontend/src/container/InfraMonitoringK8s/utils.tsx +++ b/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(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, + }; +};