[Uptime UI] Create new waterfall view

[katrin-freihofner]

Describe the feature:

Wireframe

Headline

Showing the step name and details on the check (@drewpost please help me with these. You mentioned device type and connection details)

Metrics

• First byte
• Start render
• First contentful paint
  ... @drewpost I can not find the list of Metrics we want to show anymore - do you have it somewhere?

Waterfall

• Every row is the same height
• The full waterfall should fit horizontally
• the colored bars indicate the time spent
• The colors indicate the MIME type (they should always be the same in Synthetics, please use our visualization colors. These colors must not be assigned as I'm showing them here, feel free to pick different ones)
• every row shows a label with the resource name (these URLs could be very long, please make sure the start and end are readable). We should define a min. width for the labels and move them to the left once there is too little space on the right.
• please move the labels on small screens inside the colored boxes
• show error indicator highlighted with a badge for all 4xx, 5xx, 301, 307, and 308 response codes
• there should be indicators for start render, visually complete, page load, time to interactive, DOM content loaded, @drewpost do you have a full list for these?
• the waterfall itself should scroll separately (indicators stay visible even if user scrolls down)
• Legend, sticky on the bottom of the waterfall
• when hovering over the waterfall, a vertical line should indicate the time/duration at this point (green line in wireframes)
• there are up to two buttons at the very top, to download the full script and the full DOM (only for last step). Please add telemetry support to both buttons.

Please make sure the waterfall view is linked from the check details (#80156), the monitor details view and the overview.

Next steps (handled in different issues, check meta issue for further details)

• click interaction on rows in waterfall triggers flyout and show details
• filter capabilities to waterfall
• step selector to waterfall
• next/previous check buttons to waterfall
• charts to waterfall
• hover interaction to all screenshots

Figma file

[elasticmachine]

Pinging @elastic/uptime (Team:uptime)

[drewpost]

@katrin-freihofner This seems to be missing the connection steps on the objects (ie DNS, SSL etc)

[paulb-elastic]

@katrin-freihofner it's also worth mentioning that not all bar segments will necessarily be touching, as you can have gaps between different parts of the network request, something like this:

[katrin-freihofner]

@katrin-freihofner This seems to be missing the connection steps on the objects (ie DNS, SSL etc)

@drewpost
It was not mentioned in the design issue. Can you provide more details?

[drewpost]

Hey @katrin-freihofner - As discussed on our call today, you'll add in the four components to these lines: DNS, connect, SSL/TLS and time to first byte for all objects that we hold data for. This may not be all objects on the page as this cost is only incurred for the first connection to the domain (or at least, it should be!)

[paulb-elastic]

As discussed in refinement, until #80156 is implemented, we will include a link from the existing details view, to the waterfall chart via a text/image link (@formgeist mentioned that APM have a waterfall/trace icon that might be suitable)

[formgeist]

There's the apmTrace glyph in EUI which displays like a waterfall visualization. We might consider renaming this glyph to "waterfall" to be more generic in its wording.

[paulb-elastic]

As discussed in refinement, we will remove the current vertical annotation bar that is snapping to the end of a timing point, as we will look to make use of a more precise pixel version when we work on the filmstrip and scrubber (#83816).

[paulb-elastic]

The main waterfall chart has been implemneted.

Items in the original spec that have not yet been implemented are covered in separate issues:

• Display summary performance metrics on waterfall chart [Uptime] Display summary performance metrics on waterfall chart #85401
• Add option to download the full script and DOM [Uptime] Add option to download the full script and DOM #86154