[Uptime UI] Update Uptime overview to support synthetic checks

[katrin-freihofner]

Describe the feature:
Please update the current Uptime overview to be able to show synthetic monitors. This affects mainly the monitor list/table.

Wireframe

Details

Status column

Update the status column to use a badge for indicating the status of a monitor. Also, add the location information and the timestamp when it was last checked.

Please also update the red "down" color in the charts in the overview and detail view.

Name column

Update name column to show the type of monitor (@drewpost please add the labels we should use for the different monitor types here.)

Monitor details in expanding rows

Please update the details to match the following wireframe:

• The URL link opens the URL in a new tab
• The link under the most recent test run navigates to the details view, showing the most recent test run
• The error message links to the waterfall view of the step that produced the error (will be linked once we have the waterfall view).

@drewpost @andrewvc what should we do with the certificate and status alert column?

Figma file

[elasticmachine]

Pinging @elastic/uptime (Team:uptime)

[shahzad31]

@paulb-elastic this can use some refinement, seems like we have few unanswered questions here, design doesn't cover those, like TLS certificate column, status alert and name, i am not sure, what name represents here? is it the name of the journey? will we have a separate way to display name for browser monitors?

[paulb-elastic]

Name

• My understanding is that Name is the existing column (as we have today), but with the additional description as to the type of monitor, underneath it
• @katrin-freihofner is that right?
• @drewpost what are the label names for HTTP, ping, Synthetics etc.?

Certificate status

• Does this just require the existing label/link for Certificate status to be changed to a button as in the mock up?
• cc @katrin-freihofner / @drewpost

Status alert

• @drewpost / @andrewvc as per @katrin-freihofner's question, can this remain as it is there, or is this meant to be removed?

[shahzad31]

@paulb-elastic status alert column can remain as is. That's the only place it will be useful/meaningful.

I will start work on this and sync with @katrin-freihofner to refine it.

[drewpost]

Labels: Browser, HTTP Ping, TCP Ping, ICMP Ping

[shahzad31]

Regarding Status column, it says Checked 09:45, i believe we are displaying relative time here which is more useful instead of displaying when check happened , it's more useful, how long ago check happened.

like 15s ago or 15m ago, so i am going to keep that, let me know if you have any objections.

[shahzad31]

Also another thing regarding status column, i think it will more friendly for users on smaller devices, if we can display time alongside badge and display "in 2/2 locations" info in next line, please let me know if you have objections to that as well.

[shahzad31]

@katrin-freihofner can we also display those labels as badges instead of simple text alongside text name? Browser, HTTP Ping, TCP Ping, ICMP Ping

[katrin-freihofner]

• Name is the existing column (as we have today), but with the additional description as to the type of monitor, underneath it

Yes, exactly. If we need the certificate and status column too that's ok.

[katrin-freihofner]

• Does this just require the existing label/link for Certificate status to be changed to a button as in the mock up?

No, please only change what is described here.

[katrin-freihofner]

Browser, HTTP Ping, TCP Ping, ICMP Ping

"Browser" seems to me as it would not fit into this list. Maybe "Browser check"? But those are only my two cents.

[katrin-freihofner]

Regarding Status column, it says Checked 09:45, i believe we are displaying relative time here which is more useful instead of displaying when check happened , it's more useful, how long ago check happened.

like 15s ago or 15m ago, so i am going to keep that, let me know if you have any objections.

@shahzad31 thank you for your input. I think currently we show it relative (15 s ago). @drewpost and me discussed that it would make things easier if we move to an absolute timestamp. Let me know what you think, we can also discuss it in our sync tomorrow.

[katrin-freihofner]

@katrin-freihofner can we also display those labels as badges instead of simple text alongside text name? Browser, HTTP Ping, TCP Ping, ICMP Ping

We can, but I'm wondering what we are trying to solve? Would you mind explaining your idea a bit further?

[shahzad31]

@katrin-freihofner idea is that if we can display monitor type as badges, we can also use those as filters, so for example once user clicks HTTP badge filter alongside name, we can filter page for all http monitors, i think it would be a useful feature, also i am not sure, if adding a Ping helps.

we can keep it simple, HTTP, ICMP, TCP, Browser.

[katrin-freihofner]

I see what you mean @shahzad31, thanks for explaining.
That is actually introducing a new feature. I'm a bit worried that the click areas of the link and the badge are not big enough and users would filter by accident. Also from a purely visual standpoint, I'd keep it as a text.

[shahzad31]

hmm, i think it works pretty well i tried it briefly, ok i will keep the changes in scope of this issue, and will do a separate PR, if i decides to go ahead and implement it.