feat: add enviroment variables editor to traefik

apps/dokploy/components/dashboard/settings/web-server/edit-traefik-env.tsx

@@ -0,0 +1,146 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { CodeEditor } from "@/components/shared/code-editor";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const schema = z.object({
+	env: z.string(),
+});
+
+type Schema = z.infer<typeof schema>;
+
+interface Props {
+	children?: React.ReactNode;
+}
+
+export const EditTraefikEnv = ({ children }: Props) => {
+	const [canEdit, setCanEdit] = useState(true);
+
+	const { data } = api.settings.readTraefikEnv.useQuery();
+
+	const { mutateAsync, isLoading, error, isError } =
+		api.settings.writeTraefikEnv.useMutation();
+
+	const form = useForm<Schema>({
+		defaultValues: {
+			env: data || "",
+		},
+		disabled: canEdit,
+		resolver: zodResolver(schema),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				env: data || "",
+			});
+		}
+	}, [form, form.reset, data]);
+
+	const onSubmit = async (data: Schema) => {
+		await mutateAsync(data.env)
+			.then(async () => {
+				toast.success("Traefik Env Updated");
+			})
+			.catch(() => {
+				toast.error("Error to update the traefik env");
+			});
+	};
+
+	return (
+		<Dialog>
+			<DialogTrigger asChild>{children}</DialogTrigger>
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-4xl">
+				<DialogHeader>
+					<DialogTitle>Update Traefik Env</DialogTitle>
+					<DialogDescription>Update the traefik env</DialogDescription>
+				</DialogHeader>
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+
+				<Form {...form}>
+					<form
+						id="hook-form-update-server-traefik-config"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="w-full space-y-4 relative overflow-auto"
+					>
+						<div className="flex flex-col">
+							<FormField
+								control={form.control}
+								name="env"
+								render={({ field }) => (
+									<FormItem className="relative">
+										<FormLabel>Env</FormLabel>
+										<FormControl>
+											<CodeEditor
+												language="properties"
+												wrapperClassName="h-[35rem] font-mono"
+												placeholder={`TRAEFIK_CERTIFICATESRESOLVERS_LETSENCRYPT_ACME_EMAIL=test@localhost.com
+TRAEFIK_CERTIFICATESRESOLVERS_LETSENCRYPT_STORAGE=/etc/dokploy/traefik/dynamic/acme.json
+TRAEFIK_CERTIFICATESRESOLVERS_LETSENCRYPT_HTTP_CHALLENGE=true
+TRAEFIK_CERTIFICATESRESOLVERS_LETSENCRYPT_HTTP_CHALLENGE_PRETTY=true
+TRAEFIK_CERTIFICATESRESOLVERS_LETSENCRYPT_HTTP_CHALLENGE_ENTRYPOINT=web
+TRAEFIK_CERTIFICATESRESOLVERS_LETSENCRYPT_HTTP_CHALLENGE_DNS_CHALLENGE=true
+TRAEFIK_CERTIFICATESRESOLVERS_LETSENCRYPT_HTTP_CHALLENGE_DNS_PROVIDER=cloudflare
+                                                    `}
+												{...field}
+											/>
+										</FormControl>
+
+										<pre>
+											<FormMessage />
+										</pre>
+										<div className="flex justify-end absolute z-50 right-6 top-0">
+											<Button
+												className="shadow-sm"
+												variant="secondary"
+												type="button"
+												onClick={async () => {
+													setCanEdit(!canEdit);
+												}}
+											>
+												{canEdit ? "Unlock" : "Lock"}
+											</Button>
+										</div>
+									</FormItem>
+								)}
+							/>
+						</div>
+					</form>
+
+					<DialogFooter>
+						<Button
+							isLoading={isLoading}
+							disabled={canEdit}
+							form="hook-form-update-server-traefik-config"
+							type="submit"
+						>
+							Update
+						</Button>
+					</DialogFooter>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/server/api/routers/settings.ts

@@ -15,6 +15,7 @@ import {
 	cleanUpSystemPrune,
 	cleanUpUnusedImages,
 	cleanUpUnusedVolumes,
+	prepareEnvironmentVariables,
 	startService,
 	stopService,
 } from "@/server/utils/docker/utils";
@@ -47,6 +48,7 @@ import {
 } from "../services/settings";
 import { canAccessToTraefikFiles } from "../services/user";
 import { adminProcedure, createTRPCRouter, protectedProcedure } from "../trpc";
+import { z } from "zod";
 
 export const settingsRouter = createTRPCRouter({
 	reloadServer: adminProcedure.mutation(async () => {
@@ -69,7 +71,9 @@ export const settingsRouter = createTRPCRouter({
 	toggleDashboard: adminProcedure
 		.input(apiEnableDashboard)
 		.mutation(async ({ input }) => {
-			await initializeTraefik(input.enableDashboard);
+			await initializeTraefik({
+				enableDashboard: input.enableDashboard,
+			});
 			return true;
 		}),
 
@@ -309,4 +313,37 @@ export const settingsRouter = createTRPCRouter({
 			return openApiDocument;
 		},
 	),
+	readTraefikEnv: adminProcedure.query(async () => {
+		const { stdout } = await execAsync(
+			"docker service inspect --format='{{range .Spec.TaskTemplate.ContainerSpec.Env}}{{println .}}{{end}}' dokploy-traefik",
+		);
+
+		return stdout.trim();
+	}),
+
+	writeTraefikEnv: adminProcedure
+		.input(z.string())
+		.mutation(async ({ input }) => {
+			const envs = prepareEnvironmentVariables(input);
+			await initializeTraefik({
+				env: envs,
+			});
+
+			return true;
+		}),
+	haveTraefikDashboardPortEnabled: adminProcedure.query(async () => {
+		const { stdout } = await execAsync(
+			"docker service inspect --format='{{json .Endpoint.Ports}}' dokploy-traefik",
+		);
+
+		const parsed: any[] = JSON.parse(stdout.trim());
+
+		for (const port of parsed) {
+			if (port.PublishedPort === 8080) {
+				return true;
+			}
+		}
+
+		return false;
+	}),
 });

apps/dokploy/server/setup/traefik-setup.ts

@@ -11,7 +11,15 @@ const TRAEFIK_SSL_PORT =
 	Number.parseInt(process.env.TRAEFIK_SSL_PORT ?? "", 10) || 443;
 const TRAEFIK_PORT = Number.parseInt(process.env.TRAEFIK_PORT ?? "", 10) || 80;
 
-export const initializeTraefik = async (enableDashboard = false) => {
+interface TraefikOptions {
+	enableDashboard?: boolean;
+	env?: string[];
+}
+
+export const initializeTraefik = async ({
+	enableDashboard = false,
+	env = [],
+}: TraefikOptions = {}) => {
 	const imageName = "traefik:v2.5";
 	const containerName = "dokploy-traefik";
 	const settings: CreateServiceOptions = {
@@ -19,6 +27,7 @@ export const initializeTraefik = async (enableDashboard = false) => {
 		TaskTemplate: {
 			ContainerSpec: {
 				Image: imageName,
+				Env: env,
 				Mounts: [
 					{
 						Type: "bind",