[APM] Show rows per page option tables pagination (#122658) (#123393)

* Add rows per page on tables * Set page options and default size at shared ManagedTable component * Fixed TransactionsTable, the rows option wasn’t working, use ManagedTable * Fix i18n * Make hidePerPageOptions false by default * fix snapshot * Improvements after PR review (cherry picked from commit ec38f00bb1) Co-authored-by: Miriam <31922082+MiriamAparicio@users.noreply.github.com>
2025-04-23 09:19:04 -04:00 · 2022-01-19 14:27:02 -05:00 · 2022-01-19 14:27:02 -05:00 · fcbf74937d
commit fcbf74937d
parent d4ac54c160
15 changed files with 43 additions and 64 deletions
--- 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,7 +245,6 @@ export function AgentConfigurationList({
        items={configurations}
        initialSortField="service.name"
        initialSortDirection="asc"
-        initialPageSize={20}
      />
    </>
  );
--- a/x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/custom_link_table.tsx
+++ b/x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/custom_link_table.tsx
@ -122,7 +122,6 @@ export function CustomLinkTable({ items = [], onCustomLinkSelected }: Props) {
        }
        items={filteredItems}
        columns={columns}
-        initialPageSize={10}
        initialSortField="@timestamp"
        initialSortDirection="desc"
      />
--- 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
@ -233,7 +233,6 @@ function ErrorGroupList({
      })}
      items={mainStatistics}
      columns={columns}
-      initialPageSize={25}
      initialSortField="occurrences"
      initialSortDirection="desc"
      sortItems={false}
--- 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
@ -315,7 +315,6 @@ export function ServiceList({
          noItemsMessage={noItemsMessage}
          initialSortField={initialSortField}
          initialSortDirection="desc"
-          initialPageSize={50}
          sortFn={(itemsToSort, sortField, sortDirection) => {
            // For healthStatus, sort items by healthStatus first, then by TPM
            return sortField === 'healthStatus'
--- 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
@ -25,7 +25,6 @@ import { truncate, unit } from '../../../utils/style';
 import { ServiceNodeMetricOverviewLink } from '../../shared/Links/apm/ServiceNodeMetricOverviewLink';
 import { ITableColumn, ManagedTable } from '../../shared/managed_table';

-const INITIAL_PAGE_SIZE = 25;
 const INITIAL_SORT_FIELD = 'cpu';
 const INITIAL_SORT_DIRECTION = 'desc';

@ -170,7 +169,6 @@ function ServiceNodeOverview() {
      })}
      items={items}
      columns={columns}
-      initialPageSize={INITIAL_PAGE_SIZE}
      initialSortField={INITIAL_SORT_FIELD}
      initialSortDirection={INITIAL_SORT_DIRECTION}
    />
--- a/x-pack/plugins/apm/public/components/app/service_overview/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_overview/index.tsx
@ -118,6 +118,7 @@ export function ServiceOverview() {
                    isSingleColumn={isSingleColumn}
                    start={start}
                    end={end}
+                    hidePerPageOptions={true}
                  />
                </EuiPanel>
              </EuiFlexItem>
@ -164,6 +165,7 @@ export function ServiceOverview() {
                    <ServiceOverviewDependenciesTable
                      fixedHeight={true}
                      isSingleColumn={isSingleColumn}
+                      hidePerPageOptions={true}
                      link={
                        <EuiLink href={dependenciesLink}>
                          {i18n.translate(
--- 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
@ -24,12 +24,14 @@ interface ServiceOverviewDependenciesTableProps {
  fixedHeight?: boolean;
  isSingleColumn?: boolean;
  link?: ReactNode;
+  hidePerPageOptions?: boolean;
 }

 export function ServiceOverviewDependenciesTable({
  fixedHeight,
  isSingleColumn = true,
  link,
+  hidePerPageOptions = false,
 }: ServiceOverviewDependenciesTableProps) {
  const {
    urlParams: { comparisonEnabled, comparisonType, latencyAggregationType },
@ -139,6 +141,7 @@ export function ServiceOverviewDependenciesTable({
      )}
      status={status}
      link={link}
+      hidePerPageOptions={hidePerPageOptions}
    />
  );
 }
--- a/x-pack/plugins/apm/public/components/app/trace_overview/trace_list.tsx
+++ b/x-pack/plugins/apm/public/components/app/trace_overview/trace_list.tsx
@ -150,7 +150,6 @@ export function TraceList({ items = [], isLoading, isFailure }: Props) {
      initialSortField="impact"
      initialSortDirection="desc"
      noItemsMessage={noItemsMessage}
-      initialPageSize={25}
    />
  );
 }
--- a/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx
@ -45,6 +45,7 @@ interface Props {
  nameColumnTitle: React.ReactNode;
  status: FETCH_STATUS;
  compact?: boolean;
+  hidePerPageOptions?: boolean;
 }

 export function DependenciesTable(props: Props) {
@ -57,6 +58,7 @@ export function DependenciesTable(props: Props) {
    nameColumnTitle,
    status,
    compact = true,
+    hidePerPageOptions = false,
  } = props;

  // SparkPlots should be hidden if we're in two-column view and size XL (1200px)
@ -210,8 +212,8 @@ export function DependenciesTable(props: Props) {
            noItemsMessage={noItemsMessage}
            initialSortField="impactValue"
            initialSortDirection="desc"
-            initialPageSize={5}
            pagination={true}
+            hidePerPageOptions={hidePerPageOptions}
          />
        </OverviewTableContainer>
      </EuiFlexItem>
--- a/x-pack/plugins/apm/public/components/shared/managed_table/snapshots/managed_table.test.tsx.snap
+++ b/x-pack/plugins/apm/public/components/shared/managed_table/snapshots/managed_table.test.tsx.snap
@ -44,9 +44,14 @@ exports[`ManagedTable should render a page-full of items, with defaults 1`] = `
  onChange={[Function]}
  pagination={
    Object {
-      "hidePerPageOptions": true,
+      "hidePerPageOptions": false,
      "pageIndex": 0,
-      "pageSize": 10,
+      "pageSize": 25,
+      "pageSizeOptions": Array [
+        10,
+        25,
+        50,
+      ],
      "totalItemCount": 3,
    }
  }
@ -102,6 +107,11 @@ exports[`ManagedTable should render when specifying initial values 1`] = `
      "hidePerPageOptions": false,
      "pageIndex": 1,
      "pageSize": 2,
+      "pageSizeOptions": Array [
+        10,
+        25,
+        50,
+      ],
      "totalItemCount": 3,
    }
  }
--- a/x-pack/plugins/apm/public/components/shared/managed_table/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/managed_table/index.tsx
@ -47,6 +47,9 @@ interface Props<T> {
  tableLayout?: 'auto' | 'fixed';
 }

+const PAGE_SIZE_OPTIONS = [10, 25, 50];
+const INITIAL_PAGE_SIZE = 25;
+
 function defaultSortFn<T extends any>(
  items: T[],
  sortField: string,
@ -61,10 +64,10 @@ function UnoptimizedManagedTable<T>(props: Props<T>) {
    items,
    columns,
    initialPageIndex = 0,
-    initialPageSize = 10,
+    initialPageSize = INITIAL_PAGE_SIZE,
    initialSortField = props.columns[0]?.field || '',
    initialSortDirection = 'asc',
-    hidePerPageOptions = true,
+    hidePerPageOptions = false,
    noItemsMessage,
    sortItems = true,
    sortFn = defaultSortFn,
@ -128,6 +131,7 @@ function UnoptimizedManagedTable<T>(props: Props<T>) {
      totalItemCount: items.length,
      pageIndex: page,
      pageSize,
+      pageSizeOptions: PAGE_SIZE_OPTIONS,
    };
  }, [hidePerPageOptions, items, page, pageSize, pagination]);

--- a/x-pack/plugins/apm/public/components/shared/transactions_table/get_columns.tsx
+++ b/x-pack/plugins/apm/public/components/shared/transactions_table/get_columns.tsx
@ -5,12 +5,7 @@
 * 2.0.
 */

-import {
-  EuiBasicTableColumn,
-  EuiFlexGroup,
-  EuiFlexItem,
-  RIGHT_ALIGNMENT,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, RIGHT_ALIGNMENT } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { ValuesType } from 'utility-types';
@ -25,6 +20,7 @@ import { APIReturnType } from '../../../services/rest/createCallApmApi';
 import { ImpactBar } from '../ImpactBar';
 import { TransactionDetailLink } from '../Links/apm/transaction_detail_link';
 import { ListMetric } from '../list_metric';
+import { ITableColumn } from '../managed_table';
 import { TruncateWithTooltip } from '../truncate_with_tooltip';
 import { getLatencyColumnLabel } from './get_latency_column_label';

@ -51,7 +47,7 @@ export function getColumns({
  comparisonEnabled?: boolean;
  shouldShowSparkPlots?: boolean;
  comparisonType?: TimeRangeComparisonType;
-}): Array<EuiBasicTableColumn<ServiceTransactionGroupItem>> {
+}): Array<ITableColumn<ServiceTransactionGroupItem>> {
  return [
    {
      field: 'name',
--- a/x-pack/plugins/apm/public/components/shared/transactions_table/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/transactions_table/index.tsx
@ -5,12 +5,7 @@
 * 2.0.
 */

-import {
-  EuiBasicTable,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiTitle,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { orderBy } from 'lodash';
 import React, { useState } from 'react';
@ -28,6 +23,7 @@ import { OverviewTableContainer } from '../overview_table_container';
 import { getColumns } from './get_columns';
 import { ElasticDocsLink } from '../Links/ElasticDocsLink';
 import { useBreakpoints } from '../../../hooks/use_breakpoints';
+import { ManagedTable } from '../managed_table';

 type ApiResponse =
  APIReturnType<'GET /internal/apm/services/{serviceName}/transactions/groups/main_statistics'>;
@ -60,6 +56,7 @@ interface Props {
  hideViewTransactionsLink?: boolean;
  isSingleColumn?: boolean;
  numberOfTransactionsPerPage?: number;
+  hidePerPageOptions?: boolean;
  showAggregationAccurateCallout?: boolean;
  environment: string;
  fixedHeight?: boolean;
@ -73,13 +70,14 @@ export function TransactionsTable({
  hideViewTransactionsLink = false,
  isSingleColumn = true,
  numberOfTransactionsPerPage = 5,
+  hidePerPageOptions = false,
  showAggregationAccurateCallout = false,
  environment,
  kuery,
  start,
  end,
 }: Props) {
-  const [tableOptions, setTableOptions] = useState<{
+  const [tableOptions] = useState<{
    pageIndex: number;
    sort: {
      direction: SortDirection;
@ -228,13 +226,6 @@ export function TransactionsTable({
  const isLoading = status === FETCH_STATUS.LOADING;
  const isNotInitiated = status === FETCH_STATUS.NOT_INITIATED;

-  const pagination = {
-    pageIndex,
-    pageSize: numberOfTransactionsPerPage,
-    totalItemCount: transactionGroupsTotalItems,
-    hidePerPageOptions: true,
-  };
-
  return (
    <EuiFlexGroup direction="column" gutterSize="s">
      <EuiFlexItem>
@ -309,7 +300,14 @@ export function TransactionsTable({
              transactionGroupsTotalItems === 0 && isNotInitiated
            }
          >
-            <EuiBasicTable
+            <ManagedTable
+              isLoading={isLoading}
+              error={status === FETCH_STATUS.FAILURE}
+              columns={columns}
+              items={transactionGroups}
+              initialSortField="impact"
+              initialSortDirection="desc"
+              initialPageSize={numberOfTransactionsPerPage}
              noItemsMessage={
                isLoading
                  ? i18n.translate('xpack.apm.transactionsTable.loading', {
@ -319,34 +317,7 @@ export function TransactionsTable({
                      defaultMessage: 'No transaction groups found',
                    })
              }
-              loading={isLoading}
-              error={
-                status === FETCH_STATUS.FAILURE
-                  ? i18n.translate('xpack.apm.transactionsTable.errorMessage', {
-                      defaultMessage: 'Failed to fetch',
-                    })
-                  : ''
-              }
-              items={transactionGroups}
-              columns={columns}
-              pagination={pagination}
-              sorting={{ sort: { field, direction } }}
-              onChange={(newTableOptions: {
-                page?: {
-                  index: number;
-                };
-                sort?: { field: string; direction: SortDirection };
-              }) => {
-                setTableOptions({
-                  pageIndex: newTableOptions.page?.index ?? 0,
-                  sort: newTableOptions.sort
-                    ? {
-                        field: newTableOptions.sort.field as SortField,
-                        direction: newTableOptions.sort.direction,
-                      }
-                    : DEFAULT_SORT,
-                });
-              }}
+              hidePerPageOptions={hidePerPageOptions}
            />
          </OverviewTableContainer>
        </EuiFlexItem>
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@ -6277,7 +6277,6 @@
    "xpack.apm.transactionsTable.cardinalityWarning.body": "一意のトランザクション名の数が構成された値{bucketSize}を超えています。エージェントを再構成し、類似したトランザクションをグループ化するか、{codeBlock}の値を増やしてください。",
    "xpack.apm.transactionsTable.cardinalityWarning.docsLink": "詳細はドキュメントをご覧ください",
    "xpack.apm.transactionsTable.cardinalityWarning.title": "このビューには、報告されたトランザクションのサブセットが表示されます。",
-    "xpack.apm.transactionsTable.errorMessage": "取得できませんでした",
    "xpack.apm.transactionsTable.linkText": "トランザクションを表示",
    "xpack.apm.transactionsTable.loading": "読み込み中...",
    "xpack.apm.transactionsTable.noResults": "トランザクショングループが見つかりません",
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@ -6321,7 +6321,6 @@
    "xpack.apm.transactionsTable.cardinalityWarning.body": "唯一事务名称的数目超过 {bucketSize} 的已配置值。尝试重新配置您的代理以对类似的事务分组或增大 {codeBlock} 的值",
    "xpack.apm.transactionsTable.cardinalityWarning.docsLink": "在文档中了解详情",
    "xpack.apm.transactionsTable.cardinalityWarning.title": "此视图显示已报告事务的子集。",
-    "xpack.apm.transactionsTable.errorMessage": "无法提取",
    "xpack.apm.transactionsTable.linkText": "查看事务",
    "xpack.apm.transactionsTable.loading": "正在加载……",
    "xpack.apm.transactionsTable.noResults": "未找到事务组",