-
-
-
Disks
-
-
-
-
-
- | Disk |
- Device |
- Temp |
- S.M.A.R.T. |
- Status |
-
-
-
- {synologyData?.disks.map((d) => (
-
- | {d.name} |
- {d.device} |
- {d.temp !== null ? `${d.temp}°C` : "—"} |
- {healthBadge(d.smartStatus)} |
-
- {healthBadge(d.status)}
- {d.exceedBadSectorThreshold && Bad sectors}
- {d.belowRemainLifeThreshold && Low life}
- |
-
- ))}
- {synologyData?.disks.length === 0 && (
-
- |
- No disks found.
- |
-
- )}
-
-
-
-
+
+
+ View this integration's storage on the Synology page.
) : selected?.type === "dockhand" ? (
diff --git a/web/src/pages/Proxmox.tsx b/web/src/pages/Proxmox.tsx
new file mode 100644
index 0000000..f46ee61
--- /dev/null
+++ b/web/src/pages/Proxmox.tsx
@@ -0,0 +1,227 @@
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import {
+ api,
+ type CurrentUser,
+ type IntegrationSummary,
+ type ProxmoxGuest,
+ type ProxmoxGuestsResponse,
+} from "../api/client";
+
+function proxmoxStatusBadge(status: string) {
+ return status === "running" ? (
+
Running
+ ) : (
+
Stopped
+ );
+}
+
+function formatUptime(seconds: number | null): string {
+ if (!seconds) return "—";
+ const days = Math.floor(seconds / 86400);
+ const hours = Math.floor((seconds % 86400) / 3600);
+ if (days > 0) return `${days}d ${hours}h`;
+ const minutes = Math.floor((seconds % 3600) / 60);
+ return `${hours}h ${minutes}m`;
+}
+
+export default function Proxmox({ user }: { user: CurrentUser }) {
+ const canEdit = user.role === "admin" || user.role === "operator";
+
+ const [integrations, setIntegrations] = useState
(null);
+ const [selectedId, setSelectedId] = useState(null);
+ const [error, setError] = useState(null);
+
+ const [data, setData] = useState(null);
+ const [loading, setLoading] = useState(false);
+ const [actingOnGuest, setActingOnGuest] = useState(null);
+
+ useEffect(() => {
+ api.integrations
+ .list()
+ .then((res) => {
+ const proxmoxIntegrations = res.integrations.filter((i) => i.type === "proxmox");
+ setIntegrations(proxmoxIntegrations);
+ if (!selectedId && proxmoxIntegrations.length > 0) setSelectedId(proxmoxIntegrations[0].id);
+ })
+ .catch((err) => setError(err instanceof Error ? err.message : String(err)));
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ const selected = integrations?.find((i) => i.id === selectedId) ?? null;
+
+ function loadGuests(id: number) {
+ setLoading(true);
+ setError(null);
+ api.integrations.proxmox
+ .guests(id)
+ .then((res) => setData(res))
+ .catch((err) => setError(err instanceof Error ? err.message : String(err)))
+ .finally(() => setLoading(false));
+ }
+
+ useEffect(() => {
+ if (selected?.enabled) {
+ loadGuests(selected.id);
+ } else {
+ setData(null);
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [selectedId]);
+
+ async function guestAction(g: ProxmoxGuest, action: "start" | "stop" | "restart" | "shutdown") {
+ if (!selectedId) return;
+ if (action === "stop" && !confirm(`Stop ${g.type === "qemu" ? "VM" : "container"} "${g.name}" immediately? Use Shutdown instead for a graceful power-off.`))
+ return;
+ setActingOnGuest(g.vmid);
+ setError(null);
+ try {
+ await api.integrations.proxmox[action](selectedId, g.node, g.type, g.vmid);
+ loadGuests(selectedId);
+ } catch (err) {
+ setError(err instanceof Error ? err.message : String(err));
+ } finally {
+ setActingOnGuest(null);
+ }
+ }
+
+ return (
+ <>
+ Proxmox
+ {error && {error}
}
+
+ {integrations?.length === 0 ? (
+
+
+ No Proxmox integration configured yet. Add one under Integrations.
+
+
+
+
+ )}
+
+ {selected && !selected.enabled ? (
+
+
+ "{selected.name}" is disabled. Enable it under Integrations → Manage integrations to see its
+ VMs and containers.
+
+
+
+
+ VMs & Containers
+ {data && (
+
+ {data.summary.running}/{data.summary.total} running
+
+ )}
+
+
+
+
+
+
+
+
+
+ | Name |
+ Node |
+ Type |
+ Uptime |
+ Status |
+ {canEdit && Actions | }
+
+
+
+ {data?.guests.map((g) => (
+
+ |
+ {g.name} #{g.vmid}
+ |
+ {g.node} |
+
+ {g.type === "qemu" ? "VM" : "LXC"}
+ |
+ {formatUptime(g.uptime)} |
+ {proxmoxStatusBadge(g.status)} |
+ {canEdit && (
+
+
+ {g.status === "running" ? (
+ <>
+
+
+
+
+ ) : (
+
+ )}
+
+ |
+ )}
+
+ ))}
+ {data?.guests.length === 0 && (
+
+ |
+ No VMs or containers found across any node.
+ |
+
+ )}
+
+
+
+
Synology
+ {error && {error}
}
+
+ {integrations?.length === 0 ? (
+
+
+ No Synology integration configured yet. Add one under Integrations.
+
+
+
+
+ )}
+
+ {selected && !selected.enabled ? (
+
+
+ "{selected.name}" is disabled. Enable it under Integrations → Manage integrations to see its
+ storage.
+
+
+
+
+
+
Volumes
+
+
+
+
+
+
+
+
+ | Volume |
+ Type |
+ Used |
+ Status |
+
+
+
+ {data?.volumes.map((v) => (
+
+ | {v.id} |
+ {v.deviceType} |
+
+ {formatBytes(v.sizeUsed)} / {formatBytes(v.sizeTotal)}
+ |
+ {healthBadge(v.status)} |
+
+ ))}
+ {data?.volumes.length === 0 && (
+
+ |
+ No volumes found.
+ |
+
+ )}
+
+
+
+
+
+
+
+
+
Disks
+
+
+
+
+
+ | Disk |
+ Device |
+ Temp |
+ S.M.A.R.T. |
+ Status |
+
+
+
+ {data?.disks.map((d) => (
+
+ | {d.name} |
+ {d.device} |
+ {d.temp !== null ? `${d.temp}°C` : "—"} |
+ {healthBadge(d.smartStatus)} |
+
+ {healthBadge(d.status)}
+ {d.exceedBadSectorThreshold && Bad sectors}
+ {d.belowRemainLifeThreshold && Low life}
+ |
+
+ ))}
+ {data?.disks.length === 0 && (
+
+ |
+ No disks found.
+ |
+
+ )}
+
+
+
+
+
+