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)} - - {underReplicatedPartitionCount} + + {underReplicatedPartitionCount === 0 ? ( + + {underReplicatedPartitionCount} + + ) : ( + {underReplicatedPartitionCount} + )} - - {inSyncReplicasCount} + + {inSyncReplicasCount && + replicas && + inSyncReplicasCount < replicas ? ( + {inSyncReplicasCount} + ) : ( + inSyncReplicasCount + )} + of {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 = ({ label="URP" title="Under replicated partitions" isAlert - alertType={underReplicatedPartitions === 0 ? 'error' : 'success'} + alertType={underReplicatedPartitions === 0 ? 'success' : 'error'} > - {underReplicatedPartitions} + {underReplicatedPartitions === 0 ? ( + {underReplicatedPartitions} + ) : ( + {underReplicatedPartitions} + )} 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}`