Repository: provectus/kafka-ui
Issue: Inconsistency in stats of Topics and Brokers [Bug]
Labels: type/bug
scope/frontend
status/accepted
status/confirmed

**Describe the bug**
<!--(A clear and concise description of what the bug is.)-->

Stats of Brokers and Topics look different for similar parameters (URP and ISR).
**Set up**
<!--
(How do you run the app? 
Which version of the app are you running? Provide either docker image version or check commit hash at the top left corner. We won't be able to help you without this information.)
-->
https://www.kafka-ui.provectus.io/ui

**Steps to Reproduce**
Steps to reproduce the behavior:

1. Go to Brokers page, look at stats of Partitions
2. URP has no dot; neither In Sync Replicas, also it written in full name (see attachment)
3. Go to Topics -> Click some topic name, look at topic`s overview stats
4. URP has red dot (although it should have a green one for 0), ISR is written in abbreviation and has a green dot for 1 of 1.

**Expected behavior**
<!--
(A clear and concise description of what you expected to happen)
-->
URP and ISR look same for Brokers partitions and Topics overview

**Screenshots**
<!--
(If applicable, add screenshots to help explain your problem)
-->
<img width="1087" alt="Screenshot 2022-02-04 at 19 46 38" src="https://user-images.githubusercontent.com/92585878/152577563-9c4fbbfc-e68d-4820-a982-e182f4fd6e81.png">
<img width="626" alt="Screenshot 2022-02-04 at 19 46 03" src="https://user-images.githubusercontent.com/92585878/152577549-d585d930-b387-4df4-b6b1-49e06e2c6048.png">


**Additional context**
<!--
(Add any other context about the problem here)
-->


Issue comments:
#1268 ?

Pull request review comments:

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 99f0454fc12..411f7cf414d 100644
--- a/kafka-ui-react-app/src/components/Brokers/Brokers.tsx
+++ b/kafka-ui-react-app/src/components/Brokers/Brokers.tsx
@@ -30,6 +30,9 @@ const Brokers: React.FC = () => {
     version,
   } = useAppSelector(selectStats);
 
+  let replicas = inSyncReplicasCount ?? 0;
+  replicas += outOfSyncReplicasCount ?? 0;
+
   React.useEffect(() => {
     dispatch(fetchClusterStats(clusterName));
   }, [fetchClusterStats, clusterName]);
@@ -78,11 +81,35 @@ const Brokers: React.FC = () => {
               of {(onlinePartitionCount || 0) + (offlinePartitionCount || 0)}
             </Metrics.LightText>
           </Metrics.Indicator>
-          <Metrics.Indicator label="URP" title="Under replicated partitions">
-            {underReplicatedPartitionCount}
+          <Metrics.Indicator
+            label="URP"
+            title="Under replicated partitions"
+            isAlert
+            alertType={
+              underReplicatedPartitionCount === 0 ? 'success' : 'error'
+            }
+          >
+            {underReplicatedPartitionCount === 0 ? (
+              <Metrics.LightText>
+                {underReplicatedPartitionCount}
+              </Metrics.LightText>
+            ) : (
+              <Metrics.RedText>{underReplicatedPartitionCount}</Metrics.RedText>
+            )}
           </Metrics.Indicator>
-          <Metrics.Indicator label="In Sync Replicas">
-            {inSyncReplicasCount}
+          <Metrics.Indicator
+            label="In Sync Replicas"
+            isAlert
+            alertType={inSyncReplicasCount === replicas ? 'success' : 'error'}
+          >
+            {inSyncReplicasCount &&
+            replicas &&
+            inSyncReplicasCount < replicas ? (
+              <Metrics.RedText>{inSyncReplicasCount}</Metrics.RedText>
+            ) : (
+              inSyncReplicasCount
+            )}
+            <Metrics.LightText> of {replicas}</Metrics.LightText>
           </Metrics.Indicator>
           <Metrics.Indicator label="Out Of Sync Replicas">
             {outOfSyncReplicasCount}
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx
index e6d11e30f0a..458d2dff6a3 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx
@@ -52,13 +52,16 @@ const Overview: React.FC<Props> = ({
             label="URP"
             title="Under replicated partitions"
             isAlert
-            alertType={underReplicatedPartitions === 0 ? 'error' : 'success'}
+            alertType={underReplicatedPartitions === 0 ? 'success' : 'error'}
           >
-            <Metrics.RedText>{underReplicatedPartitions}</Metrics.RedText>
+            {underReplicatedPartitions === 0 ? (
+              <Metrics.LightText>{underReplicatedPartitions}</Metrics.LightText>
+            ) : (
+              <Metrics.RedText>{underReplicatedPartitions}</Metrics.RedText>
+            )}
           </Metrics.Indicator>
           <Metrics.Indicator
-            label="ISR"
-            title="In Sync Replicas"
+            label="In Sync Replicas"
             isAlert
             alertType={inSyncReplicas === replicas ? 'success' : 'error'}
           >
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/__test__/Overview.spec.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/__test__/Overview.spec.tsx
index 226f59b0ccc..392cab08ca9 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/__test__/Overview.spec.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/__test__/Overview.spec.tsx
@@ -98,7 +98,7 @@ describe('Overview', () => {
       });
       const circles = screen.getAllByRole('circle');
       expect(circles[0]).toHaveStyle(
-        `fill: ${theme.circularAlert.color.error}`
+        `fill: ${theme.circularAlert.color.success}`
       );
       expect(circles[1]).toHaveStyle(
         `fill: ${theme.circularAlert.color.error}`


Test patch: