Merge pull request #886 from DJKnaeckebrot/feature/delete-docker-volumes

feat: option to delete docker volumes on service deletion

apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx

@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import {
 	Dialog,
 	DialogContent,
@@ -5,11 +6,10 @@ import {
 	DialogHeader,
 	DialogTitle,
 } from "@/components/ui/dialog";
+import { Loader2 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { TerminalLine } from "../../docker/logs/terminal-line";
-import { LogLine, parseLogs } from "../../docker/logs/utils";
+import { type LogLine, parseLogs } from "../../docker/logs/utils";
-import { Badge } from "@/components/ui/badge";
-import { Loader2 } from "lucide-react";
 
 interface Props {
 	logPath: string | null;
@@ -24,7 +24,6 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 	const [autoScroll, setAutoScroll] = useState(true);
 	const scrollRef = useRef<HTMLDivElement>(null);
 
-
 	const scrollToBottom = () => {
 		if (autoScroll && scrollRef.current) {
 			scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
@@ -69,7 +68,6 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 		};
 	}, [logPath, open]);
 
-
 	useEffect(() => {
 		const logs = parseLogs(data);
 		setFilteredLogs(logs);
@@ -83,7 +81,6 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 		}
 	}, [filteredLogs, autoScroll]);
 
-
 	return (
 		<Dialog
 			open={open}
@@ -104,7 +101,10 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 				<DialogHeader>
 					<DialogTitle>Deployment</DialogTitle>
 					<DialogDescription>
-						See all the details of this deployment | <Badge variant="blank" className="text-xs">{filteredLogs.length} lines</Badge>
+						See all the details of this deployment |{" "}
+						<Badge variant="blank" className="text-xs">
+							{filteredLogs.length} lines
+						</Badge>
 					</DialogDescription>
 				</DialogHeader>
 
@@ -112,15 +112,13 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 					ref={scrollRef}
 					onScroll={handleScroll}
 					className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#fafafa] dark:bg-[#050506] rounded custom-logs-scrollbar"
-				>					{ 
+				>
-						filteredLogs.length > 0 ? filteredLogs.map((log: LogLine, index: number) => (
+					{" "}
-							<TerminalLine
+					{filteredLogs.length > 0 ? (
-								key={index}
+						filteredLogs.map((log: LogLine, index: number) => (
-								log={log}
+							<TerminalLine key={index} log={log} noTimestamp />
-								noTimestamp
+						))
-							/>
+					) : (
-						)) : 
-						(
 						<div className="flex justify-center items-center h-full text-muted-foreground">
 							<Loader2 className="h-6 w-6 animate-spin" />
 						</div>

apps/dokploy/components/dashboard/application/preview-deployments/show-preview-builds.tsx

@@ -26,7 +26,9 @@ export const ShowPreviewBuilds = ({ deployments, serverId }: Props) => {
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
-				<Button className="sm:w-auto w-full" size="sm" variant="outline">View Builds</Button>
+				<Button className="sm:w-auto w-full" size="sm" variant="outline">
+					View Builds
+				</Button>
 			</DialogTrigger>
 			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-5xl">
 				<DialogHeader>

apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx

@@ -1,7 +1,17 @@
-import React from "react";
+import { DateTooltip } from "@/components/shared/date-tooltip";
+import { DialogAction } from "@/components/shared/dialog-action";
+import { StatusTooltip } from "@/components/shared/status-tooltip";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
+import { api } from "@/utils/api";
 import {
 	Clock,
 	GitBranch,
@@ -10,21 +20,11 @@ import {
 	RocketIcon,
 } from "lucide-react";
 import Link from "next/link";
-import { ShowModalLogs } from "../../settings/web-server/show-modal-logs";
+import React from "react";
-import { DialogAction } from "@/components/shared/dialog-action";
-import { api } from "@/utils/api";
-import { ShowPreviewBuilds } from "./show-preview-builds";
-import { DateTooltip } from "@/components/shared/date-tooltip";
 import { toast } from "sonner";
-import { StatusTooltip } from "@/components/shared/status-tooltip";
+import { ShowModalLogs } from "../../settings/web-server/show-modal-logs";
 import { AddPreviewDomain } from "./add-preview-domain";
-import {
+import { ShowPreviewBuilds } from "./show-preview-builds";
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
 import { ShowPreviewSettings } from "./show-preview-settings";
 
 interface Props {
@@ -42,7 +42,7 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => {
 			{ applicationId },
 			{
 				enabled: !!applicationId,
-      }
+			},
 		);
 
 	const handleDeletePreviewDeployment = async (previewDeploymentId: string) => {
@@ -201,7 +201,7 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => {
 													description="Are you sure you want to delete this preview?"
 													onClick={() =>
 														handleDeletePreviewDeployment(
-                              previewDeployment.previewDeploymentId
+															previewDeployment.previewDeploymentId,
 														)
 													}
 												>

apps/dokploy/components/dashboard/application/preview-deployments/show-preview-settings.tsx

@@ -1,5 +1,3 @@
-import { api } from "@/utils/api";
-import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -20,12 +18,7 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { Input, NumberInput } from "@/components/ui/input";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
 import { Secrets } from "@/components/ui/secrets";
-import { toast } from "sonner";
-import { Switch } from "@/components/ui/switch";
 import {
 	Select,
 	SelectContent,
@@ -33,6 +26,13 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+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(),

apps/dokploy/components/dashboard/compose/delete-compose.tsx

@@ -1,5 +1,6 @@
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
 	Dialog,
 	DialogContent,
@@ -12,6 +13,7 @@ import {
 import {
 	Form,
 	FormControl,
+	FormDescription,
 	FormField,
 	FormItem,
 	FormLabel,
@@ -32,6 +34,7 @@ const deleteComposeSchema = z.object({
 	projectName: z.string().min(1, {
 		message: "Compose name is required",
 	}),
+	deleteVolumes: z.boolean(),
 });
 
 type DeleteCompose = z.infer<typeof deleteComposeSchema>;
@@ -51,6 +54,7 @@ export const DeleteCompose = ({ composeId }: Props) => {
 	const form = useForm<DeleteCompose>({
 		defaultValues: {
 			projectName: "",
+			deleteVolumes: false,
 		},
 		resolver: zodResolver(deleteComposeSchema),
 	});
@@ -58,7 +62,8 @@ export const DeleteCompose = ({ composeId }: Props) => {
 	const onSubmit = async (formData: DeleteCompose) => {
 		const expectedName = `${data?.name}/${data?.appName}`;
 		if (formData.projectName === expectedName) {
-			await mutateAsync({ composeId })
+			const { deleteVolumes } = formData;
+			await mutateAsync({ composeId, deleteVolumes })
 				.then((result) => {
 					push(`/dashboard/project/${result?.projectId}`);
 					toast.success("Compose deleted successfully");
@@ -133,6 +138,27 @@ export const DeleteCompose = ({ composeId }: Props) => {
 									</FormItem>
 								)}
 							/>
+							<FormField
+								control={form.control}
+								name="deleteVolumes"
+								render={({ field }) => (
+									<FormItem>
+										<div className="flex items-center">
+											<FormControl>
+												<Checkbox
+													checked={field.value}
+													onCheckedChange={field.onChange}
+												/>
+											</FormControl>
+
+											<FormLabel className="ml-2">
+												Delete volumes associated with this compose
+											</FormLabel>
+										</div>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
 						</form>
 					</Form>
 				</div>

apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx

@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import {
 	Dialog,
 	DialogContent,
@@ -5,12 +6,10 @@ import {
 	DialogHeader,
 	DialogTitle,
 } from "@/components/ui/dialog";
+import { Loader2 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { TerminalLine } from "../../docker/logs/terminal-line";
-import { LogLine, parseLogs } from "../../docker/logs/utils";
+import { type LogLine, parseLogs } from "../../docker/logs/utils";
-import { Badge } from "@/components/ui/badge";
-import { Loader2 } from "lucide-react";
-
 
 interface Props {
 	logPath: string | null;
@@ -44,7 +43,6 @@ export const ShowDeploymentCompose = ({
 		setAutoScroll(isAtBottom);
 	};
 
-	
 	useEffect(() => {
 		if (!open || !logPath) return;
 
@@ -76,7 +74,6 @@ export const ShowDeploymentCompose = ({
 		};
 	}, [logPath, open]);
 
-
 	useEffect(() => {
 		const logs = parseLogs(data);
 		setFilteredLogs(logs);
@@ -110,7 +107,10 @@ export const ShowDeploymentCompose = ({
 				<DialogHeader>
 					<DialogTitle>Deployment</DialogTitle>
 					<DialogDescription>
-					See all the details of this deployment | <Badge variant="blank" className="text-xs">{filteredLogs.length} lines</Badge>
+						See all the details of this deployment |{" "}
+						<Badge variant="blank" className="text-xs">
+							{filteredLogs.length} lines
+						</Badge>
 					</DialogDescription>
 				</DialogHeader>
 
@@ -119,22 +119,15 @@ export const ShowDeploymentCompose = ({
 					onScroll={handleScroll}
 					className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#fafafa] dark:bg-[#050506] rounded custom-logs-scrollbar"
 				>
-						
+					{filteredLogs.length > 0 ? (
-						
+						filteredLogs.map((log: LogLine, index: number) => (
-					{ 
+							<TerminalLine key={index} log={log} noTimestamp />
-						filteredLogs.length > 0 ? filteredLogs.map((log: LogLine, index: number) => (
+						))
-							<TerminalLine
+					) : (
-								key={index}
-								log={log}
-								noTimestamp
-							/>
-						)) : 
-						(
 						<div className="flex justify-center items-center h-full text-muted-foreground">
 							<Loader2 className="h-6 w-6 animate-spin" />
 						</div>
-						)
+					)}
-					}
 				</div>
 			</DialogContent>
 		</Dialog>

apps/dokploy/components/dashboard/compose/general/deploy-compose.tsx

@@ -53,7 +53,7 @@ export const DeployCompose = ({ composeId }: Props) => {
 							})
 								.then(async () => {
 									router.push(
-										`/dashboard/project/${data?.project.projectId}/services/compose/${composeId}?tab=deployments`
+										`/dashboard/project/${data?.project.projectId}/services/compose/${composeId}?tab=deployments`,
 									);
 								})
 								.catch(() => {

apps/dokploy/components/dashboard/projects/show.tsx

@@ -47,7 +47,7 @@ export const ShowProjects = () => {
 		},
 		{
 			enabled: !!auth?.id && auth?.rol === "user",
-    }
+		},
 	);
 	const { mutateAsync } = api.project.remove.useMutation();
 
@@ -87,7 +87,7 @@ export const ShowProjects = () => {
 					];
 
 					const renderDomainsDropdown = (
-            item: typeof project.compose | typeof project.applications
+						item: typeof project.compose | typeof project.applications,
 					) =>
 						item[0] ? (
 							<DropdownMenuGroup>
@@ -247,12 +247,12 @@ export const ShowProjects = () => {
 																					})
 																						.then(() => {
 																							toast.success(
-                                                "Project delete succesfully"
+																								"Project delete succesfully",
 																							);
 																						})
 																						.catch(() => {
 																							toast.error(
-                                                "Error to delete this project"
+																								"Error to delete this project",
 																							);
 																						})
 																						.finally(() => {

apps/dokploy/components/dashboard/search-command.tsx

@@ -1,23 +1,5 @@
 "use client";
 
-import React from "react";
-import {
-  Command,
-  CommandEmpty,
-  CommandList,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandDialog,
-  CommandSeparator,
-} from "@/components/ui/command";
-import { useRouter } from "next/router";
-import {
-  extractServices,
-  type Services,
-} from "@/pages/dashboard/project/[projectId]";
-import type { findProjectById } from "@dokploy/server/services/project";
-import { BookIcon, CircuitBoard, GlobeIcon } from "lucide-react";
 import {
 	MariadbIcon,
 	MongodbIcon,
@@ -25,8 +7,26 @@ import {
 	PostgresqlIcon,
 	RedisIcon,
 } from "@/components/icons/data-tools-icons";
-import { api } from "@/utils/api";
 import { Badge } from "@/components/ui/badge";
+import {
+	Command,
+	CommandDialog,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+	CommandSeparator,
+} from "@/components/ui/command";
+import {
+	type Services,
+	extractServices,
+} from "@/pages/dashboard/project/[projectId]";
+import { api } from "@/utils/api";
+import type { findProjectById } from "@dokploy/server/services/project";
+import { BookIcon, CircuitBoard, GlobeIcon } from "lucide-react";
+import { useRouter } from "next/router";
+import React from "react";
 import { StatusTooltip } from "../shared/status-tooltip";
 
 type Project = Awaited<ReturnType<typeof findProjectById>>;
@@ -89,7 +89,7 @@ export const SearchCommand = () => {
 										key={application.id}
 										onSelect={() => {
 											router.push(
-                        `/dashboard/project/${project.projectId}/services/${application.type}/${application.id}`
+												`/dashboard/project/${project.projectId}/services/${application.type}/${application.id}`,
 											);
 											setOpen(false);
 										}}

apps/dokploy/components/dashboard/settings/notifications/show-notifications.tsx

@@ -72,7 +72,9 @@ export const ShowNotifications = () => {
 													{notification.name}
 												</span>
 												<span className="text-xs font-medium text-muted-foreground">
-								  	{notification.notificationType?.[0]?.toUpperCase() + notification.notificationType?.slice(1)} notification
+													{notification.notificationType?.[0]?.toUpperCase() +
+														notification.notificationType?.slice(1)}{" "}
+													notification
 												</span>
 											</div>
 										</div>

apps/dokploy/components/dashboard/settings/notifications/update-notification.tsx

@@ -218,9 +218,11 @@ export const UpdateNotification = ({ notificationId }: Props) => {
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger className="" asChild>
-				<Button variant="ghost"
+				<Button
+					variant="ghost"
 					size="icon"
-                        className="h-9 w-9 dark:hover:bg-zinc-900/80 hover:bg-gray-200/80">
+					className="h-9 w-9 dark:hover:bg-zinc-900/80 hover:bg-gray-200/80"
+				>
 					<Pen className="size-4 text-muted-foreground" />
 				</Button>
 			</DialogTrigger>

apps/dokploy/components/dashboard/settings/profile/profile-form.tsx

@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -26,7 +27,6 @@ import { toast } from "sonner";
 import { z } from "zod";
 import { Disable2FA } from "./disable-2fa";
 import { Enable2FA } from "./enable-2fa";
-import { AlertBlock } from "@/components/shared/alert-block";
 
 const profileSchema = z.object({
 	email: z.string(),

apps/dokploy/components/dashboard/settings/profile/remove-self-account.tsx

@@ -1,3 +1,5 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { DialogAction } from "@/components/shared/dialog-action";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -18,13 +20,11 @@ import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useTranslation } from "next-i18next";
+import { useRouter } from "next/router";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import { DialogAction } from "@/components/shared/dialog-action";
-import { AlertBlock } from "@/components/shared/alert-block";
-import { useRouter } from "next/router";
 
 const profileSchema = z.object({
 	password: z.string().min(1, {

apps/dokploy/components/dashboard/settings/servers/actions/show-traefik-actions.tsx

@@ -25,8 +25,8 @@ import { toast } from "sonner";
 import { cn } from "@/lib/utils";
 import { useTranslation } from "next-i18next";
 import { EditTraefikEnv } from "../../web-server/edit-traefik-env";
-import { ShowModalLogs } from "../../web-server/show-modal-logs";
 import { ManageTraefikPorts } from "../../web-server/manage-traefik-ports";
+import { ShowModalLogs } from "../../web-server/show-modal-logs";
 
 interface Props {
 	serverId?: string;

apps/dokploy/components/dashboard/settings/servers/edit-script.tsx

@@ -108,7 +108,8 @@ export const EditScript = ({ serverId }: Props) => {
 					</DialogDescription>
 
 					<AlertBlock type="warning">
-						We recommend not modifying this script unless you know what you are doing.
+						We recommend not modifying this script unless you know what you are
+						doing.
 					</AlertBlock>
 				</DialogHeader>
 				<div className="grid gap-4">

apps/dokploy/components/dashboard/settings/servers/setup-server.tsx

@@ -34,8 +34,8 @@ import { toast } from "sonner";
 import { ShowDeployment } from "../../application/deployments/show-deployment";
 import { EditScript } from "./edit-script";
 import { GPUSupport } from "./gpu-support";
-import { ValidateServer } from "./validate-server";
 import { SecurityAudit } from "./security-audit";
+import { ValidateServer } from "./validate-server";
 
 interface Props {
 	serverId: string;

apps/dokploy/components/dashboard/settings/servers/show-servers.tsx

@@ -23,17 +23,17 @@ import { api } from "@/utils/api";
 import { format } from "date-fns";
 import { KeyIcon, MoreHorizontal, ServerIcon } from "lucide-react";
 import Link from "next/link";
+import { useRouter } from "next/router";
 import { toast } from "sonner";
 import { TerminalModal } from "../web-server/terminal-modal";
 import { ShowServerActions } from "./actions/show-server-actions";
 import { AddServer } from "./add-server";
 import { SetupServer } from "./setup-server";
 import { ShowDockerContainersModal } from "./show-docker-containers-modal";
+import { ShowSwarmOverviewModal } from "./show-swarm-overview-modal";
 import { ShowTraefikFileSystemModal } from "./show-traefik-file-system-modal";
 import { UpdateServer } from "./update-server";
-import { useRouter } from "next/router";
 import { WelcomeSuscription } from "./welcome-stripe/welcome-suscription";
-import { ShowSwarmOverviewModal } from "./show-swarm-overview-modal";
 
 export const ShowServers = () => {
 	const router = useRouter();

apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-ssh-key.tsx

@@ -1,12 +1,12 @@
+import { CodeEditor } from "@/components/shared/code-editor";
 import { Card, CardContent } from "@/components/ui/card";
 import { api } from "@/utils/api";
-import { ExternalLinkIcon, Loader2 } from "lucide-react";
 import copy from "copy-to-clipboard";
+import { ExternalLinkIcon, Loader2 } from "lucide-react";
 import { CopyIcon } from "lucide-react";
+import Link from "next/link";
 import { useEffect, useRef } from "react";
 import { toast } from "sonner";
-import { CodeEditor } from "@/components/shared/code-editor";
-import Link from "next/link";
 
 export const CreateSSHKey = () => {
 	const { data, refetch } = api.sshKey.all.useQuery();

apps/dokploy/components/dashboard/settings/servers/welcome-stripe/setup.tsx

@@ -5,26 +5,26 @@ import { StatusTooltip } from "@/components/shared/status-tooltip";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
+	CardContent,
+	CardDescription,
 	CardHeader,
 	CardTitle,
-	CardDescription,
-	CardContent,
 } from "@/components/ui/card";
-import { RocketIcon } from "lucide-react";
-import { toast } from "sonner";
-import { EditScript } from "../edit-script";
-import { api } from "@/utils/api";
-import { useState } from "react";
 import { Label } from "@/components/ui/label";
 import {
 	Select,
-	SelectTrigger,
-	SelectValue,
 	SelectContent,
 	SelectGroup,
 	SelectItem,
 	SelectLabel,
+	SelectTrigger,
+	SelectValue,
 } from "@/components/ui/select";
+import { api } from "@/utils/api";
+import { RocketIcon } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { EditScript } from "../edit-script";
 
 export const Setup = () => {
 	const { data: servers } = api.server.all.useQuery();

apps/dokploy/components/dashboard/settings/servers/welcome-stripe/verify.tsx

@@ -1,27 +1,27 @@
 import { Button } from "@/components/ui/button";
 import {
 	Card,
+	CardContent,
+	CardDescription,
 	CardHeader,
 	CardTitle,
-	CardDescription,
-	CardContent,
 } from "@/components/ui/card";
-import { Loader2, PcCase, RefreshCw } from "lucide-react";
-import { api } from "@/utils/api";
-import { useState } from "react";
 import { Label } from "@/components/ui/label";
+import { api } from "@/utils/api";
+import { Loader2, PcCase, RefreshCw } from "lucide-react";
+import { useState } from "react";
 
+import { AlertBlock } from "@/components/shared/alert-block";
 import {
 	Select,
-	SelectTrigger,
-	SelectValue,
 	SelectContent,
 	SelectGroup,
 	SelectItem,
 	SelectLabel,
+	SelectTrigger,
+	SelectValue,
 } from "@/components/ui/select";
 import { StatusRow } from "../gpu-support";
-import { AlertBlock } from "@/components/shared/alert-block";
 
 export const Verify = () => {
 	const { data: servers } = api.server.all.useQuery();

apps/dokploy/components/dashboard/settings/servers/welcome-stripe/welcome-suscription.tsx

@@ -1,3 +1,5 @@
+import { GithubIcon } from "@/components/icons/data-tools-icons";
+import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -7,21 +9,19 @@ import {
 	DialogHeader,
 	DialogTitle,
 } from "@/components/ui/dialog";
+import { Separator } from "@/components/ui/separator";
+import { defineStepper } from "@stepperize/react";
 import { BookIcon, Puzzle } from "lucide-react";
+import { Code2, Database, GitMerge, Globe, Plug, Users } from "lucide-react";
+import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-import { defineStepper } from "@stepperize/react";
 import React from "react";
-import { Separator } from "@/components/ui/separator";
+import ConfettiExplosion from "react-confetti-explosion";
-import { AlertBlock } from "@/components/shared/alert-block";
 import { CreateServer } from "./create-server";
 import { CreateSSHKey } from "./create-ssh-key";
 import { Setup } from "./setup";
 import { Verify } from "./verify";
-import { Database, Globe, GitMerge, Users, Code2, Plug } from "lucide-react";
-import ConfettiExplosion from "react-confetti-explosion";
-import Link from "next/link";
-import { GithubIcon } from "@/components/icons/data-tools-icons";
 
 export const { useStepper, steps, Scoped } = defineStepper(
 	{

apps/dokploy/components/dashboard/settings/web-server/manage-traefik-ports.tsx

@@ -6,6 +6,7 @@ import {
 	DialogHeader,
 	DialogTitle,
 } from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
 import {
 	Select,
 	SelectContent,
@@ -13,7 +14,6 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
-import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
 import { useTranslation } from "next-i18next";
 import type React from "react";

apps/dokploy/pages/api/deploy/github.ts

@@ -3,19 +3,19 @@ import { applications, compose, github } from "@/server/db/schema";
 import type { DeploymentJob } from "@/server/queues/queue-types";
 import { myQueue } from "@/server/queues/queueSetup";
 import { deploy } from "@/server/utils/deploy";
+import { generateRandomDomain } from "@/templates/utils";
 import {
-	createPreviewDeployment,
 	type Domain,
+	IS_CLOUD,
+	createPreviewDeployment,
 	findPreviewDeploymentByApplicationId,
 	findPreviewDeploymentsByPullRequestId,
-	IS_CLOUD,
 	removePreviewDeployment,
 } from "@dokploy/server";
 import { Webhooks } from "@octokit/webhooks";
 import { and, eq } from "drizzle-orm";
 import type { NextApiRequest, NextApiResponse } from "next";
 import { extractCommitMessage, extractHash } from "./[refreshToken]";
-import { generateRandomDomain } from "@/templates/utils";
 
 export default async function handler(
 	req: NextApiRequest,

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

@@ -3,6 +3,7 @@ import { db } from "@/server/db";
 import {
 	apiCreateCompose,
 	apiCreateComposeByTemplate,
+	apiDeleteCompose,
 	apiFetchServices,
 	apiFindCompose,
 	apiRandomizeCompose,
@@ -117,7 +118,7 @@ export const composeRouter = createTRPCRouter({
 			return updateCompose(input.composeId, input);
 		}),
 	delete: protectedProcedure
-		.input(apiFindCompose)
+		.input(apiDeleteCompose)
 		.mutation(async ({ input, ctx }) => {
 			if (ctx.user.rol === "user") {
 				await checkServiceAccess(ctx.user.authId, input.composeId, "delete");
@@ -138,7 +139,7 @@ export const composeRouter = createTRPCRouter({
 				.returning();
 
 			const cleanupOperations = [
-				async () => await removeCompose(composeResult),
+				async () => await removeCompose(composeResult, input.deleteVolumes),
 				async () => await removeDeploymentsByComposeId(composeResult),
 				async () => await removeComposeDirectory(composeResult.appName),
 			];

apps/dokploy/templates/unsend/index.ts

@@ -1,10 +1,10 @@
 import {
+	type DomainSchema,
+	type Schema,
+	type Template,
+	generateBase64,
 	generateHash,
 	generateRandomDomain,
-  generateBase64,
-  type Template,
-  type Schema,
-  type DomainSchema,
 } from "../utils";
 
 export function generate(schema: Schema): Template {

packages/server/src/db/schema/application.ts

@@ -17,6 +17,7 @@ import { github } from "./github";
 import { gitlab } from "./gitlab";
 import { mounts } from "./mount";
 import { ports } from "./port";
+import { previewDeployments } from "./preview-deployments";
 import { projects } from "./project";
 import { redirects } from "./redirects";
 import { registry } from "./registry";
@@ -25,7 +26,6 @@ import { server } from "./server";
 import { applicationStatus, certificateType } from "./shared";
 import { sshKeys } from "./ssh-key";
 import { generateAppName } from "./utils";
-import { previewDeployments } from "./preview-deployments";
 
 export const sourceType = pgEnum("sourceType", [
 	"docker",

packages/server/src/db/schema/compose.ts

@@ -155,6 +155,11 @@ export const apiFindCompose = z.object({
 	composeId: z.string().min(1),
 });
 
+export const apiDeleteCompose = z.object({
+	composeId: z.string().min(1),
+	deleteVolumes: z.boolean(),
+});
+
 export const apiFetchServices = z.object({
 	composeId: z.string().min(1),
 	type: z.enum(["fetch", "cache"]).optional().default("cache"),

packages/server/src/db/schema/deployment.ts

@@ -11,8 +11,8 @@ import { nanoid } from "nanoid";
 import { z } from "zod";
 import { applications } from "./application";
 import { compose } from "./compose";
-import { server } from "./server";
 import { previewDeployments } from "./preview-deployments";
+import { server } from "./server";
 
 export const deploymentStatus = pgEnum("deploymentStatus", [
 	"running",

packages/server/src/db/schema/domain.ts

@@ -14,8 +14,8 @@ import { z } from "zod";
 import { domain } from "../validations/domain";
 import { applications } from "./application";
 import { compose } from "./compose";
-import { certificateType } from "./shared";
 import { previewDeployments } from "./preview-deployments";
+import { certificateType } from "./shared";
 
 export const domainType = pgEnum("domainType", [
 	"compose",

packages/server/src/db/schema/preview-deployments.ts

@@ -1,13 +1,13 @@
 import { relations } from "drizzle-orm";
 import { pgTable, text } from "drizzle-orm/pg-core";
-import { nanoid } from "nanoid";
-import { applications } from "./application";
-import { domains } from "./domain";
-import { deployments } from "./deployment";
 import { createInsertSchema } from "drizzle-zod";
+import { nanoid } from "nanoid";
 import { z } from "zod";
-import { generateAppName } from "./utils";
+import { applications } from "./application";
+import { deployments } from "./deployment";
+import { domains } from "./domain";
 import { applicationStatus } from "./shared";
+import { generateAppName } from "./utils";
 
 export const previewDeployments = pgTable("preview_deployments", {
 	previewDeploymentId: text("previewDeploymentId")

packages/server/src/services/compose.ts

@@ -206,7 +206,9 @@ export const deployCompose = async ({
 	descriptionLog: string;
 }) => {
 	const compose = await findComposeById(composeId);
-	const buildLink = `${await getDokployUrl()}/dashboard/project/${compose.projectId}/services/compose/${compose.composeId}?tab=deployments`;
+	const buildLink = `${await getDokployUrl()}/dashboard/project/${
+		compose.projectId
+	}/services/compose/${compose.composeId}?tab=deployments`;
 	const deployment = await createDeploymentCompose({
 		composeId: composeId,
 		title: titleLog,
@@ -308,7 +310,9 @@ export const deployRemoteCompose = async ({
 	descriptionLog: string;
 }) => {
 	const compose = await findComposeById(composeId);
-	const buildLink = `${await getDokployUrl()}/dashboard/project/${compose.projectId}/services/compose/${compose.composeId}?tab=deployments`;
+	const buildLink = `${await getDokployUrl()}/dashboard/project/${
+		compose.projectId
+	}/services/compose/${compose.composeId}?tab=deployments`;
 	const deployment = await createDeploymentCompose({
 		composeId: composeId,
 		title: titleLog,
@@ -437,13 +441,17 @@ export const rebuildRemoteCompose = async ({
 	return true;
 };
 
-export const removeCompose = async (compose: Compose) => {
+export const removeCompose = async (
+	compose: Compose,
+	deleteVolumes: boolean,
+) => {
 	try {
 		const { COMPOSE_PATH } = paths(!!compose.serverId);
 		const projectPath = join(COMPOSE_PATH, compose.appName);
 
 		if (compose.composeType === "stack") {
 			const command = `cd ${projectPath} && docker stack rm ${compose.appName} && rm -rf ${projectPath}`;
+
 			if (compose.serverId) {
 				await execAsyncRemote(compose.serverId, command);
 			} else {
@@ -453,7 +461,13 @@ export const removeCompose = async (compose: Compose) => {
 				cwd: projectPath,
 			});
 		} else {
-			const command = `cd ${projectPath} && docker compose -p ${compose.appName} down && rm -rf ${projectPath}`;
+			let command: string;
+			if (deleteVolumes) {
+				command = `cd ${projectPath} && docker compose -p ${compose.appName} down --volumes && rm -rf ${projectPath}`;
+			} else {
+				command = `cd ${projectPath} && docker compose -p ${compose.appName} down && rm -rf ${projectPath}`;
+			}
+
 			if (compose.serverId) {
 				await execAsyncRemote(compose.serverId, command);
 			} else {
@@ -477,7 +491,11 @@ export const startCompose = async (composeId: string) => {
 			if (compose.serverId) {
 				await execAsyncRemote(
 					compose.serverId,
-					`cd ${join(COMPOSE_PATH, compose.appName, "code")} && docker compose -p ${compose.appName} up -d`,
+					`cd ${join(
+						COMPOSE_PATH,
+						compose.appName,
+						"code",
+					)} && docker compose -p ${compose.appName} up -d`,
 				);
 			} else {
 				await execAsync(`docker compose -p ${compose.appName} up -d`, {
@@ -507,7 +525,9 @@ export const stopCompose = async (composeId: string) => {
 			if (compose.serverId) {
 				await execAsyncRemote(
 					compose.serverId,
-					`cd ${join(COMPOSE_PATH, compose.appName)} && docker compose -p ${compose.appName} stop`,
+					`cd ${join(COMPOSE_PATH, compose.appName)} && docker compose -p ${
+						compose.appName
+					} stop`,
 				);
 			} else {
 				await execAsync(`docker compose -p ${compose.appName} stop`, {

packages/server/src/utils/backups/index.ts

@@ -7,12 +7,12 @@ import {
 	cleanUpSystemPrune,
 	cleanUpUnusedImages,
 } from "../docker/utils";
+import { sendDatabaseBackupNotifications } from "../notifications/database-backup";
+import { sendDockerCleanupNotifications } from "../notifications/docker-cleanup";
 import { runMariadbBackup } from "./mariadb";
 import { runMongoBackup } from "./mongo";
 import { runMySqlBackup } from "./mysql";
 import { runPostgresBackup } from "./postgres";
-import { sendDockerCleanupNotifications } from "../notifications/docker-cleanup";
-import { sendDatabaseBackupNotifications } from "../notifications/database-backup";
 
 export const initCronJobs = async () => {
 	console.log("Setting up cron jobs....");

packages/server/src/utils/builders/index.ts

@@ -2,6 +2,7 @@ import { createWriteStream } from "node:fs";
 import { join } from "node:path";
 import type { InferResultType } from "@dokploy/server/types/with";
 import type { CreateServiceOptions } from "dockerode";
+import { nanoid } from "nanoid";
 import { uploadImage, uploadImageRemoteCommand } from "../cluster/upload";
 import {
 	calculateResources,
@@ -17,7 +18,6 @@ import { buildHeroku, getHerokuCommand } from "./heroku";
 import { buildNixpacks, getNixpacksCommand } from "./nixpacks";
 import { buildPaketo, getPaketoCommand } from "./paketo";
 import { buildStatic, getStaticCommand } from "./static";
-import { nanoid } from "nanoid";
 
 // NIXPACKS codeDirectory = where is the path of the code directory
 // HEROKU codeDirectory = where is the path of the code directory

packages/server/src/utils/docker/utils.ts

@@ -238,9 +238,11 @@ export const startServiceRemote = async (serverId: string, appName: string) => {
 export const removeService = async (
 	appName: string,
 	serverId?: string | null,
+	deleteVolumes = false,
 ) => {
 	try {
 		const command = `docker service rm ${appName}`;
+
 		if (serverId) {
 			await execAsyncRemote(serverId, command);
 		} else {