refactor online partitions to isr

Author: bachmanity1

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,26 @@ 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;
+export const InSyncReplicas = ({ row }: InSyncReplicasProps) => {
+  const { replicas, inSyncReplicas } = row.original;
 
   if (
-    onlinePartitionCount === undefined ||
-    offlinePartitionCount === undefined
+    replicas === undefined ||
+    inSyncReplicas === undefined
   ) {
     return null;
   }
+  const value = `${inSyncReplicas} of ${replicas}`;
 
   return (
     <ColoredCell
-      value={onlinePartitionCount}
-      attention={offlinePartitionCount > 0}
+      value={value}
+      attention={inSyncReplicas < replicas}
     />
   );
 };

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,7 +57,11 @@ export const getBrokersTableColumns = () => {
       header: 'Disk usage',
       cell: Cell.DiscUsage,
     }),
-    columnHelper.accessor('partitionsSkew', {
+    columnHelper.accessor('inSyncReplicas', {
+      header: 'In Sync Replicas',
+      cell: Cell.InSyncReplicas,
+    }),
+    columnHelper.accessor('replicasSkew', {
       header: SkewHeader,
       cell: Cell.Skew,
     }),
@@ -68,10 +70,6 @@ export const getBrokersTableColumns = () => {
       header: 'Leader skew',
       cell: Cell.Skew,
     }),
-    columnHelper.accessor('onlinePartitionCount', {
-      header: 'Online partitions',
-      cell: Cell.OnlinePartitions,
-    }),
     columnHelper.accessor('port', { header: 'Port' }),
     columnHelper.accessor('host', { header: 'Host' }),
   ];