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>

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">
+          <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}

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'}
           >
+            {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'}
           >

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}`