Repository: provectus/kafka-ui
Issue: Show IP and port of brokers in UI/API
Labels: type/enhancement
good first issue
scope/backend
scope/frontend
status/accepted
status/pending-frontend

Good morning, thank you very much for the great work you are doing.
I just wanted to know if there is a possibility to also show the port of the brokers on the /clusters/clusterName/brokers endpoint.
It would be so useful for scenarios where brokers are added to the cluster with random port mappings, so that you can connect to the brokers by querying the Kafka-UI API first. 
Morover, those same data could be displayed in the UI (/ui/clusters/Local/brokers) along with each broker ID.

Thank you so much.


Issue comments:
Hello there Alepacox! 👋

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. 👀
Hey, thanks for the suggestion. This seems like a good feature, we'll get this implemented :)
I'm glad to hear that, thank you so much!

Pull request review comments:
```suggestion
                <td>{items &&  items[brokerId]?.port}</td>
```
Fixed

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Brokers/Brokers.tsx b/kafka-ui-react-app/src/components/Brokers/Brokers.tsx
index 3a6466f0b58..44490774046 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>
             ))
           ) : (


Test patch: