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

Migrate Topic Consumers page to new version of table component (#2717)

Browse source 
* Migrate Dashboard table to the new version on table components #2682

* Added universal component to the column section and added part of test  #2682

* Added universal component for the all new tables in project  #2682

* deleted color argument on LinkCell component

* deleted link on topic count

* Migrate Topic Consumers page to new version of table component #2681

Co-authored-by: davitbejanyan <dbejanyan@provectus.com>
Co-authored-by: Oleg Shur <workshur@gmail.com>
This commit is contained in:
David 2022-10-19 21:31:18 +04:00 • committed by GitHub
parent 6581ee605b
commit 15e7fc42d2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 57 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,65 +1,72 @@
import React from 'react'; import React from 'react';
import { Link } from 'react-router-dom';
import { clusterConsumerGroupsPath, RouteParamsClusterTopic } from 'lib/paths'; import { clusterConsumerGroupsPath, RouteParamsClusterTopic } from 'lib/paths';
import { Table } from 'components/common/table/Table/Table.styled'; import { ConsumerGroup } from 'generated-sources';
import TableHeaderCell from 'components/common/table/TableHeaderCell/TableHeaderCell';
import { Tag } from 'components/common/Tag/Tag.styled';
import { TableKeyLink } from 'components/common/table/Table/TableKeyLink.styled';
import getTagColor from 'components/common/Tag/getTagColor';
import useAppParams from 'lib/hooks/useAppParams'; import useAppParams from 'lib/hooks/useAppParams';
import { useTopicConsumerGroups } from 'lib/hooks/api/topics'; import { useTopicConsumerGroups } from 'lib/hooks/api/topics';
import { ColumnDef } from '@tanstack/react-table';
import Table, { LinkCell, TagCell } from 'components/common/NewTable';
const TopicConsumerGroups: React.FC = () => { const TopicConsumerGroups: React.FC = () => {
const { clusterName, topicName } = useAppParams<RouteParamsClusterTopic>(); const { clusterName, topicName } = useAppParams<RouteParamsClusterTopic>();
const { data: consumerGroups } = useTopicConsumerGroups({ const { data: consumerGroups = [] } = useTopicConsumerGroups({
clusterName, clusterName,
topicName, topicName,
}); });
return ( const columns = React.useMemo<ColumnDef<ConsumerGroup>[]>(
<Table isFullwidth> () => [
<thead> {
<tr> header: 'Consumer Group ID',
<TableHeaderCell title="Consumer Group ID" /> accessorKey: 'groupId',
<TableHeaderCell title="Active Consumers" /> enableSorting: false,
<TableHeaderCell title="Messages Behind" /> // eslint-disable-next-line react/no-unstable-nested-components
<TableHeaderCell title="Coordinator" /> cell: ({ row }) => (
<TableHeaderCell title="State" /> <LinkCell
</tr> value={row.original.groupId}
</thead>
<tbody>
{consumerGroups?.map((consumer) => (
<tr key={consumer.groupId}>
<TableKeyLink>
<Link
to={`${clusterConsumerGroupsPath(clusterName)}/${ to={`${clusterConsumerGroupsPath(clusterName)}/${
consumer.groupId row.original.groupId
}`} }`}
> />
{consumer.groupId} ),
</Link> },
</TableKeyLink> {
<td>{consumer.members}</td> header: 'Active Consumers',
<td>{consumer.messagesBehind}</td> accessorKey: 'members',
<td>{consumer.coordinator?.id}</td> enableSorting: false,
<td> },
{consumer.state && ( {
<Tag color={getTagColor(consumer.state)}>{`${consumer.state header: 'Messages Behind',
.charAt(0) accessorKey: 'messagesBehind',
.toUpperCase()}${consumer.state enableSorting: false,
.slice(1) },
.toLowerCase()}`}</Tag> {
)} header: 'Coordinator',
</td> accessorKey: 'coordinator',
</tr> enableSorting: false,
))} cell: ({ getValue }) => {
{(!consumerGroups || consumerGroups.length === 0) && ( const coordinator = getValue<ConsumerGroup['coordinator']>();
<tr> if (coordinator === undefined) {
<td colSpan={10}>No active consumer groups</td> return 0;
</tr> }
)} return coordinator.id;
</tbody> },
</Table> },
{
header: 'State',
accessorKey: 'state',
enableSorting: false,
cell: TagCell,
},
],
[]
);
return (
<Table
columns={columns}
data={consumerGroups}
enableSorting
emptyMessage="No active consumer groups"
/>
); );
}; };