Merge branch 'master' of github.com:provectus/kafka-ui into improvement/6-remove-disk-system-dashboards

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

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

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { ClusterName, BrokerMetrics, ZooKeeperStatus } from 'redux/interfaces';
 import useInterval from 'lib/hooks/useInterval';
-import formatBytes from 'lib/utils/formatBytes';
 import cx from 'classnames';
 import MetricsWrapper from 'components/common/Dashboard/MetricsWrapper';
 import Indicator from 'components/common/Dashboard/Indicator';
@@ -22,6 +21,8 @@ const Topics: React.FC<Props> = ({
   zooKeeperStatus,
   onlinePartitionCount,
   offlinePartitionCount,
+  inSyncReplicasCount,
+  outOfSyncReplicasCount,
   underReplicatedPartitionCount,
   fetchBrokers,
   fetchBrokerMetrics,
@@ -67,14 +68,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>
     </div>

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

@@ -22,6 +22,8 @@ const mapStateToProps = (state: RootState, { match: { params: { clusterName } }}
   activeControllers: brokerSelectors.getActiveControllers(state),
   onlinePartitionCount: brokerSelectors.getOnlinePartitionCount(state),
   offlinePartitionCount: brokerSelectors.getOfflinePartitionCount(state),
+  inSyncReplicasCount: brokerSelectors.getInSyncReplicasCount(state),
+  outOfSyncReplicasCount: brokerSelectors.getOutOfSyncReplicasCount(state),
   underReplicatedPartitionCount: brokerSelectors.getUnderReplicatedPartitionCount(state)
 });
 

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

@@ -21,6 +21,8 @@ export interface BrokerMetrics {
   activeControllers: number;
   onlinePartitionCount: number;
   offlinePartitionCount: number;
+  inSyncReplicasCount: number,
+  outOfSyncReplicasCount: number,
   underReplicatedPartitionCount: number;
   diskUsage: BrokerDiskUsage[];
 }

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

@@ -15,6 +15,8 @@ export const initialState: BrokersState =  {
   activeControllers: 0,
   onlinePartitionCount: 0,
   offlinePartitionCount: 0,
+  inSyncReplicasCount: 0,
+  outOfSyncReplicasCount: 0,
   underReplicatedPartitionCount: 0,
   diskUsage: [],
 };

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

@@ -18,4 +18,6 @@ export const getZooKeeperStatus = createSelector(brokersState, ({ zooKeeperStatu
 export const getActiveControllers = createSelector(brokersState, ({ activeControllers }) => activeControllers);
 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 getUnderReplicatedPartitionCount = createSelector(brokersState, ({ underReplicatedPartitionCount }) => underReplicatedPartitionCount);