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:
- Move data fetching out of the table component and into the caller (
useFetcher calls for main statistics and detailed statistics).
- Pass
items: TransactionGroup[] to the shared TransactionsTable.
- Wire
actionsColumn using the existing useTransactionActions() hook, passing it via the columns prop.
- Move the alerting flyout (
AlertingFlyout) into the caller and trigger it via columnInteractions.alerts.onClick.
- Move the SLO flyout into the caller in the same way.
- Handle URL-persisted table state (
saveTableOptionsToUrl) in the caller if needed — two of the four callers use this today.
Acceptance criteria
Summary
The shared
TransactionsTablecomponent was added to@kbn/apm-ui-sharedin #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
itemsdown.Files to delete after migration
x-pack/solutions/observability/plugins/apm/public/components/shared/transactions_table/index.tsxx-pack/solutions/observability/plugins/apm/public/components/shared/transactions_table/get_columns.tsxx-pack/solutions/observability/plugins/apm/public/components/shared/transactions_table/get_transaction_actions.tsx-pack/solutions/observability/plugins/apm/public/components/shared/transactions_table/get_latency_column_label.tsx-pack/solutions/observability/plugins/apm/public/components/shared/transactions_table/ebt_constants.tsCallers to migrate (4)
components/app/transaction_overview/index.tsxcomponents/app/service_overview/apm_overview/index.tsxcomponents/app/mobile/transaction_overview/transaction_overview_tabs/transactions_tab.tsxcomponents/app/mobile/service_overview/index.tsxNote:
service_overview_instances_table/get_columns.tsximportsgetLatencyColumnLabeldirectly — this should be replaced with the shared component's internal label logic or a local copy.Work per caller
Each caller needs to:
useFetchercalls for main statistics and detailed statistics).items: TransactionGroup[]to the sharedTransactionsTable.actionsColumnusing the existinguseTransactionActions()hook, passing it via thecolumnsprop.AlertingFlyout) into the caller and trigger it viacolumnInteractions.alerts.onClick.saveTableOptionsToUrl) in the caller if needed — two of the four callers use this today.Acceptance criteria
saveTableOptionsToUrl.