From d40af6d38605d43d31bca5a24c5e0061c1d193ca Mon Sep 17 00:00:00 2001
From: Zorii4 <83412197+Zorii4@users.noreply.github.com>
Date: Mon, 21 Feb 2022 16:56:23 +0300
Subject: [PATCH]  [issue-1521] Add Port and Host columns to Broker info
 (#1642)

* Add port column to brokers info

* Add Port and Host columns to Broker info

Co-authored-by: Anton Zorin <ant.zorin@gmail.com>
---
 kafka-ui-react-app/src/components/Brokers/Brokers.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/kafka-ui-react-app/src/components/Brokers/Brokers.tsx b/kafka-ui-react-app/src/components/Brokers/Brokers.tsx
index 3a6466f0b5..4449077404 100644
--- a/kafka-ui-react-app/src/components/Brokers/Brokers.tsx
+++ b/kafka-ui-react-app/src/components/Brokers/Brokers.tsx
@@ -10,6 +10,7 @@ import PageHeading from 'components/common/PageHeading/PageHeading';
 import * as Metrics from 'components/common/Metrics';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/redux';
 import {
+  fetchBrokers,
   fetchClusterStats,
   selectStats,
 } from 'redux/reducers/brokers/brokersSlice';
@@ -28,6 +29,7 @@ const Brokers: React.FC = () => {
     underReplicatedPartitionCount,
     diskUsage,
     version,
+    items,
   } = useAppSelector(selectStats);
 
   let replicas = inSyncReplicasCount ?? 0;
@@ -35,14 +37,15 @@ const Brokers: React.FC = () => {
 
   React.useEffect(() => {
     dispatch(fetchClusterStats(clusterName));
-  }, [clusterName, dispatch]);
+    dispatch(fetchBrokers(clusterName));
+  }, [fetchClusterStats, fetchBrokers, clusterName, dispatch]);
 
   useInterval(() => {
     fetchClusterStats(clusterName);
+    fetchBrokers(clusterName);
   }, 5000);
 
   const zkOnline = zooKeeperStatus === ZooKeeperStatus.online;
-
   return (
     <>
       <PageHeading text="Brokers" />
@@ -122,6 +125,8 @@ const Brokers: React.FC = () => {
             <TableHeaderCell title="Broker" />
             <TableHeaderCell title="Segment Size (Mb)" />
             <TableHeaderCell title="Segment Count" />
+            <TableHeaderCell title="Port" />
+            <TableHeaderCell title="Host" />
           </tr>
         </thead>
         <tbody>
@@ -133,6 +138,8 @@ const Brokers: React.FC = () => {
                   <BytesFormatted value={segmentSize} />
                 </td>
                 <td>{segmentCount}</td>
+                <td>{items && items[brokerId]?.port}</td>
+                <td>{items && items[brokerId]?.host}</td>
               </tr>
             ))
           ) : (