From cf645e9fe48cdb01ac409d66e6f52a074826804c Mon Sep 17 00:00:00 2001
From: Sofia Shnaidman <sshnaidman@provectus.com>
Date: Wed, 4 Mar 2020 17:23:25 +0300
Subject: [PATCH] Implemented ISR & OSR display. Updated mock.

---
 kafka-ui-react-app/mock/payload/brokerMetrics.json     |  4 ++++
 kafka-ui-react-app/src/components/Brokers/Brokers.tsx  | 10 ++++------
 .../src/components/Brokers/BrokersContainer.ts         |  2 ++
 kafka-ui-react-app/src/redux/interfaces/broker.ts      |  2 ++
 .../src/redux/reducers/brokers/reducer.ts              |  2 ++
 .../src/redux/reducers/brokers/selectors.ts            |  2 ++
 6 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/kafka-ui-react-app/mock/payload/brokerMetrics.json b/kafka-ui-react-app/mock/payload/brokerMetrics.json
index b3c5e348b9..5572049a7b 100644
--- a/kafka-ui-react-app/mock/payload/brokerMetrics.json
+++ b/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,
diff --git a/kafka-ui-react-app/src/components/Brokers/Brokers.tsx b/kafka-ui-react-app/src/components/Brokers/Brokers.tsx
index 436556d339..e3566eaf02 100644
--- a/kafka-ui-react-app/src/components/Brokers/Brokers.tsx
+++ b/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>
 
diff --git a/kafka-ui-react-app/src/components/Brokers/BrokersContainer.ts b/kafka-ui-react-app/src/components/Brokers/BrokersContainer.ts
index 57bb7d73fa..88af042f26 100644
--- a/kafka-ui-react-app/src/components/Brokers/BrokersContainer.ts
+++ b/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),
diff --git a/kafka-ui-react-app/src/redux/interfaces/broker.ts b/kafka-ui-react-app/src/redux/interfaces/broker.ts
index 4e7d3891a1..3f0140c122 100644
--- a/kafka-ui-react-app/src/redux/interfaces/broker.ts
+++ b/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[];
diff --git a/kafka-ui-react-app/src/redux/reducers/brokers/reducer.ts b/kafka-ui-react-app/src/redux/reducers/brokers/reducer.ts
index 3d73d60194..389f98b30b 100644
--- a/kafka-ui-react-app/src/redux/reducers/brokers/reducer.ts
+++ b/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: [],
diff --git a/kafka-ui-react-app/src/redux/reducers/brokers/selectors.ts b/kafka-ui-react-app/src/redux/reducers/brokers/selectors.ts
index 71cc116d6f..7f00c8ffba 100644
--- a/kafka-ui-react-app/src/redux/reducers/brokers/selectors.ts
+++ b/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);