From 1bfd59a4a920e86d1ff4a08c0632315df0072d4f Mon Sep 17 00:00:00 2001 From: Pavel Makarichev Date: Wed, 18 Jun 2025 20:35:23 +0300 Subject: [PATCH 1/6] feat: Add BreakableTextCell --- frontend/src/components/ACLPage/List/List.tsx | 2 ++ .../src/components/Brokers/BrokersList/lib/utils.ts | 3 ++- frontend/src/components/Connect/List/List.tsx | 11 ++++++++--- frontend/src/components/ConsumerGroups/List.tsx | 1 + frontend/src/components/Dashboard/ClusterName.tsx | 4 ++-- frontend/src/components/KsqlDb/TableView.tsx | 5 +++-- frontend/src/components/Schemas/List/List.tsx | 1 + .../src/components/Topics/List/TopicTitleCell.tsx | 6 +++++- .../components/common/NewTable/BreakableTextCell.tsx | 10 ++++++++++ frontend/src/components/common/NewTable/LinkCell.tsx | 12 ++++++++++-- .../src/components/common/NewTable/Table.styled.ts | 5 +++++ 11 files changed, 49 insertions(+), 11 deletions(-) create mode 100644 frontend/src/components/common/NewTable/BreakableTextCell.tsx diff --git a/frontend/src/components/ACLPage/List/List.tsx b/frontend/src/components/ACLPage/List/List.tsx index 07255011e..58d10e2c8 100644 --- a/frontend/src/components/ACLPage/List/List.tsx +++ b/frontend/src/components/ACLPage/List/List.tsx @@ -20,6 +20,7 @@ import ACLFormContext from 'components/ACLPage/Form/AclFormContext'; import PlusIcon from 'components/common/Icons/PlusIcon'; import ActionButton from 'components/common/ActionComponent/ActionButton/ActionButton'; import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading'; +import BreakableTextCell from 'components/common/NewTable/BreakableTextCell'; import * as S from './List.styled'; @@ -56,6 +57,7 @@ const ACList: React.FC = () => { header: 'Principal', accessorKey: 'principal', size: 257, + cell: BreakableTextCell, }, { header: 'Resource', diff --git a/frontend/src/components/Brokers/BrokersList/lib/utils.ts b/frontend/src/components/Brokers/BrokersList/lib/utils.ts index 6998aa2a2..82ba68518 100644 --- a/frontend/src/components/Brokers/BrokersList/lib/utils.ts +++ b/frontend/src/components/Brokers/BrokersList/lib/utils.ts @@ -3,6 +3,7 @@ import * as Cell from 'components/Brokers/BrokersList/TableCells/TableCells'; import { createColumnHelper } from '@tanstack/react-table'; import { keyBy } from 'lib/functions/keyBy'; import SkewHeader from 'components/Brokers/BrokersList/SkewHeader/SkewHeader'; +import BreakableTextCell from 'components/common/NewTable/BreakableTextCell'; import { BrokersTableRow } from './types'; import { NA_DISK_USAGE } from './constants'; @@ -75,6 +76,6 @@ export const getBrokersTableColumns = () => { cell: Cell.Skew, }), columnHelper.accessor('port', { header: 'Port' }), - columnHelper.accessor('host', { header: 'Host' }), + columnHelper.accessor('host', { header: 'Host', cell: BreakableTextCell }), ]; }; diff --git a/frontend/src/components/Connect/List/List.tsx b/frontend/src/components/Connect/List/List.tsx index 87b4d56db..5318cc850 100644 --- a/frontend/src/components/Connect/List/List.tsx +++ b/frontend/src/components/Connect/List/List.tsx @@ -6,6 +6,7 @@ import { FullConnectorInfo } from 'generated-sources'; import { useConnectors } from 'lib/hooks/api/kafkaConnect'; import { ColumnDef } from '@tanstack/react-table'; import { useNavigate, useSearchParams } from 'react-router-dom'; +import BreakableTextCell from 'components/common/NewTable/BreakableTextCell'; import ActionsCell from './ActionsCell'; import TopicsCell from './TopicsCell'; @@ -22,10 +23,14 @@ const List: React.FC = () => { const columns = React.useMemo[]>( () => [ - { header: 'Name', accessorKey: 'name' }, - { header: 'Connect', accessorKey: 'connect' }, + { header: 'Name', accessorKey: 'name', cell: BreakableTextCell }, + { header: 'Connect', accessorKey: 'connect', cell: BreakableTextCell }, { header: 'Type', accessorKey: 'type' }, - { header: 'Plugin', accessorKey: 'connectorClass' }, + { + header: 'Plugin', + accessorKey: 'connectorClass', + cell: BreakableTextCell, + }, { header: 'Topics', cell: TopicsCell }, { header: 'Status', accessorKey: 'status.state', cell: TagCell }, { header: 'Running Tasks', cell: RunningTasksCell }, diff --git a/frontend/src/components/ConsumerGroups/List.tsx b/frontend/src/components/ConsumerGroups/List.tsx index 40d454d8f..79143299c 100644 --- a/frontend/src/components/ConsumerGroups/List.tsx +++ b/frontend/src/components/ConsumerGroups/List.tsx @@ -42,6 +42,7 @@ const List = () => { // eslint-disable-next-line react/no-unstable-nested-components cell: ({ getValue }) => ( ()}`} to={encodeURIComponent(`${getValue()}`)} /> diff --git a/frontend/src/components/Dashboard/ClusterName.tsx b/frontend/src/components/Dashboard/ClusterName.tsx index 7ab581d40..70bcc9b76 100644 --- a/frontend/src/components/Dashboard/ClusterName.tsx +++ b/frontend/src/components/Dashboard/ClusterName.tsx @@ -8,10 +8,10 @@ type ClusterNameProps = CellContext; const ClusterName: React.FC = ({ row }) => { const { readOnly, name } = row.original; return ( - <> +
{readOnly && readonly} {name} - +
); }; diff --git a/frontend/src/components/KsqlDb/TableView.tsx b/frontend/src/components/KsqlDb/TableView.tsx index 538345954..c40b8fe0a 100644 --- a/frontend/src/components/KsqlDb/TableView.tsx +++ b/frontend/src/components/KsqlDb/TableView.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { KsqlStreamDescription, KsqlTableDescription } from 'generated-sources'; import Table from 'components/common/NewTable'; import { ColumnDef } from '@tanstack/react-table'; +import BreakableTextCell from 'components/common/NewTable/BreakableTextCell'; interface TableViewProps { fetching: boolean; @@ -13,8 +14,8 @@ const TableView: React.FC = ({ fetching, rows }) => { ColumnDef[] >( () => [ - { header: 'Name', accessorKey: 'name' }, - { header: 'Topic', accessorKey: 'topic' }, + { header: 'Name', accessorKey: 'name', cell: BreakableTextCell }, + { header: 'Topic', accessorKey: 'topic', cell: BreakableTextCell }, { header: 'Key Format', accessorKey: 'keyFormat' }, { header: 'Value Format', accessorKey: 'valueFormat' }, { diff --git a/frontend/src/components/Schemas/List/List.tsx b/frontend/src/components/Schemas/List/List.tsx index f04f3acd1..57461580c 100644 --- a/frontend/src/components/Schemas/List/List.tsx +++ b/frontend/src/components/Schemas/List/List.tsx @@ -45,6 +45,7 @@ const List: React.FC = () => { // eslint-disable-next-line react/no-unstable-nested-components cell: ({ getValue }) => ( ()}`} to={encodeURIComponent(`${getValue()}`)} /> diff --git a/frontend/src/components/Topics/List/TopicTitleCell.tsx b/frontend/src/components/Topics/List/TopicTitleCell.tsx index fd32304be..59ef6c53a 100644 --- a/frontend/src/components/Topics/List/TopicTitleCell.tsx +++ b/frontend/src/components/Topics/List/TopicTitleCell.tsx @@ -9,7 +9,11 @@ export const TopicTitleCell: React.FC> = ({ }) => { const { internal, name } = original; return ( - + {internal && ( <> IN diff --git a/frontend/src/components/common/NewTable/BreakableTextCell.tsx b/frontend/src/components/common/NewTable/BreakableTextCell.tsx new file mode 100644 index 000000000..8cd975c6d --- /dev/null +++ b/frontend/src/components/common/NewTable/BreakableTextCell.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { CellContext } from '@tanstack/react-table'; + +import * as S from './Table.styled'; + +const BreakableTextCell = ({ getValue }: CellContext) => { + return {getValue()}; +}; + +export default BreakableTextCell; diff --git a/frontend/src/components/common/NewTable/LinkCell.tsx b/frontend/src/components/common/NewTable/LinkCell.tsx index e400fa0b9..23e3a0587 100644 --- a/frontend/src/components/common/NewTable/LinkCell.tsx +++ b/frontend/src/components/common/NewTable/LinkCell.tsx @@ -2,10 +2,18 @@ import React from 'react'; import { NavLink } from 'react-router-dom'; // eslint-disable-next-line @typescript-eslint/no-explicit-any -const LinkCell = ({ value, to = '' }: any) => { +const LinkCell = ({ + value, + to = '', + style = {}, +}: { + value: string; + to?: string; + style?: React.CSSProperties; +}) => { const handleClick: React.MouseEventHandler = (e) => e.stopPropagation(); return ( - + {value} ); diff --git a/frontend/src/components/common/NewTable/Table.styled.ts b/frontend/src/components/common/NewTable/Table.styled.ts index b43972eac..dd957be0a 100644 --- a/frontend/src/components/common/NewTable/Table.styled.ts +++ b/frontend/src/components/common/NewTable/Table.styled.ts @@ -235,3 +235,8 @@ export const TableWrapper = styled.div<{ $disabled: boolean }>( `} ` ); + +export const BreakableText = styled.div` + word-break: 'break-word'; + white-space: 'pre-wrap'; +`; From 1e41747bbbb61b0fa0d3a981251fa3bef0c708bd Mon Sep 17 00:00:00 2001 From: Pavel Makarichev Date: Wed, 18 Jun 2025 22:16:08 +0300 Subject: [PATCH 2/6] feat: Add columns sizes --- .../src/components/ConsumerGroups/List.tsx | 6 ++++ .../src/components/Dashboard/Dashboard.tsx | 32 +++++++++++++++---- frontend/src/components/Schemas/List/List.tsx | 13 +++++--- .../src/components/Topics/List/TopicTable.tsx | 7 ++++ 4 files changed, 48 insertions(+), 10 deletions(-) diff --git a/frontend/src/components/ConsumerGroups/List.tsx b/frontend/src/components/ConsumerGroups/List.tsx index 79143299c..bf2f2125b 100644 --- a/frontend/src/components/ConsumerGroups/List.tsx +++ b/frontend/src/components/ConsumerGroups/List.tsx @@ -17,6 +17,7 @@ import { useConsumerGroups } from 'lib/hooks/api/consumers'; import Tooltip from 'components/common/Tooltip/Tooltip'; import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading'; +const COLUMN_SIZE = 160; const List = () => { const { clusterName } = useAppParams(); const [searchParams] = useSearchParams(); @@ -52,11 +53,13 @@ const List = () => { id: ConsumerGroupOrdering.MEMBERS, header: 'Num Of Members', accessorKey: 'members', + size: COLUMN_SIZE, }, { id: ConsumerGroupOrdering.TOPIC_NUM, header: 'Num Of Topics', accessorKey: 'topics', + size: COLUMN_SIZE, }, { id: ConsumerGroupOrdering.MESSAGES_BEHIND, @@ -65,11 +68,13 @@ const List = () => { cell: (args) => { return args.getValue() ?? 'N/A'; }, + size: COLUMN_SIZE, }, { header: 'Coordinator', accessorKey: 'coordinator.id', enableSorting: false, + size: COLUMN_SIZE, }, { id: ConsumerGroupOrdering.STATE, @@ -86,6 +91,7 @@ const List = () => { /> ); }, + size: COLUMN_SIZE, }, ], [] diff --git a/frontend/src/components/Dashboard/Dashboard.tsx b/frontend/src/components/Dashboard/Dashboard.tsx index 1fb8076fd..7c5ac0c13 100644 --- a/frontend/src/components/Dashboard/Dashboard.tsx +++ b/frontend/src/components/Dashboard/Dashboard.tsx @@ -17,6 +17,7 @@ import * as S from './Dashboard.styled'; import ClusterName from './ClusterName'; import ClusterTableActionsCell from './ClusterTableActionsCell'; +const COLUMN_SIZE = 100; const Dashboard: React.FC = () => { const { data } = useGetUserInfo(); const clusters = useClusters(); @@ -38,12 +39,30 @@ const Dashboard: React.FC = () => { const columns = React.useMemo[]>(() => { const initialColumns: ColumnDef[] = [ { header: 'Cluster name', accessorKey: 'name', cell: ClusterName }, - { header: 'Version', accessorKey: 'version' }, - { header: 'Brokers count', accessorKey: 'brokerCount' }, - { header: 'Partitions', accessorKey: 'onlinePartitionCount' }, - { header: 'Topics', accessorKey: 'topicCount' }, - { header: 'Production', accessorKey: 'bytesInPerSec', cell: SizeCell }, - { header: 'Consumption', accessorKey: 'bytesOutPerSec', cell: SizeCell }, + { header: 'Version', accessorKey: 'version', size: COLUMN_SIZE }, + { + header: 'Brokers count', + accessorKey: 'brokerCount', + size: COLUMN_SIZE, + }, + { + header: 'Partitions', + accessorKey: 'onlinePartitionCount', + size: COLUMN_SIZE, + }, + { header: 'Topics', accessorKey: 'topicCount', size: COLUMN_SIZE }, + { + header: 'Production', + accessorKey: 'bytesInPerSec', + cell: SizeCell, + size: COLUMN_SIZE, + }, + { + header: 'Consumption', + accessorKey: 'bytesOutPerSec', + cell: SizeCell, + size: COLUMN_SIZE, + }, ]; if (appInfo.hasDynamicConfig) { @@ -51,6 +70,7 @@ const Dashboard: React.FC = () => { header: '', id: 'actions', cell: ClusterTableActionsCell, + size: COLUMN_SIZE + 40, }); } diff --git a/frontend/src/components/Schemas/List/List.tsx b/frontend/src/components/Schemas/List/List.tsx index 57461580c..c2a9ecb2f 100644 --- a/frontend/src/components/Schemas/List/List.tsx +++ b/frontend/src/components/Schemas/List/List.tsx @@ -21,6 +21,7 @@ import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourceP import GlobalSchemaSelector from './GlobalSchemaSelector/GlobalSchemaSelector'; +const COLUMN_SIZE = 160; const List: React.FC = () => { const { isReadOnly } = React.useContext(ClusterContext); const { clusterName } = useAppParams(); @@ -51,10 +52,14 @@ const List: React.FC = () => { /> ), }, - { header: 'Id', accessorKey: 'id' }, - { header: 'Type', accessorKey: 'schemaType' }, - { header: 'Version', accessorKey: 'version' }, - { header: 'Compatibility', accessorKey: 'compatibilityLevel' }, + { header: 'Id', accessorKey: 'id', size: COLUMN_SIZE }, + { header: 'Type', accessorKey: 'schemaType', size: COLUMN_SIZE }, + { header: 'Version', accessorKey: 'version', size: COLUMN_SIZE }, + { + header: 'Compatibility', + accessorKey: 'compatibilityLevel', + size: COLUMN_SIZE, + }, ], [] ); diff --git a/frontend/src/components/Topics/List/TopicTable.tsx b/frontend/src/components/Topics/List/TopicTable.tsx index 6ebf9b0b1..74358f772 100644 --- a/frontend/src/components/Topics/List/TopicTable.tsx +++ b/frontend/src/components/Topics/List/TopicTable.tsx @@ -13,6 +13,7 @@ import { TopicTitleCell } from './TopicTitleCell'; import ActionsCell from './ActionsCell'; import BatchActionsbar from './BatchActionsBar'; +const COLUMN_SIZE = 100; const TopicTable: React.FC = () => { const { clusterName } = useAppParams<{ clusterName: ClusterName }>(); const [searchParams] = useSearchParams(); @@ -44,11 +45,13 @@ const TopicTable: React.FC = () => { id: TopicColumnsToSort.TOTAL_PARTITIONS, header: 'Partitions', accessorKey: 'partitionCount', + size: COLUMN_SIZE, }, { id: TopicColumnsToSort.OUT_OF_SYNC_REPLICAS, header: 'Out of sync replicas', accessorKey: 'partitions', + size: COLUMN_SIZE, cell: ({ getValue }) => { const partitions = getValue(); if (partitions === undefined || partitions.length === 0) { @@ -64,11 +67,13 @@ const TopicTable: React.FC = () => { header: 'Replication Factor', accessorKey: 'replicationFactor', enableSorting: false, + size: COLUMN_SIZE, }, { header: 'Number of messages', accessorKey: 'partitions', enableSorting: false, + size: COLUMN_SIZE, cell: ({ getValue }) => { const partitions = getValue(); if (partitions === undefined || partitions.length === 0) { @@ -83,12 +88,14 @@ const TopicTable: React.FC = () => { id: TopicColumnsToSort.SIZE, header: 'Size', accessorKey: 'segmentSize', + size: COLUMN_SIZE, cell: SizeCell, }, { id: 'actions', header: '', cell: ActionsCell, + size: 60, }, ], [] From 4018b30ef2586a14232793ac49804a0b8952a645 Mon Sep 17 00:00:00 2001 From: Pavel Makarichev Date: Sun, 22 Jun 2025 14:42:01 +0300 Subject: [PATCH 3/6] FE: Set width for columns, fix header background color --- frontend/src/components/ConsumerGroups/List.tsx | 11 +++++------ frontend/src/components/Dashboard/Dashboard.tsx | 15 +++++++-------- frontend/src/components/NavBar/NavBar.styled.ts | 2 +- frontend/src/components/Schemas/List/List.tsx | 9 ++++----- .../src/components/Topics/List/TopicTable.tsx | 11 +++++------ .../common/NewTable/BreakableTextCell.tsx | 13 ++++++++++--- .../components/common/NewTable/Table.styled.ts | 5 ----- frontend/src/theme/theme.ts | 6 ++++++ 8 files changed, 38 insertions(+), 34 deletions(-) diff --git a/frontend/src/components/ConsumerGroups/List.tsx b/frontend/src/components/ConsumerGroups/List.tsx index bf2f2125b..675aab34d 100644 --- a/frontend/src/components/ConsumerGroups/List.tsx +++ b/frontend/src/components/ConsumerGroups/List.tsx @@ -17,7 +17,6 @@ import { useConsumerGroups } from 'lib/hooks/api/consumers'; import Tooltip from 'components/common/Tooltip/Tooltip'; import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading'; -const COLUMN_SIZE = 160; const List = () => { const { clusterName } = useAppParams(); const [searchParams] = useSearchParams(); @@ -53,13 +52,13 @@ const List = () => { id: ConsumerGroupOrdering.MEMBERS, header: 'Num Of Members', accessorKey: 'members', - size: COLUMN_SIZE, + size: 140, }, { id: ConsumerGroupOrdering.TOPIC_NUM, header: 'Num Of Topics', accessorKey: 'topics', - size: COLUMN_SIZE, + size: 140, }, { id: ConsumerGroupOrdering.MESSAGES_BEHIND, @@ -68,13 +67,13 @@ const List = () => { cell: (args) => { return args.getValue() ?? 'N/A'; }, - size: COLUMN_SIZE, + size: 124, }, { header: 'Coordinator', accessorKey: 'coordinator.id', enableSorting: false, - size: COLUMN_SIZE, + size: 104, }, { id: ConsumerGroupOrdering.STATE, @@ -91,7 +90,7 @@ const List = () => { /> ); }, - size: COLUMN_SIZE, + size: 124, }, ], [] diff --git a/frontend/src/components/Dashboard/Dashboard.tsx b/frontend/src/components/Dashboard/Dashboard.tsx index 7c5ac0c13..a750e0375 100644 --- a/frontend/src/components/Dashboard/Dashboard.tsx +++ b/frontend/src/components/Dashboard/Dashboard.tsx @@ -17,7 +17,6 @@ import * as S from './Dashboard.styled'; import ClusterName from './ClusterName'; import ClusterTableActionsCell from './ClusterTableActionsCell'; -const COLUMN_SIZE = 100; const Dashboard: React.FC = () => { const { data } = useGetUserInfo(); const clusters = useClusters(); @@ -39,29 +38,29 @@ const Dashboard: React.FC = () => { const columns = React.useMemo[]>(() => { const initialColumns: ColumnDef[] = [ { header: 'Cluster name', accessorKey: 'name', cell: ClusterName }, - { header: 'Version', accessorKey: 'version', size: COLUMN_SIZE }, + { header: 'Version', accessorKey: 'version', size: 100 }, { header: 'Brokers count', accessorKey: 'brokerCount', - size: COLUMN_SIZE, + size: 120, }, { header: 'Partitions', accessorKey: 'onlinePartitionCount', - size: COLUMN_SIZE, + size: 100, }, - { header: 'Topics', accessorKey: 'topicCount', size: COLUMN_SIZE }, + { header: 'Topics', accessorKey: 'topicCount', size: 80 }, { header: 'Production', accessorKey: 'bytesInPerSec', cell: SizeCell, - size: COLUMN_SIZE, + size: 100, }, { header: 'Consumption', accessorKey: 'bytesOutPerSec', cell: SizeCell, - size: COLUMN_SIZE, + size: 116, }, ]; @@ -70,7 +69,7 @@ const Dashboard: React.FC = () => { header: '', id: 'actions', cell: ClusterTableActionsCell, - size: COLUMN_SIZE + 40, + size: 140, }); } diff --git a/frontend/src/components/NavBar/NavBar.styled.ts b/frontend/src/components/NavBar/NavBar.styled.ts index eb7dbfa4a..57a68cb8b 100644 --- a/frontend/src/components/NavBar/NavBar.styled.ts +++ b/frontend/src/components/NavBar/NavBar.styled.ts @@ -15,7 +15,7 @@ export const Navbar = styled.nav( left: 0; right: 0; z-index: 30; - background-color: ${theme.menu.primary.backgroundColor.normal}; + background-color: ${theme.menu.header.backgroundColor}; min-height: 3.25rem; ` ); diff --git a/frontend/src/components/Schemas/List/List.tsx b/frontend/src/components/Schemas/List/List.tsx index c2a9ecb2f..670c9e7f8 100644 --- a/frontend/src/components/Schemas/List/List.tsx +++ b/frontend/src/components/Schemas/List/List.tsx @@ -21,7 +21,6 @@ import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourceP import GlobalSchemaSelector from './GlobalSchemaSelector/GlobalSchemaSelector'; -const COLUMN_SIZE = 160; const List: React.FC = () => { const { isReadOnly } = React.useContext(ClusterContext); const { clusterName } = useAppParams(); @@ -52,13 +51,13 @@ const List: React.FC = () => { /> ), }, - { header: 'Id', accessorKey: 'id', size: COLUMN_SIZE }, - { header: 'Type', accessorKey: 'schemaType', size: COLUMN_SIZE }, - { header: 'Version', accessorKey: 'version', size: COLUMN_SIZE }, + { header: 'Id', accessorKey: 'id', size: 120 }, + { header: 'Type', accessorKey: 'schemaType', size: 120 }, + { header: 'Version', accessorKey: 'version', size: 120 }, { header: 'Compatibility', accessorKey: 'compatibilityLevel', - size: COLUMN_SIZE, + size: 160, }, ], [] diff --git a/frontend/src/components/Topics/List/TopicTable.tsx b/frontend/src/components/Topics/List/TopicTable.tsx index 74358f772..a2451ec16 100644 --- a/frontend/src/components/Topics/List/TopicTable.tsx +++ b/frontend/src/components/Topics/List/TopicTable.tsx @@ -13,7 +13,6 @@ import { TopicTitleCell } from './TopicTitleCell'; import ActionsCell from './ActionsCell'; import BatchActionsbar from './BatchActionsBar'; -const COLUMN_SIZE = 100; const TopicTable: React.FC = () => { const { clusterName } = useAppParams<{ clusterName: ClusterName }>(); const [searchParams] = useSearchParams(); @@ -45,13 +44,13 @@ const TopicTable: React.FC = () => { id: TopicColumnsToSort.TOTAL_PARTITIONS, header: 'Partitions', accessorKey: 'partitionCount', - size: COLUMN_SIZE, + size: 100, }, { id: TopicColumnsToSort.OUT_OF_SYNC_REPLICAS, header: 'Out of sync replicas', accessorKey: 'partitions', - size: COLUMN_SIZE, + size: 154, cell: ({ getValue }) => { const partitions = getValue(); if (partitions === undefined || partitions.length === 0) { @@ -67,13 +66,13 @@ const TopicTable: React.FC = () => { header: 'Replication Factor', accessorKey: 'replicationFactor', enableSorting: false, - size: COLUMN_SIZE, + size: 148, }, { header: 'Number of messages', accessorKey: 'partitions', enableSorting: false, - size: COLUMN_SIZE, + size: 146, cell: ({ getValue }) => { const partitions = getValue(); if (partitions === undefined || partitions.length === 0) { @@ -88,7 +87,7 @@ const TopicTable: React.FC = () => { id: TopicColumnsToSort.SIZE, header: 'Size', accessorKey: 'segmentSize', - size: COLUMN_SIZE, + size: 100, cell: SizeCell, }, { diff --git a/frontend/src/components/common/NewTable/BreakableTextCell.tsx b/frontend/src/components/common/NewTable/BreakableTextCell.tsx index 8cd975c6d..dc6d15248 100644 --- a/frontend/src/components/common/NewTable/BreakableTextCell.tsx +++ b/frontend/src/components/common/NewTable/BreakableTextCell.tsx @@ -1,10 +1,17 @@ import React from 'react'; import { CellContext } from '@tanstack/react-table'; -import * as S from './Table.styled'; - const BreakableTextCell = ({ getValue }: CellContext) => { - return {getValue()}; + return ( +
+ {getValue()} +
+ ); }; export default BreakableTextCell; diff --git a/frontend/src/components/common/NewTable/Table.styled.ts b/frontend/src/components/common/NewTable/Table.styled.ts index dd957be0a..b43972eac 100644 --- a/frontend/src/components/common/NewTable/Table.styled.ts +++ b/frontend/src/components/common/NewTable/Table.styled.ts @@ -235,8 +235,3 @@ export const TableWrapper = styled.div<{ $disabled: boolean }>( `} ` ); - -export const BreakableText = styled.div` - word-break: 'break-word'; - white-space: 'pre-wrap'; -`; diff --git a/frontend/src/theme/theme.ts b/frontend/src/theme/theme.ts index 5429481b1..99ccfad87 100644 --- a/frontend/src/theme/theme.ts +++ b/frontend/src/theme/theme.ts @@ -566,6 +566,9 @@ export const theme = { }, }, menu: { + header: { + backgroundColor: Colors.brand[0], + }, primary: { backgroundColor: { normal: 'transparent', @@ -1098,6 +1101,9 @@ export const darkTheme: ThemeType = { }, }, menu: { + header: { + backgroundColor: Colors.brand[90], + }, primary: { backgroundColor: { normal: 'transparent', From 0fcaace1c82fb50e12af07d2257dad080a9ec7dd Mon Sep 17 00:00:00 2001 From: Pavel Makarichev Date: Mon, 23 Jun 2025 19:59:08 +0300 Subject: [PATCH 4/6] FE: Add wordBreak prop for link cell --- .../src/components/ConsumerGroups/List.tsx | 2 +- frontend/src/components/Schemas/List/List.tsx | 2 +- .../components/common/NewTable/LinkCell.tsx | 35 ++++++++++++++----- 3 files changed, 29 insertions(+), 10 deletions(-) diff --git a/frontend/src/components/ConsumerGroups/List.tsx b/frontend/src/components/ConsumerGroups/List.tsx index 675aab34d..c7e7c94c6 100644 --- a/frontend/src/components/ConsumerGroups/List.tsx +++ b/frontend/src/components/ConsumerGroups/List.tsx @@ -42,7 +42,7 @@ const List = () => { // eslint-disable-next-line react/no-unstable-nested-components cell: ({ getValue }) => ( ()}`} to={encodeURIComponent(`${getValue()}`)} /> diff --git a/frontend/src/components/Schemas/List/List.tsx b/frontend/src/components/Schemas/List/List.tsx index 670c9e7f8..cb54292b8 100644 --- a/frontend/src/components/Schemas/List/List.tsx +++ b/frontend/src/components/Schemas/List/List.tsx @@ -45,7 +45,7 @@ const List: React.FC = () => { // eslint-disable-next-line react/no-unstable-nested-components cell: ({ getValue }) => ( ()}`} to={encodeURIComponent(`${getValue()}`)} /> diff --git a/frontend/src/components/common/NewTable/LinkCell.tsx b/frontend/src/components/common/NewTable/LinkCell.tsx index 23e3a0587..23139a48a 100644 --- a/frontend/src/components/common/NewTable/LinkCell.tsx +++ b/frontend/src/components/common/NewTable/LinkCell.tsx @@ -1,22 +1,41 @@ import React from 'react'; import { NavLink } from 'react-router-dom'; +import styled, { css } from 'styled-components'; + +interface LinkCellProps { + value: string; + to?: string; + wordBreak?: boolean; +} // eslint-disable-next-line @typescript-eslint/no-explicit-any -const LinkCell = ({ +const LinkCell: React.FC = ({ value, to = '', - style = {}, -}: { - value: string; - to?: string; - style?: React.CSSProperties; + wordBreak = false, }) => { const handleClick: React.MouseEventHandler = (e) => e.stopPropagation(); return ( - + {value} - + ); }; +const NavLinkStyled = styled(NavLink)<{ $wordBreak?: boolean }>` + ${({ $wordBreak }) => { + if ($wordBreak) { + return css` + word-break: break-word !important; + white-space: pre-wrap !important; + `; + } + }} +`; + export default LinkCell; From dc15fc6236b71e282ef0262afc08199536070adf Mon Sep 17 00:00:00 2001 From: Pavel Makarichev Date: Mon, 23 Jun 2025 23:48:54 +0300 Subject: [PATCH 5/6] FE: Get rid of !important for wordBreak LinkCell styles --- .../components/common/NewTable/LinkCell.tsx | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/frontend/src/components/common/NewTable/LinkCell.tsx b/frontend/src/components/common/NewTable/LinkCell.tsx index 23139a48a..efcb775f0 100644 --- a/frontend/src/components/common/NewTable/LinkCell.tsx +++ b/frontend/src/components/common/NewTable/LinkCell.tsx @@ -8,6 +8,17 @@ interface LinkCellProps { wordBreak?: boolean; } +const NavLinkStyled = styled(NavLink)<{ $wordBreak?: boolean }>` + && { + ${({ $wordBreak }) => + $wordBreak && + css` + word-break: break-word; + white-space: pre-wrap; + `} + } +`; + // eslint-disable-next-line @typescript-eslint/no-explicit-any const LinkCell: React.FC = ({ value, @@ -27,15 +38,4 @@ const LinkCell: React.FC = ({ ); }; -const NavLinkStyled = styled(NavLink)<{ $wordBreak?: boolean }>` - ${({ $wordBreak }) => { - if ($wordBreak) { - return css` - word-break: break-word !important; - white-space: pre-wrap !important; - `; - } - }} -`; - export default LinkCell; From 4cb2e21e418f3103414331f29756da0187da8c49 Mon Sep 17 00:00:00 2001 From: Pavel Makarichev Date: Sun, 29 Jun 2025 16:05:14 +0300 Subject: [PATCH 6/6] FE: revert width behavior for kafka connect name column --- frontend/src/components/Connect/List/List.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/Connect/List/List.tsx b/frontend/src/components/Connect/List/List.tsx index 5318cc850..fe4aa3e2e 100644 --- a/frontend/src/components/Connect/List/List.tsx +++ b/frontend/src/components/Connect/List/List.tsx @@ -23,7 +23,7 @@ const List: React.FC = () => { const columns = React.useMemo[]>( () => [ - { header: 'Name', accessorKey: 'name', cell: BreakableTextCell }, + { header: 'Name', accessorKey: 'name' }, { header: 'Connect', accessorKey: 'connect', cell: BreakableTextCell }, { header: 'Type', accessorKey: 'type' }, {