Skip to content

Commit 1e41747

Browse files
committed
feat: Add columns sizes
1 parent 1bfd59a commit 1e41747

File tree

4 files changed

+48
-10
lines changed

4 files changed

+48
-10
lines changed

frontend/src/components/ConsumerGroups/List.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { useConsumerGroups } from 'lib/hooks/api/consumers';
1717
import Tooltip from 'components/common/Tooltip/Tooltip';
1818
import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
1919

20+
const COLUMN_SIZE = 160;
2021
const List = () => {
2122
const { clusterName } = useAppParams<ClusterNameRoute>();
2223
const [searchParams] = useSearchParams();
@@ -52,11 +53,13 @@ const List = () => {
5253
id: ConsumerGroupOrdering.MEMBERS,
5354
header: 'Num Of Members',
5455
accessorKey: 'members',
56+
size: COLUMN_SIZE,
5557
},
5658
{
5759
id: ConsumerGroupOrdering.TOPIC_NUM,
5860
header: 'Num Of Topics',
5961
accessorKey: 'topics',
62+
size: COLUMN_SIZE,
6063
},
6164
{
6265
id: ConsumerGroupOrdering.MESSAGES_BEHIND,
@@ -65,11 +68,13 @@ const List = () => {
6568
cell: (args) => {
6669
return args.getValue() ?? 'N/A';
6770
},
71+
size: COLUMN_SIZE,
6872
},
6973
{
7074
header: 'Coordinator',
7175
accessorKey: 'coordinator.id',
7276
enableSorting: false,
77+
size: COLUMN_SIZE,
7378
},
7479
{
7580
id: ConsumerGroupOrdering.STATE,
@@ -86,6 +91,7 @@ const List = () => {
8691
/>
8792
);
8893
},
94+
size: COLUMN_SIZE,
8995
},
9096
],
9197
[]

frontend/src/components/Dashboard/Dashboard.tsx

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import * as S from './Dashboard.styled';
1717
import ClusterName from './ClusterName';
1818
import ClusterTableActionsCell from './ClusterTableActionsCell';
1919

20+
const COLUMN_SIZE = 100;
2021
const Dashboard: React.FC = () => {
2122
const { data } = useGetUserInfo();
2223
const clusters = useClusters();
@@ -38,19 +39,38 @@ const Dashboard: React.FC = () => {
3839
const columns = React.useMemo<ColumnDef<Cluster>[]>(() => {
3940
const initialColumns: ColumnDef<Cluster>[] = [
4041
{ 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 },
42+
{ header: 'Version', accessorKey: 'version', size: COLUMN_SIZE },
43+
{
44+
header: 'Brokers count',
45+
accessorKey: 'brokerCount',
46+
size: COLUMN_SIZE,
47+
},
48+
{
49+
header: 'Partitions',
50+
accessorKey: 'onlinePartitionCount',
51+
size: COLUMN_SIZE,
52+
},
53+
{ header: 'Topics', accessorKey: 'topicCount', size: COLUMN_SIZE },
54+
{
55+
header: 'Production',
56+
accessorKey: 'bytesInPerSec',
57+
cell: SizeCell,
58+
size: COLUMN_SIZE,
59+
},
60+
{
61+
header: 'Consumption',
62+
accessorKey: 'bytesOutPerSec',
63+
cell: SizeCell,
64+
size: COLUMN_SIZE,
65+
},
4766
];
4867

4968
if (appInfo.hasDynamicConfig) {
5069
initialColumns.push({
5170
header: '',
5271
id: 'actions',
5372
cell: ClusterTableActionsCell,
73+
size: COLUMN_SIZE + 40,
5474
});
5575
}
5676

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

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourceP
2121

2222
import GlobalSchemaSelector from './GlobalSchemaSelector/GlobalSchemaSelector';
2323

24+
const COLUMN_SIZE = 160;
2425
const List: React.FC = () => {
2526
const { isReadOnly } = React.useContext(ClusterContext);
2627
const { clusterName } = useAppParams<ClusterNameRoute>();
@@ -51,10 +52,14 @@ const List: React.FC = () => {
5152
/>
5253
),
5354
},
54-
{ header: 'Id', accessorKey: 'id' },
55-
{ header: 'Type', accessorKey: 'schemaType' },
56-
{ header: 'Version', accessorKey: 'version' },
57-
{ header: 'Compatibility', accessorKey: 'compatibilityLevel' },
55+
{ header: 'Id', accessorKey: 'id', size: COLUMN_SIZE },
56+
{ header: 'Type', accessorKey: 'schemaType', size: COLUMN_SIZE },
57+
{ header: 'Version', accessorKey: 'version', size: COLUMN_SIZE },
58+
{
59+
header: 'Compatibility',
60+
accessorKey: 'compatibilityLevel',
61+
size: COLUMN_SIZE,
62+
},
5863
],
5964
[]
6065
);

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { TopicTitleCell } from './TopicTitleCell';
1313
import ActionsCell from './ActionsCell';
1414
import BatchActionsbar from './BatchActionsBar';
1515

16+
const COLUMN_SIZE = 100;
1617
const TopicTable: React.FC = () => {
1718
const { clusterName } = useAppParams<{ clusterName: ClusterName }>();
1819
const [searchParams] = useSearchParams();
@@ -44,11 +45,13 @@ const TopicTable: React.FC = () => {
4445
id: TopicColumnsToSort.TOTAL_PARTITIONS,
4546
header: 'Partitions',
4647
accessorKey: 'partitionCount',
48+
size: COLUMN_SIZE,
4749
},
4850
{
4951
id: TopicColumnsToSort.OUT_OF_SYNC_REPLICAS,
5052
header: 'Out of sync replicas',
5153
accessorKey: 'partitions',
54+
size: COLUMN_SIZE,
5255
cell: ({ getValue }) => {
5356
const partitions = getValue<Topic['partitions']>();
5457
if (partitions === undefined || partitions.length === 0) {
@@ -64,11 +67,13 @@ const TopicTable: React.FC = () => {
6467
header: 'Replication Factor',
6568
accessorKey: 'replicationFactor',
6669
enableSorting: false,
70+
size: COLUMN_SIZE,
6771
},
6872
{
6973
header: 'Number of messages',
7074
accessorKey: 'partitions',
7175
enableSorting: false,
76+
size: COLUMN_SIZE,
7277
cell: ({ getValue }) => {
7378
const partitions = getValue<Topic['partitions']>();
7479
if (partitions === undefined || partitions.length === 0) {
@@ -83,12 +88,14 @@ const TopicTable: React.FC = () => {
8388
id: TopicColumnsToSort.SIZE,
8489
header: 'Size',
8590
accessorKey: 'segmentSize',
91+
size: COLUMN_SIZE,
8692
cell: SizeCell,
8793
},
8894
{
8995
id: 'actions',
9096
header: '',
9197
cell: ActionsCell,
98+
size: 60,
9299
},
93100
],
94101
[]

0 commit comments

Comments
 (0)