From 6b9765a26cd548144bf6b0e235ad5473a78f1ee6 Mon Sep 17 00:00:00 2001 From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com> Date: Sun, 27 Apr 2025 23:00:26 -0600 Subject: [PATCH] Refactor backup components to utilize a unified DatabaseType type. Update AddBackup and UpdateBackup components to handle database type selection for compose backups. Enhance UI to allow users to select database types dynamically. Update backup schema to include databaseType field for better metadata management. --- .../dashboard/database/backups/add-backup.tsx | 46 +++++++++--- .../database/backups/update-backup.tsx | 73 +++++++++++++++---- .../services/compose/[composeId].tsx | 36 +-------- packages/server/src/db/schema/backups.ts | 1 + 4 files changed, 97 insertions(+), 59 deletions(-) diff --git a/apps/dokploy/components/dashboard/database/backups/add-backup.tsx b/apps/dokploy/components/dashboard/database/backups/add-backup.tsx index 8fe2a9760..1b3828e60 100644 --- a/apps/dokploy/components/dashboard/database/backups/add-backup.tsx +++ b/apps/dokploy/components/dashboard/database/backups/add-backup.tsx @@ -60,7 +60,7 @@ type CacheType = "cache" | "fetch"; const getMetadataSchema = ( backupType: "database" | "compose", - databaseType: Props["databaseType"], + databaseType: DatabaseType, ) => { if (backupType !== "compose") return z.object({}).optional(); @@ -101,30 +101,34 @@ type Schema = z.infer; interface Props { id: string; - databaseType: "postgres" | "mariadb" | "mysql" | "mongo" | "web-server"; + databaseType?: DatabaseType; refetch: () => void; backupType: "database" | "compose"; } +type DatabaseType = "postgres" | "mariadb" | "mysql" | "mongo" | "web-server"; + export const AddBackup = ({ id, - databaseType, + databaseType = "postgres", refetch, backupType = "database", }: Props) => { const { data, isLoading } = api.destination.all.useQuery(); const [cacheType, setCacheType] = useState("cache"); + const [selectedDatabaseType, setSelectedDatabaseType] = + useState(databaseType as DatabaseType); const { mutateAsync: createBackup, isLoading: isCreatingPostgresBackup } = api.backup.create.useMutation(); const schema = Schema.extend({ - metadata: getMetadataSchema(backupType, databaseType), + metadata: getMetadataSchema(backupType, selectedDatabaseType), }); const form = useForm>({ defaultValues: { - database: "", + database: databaseType === "web-server" ? "dokploy" : "", destinationId: "", enabled: true, prefix: "/", @@ -209,7 +213,8 @@ export const AddBackup = ({ enabled: data.enabled, database: data.database, keepLatestCount: data.keepLatestCount, - databaseType: databaseType, + databaseType: + backupType === "compose" ? selectedDatabaseType : databaseType, serviceName: data.serviceName, ...getDatabaseId, backupType, @@ -248,6 +253,27 @@ export const AddBackup = ({ {errorServices?.message} )} + {backupType === "compose" && ( + + Database Type + + + )} {backupType === "compose" && ( <> - {databaseType === "postgres" && ( + {selectedDatabaseType === "postgres" && ( )} - {databaseType === "mariadb" && ( + {selectedDatabaseType === "mariadb" && ( <> )} - {databaseType === "mongo" && ( + {selectedDatabaseType === "mongo" && ( <> )} - {databaseType === "mysql" && ( + {selectedDatabaseType === "mysql" && ( { if (backupType !== "compose") return z.object({}).optional(); @@ -108,9 +108,12 @@ interface Props { refetch: () => void; } +type DatabaseType = "postgres" | "mariadb" | "mysql" | "mongo" | "web-server"; + export const UpdateBackup = ({ backupId, refetch }: Props) => { const [isOpen, setIsOpen] = useState(false); const [cacheType, setCacheType] = useState("cache"); + const { data, isLoading } = api.destination.all.useQuery(); const { data: backup } = api.backup.one.useQuery( { @@ -120,7 +123,10 @@ export const UpdateBackup = ({ backupId, refetch }: Props) => { enabled: !!backupId, }, ); - + const [selectedDatabaseType, setSelectedDatabaseType] = + useState( + (backup?.databaseType as DatabaseType) || "postgres", + ); const { data: services, isFetching: isLoadingServices, @@ -142,11 +148,12 @@ export const UpdateBackup = ({ backupId, refetch }: Props) => { const { mutateAsync, isLoading: isLoadingUpdate } = api.backup.update.useMutation(); - const schema = backup - ? Schema.extend({ - metadata: getMetadataSchema(backup.backupType, backup.databaseType), - }) - : Schema; + const schema = Schema.extend({ + metadata: getMetadataSchema( + backup?.backupType || "database", + selectedDatabaseType, + ), + }); const form = useForm>({ defaultValues: { @@ -179,6 +186,19 @@ export const UpdateBackup = ({ backupId, refetch }: Props) => { } }, [form, form.reset, backup]); + useEffect(() => { + if (backup?.backupType === "compose") { + const currentValues = form.getValues(); + form.reset( + { + ...currentValues, + metadata: {}, + }, + { keepDefaultValues: true }, + ); + } + }, [selectedDatabaseType, backup?.backupType, form]); + const onSubmit = async (data: z.infer) => { if (backup?.backupType === "compose" && !data.serviceName) { form.setError("serviceName", { @@ -198,6 +218,10 @@ export const UpdateBackup = ({ backupId, refetch }: Props) => { serviceName: data.serviceName, keepLatestCount: data.keepLatestCount as number | null, metadata: data.metadata || {}, + databaseType: + backup?.backupType === "compose" + ? selectedDatabaseType + : backup?.databaseType, }) .then(async () => { toast.success("Backup Updated"); @@ -215,12 +239,12 @@ export const UpdateBackup = ({ backupId, refetch }: Props) => { - + Update Backup Update the backup @@ -238,6 +262,27 @@ export const UpdateBackup = ({ backupId, refetch }: Props) => { {errorServices?.message} )} + {backup?.backupType === "compose" && ( + + Database Type + + + )} { /> {backup?.backupType === "compose" && ( <> - {backup.databaseType === "postgres" && ( + {selectedDatabaseType === "postgres" && ( { /> )} - {backup.databaseType === "mariadb" && ( + {selectedDatabaseType === "mariadb" && ( <> { )} - {backup.databaseType === "mongo" && ( + {selectedDatabaseType === "mongo" && ( <> { )} - {backup.databaseType === "mysql" && ( + {selectedDatabaseType === "mysql" && ( , ) => { @@ -75,8 +66,6 @@ const Service = ( const router = useRouter(); const { projectId } = router.query; const [tab, setTab] = useState(activeTab); - const [selectedDatabaseType, setSelectedDatabaseType] = - useState("postgres"); useEffect(() => { if (router.query.tab) { @@ -260,30 +249,7 @@ const Service = (
-
- - -
- +
diff --git a/packages/server/src/db/schema/backups.ts b/packages/server/src/db/schema/backups.ts index 83f493447..944610436 100644 --- a/packages/server/src/db/schema/backups.ts +++ b/packages/server/src/db/schema/backups.ts @@ -178,5 +178,6 @@ export const apiUpdateBackup = createSchema keepLatestCount: true, serviceName: true, metadata: true, + databaseType: true, }) .required();