[Fleet] Add view agents button to activity flyout #152555

criamico · 2023-03-02T11:20:09Z

Summary

Server side:

Create a new API that returns Agents by actions Ids:

POST kbn:/api/fleet/agents 
{
	actionIds: [
    	'action1',
        'action2'
    ]
}

UI:

Add "view agents" button to activity flyout; when clicking on it, the button will take the user to the agent list and display only the subset of agents affected by the action.

Also addiing a "clear filters" on top of the header to be able to remove the applied filter after the button is selected

I also did some refactoring of the AgentListPage component, mostly extracted some small components and the kueryBuilder function, that became its own function and it's also been tested.

Checklist

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)

criamico · 2023-03-09T15:22:08Z

@elasticmachine merge upstream

criamico · 2023-03-09T16:41:12Z

I'm opening the PR even though there are still some issues that I need to fix before merging, but I would like to have some early reviews .

In local testing I'm having cases where the agents parameter in the action has some ids, but when I search those ids they are not found, so the filtering doesn't really work. This happened for instance with the update tags actions. @juliaElastic do you know if there is some special case to handle there?

Also the "clear filters" button added on top of the table is almost always visible, as it's tied to the existing isUsingFilter parameter, I'd like to have some feedback on that as well.

elasticmachine · 2023-03-09T16:42:05Z

Pinging @elastic/fleet (Team:Fleet)

juliaElastic · 2023-03-10T08:11:05Z

In local testing I'm having cases where the agents parameter in the action has some ids, but when I search those ids they are not found, so the filtering doesn't really work. This happened for instance with the update tags actions. @juliaElastic do you know if there is some special case to handle there?

Yes, update tags action doesn't have real agent ids, see the end of this comment: #141206 (comment)

We might want to hide the View agents button for update tags at first.

...blic/applications/fleet/sections/agents/agent_list_page/components/agent_activity_flyout.tsx

juliaElastic · 2023-03-10T09:30:03Z

...gins/fleet/public/applications/fleet/sections/agents/agent_list_page/utils/get_kuery.test.ts

+
+import { getKuery } from './get_kuery';
+
+describe('getKuery', () => {


great refactor with tests!

Thank you! :D

juliaElastic · 2023-03-10T09:56:01Z

Tested locally and works well.
Noticed one thing, the default filters exclude the Inactive and Unenrolled agents, so when I click on View agents of a force unenroll action, there are no matches. Maybe we could remove all status filters so that e.g. Unenrolled agents are also returned by the search.

criamico · 2023-03-10T10:07:39Z

Yes, update tags action doesn't have real agent ids, see the end of this comment: #141206 (comment)

So should we even display the "view agents" button in this case? I could hide it in the case of tag updating. -edit I re-read and realised that you already answered :)

Also, do you know if we have other cases similar to this where the action doesn't hold the correct agent ids? Since the agent activity covers all type of actions we need to be sure that it work properly in all those cases.

criamico · 2023-03-10T10:09:58Z

Noticed one thing, the default filters exclude the Inactive and Unenrolled agents, so when I click on View agents of a force unenroll action, there are no matches. Maybe we could remove all status filters so that e.g. Unenrolled agents are also returned by the search.

Yes I noticed it as well. I'll remove all the filters when clicking the button and this will solve also the weird behaviour of the "clear filters" link.

criamico · 2023-03-10T10:12:14Z

@juliaElastic do you think that passing the kuery instead of the agent ids will be enough to handle the bulk actions case? you were suggesting to do this ticket in two passes but maybe this will be enough?

juliaElastic · 2023-03-10T10:46:04Z

@juliaElastic do you think that passing the kuery instead of the agent ids will be enough to handle the bulk actions case? you were suggesting to do this ticket in two passes but maybe this will be enough?

Passing the query would work in most cases, though there are some edge cases where it wouldn't e.g. if agent version was included in the filter, and the agents were upgraded, or if status:online agents were actioned and the agents are no longer online. We could add an explanation on the UI or try to include both in the filter e.g. (agentIds:1,2,3 OR kuery)

juliaElastic · 2023-03-10T15:51:03Z

...blic/applications/fleet/sections/agents/agent_list_page/components/agent_activity_flyout.tsx

        setSearch(kuery);
      }
+      if (action?.type === 'UNENROLL' || action?.type === 'FORCE_UNENROLL') {
+        setSelectedStatus(['unenrolled', 'inactive']);


Does it mean that only unenrolled and inactive statuses are visible or all statuses? I'll try it locally. Ideally it should be all statuses, so agents are visible if unenroll is in progress. For simple unenroll, agents will move to Offline at first.

I think you're right, I probably need to add all of them. I'm not sure if I need to add them in all cases or only for unenrolled agents.

It could be for all cases. Does the Clear filters button reset to default filters?

That applies the clearFIlters function here:

kibana/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/index.tsx

Lines 116 to 123 in 662fd85

const clearFilters = useCallback(() => {

setDraftKuery('');

setSearch('');

setSelectedAgentPolicies([]);

setSelectedStatus([]);

setSelectedTags([]);

setShowUpgradeable(false);

}, [setSearch, setDraftKuery, setSelectedAgentPolicies, setSelectedStatus, setShowUpgradeable]);

I changed so that it makes all possible statuses visible for all cases. I think I had misunderstood how this filtering works.

...blic/applications/fleet/sections/agents/agent_list_page/components/agent_activity_flyout.tsx

juliaElastic

LGTM, tested locally

criamico · 2023-03-13T10:29:03Z

@elasticmachine merge upstream

kibana-ci · 2023-03-13T11:31:33Z

💚 Build Succeeded

Buildkite Build
Commit: 8eac150

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`fleet`	795	796	+1

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
`fleet`	990	991	+1

Async chunks

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

id	before	after	diff
`fleet`	937.2KB	939.1KB	+1.9KB

Page load bundle

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

id	before	after	diff
`fleet`	125.3KB	125.6KB	+248.0B

Unknown metric groups

API count

id	before	after	diff
`fleet`	1095	1096	+1

ESLint disabled line counts

id	before	after	diff
`securitySolution`	433	436	+3

Total ESLint disabled count

id	before	after	diff
`securitySolution`	513	516	+3

History

💚 Build #113369 succeeded 73b5255
💚 Build #113296 succeeded a7a5b1c
💚 Build #113064 succeeded a4d1825
💔 Build #113028 failed 1f39d84
💔 Build #112984 failed 77566b4
💔 Build #112810 failed ee473ea

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

cc @criamico

Part of #141206 ## Summary ### Server side: - Create a new API that returns Agents by actions Ids: ``` POST kbn:/api/fleet/agents { actionIds: [ 'action1', 'action2' ] } ``` ### UI: Add "view agents" button to activity flyout; when clicking on it, the button will take the user to the agent list and display only the subset of agents affected by the action. <img width="1100" alt="Screenshot 2023-03-09 at 16 27 41" src="https://user-images.githubusercontent.com/16084106/224072551-bf7b6cf3-9f32-4a79-8e61-d7dc35f4db54.png"> Also addiing a "clear filters" on top of the header to be able to remove the applied filter after the button is selected I also did some refactoring of the `AgentListPage` component, mostly extracted some small components and the `kueryBuilder` function, that became its own function and it's also been tested. ### Checklist - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) --------- Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

[Fleet] Add view agents button to activity flyout

f1ddbb3

criamico self-assigned this Mar 2, 2023

criamico added 12 commits March 2, 2023 12:22

Merge branch 'main' into agent_activity/view_agents

edf078e

Add integration tests

5a37c1e

Add hook

92084ea

Merge branch 'main' into agent_activity/view_agents

c95391c

Implement UI filtering

1b0591d

Merge branch 'main' into agent_activity/view_agents

aa04900

Refactoring

33bf72b

Fix linter check

ee473ea

Pass agent ids via kuery; some more refactoring

580ce1e

Index changes missing

77566b4

Add tests

1f39d84

Small changes

38d0d48

criamico added the Team:Fleet Team label for Observability Data Collection Fleet team label Mar 9, 2023

Merge branch 'main' into agent_activity/view_agents

a4d1825

criamico added v8.8.0 release_note:skip Skip the PR/issue when compiling release notes labels Mar 9, 2023

criamico marked this pull request as ready for review March 9, 2023 16:42

criamico requested a review from a team as a code owner March 9, 2023 16:42

juliaElastic self-requested a review March 9, 2023 16:45

criamico mentioned this pull request Mar 9, 2023

[Fleet] Refactor AgentListPage component #131153

Closed

juliaElastic reviewed Mar 10, 2023

View reviewed changes

...blic/applications/fleet/sections/agents/agent_list_page/components/agent_activity_flyout.tsx Outdated Show resolved Hide resolved

juliaElastic reviewed Mar 10, 2023

View reviewed changes

criamico added 3 commits March 10, 2023 14:37

Addressing code review comments

a7a5b1c

Fix case when agent is unenrolled

631d55f

Add openapi specs

894d318

criamico requested a review from juliaElastic March 10, 2023 15:32

juliaElastic reviewed Mar 10, 2023

View reviewed changes

Fix filters behavior

73b5255

juliaElastic reviewed Mar 13, 2023

View reviewed changes

...blic/applications/fleet/sections/agents/agent_list_page/components/agent_activity_flyout.tsx Outdated Show resolved Hide resolved

juliaElastic approved these changes Mar 13, 2023

View reviewed changes

Use constant in place of list of statuses

0f12712

Merge branch 'main' into agent_activity/view_agents

8eac150

criamico merged commit eb60253 into elastic:main Mar 13, 2023

kibanamachine added the backport:skip This commit does not require backporting label Mar 13, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Fleet] Add view agents button to activity flyout #152555

[Fleet] Add view agents button to activity flyout #152555

criamico commented Mar 2, 2023 •

edited

Loading

criamico commented Mar 9, 2023

criamico commented Mar 9, 2023

elasticmachine commented Mar 9, 2023

juliaElastic commented Mar 10, 2023 •

edited

Loading

juliaElastic Mar 10, 2023

criamico Mar 10, 2023

juliaElastic commented Mar 10, 2023

criamico commented Mar 10, 2023 •

edited

Loading

criamico commented Mar 10, 2023

criamico commented Mar 10, 2023

juliaElastic commented Mar 10, 2023

juliaElastic Mar 10, 2023

criamico Mar 10, 2023 •

edited

Loading

juliaElastic Mar 10, 2023

criamico Mar 10, 2023

criamico Mar 10, 2023

juliaElastic left a comment

criamico commented Mar 13, 2023

kibana-ci commented Mar 13, 2023

API count

ESLint disabled line counts

Total ESLint disabled count


		import { getKuery } from './get_kuery';

		describe('getKuery', () => {

	const clearFilters = useCallback(() => {
	setDraftKuery('');
	setSearch('');
	setSelectedAgentPolicies([]);
	setSelectedStatus([]);
	setSelectedTags([]);
	setShowUpgradeable(false);
	}, [setSearch, setDraftKuery, setSelectedAgentPolicies, setSelectedStatus, setShowUpgradeable]);

[Fleet] Add view agents button to activity flyout #152555

[Fleet] Add view agents button to activity flyout #152555

Conversation

criamico commented Mar 2, 2023 • edited Loading

Summary

Server side:

UI:

Checklist

criamico commented Mar 9, 2023

criamico commented Mar 9, 2023

elasticmachine commented Mar 9, 2023

juliaElastic commented Mar 10, 2023 • edited Loading

juliaElastic Mar 10, 2023

Choose a reason for hiding this comment

criamico Mar 10, 2023

Choose a reason for hiding this comment

juliaElastic commented Mar 10, 2023

criamico commented Mar 10, 2023 • edited Loading

criamico commented Mar 10, 2023

criamico commented Mar 10, 2023

juliaElastic commented Mar 10, 2023

juliaElastic Mar 10, 2023

Choose a reason for hiding this comment

criamico Mar 10, 2023 • edited Loading

Choose a reason for hiding this comment

juliaElastic Mar 10, 2023

Choose a reason for hiding this comment

criamico Mar 10, 2023

Choose a reason for hiding this comment

criamico Mar 10, 2023

Choose a reason for hiding this comment

juliaElastic left a comment

Choose a reason for hiding this comment

criamico commented Mar 13, 2023

kibana-ci commented Mar 13, 2023

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Page load bundle

API count

ESLint disabled line counts

Total ESLint disabled count

History

criamico commented Mar 2, 2023 •

edited

Loading

juliaElastic commented Mar 10, 2023 •

edited

Loading

criamico commented Mar 10, 2023 •

edited

Loading

criamico Mar 10, 2023 •

edited

Loading