From 3c654ab4951603337429d6e6b542d2cd53c0823b Mon Sep 17 00:00:00 2001 From: MacRimi Date: Mon, 20 Oct 2025 23:24:38 +0200 Subject: [PATCH] Update virtual-machines.tsx --- AppImage/components/virtual-machines.tsx | 424 +++++++++++------------ 1 file changed, 198 insertions(+), 226 deletions(-) diff --git a/AppImage/components/virtual-machines.tsx b/AppImage/components/virtual-machines.tsx index 37a977e..35f1e7e 100644 --- a/AppImage/components/virtual-machines.tsx +++ b/AppImage/components/virtual-machines.tsx @@ -20,7 +20,7 @@ import { Container, } from "lucide-react" import useSWR from "swr" -import { MetricsDialog } from "./metrics-dialog" // Import MetricsDialog +import { MetricsView } from "./metrics-dialog" interface VMData { vmid: number @@ -720,60 +720,26 @@ export function VirtualMachines() { setSelectedMetric(null) }} > - + {currentView === "main" ? ( <> - + - {/* Desktop layout */} -
-
- - {selectedVM?.name} - ID: {selectedVM?.vmid} -
- {selectedVM && ( - <> - - {getTypeBadge(selectedVM.type).icon} - {getTypeBadge(selectedVM.type).label} - - - {selectedVM.status.toUpperCase()} - - {selectedVM.status === "running" && ( - - Uptime: {formatUptime(selectedVM.uptime)} - - )} - - )} +
+ + {selectedVM?.name}
- - {/* Mobile layout */} -
-
- - {selectedVM?.name} - ID: {selectedVM?.vmid} + {selectedVM && ( +
+ + {getTypeBadge(selectedVM.type).icon} + {getTypeBadge(selectedVM.type).label} + + + {selectedVM.status.toUpperCase()} +
- {selectedVM && ( -
- - {getTypeBadge(selectedVM.type).icon} - {getTypeBadge(selectedVM.type).label} - - - {selectedVM.status.toUpperCase()} - - {selectedVM.status === "running" && ( - - Uptime: {formatUptime(selectedVM.uptime)} - - )} -
- )} -
+ )} @@ -786,14 +752,19 @@ export function VirtualMachines() { Basic Information
+
+
Name
+
{selectedVM.name}
+
+
+
VMID
+
{selectedVM.vmid}
+
CPU Usage
{ - e.stopPropagation() - handleMetricClick("cpu") - }} + onClick={() => handleMetricClick("cpu")} >
{(selectedVM.cpu * 100).toFixed(1)}% @@ -808,10 +779,7 @@ export function VirtualMachines() {
Memory
{ - e.stopPropagation() - handleMetricClick("memory") - }} + onClick={() => handleMetricClick("memory")} >
Disk
{ - e.stopPropagation() - handleMetricClick("disk") - }} + onClick={() => handleMetricClick("disk")} >
+
+
Uptime
+
{formatUptime(selectedVM.uptime)}
+
Disk I/O
{ - e.stopPropagation() - handleMetricClick("disk") - }} + onClick={() => handleMetricClick("disk")} >
↓ @@ -869,10 +835,7 @@ export function VirtualMachines() {
Network I/O
{ - e.stopPropagation() - handleMetricClick("network") - }} + onClick={() => handleMetricClick("network")} >
↓ @@ -887,163 +850,171 @@ export function VirtualMachines() {
-
-

- Resources -

-
- {vmDetails?.config.cores && ( -
-
CPU Cores
-
{vmDetails.config.cores}
-
- )} - {vmDetails?.config.sockets && ( -
-
CPU Sockets
-
{vmDetails.config.sockets}
-
- )} - {vmDetails?.config.memory && ( -
-
Memory
-
{vmDetails.config.memory} MB
-
- )} - {vmDetails?.config.swap && ( -
-
Swap
-
{vmDetails.config.swap} MB
-
- )} - {vmDetails?.config.rootfs && ( -
-
Root Filesystem
-
- {vmDetails.config.rootfs} -
-
- )} - {Object.keys(vmDetails?.config || {}) - .filter((key) => key.match(/^(scsi|sata|ide|virtio)\d+$/)) - .map((diskKey) => ( -
-
- {diskKey.toUpperCase().replace(/(\d+)/, " $1")} + {detailsLoading ? ( +
Loading configuration...
+ ) : vmDetails?.config ? ( + <> +
+

+ Resources +

+
+ {vmDetails.config.cores && ( +
+
CPU Cores
+
{vmDetails.config.cores}
-
- {vmDetails?.config[diskKey]} + )} + {vmDetails.config.sockets && ( +
+
CPU Sockets
+
{vmDetails.config.sockets}
-
- ))} -
-
+ )} + {vmDetails.config.memory && ( +
+
Memory
+
{vmDetails.config.memory} MB
+
+ )} + {vmDetails.config.swap && ( +
+
Swap
+
{vmDetails.config.swap} MB
+
+ )} + {vmDetails.config.rootfs && ( +
+
Root Filesystem
+
+ {vmDetails.config.rootfs} +
+
+ )} + {Object.keys(vmDetails.config) + .filter((key) => key.match(/^(scsi|sata|ide|virtio)\d+$/)) + .map((diskKey) => ( +
+
+ {diskKey.toUpperCase().replace(/(\d+)/, " $1")} +
+
+ {vmDetails.config[diskKey]} +
+
+ ))} +
+
-
-

- Network -

-
- {Object.keys(vmDetails?.config || {}) - .filter((key) => key.match(/^net\d+$/)) - .map((netKey) => ( -
-
- Network Interface {netKey.replace("net", "")} +
+

+ 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[netKey]} + )} + {vmDetails.config.searchdomain && ( +
+
Search Domain
+
{vmDetails.config.searchdomain}
-
- ))} - {vmDetails?.config.nameserver && ( -
-
DNS Nameserver
-
{vmDetails.config.nameserver}
+ )} + {vmDetails.config.hostname && ( +
+
Hostname
+
{vmDetails.config.hostname}
+
+ )}
- )} - {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"} - +
+

+ 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.features && ( +
+
Features
+
{vmDetails.config.features}
+
+ )}
- )} - {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.features && ( -
-
Features
-
{vmDetails.config.features}
-
- )} -
-
+
+ + ) : null} )}
-
+

Control Actions

@@ -1083,18 +1054,19 @@ export function VirtualMachines() {
- ) : currentView === "metrics" && selectedMetric ? ( - { - setCurrentView("main") - setSelectedMetric(null) - }} - /> - ) : null} + ) : ( + /* Render metrics view when currentView is "metrics" */ + selectedVM && + selectedMetric && ( + + ) + )}