[Fleet] refresh policies on create and flyout open (#125499)

* refresh policies on create and flyout open * fix checks * fixed scenario when newly created policy should be preselected
elastic · Feb 14, 2022 · b4855ba · b4855ba
1 parent b51c87f
commit b4855ba
Show file tree

Hide file tree

Showing 7 changed files with 275 additions and 245 deletions.
diff --git a/...ck/plugins/fleet/public/components/agent_enrollment_flyout/agent_policy_select_create.tsx b/...ck/plugins/fleet/public/components/agent_enrollment_flyout/agent_policy_select_create.tsx
@@ -25,6 +25,7 @@ interface Props {
   selectedApiKeyId?: string;
   onKeyChange?: (key?: string) => void;
   isFleetServerPolicy?: boolean;
+  policyId?: string;
 }
 
 export const SelectCreateAgentPolicy: React.FC<Props> = ({
@@ -35,14 +36,15 @@ export const SelectCreateAgentPolicy: React.FC<Props> = ({
   selectedApiKeyId,
   onKeyChange,
   isFleetServerPolicy,
+  policyId,
 }) => {
   const [showCreatePolicy, setShowCreatePolicy] = useState(agentPolicies.length === 0);
 
   const [createStatus, setCreateStatus] = useState(CREATE_STATUS.INITIAL);
 
   const [newName, setNewName] = useState(incrementPolicyName(agentPolicies, isFleetServerPolicy));
 
-  const [selectedAgentPolicy, setSelectedAgentPolicy] = useState<string | undefined>(undefined);
+  const [selectedAgentPolicy, setSelectedAgentPolicy] = useState<string | undefined>(policyId);
 
   useEffect(() => {
     setShowCreatePolicy(agentPolicies.length === 0);

diff --git a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_policy_selection.tsx b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_policy_selection.tsx
@@ -154,7 +154,7 @@ export const EnrollmentStepAgentPolicy: React.FC<Props> = (props) => {
             value: agentPolicy.id,
             text: agentPolicy.name,
           }))}
-          value={selectedAgentPolicyId || undefined}
+          value={selectedAgentPolicyId}
           onChange={(e) => setSelectedAgentPolicyId(e.target.value)}
           aria-label={i18n.translate(
             'xpack.fleet.enrollmentStepAgentPolicy.policySelectAriaLabel',

diff --git a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/index.tsx b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/index.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import {
   EuiFlyout,
   EuiFlyoutBody,
@@ -22,7 +22,12 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 
-import { useGetSettings, sendGetOneAgentPolicy, useFleetStatus } from '../../hooks';
+import {
+  useGetSettings,
+  sendGetOneAgentPolicy,
+  useFleetStatus,
+  useGetAgentPolicies,
+} from '../../hooks';
 import { FLEET_SERVER_PACKAGE } from '../../constants';
 import type { PackagePolicy } from '../../types';
 
@@ -47,7 +52,6 @@ export * from './steps';
 export const AgentEnrollmentFlyout: React.FunctionComponent<Props> = ({
   onClose,
   agentPolicy,
-  agentPolicies,
   viewDataStep,
   defaultMode = 'managed',
 }) => {
@@ -60,6 +64,24 @@ export const AgentEnrollmentFlyout: React.FunctionComponent<Props> = ({
   const [policyId, setSelectedPolicyId] = useState(agentPolicy?.id);
   const [isFleetServerPolicySelected, setIsFleetServerPolicySelected] = useState<boolean>(false);
 
+  // loading the latest agentPolicies for add agent flyout
+  const {
+    data: agentPoliciesData,
+    isLoading: isLoadingAgentPolicies,
+    resendRequest: refreshAgentPolicies,
+  } = useGetAgentPolicies({
+    page: 1,
+    perPage: 1000,
+    full: true,
+  });
+
+  const agentPolicies = useMemo(() => {
+    if (!isLoadingAgentPolicies) {
+      return agentPoliciesData?.items;
+    }
+    return [];
+  }, [isLoadingAgentPolicies, agentPoliciesData?.items]);
+
   useEffect(() => {
     async function checkPolicyIsFleetServer() {
       if (policyId && setIsFleetServerPolicySelected) {
@@ -143,9 +165,14 @@ export const AgentEnrollmentFlyout: React.FunctionComponent<Props> = ({
             agentPolicies={agentPolicies}
             viewDataStep={viewDataStep}
             isFleetServerPolicySelected={isFleetServerPolicySelected}
+            refreshAgentPolicies={refreshAgentPolicies}
           />
         ) : (
-          <StandaloneInstructions agentPolicy={agentPolicy} agentPolicies={agentPolicies} />
+          <StandaloneInstructions
+            agentPolicy={agentPolicy}
+            agentPolicies={agentPolicies}
+            refreshAgentPolicies={refreshAgentPolicies}
+          />
         )}
       </EuiFlyoutBody>
       <EuiFlyoutFooter>

diff --git a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/managed_instructions.tsx b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/managed_instructions.tsx
@@ -11,13 +11,7 @@ import type { EuiContainedStepProps } from '@elastic/eui/src/components/steps/st
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
-import {
-  useGetOneEnrollmentAPIKey,
-  useLink,
-  useFleetStatus,
-  useGetAgents,
-  useGetAgentPolicies,
-} from '../../hooks';
+import { useGetOneEnrollmentAPIKey, useLink, useFleetStatus, useGetAgents } from '../../hooks';
 
 import { ManualInstructions } from '../../components/enrollment_instructions';
 import {
@@ -34,9 +28,7 @@ import { policyHasFleetServer } from '../../applications/fleet/sections/agents/s
 import { FLEET_SERVER_PACKAGE } from '../../constants';
 
 import { DownloadStep, AgentPolicySelectionStep, AgentEnrollmentKeySelectionStep } from './steps';
-import type { BaseProps } from './types';
-
-type Props = BaseProps;
+import type { InstructionProps } from './types';
 
 const DefaultMissingRequirements = () => {
   const { getHref } = useLink();
@@ -65,14 +57,15 @@ const FleetServerMissingRequirements = () => {
   return <FleetServerRequirementPage />;
 };
 
-export const ManagedInstructions = React.memo<Props>(
+export const ManagedInstructions = React.memo<InstructionProps>(
   ({
     agentPolicy,
     agentPolicies,
     viewDataStep,
     setSelectedPolicyId,
     isFleetServerPolicySelected,
     settings,
+    refreshAgentPolicies,
   }) => {
     const fleetStatus = useFleetStatus();
 
@@ -87,24 +80,15 @@ export const ManagedInstructions = React.memo<Props>(
       showInactive: false,
     });
 
-    const { data: agentPoliciesData, isLoading: isLoadingAgentPolicies } = useGetAgentPolicies({
-      page: 1,
-      perPage: 1000,
-      full: true,
-    });
-
     const fleetServers = useMemo(() => {
-      let policies = agentPolicies;
-      if (!agentPolicies && !isLoadingAgentPolicies) {
-        policies = agentPoliciesData?.items;
-      }
+      const policies = agentPolicies;
       const fleetServerAgentPolicies: string[] = (policies ?? [])
         .filter((pol) => policyHasFleetServer(pol))
         .map((pol) => pol.id);
       return (agents?.items ?? []).filter((agent) =>
         fleetServerAgentPolicies.includes(agent.policy_id ?? '')
       );
-    }, [agents, agentPolicies, agentPoliciesData, isLoadingAgentPolicies]);
+    }, [agents, agentPolicies]);
 
     const fleetServerSteps = useMemo(() => {
       const {
@@ -137,6 +121,7 @@ export const ManagedInstructions = React.memo<Props>(
               setSelectedAPIKeyId,
               setSelectedPolicyId,
               excludeFleetServer: true,
+              refreshAgentPolicies,
             })
           : AgentEnrollmentKeySelectionStep({ agentPolicy, selectedApiKeyId, setSelectedAPIKeyId }),
         DownloadStep(isFleetServerPolicySelected || false),
@@ -165,6 +150,7 @@ export const ManagedInstructions = React.memo<Props>(
       setSelectedPolicyId,
       setSelectedAPIKeyId,
       agentPolicies,
+      refreshAgentPolicies,
       apiKey.data,
       fleetServerSteps,
       isFleetServerPolicySelected,