From 58fdb85fb89ae18a5bf9d6a0299666a90a399b7d Mon Sep 17 00:00:00 2001
From: NelyDavtyan <96067981+NelyDavtyan@users.noreply.github.com>
Date: Mon, 14 Feb 2022 18:13:57 +0400
Subject: [PATCH] Fix URP status color for topics and brokers (#1565)

* fix URP color for topcis and brokers

* brokers ISR fix

Co-authored-by: Roman Zabaluev <rzabaluev@provectus.com>
Co-authored-by: Alla Golosenko <92585878+agolosen@users.noreply.github.com>
---
 .../src/components/Brokers/Brokers.tsx        | 35 ++++++++++++++++---
 .../Topic/Details/Overview/Overview.tsx       | 11 +++---
 .../Overview/__test__/Overview.spec.tsx       |  2 +-
 3 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/kafka-ui-react-app/src/components/Brokers/Brokers.tsx b/kafka-ui-react-app/src/components/Brokers/Brokers.tsx
index 99f0454fc1..411f7cf414 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 e6d11e30f0..458d2dff6a 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 226f59b0cc..392cab08ca 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}`