Merge pull request #1910 from redpanda-data/front-end/show-errors-acls

front-end: show errors on create/update acls

Author: andresaristizabal

frontend/src/components/pages/acls/new-acl/ACL.model.tsx

@@ -7,6 +7,8 @@ import {
   type ListACLsResponse,
 } from 'protogen/redpanda/api/dataplane/v1/acl_pb';
 import type { ReactNode } from 'react';
+import type { ConnectError } from '@connectrpc/connect';
+import type { UseToastOptions } from '@redpanda-data/ui';
 
 export type OperationType = 'not-set' | 'allow' | 'deny';
 export const OperationTypeNotSet: OperationType = 'not-set';
@@ -546,3 +548,27 @@ export function calculateACLDifference(currentRules: ACLWithId[], newRules: ACLW
     toDelete,
   };
 }
+
+export const handleResponses = (toast: (op: UseToastOptions) => void, errors: ConnectError[], created: boolean) => {
+  if (errors.length > 0 && created) {
+    errors.forEach((er) => {
+      toast({
+        status: 'warning',
+        title: 'Some ACLs were created, but there were errors',
+        description: er.message,
+      });
+    });
+  } else if (errors.length > 0 && !created) {
+    errors.forEach((er) => {
+      toast({
+        status: 'error',
+        description: er.message,
+      });
+    });
+  } else {
+    toast({
+      status: 'success',
+      description: 'ACLs created successfully',
+    });
+  }
+};

frontend/src/components/pages/acls/new-acl/AclCreatePage.tsx

@@ -15,6 +15,7 @@ import {
   PrincipalTypeUser,
   parsePrincipal,
   type Rule,
+  handleResponses,
 } from 'components/pages/acls/new-acl/ACL.model';
 import CreateACL from 'components/pages/acls/new-acl/CreateACL';
 import { useEffect } from 'react';
@@ -39,12 +40,8 @@ const AclCreatePage = () => {
 
   const createAclMutation = async (principal: string, host: string, rules: Rule[]) => {
     const result = convertRulesToCreateACLRequests(rules, principal, host);
-    await createAcls(result);
-
-    toast({
-      status: 'success',
-      description: 'ACLs created successfully',
-    });
+    const applyResult = await createAcls(result);
+    handleResponses(toast, applyResult.errors, applyResult.created);
 
     navigate(`/security/acls/${parsePrincipal(principal).name}/details`);
   };

frontend/src/components/pages/acls/new-acl/AclUpdatePage.tsx

@@ -20,6 +20,7 @@ import {
   parsePrincipal,
   type Rule,
   type SharedConfig,
+  handleResponses,
 } from 'components/pages/acls/new-acl/ACL.model';
 import CreateACL from 'components/pages/acls/new-acl/CreateACL';
 import { useEffect } from 'react';
@@ -49,13 +50,8 @@ const AclUpdatePage = () => {
 
   const updateAclMutation =
     (actualRules: Rule[], sharedConfig: SharedConfig) => async (_: string, _2: string, rules: Rule[]) => {
-      await applyUpdates(actualRules, sharedConfig, rules);
-
-      // TODO: handle partial failures
-      toast({
-        status: 'success',
-        description: 'ACLs updated successfully',
-      });
+      const applyResult = await applyUpdates(actualRules, sharedConfig, rules);
+      handleResponses(toast, applyResult.errors, applyResult.created);
 
       navigate(`/security/acls/${parsePrincipal(sharedConfig.principal).name}/details`);
     };

frontend/src/components/pages/roles/RoleCreatePage.tsx

@@ -16,6 +16,7 @@ import {
   PrincipalTypeRedpandaRole,
   parsePrincipal,
   type Rule,
+  handleResponses,
 } from 'components/pages/acls/new-acl/ACL.model';
 import CreateACL from 'components/pages/acls/new-acl/CreateACL';
 import { CreateRoleRequestSchema } from 'protogen/redpanda/api/dataplane/v1/security_pb';
@@ -70,12 +71,8 @@ const RoleCreatePage = () => {
 
       // Then create the ACLs for the role
       const result = convertRulesToCreateACLRequests(rules, principal, host);
-      await createAcls(result);
-
-      toast({
-        status: 'success',
-        description: 'Role ACLs created successfully',
-      });
+      const applyResult = await createAcls(result);
+      handleResponses(toast, applyResult.errors, applyResult.created);
 
       navigate(`/security/roles/${roleName}/details`);
     } catch (error) {

frontend/src/components/pages/roles/RoleUpdatePage.tsx

@@ -12,6 +12,7 @@
 import { useToast } from '@redpanda-data/ui';
 import {
   getOperationsForResourceType,
+  handleResponses,
   ModeAllowAll,
   ModeDenyAll,
   OperationTypeAllow,
@@ -48,13 +49,8 @@ const RoleUpdatePage = () => {
 
   const updateRoleAclMutation =
     (actualRules: Rule[], sharedConfig: SharedConfig) => async (_: string, _2: string, rules: Rule[]) => {
-      await applyUpdates(actualRules, sharedConfig, rules);
-
-      // TODO: handle partial failures
-      toast({
-        status: 'success',
-        description: 'Role ACLs updated successfully',
-      });
+      const applyResult = await applyUpdates(actualRules, sharedConfig, rules);
+      handleResponses(toast, applyResult.errors, applyResult.created);
 
       navigate(`/security/roles/${roleName}/details`);
     };

frontend/src/react-query/api/acl.tsx

@@ -497,8 +497,15 @@ export const useUpdateAclMutation = () => {
       ),
     );
 
-    await Promise.all([...createResults, ...deleteResults]);
+    const allResults = await Promise.allSettled([...createResults, ...deleteResults]);
+    const errs = new Map<number, ConnectError>();
+    const rejected = allResults.filter((result): result is PromiseRejectedResult => result.status === 'rejected');
+    rejected.forEach((result) => {
+      const r = result.reason as ConnectError;
+      errs.set(r.code, r);
+    });
     await invalid();
+    return { errors: errs.values().toArray(), created: rejected.length < allResults.length };
   };
 
   return { applyUpdates };
@@ -526,8 +533,15 @@ export const useCreateAcls = () => {
   const { invalid } = useInvalidateAclsList();
 
   const createAcls = async (acls: CreateACLRequest[]) => {
-    await Promise.all(acls.map((r) => createACLMutation(r)));
+    const results = await Promise.allSettled(acls.map((r) => createACLMutation(r)));
+    const errs = new Map<number, ConnectError>();
+    const rejected = results.filter((result): result is PromiseRejectedResult => result.status === 'rejected');
+    rejected.forEach((result) => {
+      const r = result.reason as ConnectError;
+      errs.set(r.code, r);
+    });
     await invalid();
+    return { errors: errs.values().toArray(), created: rejected.length < results.length };
   };
   return { createAcls };
 };