[Fleet] Added warning icon next to auto upgrade agents badge (#211551)

## Summary

Closes https://github.com/elastic/ingest-dev/issues/4731

Added warning icon to Agent policy details, next to Auto upgrade agents
badge if there are failures in agents upgrade.

UX Design:
<img width="1421" alt="image"
src="https://github.com/user-attachments/assets/a2c54fef-0100-48ed-9461-eb9f8c704a3d"
/>

UI:
<img width="1571" alt="image"
src="https://github.com/user-attachments/assets/ee061feb-c489-4637-b684-f489c822aab9"
/>

x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/details_page/components/header/manage_auto_upgrade_agents.tsx

@@ -0,0 +1,78 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useMemo } from 'react';
+import { FormattedMessage } from '@kbn/i18n-react';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiLink,
+  EuiNotificationBadge,
+  EuiToolTip,
+} from '@elastic/eui';
+
+import type { AgentPolicy } from '../../../../../types';
+import { useGetAutoUpgradeAgentsStatusQuery } from '../../../../../hooks';
+
+export interface Props {
+  agentPolicy: AgentPolicy;
+  isManageAutoUpgradeAgentsModalOpen: boolean;
+  setIsManageAutoUpgradeAgentsModalOpen: (isOpen: boolean) => void;
+}
+
+export const ManageAutoUpgradeAgentsBadge: React.FC<Props> = ({
+  agentPolicy,
+  isManageAutoUpgradeAgentsModalOpen,
+  setIsManageAutoUpgradeAgentsModalOpen,
+}: Props) => {
+  const { data: autoUpgradeAgentsStatus } = useGetAutoUpgradeAgentsStatusQuery(agentPolicy.id);
+  const hasErrors = useMemo(() => {
+    return autoUpgradeAgentsStatus?.currentVersions.some((value) => value.failedUpgradeAgents > 0);
+  }, [autoUpgradeAgentsStatus]);
+
+  return (
+    <EuiFlexGroup
+      gutterSize="xs"
+      justifyContent="flexEnd"
+      alignItems="center"
+      id="auto-upgrade-manage-button"
+    >
+      <EuiFlexItem grow={false}>
+        <EuiLink
+          onClick={() => {
+            setIsManageAutoUpgradeAgentsModalOpen(!isManageAutoUpgradeAgentsModalOpen);
+          }}
+        >
+          <FormattedMessage
+            id="xpack.fleet.policyDetails.summary.autoUpgradeButton"
+            defaultMessage="Manage"
+          />
+        </EuiLink>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiNotificationBadge color={agentPolicy.required_versions?.length ? 'accent' : 'subdued'}>
+          {agentPolicy.required_versions?.length || 0}
+        </EuiNotificationBadge>
+      </EuiFlexItem>
+      {hasErrors && (
+        <EuiFlexItem grow={false}>
+          <EuiToolTip
+            content={
+              <FormattedMessage
+                id="xpack.fleet.manageAutoUpgradeAgents.failedUpgradeTooltip"
+                defaultMessage="Some agents failed to upgrade, click on Manage to see details."
+              />
+            }
+          >
+            <EuiIcon type="warning" color="danger" />
+          </EuiToolTip>
+        </EuiFlexItem>
+      )}
+    </EuiFlexGroup>
+  );
+};

x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/details_page/components/header/right_content.tsx

@@ -21,7 +21,6 @@ import {
   EuiToolTip,
   EuiIconTip,
   EuiPortal,
-  EuiNotificationBadge,
 } from '@elastic/eui';
 
 import { useAgentPolicyRefresh, useAuthz, useLink } from '../../../../../hooks';
@@ -34,6 +33,8 @@ import { ManageAutoUpgradeAgentsModal } from '../../../../agents/components/mana
 import { AutoUpgradeAgentsTour } from '../../../components/auto_upgrade_agents_tour';
 import { ExperimentalFeaturesService } from '../../../../../services';
 
+import { ManageAutoUpgradeAgentsBadge } from './manage_auto_upgrade_agents';
+
 export interface HeaderRightContentProps {
   isLoading: boolean;
   agentPolicy?: AgentPolicy | null;
@@ -223,34 +224,13 @@ export const HeaderRightContent: React.FunctionComponent<HeaderRightContentProps
                         defaultMessage: 'Auto-upgrade agents',
                       }),
                       content: (
-                        <EuiFlexGroup
-                          gutterSize="xs"
-                          justifyContent="flexEnd"
-                          alignItems="center"
-                          id="auto-upgrade-manage-button"
-                        >
-                          <EuiFlexItem grow={false}>
-                            <EuiLink
-                              onClick={() => {
-                                setIsManageAutoUpgradeAgentsModalOpen(
-                                  !isManageAutoUpgradeAgentsModalOpen
-                                );
-                              }}
-                            >
-                              <FormattedMessage
-                                id="xpack.fleet.policyDetails.summary.autoUpgradeButton"
-                                defaultMessage="Manage"
-                              />
-                            </EuiLink>
-                          </EuiFlexItem>
-                          <EuiFlexItem grow={false}>
-                            <EuiNotificationBadge
-                              color={agentPolicy.required_versions?.length ? 'accent' : 'subdued'}
-                            >
-                              {agentPolicy.required_versions?.length || 0}
-                            </EuiNotificationBadge>
-                          </EuiFlexItem>
-                        </EuiFlexGroup>
+                        <ManageAutoUpgradeAgentsBadge
+                          agentPolicy={agentPolicy}
+                          isManageAutoUpgradeAgentsModalOpen={isManageAutoUpgradeAgentsModalOpen}
+                          setIsManageAutoUpgradeAgentsModalOpen={
+                            setIsManageAutoUpgradeAgentsModalOpen
+                          }
+                        />
                       ),
                     },
                     { isDivider: true },