Skip to content

[APM] Migrate transactions table to TransactionsTable from @kbn/apm-ui-shared #272088

@iblancof

Description

@iblancof

Summary

The shared TransactionsTable component was added to @kbn/apm-ui-shared in #XXXXX (TODO ADD LINK). It covers all the visual concerns of the current APM transactions table: columns, sparklines, search with server-fetch fallback, cardinality warning, header actions, and EBT click tracking.

The APM plugin has its own implementation at x-pack/.../apm/public/components/shared/transactions_table/ that should be removed once each of its callers has been migrated to the shared component.

What needs to happen

The current APM table is a domain component: it owns data fetching, alerting/SLO flyouts, and URL state alongside rendering. The shared component is purely presentational. Migration means splitting those concerns so each caller owns the data layer and passes items down.

Files to delete after migration

  • x-pack/solutions/observability/plugins/apm/public/components/shared/transactions_table/index.tsx
  • x-pack/solutions/observability/plugins/apm/public/components/shared/transactions_table/get_columns.tsx
  • x-pack/solutions/observability/plugins/apm/public/components/shared/transactions_table/get_transaction_actions.ts
  • x-pack/solutions/observability/plugins/apm/public/components/shared/transactions_table/get_latency_column_label.ts
  • x-pack/solutions/observability/plugins/apm/public/components/shared/transactions_table/ebt_constants.ts

Callers to migrate (4)

  • components/app/transaction_overview/index.tsx
  • components/app/service_overview/apm_overview/index.tsx
  • components/app/mobile/transaction_overview/transaction_overview_tabs/transactions_tab.tsx
  • components/app/mobile/service_overview/index.tsx

Note: service_overview_instances_table/get_columns.tsx imports getLatencyColumnLabel directly — this should be replaced with the shared component's internal label logic or a local copy.

Work per caller

Each caller needs to:

  1. Move data fetching out of the table component and into the caller (useFetcher calls for main statistics and detailed statistics).
  2. Pass items: TransactionGroup[] to the shared TransactionsTable.
  3. Wire actionsColumn using the existing useTransactionActions() hook, passing it via the columns prop.
  4. Move the alerting flyout (AlertingFlyout) into the caller and trigger it via columnInteractions.alerts.onClick.
  5. Move the SLO flyout into the caller in the same way.
  6. Handle URL-persisted table state (saveTableOptionsToUrl) in the caller if needed — two of the four callers use this today.

Acceptance criteria

  • All 4 callers render identically before and after migration (columns, sparklines, actions, alerts badge, cardinality warning).
  • Alerting and SLO flyouts still open from the alerts badge and row actions menu.
  • URL state persistence works for callers that used saveTableOptionsToUrl.
  • The 5 files listed above are deleted with no remaining imports.
  • No regressions in existing APM Jest or Scout tests.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions