From ec25cdb31ae15c08455ec04b2ce0efb68ca8dd04 Mon Sep 17 00:00:00 2001 From: Sergi Romeu Date: Wed, 26 Mar 2025 13:58:34 +0100 Subject: [PATCH] [A11y][APM] Use `nameTooltip` api for dependencies tables (#215940) ## Summary Closes https://github.com/elastic/kibana/issues/195041 This PR addresses the issue where the table name's tooltip cannot be focused with keyboard. ## Video https://github.com/user-attachments/assets/bec887fd-5a3b-4fa9-b84b-17a1a4187fbc (cherry picked from commit 35f8739b9a1a8f9bc231161afa39118f7ff4fbaa) # Conflicts: # x-pack/plugins/observability_solution/apm/public/components/app/dependency_detail_operations/dependency_detail_operations_list/index.tsx # x-pack/plugins/observability_solution/apm/public/components/shared/dependencies_table/get_span_metric_columns.tsx # x-pack/plugins/observability_solution/apm/public/components/shared/dependencies_table/index.tsx --- .../index.tsx | 2 +- .../get_span_metric_columns.tsx | 60 +++++++------------ .../shared/dependencies_table/index.tsx | 2 +- .../components/shared/managed_table/index.tsx | 1 + 4 files changed, 24 insertions(+), 41 deletions(-) diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/dependency_detail_operations/dependency_detail_operations_list/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/dependency_detail_operations/dependency_detail_operations_list/index.tsx index 9d77e1807c2f5..490a0383c71cd 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/dependency_detail_operations/dependency_detail_operations_list/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/dependency_detail_operations/dependency_detail_operations_list/index.tsx @@ -19,7 +19,7 @@ import { SpanMetricGroup, } from '../../../shared/dependencies_table/get_span_metric_columns'; import { EmptyMessage } from '../../../shared/empty_message'; -import { ITableColumn, ManagedTable } from '../../../shared/managed_table'; +import { type ITableColumn, ManagedTable } from '../../../shared/managed_table'; import { getComparisonEnabled } from '../../../shared/time_comparison/get_comparison_enabled'; import { TruncateWithTooltip } from '../../../shared/truncate_with_tooltip'; import { DependencyOperationDetailLink } from '../../dependency_operation_detail_view/dependency_operation_detail_link'; diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/dependencies_table/get_span_metric_columns.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/dependencies_table/get_span_metric_columns.tsx index 0cfa1e85d66ba..2383af7807908 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/dependencies_table/get_span_metric_columns.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/dependencies_table/get_span_metric_columns.tsx @@ -5,12 +5,11 @@ * 2.0. */ import React from 'react'; -import { EuiFlexGroup, EuiFlexItem, EuiIconTip, RIGHT_ALIGNMENT } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, RIGHT_ALIGNMENT } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { ChartType, getTimeSeriesColor } from '../charts/helper/get_timeseries_color'; import { ListMetric } from '../list_metric'; -import { ITableColumn } from '../managed_table'; -import { FETCH_STATUS, isPending } from '../../../hooks/use_fetcher'; +import { type FETCH_STATUS, isPending } from '../../../hooks/use_fetcher'; import { asMillisecondDuration, asPercent, @@ -19,6 +18,7 @@ import { import { Coordinate } from '../../../../typings/timeseries'; import { ImpactBar } from '../impact_bar'; import { isFiniteNumber } from '../../../../common/utils/is_finite_number'; +import type { ITableColumn } from '../managed_table'; export interface SpanMetricGroup { latency: number | null; @@ -106,24 +106,15 @@ export function getSpanMetricColumns({ }, { field: 'failureRate', - name: ( - <> - {i18n.translate('xpack.apm.dependenciesTable.columnErrorRate', { - defaultMessage: 'Failed transaction rate', - })} -   - - - ), + name: i18n.translate('xpack.apm.dependenciesTable.columnErrorRate', { + defaultMessage: 'Failed transaction rate', + }), + nameTooltip: { + content: i18n.translate('xpack.apm.dependenciesTable.columnErrorRateTip', { + defaultMessage: + "The percentage of failed transactions for the selected service. HTTP server transactions with a 4xx status code (client error) aren't considered failures because the caller, not the server, caused the failure.", + }), + }, align: RIGHT_ALIGNMENT, render: (_, { failureRate, currentStats, previousStats }) => { const { currentPeriodColor, previousPeriodColor } = getTimeSeriesColor( @@ -147,24 +138,15 @@ export function getSpanMetricColumns({ }, { field: 'impact', - name: ( - <> - {i18n.translate('xpack.apm.dependenciesTable.columnImpact', { - defaultMessage: 'Impact', - })} -   - - - ), + name: i18n.translate('xpack.apm.dependenciesTable.columnImpact', { + defaultMessage: 'Impact', + }), + nameTooltip: { + content: i18n.translate('xpack.apm.dependenciesTable.columnImpactTip', { + defaultMessage: + 'The most used and slowest endpoints in your service. Calculated by multiplying latency by throughput.', + }), + }, align: RIGHT_ALIGNMENT, render: (_, { impact, previousStats }) => { return ( diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/dependencies_table/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/dependencies_table/index.tsx index 7ab48c168dcd5..ec2d45631e6aa 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/dependencies_table/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/dependencies_table/index.tsx @@ -12,7 +12,7 @@ import type { ConnectionStatsItemWithComparisonData } from '../../../../common/c import { useBreakpoints } from '../../../hooks/use_breakpoints'; import { FETCH_STATUS } from '../../../hooks/use_fetcher'; import { EmptyMessage } from '../empty_message'; -import { ITableColumn, ManagedTable } from '../managed_table'; +import { type ITableColumn, ManagedTable } from '../managed_table'; import { OverviewTableContainer } from '../overview_table_container'; import { TruncateWithTooltip } from '../truncate_with_tooltip'; import { getSpanMetricColumns, SpanMetricGroup } from './get_span_metric_columns'; diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/managed_table/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/managed_table/index.tsx index 908be6a16dcaa..caf4b46c21bfe 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/managed_table/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/managed_table/index.tsx @@ -34,6 +34,7 @@ export interface ITableColumn { width?: string; sortable?: boolean; truncateText?: boolean; + nameTooltip?: EuiBasicTableColumn['nameTooltip']; render?: (value: any, item: T) => unknown; }