[DESIGN] Synthetics MVP

[andrewvc]

Summary of the problem (If there are multiple problems or use cases, prioritize them)

Data available for use in UI

• Per run
  • Overall status (up/down) (required)
  • DOM source for the final step
  • Filmstrip
  • Waterfall (v2)
• Individual steps
  • Name of the step (user defined) (required)
  • Source code that powers the step (required)
  • Status (Success, Fail, Skipped) (required)
  • Screenshot (full page) (required)
  • Did this step contain the largest contentful paint? (boolean)
  • Length of time the step took (required)

User stories
See user stories here: https://docs.google.com/document/d/19STPufkUdsMSpuCfn0XZoHdpfoG5Ng44-2a-WHBwyBI/edit#

List known (technical) restrictions and requirements

If in doubt, don’t hesitate to reach out to the #observability-design Slack channel.

[elasticmachine]

Pinging @elastic/observability-design (design)

[drewpost]

cc: @andrewvc @katrin-freihofner

A few comments/questions:

• If we're capturing timing information, is it possible to capture two values? One for backend (ie TTFB or responseEnd) and one for "page load" ie onLoadStart- Is this massively more work?
• I think we should consider pass/fail as language vs up/down. Something that communicated functionality vs availability?
• What increments will the filmstrip be in? 0.1 seconds is probably the best granularity. Will the user have control over the granularity? Is the filmstrip downloadable/exportable?

[drewpost]

Another thought - we should have something to indicate when a step is not a full page load so the user isn't expecting to see the full complement of data that comes from a page load

[andrewvc]

@katrin-freihofner this screenshot from a POC might be helpful

[justinkambic]

@katrin-freihofner I had a few follow-up questions:

1. When a snapshot is selected, do we want to display the full image as a modal, popover, or some other element?
2. How should we make the empty state for snapshot images look?
   

[katrin-freihofner]

@justinkambic

1. When a snapshot is selected, do we want to display the full image as a modal, popover, or some other element?

My initial thought was to show the preview always in 16:9 and the full screenshot on hover.

But I think we should also show the full screenshot in full size as an overlay when the preview image is clicked. Especially on smaller screens or touch devices, this could be useful.

2. How should we make the empty state for snapshot images look?
   

This is what I had in mind

[shahzad31]

I love this :)

[justinkambic]

Ok thanks for clearing those up Katrin!

[justinkambic]

I love this :)

@shahzad31 one of the perks of the job is getting to make placeholders like this

[katrin-freihofner]

Design update:
Figma file
Video walk-through

[katrin-freihofner]

I started creating engineering issues for this one.

[katrin-freihofner]

Missing pieces:

• layout and details for expanded row
• empty/error states