Repository: provectus/kafka-ui
Issue: Invalid "in sync replicas" value is displayed
Labels: type/bug
scope/frontend
status/accepted
status/confirmed

<img width="370" alt="image" src="https://user-images.githubusercontent.com/1494347/165547338-b440a5d1-113a-451a-89e3-f1dd08b5586f.png">

```
const replicas = inSyncReplicasCount ?? 0 + (outOfSyncReplicasCount ?? 0);
const areAllInSync = inSyncReplicasCount && replicas === inSyncReplicasCount;
```
Doesn't seem to be a valid approach.
outOfSyncReplicasCount: 1
inSyncReplicasCount: 798


Issue comments:

Pull request review comments:
must be removed
pls revome unused code
I see no need in creation of extra constants here. Pls use 
```js
expect(screen.getByText('798')).toBeInTheDocument();
expect(screen.getByText('of 799')).toBeInTheDocument();
```
same here
and here
Must be removed

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 bb8f40f290f..39176ab0c6f 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 f2408f19939..e81468c3a8c 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();
+    });
   });
 });


Test patch: