Merge pull request #365 from Dokploy/31-are-there-any-plans-to-support-wildcard-dns-records

31 are there any plans to support wildcard dns records

apps/dokploy/components/dashboard/settings/web-server.tsx

@@ -22,6 +22,7 @@ import {
 import { api } from "@/utils/api";
 import { toast } from "sonner";
 import { DockerTerminalModal } from "./web-server/docker-terminal-modal";
+import { EditTraefikEnv } from "./web-server/edit-traefik-env";
 import { ShowMainTraefikConfig } from "./web-server/show-main-traefik-config";
 import { ShowModalLogs } from "./web-server/show-modal-logs";
 import { ShowServerMiddlewareConfig } from "./web-server/show-server-middleware-config";
@@ -67,6 +68,9 @@ export const WebServer = () => {
 	const { mutateAsync: updateDockerCleanup } =
 		api.settings.updateDockerCleanup.useMutation();
 
+	const { data: haveTraefikDashboardPortEnabled, refetch: refetchDashboard } =
+		api.settings.haveTraefikDashboardPortEnabled.useQuery();
+
 	return (
 		<Card className="rounded-lg w-full bg-transparent">
 			<CardHeader>
@@ -167,37 +171,38 @@ export const WebServer = () => {
 										<span>View Traefik config</span>
 									</DropdownMenuItem>
 								</ShowMainTraefikConfig>
+								<EditTraefikEnv>
+									<DropdownMenuItem
+										onSelect={(e) => e.preventDefault()}
+										className="w-full cursor-pointer space-x-3"
+									>
+										<span>Modify Env</span>
+									</DropdownMenuItem>
+								</EditTraefikEnv>
+
 								<DropdownMenuItem
 									onClick={async () => {
 										await toggleDashboard({
-											enableDashboard: true,
+											enableDashboard: !haveTraefikDashboardPortEnabled,
 										})
 											.then(async () => {
-												toast.success("Dashboard Enabled");
+												toast.success(
+													`${haveTraefikDashboardPortEnabled ? "Disabled" : "Enabled"} Dashboard`,
+												);
+												refetchDashboard();
 											})
 											.catch(() => {
-												toast.error("Error to enable Dashboard");
+												toast.error(
+													`${haveTraefikDashboardPortEnabled ? "Disabled" : "Enabled"} Dashboard`,
+												);
 											});
 									}}
 									className="w-full cursor-pointer space-x-3"
 								>
-									<span>Enable Dashboard</span>
-								</DropdownMenuItem>
-								<DropdownMenuItem
-									onClick={async () => {
-										await toggleDashboard({
-											enableDashboard: false,
-										})
-											.then(async () => {
-												toast.success("Dashboard Disabled");
-											})
-											.catch(() => {
-												toast.error("Error to disable Dashboard");
-											});
-									}}
-									className="w-full cursor-pointer space-x-3"
-								>
-									<span>Disable Dashboard</span>
+									<span>
+										{haveTraefikDashboardPortEnabled ? "Disable" : "Enable"}{" "}
+										Dashboard
+									</span>
 								</DropdownMenuItem>
 
 								<DockerTerminalModal appName="dokploy-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";
@@ -37,6 +38,7 @@ import {
 import { generateOpenApiDocument } from "@dokploy/trpc-openapi";
 import { TRPCError } from "@trpc/server";
 import { scheduleJob, scheduledJobs } from "node-schedule";
+import { z } from "zod";
 import { appRouter } from "../root";
 import { findAdmin, updateAdmin } from "../services/admin";
 import {
@@ -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",