Mirrors/ProxMenux
1
0
Fork 0
mirror of https://github.com/MacRimi/ProxMenux.git synced 2025-11-18 11:36:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update network-metrics.tsx

Browse Source
This commit is contained in:
MacRimi
2025-10-12 19:32:17 +02:00
parent 598395cd38
commit beb4251688
1 changed files with 48 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
AppImage/components/network-metrics.tsx
View File

@@ -21,6 +21,8 @@ interface NetworkData {
packet_loss_out?: number packet_loss_out?: number
dropin?: number dropin?: number
dropout?: number dropout?: number
errin?: number
errout?: number
} }
active_count?: number active_count?: number
total_count?: number total_count?: number
@@ -172,6 +174,23 @@ export function NetworkMetrics() {
const trafficOutGB = (networkData.traffic.bytes_sent / 1024 ** 3).toFixed(2) 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 packetsRecvK = networkData.traffic.packets_recv ? (networkData.traffic.packets_recv / 1000).toFixed(0) : "0"
const totalErrors = (networkData.traffic.errin || 0) + (networkData.traffic.errout || 0)
const packetLossIn = networkData.traffic.packet_loss_in || 0
const packetLossOut = networkData.traffic.packet_loss_out || 0
const avgPacketLoss = ((packetLossIn + packetLossOut) / 2).toFixed(2)
// Determine health status
let healthStatus = "Healthy"
let healthColor = "bg-green-500/10 text-green-500 border-green-500/20"
if (Number.parseFloat(avgPacketLoss) > 5 || totalErrors > 1000) {
healthStatus = "Critical"
healthColor = "bg-red-500/10 text-red-500 border-red-500/20"
} else if (Number.parseFloat(avgPacketLoss) >= 1 || totalErrors >= 100) {
healthStatus = "Warning"
healthColor = "bg-yellow-500/10 text-yellow-500 border-yellow-500/20"
}
return ( return (
<div className="space-y-6"> <div className="space-y-6">
{/* Network Overview Cards */} {/* Network Overview Cards */}
@@ -182,10 +201,15 @@ export function NetworkMetrics() {
<Activity className="h-4 w-4 text-muted-foreground" /> <Activity className="h-4 w-4 text-muted-foreground" />
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold text-foreground">{trafficInGB} GB</div> <div className="flex flex-col gap-2">
<div className="flex flex-wrap items-center gap-2 mt-2"> <div className="flex items-center justify-between">
<span className="text-xs text-green-500">↓ {trafficInGB} GB</span> <span className="text-sm text-muted-foreground">Received:</span>
<span className="text-xs text-blue-500">↑ {trafficOutGB} GB</span> <span className="text-xl font-bold text-green-500">↓ {trafficInGB} GB</span>
</div>
<div className="flex items-center justify-between">
<span className="text-sm text-muted-foreground">Sent:</span>
<span className="text-xl font-bold text-blue-500">↑ {trafficOutGB} GB</span>
</div>
</div> </div>
<p className="text-xs text-muted-foreground mt-2">Total data transferred</p> <p className="text-xs text-muted-foreground mt-2">Total data transferred</p>
</CardContent> </CardContent>
@@ -232,17 +256,31 @@ export function NetworkMetrics() {
<Card className="bg-card border-border"> <Card className="bg-card border-border">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium text-muted-foreground">Packets</CardTitle> <CardTitle className="text-sm font-medium text-muted-foreground">Network Health</CardTitle>
<Activity className="h-4 w-4 text-muted-foreground" /> <Activity className="h-4 w-4 text-muted-foreground" />
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold text-foreground">{packetsRecvK}K</div> <div className="text-2xl font-bold text-foreground mb-2">
<div className="flex items-center gap-2 mt-2"> <Badge variant="outline" className={healthColor}>
<Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20 text-xs"> {healthStatus}
Received
</Badge> </Badge>
</div> </div>
<p className="text-xs text-muted-foreground mt-2">No packet loss</p> <div className="space-y-1">
<div className="flex items-center justify-between text-sm">
<span className="text-muted-foreground">Packet Loss:</span>
<span
className={`font-medium ${Number.parseFloat(avgPacketLoss) > 1 ? "text-red-500" : "text-green-500"}`}
>
{avgPacketLoss}%
</span>
</div>
<div className="flex items-center justify-between text-sm">
<span className="text-muted-foreground">Errors:</span>
<span className={`font-medium ${totalErrors > 100 ? "text-red-500" : "text-green-500"}`}>
{totalErrors}
</span>
</div>
</div>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>