search

elastic / kibana

Your window into the Elastic Stack
https://www.elastic.co/products/kibana
Other
19.63k stars 8.22k forks source link

[Fleet] Update elements in integration policies table to work with multiple agent policies #186357

Closed criamico closed 1 month ago

criamico commented 4 months ago

Part of the reusable integration policies work.

Reassess how the elements in the Integrations Policies table need to be updated to take in account multiple agent policies.

Screenshot 2024-06-18 at 11 00 14

  1. The "Agents" column currently shows the number of agents enrolled to the first available agent policy and it doesn't take in account the other policies. Also, The link brings to the agent list page with a preselected query that currently only gets the first available policy. I think we should:
    • [ ] Show the combined number of agents
    • [ ] Fix the kuery used to build the link to the agent list page.
  2. The "Add agents" action opens the agent flyout, but it takes the id of the first available agent policy. Should we give the user the choice of the agent policy to select instead?
  3. The "Upgrade integration" action links to an url that uses the agent policy id. For multiple agent policies currently uses the first available agent policy. Like above, should we update it in some way?
elasticmachine commented 4 months ago

Pinging @elastic/fleet (Team:Fleet)

criamico commented 4 months ago

@nimarezainia what's your suggestion for these specific flows? Those are really small details in the UI but it could be a bit confusing for the user to be sent to a specific policy.

nimarezainia commented 3 months ago

@criamico sorry for the delay. These are great suggestions thank you. I had missed them originally to be honest.

kpollich commented 2 months ago

The "Add agents" action opens the agent flyout, but it takes the id of the first available agent policy. Should we give the user the choice of the agent policy to select instead? The "Upgrade integration" action links to an url that uses the agent policy id. For multiple agent policies currently uses the first available agent policy. Like above, should we update it in some way?

I think we should display a policy selector UI in both of these cases when there are multiple agent policies to choose from. Seems like something we could implement in a reusable way for both cases.

criamico commented 1 month ago

I think we should display a policy selector UI in both of these cases when there are multiple agent policies to choose from. Seems like something we could implement in a reusable way for both cases.

I'm looking at this suggestion, I think it is a good idea and I have a mock up of how it could look like. The copy needs to be improved but this is just to give a rough idea of how it could work out.

Agent count

In my opinion this count should show the total amount of agents across all the agent policies.

Image

Each one of those links brings the user to agent list page with the selected agents.

Add agent flow

Image

Image

Image

Other contextual menu items

For "Edit integration" and "Upgrade integration policy" we might do without any changes, since they both go to the package policy editor where the user can choose the agent policy to assign/unassign. The URL id is the first one to be found but probably it can be left as it is.

@nimarezainia @kpollich what do you think?

criamico commented 1 month ago

@formgeist Could you also take a look if the proposals I made above make sense?

kpollich commented 1 month ago

When clicking on this number, open a popup that shows a break up of the agents number enrolled to each policy. I did a (very) rough mock up that needs for sure a better wording. In my case I had only 10 agents enrolled on Policy 0, no agents on the other two policies.

This makes sense to me, but it might make more sense to show this in a popover on hover. Not sure what the standard UX would be for something like this, but on hover seems a bit more natural on first glance.

It opens up a modal where it's possible to choose one single agent policy from a list (Note that currently it opens directly the "add agent" flyout).

I do think going from modal -> flyout might be a bit unexpected here, and maybe doing everything in a single flyout would make sense. e.g. click "add agent" -> open flyout with ability to select agent policy -> flyout re-renders with enrollment steps for the selected policy once confirmed.

nimarezainia commented 1 month ago

@criamico just to confirm that in the 3rd picture, the user is only allowed to select one agent policy (from a selection of policies that the integration is shared across). Correct?

I really like this proposal. Thank you.

formgeist commented 1 month ago

I'll try my best to offer some feedback on the designs, but I might not have the entire context 🙂

When clicking on this number, open a popup that shows a break up of the agents number enrolled to each policy. I did a (very) rough mock up that needs for sure a better wording. In my case I had only 10 agents enrolled on Policy 0, no agents on the other two policies.

This makes sense to me, but it might make more sense to show this in a popover on hover. Not sure what the standard UX would be for something like this, but on hover seems a bit more natural on first glance.

The idea of summarising total of agents but then showing a "breakdown" of the distribution, I think the closest pattern we have in Kibana is when we're showing a breakdown of values for a specific field in e.g. Discover. We don't need to follow this to the tee, but at least the idea of showing it in a similar fashion would be good. I can create a small design task for coming up with a proposal - is this needed for work landing in the upcoming release?

Image

It opens up a modal where it's possible to choose one single agent policy from a list (Note that currently it opens directly the "add agent" flyout).

I do think going from modal -> flyout might be a bit unexpected here, and maybe doing everything in a single flyout would make sense. e.g. click "add agent" -> open flyout with ability to select agent policy -> flyout re-renders with enrollment steps for the selected policy once confirmed.

I have to agree - I imagine we have other flows where the user might need to choose agent policy when we add this capability (or not?), it would be better to integrate this into the existing flyout as an additional/conditional step before the install instructions.

criamico commented 1 month ago

Thanks everyone for your feedback! To summarize:

formgeist commented 1 month ago
  • Agent count: on hover display a breakdown of agent count values similar to the above screenshots. @formgeist We actually have this work planned in this sprint and the next. I'll start looking at your suggestions and I'll probably ask you for further feedback.

@criamico Let me know if you need design mocks for this, I can probably put in some time next week to help with Simona out this month on parental leave 👍

criamico commented 1 month ago

Let me know if you need design mocks for this @formgeist thanks it would be greatly appreciated!

I did a quick test based on what you suggested, however I think that this type of component is more suited for displaying a percentage rather than a number: Image Image

I'm not against using it, but maybe it needs some improvements. At the very least we need to show, for each policy:

Agent policy name - Agent count (ideally this should be a link that navigates to the agent list and select only those agents)

formgeist commented 1 month ago

@criamico Thanks for trying it out and sharing the results. I think we have two options; the EuiProgressBar will support count as well as percentages. From my investigations the total and distribution of policies varies quite often, not sure if that's true in a real environment?

Anyways, my proposals are as follows;

Option A: Show distribution by visualization

Image

Option B: Show values as table without distribution visualization

Image

The following enhancements are true for both;

criamico commented 1 month ago

@formgeist Thanks for the detailed feedback!

From my investigations the total and distribution of policies varies quite often, not sure if that's true in a real environment?

In a real environment we can have agent policies with few (or zero) agents but also agent policies with 10k+ agents. Picking option 1 would mean to retrieve the max value for the distribution, but it would be different for every agent policy and vary from 10 to 10k, which in my opinion is a bit confusing.

If it's ok with you we could go with option n.2, it's simple to read and provides all the info that the customer needs at a glance.

Regarding the enhancements:

Added "top values" label title to the listed values in the content to ensure that we do not wish to show more than 5 in the breakdown.

That's a good call, capping to 5 should be fine. We can support up to 500 policies but we don't want to overcrowd that popover. I'll make sure to order the policies by number of enrolled agents in descendent order.

Add a CTA for listing the total number of agents in the footer of the popover. I understood that we want to offer the user a choice of filtering by specific agent policy or all agents for the integration policy? Updated popover tittle to show "Agents breakdown"

Those are both great suggestions!

formgeist commented 1 month ago

@criamico I think option 2 is a great start anyhow and should work well within the constraints and container of the popover 👍

kpollich commented 1 month ago

cc @amolnater-qasource - This is the issue I brought up in our sync today. Looks like the label is already present so I think this is already on your radar 👍

amolnater-qasource commented 3 weeks ago

Hi @kpollich We have created the testcases for these changes.

Details are shared under https://github.com/elastic/kibana/issues/75867#issuecomment-2419113185

Please let us know if anything else is required from our end. Thanks!!