[APM] Improve user journey from APM UI to Discover while preserving context by rmyz · Pull Request #232361 · elastic/kibana

rmyz · 2025-08-20T10:16:23Z

Summary

This PR improves the navigation from APM UI to Discover regarding the traces flow.
When navigating to Discover, the user will be able to see an ES|QL query preserving the context they had in APM UI.

Example of the new logic working:

Kapture.2025-08-27.at.15.19.13.mp4

Modified pages:

Service -> transaction group -> trace samples
Backend dependency -> Operation -> trace samples
Service -> transaction -> latency correlations
Service -> transaction -> error correlations
Service -> error group -> error samples

Changes made:

Added a button to navigate to Discover from APM UI, where there wasn't one before.
Moved the "View in Discover" button outside the "Investigate" dropdown for the Waterfall component
Reordered the buttons in the Waterfall component and changed "View in Discover" and "View full trace" to use ButtonEmpty.
Unified all links to discover in 3 components.
Added tests.

Before	After

How to test

Important

Please, test both APM and OTel scenarios, so we ensure everything works fine.
Thank you!

APM

Open Kibana
Ingest some data with synthtrace, for example: "many_dependencies", "service_map" or "many_transactions".
Play around with the UIs

OTel

Make sure to run the elastic-stack-docker-compose and uncomment this lines, then run the opentelemetry-demo
Play around with the UIs

rmyz · 2025-08-20T14:46:54Z

/ci

rmyz · 2025-08-20T18:29:16Z

/ci

rmyz · 2025-08-20T18:30:12Z

/ci

rmyz · 2025-08-21T09:32:01Z

/ci

elasticmachine · 2025-08-21T10:50:50Z

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

cauemarcondes

LGTM

...bility/plugins/apm/public/components/shared/links/discover_links/open_in_discover_button.tsx

# Conflicts: # x-pack/solutions/observability/plugins/apm/tsconfig.json

iblancof

Checked the code changes after the suggested updates, and with "Open in Discover" now everywhere, LGTM

...bility/plugins/apm/public/components/shared/links/discover_links/open_in_discover_button.tsx

.../plugins/apm/public/components/shared/links/discover_links/open_error_in_discover_button.tsx

kpatticha · 2025-08-29T12:03:22Z

.../plugins/apm/public/components/shared/links/discover_links/open_error_in_discover_button.tsx

+    serviceName,
+  };
+
+  const esqlQuery = getESQLQuery({


Lines 86–115 are duplicated across all three components. Can we refactor it to avoid repetition?

There was an exact comment asking the opposite, I will keep it in their own components since this PR has been open for too long

I'm not suggesting to do the opposite, It makes sense to keep separate files to handle each case, but in the end we’re always rendering a button that opens Discover with some params. That button logic could be shared.

With the current approach, if we ever need to change how the button works, we’ll have to update it in 3 different components, here as an example

This also makes it easy to introduce inconsistencies, one component is already using a link instead of a button (not sure why).

created base discover button to share the button logic in 84020d1 (#232361)

...ity/plugins/apm/public/components/shared/links/discover_links/open_span_in_discover_link.tsx

.../plugins/apm/public/components/shared/links/discover_links/open_error_in_discover_button.tsx

elasticmachine · 2025-09-01T08:34:46Z

💔 Build Failed

Buildkite Build
Commit: 8f7e001

Failed CI Steps

Check Types

History

💛 Build #333920 was flaky 3896d29
💔 Build #333725 failed ea4f9a2
💚 Build #333582 succeeded 93bac40
💚 Build #333178 succeeded 5655abd
💔 Build #333052 failed 158c3e9
💔 Build #333041 failed 5314e52

cc @rmyz

kpatticha · 2025-09-01T11:16:48Z

...rvability/plugins/apm/public/components/shared/links/discover_links/base_discover_button.tsx

+      href={discoverHref}
+      isDisabled={!esqlQuery || indexSettingsStatus !== FETCH_STATUS.SUCCESS}
+    >
+      {label}


nit: since the label it the same for all you can consider making it the default

kpatticha

Nice work, thanks for addressing the comments.

…ontext (elastic#232361) Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

rmyz added 2 commits August 19, 2025 13:00

refactor: improve redirect from apm waterfall to discover

36f9c44

improvements

b5598d6

rmyz self-assigned this Aug 20, 2025

rmyz added 3 commits August 20, 2025 16:37

improvements

4219b48

fix tests

043fc2d

Merge branch 'main' into 232178-apm-improve-redirect-discover-waterfall

68e67c8

rmyz added release_note:skip Skip the PR/issue when compiling release notes backport:skip This PR does not require backporting Team:obs-ux-infra_services - DEPRECATED DEPRECATED - Use Team:obs-presentation. Feature:Discover Discover Application apm labels Aug 20, 2025

kibanamachine and others added 2 commits August 20, 2025 14:58

[CI] Auto-commit changed files from 'node scripts/notice'

226be19

fixes

d806a01

rmyz changed the title ~~refactor: improve redirect from apm waterfall to discover~~ [APM] Improve user journey from APM UI to Discover while preserving context Aug 20, 2025

remove copies

af87695

rmyz added 6 commits August 21, 2025 10:13

improvements

e10a6eb

improvements

ec3cf6b

revert some changes

e7bfab0

revert copy removal

c295522

improvements

047bbae

Merge branch 'main' into 232178-apm-improve-redirect-discover-waterfall

511e1b8

add testing

84a000e

rmyz marked this pull request as ready for review August 21, 2025 10:50

rmyz requested a review from a team August 21, 2025 10:50

rmyz requested a review from a team as a code owner August 21, 2025 10:50

rmyz requested a review from iblancof August 28, 2025 10:21

rmyz added 3 commits August 28, 2025 12:29

Merge branch 'main' into 232178-apm-improve-redirect-discover-waterfall

93bac40

rename buttons to Open in Discover

21def1a

Merge branch 'main' into 232178-apm-improve-redirect-discover-waterfall

ea4f9a2

cauemarcondes reviewed Aug 28, 2025

View reviewed changes

...bility/plugins/apm/public/components/shared/links/discover_links/open_in_discover_button.tsx Outdated Show resolved Hide resolved

...bility/plugins/apm/public/components/shared/links/discover_links/open_in_discover_button.tsx Outdated Show resolved Hide resolved

rmyz added 2 commits August 29, 2025 08:42

solve comments

18755f8

Merge branch 'main' into 232178-apm-improve-redirect-discover-waterfall

3896d29

# Conflicts: # x-pack/solutions/observability/plugins/apm/tsconfig.json

rmyz requested a review from cauemarcondes August 29, 2025 06:45

iblancof approved these changes Aug 29, 2025

View reviewed changes

crespocarlos approved these changes Aug 29, 2025

View reviewed changes

...bility/plugins/apm/public/components/shared/links/discover_links/open_in_discover_button.tsx Show resolved Hide resolved

rmyz enabled auto-merge (squash) August 29, 2025 11:26

kpatticha reviewed Aug 29, 2025

View reviewed changes

rmyz added 4 commits September 1, 2025 09:29

pr comments fixes

d78c13c

Merge branch 'main' into 232178-apm-improve-redirect-discover-waterfall

ee00462

conditionally renders button if query is malformed

40998b7

fetch indexSettings in ApmServiceContext

8f7e001

rmyz requested a review from kpatticha September 1, 2025 08:08

rmyz added 4 commits September 1, 2025 11:34

fix types

67d09fc

use spinner and disabled instead of removing the component

9041918

fix tests

a0edcf1

create base discover button

84020d1

kpatticha reviewed Sep 1, 2025

View reviewed changes

kpatticha approved these changes Sep 1, 2025

View reviewed changes

rmyz merged commit 481d5f8 into elastic:main Sep 1, 2025
13 checks passed

kibanamachine added the v9.2.0 label Sep 1, 2025

rmyz deleted the 232178-apm-improve-redirect-discover-waterfall branch September 1, 2025 13:56

ymao1 pushed a commit to ymao1/kibana that referenced this pull request Sep 2, 2025

[APM] Improve user journey from APM UI to Discover while preserving c…

04ecb3f

…ontext (elastic#232361) Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

Conversation

rmyz commented Aug 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

How to test

APM

OTel

Uh oh!

rmyz commented Aug 20, 2025

Uh oh!

rmyz commented Aug 20, 2025

Uh oh!

rmyz commented Aug 20, 2025

Uh oh!

rmyz commented Aug 21, 2025

Uh oh!

elasticmachine commented Aug 21, 2025

Uh oh!

cauemarcondes left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

iblancof left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kpatticha Aug 29, 2025

Choose a reason for hiding this comment

Uh oh!

rmyz Sep 1, 2025

Choose a reason for hiding this comment

Uh oh!

kpatticha Sep 1, 2025

Choose a reason for hiding this comment

Uh oh!

rmyz Sep 1, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

elasticmachine commented Sep 1, 2025

💔 Build Failed

Failed CI Steps

History

Uh oh!

kpatticha Sep 1, 2025

Choose a reason for hiding this comment

Uh oh!

kpatticha left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

rmyz commented Aug 20, 2025 •

edited

Loading