[8.x] [Fleet] Fix agents count in agent list table and add tooltip with 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)](https://github.com/elastic/kibana/pull/197834)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Cristina Amico <criamico@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
2025-04-23 17:28:26 -04:00 · 2024-10-29 04:45:37 +11:00 · 2024-10-29 04:45:37 +11:00 · a01ce27674
commit a01ce27674
parent f9c8127c06
5 changed files with 62 additions and 15 deletions
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agents_selection_status.tsx
+++ b/x-pack/plugins/fleet/public/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 ? (
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/bulk_actions.tsx
+++ b/x-pack/plugins/fleet/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
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/table_header.tsx
+++ b/x-pack/plugins/fleet/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}
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/hooks/use_fetch_agents_data.tsx
+++ b/x-pack/plugins/fleet/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,
    ]
  );
--- 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}