ondra/ironmount
1
1
Fork 0
mirror of https://github.com/nicotsx/ironmount.git synced 2025-12-10 12:10:51 +01:00
Code Issues Packages Projects Releases 1 Wiki Activity

fix: form reset and default values

Browse Source
This commit is contained in:
Nicolas Meienberger
2025-09-28 18:14:48 +02:00
parent 202759d9de
commit 110ebfd160
13 changed files with 133 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/client/app/api-client/client.gen.ts
View File

@@ -17,6 +17,6 @@ export type CreateClientConfig<T extends DefaultClientOptions = ClientOptions> =
export const client = createClient(
createConfig<ClientOptions>({
baseUrl: "http://localhost:3000",
baseUrl: "http://localhost:4096",
}),
);

44
apps/client/app/api-client/types.gen.ts
View File

@@ -23,7 +23,7 @@ export type ListVolumesResponses = {
exportPath: string;
server: string;
version: "3" | "4" | "4.1";
port?: number | string;
port?: number;
}
| {
backend: "smb";
@@ -32,20 +32,20 @@ export type ListVolumesResponses = {
share: string;
username: string;
vers?: "1.0" | "2.0" | "2.1" | "3.0";
port?: number | string;
port?: number;
domain?: string;
}
| {
backend: "webdav";
path: string;
server: string;
port?: number | string;
port?: number;
password?: string;
ssl?: boolean;
username?: string;
};
createdAt: number;
lastError: string;
lastError: string | null;
lastHealthCheck: number;
name: string;
path: string;
@@ -69,7 +69,7 @@ export type CreateVolumeData = {
exportPath: string;
server: string;
version: "3" | "4" | "4.1";
port?: number | string;
port?: number;
}
| {
backend: "smb";
@@ -78,14 +78,14 @@ export type CreateVolumeData = {
share: string;
username: string;
vers?: "1.0" | "2.0" | "2.1" | "3.0";
port?: number | string;
port?: number;
domain?: string;
}
| {
backend: "webdav";
path: string;
server: string;
port?: number | string;
port?: number;
password?: string;
ssl?: boolean;
username?: string;
@@ -123,7 +123,7 @@ export type TestConnectionData = {
exportPath: string;
server: string;
version: "3" | "4" | "4.1";
port?: number | string;
port?: number;
}
| {
backend: "smb";
@@ -132,14 +132,14 @@ export type TestConnectionData = {
share: string;
username: string;
vers?: "1.0" | "2.0" | "2.1" | "3.0";
port?: number | string;
port?: number;
domain?: string;
}
| {
backend: "webdav";
path: string;
server: string;
port?: number | string;
port?: number;
password?: string;
ssl?: boolean;
username?: string;
@@ -219,7 +219,7 @@ export type GetVolumeResponses = {
exportPath: string;
server: string;
version: "3" | "4" | "4.1";
port?: number | string;
port?: number;
}
| {
backend: "smb";
@@ -228,20 +228,20 @@ export type GetVolumeResponses = {
share: string;
username: string;
vers?: "1.0" | "2.0" | "2.1" | "3.0";
port?: number | string;
port?: number;
domain?: string;
}
| {
backend: "webdav";
path: string;
server: string;
port?: number | string;
port?: number;
password?: string;
ssl?: boolean;
username?: string;
};
createdAt: number;
lastError: string;
lastError: string | null;
lastHealthCheck: number;
name: string;
path: string;
@@ -266,7 +266,7 @@ export type UpdateVolumeData = {
exportPath: string;
server: string;
version: "3" | "4" | "4.1";
port?: number | string;
port?: number;
}
| {
backend: "smb";
@@ -275,14 +275,14 @@ export type UpdateVolumeData = {
share: string;
username: string;
vers?: "1.0" | "2.0" | "2.1" | "3.0";
port?: number | string;
port?: number;
domain?: string;
}
| {
backend: "webdav";
path: string;
server: string;
port?: number | string;
port?: number;
password?: string;
ssl?: boolean;
username?: string;
@@ -319,7 +319,7 @@ export type UpdateVolumeResponses = {
exportPath: string;
server: string;
version: "3" | "4" | "4.1";
port?: number | string;
port?: number;
}
| {
backend: "smb";
@@ -328,20 +328,20 @@ export type UpdateVolumeResponses = {
share: string;
username: string;
vers?: "1.0" | "2.0" | "2.1" | "3.0";
port?: number | string;
port?: number;
domain?: string;
}
| {
backend: "webdav";
path: string;
server: string;
port?: number | string;
port?: number;
password?: string;
ssl?: boolean;
username?: string;
};
createdAt: number;
lastError: string;
lastError: string | null;
lastHealthCheck: number;
name: string;
path: string;
@@ -472,5 +472,5 @@ export type HealthCheckVolumeResponses = {
export type HealthCheckVolumeResponse = HealthCheckVolumeResponses[keyof HealthCheckVolumeResponses];
export type ClientOptions = {
baseUrl: "http://localhost:3000" | (string & {});
baseUrl: "http://localhost:4096" | (string & {});
};

78
apps/client/app/components/create-volume-form.tsx
View File

@@ -3,7 +3,7 @@ import { volumeConfigSchema } from "@ironmount/schemas";
import { useMutation } from "@tanstack/react-query";
import { type } from "arktype";
import { CheckCircle, Loader2, XCircle } from "lucide-react";
import { useState } from "react";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { testConnectionMutation } from "~/api-client/@tanstack/react-query.gen";
import { slugify } from "~/lib/utils";
@@ -26,15 +26,31 @@ type Props = {
loading?: boolean;
};
const defaultValuesForType = {
directory: { backend: "directory" as const },
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 },
};
export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, formId, loading }: Props) => {
const form = useForm<FormValues>({
resolver: arktypeResolver(formSchema),
defaultValues: initialValues,
resetOptions: {
keepDefaultValues: true,
keepDirtyValues: false,
},
});
const { watch, getValues } = form;
const watchedBackend = watch("backend");
const watchedName = watch("name");
useEffect(() => {
form.reset({ name: watchedName, ...defaultValuesForType[watchedBackend as keyof typeof defaultValuesForType] });
}, [watchedBackend, watchedName, form.reset]);
const [testStatus, setTestStatus] = useState<"idle" | "loading" | "success" | "error">("idle");
const [testMessage, setTestMessage] = useState<string>("");
@@ -74,14 +90,15 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
<Form {...form}>
<form id={formId} onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input
{...field}
placeholder="Volume name"
value={field.value ?? ""}
onChange={(e) => field.onChange(slugify(e.target.value))}
max={32}
min={1}
@@ -95,6 +112,7 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
)}
/>
<FormField
control={form.control}
name="backend"
render={({ field }) => (
<FormItem>
@@ -121,12 +139,13 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
{watchedBackend === "nfs" && (
<>
<FormField
control={form.control}
name="server"
render={({ field }) => (
<FormItem>
<FormLabel>Server</FormLabel>
<FormControl>
<Input placeholder="192.168.1.100" value={field.value ?? ""} onChange={field.onChange} />
<Input placeholder="192.168.1.100" {...field} />
</FormControl>
<FormDescription>NFS server IP address or hostname.</FormDescription>
<FormMessage />
@@ -134,12 +153,13 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
)}
/>
<FormField
control={form.control}
name="exportPath"
render={({ field }) => (
<FormItem>
<FormLabel>Export Path</FormLabel>
<FormControl>
<Input placeholder="/export/data" value={field.value ?? ""} onChange={field.onChange} />
<Input placeholder="/export/data" {...field} />
</FormControl>
<FormDescription>Path to the NFS export on the server.</FormDescription>
<FormMessage />
@@ -147,17 +167,14 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
)}
/>
<FormField
control={form.control}
name="port"
defaultValue={2049}
render={({ field }) => (
<FormItem>
<FormLabel>Port</FormLabel>
<FormControl>
<Input
type="number"
placeholder="2049"
value={field.value ?? ""}
onChange={(e) => field.onChange(parseInt(e.target.value, 10) || undefined)}
/>
<Input type="number" placeholder="2049" {...field} />
</FormControl>
<FormDescription>NFS server port (default: 2049).</FormDescription>
<FormMessage />
@@ -165,11 +182,13 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
)}
/>
<FormField
control={form.control}
name="version"
defaultValue="4.1"
render={({ field }) => (
<FormItem>
<FormLabel>Version</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<Select onValueChange={field.onChange} defaultValue="4.1">
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Select NFS version" />
@@ -192,12 +211,13 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
{watchedBackend === "webdav" && (
<>
<FormField
control={form.control}
name="server"
render={({ field }) => (
<FormItem>
<FormLabel>Server</FormLabel>
<FormControl>
<Input placeholder="example.com" value={field.value ?? ""} onChange={field.onChange} />
<Input placeholder="example.com" {...field} />
</FormControl>
<FormDescription>WebDAV server hostname or IP address.</FormDescription>
<FormMessage />
@@ -205,12 +225,13 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
)}
/>
<FormField
control={form.control}
name="path"
render={({ field }) => (
<FormItem>
<FormLabel>Path</FormLabel>
<FormControl>
<Input placeholder="/webdav" value={field.value ?? ""} onChange={field.onChange} />
<Input placeholder="/webdav" {...field} />
</FormControl>
<FormDescription>Path to the WebDAV directory on the server.</FormDescription>
<FormMessage />
@@ -218,12 +239,13 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
)}
/>
<FormField
control={form.control}
name="username"
render={({ field }) => (
<FormItem>
<FormLabel>Username (Optional)</FormLabel>
<FormControl>
<Input placeholder="admin" value={field.value ?? ""} onChange={field.onChange} />
<Input placeholder="admin" {...field} />
</FormControl>
<FormDescription>Username for WebDAV authentication (optional).</FormDescription>
<FormMessage />
@@ -231,12 +253,13 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
)}
/>
<FormField
control={form.control}
name="password"
render={({ field }) => (
<FormItem>
<FormLabel>Password (Optional)</FormLabel>
<FormControl>
<Input type="password" placeholder="••••••••" value={field.value ?? ""} onChange={field.onChange} />
<Input type="password" placeholder="••••••••" {...field} />
</FormControl>
<FormDescription>Password for WebDAV authentication (optional).</FormDescription>
<FormMessage />
@@ -244,17 +267,14 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
)}
/>
<FormField
control={form.control}
name="port"
defaultValue={80}
render={({ field }) => (
<FormItem>
<FormLabel>Port</FormLabel>
<FormControl>
<Input
type="number"
placeholder="80"
value={field.value ?? ""}
onChange={(e) => field.onChange(parseInt(e.target.value, 10) || undefined)}
/>
<Input type="number" placeholder="80" {...field} />
</FormControl>
<FormDescription>WebDAV server port (default: 80 for HTTP, 443 for HTTPS).</FormDescription>
<FormMessage />
@@ -262,7 +282,9 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
)}
/>
<FormField
control={form.control}
name="ssl"
defaultValue={false}
render={({ field }) => (
<FormItem>
<FormLabel>Use SSL/HTTPS</FormLabel>
@@ -288,6 +310,7 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
{watchedBackend === "smb" && (
<>
<FormField
control={form.control}
name="server"
render={({ field }) => (
<FormItem>
@@ -301,6 +324,7 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
)}
/>
<FormField
control={form.control}
name="share"
render={({ field }) => (
<FormItem>
@@ -314,6 +338,7 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
)}
/>
<FormField
control={form.control}
name="username"
render={({ field }) => (
<FormItem>
@@ -327,6 +352,7 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
)}
/>
<FormField
control={form.control}
name="password"
render={({ field }) => (
<FormItem>
@@ -340,7 +366,9 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
)}
/>
<FormField
control={form.control}
name="vers"
defaultValue="3.0"
render={({ field }) => (
<FormItem>
<FormLabel>SMB Version</FormLabel>
@@ -363,12 +391,13 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
)}
/>
<FormField
control={form.control}
name="domain"
render={({ field }) => (
<FormItem>
<FormLabel>Domain (Optional)</FormLabel>
<FormControl>
<Input placeholder="WORKGROUP" value={field.value ?? ""} onChange={field.onChange} />
<Input placeholder="WORKGROUP" value={field.value} onChange={field.onChange} />
</FormControl>
<FormDescription>Domain or workgroup for authentication (optional).</FormDescription>
<FormMessage />
@@ -376,7 +405,9 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
)}
/>
<FormField
control={form.control}
name="port"
defaultValue={445}
render={({ field }) => (
<FormItem>
<FormLabel>Port</FormLabel>
@@ -384,7 +415,8 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
<Input
type="number"
placeholder="445"
value={field.value ?? ""}
value={field.value}
defaultValue={445}
onChange={(e) => field.onChange(parseInt(e.target.value, 10) || undefined)}
/>
</FormControl>

11
apps/client/app/modules/details/tabs/docker.tsx
View File

@@ -28,8 +28,15 @@ export const DockerTabContent = ({ volume }: Props) => {
const dockerRunCommand = `docker run -v im-${volume.name}:/path/in/container nginx:latest`;
const containersQuery = getContainersUsingVolumeOptions({ path: { name: volume.name } });
const { data: containersData, isLoading, error } = useQuery(containersQuery);
const {
data: containersData,
isLoading,
error,
} = useQuery({
...getContainersUsingVolumeOptions({ path: { name: volume.name } }),
refetchInterval: 10000,
refetchOnWindowFocus: true,
});
const containers = containersData?.containers || [];

3
apps/server/package.json
View File

@@ -9,6 +9,7 @@
},
"dependencies": {
"@hono/arktype-validator": "^2.0.1",
"@hono/standard-validator": "^0.1.5",
"@ironmount/schemas": "workspace:*",
"@scalar/hono-api-reference": "^0.9.13",
"arktype": "^2.1.20",
@@ -16,7 +17,7 @@
"dotenv": "^17.2.1",
"drizzle-orm": "^0.44.4",
"hono": "^4.9.2",
"hono-openapi": "^0.4.8",
"hono-openapi": "^1.1.0",
"http-errors-enhanced": "^3.0.2",
"node-cron": "^4.2.1",
"slugify": "^1.6.6",

6
apps/server/src/index.ts
View File

@@ -3,7 +3,7 @@ import { Scalar } from "@scalar/hono-api-reference";
import { Hono } from "hono";
import { serveStatic } from "hono/bun";
import { logger as honoLogger } from "hono/logger";
import { openAPISpecs } from "hono-openapi";
import { openAPIRouteHandler } from "hono-openapi";
import { runDbMigrations } from "./db/db";
import { driverController } from "./modules/driver/driver.controller";
import { startup } from "./modules/lifecycle/startup";
@@ -12,14 +12,14 @@ import { handleServiceError } from "./utils/errors";
import { logger } from "./utils/logger";
export const generalDescriptor = (app: Hono) =>
openAPISpecs(app, {
openAPIRouteHandler(app, {
documentation: {
info: {
title: "Ironmount API",
version: "1.0.0",
description: "API for managing volumes",
},
servers: [{ url: "http://localhost:3000", description: "Development Server" }],
servers: [{ url: "http://localhost:4096", description: "Development Server" }],
},
});

13
apps/server/src/modules/backends/nfs/nfs-backend.ts
View File

@@ -1,12 +1,12 @@
import * as fs from "node:fs/promises";
import * as os from "node:os";
import { BACKEND_STATUS, type BackendConfig } from "@ironmount/schemas";
import type { VolumeBackend } from "../backend";
import { logger } from "../../../utils/logger";
import { withTimeout } from "../../../utils/timeout";
import { OPERATION_TIMEOUT } from "../../../core/constants";
import { toMessage } from "../../../utils/errors";
import { logger } from "../../../utils/logger";
import { getMountForPath } from "../../../utils/mountinfo";
import { withTimeout } from "../../../utils/timeout";
import type { VolumeBackend } from "../backend";
import { createTestFile, executeMount, executeUnmount } from "../utils/backend-utils";
const mount = async (config: BackendConfig, path: string) => {
@@ -78,10 +78,9 @@ const unmount = async (path: string) => {
try {
return await withTimeout(run(), OPERATION_TIMEOUT, "NFS unmount");
} catch (err: any) {
const msg = err.stderr?.toString().trim() || err.message;
logger.error("Error unmounting NFS volume", { path, error: msg });
return { status: BACKEND_STATUS.error, error: msg };
} catch (err) {
logger.error("Error unmounting NFS volume", { path, error: toMessage(err) });
return { status: BACKEND_STATUS.error, error: toMessage(err) };
}
};

2
apps/server/src/modules/volumes/volume.controller.ts
View File

@@ -1,5 +1,5 @@
import { Hono } from "hono";
import { validator } from "hono-openapi/arktype";
import { validator } from "hono-openapi";
import {
createVolumeBody,
createVolumeDto,

23
apps/server/src/modules/volumes/volume.dto.ts
View File

@@ -1,7 +1,6 @@
import { volumeConfigSchema } from "@ironmount/schemas";
import { volumeConfigSchemaNoUndefined } from "@ironmount/schemas";
import { type } from "arktype";
import { describeRoute } from "hono-openapi";
import { resolver } from "hono-openapi/arktype";
import { describeRoute, resolver } from "hono-openapi";
const volumeSchema = type({
name: "string",
@@ -12,7 +11,7 @@ const volumeSchema = type({
createdAt: "number",
updatedAt: "number",
lastHealthCheck: "number",
config: volumeConfigSchema,
config: volumeConfigSchemaNoUndefined,
autoRemount: "boolean",
});
@@ -30,7 +29,6 @@ export const listVolumesDto = describeRoute({
description: "List all volumes",
tags: ["Volumes"],
operationId: "listVolumes",
validateResponse: true,
responses: {
200: {
description: "A list of volumes",
@@ -48,7 +46,7 @@ export const listVolumesDto = describeRoute({
*/
export const createVolumeBody = type({
name: "string",
config: volumeConfigSchema,
config: volumeConfigSchemaNoUndefined,
});
export const createVolumeResponse = type({
@@ -62,7 +60,6 @@ export const createVolumeResponse = type({
export const createVolumeDto = describeRoute({
description: "Create a new volume",
operationId: "createVolume",
validateResponse: true,
tags: ["Volumes"],
responses: {
201: {
@@ -86,7 +83,6 @@ export const deleteVolumeResponse = type({
export const deleteVolumeDto = describeRoute({
description: "Delete a volume",
operationId: "deleteVolume",
validateResponse: true,
tags: ["Volumes"],
responses: {
200: {
@@ -118,7 +114,6 @@ export type GetVolumeResponseDto = typeof getVolumeResponse.infer;
export const getVolumeDto = describeRoute({
description: "Get a volume by name",
operationId: "getVolume",
validateResponse: true,
tags: ["Volumes"],
responses: {
200: {
@@ -140,7 +135,7 @@ export const getVolumeDto = describeRoute({
*/
export const updateVolumeBody = type({
autoRemount: "boolean?",
config: volumeConfigSchema.optional(),
config: volumeConfigSchemaNoUndefined.optional(),
});
export type UpdateVolumeBody = typeof updateVolumeBody.infer;
@@ -153,7 +148,6 @@ export const updateVolumeResponse = type({
export const updateVolumeDto = describeRoute({
description: "Update a volume's configuration",
operationId: "updateVolume",
validateResponse: true,
tags: ["Volumes"],
responses: {
200: {
@@ -176,7 +170,7 @@ export type UpdateVolumeResponseDto = typeof updateVolumeResponse.infer;
* Test connection
*/
export const testConnectionBody = type({
config: volumeConfigSchema,
config: volumeConfigSchemaNoUndefined,
});
export const testConnectionResponse = type({
@@ -187,7 +181,6 @@ export const testConnectionResponse = type({
export const testConnectionDto = describeRoute({
description: "Test connection to backend",
operationId: "testConnection",
validateResponse: true,
tags: ["Volumes"],
responses: {
200: {
@@ -212,7 +205,6 @@ export const mountVolumeResponse = type({
export const mountVolumeDto = describeRoute({
description: "Mount a volume",
operationId: "mountVolume",
validateResponse: true,
tags: ["Volumes"],
responses: {
200: {
@@ -240,7 +232,6 @@ export const unmountVolumeResponse = type({
export const unmountVolumeDto = describeRoute({
description: "Unmount a volume",
operationId: "unmountVolume",
validateResponse: true,
tags: ["Volumes"],
responses: {
200: {
@@ -265,7 +256,6 @@ export const healthCheckResponse = type({
export const healthCheckDto = describeRoute({
description: "Perform a health check on a volume",
operationId: "healthCheckVolume",
validateResponse: true,
tags: ["Volumes"],
responses: {
200: {
@@ -300,7 +290,6 @@ export type ListContainersResponseDto = typeof listContainersResponse.infer;
export const getContainersDto = describeRoute({
description: "Get containers using a volume by name",
operationId: "getContainersUsingVolume",
validateResponse: true,
tags: ["Volumes"],
responses: {
200: {

5
apps/server/tsconfig.json
View File

@@ -13,9 +13,6 @@
"noImplicitOverride": true,
"module": "preserve",
"noEmit": true,
"lib": ["es2022"],
"paths": {
"~/*": ["./src/*"]
},
"lib": ["es2022"]
}
}