mirror of
https://github.com/Dokploy/dokploy.git
synced 2026-07-05 14:05:30 +02:00
feat: implement rollback functionality with UI components and database schema updates
- Added ShowEnv and ShowRollbackSettings components for displaying and configuring rollback settings. - Implemented ShowRollbacks component to list and manage rollbacks for applications. - Created rollback database schema and updated application schema to include rollback settings. - Added API routes for managing rollbacks, including fetching, creating, and deleting rollbacks. - Integrated rollback functionality into the application deployment process.
This commit is contained in:
Mauricio Siu
@@ -0,0 +1,46 @@
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Eye } from "lucide-react";
|
||||
import { CodeEditor } from "@/components/shared/code-editor";
|
||||
|
||||
interface Props {
|
||||
env: string | null;
|
||||
}
|
||||
|
||||
export const ShowEnv = ({ env }: Props) => {
|
||||
if (!env) return null;
|
||||
|
||||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="ghost" size="sm" className="text-xs">
|
||||
<Eye className="size-3.5 mr-1" />
|
||||
View Env
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Environment Variables</DialogTitle>
|
||||
<DialogDescription>
|
||||
Environment variables for this rollback version
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="mt-4">
|
||||
<CodeEditor
|
||||
language="shell"
|
||||
value={env}
|
||||
className="h-[12rem] font-mono"
|
||||
/>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,143 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { api } from "@/utils/api";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { toast } from "sonner";
|
||||
import { z } from "zod";
|
||||
|
||||
const formSchema = z.object({
|
||||
rollbackActive: z.boolean(),
|
||||
limitRollback: z.number().min(1).max(50),
|
||||
});
|
||||
|
||||
type FormValues = z.infer<typeof formSchema>;
|
||||
|
||||
interface Props {
|
||||
applicationId: string;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
export const ShowRollbackSettings = ({ applicationId, children }: Props) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const { data: application, refetch } = api.application.one.useQuery(
|
||||
{
|
||||
applicationId,
|
||||
},
|
||||
{
|
||||
enabled: !!applicationId,
|
||||
},
|
||||
);
|
||||
|
||||
const { mutateAsync: updateApplication, isLoading } =
|
||||
api.application.update.useMutation();
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
rollbackActive: application?.rollbackActive ?? false,
|
||||
limitRollback: application?.limitRollback ?? 5,
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = async (data: FormValues) => {
|
||||
await updateApplication({
|
||||
applicationId,
|
||||
rollbackActive: data.rollbackActive,
|
||||
limitRollback: data.limitRollback,
|
||||
})
|
||||
.then(() => {
|
||||
toast.success("Rollback settings updated");
|
||||
setIsOpen(false);
|
||||
refetch();
|
||||
})
|
||||
.catch(() => {
|
||||
toast.error("Failed to update rollback settings");
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
||||
<DialogTrigger asChild>{children}</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Rollback Settings</DialogTitle>
|
||||
<DialogDescription>
|
||||
Configure how rollbacks work for this application
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="rollbackActive"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel className="text-base">
|
||||
Enable Rollbacks
|
||||
</FormLabel>
|
||||
<FormDescription>
|
||||
Allow rolling back to previous deployments
|
||||
</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="limitRollback"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Maximum Rollbacks</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
{...field}
|
||||
onChange={(e) => field.onChange(Number(e.target.value))}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Number of rollback points to maintain (1-50)
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button type="submit" className="w-full" isLoading={isLoading}>
|
||||
Save Settings
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,225 @@
|
||||
import { api } from "@/utils/api";
|
||||
import {
|
||||
Loader2,
|
||||
RefreshCcw,
|
||||
Settings,
|
||||
ArrowDownToLine,
|
||||
CalendarClock,
|
||||
Box,
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ShowRollbackSettings } from "./show-rollback-settings";
|
||||
import { ShowEnv } from "./show-env";
|
||||
import { format } from "date-fns";
|
||||
import { DialogAction } from "@/components/shared/dialog-action";
|
||||
import { toast } from "sonner";
|
||||
|
||||
interface Props {
|
||||
applicationId: string;
|
||||
}
|
||||
|
||||
export const ShowRollbacks = ({ applicationId }: Props) => {
|
||||
const { data: application } = api.application.one.useQuery(
|
||||
{
|
||||
applicationId,
|
||||
},
|
||||
{
|
||||
enabled: !!applicationId,
|
||||
},
|
||||
);
|
||||
const { data, isLoading, refetch } = api.rollback.all.useQuery(
|
||||
{
|
||||
applicationId,
|
||||
},
|
||||
{
|
||||
enabled: !!applicationId,
|
||||
},
|
||||
);
|
||||
|
||||
const { mutateAsync: rollbackVersion, isLoading: isRollingBack } =
|
||||
api.rollback.rollback.useMutation();
|
||||
|
||||
const { mutateAsync: deleteRollback, isLoading: isDeleting } =
|
||||
api.rollback.delete.useMutation();
|
||||
|
||||
if (!application?.rollbackActive) {
|
||||
return (
|
||||
<Card className="border px-6 shadow-none bg-transparent h-full min-h-[50vh]">
|
||||
<CardHeader className="px-0">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex flex-col gap-2">
|
||||
<CardTitle className="text-xl font-bold flex items-center gap-2">
|
||||
Rollbacks
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Rollback to a previous deployment.
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="py-0">
|
||||
<div className="flex flex-col gap-2 items-center justify-center py-12 rounded-lg">
|
||||
<Settings className="size-8 mb-4 text-muted-foreground" />
|
||||
<p className="text-lg font-medium text-muted-foreground">
|
||||
Rollbacks Not Enabled
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground mt-1 text-center max-w-md">
|
||||
Enable rollbacks to keep track of previous deployments and roll
|
||||
back when needed.
|
||||
</p>
|
||||
<ShowRollbackSettings applicationId={applicationId}>
|
||||
<Button variant="outline" className="mt-4">
|
||||
Configure Rollbacks
|
||||
</Button>
|
||||
</ShowRollbackSettings>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="border px-6 shadow-none bg-transparent h-full min-h-[50vh]">
|
||||
<CardHeader className="px-0">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex flex-col gap-2">
|
||||
<CardTitle className="text-xl font-bold flex items-center gap-2">
|
||||
Rollbacks
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Rollback to a previous deployment.
|
||||
</CardDescription>
|
||||
</div>
|
||||
<ShowRollbackSettings applicationId={applicationId}>
|
||||
<Button variant="outline" className="mt-4">
|
||||
Configure Rollbacks
|
||||
</Button>
|
||||
</ShowRollbackSettings>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="px-0 py-0">
|
||||
{isLoading ? (
|
||||
<div className="flex gap-4 w-full items-center justify-center text-center mx-auto min-h-[45vh]">
|
||||
<Loader2 className="size-4 text-muted-foreground/70 transition-colors animate-spin self-center" />
|
||||
<span className="text-sm text-muted-foreground/70">
|
||||
Loading rollbacks...
|
||||
</span>
|
||||
</div>
|
||||
) : data && data.length > 0 ? (
|
||||
<div className="grid xl:grid-cols-2 gap-4 grid-cols-1 h-full">
|
||||
{data.map((rollback) => {
|
||||
return (
|
||||
<div
|
||||
key={rollback.rollbackId}
|
||||
className="flex flex-col rounded-lg border text-card-foreground shadow-sm"
|
||||
>
|
||||
<div className="p-6 flex flex-col gap-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10">
|
||||
<ArrowDownToLine className="size-5 text-primary" />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<h3 className="font-medium leading-none flex items-center gap-2">
|
||||
Version {rollback.version}
|
||||
</h3>
|
||||
<div className="flex items-center gap-4 text-sm text-muted-foreground">
|
||||
<div className="flex items-center gap-1">
|
||||
<CalendarClock className="size-3.5" />
|
||||
<span>
|
||||
{format(
|
||||
new Date(rollback.createdAt),
|
||||
"MMM dd, yyyy HH:mm",
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
{rollback.image && (
|
||||
<div className="flex items-center gap-1">
|
||||
<Box className="size-3.5" />
|
||||
<code className="text-xs bg-muted px-1 py-0.5 rounded">
|
||||
{rollback.image}
|
||||
</code>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="text-xs"
|
||||
isLoading={isRollingBack}
|
||||
onClick={async () => {
|
||||
await rollbackVersion({
|
||||
rollbackId: rollback.rollbackId,
|
||||
})
|
||||
.then(() => {
|
||||
refetch();
|
||||
toast.success("Rollback successful");
|
||||
})
|
||||
.catch(() => {
|
||||
toast.error("Error rolling back");
|
||||
});
|
||||
}}
|
||||
>
|
||||
Rollback to this version
|
||||
</Button>
|
||||
<ShowEnv env={rollback.env} />
|
||||
<DialogAction
|
||||
title="Delete Rollback"
|
||||
description="Are you sure you want to delete this rollback?"
|
||||
type="destructive"
|
||||
onClick={async () => {
|
||||
await deleteRollback({
|
||||
rollbackId: rollback.rollbackId,
|
||||
})
|
||||
.then(() => {
|
||||
refetch();
|
||||
toast.success("Rollback deleted successfully");
|
||||
})
|
||||
.catch(() => {
|
||||
toast.error("Error deleting rollback");
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="group hover:bg-red-500/10 "
|
||||
isLoading={isDeleting}
|
||||
>
|
||||
<Trash2 className="size-4 text-primary group-hover:text-red-500" />
|
||||
</Button>
|
||||
</DialogAction>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-2 items-center justify-center py-12 rounded-lg min-h-[30vh]">
|
||||
<RefreshCcw className="size-8 mb-4 text-muted-foreground" />
|
||||
<p className="text-lg font-medium text-muted-foreground">
|
||||
No rollbacks
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
No rollbacks found for this application.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user