Skip to content

Commit bbf5c3a

Browse files
VixtirVixtir
authored
Fe: Add ability to word wrap for text columns in table
1 parent 9c6b622 commit bbf5c3a

File tree

14 files changed

+121
-22
lines changed

14 files changed

+121
-22
lines changed

‎frontend/src/components/ACLPage/List/List.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import ACLFormContext from 'components/ACLPage/Form/AclFormContext';
2020
import PlusIcon from 'components/common/Icons/PlusIcon';
2121
import ActionButton from 'components/common/ActionComponent/ActionButton/ActionButton';
2222
import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
23+
import BreakableTextCell from 'components/common/NewTable/BreakableTextCell';
2324

2425
import * as S from './List.styled';
2526

@@ -56,6 +57,7 @@ const ACList: React.FC = () => {
5657
header: 'Principal',
5758
accessorKey: 'principal',
5859
size: 257,
60+
cell: BreakableTextCell,
5961
},
6062
{
6163
header: 'Resource',

‎frontend/src/components/Brokers/BrokersList/lib/utils.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import * as Cell from 'components/Brokers/BrokersList/TableCells/TableCells';
33
import { createColumnHelper } from '@tanstack/react-table';
44
import { keyBy } from 'lib/functions/keyBy';
55
import SkewHeader from 'components/Brokers/BrokersList/SkewHeader/SkewHeader';
6+
import BreakableTextCell from 'components/common/NewTable/BreakableTextCell';
67

78
import { BrokersTableRow } from './types';
89
import { NA_DISK_USAGE } from './constants';
@@ -75,6 +76,6 @@ export const getBrokersTableColumns = () => {
7576
cell: Cell.Skew,
7677
}),
7778
columnHelper.accessor('port', { header: 'Port' }),
78-
columnHelper.accessor('host', { header: 'Host' }),
79+
columnHelper.accessor('host', { header: 'Host', cell: BreakableTextCell }),
7980
];
8081
};

‎frontend/src/components/Connect/List/List.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { FullConnectorInfo } from 'generated-sources';
66
import { useConnectors } from 'lib/hooks/api/kafkaConnect';
77
import { ColumnDef } from '@tanstack/react-table';
88
import { useNavigate, useSearchParams } from 'react-router-dom';
9+
import BreakableTextCell from 'components/common/NewTable/BreakableTextCell';
910

1011
import ActionsCell from './ActionsCell';
1112
import TopicsCell from './TopicsCell';
@@ -23,9 +24,13 @@ const List: React.FC = () => {
2324
const columns = React.useMemo<ColumnDef<FullConnectorInfo>[]>(
2425
() => [
2526
{ header: 'Name', accessorKey: 'name' },
26-
{ header: 'Connect', accessorKey: 'connect' },
27+
{ header: 'Connect', accessorKey: 'connect', cell: BreakableTextCell },
2728
{ header: 'Type', accessorKey: 'type' },
28-
{ header: 'Plugin', accessorKey: 'connectorClass' },
29+
{
30+
header: 'Plugin',
31+
accessorKey: 'connectorClass',
32+
cell: BreakableTextCell,
33+
},
2934
{ header: 'Topics', cell: TopicsCell },
3035
{ header: 'Status', accessorKey: 'status.state', cell: TagCell },
3136
{ header: 'Running Tasks', cell: RunningTasksCell },

‎frontend/src/components/ConsumerGroups/List.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ const List = () => {
4242
// eslint-disable-next-line react/no-unstable-nested-components
4343
cell: ({ getValue }) => (
4444
<LinkCell
45+
wordBreak
4546
value={`${getValue<string | number>()}`}
4647
to={encodeURIComponent(`${getValue<string | number>()}`)}
4748
/>
@@ -51,11 +52,13 @@ const List = () => {
5152
id: ConsumerGroupOrdering.MEMBERS,
5253
header: 'Num Of Members',
5354
accessorKey: 'members',
55+
size: 140,
5456
},
5557
{
5658
id: ConsumerGroupOrdering.TOPIC_NUM,
5759
header: 'Num Of Topics',
5860
accessorKey: 'topics',
61+
size: 140,
5962
},
6063
{
6164
id: ConsumerGroupOrdering.MESSAGES_BEHIND,
@@ -64,11 +67,13 @@ const List = () => {
6467
cell: (args) => {
6568
return args.getValue() ?? 'N/A';
6669
},
70+
size: 124,
6771
},
6872
{
6973
header: 'Coordinator',
7074
accessorKey: 'coordinator.id',
7175
enableSorting: false,
76+
size: 104,
7277
},
7378
{
7479
id: ConsumerGroupOrdering.STATE,
@@ -85,6 +90,7 @@ const List = () => {
8590
/>
8691
);
8792
},
93+
size: 124,
8894
},
8995
],
9096
[]

‎frontend/src/components/Dashboard/ClusterName.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ type ClusterNameProps = CellContext<Cluster, unknown>;
88
const ClusterName: React.FC<ClusterNameProps> = ({ row }) => {
99
const { readOnly, name } = row.original;
1010
return (
11-
<>
11+
<div style={{ wordBreak: 'break-word', whiteSpace: 'pre-wrap' }}>
1212
{readOnly && <Tag color="blue">readonly</Tag>}
1313
{name}
14-
</>
14+
</div>
1515
);
1616
};
1717

‎frontend/src/components/Dashboard/Dashboard.tsx‎

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -38,19 +38,38 @@ const Dashboard: React.FC = () => {
3838
const columns = React.useMemo<ColumnDef<Cluster>[]>(() => {
3939
const initialColumns: ColumnDef<Cluster>[] = [
4040
{ header: 'Cluster name', accessorKey: 'name', cell: ClusterName },
41-
{ header: 'Version', accessorKey: 'version' },
42-
{ header: 'Brokers count', accessorKey: 'brokerCount' },
43-
{ header: 'Partitions', accessorKey: 'onlinePartitionCount' },
44-
{ header: 'Topics', accessorKey: 'topicCount' },
45-
{ header: 'Production', accessorKey: 'bytesInPerSec', cell: SizeCell },
46-
{ header: 'Consumption', accessorKey: 'bytesOutPerSec', cell: SizeCell },
41+
{ header: 'Version', accessorKey: 'version', size: 100 },
42+
{
43+
header: 'Brokers count',
44+
accessorKey: 'brokerCount',
45+
size: 120,
46+
},
47+
{
48+
header: 'Partitions',
49+
accessorKey: 'onlinePartitionCount',
50+
size: 100,
51+
},
52+
{ header: 'Topics', accessorKey: 'topicCount', size: 80 },
53+
{
54+
header: 'Production',
55+
accessorKey: 'bytesInPerSec',
56+
cell: SizeCell,
57+
size: 100,
58+
},
59+
{
60+
header: 'Consumption',
61+
accessorKey: 'bytesOutPerSec',
62+
cell: SizeCell,
63+
size: 116,
64+
},
4765
];
4866

4967
if (appInfo.hasDynamicConfig) {
5068
initialColumns.push({
5169
header: '',
5270
id: 'actions',
5371
cell: ClusterTableActionsCell,
72+
size: 140,
5473
});
5574
}
5675

‎frontend/src/components/KsqlDb/TableView.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import { KsqlStreamDescription, KsqlTableDescription } from 'generated-sources';
33
import Table from 'components/common/NewTable';
44
import { ColumnDef } from '@tanstack/react-table';
5+
import BreakableTextCell from 'components/common/NewTable/BreakableTextCell';
56

67
interface TableViewProps {
78
fetching: boolean;
@@ -13,8 +14,8 @@ const TableView: React.FC<TableViewProps> = ({ fetching, rows }) => {
1314
ColumnDef<KsqlTableDescription | KsqlStreamDescription>[]
1415
>(
1516
() => [
16-
{ header: 'Name', accessorKey: 'name' },
17-
{ header: 'Topic', accessorKey: 'topic' },
17+
{ header: 'Name', accessorKey: 'name', cell: BreakableTextCell },
18+
{ header: 'Topic', accessorKey: 'topic', cell: BreakableTextCell },
1819
{ header: 'Key Format', accessorKey: 'keyFormat' },
1920
{ header: 'Value Format', accessorKey: 'valueFormat' },
2021
{

‎frontend/src/components/NavBar/NavBar.styled.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export const Navbar = styled.nav(
1515
left: 0;
1616
right: 0;
1717
z-index: 30;
18-
background-color: ${theme.menu.primary.backgroundColor.normal};
18+
background-color: ${theme.menu.header.backgroundColor};
1919
min-height: 3.25rem;
2020
`
2121
);

‎frontend/src/components/Schemas/List/List.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,15 +45,20 @@ const List: React.FC = () => {
4545
// eslint-disable-next-line react/no-unstable-nested-components
4646
cell: ({ getValue }) => (
4747
<LinkCell
48+
wordBreak
4849
value={`${getValue<string | number>()}`}
4950
to={encodeURIComponent(`${getValue<string | number>()}`)}
5051
/>
5152
),
5253
},
53-
{ header: 'Id', accessorKey: 'id' },
54-
{ header: 'Type', accessorKey: 'schemaType' },
55-
{ header: 'Version', accessorKey: 'version' },
56-
{ header: 'Compatibility', accessorKey: 'compatibilityLevel' },
54+
{ header: 'Id', accessorKey: 'id', size: 120 },
55+
{ header: 'Type', accessorKey: 'schemaType', size: 120 },
56+
{ header: 'Version', accessorKey: 'version', size: 120 },
57+
{
58+
header: 'Compatibility',
59+
accessorKey: 'compatibilityLevel',
60+
size: 160,
61+
},
5762
],
5863
[]
5964
);

‎frontend/src/components/Topics/List/TopicTable.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,13 @@ const TopicTable: React.FC = () => {
4444
id: TopicColumnsToSort.TOTAL_PARTITIONS,
4545
header: 'Partitions',
4646
accessorKey: 'partitionCount',
47+
size: 100,
4748
},
4849
{
4950
id: TopicColumnsToSort.OUT_OF_SYNC_REPLICAS,
5051
header: 'Out of sync replicas',
5152
accessorKey: 'partitions',
53+
size: 154,
5254
cell: ({ getValue }) => {
5355
const partitions = getValue<Topic['partitions']>();
5456
if (partitions === undefined || partitions.length === 0) {
@@ -64,11 +66,13 @@ const TopicTable: React.FC = () => {
6466
header: 'Replication Factor',
6567
accessorKey: 'replicationFactor',
6668
enableSorting: false,
69+
size: 148,
6770
},
6871
{
6972
header: 'Number of messages',
7073
accessorKey: 'partitions',
7174
enableSorting: false,
75+
size: 146,
7276
cell: ({ getValue }) => {
7377
const partitions = getValue<Topic['partitions']>();
7478
if (partitions === undefined || partitions.length === 0) {
@@ -83,12 +87,14 @@ const TopicTable: React.FC = () => {
8387
id: TopicColumnsToSort.SIZE,
8488
header: 'Size',
8589
accessorKey: 'segmentSize',
90+
size: 100,
8691
cell: SizeCell,
8792
},
8893
{
8994
id: 'actions',
9095
header: '',
9196
cell: ActionsCell,
97+
size: 60,
9298
},
9399
],
94100
[]

0 commit comments

Comments
 (0)