[Uptime] Display summary performance metrics on waterfall chart

[paulb-elastic]

As a Website Performance Analyst using Elastic Synthetics and Uptime
I want to see main performance metrics easily on the waterfall chart
So I can get context about the performance of my website

Requirements:

• Display a summary of the performance metrics at the top of the waterfall chart
• Display these as annotations on the waterfall chart (vertical lines with badges labelled with the acronym) - done in [Uptime] Annotate waterfall chart with additional metrics #103642
• Define the acronyms to use for all of the metrics (e.g. DCL for DOM Content Loaded)

Notes:

• Refer to [Uptime UI] Create new waterfall view #80162 for designs
• This depends on the data being captured, as defined in Capture relevant perf metrics to close the gap with RUM agent synthetics#120

[elasticmachine]

Pinging @elastic/uptime (Team:uptime)

[paulb-elastic]

@drewpost can you confirm the list of metrics we want to show here please?

@katrin-freihofner / @formgeist once we have that, can you confirm if the implementation of this should still be based on the design, where we show the information above the waterfall chart (we will not be showing any filmstrip for the time being)?

[paulb-elastic]

A list of the metric short names is here.

Discussed in the epic refinement, if there are a small (ish) number of metrics ready to be shown in the first iteration, then the table as shown at the top of the waterfall chart will be a suitable layout. However, if there are many (> ~10), then a table may not be the best UI, and an alternative should be considered with the help of the Design team.

[katrin-freihofner]

Figma file

[paulb-elastic]

Discussed in refinement, click on "more timing points" to get the additional data

[paulb-elastic]

@drewpost please add what units to label each metric with (add to the doc).

[liciavale]

New updated design here https://www.figma.com/proto/VNNDSawIv5crAuOBk3xCzJ/Synthetic-monitoring?node-id=2017%3A52567&scaling=min-zoom&page-id=1742%3A11197 let me know if you have any feedback

[paulb-elastic]

Linking the second AC to #103642