[Meta] Update the Fleet and Integrations UX to make the flow between Agents, Policies, and Integrations better

aarju commented 2 years ago

Describe the feature: When Managing Fleet a user will often transition between Agents, Agent Policies, Integration Policies, and Integration settings as part of their workflows. At this time the UX flow between these pages is disconnected and confusing. When managing Fleet the UX flow between each page should be smoother. Within our Fleet we had to set up multiple separate Agent policies for our endpoints and it took over an hour to fully configure 4 policies.

Describe a specific use case for the feature: This is the current workflow for creating a new Agent Policy and setting up integrations:

Go to Agent Policies and click Create Agent Policy
1. Fill out the basic information about the policy in the flyout and hit create. This closes the flyout.
Go back to the Agent Policies and find the policy you just created and click on it.
Click 'Add Integration' which takes you out of the Fleet section of Kibana and into the Integrations section.
Find an integration you want to add and click on it
Within the integration menu click 'Add Integration' for the second time.
1. Within the Add Integration menu you give this policy a name
2. Click the Existing Hosts tab
3. Find the policy you want to apply this to within the dropdown list of all of your fleet policies (we currently are over 20 policies).
4. Click Save and Continue
5. If you added the Endpoint Security integration you have to navigate to the Endpoint and Cloud Security integration, then click on the Integration Policies tab, then find your new policy you just created and edit the policy settings.
Repeat the previous steps for every integration you want to add to this policy.
When you are done adding integrations you have to manually navigate out of the Integrations page and back to the Fleet UI to add the next policy.
1. There isn't an intuitive way to navigate between Integrations and Fleet. You have to open the side menu and scroll all the way to the bottom to navigate between the two.

elasticmachine commented 2 years ago

Pinging @elastic/fleet (Team:Fleet)

jen-huang commented 2 years ago

Thanks for the feedback @aarju! Some of the steps here can be skipped. Agent policies do not have to set up before going into Integrations. At the time of adding an integration, a new agent policy can be created on-the-fly.

Clicking "Add integration" from within an agent policy should be preserving the context of that agent policy so that you do not have to search for the policy in the Existing hosts drop down.

Even without these two points, I agree we have a lot of room for improvement in the nth time user experience. cc @mukeshelastic and @dborodyansky: good feedback as we look towards improving that UX.

nimarezainia commented 2 years ago

@dborodyansky & @kpollich inline with what we discussed this morning. Can we use this issue to pursue the changes we discussed and hopefully @aarju & team can validate the changes.

Can we use the figma as definition for this?

mukeshelastic commented 1 year ago

@dborodyansky I am assuming the problems described here will be addressed by out fleet Information architecture redesign..

dborodyansky commented 1 year ago

@mukeshelastic Yes, I believe a good amount of the noted issues will be addressed by revising the IA as we have been discussing. There are some interaction specifics to sort out, but the problem here is well defined and addressable.

nimarezainia commented 1 year ago

@mukeshelastic @kpollich and @jen-huang : Not sure how to pursue this at the moment. Are the figma presented by Dmitry good enough for us to follow through on and perhaps get feedback from @aarju ?

kpollich commented 1 year ago

If I recall, the Figma mocks would be a good place to start a discussion, but they're more geared towards brainstorming than immediate execution. It'd be good to meet and discuss Dmitry's mocks and turn them into an actionable implementation plan here. Creating a hierarchical mapping of URL structure based on the mocks would be a good first step, as that would tell us how much code will need to change around Fleet's routing.

nimarezainia commented 1 year ago

thanks @kpollich. Do you have a link to those proposals?

mukeshelastic commented 1 year ago

Let's put this on hold until we have a design resource to handle this.

zombieFox commented 1 year ago

I believe this is addressed in Fleet IA #157725

jlind23 commented 11 months ago

@jen-huang as this is now ready from a design stand point i'm changing the status and moving it to one of our upcoming sprint.

nimarezainia commented 1 month ago

After discussing this with @kpollich , it was decided to narrow the scope of this issue to address the most needed changes proposed by this long standing issue to better the navigation for integrations. All discussions below are in reference to the details of design in this Figma.

Integrations tab

Introduce a new tab listing all the integrations. This provides a great summary of how integrations are currently deployed.

[ ] shows all the integration instances currently deployed.
[ ] Enables the user to bulk update integrations
[ ] Allow the user to see immediately which policies are consuming the integration. One modification to the design would be to show multiple agent policies (instead of a single one) in-order to accommodate Reusable Integrations Policies
[ ] Provide the modals shown below to inform the user how we are progressing.

Agent Policy tab

Minor changes here to make it a bit easier to navigate

[ ] not sure we need a "revision" column, what we current show should suffice.
[ ] We already have an Integrations column, the main change here is to allow the user to upgrade all the integrations on a per policy basis.
[ ] If any of the integrations in a policy are Reusable Integrations, we should show a warning that integration upgrade will affect other agent policies, and ask the user for confirmation before proceeding.

Bread Crumbs

[ ] When the user navigates away from Fleet to the integrations plugin, ensure they can easily get back by updating the breadcrumbs at the top of the page. Currently once they leave Fleet, they have to go to the side bar to get back. Make it a stress free navigation between Fleet-->Integrations.

kpollich commented 1 month ago

Thanks Nima - I can break this down into individual tracking issues. Perfect!

kpollich commented 3 weeks ago

When the user navigates away from Fleet to the integrations plugin, ensure they can easily get back by updating the breadcrumbs at the top of the page. Currently once they leave Fleet, they have to go to the side bar to get back. Make it a stress free navigation between Fleet-->Integrations.

Do we have specifics for what we need to build or change here?

kpollich commented 3 weeks ago

Per @nimarezainia - right now when adding an integration from the Fleet app, we redirect the user to the integrations app and then it's not possible to click back into Fleet using the breadcrumbs. We should have better, more dynamic breadcrumbs that allow the user to retrace their steps more quickly.

amitkanfer commented 3 weeks ago

@kpollich do we want to assign this to a sprint?

kpollich commented 2 weeks ago

Updated to clarify this is being treated as a meta. The sub-issues are scheduled in sprints.

elastic / kibana