Skip to content

Commit 036f514

Browse files
Leshe4kaLeshe4ka
andauthored
FE: Added Connector topics tab (#1453)
Co-authored-by: Leshe4ka <[email protected]>
1 parent b4106e2 commit 036f514

File tree

4 files changed

+86
-0
lines changed

4 files changed

+86
-0
lines changed

frontend/src/components/Connect/Details/DetailsPage.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import {
55
clusterConnectConnectorConfigPath,
66
clusterConnectConnectorConfigRelativePath,
77
clusterConnectConnectorPath,
8+
clusterConnectConnectorTopicsPath,
9+
clusterConnectConnectorTopicsRelativePath,
810
clusterConnectorsPath,
911
RouterParamsClusterConnectConnector,
1012
} from 'lib/paths';
@@ -16,6 +18,7 @@ import Overview from './Overview/Overview';
1618
import Tasks from './Tasks/Tasks';
1719
import Config from './Config/Config';
1820
import Actions from './Actions/Actions';
21+
import Topics from './Topics/Topics';
1922

2023
const DetailsPage: React.FC = () => {
2124
const { clusterName, connectName, connectorName } =
@@ -53,6 +56,16 @@ const DetailsPage: React.FC = () => {
5356
>
5457
Config
5558
</NavLink>
59+
<NavLink
60+
to={clusterConnectConnectorTopicsPath(
61+
clusterName,
62+
connectName,
63+
connectorName
64+
)}
65+
className={({ isActive }) => (isActive ? 'is-active' : '')}
66+
>
67+
Topics
68+
</NavLink>
5669
</Navbar>
5770
<Suspense fallback={<PageLoader />}>
5871
<Routes>
@@ -61,6 +74,10 @@ const DetailsPage: React.FC = () => {
6174
path={clusterConnectConnectorConfigRelativePath}
6275
element={<Config />}
6376
/>
77+
<Route
78+
path={clusterConnectConnectorTopicsRelativePath}
79+
element={<Topics />}
80+
/>
6481
</Routes>
6582
</Suspense>
6683
</div>
Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react';
2+
import useAppParams from 'lib/hooks/useAppParams';
3+
import { RouterParamsClusterConnectConnector } from 'lib/paths';
4+
import { useConnector } from 'lib/hooks/api/kafkaConnect';
5+
import Table from 'components/common/NewTable';
6+
import { ColumnDef } from '@tanstack/react-table';
7+
8+
import { TopicNameCell } from './cells/TopicNameCell';
9+
10+
const columns: ColumnDef<{ topicName: string }>[] = [
11+
{
12+
header: 'Topic',
13+
accessorKey: 'topicName',
14+
cell: TopicNameCell,
15+
},
16+
];
17+
18+
const Topics = () => {
19+
const routerProps = useAppParams<RouterParamsClusterConnectConnector>();
20+
21+
const { data: raw } = useConnector(routerProps);
22+
23+
const connector = { ...raw, topics: ['wikimedia.recentchange.connect'] };
24+
25+
const tableData = (connector?.topics ?? []).map((topicName) => ({
26+
topicName,
27+
}));
28+
29+
return (
30+
<Table columns={columns} data={tableData} emptyMessage="No topics found" />
31+
);
32+
};
33+
34+
export default Topics;
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react';
2+
import useAppParams from 'lib/hooks/useAppParams';
3+
import {
4+
clusterTopicPath,
5+
RouterParamsClusterConnectConnector,
6+
} from 'lib/paths';
7+
import { CellContext } from '@tanstack/react-table';
8+
import { TableKeyLink } from 'components/common/table/Table/TableKeyLink.styled';
9+
import { Link } from 'react-router-dom';
10+
11+
type TopicNameCellProps = CellContext<{ topicName: string }, unknown>;
12+
13+
export const TopicNameCell = ({ getValue }: TopicNameCellProps) => {
14+
const routerProps = useAppParams<RouterParamsClusterConnectConnector>();
15+
const topicName = getValue<string>();
16+
17+
return (
18+
<TableKeyLink>
19+
<Link to={clusterTopicPath(routerProps.clusterName, topicName)}>
20+
{topicName}
21+
</Link>
22+
</TableKeyLink>
23+
);
24+
};

frontend/src/lib/paths.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,7 @@ export const clusterConnectConnectorRelativePath = `${clusterConnectsRelativePat
216216
export const clusterConnectorNewRelativePath = 'create-new';
217217
const clusterConnectConnectorTasksRelativePath = 'tasks';
218218
export const clusterConnectConnectorConfigRelativePath = 'config';
219+
export const clusterConnectConnectorTopicsRelativePath = 'topics';
219220

220221
export const clusterConnectsPath = (
221222
clusterName: ClusterName = RouteParams.clusterName
@@ -281,6 +282,16 @@ export const clusterConnectConnectorConfigPath = (
281282
connectName,
282283
connectorName
283284
)}/${clusterConnectConnectorConfigRelativePath}`;
285+
export const clusterConnectConnectorTopicsPath = (
286+
clusterName: ClusterName = RouteParams.clusterName,
287+
connectName: Connect['name'] = RouteParams.connectName,
288+
connectorName: Connector['name'] = RouteParams.connectorName
289+
) =>
290+
`${clusterConnectConnectorPath(
291+
clusterName,
292+
connectName,
293+
connectorName
294+
)}/${clusterConnectConnectorTopicsRelativePath}`;
284295

285296
export type RouterParamsClusterConnectConnector = {
286297
clusterName: ClusterName;

0 commit comments

Comments
 (0)