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 e59c006b0c6..5627f619e14 100644 --- a/kafka-ui-react-app/src/components/Brokers/BrokersList/BrokersList.tsx +++ b/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 as number; 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,7 +38,7 @@ const BrokersList: React.FC = () => { } = clusterStats; const rows = React.useMemo(() => { - let brokersResource; + let brokersResource: BrokerDiskUsage[]; if (!diskUsage || !diskUsage?.length) { brokersResource = brokers?.map((broker) => { @@ -51,20 +52,32 @@ const BrokersList: React.FC = () => { 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[]>( 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 0c60cf4749c..db870456868 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 @@ -52,15 +52,17 @@ describe('BrokersList Component', () => { it('renders', async () => { renderComponent(); expect(screen.getByRole('table')).toBeInTheDocument(); - expect(screen.getAllByRole('row').length).toEqual(3); + expect(screen.getAllByRole('row').length).toEqual( + brokersPayload.length + 1 + ); }); 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') ) ); }); @@ -153,7 +155,9 @@ describe('BrokersList Component', () => { it('renders list of all brokers', async () => { renderComponent(); expect(screen.getByRole('table')).toBeInTheDocument(); - expect(screen.getAllByRole('row').length).toEqual(3); + expect(screen.getAllByRole('row').length).toEqual( + brokersPayload.length + 1 + ); }); it('opens broker when row clicked', async () => { renderComponent(); @@ -166,5 +170,26 @@ 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( + brokersPayload.length + 1 + ); + }); + }); }); });