[CHORE] Unified getTagColor method (#1785)

* [CHORE] Unified getTagColor method

* [CHORE] Reduce component complexity

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

@@ -32,8 +32,8 @@ const Brokers: React.FC = () => {
     items,
   } = useAppSelector(selectStats);
 
-  let replicas = inSyncReplicasCount ?? 0;
+  const replicas = inSyncReplicasCount ?? 0 + (outOfSyncReplicasCount ?? 0);
-  replicas += outOfSyncReplicasCount ?? 0;
+  const areAllInSync = inSyncReplicasCount && replicas === inSyncReplicasCount;
 
   React.useEffect(() => {
     dispatch(fetchClusterStats(clusterName));
@@ -103,14 +103,12 @@ const Brokers: React.FC = () => {
           <Metrics.Indicator
             label="In Sync Replicas"
             isAlert
-            alertType={inSyncReplicasCount === replicas ? 'success' : 'error'}
+            alertType={areAllInSync ? 'success' : 'error'}
           >
-            {inSyncReplicasCount &&
+            {areAllInSync ? (
-            replicas &&
+              replicas
-            inSyncReplicasCount < replicas ? (
-              <Metrics.RedText>{inSyncReplicasCount}</Metrics.RedText>
             ) : (
-              inSyncReplicasCount
+              <Metrics.RedText>{inSyncReplicasCount}</Metrics.RedText>
             )}
             <Metrics.LightText> of {replicas}</Metrics.LightText>
           </Metrics.Indicator>
@@ -130,7 +128,14 @@ const Brokers: React.FC = () => {
           </tr>
         </thead>
         <tbody>
-          {diskUsage && diskUsage.length !== 0 ? (
+          {(!diskUsage || diskUsage.length === 0) && (
+            <tr>
+              <td colSpan={10}>Disk usage data not available</td>
+            </tr>
+          )}
+
+          {diskUsage &&
+            diskUsage.length !== 0 &&
             diskUsage.map(({ brokerId, segmentSize, segmentCount }) => (
               <tr key={brokerId}>
                 <td>{brokerId}</td>
@@ -141,12 +146,7 @@ const Brokers: React.FC = () => {
                 <td>{items && items[brokerId]?.port}</td>
                 <td>{items && items[brokerId]?.host}</td>
               </tr>
-            ))
+            ))}
-          ) : (
-            <tr>
-              <td colSpan={10}>Disk usage data not available</td>
-            </tr>
-          )}
         </tbody>
       </Table>
     </>

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;

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;

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';
 

kafka-ui-react-app/src/components/Connect/Utils/TagColor.ts

@@ -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;

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';
 

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<TableCellProps<ConsumerGroup, string>> = ({
   dataItem,

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,

kafka-ui-react-app/src/components/ConsumerGroups/Utils/TagColor.ts

@@ -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;

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;

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;