[Alert details page] Visually differentiate no data alerts from other alerts for the custom threshold rule

[maryam-saeidi]

Summary

In some cases, we might have no data alert due to a delay in ingesting data, and as a result, we get a no data alert, but it is not clear from the page that it is a no data alert. In some cases, we don't even see the unavailability of data because eventually, the data was ingested and present in the chart as shown below:

In this ticket, we would like to see how we can make it more visible when an alert is a No Data alert and possibly guide users to the related setting in case they want to disable it.

Design mock-up from @maciejforcone

Questions

• How do we differentiate No Data alert from the rest? We don't have this information saved in AAD.

Acceptance criteria

• Have visual indications on the alert details page to show if this page is related to a No Data alert for the custom threshold rule
  • Update threshold component to show No Data instead of threshold

[elasticmachine]

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