diff --git a/AppImage/components/network-metrics.tsx b/AppImage/components/network-metrics.tsx index 7bd97f7..f0003ec 100644 --- a/AppImage/components/network-metrics.tsx +++ b/AppImage/components/network-metrics.tsx @@ -8,8 +8,7 @@ import { Wifi, Globe, Shield, Activity, Network, Router, AlertCircle, Zap } from import useSWR from "swr" interface NetworkData { - physical_interfaces?: NetworkInterface[] - bridge_interfaces?: NetworkInterface[] + interfaces: NetworkInterface[] vm_lxc_interfaces?: NetworkInterface[] traffic: { bytes_sent: number @@ -18,11 +17,11 @@ interface NetworkData { packets_recv?: number packet_loss_in?: number packet_loss_out?: number + dropin?: number + dropout?: number } - physical_active_count?: number - physical_total_count?: number - bridge_active_count?: number - bridge_total_count?: number + active_count?: number + total_count?: number vm_lxc_active_count?: number vm_lxc_total_count?: number } @@ -69,6 +68,10 @@ const getInterfaceTypeBadge = (type: string) => { return { color: "bg-purple-500/10 text-purple-500 border-purple-500/20", label: "Bond" } case "vlan": return { color: "bg-cyan-500/10 text-cyan-500 border-cyan-500/20", label: "VLAN" } + case "vm_lxc": + return { color: "bg-orange-500/10 text-orange-500 border-orange-500/20", label: "Virtual" } + case "virtual": + return { color: "bg-orange-500/10 text-orange-500 border-orange-500/20", label: "Virtual" } default: return { color: "bg-gray-500/10 text-gray-500 border-gray-500/20", label: "Unknown" } } @@ -98,10 +101,7 @@ const formatSpeed = (speed: number): string => { } const fetcher = async (url: string): Promise => { - const baseUrl = typeof window !== "undefined" ? `${window.location.protocol}//${window.location.hostname}:8008` : "" - const fullUrl = `${baseUrl}${url}` - - const response = await fetch(fullUrl, { + const response = await fetch(url, { method: "GET", headers: { "Content-Type": "application/json", @@ -122,7 +122,7 @@ export function NetworkMetrics() { error, isLoading, } = useSWR("/api/network", fetcher, { - refreshInterval: 30000, + refreshInterval: 30000, // Refresh every 30 seconds revalidateOnFocus: false, revalidateOnReconnect: true, }) @@ -164,10 +164,6 @@ export function NetworkMetrics() { const trafficOutGB = (networkData.traffic.bytes_sent / 1024 ** 3).toFixed(2) const packetsRecvK = networkData.traffic.packets_recv ? (networkData.traffic.packets_recv / 1000).toFixed(0) : "0" - const physicalInterfaces = networkData.physical_interfaces || [] - const bridgeInterfaces = networkData.bridge_interfaces || [] - const vmLxcInterfaces = networkData.vm_lxc_interfaces || [] - return (
{/* Network Overview Cards */} @@ -193,23 +189,13 @@ export function NetworkMetrics() { -
- {(networkData.physical_active_count ?? 0) + (networkData.bridge_active_count ?? 0)} -
-
-
- Physical: - - {networkData.physical_active_count ?? 0}/{networkData.physical_total_count ?? 0} - -
-
- Bridges: - - {networkData.bridge_active_count ?? 0}/{networkData.bridge_total_count ?? 0} - -
+
{networkData.active_count ?? 0}
+
+ + Online +
+

{networkData.total_count ?? 0} total interfaces

@@ -251,250 +237,163 @@ export function NetworkMetrics() {
- {/* Physical Interfaces */} - {physicalInterfaces.length > 0 && ( - - - - - Physical Interfaces - - {networkData.physical_active_count ?? 0}/{networkData.physical_total_count ?? 0} Active - - - - -
- {physicalInterfaces.map((iface, index) => { - const typeBadge = getInterfaceTypeBadge(iface.type) + {/* Network Interfaces */} + + + + + Network Interfaces + + + +
+ {networkData.interfaces.map((interface_, index) => { + const typeBadge = getInterfaceTypeBadge(interface_.type) - return ( -
setSelectedInterface(iface)} - > -
- -
-
{iface.name}
- - {typeBadge.label} - -
- - {iface.status.toUpperCase()} + return ( +
setSelectedInterface(interface_)} + > + {/* First row: Icon, Name, Type Badge, Status */} +
+ +
+
{interface_.name}
+ + {typeBadge.label}
- -
-
-
IP Address
-
- {iface.addresses.length > 0 ? iface.addresses[0].ip : "N/A"} -
-
- -
-
Speed
-
- - {formatSpeed(iface.speed)} -
-
- -
-
Traffic
-
- ↓ {formatBytes(iface.bytes_recv)} - {" / "} - ↑ {formatBytes(iface.bytes_sent)} -
-
- - {iface.mac_address && ( -
-
MAC
-
- {iface.mac_address} -
-
- )} -
+ + {interface_.status.toUpperCase()} +
- ) - })} -
- - - )} - {/* Bridge Interfaces */} - {bridgeInterfaces.length > 0 && ( - - - - - Bridge Interfaces - - {networkData.bridge_active_count ?? 0}/{networkData.bridge_total_count ?? 0} Active - - - - -
- {bridgeInterfaces.map((iface, index) => { - const typeBadge = getInterfaceTypeBadge(iface.type) - - return ( -
setSelectedInterface(iface)} - > -
- -
-
{iface.name}
- - {typeBadge.label} - + {/* Second row: Details - Responsive layout */} +
+
+
IP Address
+
+ {interface_.addresses.length > 0 ? interface_.addresses[0].ip : "N/A"}
- - {iface.status.toUpperCase()} -
-
-
-
IP Address
-
- {iface.addresses.length > 0 ? iface.addresses[0].ip : "N/A"} -
+
+
Speed
+
+ + {formatSpeed(interface_.speed)}
+
-
-
Speed
-
- - {formatSpeed(iface.speed)} -
+
+
Traffic
+
+ ↓ {formatBytes(interface_.bytes_recv)} + {" / "} + ↑ {formatBytes(interface_.bytes_sent)}
+
+ {interface_.mac_address && (
-
Traffic
-
- ↓ {formatBytes(iface.bytes_recv)} - {" / "} - ↑ {formatBytes(iface.bytes_sent)} +
MAC
+
+ {interface_.mac_address}
- - {iface.mac_address && ( -
-
MAC
-
- {iface.mac_address} -
-
- )} -
+ )}
- ) - })} -
- - - )} +
+ ) + })} +
+ + - {/* VM & LXC Network Interfaces */} - {vmLxcInterfaces.length > 0 && ( + {networkData.vm_lxc_interfaces && networkData.vm_lxc_interfaces.length > 0 && ( VM & LXC Network Interfaces - {networkData.vm_lxc_active_count ?? 0}/{networkData.vm_lxc_total_count ?? 0} Active + {networkData.vm_lxc_active_count ?? 0} / {networkData.vm_lxc_total_count ?? 0} Active
- {vmLxcInterfaces.map((iface, index) => { - const vmTypeBadge = getVMTypeBadge(iface.vm_type) + {networkData.vm_lxc_interfaces.map((interface_, index) => { + const vmTypeBadge = getVMTypeBadge(interface_.vm_type) return (
setSelectedInterface(iface)} + onClick={() => setSelectedInterface(interface_)} > + {/* First row: Icon, Name, VM/LXC Badge, VM Name, Status */}
-
{iface.name}
+
{interface_.name}
{vmTypeBadge.label} - {iface.vm_name && ( -
→ {iface.vm_name}
+ {interface_.vm_name && ( +
→ {interface_.vm_name}
)}
- {iface.status.toUpperCase()} + {interface_.status.toUpperCase()}
+ {/* Second row: Details - Responsive layout */}
VMID
-
{iface.vmid ?? "N/A"}
+
{interface_.vmid ?? "N/A"}
Speed
- {formatSpeed(iface.speed)} + {formatSpeed(interface_.speed)}
Traffic
- ↓ {formatBytes(iface.bytes_recv)} + ↓ {formatBytes(interface_.bytes_recv)} {" / "} - ↑ {formatBytes(iface.bytes_sent)} + ↑ {formatBytes(interface_.bytes_sent)}
- {iface.mac_address && ( + {interface_.mac_address && (
MAC
- {iface.mac_address} + {interface_.mac_address}
)} @@ -507,7 +406,7 @@ export function NetworkMetrics() { )} - {/* Interface Details Dialog */} + {/* Interface Details Modal */} setSelectedInterface(null)}> diff --git a/AppImage/scripts/flask_server.py b/AppImage/scripts/flask_server.py index a06ca40..0cbb0cc 100644 --- a/AppImage/scripts/flask_server.py +++ b/AppImage/scripts/flask_server.py @@ -857,7 +857,7 @@ def get_proxmox_storage(): print(f"[v0] pvesm status failed with return code {result.returncode}") print(f"[v0] stderr: {result.stderr}") return { - 'error': 'pvesh command not available or failed', + 'error': 'pvesm command not available or failed', 'storage': [] } @@ -1001,12 +1001,11 @@ def get_bridge_info(bridge_name): return bridge_info def get_network_info(): - """Get network interface information - Enhanced with separation of physical and bridge interfaces""" + """Get network interface information - Enhanced with VM/LXC interface separation""" try: network_data = { - 'physical_interfaces': [], # Separated physical interfaces - 'bridge_interfaces': [], # Separated bridge interfaces - 'vm_lxc_interfaces': [], + 'interfaces': [], + 'vm_lxc_interfaces': [], # Added separate list for VM/LXC interfaces 'traffic': {'bytes_sent': 0, 'bytes_recv': 0, 'packets_sent': 0, 'packets_recv': 0} } @@ -1022,10 +1021,8 @@ def get_network_info(): print(f"[v0] Error getting per-NIC stats: {e}") net_io_per_nic = {} - physical_active_count = 0 - physical_total_count = 0 - bridge_active_count = 0 - bridge_total_count = 0 + active_count = 0 + total_count = 0 vm_lxc_active_count = 0 vm_lxc_total_count = 0 @@ -1044,14 +1041,10 @@ def get_network_info(): vm_lxc_total_count += 1 if stats.isup: vm_lxc_active_count += 1 - elif interface_type == 'physical': - physical_total_count += 1 + else: + total_count += 1 if stats.isup: - physical_active_count += 1 - elif interface_type == 'bridge': - bridge_total_count += 1 - if stats.isup: - bridge_active_count += 1 + active_count += 1 interface_info = { 'name': interface_name, @@ -1122,20 +1115,15 @@ def get_network_info(): if interface_type == 'vm_lxc': network_data['vm_lxc_interfaces'].append(interface_info) - elif interface_type == 'physical': - network_data['physical_interfaces'].append(interface_info) - elif interface_type == 'bridge': - network_data['bridge_interfaces'].append(interface_info) + else: + network_data['interfaces'].append(interface_info) - network_data['physical_active_count'] = physical_active_count - network_data['physical_total_count'] = physical_total_count - network_data['bridge_active_count'] = bridge_active_count - network_data['bridge_total_count'] = bridge_total_count + network_data['active_count'] = active_count + network_data['total_count'] = total_count network_data['vm_lxc_active_count'] = vm_lxc_active_count network_data['vm_lxc_total_count'] = vm_lxc_total_count - print(f"[v0] Physical interfaces: {physical_active_count} active out of {physical_total_count} total") - print(f"[v0] Bridge interfaces: {bridge_active_count} active out of {bridge_total_count} total") + print(f"[v0] Physical interfaces: {active_count} active out of {total_count} total") print(f"[v0] VM/LXC interfaces: {vm_lxc_active_count} active out of {vm_lxc_total_count} total") # Get network I/O statistics (global) @@ -1171,14 +1159,11 @@ def get_network_info(): traceback.print_exc() return { 'error': f'Unable to access network information: {str(e)}', - 'physical_interfaces': [], - 'bridge_interfaces': [], + 'interfaces': [], 'vm_lxc_interfaces': [], 'traffic': {'bytes_sent': 0, 'bytes_recv': 0, 'packets_sent': 0, 'packets_recv': 0}, - 'physical_active_count': 0, - 'physical_total_count': 0, - 'bridge_active_count': 0, - 'bridge_total_count': 0, + 'active_count': 0, + 'total_count': 0, 'vm_lxc_active_count': 0, 'vm_lxc_total_count': 0 }