Update AppImage

This commit is contained in:
MacRimi
2025-10-04 19:05:39 +02:00
parent 992921b24c
commit dc03144773
2 changed files with 438 additions and 49 deletions

View File

@@ -3,7 +3,8 @@
import { useState, useEffect } from "react" import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card" import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
import { Badge } from "./ui/badge" import { Badge } from "./ui/badge"
import { Wifi, Globe, Shield, Activity, Network, Router, AlertCircle } from "lucide-react" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog"
import { Wifi, Globe, Shield, Activity, Network, Router, AlertCircle, Zap } from "lucide-react"
interface NetworkData { interface NetworkData {
interfaces: NetworkInterface[] interfaces: NetworkInterface[]
@@ -17,11 +18,59 @@ interface NetworkData {
interface NetworkInterface { interface NetworkInterface {
name: string name: string
type: string
status: string status: string
speed: number
duplex: string
mtu: number
mac_address: string | null
addresses: Array<{ addresses: Array<{
ip: string ip: string
netmask: string netmask: string
}> }>
bytes_sent?: number
bytes_recv?: number
packets_sent?: number
packets_recv?: number
errors_in?: number
errors_out?: number
drops_in?: number
drops_out?: number
bond_mode?: string
bond_slaves?: string[]
bond_active_slave?: string | null
bridge_members?: string[]
}
const getInterfaceTypeBadge = (type: string) => {
switch (type) {
case "physical":
return { color: "bg-blue-500/10 text-blue-500 border-blue-500/20", label: "Physical" }
case "bridge":
return { color: "bg-green-500/10 text-green-500 border-green-500/20", label: "Bridge" }
case "bond":
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 "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" }
}
}
const formatBytes = (bytes: number | undefined): string => {
if (!bytes || bytes === 0) return "0 B"
const k = 1024
const sizes = ["B", "KB", "MB", "GB", "TB"]
const i = Math.floor(Math.log(bytes) / Math.log(k))
return `${(bytes / Math.pow(k, i)).toFixed(2)} ${sizes[i]}`
}
const formatSpeed = (speed: number): string => {
if (speed === 0) return "N/A"
if (speed >= 1000) return `${(speed / 1000).toFixed(1)} Gbps`
return `${speed} Mbps`
} }
const fetchNetworkData = async (): Promise<NetworkData | null> => { const fetchNetworkData = async (): Promise<NetworkData | null> => {
@@ -52,6 +101,7 @@ export function NetworkMetrics() {
const [networkData, setNetworkData] = useState<NetworkData | null>(null) const [networkData, setNetworkData] = useState<NetworkData | null>(null)
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const [error, setError] = useState<string | null>(null) const [error, setError] = useState<string | null>(null)
const [selectedInterface, setSelectedInterface] = useState<NetworkInterface | null>(null)
useEffect(() => { useEffect(() => {
const fetchData = async () => { const fetchData = async () => {
@@ -190,34 +240,24 @@ export function NetworkMetrics() {
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="space-y-4"> <div className="space-y-4">
{networkData.interfaces.map((interface_, index) => ( {networkData.interfaces.map((interface_, index) => {
const typeBadge = getInterfaceTypeBadge(interface_.type)
return (
<div <div
key={index} key={index}
className="flex items-center justify-between p-4 rounded-lg border border-border bg-card/50" className="flex flex-col gap-3 p-4 rounded-lg border border-border bg-card/50 hover:bg-card/80 transition-colors cursor-pointer"
onClick={() => setSelectedInterface(interface_)}
> >
<div className="flex items-center space-x-4"> {/* First row: Icon, Name, Type Badge */}
<Wifi className="h-5 w-5 text-muted-foreground" /> <div className="flex items-center gap-3">
<div> <Wifi className="h-5 w-5 text-muted-foreground flex-shrink-0" />
<div className="flex items-center gap-2 min-w-0 flex-1">
<div className="font-medium text-foreground">{interface_.name}</div> <div className="font-medium text-foreground">{interface_.name}</div>
<div className="text-sm text-muted-foreground">Network Interface</div> <Badge variant="outline" className={typeBadge.color}>
{typeBadge.label}
</Badge>
</div> </div>
</div>
<div className="flex items-center space-x-6">
<div className="text-center">
<div className="text-sm text-muted-foreground">IP Address</div>
<div className="text-sm font-medium text-foreground font-mono">
{interface_.addresses.length > 0 ? interface_.addresses[0].ip : "N/A"}
</div>
</div>
<div className="text-center">
<div className="text-sm text-muted-foreground">Netmask</div>
<div className="text-sm font-medium text-foreground">
{interface_.addresses.length > 0 ? interface_.addresses[0].netmask : "N/A"}
</div>
</div>
<Badge <Badge
variant="outline" variant="outline"
className={ className={
@@ -229,11 +269,226 @@ export function NetworkMetrics() {
{interface_.status.toUpperCase()} {interface_.status.toUpperCase()}
</Badge> </Badge>
</div> </div>
{/* Second row: Details */}
<div className="flex items-center justify-between gap-6 text-sm">
<div className="flex items-center gap-6">
<div>
<div className="text-muted-foreground">IP Address</div>
<div className="font-medium text-foreground font-mono">
{interface_.addresses.length > 0 ? interface_.addresses[0].ip : "N/A"}
</div> </div>
))} </div>
<div>
<div className="text-muted-foreground">Speed</div>
<div className="font-medium text-foreground flex items-center gap-1">
<Zap className="h-3 w-3" />
{formatSpeed(interface_.speed)}
</div>
</div>
<div>
<div className="text-muted-foreground">Traffic</div>
<div className="font-medium text-foreground">
<span className="text-green-500"> {formatBytes(interface_.bytes_recv)}</span>
{" / "}
<span className="text-blue-500"> {formatBytes(interface_.bytes_sent)}</span>
</div>
</div>
{interface_.mac_address && (
<div>
<div className="text-muted-foreground">MAC</div>
<div className="font-medium text-foreground font-mono text-xs">{interface_.mac_address}</div>
</div>
)}
</div>
</div>
</div>
)
})}
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
{/* Interface Details Modal */}
<Dialog open={!!selectedInterface} onOpenChange={() => setSelectedInterface(null)}>
<DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<Router className="h-5 w-5" />
{selectedInterface?.name} - Interface Details
</DialogTitle>
</DialogHeader>
{selectedInterface && (
<div className="space-y-6">
{/* Basic Information */}
<div>
<h3 className="text-sm font-semibold text-muted-foreground mb-3">Basic Information</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<div className="text-sm text-muted-foreground">Interface Name</div>
<div className="font-medium">{selectedInterface.name}</div>
</div>
<div>
<div className="text-sm text-muted-foreground">Type</div>
<Badge variant="outline" className={getInterfaceTypeBadge(selectedInterface.type).color}>
{getInterfaceTypeBadge(selectedInterface.type).label}
</Badge>
</div>
<div>
<div className="text-sm text-muted-foreground">Status</div>
<Badge
variant="outline"
className={
selectedInterface.status === "up"
? "bg-green-500/10 text-green-500 border-green-500/20"
: "bg-red-500/10 text-red-500 border-red-500/20"
}
>
{selectedInterface.status.toUpperCase()}
</Badge>
</div>
<div>
<div className="text-sm text-muted-foreground">Speed</div>
<div className="font-medium">{formatSpeed(selectedInterface.speed)}</div>
</div>
<div>
<div className="text-sm text-muted-foreground">Duplex</div>
<div className="font-medium capitalize">{selectedInterface.duplex}</div>
</div>
<div>
<div className="text-sm text-muted-foreground">MTU</div>
<div className="font-medium">{selectedInterface.mtu}</div>
</div>
{selectedInterface.mac_address && (
<div className="col-span-2">
<div className="text-sm text-muted-foreground">MAC Address</div>
<div className="font-medium font-mono">{selectedInterface.mac_address}</div>
</div>
)}
</div>
</div>
{/* IP Addresses */}
{selectedInterface.addresses.length > 0 && (
<div>
<h3 className="text-sm font-semibold text-muted-foreground mb-3">IP Addresses</h3>
<div className="space-y-2">
{selectedInterface.addresses.map((addr, idx) => (
<div key={idx} className="flex items-center justify-between p-3 rounded-lg bg-muted/50">
<div>
<div className="font-medium font-mono">{addr.ip}</div>
<div className="text-sm text-muted-foreground">Netmask: {addr.netmask}</div>
</div>
</div>
))}
</div>
</div>
)}
{/* Traffic Statistics */}
<div>
<h3 className="text-sm font-semibold text-muted-foreground mb-3">Traffic Statistics</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<div className="text-sm text-muted-foreground">Bytes Received</div>
<div className="font-medium text-green-500">{formatBytes(selectedInterface.bytes_recv)}</div>
</div>
<div>
<div className="text-sm text-muted-foreground">Bytes Sent</div>
<div className="font-medium text-blue-500">{formatBytes(selectedInterface.bytes_sent)}</div>
</div>
<div>
<div className="text-sm text-muted-foreground">Packets Received</div>
<div className="font-medium">{selectedInterface.packets_recv?.toLocaleString() || "N/A"}</div>
</div>
<div>
<div className="text-sm text-muted-foreground">Packets Sent</div>
<div className="font-medium">{selectedInterface.packets_sent?.toLocaleString() || "N/A"}</div>
</div>
<div>
<div className="text-sm text-muted-foreground">Errors In</div>
<div className="font-medium text-red-500">{selectedInterface.errors_in || 0}</div>
</div>
<div>
<div className="text-sm text-muted-foreground">Errors Out</div>
<div className="font-medium text-red-500">{selectedInterface.errors_out || 0}</div>
</div>
<div>
<div className="text-sm text-muted-foreground">Drops In</div>
<div className="font-medium text-yellow-500">{selectedInterface.drops_in || 0}</div>
</div>
<div>
<div className="text-sm text-muted-foreground">Drops Out</div>
<div className="font-medium text-yellow-500">{selectedInterface.drops_out || 0}</div>
</div>
</div>
</div>
{/* Bond Information */}
{selectedInterface.type === "bond" && selectedInterface.bond_slaves && (
<div>
<h3 className="text-sm font-semibold text-muted-foreground mb-3">Bond Configuration</h3>
<div className="space-y-3">
<div>
<div className="text-sm text-muted-foreground">Bonding Mode</div>
<div className="font-medium">{selectedInterface.bond_mode || "Unknown"}</div>
</div>
{selectedInterface.bond_active_slave && (
<div>
<div className="text-sm text-muted-foreground">Active Slave</div>
<div className="font-medium">{selectedInterface.bond_active_slave}</div>
</div>
)}
<div>
<div className="text-sm text-muted-foreground mb-2">Slave Interfaces</div>
<div className="flex flex-wrap gap-2">
{selectedInterface.bond_slaves.map((slave, idx) => (
<Badge
key={idx}
variant="outline"
className="bg-purple-500/10 text-purple-500 border-purple-500/20"
>
{slave}
</Badge>
))}
</div>
</div>
</div>
</div>
)}
{/* Bridge Information */}
{selectedInterface.type === "bridge" && selectedInterface.bridge_members && (
<div>
<h3 className="text-sm font-semibold text-muted-foreground mb-3">Bridge Configuration</h3>
<div>
<div className="text-sm text-muted-foreground mb-2">Member Interfaces</div>
<div className="flex flex-wrap gap-2">
{selectedInterface.bridge_members.length > 0 ? (
selectedInterface.bridge_members.map((member, idx) => (
<Badge
key={idx}
variant="outline"
className="bg-green-500/10 text-green-500 border-green-500/20"
>
{member}
</Badge>
))
) : (
<div className="text-sm text-muted-foreground">No members</div>
)}
</div>
</div>
</div>
)}
</div>
)}
</DialogContent>
</Dialog>
</div> </div>
) )
} }

View File

@@ -870,8 +870,89 @@ def get_proxmox_storage():
'storage': [] 'storage': []
} }
def get_interface_type(interface_name):
"""Detect the type of network interface"""
try:
# Check if it's a bond
if interface_name.startswith('bond'):
return 'bond'
# Check if it's a bridge
if interface_name.startswith(('vmbr', 'br', 'virbr')):
return 'bridge'
# Check if it's a VLAN (contains a dot)
if '.' in interface_name:
return 'vlan'
# Check if it's NVMe (virtual)
if interface_name.startswith('nvme'):
return 'virtual'
# Check if it's a physical interface
if interface_name.startswith(('enp', 'eth', 'wlan', 'wlp')):
return 'physical'
# Check if it's virtual (veth, tap, tun, etc.)
if interface_name.startswith(('veth', 'tap', 'tun', 'vnet')):
return 'virtual'
# Default to unknown
return 'unknown'
except Exception as e:
print(f"[v0] Error detecting interface type for {interface_name}: {e}")
return 'unknown'
def get_bond_info(bond_name):
"""Get detailed information about a bonding interface"""
bond_info = {
'mode': 'unknown',
'slaves': [],
'active_slave': None
}
try:
bond_file = f'/proc/net/bonding/{bond_name}'
if os.path.exists(bond_file):
with open(bond_file, 'r') as f:
content = f.read()
# Parse bonding mode
for line in content.split('\n'):
if 'Bonding Mode:' in line:
bond_info['mode'] = line.split(':', 1)[1].strip()
elif 'Slave Interface:' in line:
slave_name = line.split(':', 1)[1].strip()
bond_info['slaves'].append(slave_name)
elif 'Currently Active Slave:' in line:
bond_info['active_slave'] = line.split(':', 1)[1].strip()
print(f"[v0] Bond {bond_name} info: mode={bond_info['mode']}, slaves={bond_info['slaves']}")
except Exception as e:
print(f"[v0] Error reading bond info for {bond_name}: {e}")
return bond_info
def get_bridge_info(bridge_name):
"""Get detailed information about a bridge interface"""
bridge_info = {
'members': []
}
try:
# Try to read bridge members from /sys/class/net/<bridge>/brif/
brif_path = f'/sys/class/net/{bridge_name}/brif'
if os.path.exists(brif_path):
members = os.listdir(brif_path)
bridge_info['members'] = members
print(f"[v0] Bridge {bridge_name} members: {members}")
except Exception as e:
print(f"[v0] Error reading bridge info for {bridge_name}: {e}")
return bridge_info
def get_network_info(): def get_network_info():
"""Get network interface information""" """Get network interface information - Enhanced with type detection, speed, MAC, bonds, bridges"""
try: try:
network_data = { network_data = {
'interfaces': [], 'interfaces': [],
@@ -882,20 +963,36 @@ def get_network_info():
net_if_addrs = psutil.net_if_addrs() net_if_addrs = psutil.net_if_addrs()
net_if_stats = psutil.net_if_stats() net_if_stats = psutil.net_if_stats()
try:
net_io_per_nic = psutil.net_io_counters(pernic=True)
except Exception as e:
print(f"[v0] Error getting per-NIC stats: {e}")
net_io_per_nic = {}
for interface_name, interface_addresses in net_if_addrs.items(): for interface_name, interface_addresses in net_if_addrs.items():
# Skip loopback # Skip loopback
if interface_name == 'lo': if interface_name == 'lo':
continue continue
# Skip virtual interfaces that are not bridges interface_type = get_interface_type(interface_name)
# Keep: physical interfaces (enp*, eth*, wlan*) and bridges (vmbr*, br*)
if not (interface_name.startswith(('enp', 'eth', 'wlan', 'vmbr', 'br'))): # Skip unknown virtual interfaces
if interface_type == 'unknown' and not interface_name.startswith(('enp', 'eth', 'wlan', 'vmbr', 'br', 'bond')):
continue
stats = net_if_stats.get(interface_name)
if not stats:
continue continue
interface_info = { interface_info = {
'name': interface_name, 'name': interface_name,
'status': 'up' if net_if_stats[interface_name].isup else 'down', 'type': interface_type, # Added type
'addresses': [] 'status': 'up' if stats.isup else 'down',
'speed': stats.speed if stats.speed > 0 else 0, # Added speed in Mbps
'duplex': 'full' if stats.duplex == 2 else 'half' if stats.duplex == 1 else 'unknown', # Added duplex
'mtu': stats.mtu, # Added MTU
'addresses': [],
'mac_address': None, # Added MAC address
} }
for address in interface_addresses: for address in interface_addresses:
@@ -904,10 +1001,33 @@ def get_network_info():
'ip': address.address, 'ip': address.address,
'netmask': address.netmask 'netmask': address.netmask
}) })
elif address.family == 17: # AF_PACKET (MAC address on Linux)
interface_info['mac_address'] = address.address
if interface_name in net_io_per_nic:
io_stats = net_io_per_nic[interface_name]
interface_info['bytes_sent'] = io_stats.bytes_sent
interface_info['bytes_recv'] = io_stats.bytes_recv
interface_info['packets_sent'] = io_stats.packets_sent
interface_info['packets_recv'] = io_stats.packets_recv
interface_info['errors_in'] = io_stats.errin
interface_info['errors_out'] = io_stats.errout
interface_info['drops_in'] = io_stats.dropin
interface_info['drops_out'] = io_stats.dropout
if interface_type == 'bond':
bond_info = get_bond_info(interface_name)
interface_info['bond_mode'] = bond_info['mode']
interface_info['bond_slaves'] = bond_info['slaves']
interface_info['bond_active_slave'] = bond_info['active_slave']
if interface_type == 'bridge':
bridge_info = get_bridge_info(interface_name)
interface_info['bridge_members'] = bridge_info['members']
network_data['interfaces'].append(interface_info) network_data['interfaces'].append(interface_info)
# Get network I/O statistics # Get network I/O statistics (global)
net_io = psutil.net_io_counters() net_io = psutil.net_io_counters()
network_data['traffic'] = { network_data['traffic'] = {
'bytes_sent': net_io.bytes_sent, 'bytes_sent': net_io.bytes_sent,
@@ -919,6 +1039,8 @@ def get_network_info():
return network_data return network_data
except Exception as e: except Exception as e:
print(f"Error getting network info: {e}") print(f"Error getting network info: {e}")
import traceback
traceback.print_exc()
return { return {
'error': f'Unable to access network information: {str(e)}', 'error': f'Unable to access network information: {str(e)}',
'interfaces': [], 'interfaces': [],
@@ -935,9 +1057,21 @@ def get_proxmox_vms():
if result.returncode == 0: if result.returncode == 0:
vms = json.loads(result.stdout) vms = json.loads(result.stdout)
return vms return vms
else:
# Handle LXC containers as well
result_lxc = subprocess.run(['pvesh', 'get', '/nodes/localhost/lxc', '--output-format', 'json'],
capture_output=True, text=True, timeout=10)
if result_lxc.returncode == 0:
lxc_vms = json.loads(result_lxc.stdout)
# Combine QEMU and LXC for a complete VM list
if 'vms' in locals(): # Check if vms were loaded from QEMU
vms.extend(lxc_vms)
else:
vms = lxc_vms
return vms
else: else:
return { return {
'error': 'pvesh command not available or failed - Proxmox API not accessible', 'error': 'pvesh command not available or failed - Proxmox API not accessible for QEMU and LXC',
'vms': [] 'vms': []
} }
except Exception as e: except Exception as e: