GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-08 17:08:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Amlan Kumar Nandy 2025-01-28 09:50:34 +05:30 committed by GitHub
parent 813ca8bc23
commit 7c85befc17
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 136 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/container/InfraMonitoringHosts/HostsList.tsx
View File

@ -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,
hideOnSinglePage: true,
showSizeChanger: true,
hideOnSinglePage: false,
onChange: (page, pageSize): void => {
setCurrentPage(page);
setPageSize(pageSize);
},
}}
scroll={{ x: true }}
loading={{

13
frontend/src/container/InfraMonitoringK8s/Clusters/K8sClustersList.tsx
View File

@ -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,
hideOnSinglePage: true,
showSizeChanger: true,
hideOnSinglePage: false,
onChange: (page, pageSize): void => {
setCurrentPage(page);
setPageSize(pageSize);
},
}}
scroll={{ x: true }}
loading={{

13
frontend/src/container/InfraMonitoringK8s/DaemonSets/K8sDaemonSetsList.tsx
View File

@ -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,
hideOnSinglePage: true,
showSizeChanger: true,
hideOnSinglePage: false,
onChange: (page, pageSize): void => {
setCurrentPage(page);
setPageSize(pageSize);
},
}}
scroll={{ x: true }}
loading={{

13
frontend/src/container/InfraMonitoringK8s/Deployments/K8sDeploymentsList.tsx
View File

@ -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,
hideOnSinglePage: true,
showSizeChanger: true,
hideOnSinglePage: false,
onChange: (page, pageSize): void => {
setCurrentPage(page);
setPageSize(pageSize);
},
}}
scroll={{ x: true }}
loading={{

4
frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.styles.scss
View File

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

13
frontend/src/container/InfraMonitoringK8s/Jobs/K8sJobsList.tsx
View File

@ -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,
hideOnSinglePage: true,
showSizeChanger: true,
hideOnSinglePage: false,
onChange: (page, pageSize): void => {
setCurrentPage(page);
setPageSize(pageSize);
},
}}
scroll={{ x: true }}
loading={{

13
frontend/src/container/InfraMonitoringK8s/Namespaces/K8sNamespacesList.tsx
View File

@ -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,
hideOnSinglePage: true,
showSizeChanger: true,
hideOnSinglePage: false,
onChange: (page, pageSize): void => {
setCurrentPage(page);
setPageSize(pageSize);
},
}}
scroll={{ x: true }}
loading={{

13
frontend/src/container/InfraMonitoringK8s/Nodes/K8sNodesList.tsx
View File

@ -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,
hideOnSinglePage: true,
showSizeChanger: true,
hideOnSinglePage: false,
onChange: (page, pageSize): void => {
setCurrentPage(page);
setPageSize(pageSize);
},
}}
scroll={{ x: true }}
loading={{

13
frontend/src/container/InfraMonitoringK8s/Pods/K8sPodLists.tsx generated
View File

@ -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,
hideOnSinglePage: true,
showSizeChanger: true,
hideOnSinglePage: false,
onChange: (page, pageSize): void => {
setCurrentPage(page);
setPageSize(pageSize);
},
}}
loading={{
spinning: isFetching || isLoading,

13
frontend/src/container/InfraMonitoringK8s/StatefulSets/K8sStatefulSetsList.tsx
View File

@ -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,
hideOnSinglePage: true,
showSizeChanger: true,
hideOnSinglePage: false,
onChange: (page, pageSize): void => {
setCurrentPage(page);
setPageSize(pageSize);
},
}}
scroll={{ x: true }}
loading={{

13
frontend/src/container/InfraMonitoringK8s/Volumes/K8sVolumesList.tsx
View File

@ -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,
hideOnSinglePage: true,
showSizeChanger: true,
hideOnSinglePage: false,
onChange: (page, pageSize): void => {
setCurrentPage(page);
setPageSize(pageSize);
},
}}
scroll={{ x: true }}
loading={{

2
frontend/src/container/InfraMonitoringK8s/constants.ts
View File

@ -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',

41
frontend/src/container/InfraMonitoringK8s/utils.tsx
View File

@ -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,
};
};