From 598b88b1f0e536af85653b565ebd750e951d3167 Mon Sep 17 00:00:00 2001 From: MacRimi Date: Mon, 20 Oct 2025 23:48:07 +0200 Subject: [PATCH] Update virtual-machines.tsx --- AppImage/components/virtual-machines.tsx | 464 +++++++++++++---------- 1 file changed, 264 insertions(+), 200 deletions(-) diff --git a/AppImage/components/virtual-machines.tsx b/AppImage/components/virtual-machines.tsx index a762692..2b0a3a6 100644 --- a/AppImage/components/virtual-machines.tsx +++ b/AppImage/components/virtual-machines.tsx @@ -18,6 +18,8 @@ import { RotateCcw, StopCircle, Container, + ChevronDown, + ChevronUp, } from "lucide-react" import useSWR from "swr" import { MetricsView } from "./metrics-dialog" @@ -187,6 +189,7 @@ export function VirtualMachines() { const [vmConfigs, setVmConfigs] = useState>({}) const [currentView, setCurrentView] = useState<"main" | "metrics">("main") const [selectedMetric, setSelectedMetric] = useState<"cpu" | "memory" | "disk" | "network" | null>(null) + const [showAdditionalInfo, setShowAdditionalInfo] = useState(false) useEffect(() => { const fetchLXCIPs = async () => { @@ -221,6 +224,7 @@ export function VirtualMachines() { setSelectedVM(vm) setCurrentView("main") setSelectedMetric(null) + setShowAdditionalInfo(false) setDetailsLoading(true) try { const response = await fetch(`/api/vms/${vm.vmid}`) @@ -718,9 +722,10 @@ export function VirtualMachines() { setVMDetails(null) setCurrentView("main") setSelectedMetric(null) + setShowAdditionalInfo(false) }} > - + {currentView === "main" ? ( <> @@ -784,114 +789,147 @@ export function VirtualMachines() {

Basic Information

-
-
-
CPU Usage
-
handleMetricClick("cpu")} - > -
- {(selectedVM.cpu * 100).toFixed(1)}% -
- -
-
-
-
Memory
-
handleMetricClick("memory")} - > +
+ {/* CPU Usage Card */} + + +
CPU Usage
handleMetricClick("cpu")} > - {(selectedVM.mem / 1024 ** 3).toFixed(1)} / {(selectedVM.maxmem / 1024 ** 3).toFixed(1)}{" "} - GB +
+ {(selectedVM.cpu * 100).toFixed(1)}% +
+
- -
-
-
-
Disk
-
handleMetricClick("disk")} - > + + + + {/* Memory Card */} + + +
Memory
handleMetricClick("memory")} > - {(selectedVM.disk / 1024 ** 3).toFixed(1)} /{" "} - {(selectedVM.maxdisk / 1024 ** 3).toFixed(1)} GB +
+ {(selectedVM.mem / 1024 ** 3).toFixed(1)} /{" "} + {(selectedVM.maxmem / 1024 ** 3).toFixed(1)} GB +
+
- -
-
-
-
Disk I/O
-
handleMetricClick("disk")} - > -
- ↓ - {((selectedVM.diskread || 0) / 1024 ** 2).toFixed(2)} MB + + + + {/* Disk Card */} + + +
Disk
+
handleMetricClick("disk")} + > +
+ {(selectedVM.disk / 1024 ** 3).toFixed(1)} /{" "} + {(selectedVM.maxdisk / 1024 ** 3).toFixed(1)} GB +
+
-
- ↑ - {((selectedVM.diskwrite || 0) / 1024 ** 2).toFixed(2)} MB + + + + {/* Disk I/O Card */} + + +
Disk I/O
+
handleMetricClick("disk")} + > +
+ ↓ + {((selectedVM.diskread || 0) / 1024 ** 2).toFixed(2)} MB +
+
+ ↑ + {((selectedVM.diskwrite || 0) / 1024 ** 2).toFixed(2)} MB +
-
-
-
-
Network I/O
-
handleMetricClick("network")} - > -
- ↓ - {((selectedVM.netin || 0) / 1024 ** 2).toFixed(2)} MB + + + + {/* Network I/O Card */} + + +
Network I/O
+
handleMetricClick("network")} + > +
+ ↓ + {((selectedVM.netin || 0) / 1024 ** 2).toFixed(2)} MB +
+
+ ↑ + {((selectedVM.netout || 0) / 1024 ** 2).toFixed(2)} MB +
-
- ↑ - {((selectedVM.netout || 0) / 1024 ** 2).toFixed(2)} MB -
-
-
+ +
{detailsLoading ? (
Loading configuration...
) : vmDetails?.config ? ( - <> -
-

- Resources -

-
+ + +
+

+ Resources +

+ +
+ +
{vmDetails.config.cores && (
CPU Cores
{vmDetails.config.cores}
)} - {vmDetails.config.sockets && ( -
-
CPU Sockets
-
{vmDetails.config.sockets}
-
- )} {vmDetails.config.memory && (
Memory
@@ -904,131 +942,157 @@ export function VirtualMachines() {
{vmDetails.config.swap} MB
)} - {vmDetails.config.rootfs && ( -
-
Root Filesystem
-
- {vmDetails.config.rootfs} + {selectedVM.type === "lxc" && ( +
+
IP Address
+
+ {extractIPFromConfig(vmDetails.config)}
)} - {Object.keys(vmDetails.config) - .filter((key) => key.match(/^(scsi|sata|ide|virtio)\d+$/)) - .map((diskKey) => ( -
-
- {diskKey.toUpperCase().replace(/(\d+)/, " $1")} -
+
+ + {showAdditionalInfo && ( +
+ {vmDetails.config.rootfs && ( +
+
Root Filesystem
- {vmDetails.config[diskKey]} + {vmDetails.config.rootfs}
- ))} -
-
+ )} -
-

- Network -

-
- {Object.keys(vmDetails.config) - .filter((key) => key.match(/^net\d+$/)) - .map((netKey) => ( -
-
- Network Interface {netKey.replace("net", "")} + {Object.keys(vmDetails.config) + .filter((key) => key.match(/^(scsi|sata|ide|virtio)\d+$/)) + .map((diskKey) => ( +
+
+ {diskKey.toUpperCase().replace(/(\d+)/, " $1")} +
+
+ {vmDetails.config[diskKey]} +
-
- {vmDetails.config[netKey]} -
-
- ))} - {vmDetails.config.nameserver && ( -
-
DNS Nameserver
-
- {vmDetails.config.nameserver} -
-
- )} - {vmDetails.config.searchdomain && ( -
-
Search Domain
-
{vmDetails.config.searchdomain}
-
- )} - {vmDetails.config.hostname && ( -
-
Hostname
-
{vmDetails.config.hostname}
-
- )} -
-
+ ))} -
-

- Options -

-
- {vmDetails.config.onboot !== undefined && (
-
Start on Boot
- - {vmDetails.config.onboot ? "Yes" : "No"} - +

+ Network +

+
+ {Object.keys(vmDetails.config) + .filter((key) => key.match(/^net\d+$/)) + .map((netKey) => ( +
+
+ Network Interface {netKey.replace("net", "")} +
+
+ {vmDetails.config[netKey]} +
+
+ ))} + {vmDetails.config.nameserver && ( +
+
DNS Nameserver
+
+ {vmDetails.config.nameserver} +
+
+ )} + {vmDetails.config.searchdomain && ( +
+
Search Domain
+
+ {vmDetails.config.searchdomain} +
+
+ )} + {vmDetails.config.hostname && ( +
+
Hostname
+
{vmDetails.config.hostname}
+
+ )} +
- )} - {vmDetails.config.unprivileged !== undefined && ( +
-
Unprivileged
- - {vmDetails.config.unprivileged ? "Yes" : "No"} - +

+ Options +

+
+ {vmDetails.config.onboot !== undefined && ( +
+
Start on Boot
+ + {vmDetails.config.onboot ? "Yes" : "No"} + +
+ )} + {vmDetails.config.unprivileged !== undefined && ( +
+
Unprivileged
+ + {vmDetails.config.unprivileged ? "Yes" : "No"} + +
+ )} + {vmDetails.config.ostype && ( +
+
OS Type
+
{vmDetails.config.ostype}
+
+ )} + {vmDetails.config.arch && ( +
+
Architecture
+
{vmDetails.config.arch}
+
+ )} + {vmDetails.config.boot && ( +
+
Boot Order
+
{vmDetails.config.boot}
+
+ )} + {vmDetails.config.sockets && ( +
+
CPU Sockets
+
{vmDetails.config.sockets}
+
+ )} + {vmDetails.config.features && ( +
+
Features
+
+ {vmDetails.config.features} +
+
+ )} +
- )} - {vmDetails.config.ostype && ( -
-
OS Type
-
{vmDetails.config.ostype}
-
- )} - {vmDetails.config.arch && ( -
-
Architecture
-
{vmDetails.config.arch}
-
- )} - {vmDetails.config.boot && ( -
-
Boot Order
-
{vmDetails.config.boot}
-
- )} - {vmDetails.config.features && ( -
-
Features
-
{vmDetails.config.features}
-
- )} -
-
- +
+ )} + + ) : null} )}