From e9260cf9cb62c9558d61e3b86fe117128467b21d Mon Sep 17 00:00:00 2001
From: Arsen Simonyan <103444767+simonyandev@users.noreply.github.com>
Date: Fri, 22 Apr 2022 13:38:17 +0400
Subject: [PATCH] fix broker hosts and ports bug (#1881)

---
 .../src/components/Brokers/Brokers.tsx        | 26 +++++++++++--------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/kafka-ui-react-app/src/components/Brokers/Brokers.tsx b/kafka-ui-react-app/src/components/Brokers/Brokers.tsx
index 506856d14a..6d20911714 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>
     </>