Skip to content

[Discover][APM] Add link to view related errors in Discover from the full-screen waterfall #224033

Merged
iblancof merged 106 commits intoelastic:mainfrom
iblancof:222591-discoverapm-add-link-to-related-errors-in-the-full-screen-waterfall-2
Jun 18, 2025
Merged

[Discover][APM] Add link to view related errors in Discover from the full-screen waterfall #224033
iblancof merged 106 commits intoelastic:mainfrom
iblancof:222591-discoverapm-add-link-to-related-errors-in-the-full-screen-waterfall-2

Conversation

@iblancof
Copy link
Contributor

@iblancof iblancof commented Jun 16, 2025 •
edited by kibanamachine
Loading

Summary

Closes #222591

This PR adds the link to the “View related error” / "View X related errors" badge in the full-screen waterfall.

Unlike the same badge in APM, here it’s handled as a native href, so the user keeps the option to open it in a new tab—avoiding loss of context from Discover if they prefer.

Highlights

  • Created ApmErrorsContextService to access the configured APM error indices.

    • I had considered merging this with TracesContextService into a shared ApmContextService (for both traces and errors), but decided to keep them separate to avoid mixing methods and logic. Totally open to revisit this if anyone feels that a shared service would make things cleaner or more maintainable.

  • Created DataSourcesProvider to easily access the relevant indices within our flyouts.

  • Built the Discover URL using the locator, preparing an ESQL query to filter by span.id and trace.id across both error and log indices.

  • Added getRelatedErrorsHref as a prop to TraceWaterfallEmbeddable, allowing us to pass the errors URL directly.

    • Why this approach instead of triggering a callback to the parent? We wanted to preserve native link behavior (e.g., open in new tab), which wouldn't work if navigation was handled via navigateTo from the parent.

  • Created EmbeddableRelatedErrors to handle the badge link.

    • Agreed with the EUI team to cast the href as any, since due to the component nesting in the waterfall, it was the cleanest way to make the native link behavior work in this context.

  • Created ExitFullScreenButton wrapper to enable exiting full-screen mode with the ESC key.

Screen.Recording.2025-06-16.at.10.47.55.mov

iblancof added 30 commits May 21, 2025 12:35
@iblancof
Add onNodeClick prop to ApmTraceWaterfallEmbeddable for enhanced inte…
42be2cd 
…ractivity
@iblancof
Add SPAN_ID_FIELD to useRootTransaction hook
faa07d7
@iblancof
Create useSpan hook
03353ef
@iblancof
Add showWaterfall to TransactionOverview
67dd7cb
@iblancof
Add RootTransactionProvider and showWaterfall to SpanOverview
36bfe84
@iblancof
Use showWaterfall in Trace
6ec5a9b
@iblancof
Change SpanOverview and TransactionOverview props to omit dataView
634734f
@iblancof
Add showActions prop to FieldWithActions, SpanSummaryField, and Trans…
740d507 
…actionSummaryField components
@iblancof
Add showActions prop to SpanOverview and TransactionOverview components
4c08b7e
@iblancof
Merge branch 'main' into 217068-discoverapm-poc-to-expand-trace-water…
db85098 
…fall-to-full-screen
@iblancof
Create base SpanFlyout
12761b7
@iblancof
Create base FullScreenWaterfall
123cfb4
@iblancof
Add FullScreenWaterfall to Trace
4dafcf1
@iblancof
Merge branch 'main' into 217068-discoverapm-poc-to-expand-trace-water…
c79ce6b 
…fall-to-full-screen
@iblancof
Add dataView prop to Trace, SpanOverview, and TransactionOverview com…
4e32b0a 
…ponents
@iblancof
Update useSpan to include docId
71e107d
@iblancof
Add dataView prop to FullScreenWaterfall component
6e587da
@iblancof
Add tracesIndexPattern prop to FullScreenWaterfall, Trace, and Transa…
f43966e 
…ctionOverview components
@iblancof
Add tabs to SpanFlyout
024c3d7
@iblancof
Rename transactionIndexPattern to tracesIndexPattern in Doc Viewer co…
63e5171 
…mponents
@iblancof
Fix prop name in SpanOverview component to use tracesIndexPattern
a5ecb78
@iblancof
Add showActions prop to SpanSummaryTitle component for conditional re…
8fdab6d 
…ndering
@iblancof
Removed unused container in SpanSummaryTitle
25c47a1
@iblancof
Add showActions prop to TransactionSummaryTitle component for conditi…
fa4e0d3 
…onal rendering
@iblancof
Merge branch 'main' into 217068-discoverapm-poc-to-expand-trace-water…
c4e4eb5 
…fall-to-full-screen
@iblancof
Add showActions prop to Trace component for conditional rendering
024baaf
@iblancof
Add aria-label to EuiIconTip for improved accessibility
2f83732
@iblancof
Add metadata short description in FieldWithActions
4225827
@iblancof
Merge branch 'main' into 217068-discoverapm-poc-to-expand-trace-water…
1256f2d 
…fall-to-full-screen
@iblancof
Add short description for span.destination.service.resource field
8e5b983
@iblancof iblancof self-assigned this Jun 16, 2025
@iblancof iblancof requested a review from a team June 16, 2025 09:26
@iblancof iblancof requested a review from a team as a code owner June 16, 2025 09:26
@iblancof iblancof added release_note:skip Skip the PR/issue when compiling release notes Team:obs-ux-infra_services - DEPRECATED DEPRECATED - Use Team:obs-presentation. backport:version Backport to applied version labels v9.1.0 v8.19.0 labels Jun 16, 2025
@elasticmachine
Copy link
Contributor

elasticmachine commented Jun 16, 2025

Pinging @elastic/obs-ux-infra_services-team (Team:obs-ux-infra_services)

davismcphee
davismcphee approved these changes Jun 16, 2025
View reviewed changes
Copy link
Contributor

@davismcphee davismcphee left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code-only review, Data Discovery changes LGTM 👍

@elasticmachine
Copy link
Contributor

elasticmachine commented Jun 17, 2025

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
apm 1924 1926 +2
canvas 1377 1379 +2
cloudSecurityPosture 706 708 +2
datasetQuality 440 442 +2
discover 1317 1319 +2
esqlDataGrid 438 440 +2
eventAnnotationListing 593 595 +2
lens 1438 1440 +2
logsShared 343 345 +2
observability 1311 1313 +2
observabilityLogsExplorer 82 84 +2
searchPlayground 352 354 +2
securitySolution 7621 7623 +2
slo 1180 1182 +2
unifiedDocViewer 327 331 +4
total +32

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id before after diff
@kbn/discover-utils 308 312 +4

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
apm 2.6MB 2.6MB +865.0B
discover 1.1MB 1.1MB +567.0B
unifiedDocViewer 223.0KB 223.9KB +938.0B
total +2.3KB

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id before after diff
@kbn/discover-utils 4 5 +1
Unknown metric groups

API count

id before after diff
@kbn/discover-utils 358 362 +4

ESLint disabled line counts

id before after diff
apm 70 71 +1

Total ESLint disabled count

id before after diff
apm 83 84 +1

History

cc @iblancof

miloszmarcinkowski
miloszmarcinkowski approved these changes Jun 18, 2025
View reviewed changes
Copy link
Contributor

@miloszmarcinkowski miloszmarcinkowski left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for adding exit on ESC and error badge. Once trace flyouts become persistent in the url we can think of replacing href with locator to avoid page refresh.

@iblancof
Copy link
Contributor Author

iblancof commented Jun 18, 2025

Thanks for adding exit on ESC and error badge. Once trace flyouts become persistent in the url we can think of replacing href with locator to avoid page refresh.

We're sending users to Discover just as a temporary fix.
The next step will be to show the error info in a flyout on top of the waterfall, like we already do with spans, so we won’t get that unwanted refresh anymore, even if the flyouts aren’t persisted in the URL.

@iblancof iblancof merged commit 87cb768 into elastic:main Jun 18, 2025
10 checks passed
@kibanamachine
Copy link
Contributor

kibanamachine commented Jun 18, 2025

Starting backport for target branches: 8.19

https://github.com/elastic/kibana/actions/runs/15731070021

@kibanamachine
Copy link
Contributor

kibanamachine commented Jun 18, 2025

💔 All backports failed

Status Branch Result
❌ 8.19 Backport failed because of merge conflicts

Manual backport

To create the backport manually run:

node scripts/backport --pr 224033

Questions ?

Please refer to the Backport tool documentation

@kibanamachine kibanamachine mentioned this pull request Jun 18, 2025
Merged
1 task
@iblancof iblancof mentioned this pull request Jun 18, 2025
Merged
@iblancof
Copy link
Contributor Author

iblancof commented Jun 18, 2025

💚 All backports created successfully

Status Branch Result
✅ 8.19

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

iblancof added a commit to iblancof/kibana that referenced this pull request Jun 18, 2025
@iblancof
[Discover][APM] Add link to view related errors in Discover from the …
119f388 
…full-screen waterfall (elastic#224033)

## Summary

Closes elastic#222591

This PR adds the link to the “View related error” / "View X related
errors" badge in the full-screen waterfall.

Unlike the same badge in APM, here it’s handled as a native `href`, so
the user keeps the option to open it in a new tab—avoiding loss of
context from Discover if they prefer.

 **Highlights**

* Created `ApmErrorsContextService` to access the configured APM error
indices.

* I had considered merging this with `TracesContextService` into a
shared `ApmContextService` (for both traces and errors), but decided to
keep them separate to avoid mixing methods and logic. Totally open to
revisit this if anyone feels that a shared service would make things
cleaner or more maintainable.

* Created `DataSourcesProvider` to easily access the relevant indices
within our flyouts.

* Built the Discover URL using the locator, preparing an ESQL query to
filter by `span.id` and `trace.id` across both error and log indices.

* Added `getRelatedErrorsHref` as a prop to `TraceWaterfallEmbeddable`,
allowing us to pass the errors URL directly.

* Why this approach instead of triggering a callback to the parent? We
wanted to preserve native link behavior (e.g., open in new tab), which
wouldn't work if navigation was handled via `navigateTo` from the
parent.

* Created `EmbeddableRelatedErrors` to handle the badge link.

* Agreed with the EUI team to cast the `href` as `any`, since due to the
component nesting in the waterfall, it was the cleanest way to make the
native link behavior work in this context.

* Created `ExitFullScreenButton` wrapper to enable exiting full-screen
mode with the `ESC` key.

https://github.com/user-attachments/assets/d3e476ae-ee10-410f-b003-02521dc35e13

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Carlos Crespo <crespocarlos@users.noreply.github.com>
Co-authored-by: Milosz Marcinkowski <38698566+miloszmarcinkowski@users.noreply.github.com>
(cherry picked from commit 87cb768)

# Conflicts:
#	x-pack/solutions/observability/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/accordion_waterfall.tsx
iblancof added a commit that referenced this pull request Jun 18, 2025
@iblancof @kibanamachine
[8.19] [Discover][APM] Add link to view related errors in Discover fr…
32b8770 
…om the full-screen waterfall (#224033) (#224422)

# Backport

This will backport the following commits from `main` to `8.19`:
- [[Discover][APM] Add link to view related errors in Discover from the
full-screen waterfall
(#224033)](#224033)

<!--- Backport version: 10.0.1 -->

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

<!--BACKPORT [{"author":{"name":"Irene
Blanco","email":"irene.blanco@elastic.co"},"sourceCommit":{"committedDate":"2025-06-18T11:02:04Z","message":"[Discover][APM]
Add link to view related errors in Discover from the full-screen
waterfall (#224033)\n\n## Summary\n\nCloses
https://github.com/elastic/kibana/issues/222591\n\nThis PR adds the link
to the “View related error” / \"View X related\nerrors\" badge in the
full-screen waterfall.\n\nUnlike the same badge in APM, here it’s
handled as a native `href`, so\nthe user keeps the option to open it in
a new tab—avoiding loss of\ncontext from Discover if they prefer.\n\n
**Highlights**\n\n* Created `ApmErrorsContextService` to access the
configured APM error\nindices.\n\n* I had considered merging this with
`TracesContextService` into a\nshared `ApmContextService` (for both
traces and errors), but decided to\nkeep them separate to avoid mixing
methods and logic. Totally open to\nrevisit this if anyone feels that a
shared service would make things\ncleaner or more maintainable.\n\n*
Created `DataSourcesProvider` to easily access the relevant
indices\nwithin our flyouts.\n\n* Built the Discover URL using the
locator, preparing an ESQL query to\nfilter by `span.id` and `trace.id`
across both error and log indices.\n\n* Added `getRelatedErrorsHref` as
a prop to `TraceWaterfallEmbeddable`,\nallowing us to pass the errors
URL directly.\n\n* Why this approach instead of triggering a callback to
the parent? We\nwanted to preserve native link behavior (e.g., open in
new tab), which\nwouldn't work if navigation was handled via
`navigateTo` from the\nparent.\n\n* Created `EmbeddableRelatedErrors` to
handle the badge link.\n\n* Agreed with the EUI team to cast the `href`
as `any`, since due to the\ncomponent nesting in the waterfall, it was
the cleanest way to make the\nnative link behavior work in this
context.\n\n* Created `ExitFullScreenButton` wrapper to enable exiting
full-screen\nmode with the `ESC`
key.\n\n\n\nhttps://github.com/user-attachments/assets/d3e476ae-ee10-410f-b003-02521dc35e13\n\n---------\n\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by:
Carlos Crespo <crespocarlos@users.noreply.github.com>\nCo-authored-by:
Milosz Marcinkowski
<38698566+miloszmarcinkowski@users.noreply.github.com>","sha":"87cb7685888f21b0f9d2a2467f47701364535b44","branchLabelMapping":{"^v9.1.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:obs-ux-infra_services","backport:version","v9.1.0","v8.19.0"],"title":"[Discover][APM]
Add link to view related errors in Discover from the full-screen
waterfall
","number":224033,"url":"https://github.com/elastic/kibana/pull/224033","mergeCommit":{"message":"[Discover][APM]
Add link to view related errors in Discover from the full-screen
waterfall (#224033)\n\n## Summary\n\nCloses
https://github.com/elastic/kibana/issues/222591\n\nThis PR adds the link
to the “View related error” / \"View X related\nerrors\" badge in the
full-screen waterfall.\n\nUnlike the same badge in APM, here it’s
handled as a native `href`, so\nthe user keeps the option to open it in
a new tab—avoiding loss of\ncontext from Discover if they prefer.\n\n
**Highlights**\n\n* Created `ApmErrorsContextService` to access the
configured APM error\nindices.\n\n* I had considered merging this with
`TracesContextService` into a\nshared `ApmContextService` (for both
traces and errors), but decided to\nkeep them separate to avoid mixing
methods and logic. Totally open to\nrevisit this if anyone feels that a
shared service would make things\ncleaner or more maintainable.\n\n*
Created `DataSourcesProvider` to easily access the relevant
indices\nwithin our flyouts.\n\n* Built the Discover URL using the
locator, preparing an ESQL query to\nfilter by `span.id` and `trace.id`
across both error and log indices.\n\n* Added `getRelatedErrorsHref` as
a prop to `TraceWaterfallEmbeddable`,\nallowing us to pass the errors
URL directly.\n\n* Why this approach instead of triggering a callback to
the parent? We\nwanted to preserve native link behavior (e.g., open in
new tab), which\nwouldn't work if navigation was handled via
`navigateTo` from the\nparent.\n\n* Created `EmbeddableRelatedErrors` to
handle the badge link.\n\n* Agreed with the EUI team to cast the `href`
as `any`, since due to the\ncomponent nesting in the waterfall, it was
the cleanest way to make the\nnative link behavior work in this
context.\n\n* Created `ExitFullScreenButton` wrapper to enable exiting
full-screen\nmode with the `ESC`
key.\n\n\n\nhttps://github.com/user-attachments/assets/d3e476ae-ee10-410f-b003-02521dc35e13\n\n---------\n\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by:
Carlos Crespo <crespocarlos@users.noreply.github.com>\nCo-authored-by:
Milosz Marcinkowski
<38698566+miloszmarcinkowski@users.noreply.github.com>","sha":"87cb7685888f21b0f9d2a2467f47701364535b44"}},"sourceBranch":"main","suggestedTargetBranches":["8.19"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/224033","number":224033,"mergeCommit":{"message":"[Discover][APM]
Add link to view related errors in Discover from the full-screen
waterfall (#224033)\n\n## Summary\n\nCloses
https://github.com/elastic/kibana/issues/222591\n\nThis PR adds the link
to the “View related error” / \"View X related\nerrors\" badge in the
full-screen waterfall.\n\nUnlike the same badge in APM, here it’s
handled as a native `href`, so\nthe user keeps the option to open it in
a new tab—avoiding loss of\ncontext from Discover if they prefer.\n\n
**Highlights**\n\n* Created `ApmErrorsContextService` to access the
configured APM error\nindices.\n\n* I had considered merging this with
`TracesContextService` into a\nshared `ApmContextService` (for both
traces and errors), but decided to\nkeep them separate to avoid mixing
methods and logic. Totally open to\nrevisit this if anyone feels that a
shared service would make things\ncleaner or more maintainable.\n\n*
Created `DataSourcesProvider` to easily access the relevant
indices\nwithin our flyouts.\n\n* Built the Discover URL using the
locator, preparing an ESQL query to\nfilter by `span.id` and `trace.id`
across both error and log indices.\n\n* Added `getRelatedErrorsHref` as
a prop to `TraceWaterfallEmbeddable`,\nallowing us to pass the errors
URL directly.\n\n* Why this approach instead of triggering a callback to
the parent? We\nwanted to preserve native link behavior (e.g., open in
new tab), which\nwouldn't work if navigation was handled via
`navigateTo` from the\nparent.\n\n* Created `EmbeddableRelatedErrors` to
handle the badge link.\n\n* Agreed with the EUI team to cast the `href`
as `any`, since due to the\ncomponent nesting in the waterfall, it was
the cleanest way to make the\nnative link behavior work in this
context.\n\n* Created `ExitFullScreenButton` wrapper to enable exiting
full-screen\nmode with the `ESC`
key.\n\n\n\nhttps://github.com/user-attachments/assets/d3e476ae-ee10-410f-b003-02521dc35e13\n\n---------\n\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by:
Carlos Crespo <crespocarlos@users.noreply.github.com>\nCo-authored-by:
Milosz Marcinkowski
<38698566+miloszmarcinkowski@users.noreply.github.com>","sha":"87cb7685888f21b0f9d2a2467f47701364535b44"}},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
@iblancof iblancof deleted the 222591-discoverapm-add-link-to-related-errors-in-the-full-screen-waterfall-2 branch July 7, 2025 08:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@davismcphee davismcphee davismcphee approved these changes

@miloszmarcinkowski miloszmarcinkowski miloszmarcinkowski approved these changes

Assignees

@iblancof iblancof

Labels

backport:version Backport to applied version labels release_note:skip Skip the PR/issue when compiling release notes Team:obs-ux-infra_services - DEPRECATED DEPRECATED - Use Team:obs-presentation. v8.19.0 v9.1.0

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Discover][APM] Add link to related errors in the full screen waterfall

5 participants

@iblancof @elasticmachine @kibanamachine @davismcphee @miloszmarcinkowski