diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/index.tsx index a3c5fc4d09317..3f3e81fece979 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/index.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/index.tsx @@ -178,11 +178,17 @@ export const AgentListPage: React.FunctionComponent<{}> = () => { }); }, [search, selectedAgentPolicies, selectedStatus, selectedTags]); + // filters kuery for all tags + const kueryAllTags = useMemo(() => { + return getKuery({}); + }, []); + const [agentsOnCurrentPage, setAgentsOnCurrentPage] = useState([]); const [agentsStatus, setAgentsStatus] = useState< { [key in SimplifiedAgentStatus]: number } | undefined >(); const [allTags, setAllTags] = useState(); + const [allAddRemoveTags, setAllAddRemoveTags] = useState(); const [isLoading, setIsLoading] = useState(false); const [shownAgents, setShownAgents] = useState(0); const [inactiveShownAgents, setInactiveShownAgents] = useState(0); @@ -245,6 +251,7 @@ export const AgentListPage: React.FunctionComponent<{}> = () => { totalInactiveAgentsResponse, managedAgentPoliciesResponse, agentTagsResponse, + allAgentTagsResponse, ] = await Promise.all([ sendGetAgents({ page: pagination.currentPage, @@ -269,6 +276,10 @@ export const AgentListPage: React.FunctionComponent<{}> = () => { kuery: kuery && kuery !== '' ? kuery : undefined, showInactive, }), + sendGetAgentTags({ + kuery: kueryAllTags && kueryAllTags !== '' ? kueryAllTags : undefined, + showInactive, + }), ]); isLoadingVar.current = false; // Return if a newer request has been triggered @@ -287,10 +298,10 @@ export const AgentListPage: React.FunctionComponent<{}> = () => { if (managedAgentPoliciesResponse.error) { throw new Error(managedAgentPoliciesResponse.error.message); } - if (agentTagsResponse.error) { + if (agentTagsResponse.error || allAgentTagsResponse.error) { throw agentTagsResponse.error; } - if (!agentTagsResponse.data) { + if (!agentTagsResponse.data || !allAgentTagsResponse.data) { throw new Error('Invalid GET /agent/tags response'); } @@ -309,6 +320,11 @@ export const AgentListPage: React.FunctionComponent<{}> = () => { setAllTags(newAllTags); } + const newAllAddRemoveTags = allAgentTagsResponse.data.items; + if (!allAddRemoveTags || refreshTags || !isEqual(newAllAddRemoveTags, allAddRemoveTags)) { + setAllAddRemoveTags(newAllAddRemoveTags); + } + setAgentsOnCurrentPage(agentsResponse.data.items); setShownAgents(agentsResponse.data.total); setTotalInactiveAgents(totalInactiveAgentsResponse.data.results.inactive || 0); @@ -554,7 +570,7 @@ export const AgentListPage: React.FunctionComponent<{}> = () => { {showTagsAddRemove && ( {