[Infra UI] Add alerts to asset details flyout

[jennypavlova]

Summary

The asset details flyout should include alerts. I should show the alerts widget with the number of alerts based on their type. There should be two actions available - navigate to see all alerts and create a rule.

Rules flyout

We will use the inventory rule flyout - same screen as the inventory button and Infrastructure -> Create Inventory Rule

Difference with inventory in inventory we prefill the metric in WHEN condition based on the selection

On the hosts view, we don't want to prefill the metric (we should keep the filter):

Note: It should be flexible on what kind of WHEN condition metric we want to pass as a consumer of the flyout

Design

MVP version

AC

• Alerts should be visible inside the asset details flyout
• Show all button should navigate to alerts
• Create rule button should open the flyout for creating a rule

[elasticmachine]

Pinging @elastic/infra-monitoring-ui (Team:Infra Monitoring UI)

[jennypavlova]

@roshan-elastic and @kkurstak I was investigating the alerts summary component provided and it includes the alerts counts we want and a chart. They provide 2 options - a full-size one we use on the host view and a compact one.

• Fullsize

- Compact I don't see an option provided to disable the chart but the compact version is not taking much space even with the line chart (maybe the border is not something that matches our design) - I tried to adapt it a bit with custom styles and that's the best version I got (still alerts count + line chart) If we don't want that chart at all maybe we can talk to the alerts team to adjust the component together to match our design needs (or if they can just provide the alerts count separately as a widget - I couldn't find something like that) I will still think about a better solution there 🤔

[roshan-elastic]

Hey @jennypavlova - thanks for the call out.

Can we try the compact one as a fallback but we can ask if they have plans for a version without a chart?

Question - is there a version with a table of the 'active' alerts we could use (sorted by duration)?

Not saying we want to use this but just understanding the limitations we have...

[jennypavlova]

Hey @roshan-elastic, thanks for the feedback!

Question - is there a version with a table of the 'active' alerts we could use (sorted by duration)?

So that's the default look with only active (as example):

I checked what options they provide so we can filter by status and there is an option to give a config where we can customize the sort order and the columns (haven't tried it directly but I saw that security team used some of the custom config options)

[jennypavlova]

Can we try the compact one as a fallback but we can ask if they have plans for a version without a chart?

I pinged the @elastic/response-ops team, let's see 🙂
So TLDR: Do you plan to have the alerts summary widget with an option to hide the chart ( showing only the alerts count)?

[roshan-elastic]

Hey @jennypavlova - thanks for that.

I'm thinking that we see if we can configure the alerts widget to:

• remove the chart (if possible)
• show the alerts like the designs (only showing the 'alert status', 'duration' and 'reason column')
• limit that to perhaps 3-5 rows...

Maybe we can see what it looks like together if it's quick to play around with it?

I think we should keep it pretty minimal in the fly-out but in the detail view it can have more options...

[jennypavlova]

Hi @roshan-elastic I opened a PR in the alerts widget to allow us to use only the count like the full size view but without the charts ( it's still waiting for a code review from response ops team) and after I finish the changes and merge the overview tab PR we can be on a good spot to try and see how it looks.

The flyout design doesn't have the table do we still want to make the changes for the full page view in this issue or we want to first do the flyout redesign and then adapt the full page view separately (in a new issue where we will add all needed things once the flyout is ready)?

I can still try how we can customise the table in the meantime so we will know how much we can adapt there - I am looking at their storybook and I saw that they support pagination (and columns customisation) which can be useful to show only 3-5 rows per page initially and then to have the option to still see the other alerts using the pages without the need to completely hide them (something we can try):

[roshan-elastic]

Hey @jennypavlova nice one.

Is it easy to try showing the first 3 issues in the fly-out design? I know the design doesn't show it right now but I think if it's minimal - it could be useful.

If it's easy to try, perhaps we could have a look?

[jennypavlova]

@roshan-elastic Thanks for explaining that! So the thing with the configuration of the alerts table is that the columns are configured in observability and we reuse their configuration so the part with changing the columns/order will be definitely more effort, regarding the limitation of the entries in the table (without pagination) and filtering by active status we can do that easily, I drafted something (still without the overview / hiding charts changes as mentioned they will be done after the other PRs )

// Here I have only 3 active

// I made one without the filter to show the limitation (so there will be only 3 shown)

I am still wondering If the table is really useful in a minimal setup where we have "show all" button where the user can see the "full" table 🤔 also it can be confusing for the user to only see 3 alerts when the total can be 10 for example?

[roshan-elastic]

Hey @jennypavlova , thanks for that!

Yeah, let's not customise the column order then - seems like a waste.

I think given the table's current state, it'll be hard to get something nice for the fly-out so let's go for the current design (and we can think about the table for the detail view when we get there).

OK?

[jennypavlova]

Hey @roshan-elastic Thanks for the feedback, sounds good!

[roshan-elastic]

Wow this looks great @jennypavlova @kkurstak - thanks for figuring this out!

Link

@katrin-freihofner - FYI