Docker compose support (#111)

* feat(WIP): compose implementation * feat: add volumes, networks, services name hash generate * feat: add compose config test unique * feat: add tests for each unique config * feat: implement lodash for docker compose parsing * feat: add tests for generating compose file * refactor: implement logs docker compose * refactor: composeFile set not empty * feat: implement providers for compose deployments * feat: add Files volumes to compose * feat: add stop compose button * refactor: change strategie of building compose * feat: create .env file in composepath * refactor: simplify git and github function * chore: update deps * refactor: update migrations and add badge to recognize compose type * chore: update lock yaml * refactor: use code editor * feat: add monitoring for app types * refactor: reset stats on change appName * refactor: add option to clean monitoring folder * feat: show current command that will run * feat: add prefix * fix: add missing types * refactor: add docker provider and expose by default as false * refactor: customize error page * refactor: unified deployments to be a single one * feat: add vitest to ci/cd * revert: back to initial version * refactor: add maxconcurrency vitest * refactor: add pool forks to vitest * feat: add pocketbase template * fix: update path resolution compose * removed * feat: add template pocketbase * feat: add pocketbase template * feat: add support button * feat: add plausible template * feat: add calcom template * feat: add version to each template * feat: add code editor to enviroment variables and swarm settings json * refactor: add loader when download the image * fix: use base64 to generate keys plausible * feat: add recognized domain names by enviroment compose * refactor: show alert to redeploy in each card advanced tab * refactor: add validation to prevent create compose if not have permissions * chore: add templates section to contributing * chore: add example contributing
2025-06-26 18:27:59 +00:00 · 2024-06-02 15:26:28 -06:00
parent 1df6db738e
commit 8f9d21c0f8
139 changed files with 16513 additions and 1208 deletions
--- a/components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx
+++ b/components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx
@@ -24,7 +24,6 @@ import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import { Textarea } from "@/components/ui/textarea";
 import { HelpCircle, Settings } from "lucide-react";
 import {
 	Tooltip,
@@ -32,6 +31,7 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { CodeEditor } from "@/components/shared/code-editor";

 const HealthCheckSwarmSchema = z
 	.object({
@@ -320,8 +320,8 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 									</TooltipProvider>

 									<FormControl>
-										<Textarea
-											className="font-mono [field-sizing:content;] min-h-[11.2rem]"
+										<CodeEditor
+											language="json"
 											placeholder={`{
 	"Test" : ["CMD-SHELL", "curl -f http://localhost:3000/health"],
 	"Interval" : 10000,
@@ -329,6 +329,7 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 	"StartPeriod" : 10000,
 	"Retries" : 10
 }`}
+											className="h-[12rem] font-mono"
 											{...field}
 											value={field?.value || ""}
 										/>
@@ -374,14 +375,15 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 									</TooltipProvider>

 									<FormControl>
-										<Textarea
-											className="font-mono [field-sizing:content;]  min-h-[11.2rem]"
+										<CodeEditor
+											language="json"
 											placeholder={`{
 	"Condition" : "on-failure",
 	"Delay" : 10000,
 	"MaxAttempts" : 10,
 	"Window" : 10000
 }                                                  `}
+											className="h-[12rem] font-mono"
 											{...field}
 											value={field?.value || ""}
 										/>
@@ -432,8 +434,8 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 									</TooltipProvider>

 									<FormControl>
-										<Textarea
-											className="font-mono [field-sizing:content;]  min-h-[18.7rem]"
+										<CodeEditor
+											language="json"
 											placeholder={`{
 	"Constraints" : ["node.role==manager"],
 	"Preferences" : [{
@@ -447,6 +449,7 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 		"OS" : "linux"
 	}]
 }                                                `}
+											className="h-[21rem] font-mono"
 											{...field}
 											value={field?.value || ""}
 										/>
@@ -494,8 +497,8 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 									</TooltipProvider>

 									<FormControl>
-										<Textarea
-											className="font-mono [field-sizing:content;] min-h-[18.7rem]"
+										<CodeEditor
+											language="json"
 											placeholder={`{
 	"Parallelism" : 1,
 	"Delay" : 10000,
@@ -504,6 +507,7 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 	"MaxFailureRatio" : 10,
 	"Order" : "start-first"
 }`}
+											className="h-[21rem] font-mono"
 											{...field}
 											value={field?.value || ""}
 										/>
@@ -551,8 +555,8 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 									</TooltipProvider>

 									<FormControl>
-										<Textarea
-											className="font-mono [field-sizing:content;] min-h-[14.8rem]"
+										<CodeEditor
+											language="json"
 											placeholder={`{
 	"Parallelism" : 1,
 	"Delay" : 10000,
@@ -561,6 +565,7 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 	"MaxFailureRatio" : 10,
 	"Order" : "start-first"
 }`}
+											className="h-[17rem] font-mono"
 											{...field}
 											value={field?.value || ""}
 										/>
@@ -611,8 +616,8 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 									</TooltipProvider>

 									<FormControl>
-										<Textarea
-											className="font-mono [field-sizing:content;] min-h-[14.8rem]"
+										<CodeEditor
+											language="json"
 											placeholder={`{
 	"Replicated" : {
 		"Replicas" : 1
@@ -624,6 +629,7 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 	},
 	"GlobalJob" : {}
 }`}
+											className="h-[17rem] font-mono"
 											{...field}
 											value={field?.value || ""}
 										/>
@@ -668,8 +674,8 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 										</Tooltip>
 									</TooltipProvider>
 									<FormControl>
-										<Textarea
-											className="font-mono [field-sizing:content;] min-h-[18.5rem]"
+										<CodeEditor
+											language="json"
 											placeholder={`[
 {
 	"Target" : "dokploy-network",
@@ -682,6 +688,7 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 	}
 }
 ]`}
+											className="h-[20rem] font-mono"
 											{...field}
 											value={field?.value || ""}
 										/>
@@ -722,12 +729,13 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 										</Tooltip>
 									</TooltipProvider>
 									<FormControl>
-										<Textarea
-											className="font-mono [field-sizing:content;] min-h-[18.5rem]"
+										<CodeEditor
+											language="json"
 											placeholder={`{
 	"com.example.app.name" : "my-app",
 	"com.example.app.version" : "1.0.0"
 }`}
+											className="h-[20rem] font-mono"
 											{...field}
 											value={field?.value || ""}
 										/>
--- a/components/dashboard/application/advanced/cluster/show-cluster-settings.tsx
+++ b/components/dashboard/application/advanced/cluster/show-cluster-settings.tsx
@@ -34,6 +34,7 @@ import {
 import Link from "next/link";
 import { Server } from "lucide-react";
 import { AddSwarmSettings } from "./modify-swarm-settings";
+import { AlertBlock } from "@/components/shared/alert-block";

 interface Props {
 	applicationId: string;
@@ -106,6 +107,10 @@ export const ShowClusterSettings = ({ applicationId }: Props) => {
 				<AddSwarmSettings applicationId={applicationId} />
 			</CardHeader>
 			<CardContent className="flex flex-col gap-4">
+				<AlertBlock type="info">
+					Please remember to click Redeploy after modify the cluster settings to
+					apply the changes.
+				</AlertBlock>
 				<Form {...form}>
 					<form
 						onSubmit={form.handleSubmit(onSubmit)}
--- a/components/dashboard/application/advanced/ports/show-port.tsx
+++ b/components/dashboard/application/advanced/ports/show-port.tsx
@@ -11,6 +11,7 @@ import { Rss } from "lucide-react";
 import { AddPort } from "./add-port";
 import { DeletePort } from "./delete-port";
 import { UpdatePort } from "./update-port";
+import { AlertBlock } from "@/components/shared/alert-block";
 interface Props {
 	applicationId: string;
 }
@@ -47,7 +48,11 @@ export const ShowPorts = ({ applicationId }: Props) => {
 						<AddPort applicationId={applicationId}>Add Port</AddPort>
 					</div>
 				) : (
-					<div className="flex flex-col pt-2">
+					<div className="flex flex-col pt-2 gap-4">
+						<AlertBlock type="info">
+							Please remember to click Redeploy after adding, editing, or
+							deleting the ports to apply the changes.
+						</AlertBlock>
 						<div className="flex flex-col gap-6">
 							{data?.ports.map((port) => (
 								<div key={port.portId}>
--- a/components/dashboard/application/advanced/show-application-advanced-settings.tsx
+++ b/components/dashboard/application/advanced/show-application-advanced-settings.tsx
@@ -21,6 +21,7 @@ import React, { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { AlertBlock } from "@/components/shared/alert-block";

 const addResourcesApplication = z.object({
 	memoryReservation: z.number().nullable().optional(),
@@ -84,6 +85,10 @@ export const ShowApplicationResources = ({ applicationId }: Props) => {
 				</CardDescription>
 			</CardHeader>
 			<CardContent className="flex flex-col gap-4">
+				<AlertBlock type="info">
+					Please remember to click Redeploy after modify the resources to apply
+					the changes.
+				</AlertBlock>
 				<Form {...form}>
 					<form
 						id="hook-form"
--- a/components/dashboard/application/advanced/volumes/add-volumes.tsx
+++ b/components/dashboard/application/advanced/volumes/add-volumes.tsx
@@ -27,6 +27,7 @@ import { PlusIcon } from "lucide-react";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
 import { toast } from "sonner";
+import { cn } from "@/lib/utils";
 interface Props {
 	serviceId: string;
 	serviceType:
@@ -36,7 +37,8 @@ interface Props {
 		| "mongo"
 		| "redis"
 		| "mysql"
-		| "mariadb";
+		| "mariadb"
+		| "compose";
 	refetch: () => void;
 	children?: React.ReactNode;
 }
@@ -77,7 +79,7 @@ export const AddVolumes = ({
 	const { mutateAsync } = api.mounts.create.useMutation();
 	const form = useForm<AddMount>({
 		defaultValues: {
-			type: "bind",
+			type: serviceType === "compose" ? "file" : "bind",
 			hostPath: "",
 			mountPath: "",
 		},
@@ -176,41 +178,52 @@ export const AddVolumes = ({
 											defaultValue={field.value}
 											className="grid w-full grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4"
 										>
-											<FormItem className="flex items-center space-x-3 space-y-0">
-												<FormControl className="w-full">
-													<div>
-														<RadioGroupItem
-															value="bind"
-															id="bind"
-															className="peer sr-only"
-														/>
-														<Label
-															htmlFor="bind"
-															className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
-														>
-															Bind Mount
-														</Label>
-													</div>
-												</FormControl>
-											</FormItem>
-											<FormItem className="flex items-center space-x-3 space-y-0">
-												<FormControl className="w-full">
-													<div>
-														<RadioGroupItem
-															value="volume"
-															id="volume"
-															className="peer sr-only"
-														/>
-														<Label
-															htmlFor="volume"
-															className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
-														>
-															Volume Mount
-														</Label>
-													</div>
-												</FormControl>
-											</FormItem>
-											<FormItem className="flex items-center space-x-3 space-y-0">
+											{serviceType !== "compose" && (
+												<FormItem className="flex items-center space-x-3 space-y-0">
+													<FormControl className="w-full">
+														<div>
+															<RadioGroupItem
+																value="bind"
+																id="bind"
+																className="peer sr-only"
+															/>
+															<Label
+																htmlFor="bind"
+																className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
+															>
+																Bind Mount
+															</Label>
+														</div>
+													</FormControl>
+												</FormItem>
+											)}
+
+											{serviceType !== "compose" && (
+												<FormItem className="flex items-center space-x-3 space-y-0">
+													<FormControl className="w-full">
+														<div>
+															<RadioGroupItem
+																value="volume"
+																id="volume"
+																className="peer sr-only"
+															/>
+															<Label
+																htmlFor="volume"
+																className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
+															>
+																Volume Mount
+															</Label>
+														</div>
+													</FormControl>
+												</FormItem>
+											)}
+
+											<FormItem
+												className={cn(
+													serviceType === "compose" && "col-span-3",
+													"flex items-center space-x-3 space-y-0",
+												)}
+											>
 												<FormControl className="w-full">
 													<div>
 														<RadioGroupItem
--- a/components/dashboard/application/advanced/volumes/show-volumes.tsx
+++ b/components/dashboard/application/advanced/volumes/show-volumes.tsx
@@ -10,6 +10,8 @@ import { api } from "@/utils/api";
 import { AlertTriangle, Package } from "lucide-react";
 import { AddVolumes } from "./add-volumes";
 import { DeleteVolume } from "./delete-volume";
+import { UpdateVolume } from "./update-volume";
+import { AlertBlock } from "@/components/shared/alert-block";
 interface Props {
 	applicationId: string;
 }
@@ -59,15 +61,12 @@ export const ShowVolumes = ({ applicationId }: Props) => {
 						</AddVolumes>
 					</div>
 				) : (
-					<div className="flex flex-col pt-2">
-						<div className="flex flex-col sm:flex-row items-center gap-4 rounded-lg bg-yellow-50 p-2 dark:bg-yellow-950">
-							<AlertTriangle className="text-yellow-600 size-5 sm:size-8 dark:text-yellow-400" />
-							<span className="text-sm text-yellow-600 dark:text-yellow-400">
-								Please remember to click Redeploy after adding, editing, or
-								deleting a mount to apply the changes.
-							</span>
-						</div>
-						<div className="flex flex-col gap-6 pt-6">
+					<div className="flex flex-col pt-2 gap-4">
+						<AlertBlock type="info">
+							Please remember to click Redeploy after adding, editing, or
+							deleting a mount to apply the changes.
+						</AlertBlock>
+						<div className="flex flex-col gap-6">
 							{data?.mounts.map((mount) => (
 								<div key={mount.mountId}>
 									<div
@@ -114,7 +113,12 @@ export const ShowVolumes = ({ applicationId }: Props) => {
 												</span>
 											</div>
 										</div>
-										<div>
+										<div className="flex flex-row gap-1">
+											<UpdateVolume
+												mountId={mount.mountId}
+												type={mount.type}
+												refetch={refetch}
+											/>
 											<DeleteVolume mountId={mount.mountId} refetch={refetch} />
 										</div>
 									</div>
--- a/components/dashboard/application/advanced/volumes/update-volume.tsx
+++ b/components/dashboard/application/advanced/volumes/update-volume.tsx
@@ -0,0 +1,263 @@
+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 { Input } from "@/components/ui/input";
+import { api } from "@/utils/api";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Pencil } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { Textarea } from "@/components/ui/textarea";
+
+const mountSchema = z.object({
+	mountPath: z.string().min(1, "Mount path required"),
+});
+
+const mySchema = z.discriminatedUnion("type", [
+	z
+		.object({
+			type: z.literal("bind"),
+			hostPath: z.string().min(1, "Host path required"),
+		})
+		.merge(mountSchema),
+	z
+		.object({
+			type: z.literal("volume"),
+			volumeName: z.string().min(1, "Volume name required"),
+		})
+		.merge(mountSchema),
+	z
+		.object({
+			type: z.literal("file"),
+			content: z.string().optional(),
+		})
+		.merge(mountSchema),
+]);
+
+type UpdateMount = z.infer<typeof mySchema>;
+
+interface Props {
+	mountId: string;
+	type: "bind" | "volume" | "file";
+	refetch: () => void;
+}
+
+export const UpdateVolume = ({ mountId, type, refetch }: Props) => {
+	const utils = api.useUtils();
+	const { data } = api.mounts.one.useQuery(
+		{
+			mountId,
+		},
+		{
+			enabled: !!mountId,
+		},
+	);
+
+	const { mutateAsync, isLoading, error, isError } =
+		api.mounts.update.useMutation();
+
+	const form = useForm<UpdateMount>({
+		defaultValues: {
+			type,
+			hostPath: "",
+			mountPath: "",
+		},
+		resolver: zodResolver(mySchema),
+	});
+
+	const typeForm = form.watch("type");
+
+	useEffect(() => {
+		if (data) {
+			if (typeForm === "bind") {
+				form.reset({
+					hostPath: data.hostPath || "",
+					mountPath: data.mountPath,
+					type: "bind",
+				});
+			} else if (typeForm === "volume") {
+				form.reset({
+					volumeName: data.volumeName || "",
+					mountPath: data.mountPath,
+					type: "volume",
+				});
+			} else if (typeForm === "file") {
+				form.reset({
+					content: data.content || "",
+					mountPath: data.mountPath,
+					type: "file",
+				});
+			}
+		}
+	}, [form, form.reset, data]);
+
+	const onSubmit = async (data: UpdateMount) => {
+		if (data.type === "bind") {
+			await mutateAsync({
+				hostPath: data.hostPath,
+				mountPath: data.mountPath,
+				type: data.type,
+				mountId,
+			})
+				.then(() => {
+					toast.success("Mount Update");
+				})
+				.catch(() => {
+					toast.error("Error to update the Bind mount");
+				});
+		} else if (data.type === "volume") {
+			await mutateAsync({
+				volumeName: data.volumeName,
+				mountPath: data.mountPath,
+				type: data.type,
+				mountId,
+			})
+				.then(() => {
+					toast.success("Mount Update");
+				})
+				.catch(() => {
+					toast.error("Error to update the Volume mount");
+				});
+		} else if (data.type === "file") {
+			await mutateAsync({
+				content: data.content,
+				mountPath: data.mountPath,
+				type: data.type,
+				mountId,
+			})
+				.then(() => {
+					toast.success("Mount Update");
+				})
+				.catch(() => {
+					toast.error("Error to update the File mount");
+				});
+		}
+		refetch();
+	};
+
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button variant="ghost" isLoading={isLoading}>
+					<Pencil className="size-4  text-muted-foreground" />
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>Update</DialogTitle>
+					<DialogDescription>Update the mount</DialogDescription>
+				</DialogHeader>
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+
+				<Form {...form}>
+					<form
+						id="hook-form-update-volume"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<div className="flex flex-col gap-4">
+							{type === "bind" && (
+								<FormField
+									control={form.control}
+									name="hostPath"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Host Path</FormLabel>
+											<FormControl>
+												<Input placeholder="Host Path" {...field} />
+											</FormControl>
+
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+							)}
+							{type === "volume" && (
+								<FormField
+									control={form.control}
+									name="volumeName"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Volume Name</FormLabel>
+											<FormControl>
+												<Input
+													placeholder="Volume Name"
+													{...field}
+													value={field.value || ""}
+												/>
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+							)}
+
+							{type === "file" && (
+								<FormField
+									control={form.control}
+									name="content"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Content</FormLabel>
+											<FormControl>
+												<FormControl>
+													<Textarea
+														placeholder="Any content"
+														className="h-64"
+														{...field}
+													/>
+												</FormControl>
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+							)}
+							<FormField
+								control={form.control}
+								name="mountPath"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Mount Path</FormLabel>
+										<FormControl>
+											<Input placeholder="Mount Path" {...field} />
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+						<DialogFooter>
+							<Button
+								isLoading={isLoading}
+								form="hook-form-update-volume"
+								type="submit"
+							>
+								Update
+							</Button>
+						</DialogFooter>
+					</form>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};
--- a/components/dashboard/application/environment/show.tsx
+++ b/components/dashboard/application/environment/show.tsx
@@ -20,6 +20,7 @@ import {
 import { api } from "@/utils/api";
 import { toast } from "sonner";
 import { Textarea } from "@/components/ui/textarea";
+import { CodeEditor } from "@/components/shared/code-editor";

 const addEnvironmentSchema = z.object({
 	environment: z.string(),
@@ -94,8 +95,11 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 								render={({ field }) => (
 									<FormItem className="w-full">
 										<FormControl>
-											<Textarea
-												placeholder="NODE_ENV=production"
+											<CodeEditor
+												language="properties"
+												placeholder={`NODE_ENV=production
+PORT=3000
+`}
 												className="h-96 font-mono"
 												{...field}
 											/>