[8.x] [APM] Span links: add tooltip explaining the reason for missing linked span details (#216487) (#216958)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[APM] Span links: add tooltip explaining the reason for missing
linked span details
(#216487)](https://github.com/elastic/kibana/pull/216487)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Milosz
Marcinkowski","email":"38698566+miloszmarcinkowski@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-04-01T14:39:00Z","message":"[APM]
Span links: add tooltip explaining the reason for missing linked span
details (#216487)\n\nCloses #214558\n\n### Summary\n\nWhen fetching
details for the Span Links flyout, it is possible that the\nparent span
has not yet been ingested, resulting in an 'Unknown' service\nname which
might be misleading to users. To avoid confusion, we decided\nto add
tooltip to the icon with explanation.\n\n<img width=\"2558\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/9e29544b-28df-43b2-9987-24c6d90c481e\"\n/>\n\n###
How to test:\n- use edge-oblt data\n- in Applications go to
`accountingservice` service\n- select `orders receive` transaction\n- in
trace waterfall click `Span Links`
button","sha":"e7edff9ddcd5e7d80903c8c3139eab87d0aadc72","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","backport:prev-minor","backport:prev-major","Team:obs-ux-infra_services","v9.1.0"],"title":"[APM]
Span links: add tooltip explaining the reason for missing linked span
details","number":216487,"url":"https://github.com/elastic/kibana/pull/216487","mergeCommit":{"message":"[APM]
Span links: add tooltip explaining the reason for missing linked span
details (#216487)\n\nCloses #214558\n\n### Summary\n\nWhen fetching
details for the Span Links flyout, it is possible that the\nparent span
has not yet been ingested, resulting in an 'Unknown' service\nname which
might be misleading to users. To avoid confusion, we decided\nto add
tooltip to the icon with explanation.\n\n<img width=\"2558\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/9e29544b-28df-43b2-9987-24c6d90c481e\"\n/>\n\n###
How to test:\n- use edge-oblt data\n- in Applications go to
`accountingservice` service\n- select `orders receive` transaction\n- in
trace waterfall click `Span Links`
button","sha":"e7edff9ddcd5e7d80903c8c3139eab87d0aadc72"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/216660","number":216660,"state":"MERGED","mergeCommit":{"sha":"b587f643d0bcc489d7a11886a81296723da00616","message":"[9.0]
[APM] Span links: add tooltip explaining the reason for missing linked
span details (#216487) (#216660)\n\n# Backport\n\nThis will backport the
following commits from `main` to `9.0`:\n- [[APM] Span links: add
tooltip explaining the reason for missing\nlinked span
details\n(#216487)](https://github.com/elastic/kibana/pull/216487)\n\n\n\n###
Questions ?\nPlease refer to the [Backport
tool\ndocumentation](https://github.com/sorenlouv/backport)\n\n\n\nCo-authored-by:
Milosz Marcinkowski
<38698566+miloszmarcinkowski@users.noreply.github.com>"}},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/216487","number":216487,"mergeCommit":{"message":"[APM]
Span links: add tooltip explaining the reason for missing linked span
details (#216487)\n\nCloses #214558\n\n### Summary\n\nWhen fetching
details for the Span Links flyout, it is possible that the\nparent span
has not yet been ingested, resulting in an 'Unknown' service\nname which
might be misleading to users. To avoid confusion, we decided\nto add
tooltip to the icon with explanation.\n\n<img width=\"2558\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/9e29544b-28df-43b2-9987-24c6d90c481e\"\n/>\n\n###
How to test:\n- use edge-oblt data\n- in Applications go to
`accountingservice` service\n- select `orders receive` transaction\n- in
trace waterfall click `Span Links`
button","sha":"e7edff9ddcd5e7d80903c8c3139eab87d0aadc72"}}]}]
BACKPORT-->

Co-authored-by: Milosz Marcinkowski <38698566+miloszmarcinkowski@users.noreply.github.com>
This commit is contained in:
Kibana Machine 2025-04-03 11:36:03 +02:00 committed by GitHub
parent c26e868c90
commit fd90263900
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -12,6 +12,7 @@ import {
EuiFlexGroup,
EuiFlexItem,
EuiIcon,
EuiIconTip,
EuiInMemoryTable,
EuiLink,
EuiPopover,
@ -66,8 +67,22 @@ export function SpanLinksTable({ items }: Props) {
}
return (
<EuiFlexGroup alignItems="center" gutterSize="xs" responsive={false}>
<EuiFlexItem grow={false}>
<EuiIcon type="stopSlash" size="m" color="subdued" />
<EuiFlexItem grow={false} css={{ lineHeight: 1 }}>
<EuiIconTip
type="stopSlash"
size="m"
color="subdued"
aria-label={i18n.translate(
'xpack.apm.spanLinks.table.serviceName.unknown.tooltip.ariaLabel',
{
defaultMessage: 'Icon tooltip for unknown service name',
}
)}
content={i18n.translate('xpack.apm.spanLinks.table.serviceName.unknown.tooltip', {
defaultMessage:
'This span has not yet been completed, please check again in a while.',
})}
/>
</EuiFlexItem>
<EuiFlexItem>
{i18n.translate('xpack.apm.spanLinks.table.serviceName.unknown', {
@ -134,7 +149,9 @@ export function SpanLinksTable({ items }: Props) {
button={
<EuiButtonIcon
data-test-subj="apmColumnsButton"
aria-label="Edit"
aria-label={i18n.translate('xpack.apm.spanLinks.table.actions.edit.ariaLabel', {
defaultMessage: 'Edit',
})}
iconType="boxesHorizontal"
onClick={() => {
setIdActionMenuOpen(id);
@ -165,6 +182,10 @@ export function SpanLinksTable({ items }: Props) {
<EuiCopy textToCopy={traceId}>
{(copy) => (
<EuiButtonEmpty
aria-label={i18n.translate(
'xpack.apm.spanLinks.table.actions.copyParentTraceId.ariaLabel',
{ defaultMessage: 'Copy parent trace id' }
)}
data-test-subj="apmColumnsCopyParentTraceIdButton"
onClick={() => {
copy();
@ -198,6 +219,12 @@ export function SpanLinksTable({ items }: Props) {
<EuiCopy textToCopy={spanId}>
{(copy) => (
<EuiButtonEmpty
aria-label={i18n.translate(
'xpack.apm.spanLinks.table.actions.copySpanId.ariaLabel',
{
defaultMessage: 'Copy span id',
}
)}
data-test-subj="apmColumnsCopySpanIdButton"
onClick={() => {
copy();