From ee102aa87ef93081a9b44e091b4ad150f0f29a2b Mon Sep 17 00:00:00 2001
From: Smbat Siradeghyan <104761619+ssiradeghyan@users.noreply.github.com>
Date: Wed, 11 May 2022 12:37:07 +0400
Subject: [PATCH] In Sync Replicas metric displays correct information (#1920)

Co-authored-by: Smbat Siradeghyan
Co-authored-by: Oleg Shur <workshur@gmail.com>
---
 .../src/components/Brokers/Brokers.tsx        |  2 +-
 .../Brokers/__test__/Brokers.spec.tsx         | 52 ++++++++++++++++++-
 2 files changed, 52 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 bb8f40f290..39176ab0c6 100644
--- a/kafka-ui-react-app/src/components/Brokers/Brokers.tsx
+++ b/kafka-ui-react-app/src/components/Brokers/Brokers.tsx
@@ -30,7 +30,7 @@ const Brokers: React.FC = () => {
     items,
   } = useAppSelector(selectStats);
 
-  const replicas = inSyncReplicasCount ?? 0 + (outOfSyncReplicasCount ?? 0);
+  const replicas = (inSyncReplicasCount ?? 0) + (outOfSyncReplicasCount ?? 0);
   const areAllInSync = inSyncReplicasCount && replicas === inSyncReplicasCount;
   const partitionIsOffline = offlinePartitionCount && offlinePartitionCount > 0;
   React.useEffect(() => {
diff --git a/kafka-ui-react-app/src/components/Brokers/__test__/Brokers.spec.tsx b/kafka-ui-react-app/src/components/Brokers/__test__/Brokers.spec.tsx
index f2408f1993..e81468c3a8 100644
--- a/kafka-ui-react-app/src/components/Brokers/__test__/Brokers.spec.tsx
+++ b/kafka-ui-react-app/src/components/Brokers/__test__/Brokers.spec.tsx
@@ -11,6 +11,10 @@ describe('Brokers Component', () => {
   afterEach(() => fetchMock.reset());
 
   const clusterName = 'local';
+
+  const testInSyncReplicasCount = 798;
+  const testOutOfSyncReplicasCount = 1;
+
   const renderComponent = () =>
     render(
       <Route path={clusterBrokersPath(':clusterName')}>
@@ -48,7 +52,6 @@ describe('Brokers Component', () => {
       const rows = screen.getAllByRole('row');
       expect(rows.length).toEqual(3);
     });
-
     it('shows warning when offlinePartitionCount > 0', async () => {
       const fetchStatsMock = fetchMock.getOnce(fetchStatsUrl, {
         ...clusterStatsPayload,
@@ -67,5 +70,52 @@ describe('Brokers Component', () => {
       expect(onlineWidget).toBeInTheDocument();
       expect(onlineWidget).toHaveStyle({ color: '#E51A1A' });
     });
+    it('shows right count when offlinePartitionCount > 0', async () => {
+      const fetchStatsMock = fetchMock.getOnce(fetchStatsUrl, {
+        ...clusterStatsPayload,
+        inSyncReplicasCount: testInSyncReplicasCount,
+        outOfSyncReplicasCount: testOutOfSyncReplicasCount,
+      });
+      renderComponent();
+      await waitFor(() => {
+        expect(fetchStatsMock.called()).toBeTruthy();
+      });
+
+      const onlineWidgetDef = screen.getByText(testInSyncReplicasCount);
+      const onlineWidget = screen.getByText(
+        `of ${testInSyncReplicasCount + testOutOfSyncReplicasCount}`
+      );
+      expect(onlineWidgetDef).toBeInTheDocument();
+      expect(onlineWidget).toBeInTheDocument();
+    });
+    it('shows right count when inSyncReplicasCount: undefined outOfSyncReplicasCount: 1', async () => {
+      const fetchStatsMock = fetchMock.getOnce(fetchStatsUrl, {
+        ...clusterStatsPayload,
+        inSyncReplicasCount: undefined,
+        outOfSyncReplicasCount: testOutOfSyncReplicasCount,
+      });
+      renderComponent();
+      await waitFor(() => {
+        expect(fetchStatsMock.called()).toBeTruthy();
+      });
+
+      const onlineWidget = screen.getByText(`of ${testOutOfSyncReplicasCount}`);
+      expect(onlineWidget).toBeInTheDocument();
+    });
+    it(`shows right count when inSyncReplicasCount: ${testInSyncReplicasCount} outOfSyncReplicasCount: undefined`, async () => {
+      const fetchStatsMock = fetchMock.getOnce(fetchStatsUrl, {
+        ...clusterStatsPayload,
+        inSyncReplicasCount: testInSyncReplicasCount,
+        outOfSyncReplicasCount: undefined,
+      });
+      renderComponent();
+      await waitFor(() => {
+        expect(fetchStatsMock.called()).toBeTruthy();
+      });
+      const onlineWidgetDef = screen.getByText(testInSyncReplicasCount);
+      const onlineWidget = screen.getByText(`of ${testInSyncReplicasCount}`);
+      expect(onlineWidgetDef).toBeInTheDocument();
+      expect(onlineWidget).toBeInTheDocument();
+    });
   });
 });