[Design] Host Detail/Fly-out views : alerting section designs

[roshan-elastic]

Description

This is an issue to figure out what the alert section should look like in the host fly-out/detail views. Specifically:

• Should we show a search box? If so, how can we show it in a way which isn't cluttered.
• Should we consider introducing an 'alerts' tab (yet another tab) or can we somehow allow users to interrogate the alerts in the fly-out/detail views?

Background

When users open a host, we have an alerts section in the overview tab which will summarise the alert status. The intention is that the user can understand:

• What alerts are active for the host (and non-active alerts too)?
• When did they start? How are they trending?
• What alert rules are triggering them?
• Do they correlate with the current issue the user is dealing with (e.g. high service latency)?

To tackle this, we are planning to show:

• By default, the alerts section will be collapsed unless there are active alerts

• When there are active alerts, we plan to expand the alert section to show:

• The alert counts

• The alert status blue toggle bar

• The alert chart

• The table

• A link to 'show all' (which would link to alerting showing the filter for this host, e.g. host.name: this)

Example

If the user wants to try and establish if there are correlations between the current alerts on this host and other hosts (or other relates alerts, e.g. for services) then the user can click on 'show all' to open the alerts section (where they can change the filters to look at other alerts other than the current host)

However, this won't allow user to interrogate the actual alerts (e.g. search through them) as there is no search box. Adding a search box could get cluttered unless done well.

Another option is to think about adding an alerts tab (but this adds more clutter).

Requirements

Create a design which:

• Show how a search bar should be incorporated (if* it should be)
• Shows how an alerts tab would work (if* it should be)
• Shows whether the alerts blue status bar show be shown (if* it should be)

*let's not add it if it doesn't make sense from a UX POV

Disclaimer We are already pressing ahead with showing the alert chart and table in the alert 'section' - but there is scope to move this if needed...it's not really hard.

[roshan-elastic]

@sileschristian - are you ok to press ahead with figuring out these three things?

• Show how a search bar should be incorporated (if* it should be)
• Shows how an alerts tab would work (if* it should be)
• Shows whether the alerts blue status bar show be shown (if* it should be)

We can discuss if a design isn't the right first step (e.g. if an alerts tab doesn't make sense, let's just not do it)

cc @crespocarlos

[elasticmachine]

Pinging @elastic/obs-ux-infra_services-team (Team:obs-ux-infra_services)

[roshan-elastic]

Reviewed this with @kkurstak - happy to close this for the moment as not needed right now