Skip to content

Commit c57b75b

Browse files
committed
FE: Use api query
1 parent 3c5b70d commit c57b75b

File tree

5 files changed

+19
-44
lines changed

5 files changed

+19
-44
lines changed

frontend/src/components/Connect/Clusters/Clusters.tsx

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import React from 'react';
22
import { Connect } from 'generated-sources';
3+
import { useConnects } from 'lib/hooks/api/kafkaConnect';
4+
import useAppParams from 'lib/hooks/useAppParams';
5+
import { ClusterNameRoute } from 'lib/paths';
36

4-
import List from './ui/List/List';
57
import ClustersStatistics from './ui/Statistics/Statistics';
8+
import List from './ui/List/List';
69

7-
const connects: Connect[] = [
10+
const testConnects: Connect[] = [
811
{
912
name: 'local',
1013
connectorsCount: 5,
@@ -22,10 +25,12 @@ const connects: Connect[] = [
2225
];
2326

2427
const KafkaConnectClustersPage = () => {
28+
const { clusterName } = useAppParams<ClusterNameRoute>();
29+
const { data: connects, isLoading } = useConnects(clusterName, true);
2530
return (
2631
<>
27-
<ClustersStatistics connects={connects} />
28-
<List connects={connects} />
32+
<ClustersStatistics connects={connects ?? []} isLoading={isLoading} />
33+
<List connects={connects ?? []} />
2934
</>
3035
);
3136
};

frontend/src/components/Connect/Clusters/ui/List/Cells/ConnectorsCell.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@ const ConnectorsCell = ({ connect }: Props) => {
88
const failedCount = connect.failedConnectorsCount ?? 0;
99
const text = `${count - failedCount}/${count}`;
1010

11+
if (count === 0) {
12+
return null;
13+
}
14+
1115
if (failedCount > 0) {
1216
return (
1317
<AlertBadge>
Lines changed: 0 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,16 @@
11
import React from 'react';
22
import { Navigate, Routes, Route, NavLink } from 'react-router-dom';
33
import {
4-
RouteParams,
5-
clusterConnectConnectorRelativePath,
6-
clusterConnectConnectorsRelativePath,
7-
clusterConnectorNewRelativePath,
8-
getNonExactPath,
94
clusterConnectorsPath,
105
ClusterNameRoute,
116
kafkaConnectClustersPath,
127
kafkaConnectClustersRelativePath,
138
clusterConnectorsRelativePath,
149
} from 'lib/paths';
1510
import useAppParams from 'lib/hooks/useAppParams';
16-
import SuspenseQueryComponent from 'components/common/SuspenseQueryComponent/SuspenseQueryComponent';
1711
import Navbar from 'components/common/Navigation/Navbar.styled';
1812
import Clusters from 'components/Connect/Clusters/Clusters';
1913

20-
import DetailsPage from './Details/DetailsPage';
21-
import New from './New/New';
2214
import Connectors from './List/ListPage';
2315
import Header from './Header/Header';
2416

@@ -58,31 +50,4 @@ const Connect: React.FC = () => {
5850
);
5951
};
6052

61-
const ConnectOld: React.FC = () => {
62-
const { clusterName } = useAppParams();
63-
64-
return (
65-
<Routes>
66-
<Route index element={<Connectors />} />
67-
<Route path={clusterConnectorNewRelativePath} element={<New />} />
68-
<Route
69-
path={getNonExactPath(clusterConnectConnectorRelativePath)}
70-
element={
71-
<SuspenseQueryComponent>
72-
<DetailsPage />
73-
</SuspenseQueryComponent>
74-
}
75-
/>
76-
<Route
77-
path={clusterConnectConnectorsRelativePath}
78-
element={<Navigate to={clusterConnectorsPath(clusterName)} replace />}
79-
/>
80-
<Route
81-
path={RouteParams.connectName}
82-
element={<Navigate to="/" replace />}
83-
/>
84-
</Routes>
85-
);
86-
};
87-
8853
export default Connect;

frontend/src/components/Connect/Header/Header.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import React from 'react';
1111
const Header = () => {
1212
const { isReadOnly } = React.useContext(ClusterContext);
1313
const { clusterName } = useAppParams<ClusterNameRoute>();
14-
const { data: connects = [] } = useConnects(clusterName);
14+
const { data: connects = [] } = useConnects(clusterName, true);
1515
return (
1616
<ResourcePageHeading text="Kafka Connect">
1717
{!isReadOnly && (

frontend/src/lib/hooks/api/kafkaConnect.ts

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,11 @@ interface CreateConnectorProps {
1919
newConnector: NewConnector;
2020
}
2121

22-
const connectsKey = (clusterName: ClusterName) => [
22+
const connectsKey = (clusterName: ClusterName, withStats: boolean) => [
2323
'clusters',
2424
clusterName,
2525
'connects',
26+
withStats,
2627
];
2728
const connectorsKey = (clusterName: ClusterName, search?: string) => {
2829
const base = ['clusters', clusterName, 'connectors'];
@@ -44,9 +45,9 @@ const connectorTasksKey = (props: UseConnectorProps) => [
4445
'tasks',
4546
];
4647

47-
export function useConnects(clusterName: ClusterName) {
48-
return useQuery(connectsKey(clusterName), () =>
49-
api.getConnects({ clusterName })
48+
export function useConnects(clusterName: ClusterName, withStats = false) {
49+
return useQuery(connectsKey(clusterName, withStats), () =>
50+
api.getConnects({ clusterName, withStats })
5051
);
5152
}
5253
export function useConnectors(clusterName: ClusterName, search?: string) {

0 commit comments

Comments
 (0)