mirror of
https://github.com/MacRimi/ProxMenux.git
synced 2025-11-18 03:26:17 +00:00
Update AppImage
This commit is contained in:
MacRimi
@@ -4,10 +4,9 @@ import { useState } from "react"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
|
||||
import { Badge } from "./ui/badge"
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog"
|
||||
import { Wifi, Activity, Network, Router, AlertCircle, Zap, Info } from "lucide-react"
|
||||
import { Wifi, Activity, Network, Router, AlertCircle, Zap } from "lucide-react"
|
||||
import useSWR from "swr"
|
||||
import { NetworkTrafficChart } from "./network-traffic-chart"
|
||||
import { VMNetworkChart } from "./vm-lxc-network-chart"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select"
|
||||
|
||||
interface NetworkData {
|
||||
@@ -155,15 +154,12 @@ export function NetworkMetrics() {
|
||||
const [selectedInterface, setSelectedInterface] = useState<NetworkInterface | null>(null)
|
||||
const [timeframe, setTimeframe] = useState<"hour" | "day" | "week" | "month" | "year">("day")
|
||||
const [networkTotals, setNetworkTotals] = useState<{ received: number; sent: number }>({ received: 0, sent: 0 })
|
||||
// REMOVED: const [vmLxcTraffic, setVmLxcTraffic] = useState<Record<number, { received: number; sent: number }>>({})
|
||||
|
||||
const { data: interfaceHistoricalData } = useSWR<any>(`/api/node/metrics?timeframe=${timeframe}`, fetcher, {
|
||||
refreshInterval: 30000,
|
||||
revalidateOnFocus: false,
|
||||
})
|
||||
|
||||
// REMOVED: useEffect for VM/LXC traffic fetch
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
@@ -195,10 +191,8 @@ export function NetworkMetrics() {
|
||||
)
|
||||
}
|
||||
|
||||
// REMOVED: const trafficInFormatted = formatStorage(networkData.traffic.bytes_recv * 1024 * 1024 * 1024) // Convert GB to bytes
|
||||
// REMOVED: const trafficOutFormatted = formatStorage(networkData.traffic.bytes_sent * 1024 * 1024 * 1024)
|
||||
const trafficInFormatted = formatStorage(networkData.traffic.bytes_recv)
|
||||
const trafficOutFormatted = formatStorage(networkData.traffic.bytes_sent)
|
||||
const trafficInFormatted = formatStorage(networkTotals.received * 1024 * 1024 * 1024) // Convert GB to bytes
|
||||
const trafficOutFormatted = formatStorage(networkTotals.sent * 1024 * 1024 * 1024)
|
||||
const packetsRecvK = networkData.traffic.packets_recv ? (networkData.traffic.packets_recv / 1000).toFixed(0) : "0"
|
||||
|
||||
const totalErrors = (networkData.traffic.errin || 0) + (networkData.traffic.errout || 0)
|
||||
@@ -248,15 +242,11 @@ export function NetworkMetrics() {
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground hidden md:inline">Received:</span>
|
||||
<span className="text-base lg:text-xl font-bold text-green-500">
|
||||
↓ {formatStorage(networkData.traffic.bytes_recv)}
|
||||
</span>
|
||||
<span className="text-base lg:text-xl font-bold text-green-500">↓ {trafficInFormatted}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground hidden md:inline">Sent:</span>
|
||||
<span className="text-base lg:text-xl font-bold text-blue-500">
|
||||
↑ {formatStorage(networkData.traffic.bytes_sent)}
|
||||
</span>
|
||||
<span className="text-base lg:text-xl font-bold text-blue-500">↑ {trafficOutFormatted}</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
@@ -353,113 +343,100 @@ export function NetworkMetrics() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* VM & LXC Network Interfaces section */}
|
||||
{networkData.vm_lxc_interfaces && networkData.vm_lxc_interfaces.length > 0 && (
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-foreground flex items-center">
|
||||
<Network className="h-5 w-5 mr-2" />
|
||||
VM & LXC Network Interfaces
|
||||
<Badge variant="outline" className="ml-3 bg-orange-500/10 text-orange-500 border-orange-500/20">
|
||||
{networkData.vm_lxc_active_count ?? 0} / {networkData.vm_lxc_total_count ?? 0} Active
|
||||
</Badge>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{networkData.vm_lxc_interfaces.map((interface_, index) => {
|
||||
const vmTypeBadge = getVMTypeBadge(interface_.vm_type)
|
||||
// REMOVED: const trafficData = interface_.vmid && vmLxcTraffic[interface_.vmid]
|
||||
// REMOVED: const bytesRecv = trafficData ? trafficData.received : interface_.bytes_recv
|
||||
// REMOVED: const bytesSent = trafficData ? trafficData.sent : interface_.bytes_sent
|
||||
{/* Physical Interfaces section */}
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-foreground flex items-center">
|
||||
<Router className="h-5 w-5 mr-2" />
|
||||
Physical Interfaces
|
||||
<Badge variant="outline" className="ml-3 bg-blue-500/10 text-blue-500 border-blue-500/20">
|
||||
{networkData.physical_active_count ?? 0}/{networkData.physical_total_count ?? 0} Active
|
||||
</Badge>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{networkData.physical_interfaces.map((interface_, index) => {
|
||||
const typeBadge = getInterfaceTypeBadge(interface_.type)
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="flex flex-col gap-3 p-4 rounded-lg border border-white/10 bg-white/5 sm:bg-card sm:hover:bg-white/5 transition-colors cursor-pointer"
|
||||
onClick={() => setSelectedInterface(interface_)}
|
||||
>
|
||||
{/* First row: Icon, Name, VM/LXC Badge, VM Name, Status */}
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
<Wifi className="h-5 w-5 text-muted-foreground flex-shrink-0" />
|
||||
<div className="flex items-center gap-2 min-w-0 flex-1 flex-wrap">
|
||||
<div className="font-medium text-foreground">{interface_.name}</div>
|
||||
<Badge variant="outline" className={vmTypeBadge.color}>
|
||||
{vmTypeBadge.label}
|
||||
</Badge>
|
||||
{interface_.vm_name && (
|
||||
<div className="text-sm text-muted-foreground truncate">→ {interface_.vm_name}</div>
|
||||
)}
|
||||
</div>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={
|
||||
interface_.status === "up"
|
||||
? "bg-green-500/10 text-green-500 border-green-500/20"
|
||||
: "bg-red-500/10 text-red-500 border-red-500/20"
|
||||
}
|
||||
>
|
||||
{interface_.status.toUpperCase()}
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="flex flex-col gap-3 p-4 rounded-lg border border-white/10 bg-white/5 sm:bg-card sm:hover:bg-white/5 transition-colors cursor-pointer"
|
||||
onClick={() => setSelectedInterface(interface_)}
|
||||
>
|
||||
{/* First row: Icon, Name, Type Badge, Status */}
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
<Wifi className="h-5 w-5 text-muted-foreground flex-shrink-0" />
|
||||
<div className="flex items-center gap-2 min-w-0 flex-1 flex-wrap">
|
||||
<div className="font-medium text-foreground">{interface_.name}</div>
|
||||
<Badge variant="outline" className={typeBadge.color}>
|
||||
{typeBadge.label}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Second row: Details - Responsive layout */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground">VMID</div>
|
||||
<div className="font-medium">{interface_.vmid ?? "N/A"}</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="text-sm 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 className="col-span-2 md:col-span-1">
|
||||
<div className="text-sm text-muted-foreground">Traffic</div>
|
||||
<div className="font-medium text-foreground text-xs">
|
||||
<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 className="col-span-2 md:col-span-1">
|
||||
<div className="text-sm text-muted-foreground">MAC</div>
|
||||
<div className="font-medium text-foreground font-mono text-xs truncate">
|
||||
{interface_.mac_address}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={
|
||||
interface_.status === "up"
|
||||
? "bg-green-500/10 text-green-500 border-green-500/20"
|
||||
: "bg-red-500/10 text-red-500 border-red-500/20"
|
||||
}
|
||||
>
|
||||
{interface_.status.toUpperCase()}
|
||||
</Badge>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Second row: Details - Responsive layout */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
|
||||
<div>
|
||||
<div className="text-muted-foreground text-xs">IP Address</div>
|
||||
<div className="font-medium text-foreground font-mono text-sm truncate">
|
||||
{interface_.addresses.length > 0 ? interface_.addresses[0].ip : "N/A"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="text-muted-foreground text-xs">Speed</div>
|
||||
<div className="font-medium text-foreground flex items-center gap-1 text-xs">
|
||||
<Zap className="h-3 w-3" />
|
||||
{formatSpeed(interface_.speed)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-span-2 md:col-span-1">
|
||||
<div className="text-muted-foreground text-xs">Traffic Statistics</div>
|
||||
<div className="font-medium text-foreground text-xs">
|
||||
<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 className="col-span-2 md:col-span-1">
|
||||
<div className="text-muted-foreground text-xs">MAC</div>
|
||||
<div className="font-medium text-foreground font-mono text-xs truncate">
|
||||
{interface_.mac_address}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{networkData.bridge_interfaces && networkData.bridge_interfaces.length > 0 && (
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-foreground flex items-center flex-wrap gap-2">
|
||||
<CardTitle className="text-foreground flex items-center">
|
||||
<Network className="h-5 w-5 mr-2" />
|
||||
Bridge Interfaces
|
||||
<Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
|
||||
<Badge variant="outline" className="ml-3 bg-green-500/10 text-green-500 border-green-500/20">
|
||||
{networkData.bridge_active_count ?? 0}/{networkData.bridge_total_count ?? 0} Active
|
||||
</Badge>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="bg-amber-500/10 text-amber-500 border-amber-500/20 flex items-center gap-1"
|
||||
>
|
||||
<Info className="h-3 w-3" />
|
||||
Since Boot
|
||||
</Badge>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
@@ -540,7 +517,7 @@ export function NetworkMetrics() {
|
||||
</div>
|
||||
|
||||
<div className="col-span-2 md:col-span-1">
|
||||
<div className="text-muted-foreground text-xs">Traffic</div>
|
||||
<div className="text-muted-foreground text-xs">Traffic Statistics</div>
|
||||
<div className="font-medium text-foreground text-xs">
|
||||
<span className="text-green-500">↓ {formatBytes(interface_.bytes_recv)}</span>
|
||||
{" / "}
|
||||
@@ -565,96 +542,93 @@ export function NetworkMetrics() {
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-foreground flex items-center flex-wrap gap-2">
|
||||
<Router className="h-5 w-5 mr-2" />
|
||||
Physical Interfaces
|
||||
<Badge variant="outline" className="bg-blue-500/10 text-blue-500 border-blue-500/20">
|
||||
{networkData.physical_active_count ?? 0}/{networkData.physical_total_count ?? 0} Active
|
||||
</Badge>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="bg-amber-500/10 text-amber-500 border-amber-500/20 flex items-center gap-1"
|
||||
>
|
||||
<Info className="h-3 w-3" />
|
||||
Since Boot
|
||||
</Badge>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{networkData.physical_interfaces.map((interface_, index) => {
|
||||
const typeBadge = getInterfaceTypeBadge(interface_.type)
|
||||
{/* VM & LXC Network Interfaces section */}
|
||||
{networkData.vm_lxc_interfaces && networkData.vm_lxc_interfaces.length > 0 && (
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-foreground flex items-center">
|
||||
<Network className="h-5 w-5 mr-2" />
|
||||
VM & LXC Network Interfaces
|
||||
<Badge variant="outline" className="ml-3 bg-orange-500/10 text-orange-500 border-orange-500/20">
|
||||
{networkData.vm_lxc_active_count ?? 0} / {networkData.vm_lxc_total_count ?? 0} Active
|
||||
</Badge>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{networkData.vm_lxc_interfaces.map((interface_, index) => {
|
||||
const vmTypeBadge = getVMTypeBadge(interface_.vm_type)
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="flex flex-col gap-3 p-4 rounded-lg border border-white/10 bg-white/5 sm:bg-card sm:hover:bg-white/5 transition-colors cursor-pointer"
|
||||
onClick={() => setSelectedInterface(interface_)}
|
||||
>
|
||||
{/* First row: Icon, Name, Type Badge, Status */}
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
<Wifi className="h-5 w-5 text-muted-foreground flex-shrink-0" />
|
||||
<div className="flex items-center gap-2 min-w-0 flex-1 flex-wrap">
|
||||
<div className="font-medium text-foreground">{interface_.name}</div>
|
||||
<Badge variant="outline" className={typeBadge.color}>
|
||||
{typeBadge.label}
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="flex flex-col gap-3 p-4 rounded-lg border border-white/10 bg-white/5 sm:bg-card sm:hover:bg-white/5 transition-colors cursor-pointer"
|
||||
onClick={() => setSelectedInterface(interface_)}
|
||||
>
|
||||
{/* First row: Icon, Name, VM/LXC Badge, VM Name, Status */}
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
<Wifi className="h-5 w-5 text-muted-foreground flex-shrink-0" />
|
||||
<div className="flex items-center gap-2 min-w-0 flex-1 flex-wrap">
|
||||
<div className="font-medium text-foreground">{interface_.name}</div>
|
||||
<Badge variant="outline" className={vmTypeBadge.color}>
|
||||
{vmTypeBadge.label}
|
||||
</Badge>
|
||||
{interface_.vm_name && (
|
||||
<div className="text-sm text-muted-foreground truncate">→ {interface_.vm_name}</div>
|
||||
)}
|
||||
</div>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={
|
||||
interface_.status === "up"
|
||||
? "bg-green-500/10 text-green-500 border-green-500/20"
|
||||
: "bg-red-500/10 text-red-500 border-red-500/20"
|
||||
}
|
||||
>
|
||||
{interface_.status.toUpperCase()}
|
||||
</Badge>
|
||||
</div>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={
|
||||
interface_.status === "up"
|
||||
? "bg-green-500/10 text-green-500 border-green-500/20"
|
||||
: "bg-red-500/10 text-red-500 border-red-500/20"
|
||||
}
|
||||
>
|
||||
{interface_.status.toUpperCase()}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Second row: Details - Responsive layout */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
|
||||
<div>
|
||||
<div className="text-muted-foreground text-xs">IP Address</div>
|
||||
<div className="font-medium text-foreground font-mono text-sm truncate">
|
||||
{interface_.addresses.length > 0 ? interface_.addresses[0].ip : "N/A"}
|
||||
{/* Second row: Details - Responsive layout */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground">VMID</div>
|
||||
<div className="font-medium">{interface_.vmid ?? "N/A"}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="text-muted-foreground text-xs">Speed</div>
|
||||
<div className="font-medium text-foreground flex items-center gap-1 text-xs">
|
||||
<Zap className="h-3 w-3" />
|
||||
{formatSpeed(interface_.speed)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-span-2 md:col-span-1">
|
||||
<div className="text-muted-foreground text-xs">Traffic</div>
|
||||
<div className="font-medium text-foreground text-xs">
|
||||
<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 className="col-span-2 md:col-span-1">
|
||||
<div className="text-muted-foreground text-xs">MAC</div>
|
||||
<div className="font-medium text-foreground font-mono text-xs truncate">
|
||||
{interface_.mac_address}
|
||||
<div>
|
||||
<div className="text-sm 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 className="col-span-2 md:col-span-1">
|
||||
<div className="text-sm text-muted-foreground">Traffic Statistics</div>
|
||||
<div className="font-medium text-foreground text-xs">
|
||||
<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 className="col-span-2 md:col-span-1">
|
||||
<div className="text-sm text-muted-foreground">MAC</div>
|
||||
<div className="font-medium text-foreground font-mono text-xs truncate">
|
||||
{interface_.mac_address}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Interface Details Modal */}
|
||||
<Dialog open={!!selectedInterface} onOpenChange={() => setSelectedInterface(null)}>
|
||||
@@ -858,18 +832,6 @@ export function NetworkMetrics() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Network chart for VM/LXC interfaces */}
|
||||
{selectedInterface.type === "vm_lxc" && selectedInterface.vmid && selectedInterface.vm_type && (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-muted-foreground mb-3">Network Traffic History</h3>
|
||||
<VMNetworkChart
|
||||
vmid={selectedInterface.vmid}
|
||||
vmType={selectedInterface.vm_type as "qemu" | "lxc"}
|
||||
initialTimeframe={timeframe}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Bond Information */}
|
||||
{selectedInterface.type === "bond" && selectedInterface.bond_slaves && (
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user