diff --git a/x-pack/plugins/apm/public/components/app/dependencies_inventory/dependencies_inventory_table/index.tsx b/x-pack/plugins/apm/public/components/app/dependencies_inventory/dependencies_inventory_table/index.tsx index 87985db3addd4a..20d92bc5025d6a 100644 --- a/x-pack/plugins/apm/public/components/app/dependencies_inventory/dependencies_inventory_table/index.tsx +++ b/x-pack/plugins/apm/public/components/app/dependencies_inventory/dependencies_inventory_table/index.tsx @@ -109,6 +109,7 @@ export function DependenciesInventoryTable() { )} status={status} compact={false} + initialPageSize={25} /> ); } diff --git a/x-pack/plugins/apm/public/components/app/dependency_detail_operations/dependency_detail_operations_list/index.tsx b/x-pack/plugins/apm/public/components/app/dependency_detail_operations/dependency_detail_operations_list/index.tsx index cbfbcac2c2de58..84be97ab0ac56a 100644 --- a/x-pack/plugins/apm/public/components/app/dependency_detail_operations/dependency_detail_operations_list/index.tsx +++ b/x-pack/plugins/apm/public/components/app/dependency_detail_operations/dependency_detail_operations_list/index.tsx @@ -173,6 +173,7 @@ export function DependencyDetailOperationsList() { initialSortField="impact" initialSortDirection="desc" isLoading={primaryStatsFetch.status === FETCH_STATUS.LOADING} + initialPageSize={25} /> ); } diff --git a/x-pack/plugins/apm/public/components/app/dependency_detail_overview/dependencies_detail_table.tsx b/x-pack/plugins/apm/public/components/app/dependency_detail_overview/dependencies_detail_table.tsx index 4a40e10fcf36de..08cde95d2930e6 100644 --- a/x-pack/plugins/apm/public/components/app/dependency_detail_overview/dependencies_detail_table.tsx +++ b/x-pack/plugins/apm/public/components/app/dependency_detail_overview/dependencies_detail_table.tsx @@ -107,6 +107,7 @@ export function DependenciesDetailTable() { )} status={status} compact={false} + initialPageSize={25} /> ); } diff --git a/x-pack/plugins/apm/public/components/app/error_group_overview/error_group_list/index.tsx b/x-pack/plugins/apm/public/components/app/error_group_overview/error_group_list/index.tsx index 1ce254ea919414..7fc7041b3081a7 100644 --- a/x-pack/plugins/apm/public/components/app/error_group_overview/error_group_list/index.tsx +++ b/x-pack/plugins/apm/public/components/app/error_group_overview/error_group_list/index.tsx @@ -258,6 +258,7 @@ function ErrorGroupList({ initialSortField={initialSortField} initialSortDirection={initialSortDirection} sortItems={false} + initialPageSize={25} /> ); } diff --git a/x-pack/plugins/apm/public/components/app/error_group_overview/index.tsx b/x-pack/plugins/apm/public/components/app/error_group_overview/index.tsx index d198d1712772ce..8e62a5fe7d81c0 100644 --- a/x-pack/plugins/apm/public/components/app/error_group_overview/index.tsx +++ b/x-pack/plugins/apm/public/components/app/error_group_overview/index.tsx @@ -27,7 +27,6 @@ import { APIReturnType } from '../../../services/rest/create_call_apm_api'; import { FailedTransactionRateChart } from '../../shared/charts/failed_transaction_rate_chart'; import { ErrorDistribution } from '../error_group_details/distribution'; import { ErrorGroupList } from './error_group_list'; -import { INITIAL_PAGE_SIZE } from '../../shared/managed_table'; type ErrorGroupMainStatistics = APIReturnType<'GET /internal/apm/services/{serviceName}/errors/groups/main_statistics'>; @@ -63,7 +62,7 @@ export function ErrorGroupOverview() { offset, comparisonEnabled, page = 0, - pageSize = INITIAL_PAGE_SIZE, + pageSize = 25, }, } = useApmParams('/services/{serviceName}/errors'); diff --git a/x-pack/plugins/apm/public/components/app/service_inventory/index.tsx b/x-pack/plugins/apm/public/components/app/service_inventory/index.tsx index 779145abf69404..a0cd0327fd12b7 100644 --- a/x-pack/plugins/apm/public/components/app/service_inventory/index.tsx +++ b/x-pack/plugins/apm/public/components/app/service_inventory/index.tsx @@ -24,7 +24,6 @@ import { useProgressiveFetcher } from '../../../hooks/use_progressive_fetcher'; import { joinByKey } from '../../../../common/utils/join_by_key'; import { ServiceInventoryFieldName } from '../../../../common/service_inventory'; import { orderServiceItems } from './service_list/order_service_items'; -import { INITIAL_PAGE_SIZE } from '../../shared/managed_table'; const initialData = { requestId: '', @@ -33,6 +32,8 @@ const initialData = { hasLegacyData: false, }; +const INITIAL_PAGE_SIZE = 25; + function useServicesMainStatisticsFetcher() { const { query: { @@ -309,6 +310,7 @@ export function ServiceInventory() { }} comparisonData={comparisonFetch?.data} noItemsMessage={noItemsMessage} + initialPageSize={INITIAL_PAGE_SIZE} /> diff --git a/x-pack/plugins/apm/public/components/app/service_inventory/service_list/index.tsx b/x-pack/plugins/apm/public/components/app/service_inventory/service_list/index.tsx index 1d087748bd8ce3..eb807574d28aea 100644 --- a/x-pack/plugins/apm/public/components/app/service_inventory/service_list/index.tsx +++ b/x-pack/plugins/apm/public/components/app/service_inventory/service_list/index.tsx @@ -243,6 +243,7 @@ interface Props { isFailure?: boolean; displayHealthStatus: boolean; initialSortField: ServiceInventoryFieldName; + initialPageSize: number; initialSortDirection: 'asc' | 'desc'; sortFn: ( sortItems: ServiceListItem[], @@ -261,6 +262,7 @@ export function ServiceList({ displayHealthStatus, initialSortField, initialSortDirection, + initialPageSize, sortFn, }: Props) { const breakpoints = useBreakpoints(); @@ -353,6 +355,7 @@ export function ServiceList({ noItemsMessage={noItemsMessage} initialSortField={initialSortField} initialSortDirection={initialSortDirection} + initialPageSize={initialPageSize} sortFn={(itemsToSort, sortField, sortDirection) => sortFn( itemsToSort, diff --git a/x-pack/plugins/apm/public/components/app/service_inventory/service_list/service_list.stories.tsx b/x-pack/plugins/apm/public/components/app/service_inventory/service_list/service_list.stories.tsx index 5073bd72381e20..d4d5972e266941 100644 --- a/x-pack/plugins/apm/public/components/app/service_inventory/service_list/service_list.stories.tsx +++ b/x-pack/plugins/apm/public/components/app/service_inventory/service_list/service_list.stories.tsx @@ -63,6 +63,7 @@ Example.args = { displayHealthStatus: true, initialSortField: ServiceInventoryFieldName.HealthStatus, initialSortDirection: 'desc', + initialPageSize: 25, sortFn: (sortItems) => sortItems, }; @@ -75,6 +76,7 @@ EmptyState.args = { displayHealthStatus: true, initialSortField: ServiceInventoryFieldName.HealthStatus, initialSortDirection: 'desc', + initialPageSize: 25, sortFn: (sortItems) => sortItems, }; @@ -83,6 +85,7 @@ export const WithHealthWarnings: Story = (args) => { }; WithHealthWarnings.args = { isLoading: false, + initialPageSize: 25, items: items.map((item) => ({ ...item, healthStatus: ServiceHealthStatus.warning, diff --git a/x-pack/plugins/apm/public/components/app/service_node_overview/index.tsx b/x-pack/plugins/apm/public/components/app/service_node_overview/index.tsx index bb7ee9115dd539..99222394bcfe2c 100644 --- a/x-pack/plugins/apm/public/components/app/service_node_overview/index.tsx +++ b/x-pack/plugins/apm/public/components/app/service_node_overview/index.tsx @@ -173,6 +173,7 @@ function ServiceNodeOverview() { columns={columns} initialSortField={INITIAL_SORT_FIELD} initialSortDirection={INITIAL_SORT_DIRECTION} + initialPageSize={25} /> ); } diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx index 7bfdfb59a9c7d7..8e7c7a0336d303 100644 --- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx +++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx @@ -170,6 +170,7 @@ export function ServiceOverviewDependenciesTable({ status={status} link={link} showPerPageOptions={showPerPageOptions} + initialPageSize={5} /> ); } diff --git a/x-pack/plugins/apm/public/components/app/settings/agent_configurations/list/index.tsx b/x-pack/plugins/apm/public/components/app/settings/agent_configurations/list/index.tsx index 0dd2cbd1b8dcfc..065dfd67bb5e01 100644 --- a/x-pack/plugins/apm/public/components/app/settings/agent_configurations/list/index.tsx +++ b/x-pack/plugins/apm/public/components/app/settings/agent_configurations/list/index.tsx @@ -245,6 +245,7 @@ export function AgentConfigurationList({ items={configurations} initialSortField="service.name" initialSortDirection="asc" + initialPageSize={25} /> ); diff --git a/x-pack/plugins/apm/public/components/app/settings/anomaly_detection/jobs_list.tsx b/x-pack/plugins/apm/public/components/app/settings/anomaly_detection/jobs_list.tsx index 50cb040c0c0654..b7b240843cbab6 100644 --- a/x-pack/plugins/apm/public/components/app/settings/anomaly_detection/jobs_list.tsx +++ b/x-pack/plugins/apm/public/components/app/settings/anomaly_detection/jobs_list.tsx @@ -259,6 +259,7 @@ export function JobsList({ columns={columns} items={filteredJobs} tableLayout="auto" + initialPageSize={25} /> diff --git a/x-pack/plugins/apm/public/components/app/settings/custom_link/custom_link_table.tsx b/x-pack/plugins/apm/public/components/app/settings/custom_link/custom_link_table.tsx index d2603538d84bfa..7ee1dad4b85e05 100644 --- a/x-pack/plugins/apm/public/components/app/settings/custom_link/custom_link_table.tsx +++ b/x-pack/plugins/apm/public/components/app/settings/custom_link/custom_link_table.tsx @@ -121,6 +121,7 @@ export function CustomLinkTable({ items = [], onCustomLinkSelected }: Props) { columns={columns} initialSortField="@timestamp" initialSortDirection="desc" + initialPageSize={25} /> ); diff --git a/x-pack/plugins/apm/public/components/app/top_traces_overview/trace_list.tsx b/x-pack/plugins/apm/public/components/app/top_traces_overview/trace_list.tsx index 0d1914d7de4553..e73758e5247b7e 100644 --- a/x-pack/plugins/apm/public/components/app/top_traces_overview/trace_list.tsx +++ b/x-pack/plugins/apm/public/components/app/top_traces_overview/trace_list.tsx @@ -170,6 +170,7 @@ export function TraceList({ response }: Props) { initialSortField="impact" initialSortDirection="desc" noItemsMessage={noItemsMessage} + initialPageSize={25} /> ); } diff --git a/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx b/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx index 718a978f1599e2..c4d1a0bdaffe12 100644 --- a/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx @@ -30,6 +30,7 @@ export type DependenciesItem = Omit< interface Props { dependencies: DependenciesItem[]; + initialPageSize: number; fixedHeight?: boolean; link?: React.ReactNode; title: React.ReactNode; @@ -54,6 +55,7 @@ export function DependenciesTable(props: Props) { status, compact = true, showPerPageOptions = true, + initialPageSize, } = props; // SparkPlots should be hidden if we're in two-column view and size XL (1200px) @@ -143,6 +145,7 @@ export function DependenciesTable(props: Props) { initialSortDirection="desc" pagination={true} showPerPageOptions={showPerPageOptions} + initialPageSize={initialPageSize} /> diff --git a/x-pack/plugins/apm/public/components/shared/managed_table/index.tsx b/x-pack/plugins/apm/public/components/shared/managed_table/index.tsx index 81d01ffd60c267..a4814211399e38 100644 --- a/x-pack/plugins/apm/public/components/shared/managed_table/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/managed_table/index.tsx @@ -29,8 +29,8 @@ export interface ITableColumn { interface Props { items: T[]; columns: Array>; + initialPageSize: number; initialPageIndex?: number; - initialPageSize?: number; initialSortField?: ITableColumn['field']; initialSortDirection?: 'asc' | 'desc'; showPerPageOptions?: boolean; @@ -48,7 +48,6 @@ interface Props { } const PAGE_SIZE_OPTIONS = [10, 25, 50]; -export const INITIAL_PAGE_SIZE = 25; function defaultSortFn( items: T[], @@ -64,7 +63,7 @@ function UnoptimizedManagedTable(props: Props) { items, columns, initialPageIndex = 0, - initialPageSize = INITIAL_PAGE_SIZE, + initialPageSize, initialSortField = props.columns[0]?.field || '', initialSortDirection = 'asc', showPerPageOptions = true, diff --git a/x-pack/plugins/apm/public/components/shared/managed_table/managed_table.test.tsx b/x-pack/plugins/apm/public/components/shared/managed_table/managed_table.test.tsx index 10f3ba29733dc2..a43d78887ec9fb 100644 --- a/x-pack/plugins/apm/public/components/shared/managed_table/managed_table.test.tsx +++ b/x-pack/plugins/apm/public/components/shared/managed_table/managed_table.test.tsx @@ -33,7 +33,11 @@ describe('ManagedTable', () => { it('should render a page-full of items, with defaults', () => { expect( shallow( - columns={columns} items={people} /> + + columns={columns} + items={people} + initialPageSize={25} + /> ) ).toMatchSnapshot(); });