feat: add restore volume backups component and integrate into show volume backups

- Introduced a new RestoreVolumeBackups component to facilitate the restoration of volume backups from selected files and destinations.
- Integrated the RestoreVolumeBackups component into the ShowVolumeBackups component, enhancing user experience by providing direct access to restoration functionality.
- Updated the restore-backup schema to include validation for destination and backup file selection, ensuring robust user input handling.

apps/dokploy/components/dashboard/application/volume-backups/restore-volume-backups.tsx

@@ -0,0 +1,403 @@
+import { DrawerLogs } from "@/components/shared/drawer-logs";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+} from "@/components/ui/command";
+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 {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import copy from "copy-to-clipboard";
+import { debounce } from "lodash";
+import { CheckIcon, ChevronsUpDown, Copy, RotateCcw } from "lucide-react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { type LogLine, parseLogs } from "../../docker/logs/utils";
+import { formatBytes } from "../../database/backups/restore-backup";
+
+interface Props {
+	id: string;
+	type?: "application" | "compose" | "postgres" | "mariadb" | "mongo" | "mysql";
+	serverId?: string;
+}
+
+const RestoreBackupSchema = z
+	.object({
+		destinationId: z
+			.string({
+				required_error: "Please select a destination",
+			})
+			.min(1, {
+				message: "Destination is required",
+			}),
+		backupFile: z
+			.string({
+				required_error: "Please select a backup file",
+			})
+			.min(1, {
+				message: "Backup file is required",
+			}),
+		volumeName: z
+			.string({
+				required_error: "Please enter a volume name",
+			})
+			.min(1, {
+				message: "Volume name is required",
+			}),
+	})
+	.superRefine((data, ctx) => {});
+
+export const RestoreVolumeBackups = ({ id, type, serverId }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const [search, setSearch] = useState("");
+	const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
+
+	const { data: destinations = [] } = api.destination.all.useQuery();
+
+	const form = useForm<z.infer<typeof RestoreBackupSchema>>({
+		defaultValues: {
+			destinationId: "",
+			backupFile: "",
+			volumeName: "",
+		},
+		resolver: zodResolver(RestoreBackupSchema),
+	});
+
+	const destionationId = form.watch("destinationId");
+	const volumeName = form.watch("volumeName");
+
+	const debouncedSetSearch = debounce((value: string) => {
+		setDebouncedSearchTerm(value);
+	}, 350);
+
+	const handleSearchChange = (value: string) => {
+		setSearch(value);
+		debouncedSetSearch(value);
+	};
+
+	const { data: files = [], isLoading } = api.backup.listBackupFiles.useQuery(
+		{
+			destinationId: destionationId,
+			search: debouncedSearchTerm,
+			serverId: serverId ?? "",
+		},
+		{
+			enabled: isOpen && !!destionationId,
+		},
+	);
+
+	const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+	const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
+	const [isDeploying, setIsDeploying] = useState(false);
+
+	api.volumeBackups.restoreVolumeBackupWithLogs.useSubscription(
+		{
+			volumeBackupId: id,
+			destinationId: form.watch("destinationId"),
+			volumeName: volumeName,
+		},
+		{
+			enabled: isDeploying,
+			onData(log) {
+				if (!isDrawerOpen) {
+					setIsDrawerOpen(true);
+				}
+
+				if (log === "Restore completed successfully!") {
+					setIsDeploying(false);
+				}
+				const parsedLogs = parseLogs(log);
+				setFilteredLogs((prev) => [...prev, ...parsedLogs]);
+			},
+			onError(error) {
+				console.error("Restore logs error:", error);
+				setIsDeploying(false);
+			},
+		},
+	);
+
+	const onSubmit = async (data: z.infer<typeof RestoreBackupSchema>) => {
+		setIsDeploying(true);
+	};
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				<Button variant="outline">
+					<RotateCcw className="mr-2 size-4" />
+					Restore Volume Backup
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle className="flex items-center">
+						<RotateCcw className="mr-2 size-4" />
+						Restore Volume Backup
+					</DialogTitle>
+					<DialogDescription>
+						Select a destination and search for volume backup files
+					</DialogDescription>
+				</DialogHeader>
+
+				<Form {...form}>
+					<form
+						id="hook-form-restore-backup"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<FormField
+							control={form.control}
+							name="destinationId"
+							render={({ field }) => (
+								<FormItem className="">
+									<FormLabel>Destination</FormLabel>
+									<Popover>
+										<PopoverTrigger asChild>
+											<FormControl>
+												<Button
+													variant="outline"
+													className={cn(
+														"w-full justify-between !bg-input",
+														!field.value && "text-muted-foreground",
+													)}
+												>
+													{field.value
+														? destinations.find(
+																(d) => d.destinationId === field.value,
+															)?.name
+														: "Select Destination"}
+													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+												</Button>
+											</FormControl>
+										</PopoverTrigger>
+										<PopoverContent className="p-0" align="start">
+											<Command>
+												<CommandInput
+													placeholder="Search destinations..."
+													className="h-9"
+												/>
+												<CommandEmpty>No destinations found.</CommandEmpty>
+												<ScrollArea className="h-64">
+													<CommandGroup>
+														{destinations.map((destination) => (
+															<CommandItem
+																value={destination.destinationId}
+																key={destination.destinationId}
+																onSelect={() => {
+																	form.setValue(
+																		"destinationId",
+																		destination.destinationId,
+																	);
+																}}
+															>
+																{destination.name}
+																<CheckIcon
+																	className={cn(
+																		"ml-auto h-4 w-4",
+																		destination.destinationId === field.value
+																			? "opacity-100"
+																			: "opacity-0",
+																	)}
+																/>
+															</CommandItem>
+														))}
+													</CommandGroup>
+												</ScrollArea>
+											</Command>
+										</PopoverContent>
+									</Popover>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="backupFile"
+							render={({ field }) => (
+								<FormItem className="">
+									<FormLabel className="flex items-center justify-between">
+										Search Backup Files
+										{field.value && (
+											<Badge variant="outline">
+												{field.value}
+												<Copy
+													className="ml-2 size-4 cursor-pointer"
+													onClick={(e) => {
+														e.stopPropagation();
+														e.preventDefault();
+														copy(field.value);
+														toast.success("Backup file copied to clipboard");
+													}}
+												/>
+											</Badge>
+										)}
+									</FormLabel>
+									<Popover modal>
+										<PopoverTrigger asChild>
+											<FormControl>
+												<Button
+													variant="outline"
+													className={cn(
+														"w-full justify-between !bg-input",
+														!field.value && "text-muted-foreground",
+													)}
+												>
+													{field.value || "Search and select a backup file"}
+													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+												</Button>
+											</FormControl>
+										</PopoverTrigger>
+										<PopoverContent className="p-0" align="start">
+											<Command>
+												<CommandInput
+													placeholder="Search backup files..."
+													value={search}
+													onValueChange={handleSearchChange}
+													className="h-9"
+												/>
+												{isLoading ? (
+													<div className="py-6 text-center text-sm">
+														Loading backup files...
+													</div>
+												) : files.length === 0 && search ? (
+													<div className="py-6 text-center text-sm text-muted-foreground">
+														No backup files found for "{search}"
+													</div>
+												) : files.length === 0 ? (
+													<div className="py-6 text-center text-sm text-muted-foreground">
+														No backup files available
+													</div>
+												) : (
+													<ScrollArea className="h-64">
+														<CommandGroup className="w-96">
+															{files?.map((file) => (
+																<CommandItem
+																	value={file.Path}
+																	key={file.Path}
+																	onSelect={() => {
+																		form.setValue("backupFile", file.Path);
+																		if (file.IsDir) {
+																			setSearch(`${file.Path}/`);
+																			setDebouncedSearchTerm(`${file.Path}/`);
+																		} else {
+																			setSearch(file.Path);
+																			setDebouncedSearchTerm(file.Path);
+																		}
+																	}}
+																>
+																	<div className="flex w-full flex-col gap-1">
+																		<div className="flex w-full justify-between">
+																			<span className="font-medium">
+																				{file.Path}
+																			</span>
+
+																			<CheckIcon
+																				className={cn(
+																					"ml-auto h-4 w-4",
+																					file.Path === field.value
+																						? "opacity-100"
+																						: "opacity-0",
+																				)}
+																			/>
+																		</div>
+																		<div className="flex items-center gap-4 text-xs text-muted-foreground">
+																			<span>
+																				Size: {formatBytes(file.Size)}
+																			</span>
+																			{file.IsDir && (
+																				<span className="text-blue-500">
+																					Directory
+																				</span>
+																			)}
+																			{file.Hashes?.MD5 && (
+																				<span>MD5: {file.Hashes.MD5}</span>
+																			)}
+																		</div>
+																	</div>
+																</CommandItem>
+															))}
+														</CommandGroup>
+													</ScrollArea>
+												)}
+											</Command>
+										</PopoverContent>
+									</Popover>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="volumeName"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Volume Name</FormLabel>
+									<FormControl>
+										<Input placeholder="Enter volume name" {...field} />
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<DialogFooter>
+							<Button
+								isLoading={isDeploying}
+								form="hook-form-restore-backup"
+								type="submit"
+								// disabled={
+								// 	!form.watch("backupFile") ||
+								// 	(backupType === "compose" && !form.watch("databaseType"))
+								// }
+							>
+								Restore
+							</Button>
+						</DialogFooter>
+					</form>
+				</Form>
+
+				<DrawerLogs
+					isOpen={isDrawerOpen}
+					onClose={() => {
+						setIsDrawerOpen(false);
+						setFilteredLogs([]);
+						setIsDeploying(false);
+						// refetch();
+					}}
+					filteredLogs={filteredLogs}
+				/>
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/components/dashboard/application/volume-backups/show-volume-backups.tsx

@@ -25,6 +25,7 @@ import {
 import { toast } from "sonner";
 import { HandleVolumeBackups } from "./handle-volume-backups";
 import { ShowDeploymentsModal } from "../deployments/show-deployments-modal";
+import { RestoreVolumeBackups } from "./restore-volume-backups";
 
 interface Props {
 	id: string;
@@ -68,9 +69,14 @@ export const ShowVolumeBackups = ({ id, type = "application" }: Props) => {
 						</CardDescription>
 					</div>
 
-					{volumeBackups && volumeBackups.length > 0 && (
+					<div className="flex items-center gap-2">
-						<HandleVolumeBackups id={id} volumeBackupType={type} />
+						{volumeBackups && volumeBackups.length > 0 && (
-					)}
+							<HandleVolumeBackups id={id} volumeBackupType={type} />
+						)}
+						<div className="flex items-center gap-2">
+							<RestoreVolumeBackups id={id} type={type} />
+						</div>
+					</div>
 				</div>
 			</CardHeader>
 			<CardContent className="px-0">
@@ -220,7 +226,10 @@ export const ShowVolumeBackups = ({ id, type = "application" }: Props) => {
 						<p className="text-sm text-muted-foreground mt-1">
 							Create your first volume backup to automate your workflows
 						</p>
-						<HandleVolumeBackups id={id} volumeBackupType={type} />
+						<div className="flex items-center gap-2">
+							<HandleVolumeBackups id={id} volumeBackupType={type} />
+							<RestoreVolumeBackups id={id} type={type} />
+						</div>
 					</div>
 				)}
 			</CardContent>

apps/dokploy/components/dashboard/database/backups/restore-backup.tsx

@@ -199,7 +199,7 @@ const RestoreBackupSchema = z
 		}
 	});
 
-const formatBytes = (bytes: number): string => {
+export const formatBytes = (bytes: number): string => {
 	if (bytes === 0) return "0 Bytes";
 	const k = 1024;
 	const sizes = ["Bytes", "KB", "MB", "GB", "TB"];

apps/dokploy/pages/dashboard/project/[projectId]/services/compose/[composeId].tsx

@@ -216,10 +216,10 @@ const Service = (
 											className={cn(
 												"xl:grid xl:w-fit max-md:overflow-y-scroll justify-start",
 												isCloud && data?.serverId
-													? "xl:grid-cols-9"
+													? "xl:grid-cols-10"
 													: data?.serverId
-														? "xl:grid-cols-8"
+														? "xl:grid-cols-9"
-														: "xl:grid-cols-9",
+														: "xl:grid-cols-10",
 											)}
 										>
 											<TabsTrigger value="general">General</TabsTrigger>

apps/dokploy/server/api/routers/volume-backups.ts

@@ -5,6 +5,7 @@ import {
 	removeVolumeBackup,
 	createVolumeBackup,
 	runVolumeBackup,
+	findDestinationById,
 } from "@dokploy/server";
 import {
 	createVolumeBackupSchema,
@@ -15,6 +16,8 @@ import { z } from "zod";
 import { createTRPCRouter, protectedProcedure } from "../trpc";
 import { db } from "@dokploy/server/db";
 import { eq } from "drizzle-orm";
+import { restorePostgresBackup } from "@dokploy/server/utils/restore";
+import { observable } from "@trpc/server/observable";
 
 export const volumeBackupsRouter = createTRPCRouter({
 	list: protectedProcedure
@@ -88,4 +91,29 @@ export const volumeBackupsRouter = createTRPCRouter({
 				return false;
 			}
 		}),
+	restoreVolumeBackupWithLogs: protectedProcedure
+		.meta({
+			openapi: {
+				enabled: false,
+				path: "/restore-volume-backup-with-logs",
+				method: "POST",
+				override: true,
+			},
+		})
+		.input(
+			z.object({
+				volumeBackupId: z.string().min(1),
+				destinationId: z.string().min(1),
+				volumeName: z.string().min(1),
+			}),
+		)
+		.subscription(async ({ input }) => {
+			const destination = await findDestinationById(input.destinationId);
+
+			return observable<string>((emit) => {
+				// restorePostgresBackup(postgres, destination, input, (log) => {
+				// 	emit.next(log);
+				// });
+			});
+		}),
 });

packages/server/src/utils/volume-backups/utils.ts

@@ -97,6 +97,7 @@ const backupVolume = async (
 		if (compose.composeType === "stack") {
 			stopCommand = `
 			echo "Stopping compose to 0 replicas"
+			echo "Service name: ${compose.appName}_${volumeBackup.serviceName}"
             ACTUAL_REPLICAS=$(docker service inspect ${compose.appName}_${volumeBackup.serviceName} --format "{{.Spec.Mode.Replicated.Replicas}}")
             echo "Actual replicas: $ACTUAL_REPLICAS"
             docker service scale ${compose.appName}_${volumeBackup.serviceName}=0`;