[APM] Add the alert summary widget in the APM overview page

[emma-raffenne]

📝 Summary

We want to include the alerts summary widget in the overview page of APM, following the design described in this figma file.

The AlertSummaryWidget is already used in the rule details page . Clicking on the widget should send the user to the Alerts tab with the correct filtering.

Links

• Storybook

Dependencies

• [x] https://github.com/elastic/kibana/issues/146290

[elasticmachine]

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

[emma-raffenne]

@dannycroft As a continuation of the work started in 8.4.0 to show alerts information in APM views, there is a requirement to show the alert summary widget in the APM overview page. A shareable component has been implemented in 8.4.0, and the widget has been added to the rule detail page. There is a new design that we will implement for 8.5.0 and make it available for other views to use. Is it something APM UI team can address for 8.5.0?

[dannycroft]

@emma-raffenne I'll take a look and reach out with some questions, if I have any 👍🏻

[elasticmachine]

Pinging @elastic/apm-ui (Team:apm)

[emma-raffenne]

Latest version of the design is available. Link in the description of the issue has been updated accordingly.

[dannycroft]

Blocked by https://github.com/elastic/kibana/issues/137196. We will wait for the v2 design to be accomplished before adding to the service overview page.

[chrisdistasio]

Hi, a couple of questions on this:

1. do the sparklines in the widget show comparisons (when comparisons are selected in service overview). the figma makes it appear as so.
2. where do the links in the flyover lead a user to and with what context preserved? Do they go into the Alerts tab in the APM Service view or do they route into O11y alerts?

[emma-raffenne]

cc @maciejforcone and @maryam-saeidi

Hi, a couple of questions on this:

1. do the sparklines in the widget show comparisons (when comparisons are selected in service overview). the figma makes it appear as so.
2. where do the links in the flyover lead a user to and with what context preserved? Do they go into the Alerts tab in the APM Service view or do they route into O11y alerts?

[maryam-saeidi]

1. It's the comparison with the previous period's same range (that was my understanding, so if the time range was 15 mins, then it will be compared with 15 mins before that.) Now that I am checking the design again, I see 15 mins and the comparison is the day/week before, what does it exactly mean? Does it mean the same time yesterday?
2. It makes more sense to lead the user to the Alerts tab in the APM Service view since it already has the filter to show only APM-related alerts and not the rest of the observability alerts. Regarding the context, I am not sure besides active/recovered state and time, what other filters might be applicable in this case, @maciejforcone @vinaychandrasekhar any thought about it?

[maciejforcone]

2. That was the intention, we want to move user to the most contextual alerts view, and in case of APM this would be Alerts tab. And active/recovered state and time will be our only filters for alert summary widget (for now).

[maciejforcone]

1. Comparison timeframes would be the same as in Services list sparkline, so area chart is for previous, line chart is for last. So depending on user selection it would display the data from those two timeframes. Imo in views that don't have a comparison time filter - we can show last 24h (line) and previous 24h (area), on the sparkline, if it makes sense.

[maryam-saeidi]

@chrisdistasio What exactly does the comparison mean? How will it be used with the time range? Can you please share an example?

[sorenlouv]

1. It's the comparison with the previous period's same range (that was my understanding, so if the time range was 15 mins, then it will be compared with 15 mins before that.) Now that I am checking the design again, I see 15 mins and the comparison is the day/week before, what does it exactly mean? Does it mean the same time yesterday?

@chrisdistasio What exactly does the comparison mean? How will it be used with the time range? Can you please share an example?

If the current time is Wednesday 10:15 pm and the user selects "Last 15 minutes", and Comparison: "Day before" we display:

• Wednesday, 10:00 to 10:15 as the normal range
• Tuesday, 10:00 to 10:15 as the comparison range

Let me know if that makes sense.

[gbamparop]

@emma-raffenne @maryam-saeidi is this unblocked now? Could you please add some instructions or links / docs on the description about how the component should be used?

@boriskirov can you confirm whether this is the suggested place to add the widget in service overview?

[boriskirov]

Yes, let's go with this one. Changing it with available props by the team should be easy IMO.

[maryam-saeidi]

@gbamparop Yes, this component is ready, here is an example of how we included this component in the rule details page:

https://github.com/elastic/kibana/blob/main/x-pack/plugins/observability/public/pages/rule_details/index.tsx#L392,L397

Note that we don't have the previous period area chart at this step and we only show information for the selected time range. By clicking on the widget, we should send the user to the Alerts tab with the correct filtering (so you need to implement https://github.com/elastic/kibana/issues/146290 first to be able to filter alert's table)

You can reach me if you have any further questions about the implementation.

[gbamparop]

@maryam-saeidi thanks for the update, I've updated the description with the above details.

Note that we don't have the previous period area chart at this step and we only show information for the selected time range.

is there a plan / timeline to support time comparisons? @chrisdistasio is this a blocker for us?

[maryam-saeidi]

is there a plan / timeline to support time comparisons?

Not for v8.7.0, at the moment the focus is on the full-size version, I need to discuss the priority of it with Vinay and come back to you.