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

[Issue-1492] Fixed all tag-badges background colors (#1594)

Browse source 
Co-authored-by: Anton Zorin <ant.zorin@gmail.com>
This commit is contained in:
Zorii4 2022-02-14 13:27:42 +03:00 • committed by GitHub
parent 95a9047114
commit fbbc6537c8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 51 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,6 +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';
export interface OverviewProps {
connector: Connector | null;
@ -31,7 +32,9 @@ const Overview: React.FC<OverviewProps> = ({
</Metrics.Indicator>
)}
<Metrics.Indicator label="State">
<C.Tag color="yellow">{connector.status.state}</C.Tag>
<C.Tag color={getTagColor(connector.status)}>
{connector.status.state}
</C.Tag>
</Metrics.Indicator>
<Metrics.Indicator label="Tasks Running">
{runningTasksCount}

4
kafka-ui-react-app/src/components/Connect/Details/Overview/__tests__/__snapshots__/Overview.spec.tsx.snap
View file

@ -6,7 +6,7 @@ exports[`Overview view matches snapshot 1`] = `
border-radius: 16px;
height: 20px;
line-height: 20px;
background-color: #FFEECC;
background-color: #D6F5E0;
color: #171A1C;
font-size: 12px;
display: inline-block;
@ -179,7 +179,7 @@ exports[`Overview view matches snapshot 1`] = `
<span>
<p
className="c5"
color="yellow"
color="green"
>
RUNNING
</p>

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

@ -6,6 +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';
interface RouterParams {
clusterName: ClusterName;
@ -35,7 +36,7 @@ const ListItem: React.FC<ListItemProps> = ({ task, restartTask }) => {
<td>{task.status?.id}</td>
<td>{task.status?.workerId}</td>
<td>
<C.Tag color="yellow">{task.status.state}</C.Tag>
<C.Tag color={getTagColor(task.status)}>{task.status.state}</C.Tag>
</td>
<td>{task.status.trace || 'null'}</td>
<td style={{ width: '5%' }}>

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

@ -1,5 +1,5 @@
import React from 'react';
import { ConnectorState, FullConnectorInfo } from 'generated-sources';
import { FullConnectorInfo } from 'generated-sources';
import { clusterConnectConnectorPath, clusterTopicPath } from 'lib/paths';
import { ClusterName } from 'redux/interfaces';
import { Link, NavLink } from 'react-router-dom';
@ -12,6 +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 * as S from './List.styled';
@ -51,20 +52,6 @@ const ListItem: React.FC<ListItemProps> = ({
return tasksCount - (failedTasksCount || 0);
}, [tasksCount, failedTasksCount]);
const stateColor = React.useMemo(() => {
const { state = '' } = status;
switch (state) {
case ConnectorState.RUNNING:
return 'green';
case ConnectorState.FAILED:
case ConnectorState.TASK_FAILED:
return 'red';
default:
return 'yellow';
}
}, [status]);
return (
<tr>
<TableKeyLink>
@ -87,7 +74,7 @@ const ListItem: React.FC<ListItemProps> = ({
))}
</S.TagsWrapper>
</td>
<td>{status && <Tag color={stateColor}>{status.state}</Tag>}</td>
<td>{status && <Tag color={getTagColor(status)}>{status.state}</Tag>}</td>
<td>
{runningTasks && (
<span>

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

@ -0,0 +1,17 @@
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;

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

@ -26,6 +26,7 @@ import {
getIsConsumerGroupDeleted,
getAreConsumerGroupDetailsFulfilled,
} from 'redux/reducers/consumerGroups/consumerGroupsSlice';
import getTagColor from 'components/ConsumerGroups/Utils/TagColor';
import ListItem from './ListItem';
@ -90,7 +91,7 @@ const Details: React.FC = () => {
<Metrics.Wrapper>
<Metrics.Section>
<Metrics.Indicator label="State">
<Tag color="yellow">{consumerGroup.state}</Tag>
<Tag color={getTagColor(consumerGroup)}>{consumerGroup.state}</Tag>
</Metrics.Indicator>
<Metrics.Indicator label="Members">
{consumerGroup.members}

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

@ -1,27 +1,13 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { ConsumerGroup, ConsumerGroupState } from 'generated-sources';
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';
const ListItem: React.FC<{ consumerGroup: ConsumerGroup }> = ({
consumerGroup,
}) => {
const stateColor = React.useMemo(() => {
const { state = '' } = consumerGroup;
switch (state) {
case ConsumerGroupState.STABLE:
return 'green';
case ConsumerGroupState.DEAD:
return 'red';
case ConsumerGroupState.EMPTY:
return 'white';
default:
return 'yellow';
}
}, [consumerGroup]);
return (
<tr>
<TableKeyLink>
@ -34,7 +20,7 @@ const ListItem: React.FC<{ consumerGroup: ConsumerGroup }> = ({
<td>{consumerGroup.messagesBehind}</td>
<td>{consumerGroup.coordinator?.id}</td>
<td>
<Tag color={stateColor}>{consumerGroup.state}</Tag>
<Tag color={getTagColor(consumerGroup)}>{consumerGroup.state}</Tag>
</td>
</tr>
);

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

@ -0,0 +1,16 @@
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;

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

@ -7,6 +7,7 @@ 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';
interface Props extends Topic, TopicDetails {
clusterName: ClusterName;
@ -57,7 +58,7 @@ const TopicConsumerGroups: React.FC<Props> = ({
<td>{consumer.coordinator?.id}</td>
<td>
{consumer.state && (
<Tag color="yellow">{`${consumer.state
<Tag color={getTagColor(consumer)}>{`${consumer.state
.charAt(0)
.toUpperCase()}${consumer.state
.slice(1)