Merge pull request #16 from provectus/improvement/6-remove-disk-system-dashboards

Removed disk/system dashboards.

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

@@ -6,8 +6,6 @@
     "zooKeeperStatus": 1,
     "activeControllers": 1,
     "uncleanLeaderElectionCount": 0,
-    "networkPoolUsage": 0.001970896739179595,
-    "requestPoolUsage": 0.00730438980248805,
     "onlinePartitionCount": 19,
     "underReplicatedPartitionCount": 9,
     "offlinePartitionCount": 3,
@@ -18,8 +16,7 @@
         "brokerId": 1,
         "segmentSize": 479900675
       }
-    ],
-    "diskUsageDistribution": "even"
+    ]
   },
   {
     "clusterName": "kafka-ui.cluster",
@@ -28,8 +25,6 @@
     "zooKeeperStatus": 1,
     "activeControllers": 1,
     "uncleanLeaderElectionCount": 0,
-    "networkPoolUsage": 0.004401004145400575,
-    "requestPoolUsage": 0.004089519725388984,
     "onlinePartitionCount": 70,
     "underReplicatedPartitionCount": 1,
     "offlinePartitionCount": 2,
@@ -40,7 +35,6 @@
         "brokerId": 1,
         "segmentSize": 968226532
       }
-    ],
-    "diskUsageDistribution": "even"
+    ]
   }
 ]

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';
@@ -10,8 +9,6 @@ import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
 interface Props extends BrokerMetrics {
   clusterName: ClusterName;
   isFetched: boolean;
-  minDiskUsage: number;
-  maxDiskUsage: number;
   fetchBrokers: (clusterName: ClusterName) => void;
   fetchBrokerMetrics: (clusterName: ClusterName) => void;
 }
@@ -27,11 +24,6 @@ const Topics: React.FC<Props> = ({
   inSyncReplicasCount,
   outOfSyncReplicasCount,
   underReplicatedPartitionCount,
-  diskUsageDistribution,
-  minDiskUsage,
-  maxDiskUsage,
-  networkPoolUsage,
-  requestPoolUsage,
   fetchBrokers,
   fetchBrokerMetrics,
 }) => {
@@ -45,9 +37,6 @@ const Topics: React.FC<Props> = ({
 
   useInterval(() => { fetchBrokerMetrics(clusterName); }, 5000);
 
-  const [minDiskUsageValue, minDiskUsageSize] = formatBytes(minDiskUsage);
-  const [maxDiskUsageValue, maxDiskUsageSize] = formatBytes(maxDiskUsage);
-
   const zkOnline = zooKeeperStatus === ZooKeeperStatus.online;
 
   return (
@@ -85,33 +74,6 @@ const Topics: React.FC<Props> = ({
           {outOfSyncReplicasCount}
         </Indicator>
       </MetricsWrapper>
-
-      <MetricsWrapper title="Disk">
-        <Indicator label="Max usage">
-          {maxDiskUsageValue}
-          <span className="subtitle has-text-weight-light"> {maxDiskUsageSize}</span>
-        </Indicator>
-        <Indicator label="Min usage">
-          {minDiskUsageValue}
-          <span className="subtitle has-text-weight-light"> {minDiskUsageSize}</span>
-        </Indicator>
-        <Indicator label="Distribution">
-          <span className="is-capitalized">
-            {diskUsageDistribution}
-          </span>
-        </Indicator>
-      </MetricsWrapper>
-
-      <MetricsWrapper title="System">
-        <Indicator label="Network pool usage">
-          {Math.round(networkPoolUsage * 10000) / 100}
-          <span className="subtitle has-text-weight-light">%</span>
-        </Indicator>
-        <Indicator label="Request pool usage">
-          {Math.round(requestPoolUsage * 10000) / 100}
-          <span className="subtitle has-text-weight-light">%</span>
-        </Indicator>
-      </MetricsWrapper>
     </div>
   );
 };

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

@@ -20,16 +20,11 @@ const mapStateToProps = (state: RootState, { match: { params: { clusterName } }}
   brokerCount: brokerSelectors.getBrokerCount(state),
   zooKeeperStatus: brokerSelectors.getZooKeeperStatus(state),
   activeControllers: brokerSelectors.getActiveControllers(state),
-  networkPoolUsage: brokerSelectors.getNetworkPoolUsage(state),
-  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),
-  maxDiskUsage: brokerSelectors.getMaxDiskUsage(state),
+  underReplicatedPartitionCount: brokerSelectors.getUnderReplicatedPartitionCount(state)
 });
 
 const mapDispatchToProps = {

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

@@ -19,14 +19,11 @@ export interface BrokerMetrics {
   brokerCount: number;
   zooKeeperStatus: ZooKeeperStatus;
   activeControllers: number;
-  networkPoolUsage: number;
-  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

@@ -13,14 +13,11 @@ export const initialState: BrokersState =  {
   brokerCount: 0,
   zooKeeperStatus: ZooKeeperStatus.offline,
   activeControllers: 0,
-  networkPoolUsage: 0,
-  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

@@ -16,31 +16,8 @@ const getBrokerList = createSelector(brokersState, ({ items }) => items);
 export const getBrokerCount = createSelector(brokersState, ({ brokerCount }) => brokerCount);
 export const getZooKeeperStatus = createSelector(brokersState, ({ zooKeeperStatus }) => zooKeeperStatus);
 export const getActiveControllers = createSelector(brokersState, ({ activeControllers }) => activeControllers);
-export const getNetworkPoolUsage = createSelector(brokersState, ({ networkPoolUsage }) => networkPoolUsage);
-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);
-
-export const getMinDiskUsage = createSelector(
-  getBrokerList,
-  (brokers) => {
-    if (brokers.length === 0) {
-      return 0;
-    }
-    return Math.min(...brokers.map(({ segmentSize }) => segmentSize));
-  },
-);
-
-export const getMaxDiskUsage = createSelector(
-  getBrokerList,
-  (brokers) => {
-    if (brokers.length === 0) {
-      return 0;
-    }
-    return Math.max(...brokers.map(({ segmentSize }) => segmentSize));
-  },
-);