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

feat: delete volume

Browse Source
This commit is contained in:
Nicolas Meienberger
2025-08-16 14:02:16 +02:00
parent 173858343e
commit 03a1203f7e
9 changed files with 784 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
web/app/welcome/welcome.tsx
View File

@@ -1,6 +1,5 @@
import { AArrowDownIcon, Folder } from "lucide-react";
import { Copy, Folder, Plus } from "lucide-react";
import { Button } from "~/components/ui/button";
import { Card } from "~/components/ui/card";
import { Input } from "~/components/ui/input";
import {
Select,
@@ -18,13 +17,13 @@ import {
TableHeader,
TableRow,
} from "~/components/ui/table";
import { useDeleteVolume } from "~/hooks/useDeleteVolume";
import { useVolumes } from "~/hooks/useVolumes";
import { cn } from "~/lib/utils";
export function Welcome() {
const { data } = useVolumes();
console.log(data?.volumes.map((volume) => volume.name));
const deleteVolume = useDeleteVolume();
return (
<div
@@ -37,42 +36,48 @@ export function Welcome() {
>
<div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] dark:bg-black"></div>
<main className="relative flex flex-col pt-16 p-4 container mx-auto">
<h1 className="text-2xl font-bold mb-0 uppercase">Volume Manager</h1>
<h1 className="text-3xl font-bold mb-0 uppercase">Ironmount</h1>
<h2 className="text-sm font-semibold mb-2 text-muted-foreground">
Manage your Docker volume configurations and monitor their status.
Create, manage, monitor, and automate your Docker volumes with ease.
</h2>
<div className="flex items-center gap-2 mt-4">
<Input className="w-[180px]" placeholder="Search volumes..." />
<Select>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="All status" />
</SelectTrigger>
<SelectContent>
<SelectItem value="light">Mounted</SelectItem>
<SelectItem value="dark">Unmounted</SelectItem>
<SelectItem value="system">Error</SelectItem>
</SelectContent>
</Select>
<Select>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="All backends" />
</SelectTrigger>
<SelectContent>
<SelectItem value="light">Directory</SelectItem>
<SelectItem value="dark">NFS</SelectItem>
<SelectItem value="system">SMB</SelectItem>
</SelectContent>
</Select>
<div className="flex items-center gap-2 mt-4 justify-between">
<span className="flex items-center gap-2">
<Input className="w-[180px]" placeholder="Search volumes..." />
<Select>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="All status" />
</SelectTrigger>
<SelectContent>
<SelectItem value="light">Mounted</SelectItem>
<SelectItem value="dark">Unmounted</SelectItem>
<SelectItem value="system">Error</SelectItem>
</SelectContent>
</Select>
<Select>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="All backends" />
</SelectTrigger>
<SelectContent>
<SelectItem value="light">Directory</SelectItem>
<SelectItem value="dark">NFS</SelectItem>
<SelectItem value="system">SMB</SelectItem>
</SelectContent>
</Select>
</span>
<Button className="bg-blue-900 hover:bg-blue-800">
<Plus size={16} />
Create volume
</Button>
</div>
<Table className="mt-4 border bg-white dark:bg-secondary">
<TableCaption>A list of your managed Docker volumes.</TableCaption>
<TableHeader>
<TableRow>
<TableHead className="w-[100px] uppercase">Name</TableHead>
<TableHead className="uppercase">Backend</TableHead>
<TableHead>Mountpoint</TableHead>
<TableHead className="uppercase text-left">Backend</TableHead>
<TableHead className="uppercase">Mountpoint</TableHead>
<TableHead className="uppercase text-center">Status</TableHead>
<TableHead className="text-right">Actions</TableHead>
<TableHead className="uppercase text-right">Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
@@ -80,12 +85,19 @@ export function Welcome() {
<TableRow key={volume.name}>
<TableCell className="font-medium">{volume.name}</TableCell>
<TableCell className="">
<div className="flex items-center gap-2 text-purple-300 rounded-md px-2 py-1">
<span className="mx-auto flex items-center gap-2 text-purple-800 dark:text-purple-300 rounded-md px-2 py-1">
<Folder size={10} />
Dir
</div>
</span>
</TableCell>
<TableCell>
<span className="flex items-center gap-2">
<span className="text-muted-foreground text-xs truncate bg-primary/10 rounded-md px-2 py-1">
{volume.mountpoint}
</span>
<Copy size={10} />
</span>
</TableCell>
<TableCell>{volume.mountpoint}</TableCell>
<TableCell className="">
<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>
@@ -93,8 +105,11 @@ export function Welcome() {
</span>
</TableCell>
<TableCell className="text-right">
<Button variant="outline" size="sm">
Manage
<Button
variant="destructive"
onClick={() => deleteVolume.mutate({ name: volume.name })}
>
Delete
</Button>
</TableCell>
</TableRow>