[Fleet] showing agent policy creation error message on UI (#125931)

* showing agent policy creation error message on UI * mapping the error instead of showing from the backend Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · Feb 21, 2022 · 1df6ecf · 1df6ecf
1 parent 88354aa
commit 1df6ecf
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 12 deletions.
diff --git a/...public/applications/fleet/sections/agent_policy/components/agent_policy_create_inline.tsx b/...public/applications/fleet/sections/agent_policy/components/agent_policy_create_inline.tsx
@@ -39,7 +39,7 @@ const StyledEuiAccordion = styled(EuiAccordion)`
 `;
 
 interface Props {
-  updateAgentPolicy: (u: AgentPolicy | null) => void;
+  updateAgentPolicy: (u: AgentPolicy | null, errorMessage?: JSX.Element) => void;
   isFleetServerPolicy?: boolean;
   agentPolicyName: string;
 }
@@ -84,12 +84,24 @@ export const AgentPolicyCreateInlineForm: React.FunctionComponent<Props> = ({
         updateAgentPolicy(resp.data.item);
       }
     } catch (e) {
-      updateAgentPolicy(null);
+      updateAgentPolicy(null, mapError(e));
     } finally {
       setIsLoading(false);
     }
   }, [newAgentPolicy, withSysMonitoring, updateAgentPolicy]);
 
+  function mapError(e: { statusCode: number }): JSX.Element | undefined {
+    switch (e.statusCode) {
+      case 409:
+        return (
+          <FormattedMessage
+            id="xpack.fleet.agentPolicyCreation.errorMessage"
+            defaultMessage="An agent policy already exists with this name."
+          />
+        );
+    }
+  }
+
   return (
     <EuiForm>
       <EuiText>

diff --git a/...eet/public/applications/fleet/sections/agents/components/agent_policy_created_callout.tsx b/...eet/public/applications/fleet/sections/agents/components/agent_policy_created_callout.tsx
@@ -8,21 +8,27 @@
 import React from 'react';
 import { EuiSpacer, EuiCallOut } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
+
 export enum CREATE_STATUS {
   INITIAL = 'initial',
   CREATED = 'created',
   FAILED = 'failed',
 }
 
+export interface AgentPolicyCreateState {
+  status: CREATE_STATUS;
+  errorMessage?: JSX.Element;
+}
+
 interface Props {
-  createStatus: CREATE_STATUS;
+  createState: AgentPolicyCreateState;
 }
 
-export const AgentPolicyCreatedCallOut: React.FunctionComponent<Props> = ({ createStatus }) => {
+export const AgentPolicyCreatedCallOut: React.FunctionComponent<Props> = ({ createState }) => {
   return (
     <>
       <EuiSpacer size="m" />
-      {createStatus === CREATE_STATUS.CREATED ? (
+      {createState.status === CREATE_STATUS.CREATED ? (
         <EuiCallOut
           data-test-subj="agentPolicyCreateStatusCallOut"
           title={
@@ -45,7 +51,9 @@ export const AgentPolicyCreatedCallOut: React.FunctionComponent<Props> = ({ crea
           }
           color="danger"
           iconType="cross"
-        />
+        >
+          {createState.errorMessage ?? null}
+        </EuiCallOut>
       )}
     </>
   );

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
@@ -7,6 +7,7 @@
 
 import React, { useState, useCallback, useEffect } from 'react';
 
+import type { AgentPolicyCreateState } from '../../applications/fleet/sections/agents/components';
 import {
   AgentPolicyCreatedCallOut,
   CREATE_STATUS,
@@ -40,7 +41,9 @@ export const SelectCreateAgentPolicy: React.FC<Props> = ({
 }) => {
   const [showCreatePolicy, setShowCreatePolicy] = useState(agentPolicies.length === 0);
 
-  const [createStatus, setCreateStatus] = useState(CREATE_STATUS.INITIAL);
+  const [createState, setCreateState] = useState<AgentPolicyCreateState>({
+    status: CREATE_STATUS.INITIAL,
+  });
 
   const [newName, setNewName] = useState(incrementPolicyName(agentPolicies, isFleetServerPolicy));
 
@@ -52,13 +55,13 @@ export const SelectCreateAgentPolicy: React.FC<Props> = ({
   }, [agentPolicies, isFleetServerPolicy]);
 
   const onAgentPolicyCreated = useCallback(
-    async (policy: AgentPolicy | null) => {
+    async (policy: AgentPolicy | null, errorMessage?: JSX.Element) => {
       if (!policy) {
-        setCreateStatus(CREATE_STATUS.FAILED);
+        setCreateState({ status: CREATE_STATUS.FAILED, errorMessage });
         return;
       }
       setShowCreatePolicy(false);
-      setCreateStatus(CREATE_STATUS.CREATED);
+      setCreateState({ status: CREATE_STATUS.CREATED });
       if (onAgentPolicyChange) {
         onAgentPolicyChange(policy.id, policy!);
       }
@@ -88,8 +91,8 @@ export const SelectCreateAgentPolicy: React.FC<Props> = ({
           isFleetServerPolicy={isFleetServerPolicy}
         />
       )}
-      {createStatus !== CREATE_STATUS.INITIAL && (
-        <AgentPolicyCreatedCallOut createStatus={createStatus} />
+      {createState.status !== CREATE_STATUS.INITIAL && (
+        <AgentPolicyCreatedCallOut createState={createState} />
       )}
     </>
   );