FE: Fix 'Online Partitions' column (#607)

Co-authored-by: German Osin <german.osin@gmail.com>

Author: bachmanity1

e2e-tests/src/main/java/io/kafbat/ui/screens/brokers/BrokersList.java

@@ -48,8 +48,8 @@ public List<SelenideElement> getAllVisibleElements() {
   }
 
   private List<SelenideElement> getEnabledColumnHeaders() {
-    return Stream.of("Broker ID", "Disk usage", "Partitions skew",
-            "Leaders", "Leader skew", "Online partitions", "Port", "Host")
+    return Stream.of("Broker ID", "Disk usage", "In Sync Replicas", "Replicas", "Replicas skew",
+            "Leaders", "Leaders skew", "Port", "Host")
         .map(name -> $x(String.format(columnHeaderLocator, name)))
         .collect(Collectors.toList());
   }

frontend/src/components/Brokers/BrokersList/SkewHeader/SkewHeader.tsx

@@ -6,7 +6,7 @@ import * as S from './SkewHeader.styled';
 
 const SkewHeader: React.FC = () => (
   <S.CellWrapper>
-    Partitions skew
+    Replicas skew
     <Tooltip
       value={<InfoIcon />}
       content="The divergence from the average brokers' value"

frontend/src/components/Brokers/BrokersList/TableCells/TableCells.tsx

@@ -57,7 +57,7 @@ export const DiscUsage = ({
 
 type ScewProps = CellContext<
   BrokersTableRow,
-  BrokersTableRow['partitionsSkew'] | BrokersTableRow['leadersSkew']
+  BrokersTableRow['replicasSkew'] | BrokersTableRow['leadersSkew']
 >;
 
 export const Skew = ({ getValue }: ScewProps) => {
@@ -73,25 +73,24 @@ export const Skew = ({ getValue }: ScewProps) => {
   );
 };
 
-type OnlinePartitionsProps = CellContext<
+type InSyncReplicasProps = CellContext<
   BrokersTableRow,
-  BrokersTableRow['onlinePartitionCount']
+  BrokersTableRow['inSyncReplicas']
 >;
 
-export const OnlinePartitions = ({ row }: OnlinePartitionsProps) => {
-  const { onlinePartitionCount, offlinePartitionCount } = row.original;
-
-  if (
-    onlinePartitionCount === undefined ||
-    offlinePartitionCount === undefined
-  ) {
+export const InSyncReplicas = ({ getValue, row }: InSyncReplicasProps) => {
+  const inSyncReplicas = getValue();
+  const { replicas } = row.original;
+  if (inSyncReplicas === undefined || replicas === undefined) {
     return null;
   }
-
   return (
-    <ColoredCell
-      value={onlinePartitionCount}
-      attention={offlinePartitionCount > 0}
-    />
+    <ColoredCell value={inSyncReplicas} attention={inSyncReplicas < replicas} />
   );
 };
+
+type ReplicasProps = CellContext<BrokersTableRow, BrokersTableRow['replicas']>;
+
+export const Replicas = ({ getValue }: ReplicasProps) => {
+  return <ColoredCell value={getValue() || ''} />;
+};

frontend/src/components/Brokers/BrokersList/lib/types.ts

@@ -5,9 +5,9 @@ export type BrokersTableRow = {
   port: number | undefined;
   host: string | undefined;
   partitionsLeader: number | undefined;
-  partitionsSkew: number | undefined;
   leadersSkew: number | undefined;
-  onlinePartitionCount: number | undefined;
-  offlinePartitionCount: number | undefined;
+  replicas: number | undefined;
+  inSyncReplicas: number | undefined;
+  replicasSkew: number | undefined;
   activeControllers: number | undefined;
 };

frontend/src/components/Brokers/BrokersList/lib/utils.ts

@@ -19,8 +19,6 @@ export const getBrokersTableRows = ({
   brokers = [],
   diskUsage = [],
   activeControllers,
-  onlinePartitionCount,
-  offlinePartitionCount,
 }: GetBrokersTableRowsParams): BrokersTableRow[] => {
   if (!brokers || brokers.length === 0) {
     return [];
@@ -38,10 +36,10 @@ export const getBrokersTableRows = ({
       port: broker.port,
       host: broker.host,
       partitionsLeader: broker.partitionsLeader,
-      partitionsSkew: broker.partitionsSkew,
       leadersSkew: broker.leadersSkew,
-      onlinePartitionCount,
-      offlinePartitionCount,
+      replicas: broker.partitions,
+      inSyncReplicas: broker.inSyncPartitions,
+      replicasSkew: broker.partitionsSkew,
       activeControllers,
     };
   });
@@ -59,19 +57,23 @@ export const getBrokersTableColumns = () => {
       header: 'Disk usage',
       cell: Cell.DiscUsage,
     }),
-    columnHelper.accessor('partitionsSkew', {
+    columnHelper.accessor('inSyncReplicas', {
+      header: 'In Sync Replicas',
+      cell: Cell.InSyncReplicas,
+    }),
+    columnHelper.accessor('replicas', {
+      header: 'Replicas',
+      cell: Cell.Replicas,
+    }),
+    columnHelper.accessor('replicasSkew', {
       header: SkewHeader,
       cell: Cell.Skew,
     }),
     columnHelper.accessor('partitionsLeader', { header: 'Leaders' }),
     columnHelper.accessor('leadersSkew', {
-      header: 'Leader skew',
+      header: 'Leaders skew',
       cell: Cell.Skew,
     }),
-    columnHelper.accessor('onlinePartitionCount', {
-      header: 'Online partitions',
-      cell: Cell.OnlinePartitions,
-    }),
     columnHelper.accessor('port', { header: 'Port' }),
     columnHelper.accessor('host', { header: 'Host' }),
   ];