[UI Feature] Flyte runtime metrics UI

[cosmicBboy]

Motivation: Why do you think this is important?

#3272

Goal: What should the final outcome look like, ideally?

UPDATE: New

There have been some changes from the original spec/comps.

1. We will no longer use color/opacity values. Instead, simply render the lines between spans. Users can hover over a span to see which operationId it represents.
2. We will fetch all execution spans using depth=0 and will revisit this to better optimize performance in later versions if this feature starts gaining traction.
3. The hover tool-tip will be handled in a separate ticket.

--- The following is out of date in the listed cases ---

The new UI will be controlled by a toggle ("View Details") and will break up the graph into sections. The colors for these new buckets should be opacity values on black/white overlayed over the existing phase color. Crucially, these overlayed values should be consistent across events (eg, the overlay treatment applied to "plugin" durations should be the same regardless of phase)

Propose: Link/Inline OR Additional context

See high-level proposal here

Are you sure this issue hasn't been raised already?

• Yes

Have you read the Code of Conduct?

• Yes

[cosmicBboy]

@jsonporter we need to come up with a few mockups of how this looks. Open questions include:

• how to visualize the different buckets?
• color scheme? legend? tooltip?

[tsheiner]

@cosmicBboy I am wondering why the 'view details' toggle ?

do we incur a performance hit to bring the additional details to the UI?

I am, in general, in favor of "opt-in to complexity" but with this design I don't see the details being visually overwhelming and rather think the toggle introduces unnecessary clutter and cognitive load.

Put another way, why would I not want the sectioned display?

[cosmicBboy]

@tsheiner we should discuss further with @jsonporter, I'm agnostic to what approach we take here, but he may have more context on this decision.

[cosmicBboy]

@jsonporter @tsheiner let's update the comps so that the new runtime metrics view is the default, no need for the toggle button.

• if the performance hit is too much for large dynamic nodes, for example, we can revisit the toggle button UI.

[tsheiner]

Updated design:

[tsheiner]

@4nalog updated comps ^^^

[flixr]

The design looks nice, I would even prefer to highlight the actual runtime even more than the other phases.

@jsonporter This is marked as done in the roadmap, but I only see basic hover tooltips in 1.6...
Is there a follow up planned for 1.7?

[hamersaw]

closing as completed