Skip to content

Commit 3711f75

Browse files
author
Leshe4ka
committed
csv from backend
1 parent 148b9f4 commit 3711f75

File tree

9 files changed

+250
-215
lines changed

9 files changed

+250
-215
lines changed

‎frontend/src/components/Brokers/BrokersList/BrokersList.tsx‎

Lines changed: 34 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,13 @@ import React, { useMemo } from 'react';
22
import { ClusterName } from 'lib/interfaces/cluster';
33
import { useNavigate } from 'react-router-dom';
44
import useAppParams from 'lib/hooks/useAppParams';
5-
import Table, {
6-
exportTableCSV,
7-
TableProvider,
8-
} from 'components/common/NewTable';
5+
import Table from 'components/common/NewTable';
96
import { clusterBrokerPath } from 'lib/paths';
107
import { useBrokers } from 'lib/hooks/api/brokers';
118
import { useClusterStats } from 'lib/hooks/api/clusters';
129
import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
13-
import { Button } from 'components/common/Button/Button';
10+
import { DownloadCsvButton } from 'components/common/DownloadCsvButton/DownloadCsvButton';
11+
import { brokersApiClient } from 'lib/api';
1412

1513
import { getBrokersTableColumns, getBrokersTableRows } from './lib';
1614
import { BrokersMetrics } from './BrokersMetrics/BrokersMetrics';
@@ -47,49 +45,40 @@ const BrokersList: React.FC = () => {
4745

4846
const columns = useMemo(() => getBrokersTableColumns(), []);
4947

50-
return (
51-
<TableProvider>
52-
{({ table }) => {
53-
const handleExportClick = () => {
54-
exportTableCSV(table, { prefix: 'brokers' });
55-
};
48+
const fetchCsv = async () => {
49+
return brokersApiClient.getBrokersCsv({ clusterName });
50+
};
5651

57-
return (
58-
<>
59-
<ResourcePageHeading text="Brokers">
60-
<Button
61-
buttonType="primary"
62-
buttonSize="M"
63-
onClick={handleExportClick}
64-
>
65-
Export CSV
66-
</Button>
67-
</ResourcePageHeading>
52+
return (
53+
<>
54+
<ResourcePageHeading text="Brokers">
55+
<DownloadCsvButton
56+
fetchCsv={fetchCsv}
57+
filePrefix={`brokers-${clusterName}`}
58+
/>
59+
</ResourcePageHeading>
6860

69-
<BrokersMetrics
70-
brokerCount={brokerCount}
71-
inSyncReplicasCount={inSyncReplicasCount}
72-
outOfSyncReplicasCount={outOfSyncReplicasCount}
73-
version={version}
74-
activeControllers={activeControllers}
75-
offlinePartitionCount={offlinePartitionCount}
76-
onlinePartitionCount={onlinePartitionCount}
77-
underReplicatedPartitionCount={underReplicatedPartitionCount}
78-
/>
61+
<BrokersMetrics
62+
brokerCount={brokerCount}
63+
inSyncReplicasCount={inSyncReplicasCount}
64+
outOfSyncReplicasCount={outOfSyncReplicasCount}
65+
version={version}
66+
activeControllers={activeControllers}
67+
offlinePartitionCount={offlinePartitionCount}
68+
onlinePartitionCount={onlinePartitionCount}
69+
underReplicatedPartitionCount={underReplicatedPartitionCount}
70+
/>
7971

80-
<Table
81-
columns={columns}
82-
data={rows}
83-
enableSorting
84-
onRowClick={({ original: { brokerId } }) =>
85-
navigate(clusterBrokerPath(clusterName, brokerId))
86-
}
87-
emptyMessage="No clusters are online"
88-
/>
89-
</>
90-
);
91-
}}
92-
</TableProvider>
72+
<Table
73+
columns={columns}
74+
data={rows}
75+
enableSorting
76+
onRowClick={({ original: { brokerId } }) =>
77+
navigate(clusterBrokerPath(clusterName, brokerId))
78+
}
79+
emptyMessage="No clusters are online"
80+
/>
81+
</>
9382
);
9483
};
9584

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
import React from 'react';
2-
import { Navigate, Routes, Route, NavLink } from 'react-router-dom';
2+
import { Navigate, NavLink, Route, Routes } from 'react-router-dom';
33
import {
44
clusterConnectorsPath,
5+
clusterConnectorsRelativePath,
56
ClusterNameRoute,
67
kafkaConnectClustersPath,
78
kafkaConnectClustersRelativePath,
8-
clusterConnectorsRelativePath,
99
} from 'lib/paths';
1010
import useAppParams from 'lib/hooks/useAppParams';
1111
import Navbar from 'components/common/Navigation/Navbar.styled';
1212
import Clusters from 'components/Connect/Clusters/Clusters';
13-
import { TableProvider } from 'components/common/NewTable';
1413

1514
import Connectors from './List/ListPage';
1615
import Header from './Header/Header';
@@ -19,7 +18,7 @@ const Connect: React.FC = () => {
1918
const { clusterName } = useAppParams<ClusterNameRoute>();
2019

2120
return (
22-
<TableProvider>
21+
<>
2322
<Header />
2423
<Navbar role="navigation">
2524
<NavLink
@@ -47,7 +46,7 @@ const Connect: React.FC = () => {
4746
<Route path={kafkaConnectClustersRelativePath} element={<Clusters />} />
4847
<Route path={clusterConnectorsRelativePath} element={<Connectors />} />
4948
</Routes>
50-
</TableProvider>
49+
</>
5150
);
5251
};
5352

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

Lines changed: 39 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,12 @@ import { ActionButton } from 'components/common/ActionComponent';
22
import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
33
import Tooltip from 'components/common/Tooltip/Tooltip';
44
import ClusterContext from 'components/contexts/ClusterContext';
5-
import { ResourceType, Action } from 'generated-sources';
6-
import { useConnects } from 'lib/hooks/api/kafkaConnect';
5+
import {
6+
Action,
7+
ConnectorColumnsToSort,
8+
ResourceType,
9+
SortOrder,
10+
} from 'generated-sources';
711
import useAppParams from 'lib/hooks/useAppParams';
812
import {
913
clusterConnectorNewPath,
@@ -12,38 +16,46 @@ import {
1216
kafkaConnectClustersRelativePath,
1317
} from 'lib/paths';
1418
import React from 'react';
15-
import { exportTableCSV, useTableInstance } from 'components/common/NewTable';
16-
import { Button } from 'components/common/Button/Button';
19+
import { DownloadCsvButton } from 'components/common/DownloadCsvButton/DownloadCsvButton';
20+
import { kafkaConnectApiClient } from 'lib/api';
21+
import { connects } from 'lib/fixtures/kafkaConnect';
22+
import { useSearchParams } from 'react-router-dom';
23+
import useFts from 'components/common/Fts/useFts';
1724

1825
type ConnectPage =
1926
| typeof kafkaConnectClustersRelativePath
2027
| typeof clusterConnectorsRelativePath;
2128

22-
const getCsvPrefix = (page: ConnectPage) => {
23-
let prefix = 'kafka-connect';
24-
25-
if (page === clusterConnectorsRelativePath) {
26-
prefix += '-connectors';
27-
}
28-
29-
if (page === kafkaConnectClustersRelativePath) {
30-
prefix += '-clusters';
31-
}
32-
33-
return prefix;
34-
};
35-
3629
const Header = () => {
3730
const { isReadOnly } = React.useContext(ClusterContext);
3831
const { '*': currentPath, clusterName } = useAppParams<
3932
ClusterNameRoute & { ['*']: ConnectPage }
4033
>();
41-
const { data: connects = [] } = useConnects(clusterName, true);
34+
const [searchParams] = useSearchParams();
35+
const { isFtsEnabled } = useFts('connects');
36+
37+
const fetchCsv = async () => {
38+
if (currentPath === kafkaConnectClustersRelativePath) {
39+
return kafkaConnectApiClient.getConnectsCsv({
40+
clusterName,
41+
withStats: true,
42+
});
43+
}
4244

43-
const instance = useTableInstance();
45+
if (currentPath === clusterConnectorsRelativePath) {
46+
return kafkaConnectApiClient.getAllConnectorsCsv({
47+
clusterName,
48+
search: searchParams.get('q') || undefined,
49+
fts: isFtsEnabled,
50+
orderBy:
51+
(searchParams.get('sortBy') as ConnectorColumnsToSort) || undefined,
52+
sortOrder:
53+
(searchParams.get('sortDirection')?.toUpperCase() as SortOrder) ||
54+
undefined,
55+
});
56+
}
4457

45-
const handleExportClick = () => {
46-
exportTableCSV(instance?.table, { prefix: getCsvPrefix(currentPath) });
58+
return '';
4759
};
4860

4961
return (
@@ -52,6 +64,7 @@ const Header = () => {
5264
<Tooltip
5365
value={
5466
<ActionButton
67+
name="Create Connector"
5568
buttonType="primary"
5669
buttonSize="M"
5770
disabled={!connects.length}
@@ -70,9 +83,10 @@ const Header = () => {
7083
/>
7184
)}
7285

73-
<Button buttonType="primary" buttonSize="M" onClick={handleExportClick}>
74-
Export CSV
75-
</Button>
86+
<DownloadCsvButton
87+
filePrefix={`connectors-${clusterName}`}
88+
fetchCsv={fetchCsv}
89+
/>
7690
</ResourcePageHeading>
7791
);
7892
};

‎frontend/src/components/Connect/Header/__tests__/Header.spec.tsx‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,6 @@ jest.mock('lib/hooks/api/kafkaConnect', () => ({
1212
useConnects: jest.fn(),
1313
}));
1414

15-
jest.mock('components/common/NewTable', () => ({
16-
useTableInstance: () => ({
17-
table: null,
18-
}),
19-
exportTableCSV: jest.fn(),
20-
}));
21-
2215
describe('Kafka Connect header', () => {
2316
beforeEach(() => {
2417
(useConnects as jest.Mock).mockImplementation(() => ({
@@ -59,11 +52,11 @@ describe('Kafka Connect header', () => {
5952
(useConnects as jest.Mock).mockImplementation(() => ({
6053
data: [],
6154
}));
62-
renderComponent({ isReadOnly: false });
55+
renderComponent({ isReadOnly: true });
6356

6457
const btn = screen.queryByRole('button', { name: 'Create Connector' });
6558

66-
expect(btn).toBeDisabled();
59+
expect(btn).not.toBeInTheDocument();
6760
});
6861
});
6962
});

0 commit comments

Comments
 (0)