[8.x] [Fleet] Fix agents count in agent list table and add tooltip wi…

…th correct info (#197834) (#198002) # Backport This will backport the following commits from `main` to `8.x`: - [[Fleet] Fix agents count in agent list table and add tooltip with correct info (#197834)](#197834)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Cristina Amico <[email protected]> Co-authored-by: Elastic Machine <[email protected]>
elastic · Oct 28, 2024 · a01ce27 · a01ce27
1 parent f9c8127
commit a01ce27
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 15 deletions.
diff --git a/...applications/fleet/sections/agents/agent_list_page/components/agents_selection_status.tsx b/...applications/fleet/sections/agents/agent_list_page/components/agents_selection_status.tsx
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import { EuiFlexGroup, EuiFlexItem, EuiText, EuiButtonEmpty } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiText, EuiButtonEmpty, EuiIconTip } from '@elastic/eui';
 import { FormattedMessage, FormattedNumber } from '@kbn/i18n-react';
 
 import { SO_SEARCH_LIMIT } from '../../../../constants';
@@ -33,6 +33,7 @@ const Button = styled(EuiButtonEmpty)`
 
 export const AgentsSelectionStatus: React.FunctionComponent<{
   totalAgents: number;
+  totalManagedAgents: number;
   selectableAgents: number;
   managedAgentsOnCurrentPage: number;
   selectionMode: SelectionMode;
@@ -41,6 +42,7 @@ export const AgentsSelectionStatus: React.FunctionComponent<{
   setSelectedAgents: (agents: Agent[]) => void;
 }> = ({
   totalAgents,
+  totalManagedAgents,
   selectableAgents,
   managedAgentsOnCurrentPage,
   selectionMode,
@@ -71,11 +73,28 @@ export const AgentsSelectionStatus: React.FunctionComponent<{
                 }}
               />
             ) : (
-              <FormattedMessage
-                id="xpack.fleet.agentBulkActions.totalAgents"
-                defaultMessage="Showing {count, plural, one {# agent} other {# agents}}"
-                values={{ count: totalAgents }}
-              />
+              <>
+                <FormattedMessage
+                  id="xpack.fleet.agentBulkActions.totalAgents"
+                  defaultMessage="Showing {count, plural, one {# agent} other {# agents}}"
+                  values={{ count: totalAgents }}
+                />{' '}
+                <EuiIconTip
+                  type="iInCircle"
+                  content={
+                    <FormattedMessage
+                      data-test-subj="selectedAgentCountTooltip"
+                      id="xpack.fleet.agentBulkActions.agentsBreakDownTooltip"
+                      defaultMessage=" {totalAgents} total agents: {totalSelected} user-managed agents, {totalManagedAgents} on hosted policies"
+                      values={{
+                        totalAgents,
+                        totalManagedAgents,
+                        totalSelected: totalAgents - totalManagedAgents,
+                      }}
+                    />
+                  }
+                />
+              </>
             )}
           </EuiText>
         </EuiFlexItem>
@@ -96,7 +115,24 @@ export const AgentsSelectionStatus: React.FunctionComponent<{
                     selectionMode,
                     count: selectedAgents.length,
                   }}
-                />
+                />{' '}
+                {selectionMode === 'query' && (
+                  <EuiIconTip
+                    type="iInCircle"
+                    content={
+                      <FormattedMessage
+                        data-test-subj="selectedAgentCountTooltip"
+                        id="xpack.fleet.agentBulkActions.agentsSelectedTooltip"
+                        defaultMessage="{totalSelected} user-managed agents selected: {totalAgents} total agents, {totalManagedAgents} on hosted policies. Most actions are only available to user-managed agents."
+                        values={{
+                          totalAgents,
+                          totalManagedAgents,
+                          totalSelected: totalAgents - totalManagedAgents,
+                        }}
+                      />
+                    }
+                  />
+                )}
               </EuiText>
             </EuiFlexItem>
             {showSelectEverything ? (

diff --git a/...eet/public/applications/fleet/sections/agents/agent_list_page/components/bulk_actions.tsx b/...eet/public/applications/fleet/sections/agents/agent_list_page/components/bulk_actions.tsx
@@ -77,7 +77,7 @@ export const AgentBulkActions: React.FunctionComponent<Props> = ({
   const [isRequestDiagnosticsModalOpen, setIsRequestDiagnosticsModalOpen] =
     useState<boolean>(false);
 
-  // update the query removing the "managed" agents
+  // update the query removing the "managed" agents in any state (unenrolled, offline, etc)
   const selectionQuery = useMemo(() => {
     if (totalManagedAgentIds.length) {
       const excludedKuery = `${AGENTS_PREFIX}.agent.id : (${totalManagedAgentIds

diff --git a/...eet/public/applications/fleet/sections/agents/agent_list_page/components/table_header.tsx b/...eet/public/applications/fleet/sections/agents/agent_list_page/components/table_header.tsx
@@ -21,6 +21,7 @@ export const AgentTableHeader: React.FunctionComponent<{
   agentStatus?: { [k in SimplifiedAgentStatus]: number };
   totalAgents: number;
   selectableAgents: number;
+  totalManagedAgents: number;
   managedAgentsOnCurrentPage: number;
   selectionMode: SelectionMode;
   setSelectionMode: (mode: SelectionMode) => void;
@@ -31,6 +32,7 @@ export const AgentTableHeader: React.FunctionComponent<{
 }> = ({
   agentStatus,
   totalAgents,
+  totalManagedAgents,
   selectableAgents,
   managedAgentsOnCurrentPage,
   selectionMode,
@@ -47,6 +49,7 @@ export const AgentTableHeader: React.FunctionComponent<{
           <EuiFlexItem grow={false}>
             <AgentsSelectionStatus
               totalAgents={totalAgents}
+              totalManagedAgents={totalManagedAgents}
               selectableAgents={selectableAgents}
               managedAgentsOnCurrentPage={managedAgentsOnCurrentPage}
               selectionMode={selectionMode}

diff --git a/...public/applications/fleet/sections/agents/agent_list_page/hooks/use_fetch_agents_data.tsx b/...public/applications/fleet/sections/agents/agent_list_page/hooks/use_fetch_agents_data.tsx
@@ -306,14 +306,18 @@ export function useFetchAgentsData() {
             setTotalManagedAgentIds([]);
             setManagedAgentsOnCurrentPage(0);
           } else {
-            // Find all the agents that have managed policies and are not unenrolled
-            const policiesKuery = managedAgentPolicies
-              .map((policy) => `policy_id:"${policy.id}"`)
-              .join(' or ');
+            // Find all the agents that have managed policies
+            // to the correct ids we need to build the kuery applying the same filters as the global ones
+            const managedPoliciesKuery = getKuery({
+              search,
+              selectedAgentPolicies: managedAgentPolicies.map((policy) => policy.id),
+              selectedTags,
+              selectedStatus,
+            });
             const response = await sendGetAgents({
-              kuery: `NOT (status:unenrolled) and ${policiesKuery}`,
+              kuery: `${managedPoliciesKuery}`,
               perPage: SO_SEARCH_LIMIT,
-              showInactive: true,
+              showInactive,
             });
             if (response.error) {
               throw new Error(response.error.message);
@@ -350,7 +354,6 @@ export function useFetchAgentsData() {
       fetchDataAsync();
     },
     [
-      fullAgentPolicyFecher,
       pagination.currentPage,
       pagination.pageSize,
       kuery,
@@ -359,8 +362,12 @@ export function useFetchAgentsData() {
       showInactive,
       showUpgradeable,
       displayAgentMetrics,
+      fullAgentPolicyFecher,
       allTags,
       latestAgentActionErrors,
+      search,
+      selectedTags,
+      selectedStatus,
       notifications.toasts,
     ]
   );

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
@@ -434,6 +434,7 @@ export const AgentListPage: React.FunctionComponent<{}> = () => {
       {/* Agent total, bulk actions and status bar */}
       <AgentTableHeader
         totalAgents={nAgentsInTable}
+        totalManagedAgents={totalManagedAgentIds.length || 0}
         agentStatus={agentsStatus}
         selectableAgents={agentsOnCurrentPage?.filter(isAgentSelectable).length || 0}
         managedAgentsOnCurrentPage={managedAgentsOnCurrentPage}