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: volume stats & charts

Browse Source
This commit is contained in:
Nicolas Meienberger
2025-09-25 21:16:55 +02:00
parent c261590ea3
commit 6b386d28d6
12 changed files with 626 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
apps/client/app/modules/details/tabs/info.tsx
View File

@@ -1,8 +1,9 @@
import { CreateVolumeForm } from "~/components/create-volume-form";
import { Card } from "~/components/ui/card";
import { HealthchecksCard } from "../components/healthchecks-card";
import type { StatFs, Volume } from "~/lib/types";
import { ByteSize } from "~/components/bytes-size";
import { HealthchecksCard } from "../components/healthchecks-card";
import { StorageChart } from "../components/storage-chart";
import { StorageInfoCard } from "../components/storage-info-card";
type Props = {
volume: Volume;
@@ -11,19 +12,19 @@ type Props = {
export const VolumeInfoTabContent = ({ volume, statfs }: Props) => {
return (
<div className="grid gap-4 grid-cols-1 lg:grid-cols-3 lg:grid-rows-[auto_1fr]">
<div className="grid gap-3 grid-cols-1 lg:grid-cols-4 lg:grid-rows-[auto_auto]">
<Card className="p-6 lg:col-span-2 lg:row-span-2">
<CreateVolumeForm initialValues={{ ...volume, ...volume.config }} onSubmit={console.log} />
</Card>
<HealthchecksCard volume={volume} />
<Card className="p-6 h-full">
<h2 className="text-lg font-medium">Volume Information</h2>
Total: <ByteSize bytes={statfs.total} />
<br />
Free: <ByteSize bytes={statfs.free} />
<br />
Used: <ByteSize bytes={statfs.used} />
</Card>
<div className="lg:col-span-2 lg:row-span-1">
<HealthchecksCard volume={volume} />
</div>
<div className="lg:col-span-1">
<StorageChart statfs={statfs} />
</div>
<div className="lg:col-span-1">
<StorageInfoCard statfs={statfs} />
</div>
</div>
);
};