[Fleet] Fix syncing issue in Agent flyout

elastic · Jul 5, 2022 · dbe18e6 · dbe18e6
1 parent 42d52f6
commit dbe18e6
Showing 1 changed file with 26 additions and 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
@@ -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 {