feat: mount volumes on startup

apps/client/app/components/status-dot.tsx

@@ -0,0 +1,49 @@
+import type { VolumeStatus } from "~/lib/types";
+import { cn } from "~/lib/utils";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+
+export const StatusDot = ({ status }: { status: VolumeStatus }) => {
+	const statusMapping = {
+		mounted: {
+			color: "bg-green-500",
+			colorLight: "bg-green-400",
+			animated: true,
+		},
+		unmounted: {
+			color: "bg-gray-500",
+			colorLight: "bg-gray-400",
+			animated: false,
+		},
+		error: {
+			color: "bg-red-500",
+			colorLight: "bg-red-400",
+			animated: true,
+		},
+		unknown: {
+			color: "bg-yellow-500",
+			colorLight: "bg-yellow-400",
+			animated: true,
+		},
+	}[status];
+
+	return (
+		<Tooltip>
+			<TooltipTrigger>
+				<span className="relative flex size-3 mx-auto">
+					{statusMapping.animated && (
+						<span
+							className={cn(
+								"absolute inline-flex h-full w-full animate-ping rounded-full opacity-75",
+								`${statusMapping.colorLight}`,
+							)}
+						/>
+					)}
+					<span className={cn("relative inline-flex size-3 rounded-full", `${statusMapping.color}`)} />
+				</span>
+			</TooltipTrigger>
+			<TooltipContent>
+				<p className="capitalize">{status}</p>
+			</TooltipContent>
+		</Tooltip>
+	);
+};

apps/client/app/components/ui/tooltip.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "~/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

apps/client/app/lib/types.ts

@@ -0,0 +1,3 @@
+import type { GetVolumeResponse } from "~/api-client";
+
+export type VolumeStatus = GetVolumeResponse["status"];

apps/client/app/routes/details.tsx

@@ -17,6 +17,7 @@ import { parseError } from "~/lib/errors";
 import { HealthchecksCard } from "~/modules/details/components/healthchecks-card";
 import type { Route } from "./+types/details";
 import { cn } from "~/lib/utils";
+import { StatusDot } from "~/components/status-dot";
 
 export const clientLoader = async ({ params }: Route.ClientLoaderArgs) => {
 	const volume = await getVolume({ path: { name: params.name ?? "" } });
@@ -89,9 +90,8 @@ export default function DetailsPage({ loaderData }: Route.ComponentProps) {
 				<div>
 					<h1 className="text-3xl font-bold mb-0 uppercase">Volume: {name}</h1>
 					<div className="text-sm font-semibold mb-2 text-muted-foreground flex items-center gap-2">
-						<span className="text-green-500 flex items-center gap-2">
-							<WifiIcon size={16} />
-							{data.status}
+						<span className="flex items-center gap-2">
+							<StatusDot status={data.status} /> {data.status[0].toUpperCase() + data.status.slice(1)}
 						</span>
 						<VolumeIcon size={14} backend={data?.config.backend} />
 					</div>

apps/client/app/routes/home.tsx

@@ -11,6 +11,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~
 import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "~/components/ui/table";
 import { VolumeIcon } from "~/components/volume-icon";
 import type { Route } from "./+types/home";
+import { StatusDot } from "~/components/status-dot";
 
 export function meta(_: Route.MetaArgs) {
 	return [
@@ -101,10 +102,7 @@ export default function Home({ loaderData }: Route.ComponentProps) {
 								</span>
 							</TableCell>
 							<TableCell className="text-center">
-								<span className="relative flex size-3 mx-auto">
-									<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75" />
-									<span className="relative inline-flex size-3 rounded-full bg-green-500" />
-								</span>
+								<StatusDot status={volume.status} />
 							</TableCell>
 						</TableRow>
 					))}

apps/client/package.json

@@ -17,6 +17,7 @@
 		"@radix-ui/react-select": "^2.2.5",
 		"@radix-ui/react-slot": "^1.2.3",
 		"@radix-ui/react-switch": "^1.2.6",
+		"@radix-ui/react-tooltip": "^1.2.8",
 		"@react-router/node": "^7.7.1",
 		"@react-router/serve": "^7.7.1",
 		"@tanstack/react-query": "^5.84.2",

apps/server/src/core/config.ts

@@ -2,16 +2,14 @@ import { type } from "arktype";
 import "dotenv/config";
 
 const envSchema = type({
-	NODE_ENV: type
-		.enumerated("development", "production", "test")
-		.default("development"),
+	NODE_ENV: type.enumerated("development", "production", "test").default("development"),
 	VOLUME_ROOT: "string",
 }).pipe((s) => ({
 	__prod__: s.NODE_ENV === "production",
 	environment: s.NODE_ENV,
 	dbFileName: "/data/ironmount.db",
 	volumeRootHost: s.VOLUME_ROOT,
-	volumeRootContainer: "/mnt/volumes",
+	volumeRootContainer: "/mounts",
 }));
 
 const parseConfig = (env: unknown) => {

apps/server/src/index.ts

@@ -7,6 +7,7 @@ import { runDbMigrations } from "./db/db";
 import { driverController } from "./modules/driver/driver.controller";
 import { volumeController } from "./modules/volumes/volume.controller";
 import { logger } from "./utils/logger";
+import { startup } from "./modules/lifecycle/startup";
 
 export const generalDescriptor = (app: Hono) =>
 	openAPISpecs(app, {
@@ -57,6 +58,8 @@ const socketPath = "/run/docker/plugins/ironmount.sock";
 		fetch: app.fetch,
 	});
 
+	await startup();
+
 	logger.info(`Server is running at http://localhost:8080 and unix socket at ${socketPath}`);
 })();
 

apps/server/src/modules/backends/backend.ts

@@ -2,6 +2,7 @@ import type { BackendStatus } from "@ironmount/schemas";
 import type { Volume } from "../../db/schema";
 import { makeDirectoryBackend } from "./directory/directory-backend";
 import { makeNfsBackend } from "./nfs/nfs-backend";
+import { config } from "../../core/config";
 
 export type VolumeBackend = {
 	mount: () => Promise<void>;
@@ -10,17 +11,17 @@ export type VolumeBackend = {
 };
 
 export const createVolumeBackend = (volume: Volume): VolumeBackend => {
-	const { config, path } = volume;
+	const path = `${config.volumeRootContainer}/${volume.name}/_data`;
 
-	switch (config.backend) {
+	switch (volume.config.backend) {
 		case "nfs": {
-			return makeNfsBackend(config, path);
+			return makeNfsBackend(volume.config, path);
 		}
 		case "directory": {
-			return makeDirectoryBackend(config, path);
+			return makeDirectoryBackend(volume.config, path);
 		}
 		default: {
-			throw new Error(`Backend ${config.backend} not implemented`);
+			throw new Error(`Backend ${volume.config.backend} not implemented`);
 		}
 	}
 };

apps/server/src/modules/backends/nfs/nfs-backend.ts

@@ -69,6 +69,11 @@ const unmount = async (path: string) => {
 				logger.error(`Error unmounting NFS volume: ${stderr}`);
 				return reject(new Error(`Failed to unmount NFS volume: ${stderr}`));
 			}
+
+			fs.rmdir(path).catch((rmdirError) => {
+				logger.error(`Failed to remove directory ${path}:`, rmdirError);
+			});
+
 			logger.info(`NFS volume unmounted successfully: ${stdout}`);
 			resolve();
 		});

apps/server/src/modules/lifecycle/startup.ts

@@ -0,0 +1,22 @@
+import { eq } from "drizzle-orm";
+import { db } from "../../db/db";
+import { logger } from "../../utils/logger";
+import { volumesTable } from "../../db/schema";
+import { createVolumeBackend } from "../backends/backend";
+
+export const startup = async () => {
+	logger.info("Mounting all volumes...");
+
+	const volumes = await db.query.volumesTable.findMany({ where: eq(volumesTable.status, "mounted") });
+
+	for (const volume of volumes) {
+		try {
+			const backend = createVolumeBackend(volume);
+			await backend.mount();
+			logger.info(`Mounted volume ${volume.name} successfully`);
+		} catch (error) {
+			logger.error(`Failed to mount volume ${volume.name}:`, error);
+			await db.update(volumesTable).set({ status: "unmounted" }).where(eq(volumesTable.name, volume.name));
+		}
+	}
+};

apps/server/src/modules/volumes/volume.controller.ts

@@ -17,7 +17,6 @@ import {
 	unmountVolumeDto,
 } from "./volume.dto";
 import { volumeService } from "./volume.service";
-import { logger } from "../../utils/logger";
 
 export const volumeController = new Hono()
 	.get("/", listVolumesDto, async (c) => {

bun.lock

@@ -19,6 +19,7 @@
         "@radix-ui/react-select": "^2.2.5",
         "@radix-ui/react-slot": "^1.2.3",
         "@radix-ui/react-switch": "^1.2.6",
+        "@radix-ui/react-tooltip": "^1.2.8",
         "@react-router/node": "^7.7.1",
         "@react-router/serve": "^7.7.1",
         "@tanstack/react-query": "^5.84.2",
@@ -295,6 +296,8 @@
 
     "@radix-ui/react-switch": ["@radix-ui/react-switch@1.2.6", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ=="],
 
+    "@radix-ui/react-tooltip": ["@radix-ui/react-tooltip@1.2.8", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-visually-hidden": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg=="],
+
     "@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg=="],
 
     "@radix-ui/react-use-controllable-state": ["@radix-ui/react-use-controllable-state@1.2.2", "", { "dependencies": { "@radix-ui/react-use-effect-event": "0.0.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg=="],

docker-compose.yml

@@ -23,5 +23,5 @@ services:
       - ./apps/server/src:/app/apps/server/src
 
       - ./data:/data
-        
+
       - /home/nicolas/ironmount/tmp:/mounts:rshared