From cb7627d8df01d8b3753ffb84639d0af1e9e74b25 Mon Sep 17 00:00:00 2001 From: Oleg Shur Date: Thu, 31 Mar 2022 16:01:09 +0300 Subject: [PATCH] [CHORE] Unified getTagColor method (#1785) * [CHORE] Unified getTagColor method * [CHORE] Reduce component complexity --- .../src/components/Brokers/Brokers.tsx | 30 +++++++++---------- .../Connect/Details/Overview/Overview.tsx | 2 +- .../Details/Tasks/ListItem/ListItem.tsx | 2 +- .../src/components/Connect/List/ListItem.tsx | 2 +- .../src/components/Connect/Utils/TagColor.ts | 17 ----------- .../ConsumerGroups/Details/Details.tsx | 2 +- .../List/ConsumerGroupsTableCells.tsx | 2 +- .../ConsumerGroups/List/ListItem.tsx | 2 +- .../ConsumerGroups/Utils/TagColor.ts | 16 ---------- .../ConsumerGroups/TopicConsumerGroups.tsx | 2 +- .../src/components/common/Tag/getTagColor.ts | 27 +++++++++++++++++ 11 files changed, 49 insertions(+), 55 deletions(-) delete mode 100644 kafka-ui-react-app/src/components/Connect/Utils/TagColor.ts delete mode 100644 kafka-ui-react-app/src/components/ConsumerGroups/Utils/TagColor.ts create mode 100644 kafka-ui-react-app/src/components/common/Tag/getTagColor.ts diff --git a/kafka-ui-react-app/src/components/Brokers/Brokers.tsx b/kafka-ui-react-app/src/components/Brokers/Brokers.tsx index 66bedf69c3..fb2087d321 100644 --- a/kafka-ui-react-app/src/components/Brokers/Brokers.tsx +++ b/kafka-ui-react-app/src/components/Brokers/Brokers.tsx @@ -32,8 +32,8 @@ const Brokers: React.FC = () => { items, } = useAppSelector(selectStats); - let replicas = inSyncReplicasCount ?? 0; - replicas += outOfSyncReplicasCount ?? 0; + const replicas = inSyncReplicasCount ?? 0 + (outOfSyncReplicasCount ?? 0); + const areAllInSync = inSyncReplicasCount && replicas === inSyncReplicasCount; React.useEffect(() => { dispatch(fetchClusterStats(clusterName)); @@ -103,14 +103,12 @@ const Brokers: React.FC = () => { - {inSyncReplicasCount && - replicas && - inSyncReplicasCount < replicas ? ( - {inSyncReplicasCount} + {areAllInSync ? ( + replicas ) : ( - inSyncReplicasCount + {inSyncReplicasCount} )} of {replicas} @@ -130,7 +128,14 @@ const Brokers: React.FC = () => { - {diskUsage && diskUsage.length !== 0 ? ( + {(!diskUsage || diskUsage.length === 0) && ( + + Disk usage data not available + + )} + + {diskUsage && + diskUsage.length !== 0 && diskUsage.map(({ brokerId, segmentSize, segmentCount }) => ( {brokerId} @@ -141,12 +146,7 @@ const Brokers: React.FC = () => { {items && items[brokerId]?.port} {items && items[brokerId]?.host} - )) - ) : ( - - Disk usage data not available - - )} + ))} diff --git a/kafka-ui-react-app/src/components/Connect/Details/Overview/Overview.tsx b/kafka-ui-react-app/src/components/Connect/Details/Overview/Overview.tsx index f98c49a127..32931c3ecc 100644 --- a/kafka-ui-react-app/src/components/Connect/Details/Overview/Overview.tsx +++ b/kafka-ui-react-app/src/components/Connect/Details/Overview/Overview.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Connector } from 'generated-sources'; import * as C from 'components/common/Tag/Tag.styled'; import * as Metrics from 'components/common/Metrics'; -import getTagColor from 'components/Connect/Utils/TagColor'; +import getTagColor from 'components/common/Tag/getTagColor'; export interface OverviewProps { connector: Connector | null; diff --git a/kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/ListItem.tsx b/kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/ListItem.tsx index 64a1b1032b..96a845b155 100644 --- a/kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/ListItem.tsx +++ b/kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/ListItem.tsx @@ -6,7 +6,7 @@ import Dropdown from 'components/common/Dropdown/Dropdown'; import DropdownItem from 'components/common/Dropdown/DropdownItem'; import VerticalElipsisIcon from 'components/common/Icons/VerticalElipsisIcon'; import * as C from 'components/common/Tag/Tag.styled'; -import getTagColor from 'components/Connect/Utils/TagColor'; +import getTagColor from 'components/common/Tag/getTagColor'; interface RouterParams { clusterName: ClusterName; diff --git a/kafka-ui-react-app/src/components/Connect/List/ListItem.tsx b/kafka-ui-react-app/src/components/Connect/List/ListItem.tsx index 97eaa1adbb..e8f3c34533 100644 --- a/kafka-ui-react-app/src/components/Connect/List/ListItem.tsx +++ b/kafka-ui-react-app/src/components/Connect/List/ListItem.tsx @@ -12,7 +12,7 @@ import ConfirmationModal from 'components/common/ConfirmationModal/ConfirmationM import { Tag } from 'components/common/Tag/Tag.styled'; import { TableKeyLink } from 'components/common/table/Table/TableKeyLink.styled'; import VerticalElipsisIcon from 'components/common/Icons/VerticalElipsisIcon'; -import getTagColor from 'components/Connect/Utils/TagColor'; +import getTagColor from 'components/common/Tag/getTagColor'; import * as S from './List.styled'; diff --git a/kafka-ui-react-app/src/components/Connect/Utils/TagColor.ts b/kafka-ui-react-app/src/components/Connect/Utils/TagColor.ts deleted file mode 100644 index 86a521d4f2..0000000000 --- a/kafka-ui-react-app/src/components/Connect/Utils/TagColor.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { ConnectorState, ConnectorStatus, TaskStatus } from 'generated-sources'; - -const getTagColor = (status: ConnectorStatus | TaskStatus) => { - const { state = '' } = status; - - switch (state) { - case ConnectorState.RUNNING: - return 'green'; - case ConnectorState.FAILED: - case ConnectorState.TASK_FAILED: - return 'red'; - default: - return 'yellow'; - } -}; - -export default getTagColor; diff --git a/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx b/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx index ad37373609..c037fb8cf4 100644 --- a/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx +++ b/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx @@ -26,7 +26,7 @@ import { getIsConsumerGroupDeleted, getAreConsumerGroupDetailsFulfilled, } from 'redux/reducers/consumerGroups/consumerGroupsSlice'; -import getTagColor from 'components/ConsumerGroups/Utils/TagColor'; +import getTagColor from 'components/common/Tag/getTagColor'; import ListItem from './ListItem'; diff --git a/kafka-ui-react-app/src/components/ConsumerGroups/List/ConsumerGroupsTableCells.tsx b/kafka-ui-react-app/src/components/ConsumerGroups/List/ConsumerGroupsTableCells.tsx index 0d56437b4b..b47e76537b 100644 --- a/kafka-ui-react-app/src/components/ConsumerGroups/List/ConsumerGroupsTableCells.tsx +++ b/kafka-ui-react-app/src/components/ConsumerGroups/List/ConsumerGroupsTableCells.tsx @@ -2,9 +2,9 @@ import React from 'react'; import { Link } from 'react-router-dom'; import { Tag } from 'components/common/Tag/Tag.styled'; import { TableCellProps } from 'components/common/SmartTable/TableColumn'; -import getTagColor from 'components/ConsumerGroups/Utils/TagColor'; import { ConsumerGroup } from 'generated-sources'; import { SmartTableKeyLink } from 'components/common/table/Table/TableKeyLink.styled'; +import getTagColor from 'components/common/Tag/getTagColor'; export const StatusCell: React.FC> = ({ dataItem, diff --git a/kafka-ui-react-app/src/components/ConsumerGroups/List/ListItem.tsx b/kafka-ui-react-app/src/components/ConsumerGroups/List/ListItem.tsx index ede7a54e0a..9078487cef 100644 --- a/kafka-ui-react-app/src/components/ConsumerGroups/List/ListItem.tsx +++ b/kafka-ui-react-app/src/components/ConsumerGroups/List/ListItem.tsx @@ -3,7 +3,7 @@ import { Link } from 'react-router-dom'; import { ConsumerGroup } from 'generated-sources'; import { Tag } from 'components/common/Tag/Tag.styled'; import { TableKeyLink } from 'components/common/table/Table/TableKeyLink.styled'; -import getTagColor from 'components/ConsumerGroups/Utils/TagColor'; +import getTagColor from 'components/common/Tag/getTagColor'; const ListItem: React.FC<{ consumerGroup: ConsumerGroup }> = ({ consumerGroup, diff --git a/kafka-ui-react-app/src/components/ConsumerGroups/Utils/TagColor.ts b/kafka-ui-react-app/src/components/ConsumerGroups/Utils/TagColor.ts deleted file mode 100644 index b72d94daae..0000000000 --- a/kafka-ui-react-app/src/components/ConsumerGroups/Utils/TagColor.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { ConsumerGroupState, ConsumerGroup } from 'generated-sources'; - -const getTagColor = (consumerGroup: ConsumerGroup) => { - const { state = '' } = consumerGroup; - switch (state) { - case ConsumerGroupState.STABLE: - return 'green'; - case ConsumerGroupState.DEAD: - return 'red'; - case ConsumerGroupState.EMPTY: - return 'white'; - default: - return 'yellow'; - } -}; -export default getTagColor; diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/ConsumerGroups/TopicConsumerGroups.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/ConsumerGroups/TopicConsumerGroups.tsx index 7877dcd19a..14ff6bb8d2 100644 --- a/kafka-ui-react-app/src/components/Topics/Topic/Details/ConsumerGroups/TopicConsumerGroups.tsx +++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/ConsumerGroups/TopicConsumerGroups.tsx @@ -7,8 +7,8 @@ import TableHeaderCell from 'components/common/table/TableHeaderCell/TableHeader import { Tag } from 'components/common/Tag/Tag.styled'; import { TableKeyLink } from 'components/common/table/Table/TableKeyLink.styled'; import { Link } from 'react-router-dom'; -import getTagColor from 'components/ConsumerGroups/Utils/TagColor'; import PageLoader from 'components/common/PageLoader/PageLoader'; +import getTagColor from 'components/common/Tag/getTagColor'; export interface Props extends Topic, TopicDetails { clusterName: ClusterName; diff --git a/kafka-ui-react-app/src/components/common/Tag/getTagColor.ts b/kafka-ui-react-app/src/components/common/Tag/getTagColor.ts new file mode 100644 index 0000000000..a91b7b0d45 --- /dev/null +++ b/kafka-ui-react-app/src/components/common/Tag/getTagColor.ts @@ -0,0 +1,27 @@ +import { + ConnectorState, + ConnectorStatus, + ConsumerGroup, + ConsumerGroupState, + TaskStatus, +} from 'generated-sources'; + +const getTagColor = ({ + state, +}: ConnectorStatus | TaskStatus | ConsumerGroup) => { + switch (state) { + case ConnectorState.RUNNING: + case ConsumerGroupState.STABLE: + return 'green'; + case ConnectorState.FAILED: + case ConnectorState.TASK_FAILED: + case ConsumerGroupState.DEAD: + return 'red'; + case ConsumerGroupState.EMPTY: + return 'white'; + default: + return 'yellow'; + } +}; + +export default getTagColor;