Adding cron manager in front for database policy.

2026-07-14 11:16:13 +02:00 · 2024-12-12 15:32:33 +01:00
parent a55fba99f9
commit 382ec5c18d
14 changed files with 535 additions and 4 deletions
@@ -0,0 +1,106 @@
+"use client";
+
+import {Card, CardContent} from "@/components/ui/card";
+import {
+    FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useZodForm
+} from "@/components/ui/form";
+import {Input} from "@/components/ui/input";
+import {Form} from "@/components/ui/form"
+import {Button} from "@/components/ui/button";
+import {useRouter} from "next/navigation";
+import {useMutation} from "@tanstack/react-query";
+import {TooltipProvider} from "@/components/ui/tooltip";
+import {DatabaseSchema, DatabaseType} from "@/components/wrappers/Database/DatabaseForm/form-database.schema";
+
+export type DatabaseFormProps = {
+    defaultValues?: DatabaseType;
+    databaseId?: string;
+}
+
+export const DatabaseForm = (props: DatabaseFormProps) => {
+
+    const isCreate = !Boolean(props.defaultValues)
+
+    const form = useZodForm({
+        schema: DatabaseSchema,
+        defaultValues: props.defaultValues,
+    });
+
+    const router = useRouter();
+
+    const mutation = useMutation({
+        mutationFn: async (values: DatabaseType) => {
+            console.log("values", values)
+
+        }
+    })
+
+    return (
+        <TooltipProvider>
+            <Card>
+                <CardContent>
+                    <Form form={form}
+                          className="flex flex-col gap-4 mt-3"
+                          onSubmit={async (values) => {
+                              await mutation.mutateAsync(values);
+                          }}
+                    >
+                        <FormField
+                            control={form.control}
+                            name="name"
+                            disabled
+                            defaultValue=""
+                            render={({field}) => (
+                                <FormItem>
+                                    <FormLabel>Name</FormLabel>
+                                    <FormControl>
+                                        <Input
+                                            placeholder="Database 1" {...field} />
+                                    </FormControl>
+                                    <FormDescription>Your database project name setup in agent</FormDescription>
+                                    <FormMessage/>
+                                </FormItem>
+                            )}
+                        />
+                        <FormField
+                            control={form.control}
+                            name="dbms"
+                            defaultValue=""
+                            disabled
+                            render={({field}) => (
+                                <FormItem>
+                                    <FormLabel>Database type</FormLabel>
+                                    <FormControl>
+                                        <Input
+                                            placeholder="PostgreSQL" {...field} value={field.value ?? ""} />
+                                    </FormControl>
+                                    <FormDescription>Your database project name setup in agent</FormDescription>
+                                    <FormMessage/>
+                                </FormItem>
+                            )}
+                        />
+                        <FormField
+                            control={form.control}
+                            name="description"
+                            defaultValue=""
+                            render={({field}) => (
+                                <FormItem>
+                                    <FormLabel>Description</FormLabel>
+                                    <FormControl>
+                                        <Input
+                                            placeholder="Prod database for project 1" {...field} value={field.value ?? ""} />
+                                    </FormControl>
+                                    <FormDescription>Add a short description about this database</FormDescription>
+                                    <FormMessage/>
+                                </FormItem>
+                            )}
+                        />
+                        <Button>
+                            {isCreate ? `Create database` : `Save database`}
+                        </Button>
+                    </Form>
+                </CardContent>
+            </Card>
+        </TooltipProvider>
+    )
+}
@@ -0,0 +1,13 @@
+import {z} from "zod";
+
+const cronRegex = /^(\d{1,2}|\*|(\d{1,2}-\d{1,2})|(\d{1,2}\/\d{1,2}))\s+(\d{1,2}|\*|(\d{1,2}-\d{1,2})|(\d{1,2}\/\d{1,2}))\s+(\d{1,2}|\*|(\d{1,2}-\d{1,2})|(\d{1,2}\/\d{1,2}))\s+(\d{1,7}|\*|(\d{1,7}-\d{1,7})|(\d{1,7}\/\d{1,7}))$/;
+
+
+export const DatabaseSchema = z.object({
+    name: z.string(),
+    description: z.string().optional().nullable(),
+    dbms: z.string(),
+    backupPolicy: z.string().regex(cronRegex, 'Invalid cron format')
+});
+
+export type DatabaseType = z.infer<typeof DatabaseSchema>;