|
@@ -32,8 +32,8 @@ const Brokers: React.FC = () => {
|
|
|
items,
|
|
|
} = useAppSelector(selectStats);
|
|
|
|
|
|
- let replicas = inSyncReplicasCount ?? 0;
|
|
|
- replicas += outOfSyncReplicasCount ?? 0;
|
|
|
+ const replicas = inSyncReplicasCount ?? 0 + (outOfSyncReplicasCount ?? 0);
|
|
|
+ const areAllInSync = inSyncReplicasCount && replicas === inSyncReplicasCount;
|
|
|
|
|
|
React.useEffect(() => {
|
|
|
dispatch(fetchClusterStats(clusterName));
|
|
@@ -103,14 +103,12 @@ const Brokers: React.FC = () => {
|
|
|
<Metrics.Indicator
|
|
|
label="In Sync Replicas"
|
|
|
isAlert
|
|
|
- alertType={inSyncReplicasCount === replicas ? 'success' : 'error'}
|
|
|
+ alertType={areAllInSync ? 'success' : 'error'}
|
|
|
>
|
|
|
- {inSyncReplicasCount &&
|
|
|
- replicas &&
|
|
|
- inSyncReplicasCount < replicas ? (
|
|
|
- <Metrics.RedText>{inSyncReplicasCount}</Metrics.RedText>
|
|
|
+ {areAllInSync ? (
|
|
|
+ replicas
|
|
|
) : (
|
|
|
- inSyncReplicasCount
|
|
|
+ <Metrics.RedText>{inSyncReplicasCount}</Metrics.RedText>
|
|
|
)}
|
|
|
<Metrics.LightText> of {replicas}</Metrics.LightText>
|
|
|
</Metrics.Indicator>
|
|
@@ -130,7 +128,14 @@ const Brokers: React.FC = () => {
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
- {diskUsage && diskUsage.length !== 0 ? (
|
|
|
+ {(!diskUsage || diskUsage.length === 0) && (
|
|
|
+ <tr>
|
|
|
+ <td colSpan={10}>Disk usage data not available</td>
|
|
|
+ </tr>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {diskUsage &&
|
|
|
+ diskUsage.length !== 0 &&
|
|
|
diskUsage.map(({ brokerId, segmentSize, segmentCount }) => (
|
|
|
<tr key={brokerId}>
|
|
|
<td>{brokerId}</td>
|
|
@@ -141,12 +146,7 @@ const Brokers: React.FC = () => {
|
|
|
<td>{items && items[brokerId]?.port}</td>
|
|
|
<td>{items && items[brokerId]?.host}</td>
|
|
|
</tr>
|
|
|
- ))
|
|
|
- ) : (
|
|
|
- <tr>
|
|
|
- <td colSpan={10}>Disk usage data not available</td>
|
|
|
- </tr>
|
|
|
- )}
|
|
|
+ ))}
|
|
|
</tbody>
|
|
|
</Table>
|
|
|
</>
|