Repository: provectus/kafka-ui
Issue: Active controller badge on invalid node
Labels: type/bug
good first issue
scope/frontend
status/accepted
status/confirmed

In `/api/clusters/local/stats` endpoint `activeControllers` **is an id of a node** that is _Active controller_ node. Now green badge is rendered on another node or not even shown sometimes.

Version: master commit [de21721](https://github.com/provectus/kafka-ui/commit/de21721)


<img width="1540" alt="Screenshot 2023-04-03 at 12 24 34" src="https://user-images.githubusercontent.com/702205/229454092-15bbf5f2-6585-473d-bdc3-b6a0be8e7bfe.png">


Issue comments:
Hi @iliax, can you assign it to me? I want to work on it.
@Ksj14-kumar sure, go ahead
@Ksj14-kumar any updates?
@Haarolean  I am still working on this issue, I will give you an update soon.
@Ksj14-kumar any updates?
@Haarolean, Can you unassign me this task, I can't  solve it. Sorry for that.
@Ksj14-kumar no worries

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Brokers/Broker/__test__/Broker.spec.tsx b/kafka-ui-react-app/src/components/Brokers/Broker/__test__/Broker.spec.tsx
index 89a553be7d0..40a5deeebfe 100644
--- a/kafka-ui-react-app/src/components/Brokers/Broker/__test__/Broker.spec.tsx
+++ b/kafka-ui-react-app/src/components/Brokers/Broker/__test__/Broker.spec.tsx
@@ -13,7 +13,7 @@ import { brokersPayload } from 'lib/fixtures/brokers';
 import { clusterStatsPayload } from 'lib/fixtures/clusters';
 
 const clusterName = 'local';
-const brokerId = 1;
+const brokerId = 200;
 const activeClassName = 'is-active';
 const brokerLogdir = {
   pageText: 'brokerLogdir',
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..ede570c655b 100644
--- a/kafka-ui-react-app/src/components/Brokers/BrokersList/BrokersList.tsx
+++ b/kafka-ui-react-app/src/components/Brokers/BrokersList/BrokersList.tsx
@@ -73,13 +73,13 @@ const BrokersList: React.FC = () => {
         header: 'Broker ID',
         accessorKey: 'brokerId',
         // eslint-disable-next-line react/no-unstable-nested-components
-        cell: ({ row: { id }, getValue }) => (
+        cell: ({ getValue }) => (
           <S.RowCell>
             <LinkCell
               value={`${getValue<string | number>()}`}
               to={encodeURIComponent(`${getValue<string | number>()}`)}
             />
-            {id === String(activeControllers) && (
+            {getValue<string | number>() === activeControllers && (
               <Tooltip
                 value={<CheckMarkRoundIcon />}
                 content="Active Controller"
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..3e88569a39e 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
@@ -56,11 +56,11 @@ describe('BrokersList Component', () => {
       });
       it('opens broker when row clicked', async () => {
         renderComponent();
-        await userEvent.click(screen.getByRole('cell', { name: '0' }));
+        await userEvent.click(screen.getByRole('cell', { name: '100' }));
 
         await waitFor(() =>
           expect(mockedUsedNavigate).toBeCalledWith(
-            clusterBrokerPath(clusterName, '0')
+            clusterBrokerPath(clusterName, '100')
           )
         );
       });
@@ -124,6 +124,39 @@ describe('BrokersList Component', () => {
       });
     });
 
+    describe('BrokersList', () => {
+      describe('when the brokers are loaded', () => {
+        const testActiveControllers = 0;
+        beforeEach(() => {
+          (useBrokers as jest.Mock).mockImplementation(() => ({
+            data: brokersPayload,
+          }));
+          (useClusterStats as jest.Mock).mockImplementation(() => ({
+            data: clusterStatsPayload,
+          }));
+        });
+
+        it(`Indicates correct active cluster`, async () => {
+          renderComponent();
+          await waitFor(() =>
+            expect(screen.getByRole('tooltip')).toBeInTheDocument()
+          );
+        });
+        it(`Correct display even if there is no active cluster: ${testActiveControllers} `, async () => {
+          (useClusterStats as jest.Mock).mockImplementation(() => ({
+            data: {
+              ...clusterStatsPayload,
+              activeControllers: testActiveControllers,
+            },
+          }));
+          renderComponent();
+          await waitFor(() =>
+            expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
+          );
+        });
+      });
+    });
+
     describe('when diskUsage is empty', () => {
       beforeEach(() => {
         (useBrokers as jest.Mock).mockImplementation(() => ({
@@ -157,11 +190,11 @@ describe('BrokersList Component', () => {
       });
       it('opens broker when row clicked', async () => {
         renderComponent();
-        await userEvent.click(screen.getByRole('cell', { name: '1' }));
+        await userEvent.click(screen.getByRole('cell', { name: '100' }));
 
         await waitFor(() =>
           expect(mockedUsedNavigate).toBeCalledWith(
-            clusterBrokerPath(clusterName, '1')
+            clusterBrokerPath(clusterName, '100')
           )
         );
       });
diff --git a/kafka-ui-react-app/src/components/common/Icons/CheckMarkRoundIcon.tsx b/kafka-ui-react-app/src/components/common/Icons/CheckMarkRoundIcon.tsx
index e14898385b6..bbf212541e8 100644
--- a/kafka-ui-react-app/src/components/common/Icons/CheckMarkRoundIcon.tsx
+++ b/kafka-ui-react-app/src/components/common/Icons/CheckMarkRoundIcon.tsx
@@ -7,6 +7,7 @@ const CheckMarkRoundIcon: React.FC = () => {
       height="14"
       viewBox="0 0 14 14"
       fill="none"
+      role="tooltip"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
diff --git a/kafka-ui-react-app/src/lib/fixtures/brokers.ts b/kafka-ui-react-app/src/lib/fixtures/brokers.ts
index 8999bd2f814..1a76f73fe37 100644
--- a/kafka-ui-react-app/src/lib/fixtures/brokers.ts
+++ b/kafka-ui-react-app/src/lib/fixtures/brokers.ts
@@ -1,8 +1,8 @@
 import { BrokerConfig, BrokersLogdirs, ConfigSource } from 'generated-sources';
 
 export const brokersPayload = [
-  { id: 1, host: 'b-1.test.kafka.amazonaws.com', port: 9092 },
-  { id: 2, host: 'b-2.test.kafka.amazonaws.com', port: 9092 },
+  { id: 100, host: 'b-1.test.kafka.amazonaws.com', port: 9092 },
+  { id: 200, host: 'b-2.test.kafka.amazonaws.com', port: 9092 },
 ];
 
 const partition = {
diff --git a/kafka-ui-react-app/src/lib/fixtures/clusters.ts b/kafka-ui-react-app/src/lib/fixtures/clusters.ts
index 2b1cc8f8f51..3f4476bae8a 100644
--- a/kafka-ui-react-app/src/lib/fixtures/clusters.ts
+++ b/kafka-ui-react-app/src/lib/fixtures/clusters.ts
@@ -32,15 +32,15 @@ export const clustersPayload: Cluster[] = [
 
 export const clusterStatsPayload = {
   brokerCount: 2,
-  activeControllers: 1,
+  activeControllers: 100,
   onlinePartitionCount: 138,
   offlinePartitionCount: 0,
   inSyncReplicasCount: 239,
   outOfSyncReplicasCount: 0,
   underReplicatedPartitionCount: 0,
   diskUsage: [
-    { brokerId: 0, segmentSize: 334567, segmentCount: 245 },
-    { brokerId: 1, segmentSize: 12345678, segmentCount: 121 },
+    { brokerId: 100, segmentSize: 334567, segmentCount: 245 },
+    { brokerId: 200, segmentSize: 12345678, segmentCount: 121 },
   ],
   version: '2.2.1',
 };


Test patch: