Skip to content

Commit 79ed9c9

Browse files
absorbbabsorbb
committed
console: Service Connectors: added support for adding custom docker image as a connector
1 parent 57acac0 commit 79ed9c9

File tree

5 files changed

+83
-14
lines changed

5 files changed

+83
-14
lines changed

‎webapps/console/components/ConnectionEditorPage/ConnectionEditorPage.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -346,7 +346,7 @@ function ConnectionEditor({
346346
documentation: (
347347
<>
348348
Maximum number of events to send in one batch. If there are more events in queue than 'Batch Size', events
349-
will be sent as a consequence of batches with provided size.
349+
will be sent as a sequence of batches with provided size.
350350
</>
351351
),
352352
component: (

‎webapps/console/components/ServicesCatalog/ServicesCatalog.tsx

+54-4
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import styles from "./ServicesCatalog.module.css";
22

3-
import { FaCloud, FaDatabase } from "react-icons/fa";
3+
import { FaDatabase, FaDocker } from "react-icons/fa";
44
import { useApi } from "../../lib/useApi";
55
import { SourceType } from "../../pages/api/sources";
66
import capitalize from "lodash/capitalize";
77
import { LoadingAnimation } from "../GlobalLoader/GlobalLoader";
88
import React from "react";
99
import { ErrorCard } from "../GlobalError/GlobalError";
10-
import { Input } from "antd";
10+
import { Button, Input, Popover } from "antd";
1111
import { useAppConfig, useWorkspace } from "../../lib/context";
1212

1313
function groupByType(sources: SourceType[]): Record<string, SourceType[]> {
@@ -50,15 +50,19 @@ export function getServiceIcon(source: SourceType, icons: Record<string, string>
5050
) : connectorSubtype === "database" ? (
5151
<FaDatabase className={"w-full h-full"} />
5252
) : (
53-
<FaCloud className={"w-full h-full"} />
53+
<FaDocker className={"w-full h-full"} />
5454
);
5555
}
5656

57-
export const ServicesCatalog: React.FC<{ onClick: (packageType, packageId: string) => void }> = ({ onClick }) => {
57+
export const ServicesCatalog: React.FC<{ onClick: (packageType, packageId: string, version?: string) => void }> = ({
58+
onClick,
59+
}) => {
5860
const { data, isLoading, error } = useApi<{ sources: SourceType[] }>(`/api/sources?mode=meta`);
5961
const sourcesIconsLoader = useApi<{ sources: SourceType[] }>(`/api/sources?mode=icons-only`);
6062
const workspace = useWorkspace();
6163
const [filter, setFilter] = React.useState("");
64+
const [customImage, setCustomImage] = React.useState("");
65+
const [customPopupOpen, setCustomPopupOpen] = React.useState(false);
6266
const appconfig = useAppConfig();
6367
const sourcesIcons: Record<string, string> = sourcesIconsLoader.data
6468
? sourcesIconsLoader.data.sources.reduce(
@@ -135,6 +139,52 @@ export const ServicesCatalog: React.FC<{ onClick: (packageType, packageId: strin
135139
</div>
136140
);
137141
})}
142+
<div key={"custom-connector"} className="">
143+
<div className="text-3xl text-textLight px-4 pb-0 pt-3">Advanced</div>
144+
<div className="flex flex-wrap">
145+
<Popover
146+
content={
147+
<div className={"flex flex-row gap-1.5"}>
148+
<Input onChange={e => setCustomImage(e.target.value)} />
149+
<Button
150+
type={"primary"}
151+
onClick={() => {
152+
const [packageId, packageVersion] = (customImage || "").trim().split(":");
153+
if (!packageId) {
154+
return;
155+
}
156+
onClick("airbyte", packageId, packageVersion);
157+
setCustomPopupOpen(false);
158+
setCustomImage("");
159+
}}
160+
>
161+
Add
162+
</Button>
163+
</div>
164+
}
165+
onOpenChange={setCustomPopupOpen}
166+
open={customPopupOpen}
167+
title="Enter docker image name"
168+
placement={"right"}
169+
trigger="click"
170+
>
171+
<div
172+
key="custom-connector"
173+
className={`flex items-center cursor-pointer relative w-72 border border-textDisabled ${"hover:scale-105 hover:border-primary"} transition ease-in-out rounded-lg px-4 py-4 space-x-4 m-4`}
174+
>
175+
<div className={`${styles.icon} flex`}>
176+
<FaDocker />
177+
</div>
178+
<div>
179+
<div>
180+
<div className={`text-xl`}>Custom connector</div>
181+
</div>
182+
<div className="text-xs text-textLight">Custom docker image</div>
183+
</div>
184+
</div>
185+
</Popover>
186+
</div>
187+
</div>
138188
</div>
139189
</div>
140190
);

‎webapps/console/pages/[workspaceId]/services.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -257,10 +257,12 @@ const ServicesList: React.FC<{}> = () => {
257257
footer={null}
258258
>
259259
<ServicesCatalog
260-
onClick={async (packageType, packageId) => {
260+
onClick={async (packageType, packageId, version) => {
261261
await setShowCatalog(false).then(() =>
262262
router.push(
263-
`/${workspace.id}/services?id=new&packageType=${packageType}&packageId=${encodeURIComponent(packageId)}`
263+
`/${workspace.id}/services?id=new&packageType=${packageType}&packageId=${encodeURIComponent(
264+
packageId
265+
)}${version ? `&version=${version}` : ""}`
264266
)
265267
);
266268
}}

‎webapps/console/pages/api/sources/[packageType]/[...packageId].ts

+21-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { db } from "../../../../lib/server/db";
33
import pick from "lodash/pick";
44
import { externalSources, jitsuSources, SourceType } from "../index";
55
import { getLog } from "juava";
6+
import capitalize from "lodash/capitalize";
67

78
export default createRoute()
89
.GET({ auth: false })
@@ -26,7 +27,26 @@ export default createRoute()
2627
}
2728
const connectorPackage = await db.prisma().connectorPackage.findFirst({ where: { packageType, packageId } });
2829
if (!connectorPackage) {
29-
throw new Error(`Source ${packageId} of ${packageType} type not found`);
30+
return {
31+
id: packageId,
32+
versions: `/api/sources/versions?type=${encodeURIComponent(packageType)}&package=${encodeURIComponent(
33+
packageId
34+
)}`,
35+
packageId,
36+
packageType,
37+
createdAt: new Date(),
38+
updatedAt: new Date(),
39+
meta: {
40+
name: capitalize(
41+
packageId
42+
.split("/")
43+
.pop()
44+
?.replace(/^source-/g, "")
45+
),
46+
license: "unknown",
47+
connectorSubtype: "unknown",
48+
},
49+
};
3050
}
3151
const { id, logoSvg, meta, ...rest } = connectorPackage;
3252
return {

‎webapps/console/pages/api/sources/logo.ts

+3-6
Original file line numberDiff line numberDiff line change
@@ -25,17 +25,14 @@ export default async function handler(req, res) {
2525
const data = await db
2626
.prisma()
2727
.connectorPackage.findFirst({ where: { packageId, packageType }, select: { logoSvg: true, meta: true } });
28-
if (!data) {
29-
const msg = `Icon for ${packageType} - ${packageId} not found`;
30-
res.status(404).json({ status: 404, message: msg });
31-
} else if (data.logoSvg) {
28+
if (data?.logoSvg) {
3229
res.setHeader("Content-Type", "image/svg+xml");
3330
res.setHeader("Cache-Control", "public, max-age=2592000, immutable");
3431
res.status(200).send(data.logoSvg.toString());
3532
} else {
3633
res.setHeader("Content-Type", "image/svg+xml");
3734
res.setHeader("Cache-Control", "public, max-age=2592000, immutable");
38-
if ((data.meta as any).connectorSubtype === "database") {
35+
if ((data?.meta as any)?.connectorSubtype === "database") {
3936
res
4037
.status(200)
4138
.send(
@@ -45,7 +42,7 @@ export default async function handler(req, res) {
4542
res
4643
.status(200)
4744
.send(
48-
'<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" width="100%" xmlns="http://www.w3.org/2000/svg"><path d="M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4z"></path></svg>'
45+
'<svg stroke="currentColor" fill="currentColor" viewBox="0 0 640 512" width="100%" xmlns="http://www.w3.org/2000/svg"><path d="M349.9 236.3h-66.1v-59.4h66.1v59.4zm0-204.3h-66.1v60.7h66.1V32zm78.2 144.8H362v59.4h66.1v-59.4zm-156.3-72.1h-66.1v60.1h66.1v-60.1zm78.1 0h-66.1v60.1h66.1v-60.1zm276.8 100c-14.4-9.7-47.6-13.2-73.1-8.4-3.3-24-16.7-44.9-41.1-63.7l-14-9.3-9.3 14c-18.4 27.8-23.4 73.6-3.7 103.8-8.7 4.7-25.8 11.1-48.4 10.7H2.4c-8.7 50.8 5.8 116.8 44 162.1 37.1 43.9 92.7 66.2 165.4 66.2 157.4 0 273.9-72.5 328.4-204.2 21.4 .4 67.6 .1 91.3-45.2 1.5-2.5 6.6-13.2 8.5-17.1l-13.3-8.9zm-511.1-27.9h-66v59.4h66.1v-59.4zm78.1 0h-66.1v59.4h66.1v-59.4zm78.1 0h-66.1v59.4h66.1v-59.4zm-78.1-72.1h-66.1v60.1h66.1v-60.1z"/></svg>'
4946
);
5047
}
5148
}

0 commit comments

Comments
 (0)