0ct0pu5/kafka-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[CHORE] Unified getTagColor method (#1785)

Browse source 
* [CHORE] Unified getTagColor method

* [CHORE] Reduce component complexity
This commit is contained in:
Oleg Shur 2022-03-31 16:01:09 +03:00 • committed by GitHub
parent 913b8921b4
commit cb7627d8df
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 49 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
kafka-ui-react-app/src/components/Brokers/Brokers.tsx
View file

@ -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 = () => {
<Metrics.Indicator
label="In Sync Replicas"
isAlert
alertType={inSyncReplicasCount === replicas ? 'success' : 'error'}
alertType={areAllInSync ? 'success' : 'error'}
>
{inSyncReplicasCount &&
replicas &&
inSyncReplicasCount < replicas ? (
<Metrics.RedText>{inSyncReplicasCount}</Metrics.RedText>
{areAllInSync ? (
replicas
) : (
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>
</>

2
kafka-ui-react-app/src/components/Connect/Details/Overview/Overview.tsx
View file

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

2
kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/ListItem.tsx
View file

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

2
kafka-ui-react-app/src/components/Connect/List/ListItem.tsx
View file

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

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

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

2
kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx
View file

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

2
kafka-ui-react-app/src/components/ConsumerGroups/List/ConsumerGroupsTableCells.tsx
View file

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

2
kafka-ui-react-app/src/components/ConsumerGroups/List/ListItem.tsx
View file

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

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

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

2
kafka-ui-react-app/src/components/Topics/Topic/Details/ConsumerGroups/TopicConsumerGroups.tsx
View file

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

27
kafka-ui-react-app/src/components/common/Tag/getTagColor.ts Normal file
View file

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