Alert Summary Widget - v2 Compact

[emma-raffenne]

Description

A new design is available for the Alert Summary Widget, that will be used in the following views:

• Rule detail page
• Alerts page
• APM overview
• Observability overview

The objective of this issue is to make this design available for the views mentioned above to use it. Integration in the above views is to be addressed by separate issues.

Steps

• [Actionable Observability] Implement new compact design for alert summary widget #141465
• [Actionable observability] Make the alert summary widget clickable #141467
• [Actionable Observability] Add time range filter to Alerts Summary Widget #139489
• [Actionable Observability] Add KQL filter capability to the Alerts Summary Widget #139481
• [Actionable Observability] Use new Alert Summary API in Alert Summary Widget #147762
• [Actionable Observability] Implement charts for Alert Summary Widget #147752
• [Actionable Observability] Scale Alert Summary Widget charts #148108
• [AO] Alert Summary Widget compact - new design #149239

Improvements

• [AO] Use the same time range in Alert Summary Widget and Alerts Table #147971
• [AO] Move Alert Summary Widget component to a better location #148106
• [AO] Use the EUI charts theme for Alert Summary Widget #148297

Dependencies

• [RAM] Create API to draw timelines of alerts on charts #141487

AC

After meeting with @vinaychandrasekhar and @emma-raffenne:

• [The alerts summary widget in the Rule Detail Page uses the newest design] to be discussed.
• Add integration with the hosted page, e.g., APM. The Alert Summary widget needs to interact with the hosted App. e.g., When the hosted App/page changes the time range, the alert widget should follow. (This AC could be done in a separate issue due to its complexity)

[elasticmachine]

Pinging @elastic/actionable-observability (Team: Actionable Observability)

[maryam-saeidi]

After a discussion within the team, since we don't have the active alert history in order to show the chart as it was shared in the design, we decided to only focus on showing the number of alerts and make the widget clickable and remove don't include charts for now.

Here is the new design shared by @maciejforcone: