[Uptime UI] Create new check details view

[katrin-freihofner]

Describe the feature:
This view should list all steps of a synthetic check.

Wireframe

Headline and timestamp of check

Next/previous check buttons

These buttons should enable a user to navigate to the next/previous check of a monitor.

Steps table

• Step number
• Status column with a badge
• A preview image (or empty state) and the step name

Failed step

For failed steps, we show additionally the resulting image and the expected image (+timestamp when this screenshot was taken), the error message, and the script. Depending on the error case we will exchange this content (or even the whole table for an error message.)

Link to the waterfall chart

There will be a link from this page to the waterfall chart as defined in #80162 (also refer to #88223 for how an additional button is being added to get to the waterfall, to use the same implementation)

This issue does not include the next/previous buttons on the top right, they will be handled in a separate issue.

Figma file
cc @drewpost @andrewvc @paulb-elastic

[elasticmachine]

Pinging @elastic/uptime (Team:uptime)

[paulb-elastic]

Adding a requirement that when this page is worked on, it will include a link to the waterfall chart as defined in #80162

[paulb-elastic]

Added a reference to #88223 to ensure we use the same implementation for the click through to the waterfall chart

[paulb-elastic]

For clarity, as discussed in the design sync, this new page will be accessible by clicking on the time of the test rom the history view:

[paulb-elastic]

Discussed the click action again in the refinement session:

• The expander on the right hand side of the row will go away (just for real browser tests, not other types of monitor)
• The whole row will be clickable, to take the user to the new page (not only the time as shown in a previous discussion)
• The row will continue to have the colour highlighting as the mouse moves over each row (as it does now), with the addition of a change in the mouse pointer to make it clear the row can be clicked on
• The thumbnail will continue to work as it does now, in that clicking on it will show the lightbox/overlay (which itself requires some fixes as documented in Large Screenshots - Usability Challenges uptime#291), and not drill into the new page

[shahzad31]

This view will change how the breadcrumb for waterfall view works

For waterfall view it will become like this

Uptime / Monitor/ Feb 2019 / Performance Breakdown

[shahzad31]

Since we are showing a large image in the expanded row, hover image will not make sense now. Only full screen view for image will exist.

[shahzad31]

Step name will not be clickable anymore , there will be a Link to waterfall view saying

'View performance breakdown' in each step row.

[shahzad31]

Console log and stack trace are going to be accordion as far as i understand, since both can be very long, so displaying them in a managed UI makes sesnse.

Please correct me if otherwise.

[justinkambic]

Things I looked for while testing this new view:

• shows step number
• shows status column with badge
• preview image
• failed image
• previous success image (I wasn't really able to verify this because I'm using a production website for testing)
• failed timestamp
• error message
• script
• link to waterfall chart