FE: Broker not shown in a list if disk usage is unknown for it

kafka-ui-react-app/src/components/Brokers/BrokersList/BrokersList.tsx

@@ -12,17 +12,18 @@ import { ColumnDef } from '@tanstack/react-table';
 import { clusterBrokerPath } from 'lib/paths';
 import Tooltip from 'components/common/Tooltip/Tooltip';
 import ColoredCell from 'components/common/NewTable/ColoredCell';
+import { BrokerDiskUsage } from 'generated-sources';
 
 import SkewHeader from './SkewHeader/SkewHeader';
 import * as S from './BrokersList.styled';
 
-const NA = 'N/A';
+const NA = 'N/A' as unknown;
 
 const BrokersList: React.FC = () => {
   const navigate = useNavigate();
   const { clusterName } = useAppParams<{ clusterName: ClusterName }>();
   const { data: clusterStats = {} } = useClusterStats(clusterName);
-  const { data: brokers } = useBrokers(clusterName);
+  const { data: brokers = [] } = useBrokers(clusterName);
 
   const {
     brokerCount,
@@ -37,34 +38,46 @@ const BrokersList: React.FC = () => {
   } = clusterStats;
 
   const rows = React.useMemo(() => {
-    let brokersResource;
+    let brokersResource: BrokerDiskUsage[];
     if (!diskUsage || !diskUsage?.length) {
       brokersResource =
         brokers?.map((broker) => {
           return {
             brokerId: broker.id,
-            segmentSize: NA,
-            segmentCount: NA,
+            segmentSize: NA as number,
+            segmentCount: NA as number,
           };
         }) || [];
     } else {
       brokersResource = diskUsage;
     }
 
-    return brokersResource.map(({ brokerId, segmentSize, segmentCount }) => {
-      const broker = brokers?.find(({ id }) => id === brokerId);
-      return {
-        brokerId,
-        size: segmentSize || NA,
-        count: segmentCount || NA,
-        port: broker?.port,
-        host: broker?.host,
-        partitionsLeader: broker?.partitionsLeader,
-        partitionsSkew: broker?.partitionsSkew,
-        leadersSkew: broker?.leadersSkew,
-        inSyncPartitions: broker?.inSyncPartitions,
-      };
-    });
+    return brokers?.map(
+      ({
+        id,
+        port,
+        host,
+        partitionsLeader,
+        partitionsSkew,
+        leadersSkew,
+        inSyncPartitions,
+      }) => {
+        const brokerResource = brokersResource.find(
+          ({ brokerId }) => id === brokerId
+        );
+        return {
+          brokerId: id,
+          size: brokerResource?.segmentSize || NA,
+          count: brokerResource?.segmentCount || NA,
+          port,
+          host,
+          partitionsLeader,
+          partitionsSkew,
+          leadersSkew,
+          inSyncPartitions,
+        };
+      }
+    );
   }, [diskUsage, brokers]);
 
   const columns = React.useMemo<ColumnDef<(typeof rows)[number]>[]>(

kafka-ui-react-app/src/components/Brokers/BrokersList/__test__/BrokersList.spec.tsx

@@ -56,11 +56,11 @@ describe('BrokersList Component', () => {
       });
       it('opens broker when row clicked', async () => {
         renderComponent();
-        await userEvent.click(screen.getByRole('cell', { name: '0' }));
+        await userEvent.click(screen.getByRole('cell', { name: '1' }));
 
         await waitFor(() =>
           expect(mockedUsedNavigate).toBeCalledWith(
-            clusterBrokerPath(clusterName, '0')
+            clusterBrokerPath(clusterName, '1')
           )
         );
       });
@@ -166,5 +166,24 @@ describe('BrokersList Component', () => {
         );
       });
     });
+
+    describe('when some brokers have no diskUsage', () => {
+      beforeEach(() => {
+        (useBrokers as jest.Mock).mockImplementation(() => ({
+          data: brokersPayload,
+        }));
+        (useClusterStats as jest.Mock).mockImplementation(() => ({
+          data: {
+            ...clusterStatsPayload,
+            diskUsage: [clusterStatsPayload.diskUsage[0]],
+          },
+        }));
+      });
+      it('renders list of all brokers', async () => {
+        renderComponent();
+        expect(screen.getByRole('table')).toBeInTheDocument();
+        expect(screen.getAllByRole('row').length).toEqual(3);
+      });
+    });
   });
 });