Bettern ACL error message in the overview tab

Author: jvorcak

frontend/src/components/pages/overview/Overview.tsx

@@ -33,6 +33,9 @@ import {
   Skeleton,
   Text,
   Tooltip,
+  Alert,
+  AlertIcon,
+  AlertDescription,
 } from '@redpanda-data/ui';
 import type { Row } from '@tanstack/react-table';
 import React, { type FC, type ReactNode } from 'react';
@@ -321,7 +324,7 @@ function ClusterDetails() {
 
   const serviceAccounts = overview.redpanda?.userCount ?? 'Admin API not configured';
 
-  const aclCount = overview.kafkaAuthorizerInfo?.aclCount ?? 'Authorizer not configured';
+  const aclCount = overview.kafkaAuthorizerInfo ? overview.kafkaAuthorizerInfo.aclCount : (overview.kafkaAuthorizerError?.message ?? 'Authorizer not configured');
 
   const formatStatus = (overviewStatus?: ComponentStatus): React.ReactNode => {
     if (!overviewStatus) {
@@ -394,7 +397,7 @@ function ClusterDetails() {
           title="ACLs"
           content={[
             [
-              <Link key={0} as={ReactRouterLink} to="/security/acls/">
+              <Link key={0} as={ReactRouterLink} to="/security/acls/" wordBreak="break-word">
                 {aclCount}
               </Link>,
             ],

frontend/src/state/backendApi.ts

@@ -163,6 +163,7 @@ import {
 import type { TransformMetadata } from '../protogen/redpanda/api/dataplane/v1alpha2/transform_pb';
 import { Features } from './supportedFeatures';
 import { PartitionOffsetOrigin } from './ui';
+import { log } from 'console';
 
 const REST_TIMEOUT_SEC = 25;
 export const REST_CACHE_DURATION_SEC = 20;
@@ -370,7 +371,15 @@ const apiStore = {
   // Data
   endpointCompatibility: null as EndpointCompatibility | null,
 
-  clusterOverview: null as ClusterOverview | null,
+  clusterOverview: {
+    kafkaAuthorizerInfo: null,
+    kafkaAuthorizerError: null,
+    kafka: null,
+    redpanda: null,
+    console: null,
+    kafkaConnect: null,
+    schemaRegistry: null,
+  } as ClusterOverview,
   brokers: null as BrokerWithConfigAndStorage[] | null,
 
   clusters: ['A', 'B', 'C'],
@@ -855,6 +864,7 @@ const apiStore = {
 
     const requests: Array<Promise<any>> = [
       client.getKafkaAuthorizerInfo({}).catch((e) => {
+        this.clusterOverview.kafkaAuthorizerError = e;
         console.error(e);
         return null;
       }),
@@ -898,6 +908,7 @@ const apiStore = {
     ] = responses;
 
     this.clusterOverview = {
+      ...this.clusterOverview,
       kafkaAuthorizerInfo: kafkaAuthorizerInfoResponse,
       console: consoleInfoResponse,
       kafka: kafkaResponse,