homeio

1"use client";
2
3import { HardDrive } from "@/components/icons/platform-icons";
4import { formatBytesCompact } from "@/lib/client/format";
5import type { DiskMediaType, DiskMonitorEntry } from "@/lib/shared/contracts/disks";
6import { PANEL_INSET } from "@/lib/ui/surface-tokens";
7import { cn } from "@/lib/utils";
8
9const MEDIA_LABEL: Record<DiskMediaType, string> = {
10  ssd: "SSD",
11  hdd: "HDD",
12  nvme: "NVMe",
13  removable: "Removable",
14  unknown: "Disk",
15};
16
17export function formatMegabytesPerSecond(value: number) {
18  return `${value < 10 ? value.toFixed(2) : value.toFixed(1)} MB/s`;
19}
20
21function formatPowerOn(hours: number) {
22  return hours >= 48 ? `${Math.round(hours / 24).toLocaleString()} days` : `${hours} h`;
23}
24
25function Badge({ children, className }: { children: React.ReactNode; className?: string }) {
26  return (
27    <span className={cn("rounded px-1.5 py-px text-[10px] font-medium", className ?? "bg-muted/40 text-muted-foreground")}>
28      {children}
29    </span>
30  );
31}
32
33function Row({ label, value }: { label: string; value: string }) {
34  return (
35    <div className="flex items-center justify-between gap-3 py-1.5">
36      <span className="shrink-0 text-xs text-muted-foreground">{label}</span>
37      <span className="truncate font-mono text-xs text-foreground" title={value}>
38        {value}
39      </span>
40    </div>
41  );
42}
43
44// VM disks report a PCI id such as 0x1af4 instead of a vendor or model name.
45function readableName(value: string | null) {
46  return value && !/^0x[0-9a-f]+$/i.test(value) ? value : null;
47}
48
49export function DiskMonitorCard({ disk, inContainer = false }: { disk: DiskMonitorEntry; inContainer?: boolean }) {
50  const health =
51    disk.health === "healthy"
52      ? { label: "Healthy", className: "bg-status-green/12 text-status-green" }
53      : disk.health === "degraded"
54        ? { label: "Failing", className: "bg-status-red/12 text-status-red" }
55        : null;
56
57  return (
58    <div className={cn(PANEL_INSET, "flex flex-col gap-2 p-3")}>
59      <div className="flex items-center gap-2">
60        <div className="flex size-7 shrink-0 items-center justify-center rounded-lg border border-glass-border bg-background/55">
61          <HardDrive className="size-3.5 text-chart-4" />
62        </div>
63        <div className="min-w-0 flex-1">
64          <div className="flex items-center gap-1.5">
65            <span className="truncate font-mono text-sm font-medium text-foreground">{disk.device}</span>
66            <Badge>{MEDIA_LABEL[disk.mediaType]}</Badge>
67            {/* NVMe disks report nvme as their bus too; one badge is enough. */}
68            {disk.transport && disk.transport.toUpperCase() !== MEDIA_LABEL[disk.mediaType].toUpperCase() ? (
69              <Badge>{disk.transport.toUpperCase()}</Badge>
70            ) : null}
71          </div>
72          <span className="block truncate text-[11px] text-muted-foreground/70">
73            {[readableName(disk.vendor), readableName(disk.model)].filter(Boolean).join(" ") || "Unknown model"}
74          </span>
75        </div>
76        {health ? <Badge className={health.className}>{health.label}</Badge> : null}
77      </div>
78
79      <div className="grid grid-cols-2 gap-2">
80        {[
81          { label: "Read", value: disk.readBytesPerSec, color: "text-chart-4" },
82          { label: "Write", value: disk.writeBytesPerSec, color: "text-status-amber" },
83        ].map(({ label, value, color }) => (
84          <div key={label} className={cn(PANEL_INSET, "flex flex-col gap-0.5 px-3 py-2")}>
85            <span className="text-[10px] uppercase tracking-[0.12em] text-muted-foreground/60">{label}</span>
86            <span className={cn("font-mono text-sm font-semibold tabular-nums", color)}>
87              {value === null ? "--" : formatMegabytesPerSecond(value / 1_000_000)}
88            </span>
89          </div>
90        ))}
91      </div>
92
93      <div className="divide-y divide-glass-border/40">
94        <Row label="Size" value={disk.sizeBytes === null ? "--" : formatBytesCompact(disk.sizeBytes)} />
95        <Row
96          label="Temperature"
97          value={disk.temperatureCelsius === null ? "Not reported" : `${disk.temperatureCelsius} °C`}
98        />
99        {disk.powerOnHours !== null ? <Row label="Powered on" value={formatPowerOn(disk.powerOnHours)} /> : null}
100        {disk.partitions.map((partition) => (
101          <Row
102            key={partition.name}
103            label={partition.name}
104            value={[
105              // The container cannot see where the host mounts it.
106              inContainer ? null : (partition.mountpoint ?? "not mounted"),
107              partition.fstype,
108              partition.sizeBytes === null ? null : formatBytesCompact(partition.sizeBytes),
109            ]
110              .filter(Boolean)
111              .join(" · ")}
112          />
113        ))}
114      </div>
115    </div>
116  );
117}
118