FE: Fix 'Online Partitions' column

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' }),
  ];