Implemented ISR & OSR display. Updated mock.

kafka-ui-react-app/mock/payload/brokerMetrics.json

@@ -11,6 +11,8 @@
     "onlinePartitionCount": 19,
     "underReplicatedPartitionCount": 9,
     "offlinePartitionCount": 3,
+    "inSyncReplicasCount": 2,
+    "outOfSyncReplicasCount": 3,
     "diskUsage": [
       {
         "brokerId": 1,
@@ -31,6 +33,8 @@
     "onlinePartitionCount": 70,
     "underReplicatedPartitionCount": 1,
     "offlinePartitionCount": 2,
+    "inSyncReplicasCount": 5,
+    "outOfSyncReplicasCount": 1,
     "diskUsage": [
       {
         "brokerId": 1,

kafka-ui-react-app/src/components/Brokers/Brokers.tsx

@@ -24,6 +24,8 @@ const Topics: React.FC<Props> = ({
   zooKeeperStatus,
   onlinePartitionCount,
   offlinePartitionCount,
+  inSyncReplicasCount,
+  outOfSyncReplicasCount,
   underReplicatedPartitionCount,
   diskUsageDistribution,
   minDiskUsage,
@@ -77,14 +79,10 @@ const Topics: React.FC<Props> = ({
           {underReplicatedPartitionCount}
         </Indicator>
         <Indicator label="In Sync Replicas">
-          <span className="has-text-grey-lighter">
-            Soon
-          </span>
+          {inSyncReplicasCount}
         </Indicator>
         <Indicator label="Out of Sync Replicas">
-          <span className="has-text-grey-lighter">
-            Soon
-          </span>
+          {outOfSyncReplicasCount}
         </Indicator>
       </MetricsWrapper>
 

kafka-ui-react-app/src/components/Brokers/BrokersContainer.ts

@@ -24,6 +24,8 @@ const mapStateToProps = (state: RootState, { match: { params: { clusterName } }}
   requestPoolUsage: brokerSelectors.getRequestPoolUsage(state),
   onlinePartitionCount: brokerSelectors.getOnlinePartitionCount(state),
   offlinePartitionCount: brokerSelectors.getOfflinePartitionCount(state),
+  inSyncReplicasCount: brokerSelectors.getInSyncReplicasCount(state),
+  outOfSyncReplicasCount: brokerSelectors.getOutOfSyncReplicasCount(state),
   underReplicatedPartitionCount: brokerSelectors.getUnderReplicatedPartitionCount(state),
   diskUsageDistribution: brokerSelectors.getDiskUsageDistribution(state),
   minDiskUsage: brokerSelectors.getMinDiskUsage(state),

kafka-ui-react-app/src/redux/interfaces/broker.ts

@@ -23,6 +23,8 @@ export interface BrokerMetrics {
   requestPoolUsage: number;
   onlinePartitionCount: number;
   offlinePartitionCount: number;
+  inSyncReplicasCount: number,
+  outOfSyncReplicasCount: number,
   underReplicatedPartitionCount: number;
   diskUsageDistribution?: string;
   diskUsage: BrokerDiskUsage[];

kafka-ui-react-app/src/redux/reducers/brokers/reducer.ts

@@ -17,6 +17,8 @@ export const initialState: BrokersState =  {
   requestPoolUsage: 0,
   onlinePartitionCount: 0,
   offlinePartitionCount: 0,
+  inSyncReplicasCount: 0,
+  outOfSyncReplicasCount: 0,
   underReplicatedPartitionCount: 0,
   diskUsageDistribution: undefined,
   diskUsage: [],

kafka-ui-react-app/src/redux/reducers/brokers/selectors.ts

@@ -20,6 +20,8 @@ export const getNetworkPoolUsage = createSelector(brokersState, ({ networkPoolUs
 export const getRequestPoolUsage = createSelector(brokersState, ({ requestPoolUsage }) => requestPoolUsage);
 export const getOnlinePartitionCount = createSelector(brokersState, ({ onlinePartitionCount }) => onlinePartitionCount);
 export const getOfflinePartitionCount = createSelector(brokersState, ({ offlinePartitionCount }) => offlinePartitionCount);
+export const getInSyncReplicasCount = createSelector(brokersState, ({ inSyncReplicasCount }) => inSyncReplicasCount);
+export const getOutOfSyncReplicasCount = createSelector(brokersState, ({ outOfSyncReplicasCount }) => outOfSyncReplicasCount);
 export const getDiskUsageDistribution = createSelector(brokersState, ({ diskUsageDistribution }) => diskUsageDistribution);
 export const getUnderReplicatedPartitionCount = createSelector(brokersState, ({ underReplicatedPartitionCount }) => underReplicatedPartitionCount);