TraceDetails: Add Timeline waterfall bars column to SpanDetailTableHierarchy

[yanatha99]

Description

This PR just cleans up the git commit and rebase history from PR 10610

Add new Timeline waterfall bars column to Tree view table on Trace details page. This is intended to replace the separate Timeline gantt chart as an inline solution to the table for a more cohesive view of the spans.

TimelineWaterfallBar renders waterfall bar for a span's time range

• Responsive offset and width within "Timeline" column of span table's "Tree view" (SpanDetailTableHierarchy)
• Color-coded bars based on service name
• Interactive tooltip that displays span's Duration, Start, and End milliseconds

useTimelineBarRange calculates relative bar offset and width based on each span's time range and overall trace time range along with any optional padding

• Returned timelineBarOffsetPercent and timelineBarWidthPercent determine bar positioning and size
• Returned durationMs, relativeStart, and relativeEnd are passed to bar tooltip

useTimelineBarColor determines color of bar based on span's service name

TimelineRuler renders a ruler with evenly spaced "nice" millisecond measurements to visually compare the waterfall bars

useTimelineTicks calculates optimal tick mark offsets and values for timeline ruler based on overall trace time range (min, max) and desired number of tick marks. Also takes any optional padding into account for scaling.

TimelineHeader renders the Timeline column header, which combines "Timeline" text translation with the TimelineRuler

The span table's "Tree view" has been modified to include new "Timeline" column before the "Duration" column and also hide the "Parent Id" by default to give the "Timeline" column more space.

A new span_timerange_utils.ts file has also been added with helper functions for calculating both span and trace time range (durationMs, startTimeMs, endTimeMs).

TODO Follow up items

• Some columns in the "Tree view" table will be combined or moved to the Span details flyout to give the "Timeline" column even more space
• The "Service legend" will be moved in the "Timeline" column header and removed from Trace details tabs header
• The separate "Timeline" tab and gantt chart will be removed from the Trace details page

Screenshot

Testing the changes

1. In an OSD workspace that contains traces, go to the Traces page.
2. Click any trace to go to the details page of that trace.
3. Go to the "Tree view" tab.
4. Validate that the waterfall bars in the "Timeline" column render.
5. Validate the waterfall bars' positioning and widths relative to each other are correct by comparing their "Duration", "Start", and "End" values from their tooltips.
6. Validate the waterfall bars' positioning and widths are accurate relative to the ruler on in the "Timeline" column header
7. Validate the water fall bar colors match the color specified for each service in the "Service legend".
8. Click drag the "Timeline" column to change its width and validate that the ruler and waterfall bars change width while keeping relative scale.

Changelog

• feat: Add Timeline waterfall bars column to SpanDetailTableHierarchy

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

[TackAdam]

Previously reviewed.
Tested again and working.
LGTM, thanks for contribution!

[codecov]

Codecov Report

❌ Patch coverage is 92.38095% with 8 lines in your changes missing coverage. Please review.
✅ Project coverage is 60.20%. Comparing base (5511e24) to head (4e185a9).

Files with missing lines	Patch %	Lines
...trace_details/public/utils/span_timerange_utils.ts	87.80%	1 Missing and 4 partials ⚠️
...ces/timeline_waterfall_bar/timeline_ruler_hooks.ts	90.90%	1 Missing and 1 partial ⚠️
.../trace_details/public/traces/span_detail_table.tsx	93.33%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #10642      +/-   ##
==========================================
+ Coverage   60.18%   60.20%   +0.02%     
==========================================
  Files        4428     4434       +6     
  Lines      118504   118586      +82     
  Branches    19456    19476      +20     
==========================================
+ Hits        71320    71397      +77     
- Misses      42265    42267       +2     
- Partials     4919     4922       +3     

Flag	Coverage Δ
Linux_1	26.65% <ø> (ø)
Linux_2	38.83% <ø> (ø)
Linux_3	38.72% <ø> (+<0.01%)	⬆️
Windows_1	26.66% <ø> (ø)
Windows_2	38.80% <ø> (ø)
Windows_3	38.72% <ø> (ø)
Windows_4	32.67% <92.38%> (+0.06%)	⬆️

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.