Add Tracing Details Span Chart
What does this MR do and why?
- Add gantt-like chart to tracing details to represent trace's spans. (It mimics the Roadmap gantt chart)
- Services are assigned colours based on the https://design.gitlab.com/data-visualization/color#categorical-data
- Removing temporary changes where trace duration was calculated on the client
- Update mocks
Other resources:
- Figma prototype
- Previous Discussion: !128558 (comment 1503335863)
- Closes frontend: Trace Details UI (gitlab-org/opstrace/opstrace#2253 - closed)
Screenshots or screen recordings
How to set up and validate locally
- Enable FF
Feature.enable(:observability_tracing)
- Apply patch to load local mocks ( as running the whole stack is not trivial )
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Edited by Daniele Rossetti