From 25a7bf0301f23c83ec42cf6f4bbf3acdb8d56c85 Mon Sep 17 00:00:00 2001 From: Oleg Shuralev Date: Wed, 8 Jan 2020 04:10:10 +0300 Subject: [PATCH] [UI] Cleanup --- frontend/src/components/Brokers/Brokers.tsx | 234 +++++++++--------- .../src/components/Topics/Details/Details.tsx | 70 +----- frontend/src/lib/utils/formatBytes.ts | 1 - .../src/redux/reducers/brokers/reducer.ts | 25 +- .../src/redux/reducers/brokers/selectors.ts | 16 +- frontend/src/theme/index.scss | 9 + frontend/src/types/broker.ts | 1 + 7 files changed, 172 insertions(+), 184 deletions(-) diff --git a/frontend/src/components/Brokers/Brokers.tsx b/frontend/src/components/Brokers/Brokers.tsx index 5be1cee3e5..07706a4471 100644 --- a/frontend/src/components/Brokers/Brokers.tsx +++ b/frontend/src/components/Brokers/Brokers.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import PageLoader from 'components/common/PageLoader/PageLoader'; import { ClusterId, BrokerMetrics, ZooKeeperStatus } from 'types'; import useInterval from 'lib/hooks/useInterval'; import formatBytes from 'lib/utils/formatBytes'; @@ -41,134 +40,131 @@ const Topics: React.FC = ({ useInterval(() => { fetchBrokerMetrics(clusterId); }, 5000); - if (isFetched) { - const [minDiskUsageValue, minDiskUsageSize] = formatBytes(minDiskUsage); - const [maxDiskUsageValue, maxDiskUsageSize] = formatBytes(maxDiskUsage); + const [minDiskUsageValue, minDiskUsageSize] = formatBytes(minDiskUsage); + const [maxDiskUsageValue, maxDiskUsageSize] = formatBytes(maxDiskUsage); - return ( -
-
-
Uptime
-
-
-
-

Total Brokers

-

{brokerCount}

-
-
-
-
-

Active Controllers

-

{activeControllers}

-
-
-
-
-

Zookeeper Status

-

- {zooKeeperStatus === ZooKeeperStatus.online ? ( - Online - ) : ( - Offline - )} -

-
+ return ( +
+
+
Uptime
+
+
+
+

Total Brokers

+

{brokerCount}

-
- -
-
Partitions
-
-
-
-

Online

-

- - {onlinePartitionCount} - - of {onlinePartitionCount + offlinePartitionCount} -

-
-
-
-
-

Under Replicated

-

{underReplicatedPartitionCount}

-
-
-
-
-

In Sync Replicas

-

Soon

-
-
-
-
-

Out of Sync Replicas

-

Soon

-
+
+
+

Active Controllers

+

{activeControllers}

-
- -
-
Disk
-
-
-
-

Max usage

-

- {maxDiskUsageValue} - {maxDiskUsageSize} -

-
-
-
-
-

Min Usage

-

- {minDiskUsageValue} - {minDiskUsageSize} -

-
-
-
-
-

Distribution

-

{diskUsageDistribution}

-
-
-
-
-
-
System
-
-
-
-

Network pool usage

-

- {Math.round(networkPoolUsage * 10000) / 100} - % -

-
-
-
-
-

Request pool usage

-

- {Math.round(requestPoolUsage * 10000) / 100} - % -

-
+
+
+

Zookeeper Status

+

+ {zooKeeperStatus === ZooKeeperStatus.online ? ( + Online + ) : ( + Offline + )} +

- ); - } - return (); +
+
Partitions
+
+
+
+

Online

+

+ + {onlinePartitionCount} + + of {onlinePartitionCount + offlinePartitionCount} +

+
+
+
+
+

Under Replicated

+

{underReplicatedPartitionCount}

+
+
+
+
+

In Sync Replicas

+

Soon

+
+
+
+
+

Out of Sync Replicas

+

Soon

+
+
+
+
+ +
+
Disk
+
+
+
+

Max usage

+

+ {maxDiskUsageValue} + {maxDiskUsageSize} +

+
+
+
+
+

Min Usage

+

+ {minDiskUsageValue} + {minDiskUsageSize} +

+
+
+
+
+

Distribution

+

{diskUsageDistribution}

+
+
+
+
+ +
+
System
+
+
+
+

Network pool usage

+

+ {Math.round(networkPoolUsage * 10000) / 100} + % +

+
+
+
+
+

Request pool usage

+

+ {Math.round(requestPoolUsage * 10000) / 100} + % +

+
+
+
+
+
+ ); } export default Topics; diff --git a/frontend/src/components/Topics/Details/Details.tsx b/frontend/src/components/Topics/Details/Details.tsx index 5851cb8d26..7e2c1513fd 100644 --- a/frontend/src/components/Topics/Details/Details.tsx +++ b/frontend/src/components/Topics/Details/Details.tsx @@ -1,64 +1,20 @@ import React from 'react'; -import { Topic, TopicConfigs } from 'types'; -import ConfigRow from './ConfigRow'; -import Partition from './Partition'; -const Details: React.FC<{ topic: Topic }> = ({ - topic: { - name, - partitions, - } +const Details: React.FC = ({ }) => { - const configs: TopicConfigs = {[ 'key-config']: '1' }; - const configKeys = Object.keys(configs); - return ( - <> -
-
-
-
-
-

Name

-

{name}

-
-
-
-
-

Partitions

-

{partitions.length}

-
-
-
-
-
- -
-
- -
- {partitions.map((partition) => )} -
- -
-
-

Config

- - - - - - - - - {configKeys.map((key) => )} - -
KeyValue
-
-
-
-
- +
+
+ +
+
); } diff --git a/frontend/src/lib/utils/formatBytes.ts b/frontend/src/lib/utils/formatBytes.ts index 62fbf45289..06cd59ee51 100644 --- a/frontend/src/lib/utils/formatBytes.ts +++ b/frontend/src/lib/utils/formatBytes.ts @@ -1,6 +1,5 @@ function formatBytes(bytes: number, decimals: number = 0) { const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; - if (bytes === 0) return [0, sizes[0]]; const k = 1024; diff --git a/frontend/src/redux/reducers/brokers/reducer.ts b/frontend/src/redux/reducers/brokers/reducer.ts index 59537117c3..1a94afb2af 100644 --- a/frontend/src/redux/reducers/brokers/reducer.ts +++ b/frontend/src/redux/reducers/brokers/reducer.ts @@ -1,4 +1,4 @@ -import { Action, BrokersState, ZooKeeperStatus } from 'types'; +import { Action, BrokersState, ZooKeeperStatus, BrokerMetrics } from 'types'; import actionType from 'redux/reducers/actionType'; export const initialState: BrokersState = { @@ -12,20 +12,35 @@ export const initialState: BrokersState = { offlinePartitionCount: 0, underReplicatedPartitionCount: 0, diskUsageDistribution: undefined, + diskUsage: [], +}; + +const updateBrokerSegmentSize = (state: BrokersState, payload: BrokerMetrics) => { + const brokers = state.items; + const { diskUsage } = payload; + + const items = brokers.map((broker) => { + const brokerMetrics = diskUsage.find(({ brokerId }) => brokerId === broker.brokerId); + if (brokerMetrics !== undefined) { + return { ...broker, ...brokerMetrics }; + } + return broker; + }); + + return { ...state, items, ...payload }; }; const reducer = (state = initialState, action: Action): BrokersState => { switch (action.type) { + case actionType.GET_BROKERS__REQUEST: + return initialState; case actionType.GET_BROKERS__SUCCESS: return { ...state, items: action.payload, }; case actionType.GET_BROKER_METRICS__SUCCESS: - return { - ...state, - ...action.payload, - }; + return updateBrokerSegmentSize(state, action.payload); default: return state; } diff --git a/frontend/src/redux/reducers/brokers/selectors.ts b/frontend/src/redux/reducers/brokers/selectors.ts index d5d37b304b..04df42f564 100644 --- a/frontend/src/redux/reducers/brokers/selectors.ts +++ b/frontend/src/redux/reducers/brokers/selectors.ts @@ -25,10 +25,22 @@ export const getUnderReplicatedPartitionCount = createSelector(brokersState, ({ export const getMinDiskUsage = createSelector( getBrokerList, - (brokers) => Math.min(...brokers.map(({ segmentSize }) => segmentSize)), + (brokers) => { + if (brokers.length === 0) { + return 0; + } + + return Math.min(...brokers.map(({ segmentSize }) => segmentSize)); + }, ); export const getMaxDiskUsage = createSelector( getBrokerList, - (brokers) => Math.max(...brokers.map(({ segmentSize }) => segmentSize)), + (brokers) => { + if (brokers.length === 0) { + return 0; + } + + return Math.max(...brokers.map(({ segmentSize }) => segmentSize)); + }, ); diff --git a/frontend/src/theme/index.scss b/frontend/src/theme/index.scss index f12b290336..9333946176 100644 --- a/frontend/src/theme/index.scss +++ b/frontend/src/theme/index.scss @@ -38,3 +38,12 @@ code { text-overflow: ellipsis; white-space: nowrap; } + +.section { + animation: fadein .5s; +} + +@keyframes fadein { + from { opacity: 0; } + to { opacity: 1; } +} diff --git a/frontend/src/types/broker.ts b/frontend/src/types/broker.ts index 673387d0e0..4e7d3891a1 100644 --- a/frontend/src/types/broker.ts +++ b/frontend/src/types/broker.ts @@ -25,6 +25,7 @@ export interface BrokerMetrics { offlinePartitionCount: number; underReplicatedPartitionCount: number; diskUsageDistribution?: string; + diskUsage: BrokerDiskUsage[]; } export interface BrokersState extends BrokerMetrics {