Use context based solution instead of polling

elastic · Jul 5, 2022 · 6bd8326 · 6bd8326
1 parent dbe18e6
commit 6bd8326
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 43 deletions.
diff --git a/...pplications/fleet/components/fleet_server_instructions/hooks/use_wait_for_fleet_server.ts b/...pplications/fleet/components/fleet_server_instructions/hooks/use_wait_for_fleet_server.ts
@@ -6,9 +6,9 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 
-import { sendGetFleetStatus, useStartServices } from '../../../hooks';
+import { useFleetStatus, useStartServices } from '../../../hooks';
 
 const REFRESH_INTERVAL = 10000;
 
@@ -17,26 +17,25 @@ const REFRESH_INTERVAL = 10000;
  * in the `missing_requirements` list.
  */
 export const useWaitForFleetServer = () => {
-  const [isFleetServerReady, setIsFleetServerReady] = useState(false);
+  const fleetStatus = useFleetStatus();
   const { notifications } = useStartServices();
 
+  const isFleetServerReady =
+    fleetStatus.isReady && !fleetStatus.missingRequirements?.includes('fleet_server');
+
   useEffect(() => {
     let interval: ReturnType<typeof setInterval> | null = null;
 
     if (!isFleetServerReady) {
       interval = setInterval(async () => {
         try {
-          const res = await sendGetFleetStatus();
-
-          if (res.error) {
-            throw res.error;
-          }
-          if (res.data?.isReady && !res.data?.missing_requirements?.includes('fleet_server')) {
-            setIsFleetServerReady(true);
-
+          if (isFleetServerReady) {
             if (interval) {
               clearInterval(interval);
             }
+          } else {
+            fleetStatus.setForceDisplayInstructions(true);
+            fleetStatus.refresh();
           }
         } catch (err) {
           notifications.toasts.addError(err, {
@@ -55,7 +54,7 @@ export const useWaitForFleetServer = () => {
     };
 
     return cleanup;
-  }, [notifications.toasts, isFleetServerReady]);
+  }, [notifications.toasts, isFleetServerReady, fleetStatus]);
 
   return { isFleetServerReady };
 };
diff --git a/...ions/fleet/components/fleet_server_instructions/steps/confirm_fleet_server_connection.tsx b/...ions/fleet/components/fleet_server_instructions/steps/confirm_fleet_server_connection.tsx
@@ -13,7 +13,7 @@ import { EuiText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
-import { useFlyoutContext } from '../../../hooks';
+import { useFleetStatus, useFlyoutContext } from '../../../hooks';
 
 export function getConfirmFleetServerConnectionStep({
   disabled,
@@ -41,6 +41,12 @@ const ConfirmFleetServerConnectionStepContent: React.FunctionComponent<{
   isFleetServerReady: boolean;
 }> = ({ isFleetServerReady }) => {
   const flyoutContext = useFlyoutContext();
+  const fleetStatus = useFleetStatus();
+
+  const handleContinueClick = () => {
+    fleetStatus.forceDisplayInstructions = false;
+    flyoutContext.openEnrollmentFlyout();
+  };
 
   return isFleetServerReady ? (
     <>
@@ -53,7 +59,7 @@ const ConfirmFleetServerConnectionStepContent: React.FunctionComponent<{
 
       <EuiSpacer size="m" />
 
-      <EuiButton color="primary" onClick={flyoutContext.openEnrollmentFlyout}>
+      <EuiButton color="primary" onClick={handleContinueClick}>
         <FormattedMessage
           id="xpack.fleet.fleetServerFlyout.continueEnrollingButton"
           defaultMessage="Continue enrolling Elastic Agent"

diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/index.tsx
@@ -75,6 +75,9 @@ export const AgentsApp: React.FunctionComponent = () => {
     fleetStatus?.missingRequirements?.length === 1 &&
     fleetStatus.missingRequirements[0] === 'fleet_server';
 
+  const displayInstructions =
+    fleetStatus.forceDisplayInstructions || hasOnlyFleetServerMissingRequirement;
+
   if (
     !hasOnlyFleetServerMissingRequirement &&
     fleetStatus.missingRequirements &&
@@ -86,7 +89,7 @@ export const AgentsApp: React.FunctionComponent = () => {
     return <NoAccessPage />;
   }
 
-  const rightColumn = hasOnlyFleetServerMissingRequirement ? (
+  const rightColumn = displayInstructions ? (
     <>
       <EuiFlexGroup justifyContent="flexEnd">
         <EuiFlexItem grow={false}>
@@ -114,7 +117,7 @@ export const AgentsApp: React.FunctionComponent = () => {
             {fleetServerModalVisible && (
               <FleetServerUpgradeModal onClose={onCloseFleetServerModal} />
             )}
-            {hasOnlyFleetServerMissingRequirement ? (
+            {displayInstructions ? (
               <FleetServerRequirementPage showEnrollmentRecommendation={false} />
             ) : (
               <AgentListPage />

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,6 +15,8 @@ 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';
@@ -40,16 +42,11 @@ export const Instructions = (props: InstructionProps) => {
     refreshAgentPolicies,
   } = props;
   const fleetStatus = useFleetStatus();
-  const REFRESH_INTERVAL = 10 * 1000;
+  const { isUnhealthy: isFleetServerUnhealthy } = useFleetServerUnhealthy();
 
   useEffect(() => {
-    const interval = setInterval(() => {
-      fleetStatus.refresh();
-      refreshAgentPolicies();
-    }, REFRESH_INTERVAL);
-
-    return () => clearInterval(interval);
-  }, [fleetStatus, REFRESH_INTERVAL, refreshAgentPolicies]);
+    refreshAgentPolicies();
+  }, [refreshAgentPolicies]);
 
   const fleetServerAgentPolicies: string[] = useMemo(
     () => agentPolicies.filter((pol) => policyHasFleetServer(pol)).map((pol) => pol.id),
@@ -67,30 +64,27 @@ export const Instructions = (props: InstructionProps) => {
             .join(' or ')}`,
   });
 
-  const agentsWithFleetServers = agents?.items || [];
+  const fleetServers = agents?.items || [];
 
-  const hasFleetServerHosts = useMemo(() => {
-    return (settings?.fleet_server_hosts || []).length > 0;
+  const fleetServerHosts = useMemo(() => {
+    return settings?.fleet_server_hosts || [];
   }, [settings]);
 
-  const showAgentEnrollment = useMemo(
-    () => hasFleetServerHosts && fleetStatus.isReady && agentsWithFleetServers.length > 0,
-    [hasFleetServerHosts, fleetStatus.isReady, agentsWithFleetServers.length]
-  );
+  if (isLoadingAgents || isLoadingAgentPolicies) return <Loading size="l" />;
 
-  const showFleetServerEnrollment = useMemo(
-    () =>
-      !showAgentEnrollment ||
-      (fleetStatus.missingRequirements ?? []).some((r) => r === FLEET_SERVER_PACKAGE),
-    [fleetStatus.missingRequirements, showAgentEnrollment]
-  );
+  const hasNoFleetServerHost = fleetStatus.isReady && fleetServerHosts.length === 0;
 
-  const hasNoFleetServerHost = useMemo(
-    () => fleetStatus.isReady && (settings?.fleet_server_hosts || []).length === 0,
-    [fleetStatus.isReady, settings?.fleet_server_hosts]
-  );
+  const showAgentEnrollment =
+    fleetStatus.isReady &&
+    !isFleetServerUnhealthy &&
+    fleetServers.length > 0 &&
+    fleetServerHosts.length > 0;
+
+  const showFleetServerEnrollment =
+    fleetServers.length === 0 ||
+    isFleetServerUnhealthy ||
+    (fleetStatus.missingRequirements ?? []).some((r) => r === FLEET_SERVER_PACKAGE);
 
-  if (isLoadingAgents || isLoadingAgentPolicies) return <Loading size="l" />;
   if (!isIntegrationFlow && showAgentEnrollment) {
     setSelectionType('radio');
   } else {

diff --git a/x-pack/plugins/fleet/public/hooks/use_fleet_status.tsx b/x-pack/plugins/fleet/public/hooks/use_fleet_status.tsx
@@ -23,17 +23,22 @@ interface FleetStatusState {
 
 interface FleetStatus extends FleetStatusState {
   refresh: () => Promise<void>;
+  forceDisplayInstructions: boolean;
+  setForceDisplayInstructions: React.Dispatch<boolean>;
 }
 
 const FleetStatusContext = React.createContext<FleetStatus | undefined>(undefined);
 
 export const FleetStatusProvider: React.FC = ({ children }) => {
   const config = useConfig();
+  const [forceDisplayInstructions, setForceDisplayInstructions] = useState(false);
+
   const [state, setState] = useState<FleetStatusState>({
     enabled: config.agents.enabled,
     isLoading: false,
     isReady: false,
   });
+
   const sendGetStatus = useCallback(
     async function sendGetStatus() {
       try {
@@ -64,7 +69,9 @@ export const FleetStatusProvider: React.FC = ({ children }) => {
   const refresh = useCallback(() => sendGetStatus(), [sendGetStatus]);
 
   return (
-    <FleetStatusContext.Provider value={{ ...state, refresh }}>
+    <FleetStatusContext.Provider
+      value={{ ...state, refresh, forceDisplayInstructions, setForceDisplayInstructions }}
+    >
       {children}
     </FleetStatusContext.Provider>
   );