From 8c902ae04dac31c72bc085cd0a287db785650eb6 Mon Sep 17 00:00:00 2001 From: MacRimi Date: Sun, 9 Nov 2025 14:39:06 +0100 Subject: [PATCH] Update system-overview.tsx --- AppImage/components/system-overview.tsx | 189 +++++++++++------------- 1 file changed, 88 insertions(+), 101 deletions(-) diff --git a/AppImage/components/system-overview.tsx b/AppImage/components/system-overview.tsx index b1a3ffb..c28e305 100644 --- a/AppImage/components/system-overview.tsx +++ b/AppImage/components/system-overview.tsx @@ -225,100 +225,80 @@ export function SystemOverview() { const [storageData, setStorageData] = useState(null) const [proxmoxStorageData, setProxmoxStorageData] = useState(null) const [networkData, setNetworkData] = useState(null) - const [loading, setLoading] = useState(true) + const [loadingStates, setLoadingStates] = useState({ + system: true, + vms: true, + storage: true, + network: true, + }) const [error, setError] = useState(null) const [networkTimeframe, setNetworkTimeframe] = useState("day") const [networkTotals, setNetworkTotals] = useState<{ received: number; sent: number }>({ received: 0, sent: 0 }) useEffect(() => { - const fetchData = async () => { - try { - setLoading(true) - setError(null) + const fetchAllData = async () => { + const [systemResult, vmResult, storageResult, proxmoxStorageResult, networkResult] = await Promise.all([ + fetchSystemData().finally(() => setLoadingStates((prev) => ({ ...prev, system: false }))), + fetchVMData().finally(() => setLoadingStates((prev) => ({ ...prev, vms: false }))), + Promise.all([fetchStorageData(), fetchProxmoxStorageData()]).finally(() => + setLoadingStates((prev) => ({ ...prev, storage: false })), + ), + fetchNetworkData().finally(() => setLoadingStates((prev) => ({ ...prev, network: false }))), + ]) - const systemResult = await fetchSystemData() - - if (!systemResult) { - setError("Flask server not available. Please ensure the server is running.") - setLoading(false) - return - } - - setSystemData(systemResult) - } catch (err) { - console.error("[v0] Error fetching system data:", err) - setError("Failed to connect to Flask server. Please check your connection.") - } finally { - setLoading(false) + if (!systemResult) { + setError("Flask server not available. Please ensure the server is running.") + return } - } - fetchData() - - const systemInterval = setInterval(() => { - fetchSystemData().then((data) => { - if (data) setSystemData(data) - }) - }, 9000) // Cambiado de 10000 a 9000ms - - return () => { - clearInterval(systemInterval) - } - }, []) - - useEffect(() => { - const fetchVMs = async () => { - const vmResult = await fetchVMData() + setSystemData(systemResult) setVmData(vmResult) - } - - fetchVMs() - const vmInterval = setInterval(fetchVMs, 59000) // Cambiado de 60000 a 59000ms - - return () => { - clearInterval(vmInterval) - } - }, []) - - useEffect(() => { - const fetchStorage = async () => { - const storageResult = await fetchStorageData() - setStorageData(storageResult) - - const proxmoxStorageResult = await fetchProxmoxStorageData() - setProxmoxStorageData(proxmoxStorageResult) - } - - fetchStorage() - const storageInterval = setInterval(fetchStorage, 59000) // Cambiado de 60000 a 59000ms - - return () => { - clearInterval(storageInterval) - } - }, []) - - useEffect(() => { - const fetchNetwork = async () => { - const networkResult = await fetchNetworkData() + setStorageData(storageResult[0]) + setProxmoxStorageData(storageResult[1]) setNetworkData(networkResult) } - fetchNetwork() - const networkInterval = setInterval(fetchNetwork, 59000) // Cambiado de 60000 a 59000ms + fetchAllData() + + const systemInterval = setInterval(async () => { + const data = await fetchSystemData() + if (data) setSystemData(data) + }, 9000) + + const vmInterval = setInterval(async () => { + const data = await fetchVMData() + setVmData(data) + }, 59000) + + const storageInterval = setInterval(async () => { + const [storage, proxmoxStorage] = await Promise.all([fetchStorageData(), fetchProxmoxStorageData()]) + if (storage) setStorageData(storage) + if (proxmoxStorage) setProxmoxStorageData(proxmoxStorage) + }, 59000) + + const networkInterval = setInterval(async () => { + const data = await fetchNetworkData() + if (data) setNetworkData(data) + }, 59000) return () => { + clearInterval(systemInterval) + clearInterval(vmInterval) + clearInterval(storageInterval) clearInterval(networkInterval) } }, []) - if (loading) { + const isInitialLoading = loadingStates.system && !systemData + + if (isInitialLoading) { return (
Connecting to ProxMenux Monitor...
Fetching real-time system data
-
+
{[...Array(4)].map((_, i) => ( @@ -386,12 +366,10 @@ export function SystemOverview() { const formatStorage = (sizeInGB: number): string => { if (sizeInGB < 1) { - // Less than 1 GB, show in MB return `${(sizeInGB * 1024).toFixed(1)} MB` } else if (sizeInGB > 999) { return `${(sizeInGB / 1024).toFixed(2)} TB` } else { - // Between 1 and 999 GB, show in GB return `${sizeInGB.toFixed(2)} GB` } } @@ -402,13 +380,10 @@ export function SystemOverview() { const vmLxcStorages = proxmoxStorageData?.storage.filter( (s) => - // Include only local storage types that can host VMs/LXCs (s.type === "lvm" || s.type === "lvmthin" || s.type === "zfspool" || s.type === "btrfs" || s.type === "dir") && - // Exclude network storage s.type !== "nfs" && s.type !== "cifs" && s.type !== "iscsi" && - // Exclude the "local" storage (used for ISOs/templates) s.name !== "local", ) @@ -474,7 +449,6 @@ export function SystemOverview() { return (
- {/* Key Metrics Cards */}
@@ -529,29 +503,37 @@ export function SystemOverview() { -
{vmStats.running}
-
- - {vmStats.running} Running - - {vmStats.stopped > 0 && ( - - {vmStats.stopped} Stopped - - )} -
-

- Total: {vmStats.vms} VMs, {vmStats.lxc} LXC -

+ {loadingStates.vms ? ( +
+
+
+
+
+ ) : ( + <> +
{vmStats.running}
+
+ + {vmStats.running} Running + + {vmStats.stopped > 0 && ( + + {vmStats.stopped} Stopped + + )} +
+

+ Total: {vmStats.vms} VMs, {vmStats.lxc} LXC +

+ + )}
- {/* Node Metrics Charts */}
- {/* Storage Summary */} @@ -560,16 +542,18 @@ export function SystemOverview() { - {storageData ? ( + {loadingStates.storage ? ( +
+
+
+
+
+ ) : storageData ? (
{(() => { - // Calculate total storage across all volumes const totalCapacity = (vmLxcStorageTotal || 0) + (localStorage?.total || 0) - const totalUsed = (vmLxcStorageUsed || 0) + (localStorage?.used || 0) - const totalAvailable = (vmLxcStorageAvailable || 0) + (localStorage?.available || 0) - const totalPercent = totalCapacity > 0 ? (totalUsed / totalCapacity) * 100 : 0 return totalCapacity > 0 ? ( @@ -672,7 +656,6 @@ export function SystemOverview() { - {/* Network Summary */} @@ -695,7 +678,13 @@ export function SystemOverview() { - {networkData ? ( + {loadingStates.network ? ( +
+
+
+
+
+ ) : networkData ? (
Active Interfaces: @@ -766,7 +755,6 @@ export function SystemOverview() {
- {/* System Information */}
@@ -799,7 +787,6 @@ export function SystemOverview() { - {/* System Health & Alerts */}