Hello there felix-roo! 👋

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. 👀 @felix-roo hey, thanks for reaching out! We'll take a look. Can't find the bug, everything seems to work normally. @simonyandev I could reproduce it, one of the brokers should be offline.
<img width="1439" alt="image" src="https://user-images.githubusercontent.com/1494347/164317650-3f41cc4f-532f-4d8c-a792-90ea72c53ba4.png">

Hosts mismatched on the brokers page
**Describe the bug**
On the brokers page we have 6 brokers specified but only 6 hosts are returned. broker 1 (b-1.xxx) is missing.

**Set up**
Docker image is on the latest using very basic config with only broker links specified with READ_ONLY = true.


**Steps to Reproduce**
Steps to reproduce the behavior:

1. Specify 6 brokers in the configuration
2. Start the app
3. See that the brokers are not mapped correctly in the table

**Expected behavior**
I expect to see 6 brokers mapped correctly in the table

**Screenshots**
![image](https://user-images.githubusercontent.com/100605011/158861627-0e5ccb15-03e3-4363-9c4e-aa9a5c0d2b73.png)

**Additional context**
A quick inspect element shows me that the API does in fact respond with all 6 brokers intact. This makes me think it is likely an issue in the frontend where the brokers are filtered/modified in some way.

kafka-ui-react-app/src/components/Brokers/Brokers.tsx
kafka-ui-react-app/src/components/Brokers/Brokers.tsx
diff --git a/kafka-ui-react-app/src/components/Brokers/Brokers.tsx b/kafka-ui-react-app/src/components/Brokers/Brokers.tsx
index 506856d14af..6d20911714f 100644
--- a/kafka-ui-react-app/src/components/Brokers/Brokers.tsx
+++ b/kafka-ui-react-app/src/components/Brokers/Brokers.tsx
@@ -128,17 +128,21 @@ const Brokers: React.FC = () => {
 
           {diskUsage &&
             diskUsage.length !== 0 &&
-            diskUsage.map(({ brokerId, segmentSize, segmentCount }) => (
-              <tr key={brokerId}>
-                <td>{brokerId}</td>
-                <td>
-                  <BytesFormatted value={segmentSize} />
-                </td>
-                <td>{segmentCount}</td>
-                <td>{items && items[brokerId]?.port}</td>
-                <td>{items && items[brokerId]?.host}</td>
-              </tr>
-            ))}
+            diskUsage.map(({ brokerId, segmentSize, segmentCount }) => {
+              const brokerItem = items?.find((item) => item.id === brokerId);
+
+              return (
+                <tr key={brokerId}>
+                  <td>{brokerId}</td>
+                  <td>
+                    <BytesFormatted value={segmentSize} />
+                  </td>
+                  <td>{segmentCount}</td>
+                  <td>{brokerItem?.port}</td>
+                  <td>{brokerItem?.host}</td>
+                </tr>
+              );
+            })}
         </tbody>
       </Table>
     </>
