Skip to content

Update the trace waterfall to make it easy to understand#250442

Merged
sbelastic merged 11 commits intoelastic:mainfrom
sbelastic:245034-improve-trace-waterfall-ui
Feb 5, 2026
Merged

Update the trace waterfall to make it easy to understand#250442
sbelastic merged 11 commits intoelastic:mainfrom
sbelastic:245034-improve-trace-waterfall-ui

Conversation

@sbelastic
Copy link
Copy Markdown
Contributor

@sbelastic sbelastic commented Jan 26, 2026 •
edited
Loading

Relates to #245034

Summary

To know to what service each waterfall item relates to, these changes were made:

  • Made the service name list sticky to the top of the page (WaterfallLegends component is now sticky)
  • Added a badge to each waterfall item for people to know more easily know what service it relates to

Other changes:

  • Changed the time from a plain text to a badge to better differentiate from the rest

Video Comparisons

Before

before.mp4

After

after.mp4

Unit tests

yarn test:jest x-pack/solutions/observability/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall_container.test.tsx

yarn test:jest x-pack/solutions/observability/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/index.test.tsx

yarn test:jest x-pack/solutions/observability/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/waterfall_item.test.tsx

yarn test:jest x-pack/solutions/observability/plugins/apm/public/hooks/use_element_height.test.tsx

Running tests e2e locally

Run server (first terminal):

node scripts/scout.js start-server --stateful

Run apm tests (second terminal):

npx playwright test --project local --ui --config x-pack/solutions/observability/plugins/apm/test/scout/ui/parallel.playwright.config.ts

Checklist

@sbelastic sbelastic self-assigned this Jan 26, 2026
@sbelastic sbelastic added release_note:skip Skip the PR/issue when compiling release notes backport:skip This PR does not require backporting v9.4.0 Team:obs-presentation Focus: APM UI, Infra UI, Hosts UI, Universal Profiling, Obs Overview and left Navigation labels Jan 26, 2026
@sbelastic sbelastic marked this pull request as ready for review January 27, 2026 11:02
@sbelastic sbelastic requested a review from a team as a code owner January 27, 2026 11:02
@elasticmachine
Copy link
Copy Markdown
Contributor

elasticmachine commented Jan 27, 2026

Pinging @elastic/obs-presentation-team (Team:obs-presentation)

@kibanamachine
Copy link
Copy Markdown
Contributor

kibanamachine commented Jan 27, 2026

Flaky Test Runner Stats

🎉 All tests passed! - kibana-flaky-test-suite-runner#10612

[✅] x-pack/solutions/observability/plugins/apm/test/scout/ui/parallel.playwright.config.ts: 15/15 tests passed.

see run history

smith
smith reviewed Jan 28, 2026
View reviewed changes
@sbelastic sbelastic requested a review from smith February 2, 2026 15:40
crespocarlos
crespocarlos reviewed Feb 4, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@crespocarlos crespocarlos 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 the working on this.

What we're changing will here will create a difference between APM and Traces in Discover (see https://github.com/elastic/kibana/tree/main/x-pack/solutions/observability/plugins/apm/public/components/shared/trace_waterfall). Eventually the code from traces in discover will replace this one, so I wonder if we should change in both places.

.../transaction_details/waterfall_with_summary/waterfall_container/waterfall/waterfall_item.tsx Outdated
}

return (
<EuiBadge color="hollow" iconType="cluster">
Copy link
Copy Markdown
Contributor

@crespocarlos crespocarlos Feb 4, 2026

Choose a reason for hiding this comment

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

Why did we choose cluster iconType? I don't know if there is a better one, but I'm wondering if we need an icon at all.

Copy link
Copy Markdown
Contributor Author

@sbelastic sbelastic Feb 4, 2026

Choose a reason for hiding this comment

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

I just chose one, we can certainly remove it if you think it's best to not have an icon, but because we have more badges, an icon is useful to distinguish from the other badges in the waterfall item. Maybe I should find a better one.

@sbelastic
Copy link
Copy Markdown
Contributor Author

sbelastic commented Feb 4, 2026 •
edited
Loading

Thanks for the working on this.

What we're changing will here will create a difference between APM and Traces in Discover (see https://github.com/elastic/kibana/tree/main/x-pack/solutions/observability/plugins/apm/public/components/shared/trace_waterfall). Eventually the code from traces in discover will replace this one, so I wonder if we should change in both places.

Update: This was aligned to the team responsible with the component, will not be done in this PR

@elasticmachine
Copy link
Copy Markdown
Contributor

elasticmachine commented Feb 4, 2026

💔 Build Failed

Failed CI Steps

History

cc @sbelastic

@sbelastic sbelastic merged commit 1b96249 into elastic:main Feb 5, 2026
16 checks passed
mbondyra added a commit to mbondyra/kibana that referenced this pull request Feb 5, 2026
@mbondyra
Merge commit '5c0872d56bc0268177cd3c7150a1685481fb5238' into test_agent2
09f3110 
* commit '5c0872d56bc0268177cd3c7150a1685481fb5238': (221 commits)
  Add .cursorignore file (elastic#251709)
  [Search] Add descriptions to semantic_text field inference endpoint select (elastic#249265)
  [Agent Builder] Agent skills implementation (elastic#251209)
  [Lens] [ES|QL] Improve types for ES|QL conversion. (elastic#251042)
  Update the trace waterfall to make it easy to understand (elastic#250442)
  [ES|QL] [Lens] Adds query stats (elastic#251029)
  [Lens] Fix KQL character escaping when query is generated from Top values column (breakdown). (elastic#250925)
  fix(kbn-elastic-assistant): fix a11y issue with missing label on flyout (elastic#251656)
  Update dependency @elastic/monaco-esql to v3.1.16 (main) (elastic#251666)
  [Automatic Import V2] Add langsmith tracing (elastic#251592)
  [scout] fix duplicated test failure reports in Buildkite annotations (elastic#251455)
  chore(NA): remove us-central1-b from gcp zones on high load jobs (elastic#251748)
  skip flaky suite (elastic#250973)
  [Lens] Allow read only view for users with write permissions but having no write access to the dashboard (elastic#247746)
  [CI] Increase artifacts disk to 180gb (elastic#251774)
  [content-list] 1. Provider Foundation (elastic#251344)
  [AI Infra] Add missing ES|QL commands and functions documentation for inference tasks (elastic#249089)
  [docs-utils] 4️⃣ pre-req: Prepare for new validations (elastic#250810)
  [APM] Extend React flow service map test coverage (elastic#251624)
  [scout] discover tests with custom server configs (elastic#251297)
  ...

# Conflicts:
#	src/platform/plugins/shared/dashboard/tsconfig.json
#	x-pack/platform/plugins/shared/agent_builder_platform/server/tools/create_visualization/create_visualization.ts
@tfcmarques tfcmarques mentioned this pull request Feb 18, 2026
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@crespocarlos crespocarlos crespocarlos approved these changes

@smith smith Awaiting requested review from smith

Assignees

@sbelastic sbelastic

Labels

backport:skip This PR does not require backporting release_note:skip Skip the PR/issue when compiling release notes Team:obs-presentation Focus: APM UI, Infra UI, Hosts UI, Universal Profiling, Obs Overview and left Navigation v9.4.0

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@sbelastic @elasticmachine @kibanamachine @smith @crespocarlos