diff --git a/frontend/src/container/InfraMonitoringHosts/HostsList.tsx b/frontend/src/container/InfraMonitoringHosts/HostsList.tsx index 44f44500d1..d223cf189a 100644 --- 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(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} /> diff --git a/frontend/src/container/InfraMonitoringHosts/HostsListTable.tsx b/frontend/src/container/InfraMonitoringHosts/HostsListTable.tsx index ee09a9bfcf..841fe52da1 100644 --- 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 index 0a0e7c0747..6909a8d629 100644 --- 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 => ({