Repository: provectus/kafka-ui
Issue: Cluster with 4 nodes but only 3 are listed under brokers section
Labels: type/bug
scope/frontend
status/accepted

- Cluster with 4 nodes but only 3 are listed under brokers section.
- In the call to /stats there is only disk usage returned for 3 brokers, the broker that is not returned in disk stats is the missing broker
- There are 4 brokers returned in the json response from GET http://localhost:8080/api/clusters/sensor/brokers



**Set up**
App version: [UI for Apache Kafka](http://kube1.semanticfact.com:8080/)
vv0.4.0(
[521ba0c](https://github.com/provectus/kafka-ui/commit/521ba0c)
)

Kafka version: 3.2.0 in kraft mode



**Screenshots**
https://cdn.discordapp.com/attachments/897805035122077719/1010777595882782750/unknown.png


Issue comments:
Hello there OpenCoderX! 👋

Thank you and congratulations 🎉 for opening your very first issue in this project! 💖

In case you want to claim this issue, please comment down below! We will try to get back to you as soon as we can. 👀
relates to https://github.com/provectus/kafka-ui/issues/2738, should be fixed when https://github.com/provectus/kafka-ui/pull/2903 merged

Pull request review comments:
please check the Linter warnings
i think there with the new version of user event , you can automatically await the userEvent 
fixed
fixed
why are we deleting the empty table case ?
fixed

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Brokers/BrokersList/BrokersList.tsx b/kafka-ui-react-app/src/components/Brokers/BrokersList/BrokersList.tsx
index 3fce89fbae9..d74c1bcb700 100644
--- a/kafka-ui-react-app/src/components/Brokers/BrokersList/BrokersList.tsx
+++ b/kafka-ui-react-app/src/components/Brokers/BrokersList/BrokersList.tsx
@@ -10,6 +10,8 @@ import Table, { LinkCell, SizeCell } from 'components/common/NewTable';
 import { ColumnDef } from '@tanstack/react-table';
 import { clusterBrokerPath } from 'lib/paths';
 
+const NA = 'N/A';
+
 const BrokersList: React.FC = () => {
   const navigate = useNavigate();
   const { clusterName } = useAppParams<{ clusterName: ClusterName }>();
@@ -29,14 +31,26 @@ const BrokersList: React.FC = () => {
   } = clusterStats;
 
   const rows = React.useMemo(() => {
-    if (!diskUsage) return [];
+    let brokersResource;
+    if (!diskUsage || !diskUsage?.length) {
+      brokersResource =
+        brokers?.map((broker) => {
+          return {
+            brokerId: broker.id,
+            segmentSize: NA,
+            segmentCount: NA,
+          };
+        }) || [];
+    } else {
+      brokersResource = diskUsage;
+    }
 
-    return diskUsage.map(({ brokerId, segmentSize, segmentCount }) => {
+    return brokersResource.map(({ brokerId, segmentSize, segmentCount }) => {
       const broker = brokers?.find(({ id }) => id === brokerId);
       return {
         brokerId,
-        size: segmentSize,
-        count: segmentCount,
+        size: segmentSize || NA,
+        count: segmentCount || NA,
         port: broker?.port,
         host: broker?.host,
       };
@@ -55,7 +69,24 @@ const BrokersList: React.FC = () => {
           />
         ),
       },
-      { header: 'Segment Size', accessorKey: 'size', cell: SizeCell },
+      {
+        header: 'Segment Size',
+        accessorKey: 'size',
+        // eslint-disable-next-line react/no-unstable-nested-components
+        cell: ({ getValue, table, cell, column, renderValue, row }) =>
+          getValue() === NA ? (
+            NA
+          ) : (
+            <SizeCell
+              table={table}
+              column={column}
+              row={row}
+              cell={cell}
+              getValue={getValue}
+              renderValue={renderValue}
+            />
+          ),
+      },
       { header: 'Segment Count', accessorKey: 'count' },
       { header: 'Port', accessorKey: 'port' },
       { header: 'Host', accessorKey: 'host' },
diff --git a/kafka-ui-react-app/src/components/Brokers/BrokersList/__test__/BrokersList.spec.tsx b/kafka-ui-react-app/src/components/Brokers/BrokersList/__test__/BrokersList.spec.tsx
index b11d477b600..cf36c64059d 100644
--- a/kafka-ui-react-app/src/components/Brokers/BrokersList/__test__/BrokersList.spec.tsx
+++ b/kafka-ui-react-app/src/components/Brokers/BrokersList/__test__/BrokersList.spec.tsx
@@ -134,12 +134,36 @@ describe('BrokersList Component', () => {
         }));
       });
 
-      it('renders empty table', async () => {
+      describe('when it has no brokers', () => {
+        beforeEach(() => {
+          (useBrokers as jest.Mock).mockImplementation(() => ({
+            data: [],
+          }));
+        });
+
+        it('renders empty table', async () => {
+          renderComponent();
+          expect(screen.getByRole('table')).toBeInTheDocument();
+          expect(
+            screen.getByRole('row', { name: 'Disk usage data not available' })
+          ).toBeInTheDocument();
+        });
+      });
+
+      it('renders list of all brokers', async () => {
         renderComponent();
         expect(screen.getByRole('table')).toBeInTheDocument();
-        expect(
-          screen.getByRole('row', { name: 'Disk usage data not available' })
-        ).toBeInTheDocument();
+        expect(screen.getAllByRole('row').length).toEqual(3);
+      });
+      it('opens broker when row clicked', async () => {
+        renderComponent();
+        await userEvent.click(screen.getByRole('cell', { name: '1' }));
+
+        await waitFor(() =>
+          expect(mockedUsedNavigate).toBeCalledWith(
+            clusterBrokerPath(clusterName, '1')
+          )
+        );
       });
     });
   });


Test patch: