[Infra UI] Add alerts to asset details flyout

[jennypavlova]

Closes #160371

Summary

This PR adds alerts section to the overview tab inside the asset details flyout component.

Notes: A lot of changes are extracting common components from the alerts tab to a common folder. The flyout version is not showing the chart so it's not exactly the same component but a big part of the logic is reused there. The tooltip content can be found in a Figma comment

Alerts summary widget changes:

After introducing the hideChart prop here in this PR I change the spinner type and size in case of no chart we want to have a smaller section with a smaller spinner:

Storybook

I added some changes to make the alerts widget show in the storybook [Workaround for storybook]

Testing

• Go to Hosts view and open the single host flyout - alerts section should be visible
• Alerts title icon should open a tooltip with links to alerts and alerts documentation
• Alerts links:
  • The Create rule link will open a flyout (on top, not closing the existing flyout) to create an inventory rule, when closed/saved rule the single host flyout should remain open
  • The Show All link should navigate to alerts and apply time range / host.name filter selected in the hosts view

alerts_section.mov

[apmmachine]

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

• /oblt-deploy : Deploy a Kibana instance using the Observability test environments.
• run elasticsearch-ci/docs : Re-trigger the docs validation. (use unformatted text in the comment!)

[jennypavlova]

This is needed for the story (otherwise the storybook shows an error). Not sure if we can do something better there to avoid this change.

[crespocarlos]

Would it work if you did this instead?

 const { inventoryPrefill } = useAlertPrefillContext();
  const { customMetrics = [] } = inventoryPrefill ?? {};

Does the problem happen because the customMetrics is null? I think your approach is ok, btw.

[jennypavlova]

The problem is that the inventoryPrefill is undefined when the component is used in the storybook context- that's why I used inventoryPrefill?.customMetrics. Your idea is good I will try it out

[jennypavlova]

Done ✅

[maryam-saeidi]

Can we use this abstraction in other usages of AlertSummaryWidget? It would be nice to improve this part also for other AlertSummaryWidgets if it is possible :)

[jennypavlova]

If you think it can help on the alerts and overview page feel free to open an issue to replace it there after this PR is merged 🙂 I am not super familiar with the implementation there so I would say that that's a bit out of the scope of this PR (already getting big and I see it's hard to get a review already 😅 )

[jennypavlova]

Another approach can be to have this refresh logic outside of the component and control it with the summaryTimeRange, then you can decide how frequent you want the component to be updated from outside of the component instead of inside.

@maryam-saeidi I am not sure if I can do it on the outside as I don't know at this moment if there is a new alert for the host so I need to refresh after creating a rule and if the alert is triggered (at this point I only know if the create rule flyout is open or not. I was thinking about having something like a refresh button appearing after the create rule flyout is closed but that's definitely not a good UX and I don't know when exactly I need to refresh because I don't control the request to get the alerts at this moment). So you can't somehow subscribe to the alerts and refresh the component if there are new alerts coming inside Alerts Summary? I get the idea to have a simple way to show the alerts but this can be an optional extra functionality where it's needed ( Also other places where we use the component can benefit from it )

Regarding the loading spinner:

Alternatively, if, in your use case, you want to show a loader every time this component is loaded, maybe we can configure this behaviour with a prop like showLoaderOnEveryLoad or something like that.

Where can I create an issue/feature request so you can prioritize this enhancement?

[CoenWarmer]

LGTM! Thanks for the changes.

[maryam-saeidi]

@jennypavlova AlertSummaryWidget is owned by @elastic/response-ops but originally developed by @elastic/actionable-observability.

@emma-raffenne @katrin-freihofner Any suggestion about where the enhancement tickets should be created and which team needs to prioritize it?

[emma-raffenne]

@maryam-saeidi

@emma-raffenne @katrin-freihofner Any suggestion about where the enhancement tickets should be created and which team needs to prioritize it?

I would recommend to create them with label Team: Actionable Observability for now.

[jennypavlova]

@emma-raffenne Thank you for your reply - I added the issues: #162167 and #162171

cc: @crespocarlos thank you for mentioning the issues!

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 37e8fca
• Storybooks Preview

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
infra	1393	1398	+5
observability	435	436	+1
total			+6

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
observability	506	508	+2

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
infra	1.9MB	2.0MB	+3.4KB
triggersActionsUi	1.4MB	1.4MB	+24.0B
total			+3.4KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
observability	61.3KB	61.6KB	+377.0B
triggersActionsUi	88.6KB	88.7KB	+126.0B
total			+503.0B

Unknown metric groups

API count

id	before	after	diff
observability	514	516	+2

History

• 💔 Build #143277 failed 81c0fa6
• 💔 Build #143274 failed ce1d761
• 💔 Build #143227 failed 6b24ae1
• 💔 Build #143210 failed 9e724c6
• 💚 Build #142967 succeeded ce1803e

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @jennypavlova