[UII] Always show inactive and offline statuses in agent status bar (e…

…lastic#191535)

## Summary

Resolves elastic#181042. This PR makes it so that `Offline` and `Inactive`
statuses are always shown in the agent status bar even if their counts
are 0, so that they are more discoverable.

<img width="1115" alt="image"
src="https://github.com/user-attachments/assets/97fb7609-34b8-411a-950d-105902553d0e">

(cherry picked from commit 6b6bb3c)

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/status_badges.tsx

@@ -6,7 +6,7 @@
  */
 
 import { EuiFlexGroup, EuiHealth, EuiNotificationBadge, EuiFlexItem } from '@elastic/eui';
-import React, { memo, useMemo } from 'react';
+import React, { memo } from 'react';
 
 import {
   AGENT_STATUSES,
@@ -16,18 +16,11 @@ import {
 import type { SimplifiedAgentStatus } from '../../../../types';
 
 export const AgentStatusBadges: React.FC<{
-  showInactive?: boolean;
   agentStatus: { [k in SimplifiedAgentStatus]: number };
-}> = memo(({ agentStatus, showInactive }) => {
-  const agentStatuses = useMemo(() => {
-    return AGENT_STATUSES.filter((status) =>
-      showInactive ? true : status !== 'inactive' && status !== 'unenrolled'
-    );
-  }, [showInactive]);
-
+}> = memo(({ agentStatus }) => {
   return (
     <EuiFlexGroup gutterSize="m">
-      {agentStatuses.map((status) => (
+      {AGENT_STATUSES.map((status) => (
         <EuiFlexItem key={status} grow={false}>
           <AgentStatusBadge status={status} count={agentStatus[status] || 0} />
         </EuiFlexItem>

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/table_header.tsx

@@ -19,7 +19,6 @@ import type { SelectionMode } from './types';
 
 export const AgentTableHeader: React.FunctionComponent<{
   agentStatus?: { [k in SimplifiedAgentStatus]: number };
-  showInactive: boolean;
   totalAgents: number;
   selectableAgents: number;
   managedAgentsOnCurrentPage: number;
@@ -38,7 +37,6 @@ export const AgentTableHeader: React.FunctionComponent<{
   setSelectionMode,
   selectedAgents,
   setSelectedAgents,
-  showInactive,
   clearFilters,
   isUsingFilter,
 }) => {
@@ -69,9 +67,7 @@ export const AgentTableHeader: React.FunctionComponent<{
           ) : null}
         </EuiFlexGroup>
         <EuiFlexItem grow={false}>
-          {agentStatus && (
-            <AgentStatusBadges showInactive={showInactive} agentStatus={agentStatus} />
-          )}
+          {agentStatus && <AgentStatusBadges agentStatus={agentStatus} />}
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer size="s" />

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

@@ -168,10 +168,6 @@ export const AgentListPage: React.FunctionComponent<{}> = () => {
     setSortOrder(sort!.direction);
   };
 
-  const showInactive = useMemo(() => {
-    return selectedStatus.some((status) => status === 'inactive' || status === 'unenrolled');
-  }, [selectedStatus]);
-
   const renderActions = (agent: Agent) => {
     const agentPolicy =
       typeof agent.policy_id === 'string' ? agentPoliciesIndexedById[agent.policy_id] : undefined;
@@ -435,7 +431,6 @@ export const AgentListPage: React.FunctionComponent<{}> = () => {
       <EuiSpacer size="m" />
       {/* Agent total, bulk actions and status bar */}
       <AgentTableHeader
-        showInactive={showInactive}
         totalAgents={nAgentsInTable}
         agentStatus={agentsStatus}
         selectableAgents={agentsOnCurrentPage?.filter(isAgentSelectable).length || 0}