Traces: Change service legend from modal to popover and move button. Fix Timeline column width.

[yanatha99]

Description

Change "Service legend" from modal to popover. Also moved the Service legend from top level in Span details panel to just be within the Span hierarchy table, since its information is only relevant to the color coding of timeline bars in that table.

• ServiceLegendButton - new component that now fully encapsulates both the popover and the button to open it
• secondaryToolbar - new param and styling added to RenderCustomDataGrid for custom toolBar that renders on the right side of the DataGrid. This allows for secondary informational buttons like ServiceLegend to be added in a toolBar separate from the main one.

Fixed Timeline column width sizing in SpanHierarchyTable

• Timeline column width now set to half the total table available width instead of hard coded 700px
• Now the Timeline column for SpanHierarchyTable renders nicely in both the Traces page flyout and also the TraceDetails page

Screenshot

Before changes

After changes

Testing the changes

1. On Traces page open Trace details flyout for any span
2. In the Timeline tab of flyout validate that no horizontal scrolling required to see full width of table and Timeline column only takes up half the table width
3. Click the "Service legend" button and validate the popover shows the correct color for each service name. This can be validated by looking at the Timeline bar colors and their respective service in the Span column.
4. Click the "Open full page" link in the top right corner of the Trace details flyout to go to the Trace details page
5. Repeat checks (2-3) for the Trace details page

Changelog

• refactor: Change service legend from modal to popover and move button. Update timeline column.

Check List

• All tests pass
  • yarn test:jest
  • yarn test:jest_integration
• New functionality includes testing.
• New functionality has been documented.
• Update CHANGELOG.md
• Commits are signed per the DCO using --signoff

[codecov]

Codecov Report

❌ Patch coverage is 72.72727% with 6 lines in your changes missing coverage. Please review.
✅ Project coverage is 60.25%. Comparing base (a03145e) to head (9bca4e5).
⚠️ Report is 3 commits behind head on main.

Files with missing lines	Patch %	Lines
...ces/trace_details/public/utils/custom_datagrid.tsx	28.57%	1 Missing and 4 partials ⚠️
...races/span_detail_tables/service_legend_button.tsx	88.88%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #10707   +/-   ##
=======================================
  Coverage   60.25%   60.25%           
=======================================
  Files        4449     4450    +1     
  Lines      119019   119026    +7     
  Branches    19612    19616    +4     
=======================================
+ Hits        71717    71725    +8     
+ Misses      42336    42335    -1     
  Partials     4966     4966           

Flag	Coverage Δ
Linux_1	26.60% <ø> (ø)
Linux_2	38.82% <ø> (ø)
Linux_3	38.79% <ø> (+<0.01%)	⬆️
Linux_4	32.86% <72.72%> (+<0.01%)	⬆️
Windows_1	26.61% <ø> (ø)
Windows_2	38.80% <ø> (ø)
Windows_3	38.79% <ø> (-0.01%)	⬇️
Windows_4	32.86% <72.72%> (+<0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[TackAdam]

Not blocking NIT:
When we have a small span collection ie 2 spans, we should reduce the table height in the fly-out to prevent unnesary scrolling bar to empty space.

[TackAdam]

Service Legend will overlap the other tabs if window is reduced or monitor is too small

Screen.Recording.2025-10-13.at.10.30.26.AM.mov