Enhance backup validation and improve backup display

- Added validation to require a service name for compose backups in the backup handling logic, improving user feedback.
- Refactored the ShowBackups component to sort deployments by creation date and enhance the display of backup information, including service names and statuses, for better user experience.
- Updated logging in the compose backup utility to include command execution details, aiding in debugging and monitoring.

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

@@ -108,6 +108,15 @@ const Schema = z
 				path: ["databaseType"],
 			});
 		}
+
+		if (data.backupType === "compose" && !data.serviceName) {
+			ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				message: "Service name is required for compose backups",
+				path: ["serviceName"],
+			});
+		}
+
 		if (data.backupType === "compose" && data.databaseType) {
 			if (data.databaseType === "postgres") {
 				if (!data.metadata?.postgres?.databaseUser) {

apps/dokploy/components/dashboard/database/backups/show-backups.tsx

@@ -178,184 +178,202 @@ export const ShowBackups = ({
 									</AlertBlock>
 								)}
 								<div className="flex flex-col gap-6">
-									{postgres?.backups.map((backup) => (
-										<div key={backup.backupId}>
-											<div className="flex w-full flex-col md:flex-row md:items-start justify-between gap-4 border rounded-lg p-4 hover:bg-muted/50 transition-colors">
-												<div className="flex flex-col w-full gap-4">
-													<div className="flex items-center gap-3">
-														{backup.backupType === "compose" && (
-															<div className="flex items-center justify-center size-10 rounded-lg">
-																{backup.databaseType === "postgres" && (
-																	<PostgresqlIcon className="size-7" />
-																)}
-																{backup.databaseType === "mysql" && (
-																	<MysqlIcon className="size-7" />
-																)}
-																{backup.databaseType === "mariadb" && (
-																	<MariadbIcon className="size-7" />
-																)}
-																{backup.databaseType === "mongo" && (
-																	<MongodbIcon className="size-7" />
-																)}
-															</div>
-														)}
-														<div className="flex flex-col gap-1">
+									{postgres?.backups.map((backup) => {
+										const orderedDeployments = backup.deployments.sort(
+											(a, b) =>
+												new Date(b.createdAt).getTime() -
+												new Date(a.createdAt).getTime(),
+										);
+
+										const serverId =
+											"serverId" in postgres ? postgres.serverId : undefined;
+
+										return (
+											<div key={backup.backupId}>
+												<div className="flex w-full flex-col md:flex-row md:items-start justify-between gap-4 border rounded-lg p-4 hover:bg-muted/50 transition-colors">
+													<div className="flex flex-col w-full gap-4">
+														<div className="flex items-center gap-3">
 															{backup.backupType === "compose" && (
-																<div className="flex items-center gap-2">
-																	<h3 className="font-medium">
-																		{backup.serviceName}
-																	</h3>
-																	<span className="px-1.5 py-0.5 rounded-full bg-muted text-xs font-medium capitalize">
-																		{backup.databaseType}
-																	</span>
+																<div className="flex items-center justify-center size-10 rounded-lg">
+																	{backup.databaseType === "postgres" && (
+																		<PostgresqlIcon className="size-7" />
+																	)}
+																	{backup.databaseType === "mysql" && (
+																		<MysqlIcon className="size-7" />
+																	)}
+																	{backup.databaseType === "mariadb" && (
+																		<MariadbIcon className="size-7" />
+																	)}
+																	{backup.databaseType === "mongo" && (
+																		<MongodbIcon className="size-7" />
+																	)}
 																</div>
 															)}
-															<div className="flex items-center gap-2">
-																<div
-																	className={cn(
-																		"size-1.5 rounded-full",
-																		backup.enabled
-																			? "bg-green-500"
-																			: "bg-red-500",
-																	)}
-																/>
-																<span className="text-xs text-muted-foreground">
-																	{backup.enabled ? "Active" : "Inactive"}
+															<div className="flex flex-col gap-1">
+																{backup.backupType === "compose" && (
+																	<div className="flex items-center gap-2">
+																		<h3 className="font-medium">
+																			{backup.serviceName}
+																		</h3>
+																		<span className="px-1.5 py-0.5 rounded-full bg-muted text-xs font-medium capitalize">
+																			{backup.databaseType}
+																		</span>
+																	</div>
+																)}
+																<div className="flex items-center gap-2">
+																	<div
+																		className={cn(
+																			"size-1.5 rounded-full",
+																			backup.enabled
+																				? "bg-green-500"
+																				: "bg-red-500",
+																		)}
+																	/>
+																	<span className="text-xs text-muted-foreground">
+																		{backup.enabled ? "Active" : "Inactive"}
+																	</span>
+																</div>
+															</div>
+														</div>
+
+														<div className="flex flex-wrap gap-x-8 gap-y-2">
+															<div className="min-w-[200px]">
+																<span className="text-sm font-medium text-muted-foreground">
+																	Destination
 																</span>
+																<p className="font-medium text-sm mt-0.5">
+																	{backup.destination.name}
+																</p>
+															</div>
+
+															<div className="min-w-[150px]">
+																<span className="text-sm font-medium text-muted-foreground">
+																	Database
+																</span>
+																<p className="font-medium text-sm mt-0.5">
+																	{backup.database}
+																</p>
+															</div>
+
+															<div className="min-w-[120px]">
+																<span className="text-sm font-medium text-muted-foreground">
+																	Schedule
+																</span>
+																<p className="font-medium text-sm mt-0.5">
+																	{backup.schedule}
+																</p>
+															</div>
+
+															<div className="min-w-[150px]">
+																<span className="text-sm font-medium text-muted-foreground">
+																	Prefix Storage
+																</span>
+																<p className="font-medium text-sm mt-0.5">
+																	{backup.prefix}
+																</p>
+															</div>
+
+															<div className="min-w-[100px]">
+																<span className="text-sm font-medium text-muted-foreground">
+																	Keep Latest
+																</span>
+																<p className="font-medium text-sm mt-0.5">
+																	{backup.keepLatestCount || "All"}
+																</p>
 															</div>
 														</div>
 													</div>
 
-													<div className="flex flex-wrap gap-x-8 gap-y-2">
-														<div className="min-w-[200px]">
-															<span className="text-sm font-medium text-muted-foreground">
-																Destination
-															</span>
-															<p className="font-medium text-sm mt-0.5">
-																{backup.destination.name}
-															</p>
-														</div>
+													<div className="flex flex-row md:flex-col gap-1.5">
+														<ShowSchedulesLogs
+															deployments={orderedDeployments}
+															serverId={serverId || undefined}
+														>
+															<Button
+																variant="ghost"
+																size="icon"
+																className="size-8"
+															>
+																<ClipboardList className="size-4  transition-colors " />
+															</Button>
+														</ShowSchedulesLogs>
+														<TooltipProvider delayDuration={0}>
+															<Tooltip>
+																<TooltipTrigger asChild>
+																	<Button
+																		type="button"
+																		variant="ghost"
+																		size="icon"
+																		className="size-8"
+																		isLoading={
+																			isManualBackup &&
+																			activeManualBackup === backup.backupId
+																		}
+																		onClick={async () => {
+																			setActiveManualBackup(backup.backupId);
+																			await manualBackup({
+																				backupId: backup.backupId as string,
+																			})
+																				.then(async () => {
+																					toast.success(
+																						"Manual Backup Successful",
+																					);
+																				})
+																				.catch(() => {
+																					toast.error(
+																						"Error creating the manual backup",
+																					);
+																				});
+																			setActiveManualBackup(undefined);
+																		}}
+																	>
+																		<Play className="size-4 " />
+																	</Button>
+																</TooltipTrigger>
+																<TooltipContent>
+																	Run Manual Backup
+																</TooltipContent>
+															</Tooltip>
+														</TooltipProvider>
 
-														<div className="min-w-[150px]">
-															<span className="text-sm font-medium text-muted-foreground">
-																Database
-															</span>
-															<p className="font-medium text-sm mt-0.5">
-																{backup.database}
-															</p>
-														</div>
-
-														<div className="min-w-[120px]">
-															<span className="text-sm font-medium text-muted-foreground">
-																Schedule
-															</span>
-															<p className="font-medium text-sm mt-0.5">
-																{backup.schedule}
-															</p>
-														</div>
-
-														<div className="min-w-[150px]">
-															<span className="text-sm font-medium text-muted-foreground">
-																Prefix Storage
-															</span>
-															<p className="font-medium text-sm mt-0.5">
-																{backup.prefix}
-															</p>
-														</div>
-
-														<div className="min-w-[100px]">
-															<span className="text-sm font-medium text-muted-foreground">
-																Keep Latest
-															</span>
-															<p className="font-medium text-sm mt-0.5">
-																{backup.keepLatestCount || "All"}
-															</p>
-														</div>
+														<HandleBackup
+															backupType={backup.backupType}
+															backupId={backup.backupId}
+															refetch={refetch}
+														/>
+														<DialogAction
+															title="Delete Backup"
+															description="Are you sure you want to delete this backup?"
+															type="destructive"
+															onClick={async () => {
+																await deleteBackup({
+																	backupId: backup.backupId,
+																})
+																	.then(() => {
+																		refetch();
+																		toast.success(
+																			"Backup deleted successfully",
+																		);
+																	})
+																	.catch(() => {
+																		toast.error("Error deleting backup");
+																	});
+															}}
+														>
+															<Button
+																variant="ghost"
+																size="icon"
+																className="group hover:bg-red-500/10 size-8"
+																isLoading={isRemoving}
+															>
+																<Trash2 className="size-4 text-primary group-hover:text-red-500" />
+															</Button>
+														</DialogAction>
 													</div>
 												</div>
-
-												<div className="flex flex-row md:flex-col gap-1.5">
-													<ShowSchedulesLogs deployments={backup.deployments}>
-														<Button
-															variant="ghost"
-															size="icon"
-															className="size-8"
-														>
-															<ClipboardList className="size-4  transition-colors " />
-														</Button>
-													</ShowSchedulesLogs>
-													<TooltipProvider delayDuration={0}>
-														<Tooltip>
-															<TooltipTrigger asChild>
-																<Button
-																	type="button"
-																	variant="ghost"
-																	size="icon"
-																	className="size-8"
-																	isLoading={
-																		isManualBackup &&
-																		activeManualBackup === backup.backupId
-																	}
-																	onClick={async () => {
-																		setActiveManualBackup(backup.backupId);
-																		await manualBackup({
-																			backupId: backup.backupId as string,
-																		})
-																			.then(async () => {
-																				toast.success(
-																					"Manual Backup Successful",
-																				);
-																			})
-																			.catch(() => {
-																				toast.error(
-																					"Error creating the manual backup",
-																				);
-																			});
-																		setActiveManualBackup(undefined);
-																	}}
-																>
-																	<Play className="size-4 " />
-																</Button>
-															</TooltipTrigger>
-															<TooltipContent>Run Manual Backup</TooltipContent>
-														</Tooltip>
-													</TooltipProvider>
-
-													<HandleBackup
-														backupType={backup.backupType}
-														backupId={backup.backupId}
-														refetch={refetch}
-													/>
-													<DialogAction
-														title="Delete Backup"
-														description="Are you sure you want to delete this backup?"
-														type="destructive"
-														onClick={async () => {
-															await deleteBackup({
-																backupId: backup.backupId,
-															})
-																.then(() => {
-																	refetch();
-																	toast.success("Backup deleted successfully");
-																})
-																.catch(() => {
-																	toast.error("Error deleting backup");
-																});
-														}}
-													>
-														<Button
-															variant="ghost"
-															size="icon"
-															className="group hover:bg-red-500/10 size-8"
-															isLoading={isRemoving}
-														>
-															<Trash2 className="size-4 text-primary group-hover:text-red-500" />
-														</Button>
-													</DialogAction>
-												</div>
 											</div>
-										</div>
-									))}
+										);
+									})}
 								</div>
 							</div>
 						)}

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

@@ -33,6 +33,7 @@ export const runComposeBackup = async (
 		title: "Compose Backup",
 		description: "Compose Backup",
 	});
+
 	try {
 		const rcloneFlags = getS3Credentials(destination);
 		const rcloneDestination = `:s3:${destination.bucket}/${bucketDestination}`;
@@ -77,7 +78,8 @@ export const runComposeBackup = async (
 				compose.serverId,
 				`
 				 set -e;
-				 Running command.
+				 echo "Running command." >> ${deployment.logPath};
+				 export RCLONE_LOG_LEVEL=DEBUG;
 				${backupCommand} | ${rcloneCommand} >> ${deployment.logPath} 2>> ${deployment.logPath} || {
 					echo "❌ Command failed" >> ${deployment.logPath};
 					exit 1;