[APM] Dependencies table showing more than 5 items per page on Servic…

…e overview page (#138285) (#138314) * fix page size * fixing ci (cherry picked from commit ddf0545) Co-authored-by: Cauê Marcondes <55978943+cauemarcondes@users.noreply.github.com>
elastic · Aug 9, 2022 · 5c24411 · 5c24411
1 parent 9d3cf38
commit 5c24411
Show file tree

Hide file tree

Showing 17 changed files with 30 additions and 7 deletions.
diff --git a/...s/apm/public/components/app/dependencies_inventory/dependencies_inventory_table/index.tsx b/...s/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/...c/components/app/dependency_detail_operations/dependency_detail_operations_list/index.tsx b/...c/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/...lugins/apm/public/components/app/dependency_detail_overview/dependencies_detail_table.tsx b/...lugins/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
@@ -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
@@ -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
@@ -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}
           />
         </EuiFlexItem>
       </EuiFlexGroup>

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
@@ -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/...plugins/apm/public/components/app/service_inventory/service_list/service_list.stories.tsx b/...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> = (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
@@ -173,6 +173,7 @@ function ServiceNodeOverview() {
       columns={columns}
       initialSortField={INITIAL_SORT_FIELD}
       initialSortDirection={INITIAL_SORT_DIRECTION}
+      initialPageSize={25}
     />
   );
 }

diff --git a/.../apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx b/.../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
@@ -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
@@ -259,6 +259,7 @@ export function JobsList({
         columns={columns}
         items={filteredJobs}
         tableLayout="auto"
+        initialPageSize={25}
       />
       <EuiSpacer size="l" />
     </>

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
@@ -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
@@ -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
@@ -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}
           />
         </OverviewTableContainer>
       </EuiFlexItem>

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
@@ -29,8 +29,8 @@ export interface ITableColumn<T> {
 interface Props<T> {
   items: T[];
   columns: Array<ITableColumn<T>>;
+  initialPageSize: number;
   initialPageIndex?: number;
-  initialPageSize?: number;
   initialSortField?: ITableColumn<T>['field'];
   initialSortDirection?: 'asc' | 'desc';
   showPerPageOptions?: boolean;
@@ -48,7 +48,6 @@ interface Props<T> {
 }
 
 const PAGE_SIZE_OPTIONS = [10, 25, 50];
-export const INITIAL_PAGE_SIZE = 25;
 
 function defaultSortFn<T extends any>(
   items: T[],
@@ -64,7 +63,7 @@ function UnoptimizedManagedTable<T>(props: Props<T>) {
     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
@@ -33,7 +33,11 @@ describe('ManagedTable', () => {
   it('should render a page-full of items, with defaults', () => {
     expect(
       shallow(
-        <UnoptimizedManagedTable<Person> columns={columns} items={people} />
+        <UnoptimizedManagedTable<Person>
+          columns={columns}
+          items={people}
+          initialPageSize={25}
+        />
       )
     ).toMatchSnapshot();
   });