[WIP][UI][Trace-Topic] Ideas for optimizing trace panel display

[CodePrometheus]

I. Click to quickly jump to the error span

In practice, there are many scenarios where the trace panel is used to query and locate errors, the ability to quickly locate errors within a trace panel is invaluable, especially in production environments.

To achieve this, I think of a simple PRD. Since I want to express my ideas quickly, please ignore things like the colors used in the image. It will be consistent with the overall.

The functions we want to achieve are:

1. In the trace metadata column, add a new Errors field next to Spans, indicating the total number of error spans within the current trace.
2. The Errors field have a tooltip or informative icon (e.g., "?") that displays the text "Click to quickly jump to the error span" when the user hovers over it.
3. As shown in the figure, there are two error spans (#1 and #4). When I click Errors, the relevant area of #1 is highlighted. When I click again, #4 is highlighted, and click again to return to #1, By clicking, the highlighting is cycled through all error spans.
4. When the trace exceeds a certain length, that is, when the entire span-list needs to be scrolled, after clicking Errors, the error span will automatically slide to the middle of the span-list window and highlight it.

II. Collapse span

The functions we want to achieve are:

1. Clicking the left-side circle of a span should collapse its nested sub-spans.
2. A solid circle icon indicates the sub-spans are currently collapsed, while a hollow circle signals the sub-spans are expanded.

Are you willing to submit a pull request to implement this on your own?

• Yes I am willing to submit a pull request on my own!

Code of Conduct

• I agree to follow this project's Code of Conduct

[wu-sheng]

This seems reasonable.