[Uptime] Filmstrip for Synthetic monitors

[paulb-elastic]

This issue builds on the original high level requirement defined in https://github.com/elastic/uptime/issues/250.

Story

As a web performance engineer using Synthetic monitoring I want to be able to see the visual loading progress of the website at specific points in time as the page loads So that I can clearly see the visual impact of poorly performing pages

Acceptance criteria

• [ ] There is a filmstrip that shows the various stages of the page loading over time shown on the same page as the waterfall chart
• [ ] It is possible to separate out the filmstrip for each step of a multi step user journey
• [ ] It is possible to focus on what the page looks like at specific points in time to the page loading (e.g. a scrubber between the waterfall chart and the filmstrip)
• [ ] Determine if there is any limitation to the duration of the step or total user journey, and the implications of this to the feature
• [ ] Determine if there is any impact of capturing filmstrip images, on the performance metrics gathered on the page (i.e. the observer effect), and the implications of this to the feature

Dependencies

• [ ] Design how this will fit into the waterfall chart (statically, and also with the scrubber) https://github.com/elastic/observability-design/issues/5
• [ ] Able to get the precise position of the mouse on the waterfall chart https://github.com/elastic/elastic-charts/issues/906
• [x] Ensure the Synthetic Agent is capturing filmstrips (note that this was changed to be off by default in https://github.com/elastic/synthetics/issues/143
  • [x] Synthetics needs to capture screenshots https://github.com/elastic/synthetics/issues/250
  • [x] It must be possible to coordinate the filmstrip images and when they appear relative to the page (step) loading https://github.com/elastic/synthetics/issues/85

[elasticmachine]

Pinging @elastic/uptime (Team:uptime)