From dbe18e6fd25338674cdbade64a45ea3d8b100cee Mon Sep 17 00:00:00 2001
From: criamico <mariacristina.amico@elastic.co>
Date: Tue, 5 Jul 2022 18:06:51 +0200
Subject: [PATCH] [Fleet] Fix syncing issue in Agent flyout

---
 .../agent_enrollment_flyout/instructions.tsx  | 46 +++++++++++--------
 1 file changed, 26 insertions(+), 20 deletions(-)

diff --git a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/instructions.tsx b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/instructions.tsx
index 97c0542ab2477..3619f6177cd53 100644
--- a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/instructions.tsx
+++ b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/instructions.tsx
@@ -15,8 +15,6 @@ import { FleetServerRequirementPage } from '../../applications/fleet/sections/ag
 
 import { AGENTS_PREFIX, FLEET_SERVER_PACKAGE, SO_SEARCH_LIMIT } from '../../constants';
 
-import { useFleetServerUnhealthy } from '../../applications/fleet/sections/agents/hooks/use_fleet_server_unhealthy';
-
 import { Loading } from '..';
 
 import { policyHasFleetServer } from '../../services';
@@ -42,11 +40,16 @@ export const Instructions = (props: InstructionProps) => {
     refreshAgentPolicies,
   } = props;
   const fleetStatus = useFleetStatus();
-  const { isUnhealthy: isFleetServerUnhealthy } = useFleetServerUnhealthy();
+  const REFRESH_INTERVAL = 10 * 1000;
 
   useEffect(() => {
-    refreshAgentPolicies();
-  }, [refreshAgentPolicies]);
+    const interval = setInterval(() => {
+      fleetStatus.refresh();
+      refreshAgentPolicies();
+    }, REFRESH_INTERVAL);
+
+    return () => clearInterval(interval);
+  }, [fleetStatus, REFRESH_INTERVAL, refreshAgentPolicies]);
 
   const fleetServerAgentPolicies: string[] = useMemo(
     () => agentPolicies.filter((pol) => policyHasFleetServer(pol)).map((pol) => pol.id),
@@ -64,27 +67,30 @@ export const Instructions = (props: InstructionProps) => {
             .join(' or ')}`,
   });
 
-  const fleetServers = agents?.items || [];
+  const agentsWithFleetServers = agents?.items || [];
 
-  const fleetServerHosts = useMemo(() => {
-    return settings?.fleet_server_hosts || [];
+  const hasFleetServerHosts = useMemo(() => {
+    return (settings?.fleet_server_hosts || []).length > 0;
   }, [settings]);
 
-  if (isLoadingAgents || isLoadingAgentPolicies) return <Loading size="l" />;
-
-  const hasNoFleetServerHost = fleetStatus.isReady && fleetServerHosts.length === 0;
+  const showAgentEnrollment = useMemo(
+    () => hasFleetServerHosts && fleetStatus.isReady && agentsWithFleetServers.length > 0,
+    [hasFleetServerHosts, fleetStatus.isReady, agentsWithFleetServers.length]
+  );
 
-  const showAgentEnrollment =
-    fleetStatus.isReady &&
-    !isFleetServerUnhealthy &&
-    fleetServers.length > 0 &&
-    fleetServerHosts.length > 0;
+  const showFleetServerEnrollment = useMemo(
+    () =>
+      !showAgentEnrollment ||
+      (fleetStatus.missingRequirements ?? []).some((r) => r === FLEET_SERVER_PACKAGE),
+    [fleetStatus.missingRequirements, showAgentEnrollment]
+  );
 
-  const showFleetServerEnrollment =
-    fleetServers.length === 0 ||
-    isFleetServerUnhealthy ||
-    (fleetStatus.missingRequirements ?? []).some((r) => r === FLEET_SERVER_PACKAGE);
+  const hasNoFleetServerHost = useMemo(
+    () => fleetStatus.isReady && (settings?.fleet_server_hosts || []).length === 0,
+    [fleetStatus.isReady, settings?.fleet_server_hosts]
+  );
 
+  if (isLoadingAgents || isLoadingAgentPolicies) return <Loading size="l" />;
   if (!isIntegrationFlow && showAgentEnrollment) {
     setSelectionType('radio');
   } else {