calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-01-28 22:00:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

🚧 add & validate blueprint yaml

Browse Source
This commit is contained in:
Fred KISSIE
2025-10-25 01:25:19 +02:00
parent 038f8829c2
commit 29cd035a05
10 changed files with 324 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
messages/en-US.json
View File

@@ -1161,6 +1161,8 @@
"blueprintInfo": "Blueprint Information",
"blueprintNameDescription": "This is the display name for the blueprint.",
"blueprintContentsDescription": "Define the YAML content describing your infrastructure",
"blueprintErrorCreateDescription": "An error occurred when applying the blueprint",
"blueprintErrorCreate": "Error creating blueprint",
"searchBlueprintProgress": "Search blueprints...",
"source": "Source",
"contents": "Contents",

1
package-lock.json generated
View File

@@ -101,6 +101,7 @@
"winston": "3.18.3",
"winston-daily-rotate-file": "5.0.0",
"ws": "8.18.3",
"yaml": "^2.8.1",
"yargs": "18.0.0",
"zod": "3.25.76",
"zod-validation-error": "3.5.2"

1
package.json
View File

@@ -124,6 +124,7 @@
"winston": "3.18.3",
"winston-daily-rotate-file": "5.0.0",
"ws": "8.18.3",
"yaml": "^2.8.1",
"yargs": "18.0.0",
"zod": "3.25.76",
"zod-validation-error": "3.5.2"

133
server/routers/blueprints/createAndApplyBlueprint.ts Normal file
View File

@@ -0,0 +1,133 @@
import { OpenAPITags, registry } from "@server/openApi";
import z from "zod";
import { applyBlueprint as applyBlueprintFunc } from "@server/lib/blueprints/applyBlueprint";
import { NextFunction, Request, Response } from "express";
import logger from "@server/logger";
import createHttpError from "http-errors";
import HttpCode from "@server/types/HttpCode";
import { fromZodError } from "zod-validation-error";
import response from "@server/lib/response";
import { type Blueprint, blueprints, db, loginPage } from "@server/db";
import { parse as parseYaml } from "yaml";
const applyBlueprintSchema = z
.object({
name: z.string().min(1).max(255),
contents: z
.string()
.min(1)
.superRefine((contents, ctx) => {
try {
parseYaml(contents);
} catch (error) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: `Invalid YAML: ${error instanceof Error ? error.message : "Unknown error"}`
});
}
})
})
.strict();
const applyBlueprintParamsSchema = z
.object({
orgId: z.string()
})
.strict();
export type CreateBlueprintResponse = Blueprint;
registry.registerPath({
method: "post",
path: "/org/{orgId}/blueprint",
description:
"Create and Apply a base64 encoded blueprint to an organization",
tags: [OpenAPITags.Org],
request: {
params: applyBlueprintParamsSchema,
body: {
content: {
"application/json": {
schema: applyBlueprintSchema
}
}
}
},
responses: {}
});
export async function createAndApplyBlueprint(
req: Request,
res: Response,
next: NextFunction
): Promise<any> {
try {
const parsedParams = applyBlueprintParamsSchema.safeParse(req.params);
if (!parsedParams.success) {
return next(
createHttpError(
HttpCode.BAD_REQUEST,
fromZodError(parsedParams.error)
)
);
}
const { orgId } = parsedParams.data;
const parsedBody = applyBlueprintSchema.safeParse(req.body);
if (!parsedBody.success) {
return next(
createHttpError(
HttpCode.BAD_REQUEST,
fromZodError(parsedBody.error)
)
);
}
const { contents, name } = parsedBody.data;
logger.debug(`Received blueprint: ${contents}`);
// try {
// // then parse the json
// const blueprintParsed = parseYaml(contents);
// // Update the blueprint in the database
// await applyBlueprintFunc(orgId, blueprintParsed);
// await db.transaction(async (trx) => {
// const newBlueprint = await trx
// .insert(blueprints)
// .values({
// orgId,
// name,
// contents
// // createdAt
// })
// .returning();
// });
// } catch (error) {
// logger.error(`Failed to update database from config: ${error}`);
// return next(
// createHttpError(
// HttpCode.BAD_REQUEST,
// `Failed to update database from config: ${error}`
// )
// );
// }
return response(res, {
data: null,
success: true,
error: false,
message: "Blueprint applied successfully",
status: HttpCode.CREATED
});
} catch (error) {
logger.error(error);
return next(
createHttpError(HttpCode.INTERNAL_SERVER_ERROR, "An error occurred")
);
}
}

3
server/routers/blueprints/index.ts
View File

@@ -1 +1,2 @@
export * from "./listBluePrints";
export * from "./listBlueprints";
export * from "./createAndApplyBlueprint";

13
server/routers/blueprints/listBluePrints.ts
View File

@@ -40,7 +40,8 @@ async function queryBlueprints(orgId: string, limit: number, offset: number) {
name: blueprints.name,
source: blueprints.source,
succeeded: blueprints.succeeded,
orgId: blueprints.orgId
orgId: blueprints.orgId,
createdAt: blueprints.createdAt
})
.from(blueprints)
.leftJoin(orgs, eq(blueprints.orgId, orgs.orgId))
@@ -51,9 +52,10 @@ async function queryBlueprints(orgId: string, limit: number, offset: number) {
type BlueprintData = Omit<
Awaited<ReturnType<typeof queryBlueprints>>[number],
"source"
"source" | "createdAt"
> & {
source: "API" | "WEB" | "CLI";
source: "API" | "UI" | "NEWT";
createdAt: Date;
};
export type ListBlueprintsResponse = {
@@ -116,7 +118,10 @@ export async function listBlueprints(
return response<ListBlueprintsResponse>(res, {
data: {
blueprints: blueprintsList as BlueprintData[],
blueprints: blueprintsList.map((b) => ({
...b,
createdAt: new Date(b.createdAt * 1000)
})) as BlueprintData[],
pagination: {
total: count,
limit,

8
server/routers/external.ts
View File

@@ -818,6 +818,14 @@ authenticated.get(
verifyUserHasAction(ActionsEnum.listBlueprints),
blueprints.listBlueprints
);
authenticated.put(
"/org/:orgId/blueprints",
verifyOrgAccess,
verifyUserHasAction(ActionsEnum.applyBlueprint),
blueprints.createAndApplyBlueprint
);
// Auth routes
export const authRouter = Router();
unauthenticated.use("/auth", authRouter);

2
src/app/[orgId]/settings/blueprints/create/page.tsx
View File

@@ -37,7 +37,7 @@ export default async function CreateBlueprintPage(
/>
</div>
<CreateBlueprintForm />
<CreateBlueprintForm orgId={orgId} />
</>
);
}

338
src/components/CreateBlueprintForm.tsx
View File

@@ -26,19 +26,43 @@ import { useActionState, useTransition } from "react";
import Editor, { useMonaco } from "@monaco-editor/react";
import { cn } from "@app/lib/cn";
import { Button } from "./ui/button";
import { wait } from "@app/lib/wait";
import { parse as parseYaml } from "yaml";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { createApiClient, formatAxiosError } from "@app/lib/api";
import { AxiosResponse } from "axios";
import type { CreateBlueprintResponse } from "@server/routers/blueprints";
import { toast } from "@app/hooks/useToast";
export type CreateBlueprintFormProps = {};
export type CreateBlueprintFormProps = {
orgId: string;
};
export default function CreateBlueprintForm({}: CreateBlueprintFormProps) {
export default function CreateBlueprintForm({
orgId
}: CreateBlueprintFormProps) {
const t = useTranslations();
const { env } = useEnvContext();
const api = createApiClient({ env });
const [, formAction, isSubmitting] = useActionState(onSubmit, null);
const baseForm = useForm({
const form = useForm({
resolver: zodResolver(
z.object({
name: z.string().min(1).max(255),
contents: z.string()
contents: z
.string()
.min(1)
.superRefine((contents, ctx) => {
try {
parseYaml(contents);
} catch (error) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: `Invalid YAML: ${error instanceof Error ? error.message : "Unknown error"}`
});
}
})
})
),
defaultValues: {
@@ -47,7 +71,7 @@ export default function CreateBlueprintForm({}: CreateBlueprintFormProps) {
resource-nice-id-uno:
name: this is my resource
protocol: http
full-domain: duce.test.example.com
full-domain: never-gonna-give-you-up.example.com
host-header: example.com
tls-server-name: example.com
`
@@ -55,124 +79,100 @@ export default function CreateBlueprintForm({}: CreateBlueprintFormProps) {
});
async function onSubmit() {
// setCreateLoading(true);
// const baseData = baseForm.getValues();
// const isHttp = baseData.http;
// try {
// const payload = {
// name: baseData.name,
// http: baseData.http,
// };
// let sanitizedSubdomain: string | undefined;
// if (isHttp) {
// const httpData = httpForm.getValues();
// sanitizedSubdomain = httpData.subdomain
// ? finalizeSubdomainSanitize(httpData.subdomain)
// : undefined;
// Object.assign(payload, {
// subdomain: sanitizedSubdomain
// ? toASCII(sanitizedSubdomain)
// : undefined,
// domainId: httpData.domainId,
// protocol: "tcp"
// });
// } else {
// const tcpUdpData = tcpUdpForm.getValues();
// Object.assign(payload, {
// protocol: tcpUdpData.protocol,
// proxyPort: tcpUdpData.proxyPort
// // enableProxy: tcpUdpData.enableProxy
// });
// }
// const res = await api
// .put<
// AxiosResponse<Resource>
// >(`/org/${orgId}/resource/`, payload)
// .catch((e) => {
// toast({
// variant: "destructive",
// title: t("resourceErrorCreate"),
// description: formatAxiosError(
// e,
// t("resourceErrorCreateDescription")
// )
// });
// });
// if (res && res.status === 201) {
// const id = res.data.data.resourceId;
// const niceId = res.data.data.niceId;
// setNiceId(niceId);
// // Create targets if any exist
// if (targets.length > 0) {
// try {
// for (const target of targets) {
// const data: any = {
// ip: target.ip,
// port: target.port,
// method: target.method,
// enabled: target.enabled,
// siteId: target.siteId,
// hcEnabled: target.hcEnabled,
// hcPath: target.hcPath || null,
// hcMethod: target.hcMethod || null,
// hcInterval: target.hcInterval || null,
// hcTimeout: target.hcTimeout || null,
// hcHeaders: target.hcHeaders || null,
// hcScheme: target.hcScheme || null,
// hcHostname: target.hcHostname || null,
// hcPort: target.hcPort || null,
// hcFollowRedirects:
// target.hcFollowRedirects || null,
// hcStatus: target.hcStatus || null
// };
// // Only include path-related fields for HTTP resources
// if (isHttp) {
// data.path = target.path;
// data.pathMatchType = target.pathMatchType;
// data.rewritePath = target.rewritePath;
// data.rewritePathType = target.rewritePathType;
// data.priority = target.priority;
// }
// await api.put(`/resource/${id}/target`, data);
// }
// } catch (targetError) {
// console.error("Error creating targets:", targetError);
// toast({
// variant: "destructive",
// title: t("targetErrorCreate"),
// description: formatAxiosError(
// targetError,
// t("targetErrorCreateDescription")
// )
// });
// }
// }
// if (isHttp) {
// router.push(`/${orgId}/settings/resources/${niceId}`);
// } else {
// const tcpUdpData = tcpUdpForm.getValues();
// // Only show config snippets if enableProxy is explicitly true
// // if (tcpUdpData.enableProxy === true) {
// setShowSnippets(true);
// router.refresh();
// // } else {
// // // If enableProxy is false or undefined, go directly to resource page
// // router.push(`/${orgId}/settings/resources/${id}`);
// // }
// }
// }
// } catch (e) {
// console.error(t("resourceErrorCreateMessage"), e);
// toast({
// variant: "destructive",
// title: t("resourceErrorCreate"),
// description: t("resourceErrorCreateMessageDescription")
// });
// }
// setCreateLoading(false);
const isValid = await form.trigger();
if (!isValid) return;
const payload = form.getValues();
console.log({
isValid,
payload
// json: parse(data.contents)
});
const res = await api
.put<
AxiosResponse<CreateBlueprintResponse>
>(`/org/${orgId}/blueprint/`, payload)
.catch((e) => {
toast({
variant: "destructive",
title: t("resourceErrorCreate"),
description: formatAxiosError(
e,
t("blueprintErrorCreateDescription")
)
});
});
if (res && res.status === 201) {
toast({
variant: "default",
title: "Success"
});
// const id = res.data.data.resourceId;
// const niceId = res.data.data.niceId;
// setNiceId(niceId);
// // Create targets if any exist
// if (targets.length > 0) {
// try {
// for (const target of targets) {
// const data: any = {
// ip: target.ip,
// port: target.port,
// method: target.method,
// enabled: target.enabled,
// siteId: target.siteId,
// hcEnabled: target.hcEnabled,
// hcPath: target.hcPath || null,
// hcMethod: target.hcMethod || null,
// hcInterval: target.hcInterval || null,
// hcTimeout: target.hcTimeout || null,
// hcHeaders: target.hcHeaders || null,
// hcScheme: target.hcScheme || null,
// hcHostname: target.hcHostname || null,
// hcPort: target.hcPort || null,
// hcFollowRedirects: target.hcFollowRedirects || null,
// hcStatus: target.hcStatus || null
// };
// // Only include path-related fields for HTTP resources
// if (isHttp) {
// data.path = target.path;
// data.pathMatchType = target.pathMatchType;
// data.rewritePath = target.rewritePath;
// data.rewritePathType = target.rewritePathType;
// data.priority = target.priority;
// }
// await api.put(`/resource/${id}/target`, data);
// }
// } catch (targetError) {
// console.error("Error creating targets:", targetError);
// toast({
// variant: "destructive",
// title: t("targetErrorCreate"),
// description: formatAxiosError(
// targetError,
// t("targetErrorCreateDescription")
// )
// });
// }
// }
// if (isHttp) {
// router.push(`/${orgId}/settings/resources/${niceId}`);
// } else {
// const tcpUdpData = tcpUdpForm.getValues();
// // Only show config snippets if enableProxy is explicitly true
// // if (tcpUdpData.enableProxy === true) {
// setShowSnippets(true);
// router.refresh();
// // } else {
// // // If enableProxy is false or undefined, go directly to resource page
// // router.push(`/${orgId}/settings/resources/${id}`);
// // }
// }
}
}
return (
<Form {...baseForm}>
<Form {...form}>
<form action={formAction} id="base-resource-form">
<SettingsContainer>
<SettingsSection>
@@ -184,18 +184,55 @@ export default function CreateBlueprintForm({}: CreateBlueprintFormProps) {
<SettingsSectionBody>
<SettingsSectionForm>
<FormField
control={baseForm.control}
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>{t("name")}</FormLabel>
<FormDescription>
{t("blueprintNameDescription")}
</FormDescription>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="contents"
render={({ field }) => (
<FormItem>
<FormLabel>
{t("contents")}
</FormLabel>
<FormDescription>
{t("blueprintNameDescription")}
{t(
"blueprintContentsDescription"
)}
</FormDescription>
<FormControl>
<div
className={cn(
"resize-y h-52 min-h-52 overflow-y-auto overflow-x-clip max-w-full"
)}
>
<Editor
className="w-full h-full max-w-full"
language="yaml"
theme="vs-dark"
options={{
minimap: {
enabled: false
}
}}
{...field}
/>
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
@@ -203,58 +240,9 @@ export default function CreateBlueprintForm({}: CreateBlueprintFormProps) {
</SettingsSectionBody>
</SettingsSection>
<SettingsSection>
<SettingsSectionHeader>
<SettingsSectionTitle>
{t("contents")}
</SettingsSectionTitle>
<SettingsSectionDescription>
{t("blueprintContentsDescription")}
</SettingsSectionDescription>
</SettingsSectionHeader>
<SettingsSectionBody>
<div
className={cn(
"resize-y h-52 min-h-52 overflow-y-auto overflow-x-clip max-w-full"
// "w-[80dvw] sm:w-[88dvw] md:w-[82dvw] lg:w-[70dvw] xl:w-[855px]"
)}
>
<Editor
className="w-full h-full max-w-full"
language="yaml"
// value={changedContents}
theme="vs-dark"
options={{
minimap: {
enabled: false
}
}}
// onChange={(value) => setChangedContents(value ?? "")}
/>
<textarea name="" id="" hidden />
</div>
</SettingsSectionBody>
</SettingsSection>
<div className="flex justify-end space-x-2 mt-8">
<Button
type="submit"
// onClick={async () => {
// // const isHttp = baseForm.watch("http");
// // const baseValid = await baseForm.trigger();
// // const settingsValid = isHttp
// // ? await httpForm.trigger()
// // : await tcpUdpForm.trigger();
// // console.log(httpForm.getValues());
// // if (baseValid && settingsValid) {
// // onSubmit();
// // }
// }}
loading={isSubmitting}
// disabled={!areAllTargetsValid()}
>
{t("resourceCreate")}
<Button type="submit" loading={isSubmitting}>
{t("actionApplyBlueprint")}
</Button>
</div>
</SettingsContainer>

4
src/lib/wait.ts Normal file
View File

@@ -0,0 +1,4 @@
export function wait(ms: number): Promise<void> {
// Wait for the specified amount of time
return new Promise((resolve) => setTimeout(resolve, ms));
}