🚧 add & validate blueprint yaml

messages/en-US.json

@@ -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",

package-lock.json

@@ -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"

package.json

@@ -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"

server/routers/blueprints/createAndApplyBlueprint.ts

@@ -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")
+        );
+    }
+}

server/routers/blueprints/index.ts

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

server/routers/blueprints/listBluePrints.ts

@@ -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,

server/routers/external.ts

@@ -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);

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

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

src/components/CreateBlueprintForm.tsx

@@ -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 isValid = await form.trigger();
-        // const baseData = baseForm.getValues();
+
-        // const isHttp = baseData.http;
+        if (!isValid) return;
-        // try {
+
-        //     const payload = {
+        const payload = form.getValues();
-        //         name: baseData.name,
+        console.log({
-        //         http: baseData.http,
+            isValid,
-        //     };
+            payload
-        //     let sanitizedSubdomain: string | undefined;
+            // json: parse(data.contents)
-        //     if (isHttp) {
+        });
-        //         const httpData = httpForm.getValues();
+        const res = await api
-        //         sanitizedSubdomain = httpData.subdomain
+            .put<
-        //             ? finalizeSubdomainSanitize(httpData.subdomain)
+                AxiosResponse<CreateBlueprintResponse>
-        //             : undefined;
+            >(`/org/${orgId}/blueprint/`, payload)
-        //         Object.assign(payload, {
+            .catch((e) => {
-        //             subdomain: sanitizedSubdomain
+                toast({
-        //                 ? toASCII(sanitizedSubdomain)
+                    variant: "destructive",
-        //                 : undefined,
+                    title: t("resourceErrorCreate"),
-        //             domainId: httpData.domainId,
+                    description: formatAxiosError(
-        //             protocol: "tcp"
+                        e,
-        //         });
+                        t("blueprintErrorCreateDescription")
-        //     } else {
+                    )
-        //         const tcpUdpData = tcpUdpForm.getValues();
+                });
-        //         Object.assign(payload, {
+            });
-        //             protocol: tcpUdpData.protocol,
+
-        //             proxyPort: tcpUdpData.proxyPort
+        if (res && res.status === 201) {
-        //             // enableProxy: tcpUdpData.enableProxy
+            toast({
-        //         });
+                variant: "default",
-        //     }
+                title: "Success"
-        //     const res = await api
+            });
-        //         .put<
+            // const id = res.data.data.resourceId;
-        //             AxiosResponse<Resource>
+            // const niceId = res.data.data.niceId;
-        //         >(`/org/${orgId}/resource/`, payload)
+            // setNiceId(niceId);
-        //         .catch((e) => {
+            // // Create targets if any exist
-        //             toast({
+            // if (targets.length > 0) {
-        //                 variant: "destructive",
+            //     try {
-        //                 title: t("resourceErrorCreate"),
+            //         for (const target of targets) {
-        //                 description: formatAxiosError(
+            //             const data: any = {
-        //                     e,
+            //                 ip: target.ip,
-        //                     t("resourceErrorCreateDescription")
+            //                 port: target.port,
-        //                 )
+            //                 method: target.method,
-        //             });
+            //                 enabled: target.enabled,
-        //         });
+            //                 siteId: target.siteId,
-        //     if (res && res.status === 201) {
+            //                 hcEnabled: target.hcEnabled,
-        //         const id = res.data.data.resourceId;
+            //                 hcPath: target.hcPath || null,
-        //         const niceId = res.data.data.niceId;
+            //                 hcMethod: target.hcMethod || null,
-        //         setNiceId(niceId);
+            //                 hcInterval: target.hcInterval || null,
-        //         // Create targets if any exist
+            //                 hcTimeout: target.hcTimeout || null,
-        //         if (targets.length > 0) {
+            //                 hcHeaders: target.hcHeaders || null,
-        //             try {
+            //                 hcScheme: target.hcScheme || null,
-        //                 for (const target of targets) {
+            //                 hcHostname: target.hcHostname || null,
-        //                     const data: any = {
+            //                 hcPort: target.hcPort || null,
-        //                         ip: target.ip,
+            //                 hcFollowRedirects: target.hcFollowRedirects || null,
-        //                         port: target.port,
+            //                 hcStatus: target.hcStatus || null
-        //                         method: target.method,
+            //             };
-        //                         enabled: target.enabled,
+            //             // Only include path-related fields for HTTP resources
-        //                         siteId: target.siteId,
+            //             if (isHttp) {
-        //                         hcEnabled: target.hcEnabled,
+            //                 data.path = target.path;
-        //                         hcPath: target.hcPath || null,
+            //                 data.pathMatchType = target.pathMatchType;
-        //                         hcMethod: target.hcMethod || null,
+            //                 data.rewritePath = target.rewritePath;
-        //                         hcInterval: target.hcInterval || null,
+            //                 data.rewritePathType = target.rewritePathType;
-        //                         hcTimeout: target.hcTimeout || null,
+            //                 data.priority = target.priority;
-        //                         hcHeaders: target.hcHeaders || null,
+            //             }
-        //                         hcScheme: target.hcScheme || null,
+            //             await api.put(`/resource/${id}/target`, data);
-        //                         hcHostname: target.hcHostname || null,
+            //         }
-        //                         hcPort: target.hcPort || null,
+            //     } catch (targetError) {
-        //                         hcFollowRedirects:
+            //         console.error("Error creating targets:", targetError);
-        //                             target.hcFollowRedirects || null,
+            //         toast({
-        //                         hcStatus: target.hcStatus || null
+            //             variant: "destructive",
-        //                     };
+            //             title: t("targetErrorCreate"),
-        //                     // Only include path-related fields for HTTP resources
+            //             description: formatAxiosError(
-        //                     if (isHttp) {
+            //                 targetError,
-        //                         data.path = target.path;
+            //                 t("targetErrorCreateDescription")
-        //                         data.pathMatchType = target.pathMatchType;
+            //             )
-        //                         data.rewritePath = target.rewritePath;
+            //         });
-        //                         data.rewritePathType = target.rewritePathType;
+            //     }
-        //                         data.priority = target.priority;
+            // }
-        //                     }
+            // if (isHttp) {
-        //                     await api.put(`/resource/${id}/target`, data);
+            //     router.push(`/${orgId}/settings/resources/${niceId}`);
-        //                 }
+            // } else {
-        //             } catch (targetError) {
+            //     const tcpUdpData = tcpUdpForm.getValues();
-        //                 console.error("Error creating targets:", targetError);
+            //     // Only show config snippets if enableProxy is explicitly true
-        //                 toast({
+            //     // if (tcpUdpData.enableProxy === true) {
-        //                     variant: "destructive",
+            //     setShowSnippets(true);
-        //                     title: t("targetErrorCreate"),
+            //     router.refresh();
-        //                     description: formatAxiosError(
+            //     // } else {
-        //                         targetError,
+            //     //     // If enableProxy is false or undefined, go directly to resource page
-        //                         t("targetErrorCreateDescription")
+            //     //     router.push(`/${orgId}/settings/resources/${id}`);
-        //                     )
+            //     // }
-        //                 });
+            // }
-        //             }
+        }
-        //         }
-        //         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);
     }
     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
+                        <Button type="submit" loading={isSubmitting}>
-                            type="submit"
+                            {t("actionApplyBlueprint")}
-                            // 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>
                     </div>
                 </SettingsContainer>

src/lib/wait.ts

@@ -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));
+}