Skip to content

Commit 8048da3

Browse files
malinskibeniaminmalinskibeniamin
committed
frontend: Add secrets store page
1 parent f127c21 commit 8048da3

File tree

6 files changed

+987
-157
lines changed

6 files changed

+987
-157
lines changed

‎frontend/src/components/pages/connect/Overview.tsx

+1-44
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ import Tabs, { type Tab } from '../../misc/tabs/Tabs';
2828
import { PageComponent, type PageInitHelper } from '../Page';
2929
import RpConnectPipelinesList from '../rp-connect/Pipelines.List';
3030
import { RedpandaConnectIntro } from '../rp-connect/RedpandaConnectIntro';
31-
import RpConnectSecretsList from '../rp-connect/secrets/Secrets.List';
3231
import {
3332
ConnectorClass,
3433
ConnectorsColumn,
@@ -123,7 +122,7 @@ class KafkaConnectOverview extends PageComponent<{ defaultView: string }> {
123122
Learn more.
124123
</Link>
125124
</Text>
126-
<TabRedpandaConnect defaultView={getDefaultView(this.props.defaultView).redpandaConnectTab} />
125+
{Features.pipelinesApi ? <RpConnectPipelinesList matchedPath="/rp-connect" /> : <RedpandaConnectIntro />}
127126
</Box>
128127
),
129128
},
@@ -418,48 +417,6 @@ const TabKafkaConnect = observer((_p: {}) => {
418417
);
419418
});
420419

421-
const TabRedpandaConnect = observer((_p: { defaultView: ConnectView }) => {
422-
if (!Features.pipelinesApi)
423-
// If the backend doesn't support pipelines, show the intro page
424-
return <RedpandaConnectIntro />;
425-
426-
const tabs = [
427-
{
428-
key: 'pipelines',
429-
title: (
430-
<Box minWidth="180px" data-testid={'tab-rpcn-connect'}>
431-
Pipelines
432-
</Box>
433-
),
434-
content: <RpConnectPipelinesList matchedPath="/rp-connect" />,
435-
},
436-
{
437-
key: 'secrets',
438-
title: (
439-
<Box minWidth="180px" data-testid={'tab-rpcn-secret'}>
440-
Secrets
441-
</Box>
442-
),
443-
content: <RpConnectSecretsList matchedPath="/rp-connect/secrets" />,
444-
},
445-
] as Tab[];
446-
447-
/**
448-
* Verify if the RPCN secret is enabled. Unlike the pipeline, this feature checks
449-
* the result endpoint rather than the endpoint itself.
450-
*/
451-
if (!rpcnSecretManagerApi.isEnable) {
452-
return <RpConnectPipelinesList matchedPath="/rp-connect" />;
453-
}
454-
455-
return (
456-
<Tabs
457-
tabs={tabs}
458-
defaultSelectedTabKey={_p.defaultView === ConnectView.RedpandaConnectSecret ? 'secrets' : 'pipelines'}
459-
/>
460-
);
461-
});
462-
463420
export type ConnectTabKeys = 'clusters' | 'connectors' | 'tasks';
464421
const connectTabs: Tab[] = [
465422
{ key: 'clusters', title: 'Clusters', content: <TabClusters /> },

‎frontend/src/components/pages/rp-connect/Pipelines.List.tsx

+114-111
Original file line numberDiff line numberDiff line change
@@ -175,122 +175,125 @@ class RpConnectPipelinesList extends PageComponent<{}> {
175175

176176
return (
177177
<PageContent>
178-
<Section>
179-
<ToastContainer />
180-
{/* Pipeline List */}
178+
<ToastContainer />
179+
{/* Pipeline List */}
181180

182-
{pipelinesApi.pipelines.length !== 0 && (
183-
<Flex my={5} flexDir={'column'} gap={2}>
184-
<CreatePipelineButton />
185-
<SearchField
186-
width="350px"
187-
searchText={uiSettings.pipelinesList.quickSearch}
188-
setSearchText={(x) => (uiSettings.pipelinesList.quickSearch = x)}
189-
placeholderText="Enter search term / regex..."
190-
/>
191-
</Flex>
192-
)}
181+
{pipelinesApi.pipelines.length !== 0 && (
182+
<Flex my={5} flexDir={'column'} gap={2}>
183+
<CreatePipelineButton />
184+
<SearchField
185+
width="350px"
186+
searchText={uiSettings.pipelinesList.quickSearch}
187+
setSearchText={(x) => (uiSettings.pipelinesList.quickSearch = x)}
188+
placeholderText="Enter search term / regex..."
189+
/>
190+
</Flex>
191+
)}
193192

194-
{(pipelinesApi.pipelines ?? []).length === 0 ? (
195-
<EmptyPlaceholder />
196-
) : (
197-
<DataTable<Pipeline>
198-
data={filteredPipelines}
199-
pagination
200-
defaultPageSize={10}
201-
sorting
202-
columns={[
203-
{
204-
header: 'ID',
205-
cell: ({ row: { original } }) => (
206-
<Link to={`/rp-connect/${encodeURIComponentPercents(original.id)}`}>
207-
<Text>{original.id}</Text>
208-
</Link>
209-
),
210-
size: 100,
211-
},
212-
{
213-
header: 'Pipeline Name',
214-
cell: ({ row: { original } }) => (
215-
<Link to={`/rp-connect/${encodeURIComponentPercents(original.id)}`}>
216-
<Text wordBreak="break-word" whiteSpace="break-spaces">
217-
{original.displayName}
218-
</Text>
219-
</Link>
220-
),
221-
size: Number.POSITIVE_INFINITY,
222-
},
223-
{
224-
header: 'Description',
225-
accessorKey: 'description',
226-
size: 100,
227-
},
228-
{
229-
header: 'State',
230-
cell: ({ row: { original } }) => {
231-
return (
232-
<>
233-
<PipelineStatus status={original.state} />
234-
</>
235-
);
236-
},
193+
{(pipelinesApi.pipelines ?? []).length === 0 ? (
194+
<EmptyPlaceholder />
195+
) : (
196+
<DataTable<Pipeline>
197+
data={filteredPipelines}
198+
pagination
199+
defaultPageSize={10}
200+
sorting
201+
columns={[
202+
{
203+
header: 'ID',
204+
cell: ({ row: { original } }) => (
205+
<Link to={`/rp-connect/${encodeURIComponentPercents(original.id)}`}>
206+
<Text>{original.id}</Text>
207+
</Link>
208+
),
209+
size: 100,
210+
},
211+
{
212+
header: 'Pipeline Name',
213+
cell: ({ row: { original } }) => (
214+
<Link to={`/rp-connect/${encodeURIComponentPercents(original.id)}`}>
215+
<Text wordBreak="break-word" whiteSpace="break-spaces">
216+
{original.displayName}
217+
</Text>
218+
</Link>
219+
),
220+
size: Number.POSITIVE_INFINITY,
221+
},
222+
{
223+
header: 'Description',
224+
accessorKey: 'description',
225+
cell: ({ row: { original } }) => (
226+
<Text minWidth="200px" wordBreak="break-word" whiteSpace="break-spaces">
227+
{original.description}
228+
</Text>
229+
),
230+
size: 200,
231+
},
232+
{
233+
header: 'State',
234+
cell: ({ row: { original } }) => {
235+
return (
236+
<>
237+
<PipelineStatus status={original.state} />
238+
</>
239+
);
237240
},
238-
// {
239-
// header: 'Throughput',
240-
// cell: ({ row: { original } }) => {
241-
// return <>
242-
// <PipelineThroughput pipeline={original} />
243-
// </>
244-
// },
245-
// size: 100,
246-
// },
247-
{
248-
header: '',
249-
id: 'actions',
250-
cell: ({ row: { original: r } }) => (
251-
<Button
252-
variant="icon"
253-
height="16px"
254-
color="gray.500"
255-
// disabledReason={api.userData?.canDeleteTransforms === false ? 'You don\'t have the \'canDeleteTransforms\' permission' : undefined}
256-
onClick={(e) => {
257-
e.stopPropagation();
258-
e.preventDefault();
241+
},
242+
// {
243+
// header: 'Throughput',
244+
// cell: ({ row: { original } }) => {
245+
// return <>
246+
// <PipelineThroughput pipeline={original} />
247+
// </>
248+
// },
249+
// size: 100,
250+
// },
251+
{
252+
header: '',
253+
id: 'actions',
254+
cell: ({ row: { original: r } }) => (
255+
<Button
256+
variant="icon"
257+
height="16px"
258+
color="gray.500"
259+
// disabledReason={api.userData?.canDeleteTransforms === false ? 'You don\'t have the \'canDeleteTransforms\' permission' : undefined}
260+
onClick={(e) => {
261+
e.stopPropagation();
262+
e.preventDefault();
259263

260-
openDeleteModal(r.displayName, () => {
261-
pipelinesApi
262-
.deletePipeline(r.id)
263-
.then(async () => {
264-
toast({
265-
status: 'success',
266-
duration: 4000,
267-
isClosable: false,
268-
title: 'Pipeline deleted',
269-
});
270-
pipelinesApi.refreshPipelines(true);
271-
})
272-
.catch((err) => {
273-
toast({
274-
status: 'error',
275-
duration: null,
276-
isClosable: true,
277-
title: 'Failed to delete pipeline',
278-
description: String(err),
279-
});
264+
openDeleteModal(r.displayName, () => {
265+
pipelinesApi
266+
.deletePipeline(r.id)
267+
.then(async () => {
268+
toast({
269+
status: 'success',
270+
duration: 4000,
271+
isClosable: false,
272+
title: 'Pipeline deleted',
280273
});
281-
});
282-
}}
283-
>
284-
<TrashIcon />
285-
</Button>
286-
),
287-
size: 1,
288-
},
289-
]}
290-
emptyText=""
291-
/>
292-
)}
293-
</Section>
274+
pipelinesApi.refreshPipelines(true);
275+
})
276+
.catch((err) => {
277+
toast({
278+
status: 'error',
279+
duration: null,
280+
isClosable: true,
281+
title: 'Failed to delete pipeline',
282+
description: String(err),
283+
});
284+
});
285+
});
286+
}}
287+
>
288+
<TrashIcon />
289+
</Button>
290+
),
291+
size: 1,
292+
},
293+
]}
294+
emptyText=""
295+
/>
296+
)}
294297
</PageContent>
295298
);
296299
}

0 commit comments

Comments
 (0)