add mysql, mariadb, postgresql, sqlite volumes support

This commit is contained in:
Renan Bernordi
2025-11-15 23:32:26 -03:00
parent c0bef7f65e
commit eb28667d90
15 changed files with 1022 additions and 25 deletions

View File

@@ -35,6 +35,10 @@ const defaultValuesForType = {
nfs: { backend: "nfs" as const, port: 2049, version: "4.1" as const },
smb: { backend: "smb" as const, port: 445, vers: "3.0" as const },
webdav: { backend: "webdav" as const, port: 80, ssl: false },
mariadb: { backend: "mariadb" as const, port: 3306 },
mysql: { backend: "mysql" as const, port: 3306 },
postgres: { backend: "postgres" as const, port: 5432, dumpFormat: "custom" as const },
sqlite: { backend: "sqlite" as const, path: "/" },
};
export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, formId, loading, className }: Props) => {
@@ -81,7 +85,14 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
const handleTestConnection = async () => {
const formValues = getValues();
if (formValues.backend === "nfs" || formValues.backend === "smb" || formValues.backend === "webdav") {
if (
formValues.backend === "nfs" ||
formValues.backend === "smb" ||
formValues.backend === "webdav" ||
formValues.backend === "mariadb" ||
formValues.backend === "mysql" ||
formValues.backend === "postgres"
) {
testBackendConnection.mutate({
body: { config: formValues },
});
@@ -130,6 +141,10 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
<SelectItem value="nfs">NFS</SelectItem>
<SelectItem value="smb">SMB</SelectItem>
<SelectItem value="webdav">WebDAV</SelectItem>
<SelectItem value="mariadb">MariaDB</SelectItem>
<SelectItem value="mysql">MySQL</SelectItem>
<SelectItem value="postgres">PostgreSQL</SelectItem>
<SelectItem value="sqlite">SQLite</SelectItem>
</SelectContent>
</Select>
<FormDescription>Choose the storage backend for this volume.</FormDescription>
@@ -536,7 +551,290 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
</>
)}
{watchedBackend !== "directory" && (
{watchedBackend === "mariadb" && (
<>
<FormField
control={form.control}
name="host"
render={({ field }) => (
<FormItem>
<FormLabel>Host</FormLabel>
<FormControl>
<Input placeholder="localhost" {...field} />
</FormControl>
<FormDescription>MariaDB server hostname or IP address.</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="port"
defaultValue={3306}
render={({ field }) => (
<FormItem>
<FormLabel>Port</FormLabel>
<FormControl>
<Input type="number" placeholder="3306" {...field} />
</FormControl>
<FormDescription>MariaDB server port (default: 3306).</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="username"
render={({ field }) => (
<FormItem>
<FormLabel>Username</FormLabel>
<FormControl>
<Input placeholder="root" {...field} />
</FormControl>
<FormDescription>Database user with backup privileges.</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="password"
render={({ field }) => (
<FormItem>
<FormLabel>Password</FormLabel>
<FormControl>
<Input type="password" placeholder="••••••••" {...field} />
</FormControl>
<FormDescription>Password for database authentication.</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="database"
render={({ field }) => (
<FormItem>
<FormLabel>Database</FormLabel>
<FormControl>
<Input placeholder="myapp_production" {...field} />
</FormControl>
<FormDescription>Name of the database to backup.</FormDescription>
<FormMessage />
</FormItem>
)}
/>
</>
)}
{watchedBackend === "mysql" && (
<>
<FormField
control={form.control}
name="host"
render={({ field }) => (
<FormItem>
<FormLabel>Host</FormLabel>
<FormControl>
<Input placeholder="localhost" {...field} />
</FormControl>
<FormDescription>MySQL server hostname or IP address.</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="port"
defaultValue={3306}
render={({ field }) => (
<FormItem>
<FormLabel>Port</FormLabel>
<FormControl>
<Input type="number" placeholder="3306" {...field} />
</FormControl>
<FormDescription>MySQL server port (default: 3306).</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="username"
render={({ field }) => (
<FormItem>
<FormLabel>Username</FormLabel>
<FormControl>
<Input placeholder="root" {...field} />
</FormControl>
<FormDescription>Database user with backup privileges.</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="password"
render={({ field }) => (
<FormItem>
<FormLabel>Password</FormLabel>
<FormControl>
<Input type="password" placeholder="••••••••" {...field} />
</FormControl>
<FormDescription>Password for database authentication.</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="database"
render={({ field }) => (
<FormItem>
<FormLabel>Database</FormLabel>
<FormControl>
<Input placeholder="myapp_production" {...field} />
</FormControl>
<FormDescription>Name of the database to backup.</FormDescription>
<FormMessage />
</FormItem>
)}
/>
</>
)}
{watchedBackend === "postgres" && (
<>
<FormField
control={form.control}
name="host"
render={({ field }) => (
<FormItem>
<FormLabel>Host</FormLabel>
<FormControl>
<Input placeholder="localhost" {...field} />
</FormControl>
<FormDescription>PostgreSQL server hostname or IP address.</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="port"
defaultValue={5432}
render={({ field }) => (
<FormItem>
<FormLabel>Port</FormLabel>
<FormControl>
<Input type="number" placeholder="5432" {...field} />
</FormControl>
<FormDescription>PostgreSQL server port (default: 5432).</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="username"
render={({ field }) => (
<FormItem>
<FormLabel>Username</FormLabel>
<FormControl>
<Input placeholder="postgres" {...field} />
</FormControl>
<FormDescription>Database user with backup privileges.</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="password"
render={({ field }) => (
<FormItem>
<FormLabel>Password</FormLabel>
<FormControl>
<Input type="password" placeholder="••••••••" {...field} />
</FormControl>
<FormDescription>Password for database authentication.</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="database"
render={({ field }) => (
<FormItem>
<FormLabel>Database</FormLabel>
<FormControl>
<Input placeholder="myapp_production" {...field} />
</FormControl>
<FormDescription>Name of the database to backup.</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="dumpFormat"
defaultValue="custom"
render={({ field }) => (
<FormItem>
<FormLabel>Dump Format</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value || "custom"}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Select dump format" />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value="custom">Custom (Compressed)</SelectItem>
<SelectItem value="plain">Plain SQL</SelectItem>
<SelectItem value="directory">Directory</SelectItem>
</SelectContent>
</Select>
<FormDescription>Format for database dumps (custom recommended).</FormDescription>
<FormMessage />
</FormItem>
)}
/>
</>
)}
{watchedBackend === "sqlite" && (
<FormField
control={form.control}
name="path"
render={({ field }) => {
return (
<FormItem>
<FormLabel>Database File Path</FormLabel>
<FormControl>
{field.value ? (
<div className="flex items-center gap-2">
<div className="flex-1 border rounded-md p-3 bg-muted/50">
<div className="text-xs font-medium text-muted-foreground mb-1">Selected database:</div>
<div className="text-sm font-mono break-all">{field.value}</div>
</div>
<Button type="button" variant="outline" size="sm" onClick={() => field.onChange("")}>
Change
</Button>
</div>
) : (
<DirectoryBrowser onSelectPath={(path) => field.onChange(path)} selectedPath={field.value} />
)}
</FormControl>
<FormDescription>Path to the SQLite database file (.db, .sqlite, .sqlite3).</FormDescription>
<FormMessage />
</FormItem>
);
}}
/>
)}
{watchedBackend !== "directory" && watchedBackend !== "sqlite" && (
<div className="space-y-3">
<div className="flex items-center gap-2">
<Button