Fix UI broker list display in some cases (#2903)

* UI now showing broker list when DISABLELOGDIRSCOLLECTION=true

* specs fix

* code review fixes

* fix the diskUsage check in the empty array case

* fix the diskUsage check in the empty array case minor segment size fix

Co-authored-by: Kamila Alekbaeva <[email protected]>
Co-authored-by: Ilya Kuramshin <[email protected]>
Co-authored-by: Mgrdich <[email protected]>

Author: 4 people

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' },

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')
+          )
+        );
       });
     });
   });