mirror of
https://github.com/Dokploy/dokploy.git
synced 2026-07-08 07:25:22 +02:00
Add schedule management features
- Implemented `HandleSchedules` component for creating and updating schedules with validation. - Added `ShowSchedules` component to display a list of schedules with options to edit and delete. - Created API routes for schedule management including create, update, delete, and list functionalities. - Defined the `schedule` table schema in the database with necessary fields and relationships. - Integrated schedule management into the application service dashboard, allowing users to manage schedules directly from the UI.
This commit is contained in:
Mauricio Siu
@@ -0,0 +1,134 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { api } from "@/utils/api";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
|
||||
const formSchema = z.object({
|
||||
name: z.string().min(1, "Name is required"),
|
||||
cronExpression: z.string().min(1, "Cron expression is required"),
|
||||
command: z.string().min(1, "Command is required"),
|
||||
});
|
||||
|
||||
interface Props {
|
||||
applicationId: string;
|
||||
onSuccess?: () => void;
|
||||
defaultValues?: {
|
||||
name: string;
|
||||
cronExpression: string;
|
||||
command: string;
|
||||
};
|
||||
scheduleId?: string;
|
||||
}
|
||||
|
||||
export const HandleSchedules = ({
|
||||
applicationId,
|
||||
onSuccess,
|
||||
defaultValues,
|
||||
scheduleId,
|
||||
}: Props) => {
|
||||
const utils = api.useContext();
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: defaultValues || {
|
||||
name: "",
|
||||
cronExpression: "",
|
||||
command: "",
|
||||
},
|
||||
});
|
||||
|
||||
const { mutate: createSchedule, isLoading: isCreating } =
|
||||
api.schedule.create.useMutation({
|
||||
onSuccess: () => {
|
||||
utils.schedule.list.invalidate({ applicationId });
|
||||
form.reset();
|
||||
onSuccess?.();
|
||||
},
|
||||
});
|
||||
|
||||
const { mutate: updateSchedule, isLoading: isUpdating } =
|
||||
api.schedule.update.useMutation({
|
||||
onSuccess: () => {
|
||||
utils.schedule.list.invalidate({ applicationId });
|
||||
onSuccess?.();
|
||||
},
|
||||
});
|
||||
|
||||
const isLoading = isCreating || isUpdating;
|
||||
|
||||
const onSubmit = (values: z.infer<typeof formSchema>) => {
|
||||
if (scheduleId) {
|
||||
updateSchedule({
|
||||
...values,
|
||||
scheduleId,
|
||||
applicationId,
|
||||
});
|
||||
} else {
|
||||
createSchedule({
|
||||
...values,
|
||||
applicationId,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Daily backup" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="cronExpression"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Cron Expression</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="0 0 * * *" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="command"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Command</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="npm run backup" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button type="submit" disabled={isLoading}>
|
||||
{scheduleId ? "Update" : "Create"} Schedule
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,119 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { api } from "@/utils/api";
|
||||
import { useState } from "react";
|
||||
import { HandleSchedules } from "./handle-schedules";
|
||||
|
||||
interface Props {
|
||||
applicationId: string;
|
||||
}
|
||||
|
||||
export const ShowSchedules = ({ applicationId }: Props) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [editingSchedule, setEditingSchedule] = useState<{
|
||||
scheduleId: string;
|
||||
name: string;
|
||||
cronExpression: string;
|
||||
command: string;
|
||||
} | null>(null);
|
||||
|
||||
const { data: schedules } = api.schedule.list.useQuery({
|
||||
applicationId,
|
||||
});
|
||||
|
||||
const { mutate: deleteSchedule } = api.schedule.delete.useMutation({
|
||||
onSuccess: () => {
|
||||
utils.schedule.list.invalidate({ applicationId });
|
||||
},
|
||||
});
|
||||
|
||||
const utils = api.useContext();
|
||||
|
||||
const onClose = () => {
|
||||
setIsOpen(false);
|
||||
setEditingSchedule(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="text-2xl font-bold">Schedules</h2>
|
||||
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button>Create Schedule</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{editingSchedule ? "Edit" : "Create"} Schedule
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
<HandleSchedules
|
||||
applicationId={applicationId}
|
||||
onSuccess={onClose}
|
||||
defaultValues={editingSchedule || undefined}
|
||||
scheduleId={editingSchedule?.scheduleId}
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
{schedules && schedules.length > 0 ? (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Cron Expression</TableHead>
|
||||
<TableHead>Command</TableHead>
|
||||
<TableHead>Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{schedules.map((schedule) => (
|
||||
<TableRow key={schedule.scheduleId}>
|
||||
<TableCell>{schedule.name}</TableCell>
|
||||
<TableCell>{schedule.cronExpression}</TableCell>
|
||||
<TableCell>{schedule.command}</TableCell>
|
||||
<TableCell className="space-x-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setEditingSchedule(schedule);
|
||||
setIsOpen(true);
|
||||
}}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={() =>
|
||||
deleteSchedule({ scheduleId: schedule.scheduleId })
|
||||
}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
) : (
|
||||
<div className="text-center text-gray-500">No schedules found</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user