[Uptime] Display summary performance metrics on waterfall chart

elastic / kibana

Your window into the Elastic Stack

https://www.elastic.co/products/kibana

Other

19.76k stars 8.17k forks source link

[Uptime] Display summary performance metrics on waterfall chart #85401

Open paulb-elastic opened 3 years ago

paulb-elastic commented 3 years ago

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
[X] Display these as annotations on the waterfall chart (vertical lines with badges labelled with the acronym) - done in https://github.com/elastic/kibana/pull/103642
[ ] Define the acronyms to use for all of the metrics (e.g. DCL for DOM Content Loaded)

Notes:

Refer to https://github.com/elastic/kibana/issues/80162 for designs
This depends on the data being captured, as defined in https://github.com/elastic/synthetics/issues/120

elasticmachine commented 3 years ago

Pinging @elastic/uptime (Team:uptime)

paulb-elastic commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

Figma file

paulb-elastic commented 3 years ago

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

paulb-elastic commented 3 years ago

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

liciavale commented 3 years ago

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 commented 3 years ago

Linking the second AC to https://github.com/elastic/kibana/pull/103642