Empty table for brokers & change tag styles (#1371)

Co-authored-by: Ekaterina Petrova <epetrova@provectus.com>

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

@@ -3,7 +3,7 @@ import { ClusterName, ZooKeeperStatus } from 'redux/interfaces';
 import useInterval from 'lib/hooks/useInterval';
 import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
 import { useParams } from 'react-router';
-import TagStyled from 'components/common/Tag/Tag.styled';
+import { Tag } from 'components/common/Tag/Tag.styled';
 import TableHeaderCell from 'components/common/table/TableHeaderCell/TableHeaderCell';
 import { Table } from 'components/common/table/Table/Table.styled';
 import PageHeading from 'components/common/PageHeading/PageHeading';
@@ -52,9 +52,9 @@ const Brokers: React.FC = () => {
             {activeControllers}
           </Metrics.Indicator>
           <Metrics.Indicator label="Zookeeper Status">
-            <TagStyled color={zkOnline ? 'green' : 'gray'}>
+            <Tag color={zkOnline ? 'green' : 'gray'}>
               {zkOnline ? 'online' : 'offline'}
-            </TagStyled>
+            </Tag>
           </Metrics.Indicator>
           <Metrics.Indicator label="Version">{version}</Metrics.Indicator>
         </Metrics.Section>
@@ -98,15 +98,21 @@ const Brokers: React.FC = () => {
           </tr>
         </thead>
         <tbody>
-          {diskUsage?.map(({ brokerId, segmentSize, segmentCount }) => (
-            <tr key={brokerId}>
-              <td>{brokerId}</td>
-              <td>
-                <BytesFormatted value={segmentSize} />
-              </td>
-              <td>{segmentCount}</td>
+          {diskUsage && diskUsage.length !== 0 ? (
+            diskUsage.map(({ brokerId, segmentSize, segmentCount }) => (
+              <tr key={brokerId}>
+                <td>{brokerId}</td>
+                <td>
+                  <BytesFormatted value={segmentSize} />
+                </td>
+                <td>{segmentCount}</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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Connector } from 'generated-sources';
-import TagStyled from 'components/common/Tag/Tag.styled';
+import * as C from 'components/common/Tag/Tag.styled';
 import * as Metrics from 'components/common/Metrics';
 
 export interface OverviewProps {
@@ -31,7 +31,7 @@ const Overview: React.FC<OverviewProps> = ({
           </Metrics.Indicator>
         )}
         <Metrics.Indicator label="State">
-          <TagStyled color="yellow">{connector.status.state}</TagStyled>
+          <C.Tag color="yellow">{connector.status.state}</C.Tag>
         </Metrics.Indicator>
         <Metrics.Indicator label="Tasks Running">
           {runningTasksCount}

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

@@ -179,6 +179,7 @@ exports[`Overview view matches snapshot 1`] = `
           <span>
             <p
               className="c5"
+              color="yellow"
             >
               RUNNING
             </p>

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

@@ -5,7 +5,7 @@ import { ClusterName, ConnectName, ConnectorName } from 'redux/interfaces';
 import Dropdown from 'components/common/Dropdown/Dropdown';
 import DropdownItem from 'components/common/Dropdown/DropdownItem';
 import VerticalElipsisIcon from 'components/common/Icons/VerticalElipsisIcon';
-import TagStyled from 'components/common/Tag/Tag.styled';
+import * as C from 'components/common/Tag/Tag.styled';
 
 interface RouterParams {
   clusterName: ClusterName;
@@ -35,7 +35,7 @@ const ListItem: React.FC<ListItemProps> = ({ task, restartTask }) => {
       <td>{task.status?.id}</td>
       <td>{task.status?.workerId}</td>
       <td>
-        <TagStyled color="yellow">{task.status.state}</TagStyled>
+        <C.Tag color="yellow">{task.status.state}</C.Tag>
       </td>
       <td>{task.status.trace || 'null'}</td>
       <td style={{ width: '5%' }}>

kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/__tests__/__snapshots__/ListItem.spec.tsx.snap

@@ -58,6 +58,7 @@ exports[`ListItem view matches snapshot 1`] = `
       <td>
         <p
           className="c0"
+          color="yellow"
         >
           RUNNING
         </p>

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

@@ -9,7 +9,7 @@ import Dropdown from 'components/common/Dropdown/Dropdown';
 import DropdownDivider from 'components/common/Dropdown/DropdownDivider';
 import DropdownItem from 'components/common/Dropdown/DropdownItem';
 import ConfirmationModal from 'components/common/ConfirmationModal/ConfirmationModal';
-import TagStyled from 'components/common/Tag/Tag.styled';
+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 { Colors } from 'theme/theme';
@@ -86,15 +86,13 @@ const ListItem: React.FC<ListItemProps> = ({
       <td>
         <TopicTagsWrapper>
           {topics?.map((t) => (
-            <TagStyled key={t} color="gray">
+            <Tag key={t} color="gray">
               <Link to={clusterTopicPath(clusterName, t)}>{t}</Link>
-            </TagStyled>
+            </Tag>
           ))}
         </TopicTagsWrapper>
       </td>
-      <td>
-        {status && <TagStyled color={stateColor}>{status.state}</TagStyled>}
-      </td>
+      <td>{status && <Tag color={stateColor}>{status.state}</Tag>}</td>
       <td>
         {runningTasks && (
           <span>

kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap

@@ -374,53 +374,45 @@ exports[`Connectors ListItem matches snapshot 1`] = `
                     <div
                       className="c1"
                     >
-                      <Styled(Tag)
+                      <styled.p
                         color="gray"
                         key="test-topic"
                       >
-                        <Tag
+                        <p
                           className="c2"
                           color="gray"
                         >
-                          <p
-                            className="c2"
+                          <Link
+                            to="/ui/clusters/local/topics/test-topic"
                           >
-                            <Link
-                              to="/ui/clusters/local/topics/test-topic"
+                            <LinkAnchor
+                              href="/ui/clusters/local/topics/test-topic"
+                              navigate={[Function]}
                             >
-                              <LinkAnchor
+                              <a
                                 href="/ui/clusters/local/topics/test-topic"
-                                navigate={[Function]}
+                                onClick={[Function]}
                               >
-                                <a
-                                  href="/ui/clusters/local/topics/test-topic"
-                                  onClick={[Function]}
-                                >
-                                  test-topic
-                                </a>
-                              </LinkAnchor>
-                            </Link>
-                          </p>
-                        </Tag>
-                      </Styled(Tag)>
+                                test-topic
+                              </a>
+                            </LinkAnchor>
+                          </Link>
+                        </p>
+                      </styled.p>
                     </div>
                   </styled.div>
                 </td>
                 <td>
-                  <Styled(Tag)
+                  <styled.p
                     color="green"
                   >
-                    <Tag
+                    <p
                       className="c3"
                       color="green"
                     >
-                      <p
-                        className="c3"
-                      >
-                        RUNNING
-                      </p>
-                    </Tag>
-                  </Styled(Tag)>
+                      RUNNING
+                    </p>
+                  </styled.p>
                 </td>
                 <td>
                   <span>

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

@@ -12,7 +12,7 @@ import ClusterContext from 'components/contexts/ClusterContext';
 import PageHeading from 'components/common/PageHeading/PageHeading';
 import VerticalElipsisIcon from 'components/common/Icons/VerticalElipsisIcon';
 import * as Metrics from 'components/common/Metrics';
-import TagStyled from 'components/common/Tag/Tag.styled';
+import { Tag } from 'components/common/Tag/Tag.styled';
 import Dropdown from 'components/common/Dropdown/Dropdown';
 import DropdownItem from 'components/common/Dropdown/DropdownItem';
 import { Colors } from 'theme/theme';
@@ -93,7 +93,7 @@ const Details: React.FC = () => {
       <Metrics.Wrapper>
         <Metrics.Section>
           <Metrics.Indicator label="State">
-            <TagStyled color="yellow">{consumerGroup.state}</TagStyled>
+            <Tag color="yellow">{consumerGroup.state}</Tag>
           </Metrics.Indicator>
           <Metrics.Indicator label="Members">
             {consumerGroup.members}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { ConsumerGroup, ConsumerGroupState } from 'generated-sources';
-import TagStyled from 'components/common/Tag/Tag.styled';
+import { Tag } from 'components/common/Tag/Tag.styled';
 import { TableKeyLink } from 'components/common/table/Table/TableKeyLink.styled';
 
 const ListItem: React.FC<{ consumerGroup: ConsumerGroup }> = ({
@@ -34,7 +34,7 @@ const ListItem: React.FC<{ consumerGroup: ConsumerGroup }> = ({
       <td>{consumerGroup.messagesBehind}</td>
       <td>{consumerGroup.coordinator?.id}</td>
       <td>
-        <TagStyled color={stateColor}>{consumerGroup.state}</TagStyled>
+        <Tag color={stateColor}>{consumerGroup.state}</Tag>
       </td>
     </tr>
   );

kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidget.tsx

@@ -3,7 +3,7 @@ import { chunk } from 'lodash';
 import { v4 } from 'uuid';
 import * as Metrics from 'components/common/Metrics';
 import { Cluster } from 'generated-sources';
-import TagStyled from 'components/common/Tag/Tag.styled';
+import { Tag } from 'components/common/Tag/Tag.styled';
 import { Table } from 'components/common/table/Table/Table.styled';
 import TableHeaderCell from 'components/common/table/TableHeaderCell/TableHeaderCell';
 import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
@@ -50,15 +50,11 @@ const ClustersWidget: React.FC<Props> = ({
     <>
       <Metrics.Wrapper>
         <Metrics.Section>
-          <Metrics.Indicator
-            label={<TagStyled color="green">Online</TagStyled>}
-          >
+          <Metrics.Indicator label={<Tag color="green">Online</Tag>}>
             <span data-testid="onlineCount">{onlineClusters.length}</span>{' '}
             <Metrics.LightText>clusters</Metrics.LightText>
           </Metrics.Indicator>
-          <Metrics.Indicator
-            label={<TagStyled color="gray">Offline</TagStyled>}
-          >
+          <Metrics.Indicator label={<Tag color="gray">Offline</Tag>}>
             <span data-testid="offlineCount">{offlineClusters.length}</span>{' '}
             <Metrics.LightText>clusters</Metrics.LightText>
           </Metrics.Indicator>

kafka-ui-react-app/src/components/Topics/List/ListItem.tsx

@@ -11,7 +11,7 @@ import ConfirmationModal from 'components/common/ConfirmationModal/ConfirmationM
 import ClusterContext from 'components/contexts/ClusterContext';
 import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
 import { Colors } from 'theme/theme';
-import TagStyled from 'components/common/Tag/Tag.styled';
+import { Tag } from 'components/common/Tag/Tag.styled';
 import VerticalElipsisIcon from 'components/common/Icons/VerticalElipsisIcon';
 import { TableKeyLink } from 'components/common/table/Table/TableKeyLink.styled';
 
@@ -89,7 +89,7 @@ const ListItem: React.FC<ListItemProps> = ({
         </td>
       )}
       <TableKeyLink style={{ width: '44%' }}>
-        {internal && <TagStyled color="gray">IN</TagStyled>}
+        {internal && <Tag color="gray">IN</Tag>}
         <NavLink
           exact
           to={`topics/${name}`}

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

@@ -4,7 +4,7 @@ import { ClusterName, TopicName } from 'redux/interfaces';
 import { clusterConsumerGroupsPath } from 'lib/paths';
 import { Table } from 'components/common/table/Table/Table.styled';
 import TableHeaderCell from 'components/common/table/TableHeaderCell/TableHeaderCell';
-import TagStyled from 'components/common/Tag/Tag.styled';
+import { Tag } from 'components/common/Tag/Tag.styled';
 import { TableKeyLink } from 'components/common/table/Table/TableKeyLink.styled';
 import { Link } from 'react-router-dom';
 
@@ -57,11 +57,11 @@ const TopicConsumerGroups: React.FC<Props> = ({
               <td>{consumer.coordinator?.id}</td>
               <td>
                 {consumer.state && (
-                  <TagStyled color="yellow">{`${consumer.state
+                  <Tag color="yellow">{`${consumer.state
                     .charAt(0)
                     .toUpperCase()}${consumer.state
                     .slice(1)
-                    .toLowerCase()}`}</TagStyled>
+                    .toLowerCase()}`}</Tag>
                 )}
               </td>
             </tr>

kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx

@@ -9,7 +9,7 @@ import { Table } from 'components/common/table/Table/Table.styled';
 import TableHeaderCell from 'components/common/table/TableHeaderCell/TableHeaderCell';
 import VerticalElipsisIcon from 'components/common/Icons/VerticalElipsisIcon';
 import * as Metrics from 'components/common/Metrics';
-import TagStyled from 'components/common/Tag/Tag.styled';
+import { Tag } from 'components/common/Tag/Tag.styled';
 
 interface Props extends Topic, TopicDetails {
   clusterName: ClusterName;
@@ -68,9 +68,7 @@ const Overview: React.FC<Props> = ({
             <Metrics.LightText> of {replicas}</Metrics.LightText>
           </Metrics.Indicator>
           <Metrics.Indicator label="Type">
-            <TagStyled color="gray">
-              {internal ? 'Internal' : 'External'}
-            </TagStyled>
+            <Tag color="gray">{internal ? 'Internal' : 'External'}</Tag>
           </Metrics.Indicator>
           <Metrics.Indicator label="Segment Size" title="">
             <BytesFormatted value={segmentSize} />
@@ -79,7 +77,7 @@ const Overview: React.FC<Props> = ({
             {segmentCount}
           </Metrics.Indicator>
           <Metrics.Indicator label="Clean Up Policy">
-            <TagStyled color="gray">{cleanUpPolicy || 'Unknown'}</TagStyled>
+            <Tag color="gray">{cleanUpPolicy || 'Unknown'}</Tag>
           </Metrics.Indicator>
         </Metrics.Section>
       </Metrics.Wrapper>

kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.styled.ts

@@ -3,7 +3,6 @@ import styled from 'styled-components';
 export const Column = styled.div`
   display: flex;
   justify-content: flex-start;
-  align-items: center;
   gap: 8px;
   margin-bottom: 16px;
 `;

kafka-ui-react-app/src/components/common/Tag/Tag.styled.tsx

@@ -1,16 +1,10 @@
 import styled from 'styled-components';
-import React from 'react';
 
 interface Props {
-  className?: string;
   color: 'green' | 'gray' | 'yellow' | 'red' | 'white';
 }
 
-const Tag: React.FC<Props> = ({ className, children }) => {
-  return <p className={className}>{children}</p>;
-};
-
-export default styled(Tag)`
+export const Tag = styled.p<Props>`
   border: none;
   border-radius: 16px;
   height: 20px;