mirror of
https://github.com/nicotsx/ironmount.git
synced 2025-12-10 12:10:51 +01:00
feat: add webdav support
This commit is contained in:
Nicolas Meienberger
@@ -27,6 +27,22 @@ export type ListVolumesResponses = {
|
||||
}
|
||||
| {
|
||||
backend: "smb";
|
||||
password: string;
|
||||
server: string;
|
||||
share: string;
|
||||
username: string;
|
||||
vers?: "1.0" | "2.0" | "2.1" | "3.0";
|
||||
port?: number | string;
|
||||
domain?: string;
|
||||
}
|
||||
| {
|
||||
backend: "webdav";
|
||||
path: string;
|
||||
server: string;
|
||||
port?: number | string;
|
||||
password?: string;
|
||||
ssl?: boolean;
|
||||
username?: string;
|
||||
};
|
||||
createdAt: number;
|
||||
lastError: string;
|
||||
@@ -34,7 +50,7 @@ export type ListVolumesResponses = {
|
||||
name: string;
|
||||
path: string;
|
||||
status: "error" | "mounted" | "unknown" | "unmounted";
|
||||
type: "directory" | "nfs" | "smb";
|
||||
type: "directory" | "nfs" | "smb" | "webdav";
|
||||
updatedAt: number;
|
||||
}>;
|
||||
};
|
||||
@@ -57,6 +73,22 @@ export type CreateVolumeData = {
|
||||
}
|
||||
| {
|
||||
backend: "smb";
|
||||
password: string;
|
||||
server: string;
|
||||
share: string;
|
||||
username: string;
|
||||
vers?: "1.0" | "2.0" | "2.1" | "3.0";
|
||||
port?: number | string;
|
||||
domain?: string;
|
||||
}
|
||||
| {
|
||||
backend: "webdav";
|
||||
path: string;
|
||||
server: string;
|
||||
port?: number | string;
|
||||
password?: string;
|
||||
ssl?: boolean;
|
||||
username?: string;
|
||||
};
|
||||
name: string;
|
||||
};
|
||||
@@ -95,6 +127,22 @@ export type TestConnectionData = {
|
||||
}
|
||||
| {
|
||||
backend: "smb";
|
||||
password: string;
|
||||
server: string;
|
||||
share: string;
|
||||
username: string;
|
||||
vers?: "1.0" | "2.0" | "2.1" | "3.0";
|
||||
port?: number | string;
|
||||
domain?: string;
|
||||
}
|
||||
| {
|
||||
backend: "webdav";
|
||||
path: string;
|
||||
server: string;
|
||||
port?: number | string;
|
||||
password?: string;
|
||||
ssl?: boolean;
|
||||
username?: string;
|
||||
};
|
||||
};
|
||||
path?: never;
|
||||
@@ -175,6 +223,22 @@ export type GetVolumeResponses = {
|
||||
}
|
||||
| {
|
||||
backend: "smb";
|
||||
password: string;
|
||||
server: string;
|
||||
share: string;
|
||||
username: string;
|
||||
vers?: "1.0" | "2.0" | "2.1" | "3.0";
|
||||
port?: number | string;
|
||||
domain?: string;
|
||||
}
|
||||
| {
|
||||
backend: "webdav";
|
||||
path: string;
|
||||
server: string;
|
||||
port?: number | string;
|
||||
password?: string;
|
||||
ssl?: boolean;
|
||||
username?: string;
|
||||
};
|
||||
createdAt: number;
|
||||
lastError: string;
|
||||
@@ -182,7 +246,7 @@ export type GetVolumeResponses = {
|
||||
name: string;
|
||||
path: string;
|
||||
status: "error" | "mounted" | "unknown" | "unmounted";
|
||||
type: "directory" | "nfs" | "smb";
|
||||
type: "directory" | "nfs" | "smb" | "webdav";
|
||||
updatedAt: number;
|
||||
};
|
||||
};
|
||||
@@ -205,6 +269,22 @@ export type UpdateVolumeData = {
|
||||
}
|
||||
| {
|
||||
backend: "smb";
|
||||
password: string;
|
||||
server: string;
|
||||
share: string;
|
||||
username: string;
|
||||
vers?: "1.0" | "2.0" | "2.1" | "3.0";
|
||||
port?: number | string;
|
||||
domain?: string;
|
||||
}
|
||||
| {
|
||||
backend: "webdav";
|
||||
path: string;
|
||||
server: string;
|
||||
port?: number | string;
|
||||
password?: string;
|
||||
ssl?: boolean;
|
||||
username?: string;
|
||||
};
|
||||
};
|
||||
path: {
|
||||
@@ -241,6 +321,22 @@ export type UpdateVolumeResponses = {
|
||||
}
|
||||
| {
|
||||
backend: "smb";
|
||||
password: string;
|
||||
server: string;
|
||||
share: string;
|
||||
username: string;
|
||||
vers?: "1.0" | "2.0" | "2.1" | "3.0";
|
||||
port?: number | string;
|
||||
domain?: string;
|
||||
}
|
||||
| {
|
||||
backend: "webdav";
|
||||
path: string;
|
||||
server: string;
|
||||
port?: number | string;
|
||||
password?: string;
|
||||
ssl?: boolean;
|
||||
username?: string;
|
||||
};
|
||||
createdAt: number;
|
||||
name: string;
|
||||
|
||||
@@ -62,7 +62,7 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
|
||||
const handleTestConnection = async () => {
|
||||
const formValues = getValues();
|
||||
|
||||
if (formValues.backend === "nfs" || formValues.backend === "smb") {
|
||||
if (formValues.backend === "nfs" || formValues.backend === "smb" || formValues.backend === "webdav") {
|
||||
testBackendConnection.mutate({
|
||||
body: { config: formValues },
|
||||
});
|
||||
@@ -108,6 +108,7 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
|
||||
<SelectItem value="directory">Directory</SelectItem>
|
||||
<SelectItem value="nfs">NFS</SelectItem>
|
||||
<SelectItem value="smb">SMB</SelectItem>
|
||||
<SelectItem value="webdav">WebDAV</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormDescription>Choose the storage backend for this volume.</FormDescription>
|
||||
@@ -187,6 +188,102 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
|
||||
</>
|
||||
)}
|
||||
|
||||
{watchedBackend === "webdav" && (
|
||||
<>
|
||||
<FormField
|
||||
name="server"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Server</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="example.com" value={field.value ?? ""} onChange={field.onChange} />
|
||||
</FormControl>
|
||||
<FormDescription>WebDAV server hostname or IP address.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
name="path"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Path</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="/webdav" value={field.value ?? ""} onChange={field.onChange} />
|
||||
</FormControl>
|
||||
<FormDescription>Path to the WebDAV directory on the server.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
name="username"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Username (Optional)</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="admin" value={field.value ?? ""} onChange={field.onChange} />
|
||||
</FormControl>
|
||||
<FormDescription>Username for WebDAV authentication (optional).</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Password (Optional)</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" placeholder="••••••••" value={field.value ?? ""} onChange={field.onChange} />
|
||||
</FormControl>
|
||||
<FormDescription>Password for WebDAV authentication (optional).</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
name="port"
|
||||
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)}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>WebDAV server port (default: 80 for HTTP, 443 for HTTPS).</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
name="ssl"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Use SSL/HTTPS</FormLabel>
|
||||
<FormControl>
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={field.value ?? false}
|
||||
onChange={(e) => field.onChange(e.target.checked)}
|
||||
className="rounded border-gray-300"
|
||||
/>
|
||||
<span className="text-sm">Enable HTTPS for secure connections</span>
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormDescription>Use HTTPS instead of HTTP for secure connections.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{watchedBackend === "smb" && (
|
||||
<>
|
||||
<FormField
|
||||
@@ -373,6 +470,41 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{watchedBackend === "webdav" && (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={handleTestConnection}
|
||||
disabled={testStatus === "loading" || !form.watch("server") || !form.watch("path")}
|
||||
className="flex-1"
|
||||
>
|
||||
{testStatus === "loading" && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
{testStatus === "success" && <CheckCircle className="mr-2 h-4 w-4 text-green-500" />}
|
||||
{testStatus === "error" && <XCircle className="mr-2 h-4 w-4 text-red-500" />}
|
||||
{testStatus === "idle" && "Test Connection"}
|
||||
{testStatus === "loading" && "Testing..."}
|
||||
{testStatus === "success" && "Connection Successful"}
|
||||
{testStatus === "error" && "Test Failed"}
|
||||
</Button>
|
||||
</div>
|
||||
{testMessage && (
|
||||
<div
|
||||
className={`text-sm p-2 rounded-md ${
|
||||
testStatus === "success"
|
||||
? "bg-green-50 text-green-700 border border-green-200"
|
||||
: testStatus === "error"
|
||||
? "bg-red-50 text-red-700 border border-red-200"
|
||||
: "bg-gray-50 text-gray-700 border border-gray-200"
|
||||
}`}
|
||||
>
|
||||
{testMessage}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import type { BackendType } from "@ironmount/schemas";
|
||||
import { Folder, Server, Share2 } from "lucide-react";
|
||||
import { Cloud, Folder, Server, Share2 } from "lucide-react";
|
||||
|
||||
type VolumeIconProps = {
|
||||
backend: BackendType;
|
||||
@@ -26,6 +26,12 @@ const getIconAndColor = (backend: BackendType) => {
|
||||
color: "text-purple-600 dark:text-purple-400",
|
||||
label: "SMB",
|
||||
};
|
||||
case "webdav":
|
||||
return {
|
||||
icon: Cloud,
|
||||
color: "text-green-600 dark:text-green-400",
|
||||
label: "WebDAV",
|
||||
};
|
||||
default:
|
||||
return {
|
||||
icon: Folder,
|
||||
|
||||
@@ -18,7 +18,7 @@ export function StorageChart({ statfs }: Props) {
|
||||
{
|
||||
name: "Used",
|
||||
value: statfs.used,
|
||||
fill: "blue",
|
||||
fill: "#2B7EFF",
|
||||
},
|
||||
{
|
||||
name: "Free",
|
||||
@@ -29,19 +29,7 @@ export function StorageChart({ statfs }: Props) {
|
||||
[statfs],
|
||||
);
|
||||
|
||||
const chartConfig = {
|
||||
value: {
|
||||
label: "Storage",
|
||||
},
|
||||
used: {
|
||||
label: "Used",
|
||||
color: "hsl(var(--destructive))",
|
||||
},
|
||||
free: {
|
||||
label: "Free",
|
||||
color: "hsl(var(--primary))",
|
||||
},
|
||||
} satisfies ChartConfig;
|
||||
const chartConfig = {} satisfies ChartConfig;
|
||||
|
||||
const usagePercentage = React.useMemo(() => {
|
||||
return Math.round((statfs.used / statfs.total) * 100);
|
||||
@@ -75,37 +63,70 @@ export function StorageChart({ statfs }: Props) {
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="flex-1 pb-0">
|
||||
<ChartContainer config={chartConfig} className="mx-auto aspect-square max-h-[250px]">
|
||||
<PieChart>
|
||||
<ChartTooltip
|
||||
cursor={false}
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
hideLabel
|
||||
formatter={(value, name) => [<ByteSize key={name} bytes={value as number} />, name]}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Pie data={chartData} dataKey="value" nameKey="name" innerRadius={60} strokeWidth={5}>
|
||||
<Label
|
||||
content={({ viewBox }) => {
|
||||
if (viewBox && "cx" in viewBox && "cy" in viewBox) {
|
||||
return (
|
||||
<text x={viewBox.cx} y={viewBox.cy} textAnchor="middle" dominantBaseline="middle">
|
||||
<tspan x={viewBox.cx} y={viewBox.cy} className="fill-foreground text-3xl font-bold">
|
||||
{usagePercentage}%
|
||||
</tspan>
|
||||
<tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className="fill-muted-foreground">
|
||||
Used
|
||||
</tspan>
|
||||
</text>
|
||||
);
|
||||
}
|
||||
}}
|
||||
<div className="">
|
||||
<ChartContainer config={chartConfig} className="mx-auto aspect-square max-h-[250px]">
|
||||
<PieChart>
|
||||
<ChartTooltip
|
||||
cursor={false}
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
hideLabel
|
||||
formatter={(value, name) => [<ByteSize key={name} bytes={value as number} />, name]}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Pie>
|
||||
</PieChart>
|
||||
</ChartContainer>
|
||||
<Pie data={chartData} dataKey="value" nameKey="name" innerRadius={60} strokeWidth={5}>
|
||||
<Label
|
||||
content={({ viewBox }) => {
|
||||
if (viewBox && "cx" in viewBox && "cy" in viewBox) {
|
||||
return (
|
||||
<text x={viewBox.cx} y={viewBox.cy} textAnchor="middle" dominantBaseline="middle">
|
||||
<tspan x={viewBox.cx} y={viewBox.cy} className="fill-foreground text-3xl font-bold">
|
||||
{usagePercentage}%
|
||||
</tspan>
|
||||
<tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className="fill-muted-foreground">
|
||||
Used
|
||||
</tspan>
|
||||
</text>
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Pie>
|
||||
</PieChart>
|
||||
</ChartContainer>
|
||||
<div className="flex flex-col h-full justify-center">
|
||||
<div className="grid gap-4 w-full">
|
||||
<div className="flex items-center justify-between p-3 rounded-lg bg-muted/50">
|
||||
<div className="flex items-center gap-3">
|
||||
<HardDrive className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="font-medium">Total Capacity</span>
|
||||
</div>
|
||||
<ByteSize bytes={statfs.total} className="font-mono text-sm" />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between p-3 rounded-lg bg-blue-500/10">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-4 w-4 rounded-full bg-blue-500" />
|
||||
<span className="font-medium">Used Space</span>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<ByteSize bytes={statfs.used} className="font-mono text-sm" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between p-3 rounded-lg bg-primary/10">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-4 w-4 rounded-full bg-primary" />
|
||||
<span className="font-medium">Free Space</span>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<ByteSize bytes={statfs.free} className="font-mono text-sm" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
@@ -1,73 +0,0 @@
|
||||
import { Database, HardDrive, Unplug } from "lucide-react";
|
||||
import { ByteSize } from "~/components/bytes-size";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
|
||||
import type { StatFs } from "~/lib/types";
|
||||
|
||||
type Props = {
|
||||
statfs: StatFs;
|
||||
};
|
||||
|
||||
export function StorageInfoCard({ statfs }: Props) {
|
||||
const isEmpty = !statfs.total;
|
||||
|
||||
if (isEmpty) {
|
||||
return (
|
||||
<Card className="flex flex-col h-full text-sm">
|
||||
<CardHeader className="items-center pb-0">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Database className="h-4 w-4" />
|
||||
Storage Usage
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="flex-1 pb-10 flex flex-col items-center justify-center text-center">
|
||||
<Unplug className="mb-4 h-5 w-5 text-muted-foreground" />
|
||||
<p className="text-muted-foreground">No storage data available. Mount the volume to see usage statistics.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="h-full text-sm">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Database className="h-4 w-4" />
|
||||
Storage Details
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex flex-col h-full justify-center">
|
||||
<div className="grid gap-4 w-full">
|
||||
<div className="flex items-center justify-between p-3 rounded-lg bg-muted/50">
|
||||
<div className="flex items-center gap-3">
|
||||
<HardDrive className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="font-medium">Total Capacity</span>
|
||||
</div>
|
||||
<ByteSize bytes={statfs.total} className="font-mono text-sm" />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between p-3 rounded-lg bg-blue-500/10">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-4 w-4 rounded-full bg-blue-500" />
|
||||
<span className="font-medium">Used Space</span>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<ByteSize bytes={statfs.used} className="font-mono text-sm" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between p-3 rounded-lg bg-primary/10">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-4 w-4 rounded-full bg-primary" />
|
||||
<span className="font-medium">Free Space</span>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<ByteSize bytes={statfs.free} className="font-mono text-sm" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -3,7 +3,6 @@ import { Card } from "~/components/ui/card";
|
||||
import type { StatFs, Volume } from "~/lib/types";
|
||||
import { HealthchecksCard } from "../components/healthchecks-card";
|
||||
import { StorageChart } from "../components/storage-chart";
|
||||
import { StorageInfoCard } from "../components/storage-info-card";
|
||||
|
||||
type Props = {
|
||||
volume: Volume;
|
||||
@@ -19,12 +18,9 @@ export const VolumeInfoTabContent = ({ volume, statfs }: Props) => {
|
||||
<div className="lg:col-span-2 lg:row-span-1">
|
||||
<HealthchecksCard volume={volume} />
|
||||
</div>
|
||||
<div className="lg:col-span-1">
|
||||
<div className="lg:col-span-2">
|
||||
<StorageChart statfs={statfs} />
|
||||
</div>
|
||||
<div className="lg:col-span-1">
|
||||
<StorageInfoCard statfs={statfs} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
"build": "react-router build",
|
||||
"dev": "react-router dev",
|
||||
"start": "react-router-serve ./build/server/index.js",
|
||||
"typecheck": "react-router typegen && tsc"
|
||||
"tsc": "react-router typegen && tsc"
|
||||
},
|
||||
"dependencies": {
|
||||
"@hookform/resolvers": "^5.2.1",
|
||||
@@ -52,6 +52,7 @@
|
||||
"tw-animate-css": "^1.3.6",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.3",
|
||||
"vite-bundle-analyzer": "^1.2.3",
|
||||
"vite-tsconfig-paths": "^5.1.4"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,9 +2,10 @@ import { reactRouter } from "@react-router/dev/vite";
|
||||
import tailwindcss from "@tailwindcss/vite";
|
||||
import { defineConfig } from "vite";
|
||||
import tsconfigPaths from "vite-tsconfig-paths";
|
||||
import { analyzer } from "vite-bundle-analyzer";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
|
||||
plugins: [tailwindcss(), reactRouter(), tsconfigPaths(), analyzer()],
|
||||
server: {
|
||||
host: true,
|
||||
port: 3000,
|
||||
|
||||
Reference in New Issue
Block a user