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

Update network-metrics.tsx

Browse Source
This commit is contained in:
MacRimi
2025-10-25 22:31:13 +02:00
parent a229231c0c
commit 5738c90721
1 changed files with 62 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -835,13 +835,66 @@ export function NetworkMetrics() {
</div> </div>
</div> </div>
) : selectedInterface.status.toLowerCase() === "up" && selectedInterface.vm_type === "vm" ? ( ) : selectedInterface.status.toLowerCase() === "up" && selectedInterface.vm_type === "vm" ? (
<div className="bg-muted/30 rounded-lg p-6 text-center"> <div>
<AlertCircle className="h-12 w-12 text-muted-foreground mx-auto mb-3" /> <h3 className="text-sm font-semibold text-muted-foreground mb-4">Traffic Statistics</h3>
<h3 className="text-lg font-semibold text-foreground mb-2">Historical Metrics Not Available</h3> <div className="grid grid-cols-2 gap-4">
<p className="text-sm text-muted-foreground"> <div>
Proxmox does not store historical network metrics for individual VM interfaces. Only cumulative <div className="text-sm text-muted-foreground">Bytes Received</div>
statistics since last boot are available below. <div className="font-medium text-green-500 text-lg">
</p> {formatBytes(selectedInterface.bytes_recv)}
</div>
</div>
<div>
<div className="text-sm text-muted-foreground">Bytes Sent</div>
<div className="font-medium text-blue-500 text-lg">
{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>
{selectedInterface.packet_loss_in !== undefined && (
<div>
<div className="text-sm text-muted-foreground">Packet Loss In</div>
<div
className={`font-medium ${selectedInterface.packet_loss_in > 1 ? "text-red-500" : "text-green-500"}`}
>
{selectedInterface.packet_loss_in}%
</div>
</div>
)}
{selectedInterface.packet_loss_out !== undefined && (
<div>
<div className="text-sm text-muted-foreground">Packet Loss Out</div>
<div
className={`font-medium ${selectedInterface.packet_loss_out > 1 ? "text-red-500" : "text-green-500"}`}
>
{selectedInterface.packet_loss_out}%
</div>
</div>
)}
</div>
</div> </div>
) : ( ) : (
<div className="bg-muted/30 rounded-lg p-6 text-center"> <div className="bg-muted/30 rounded-lg p-6 text-center">
@@ -853,8 +906,8 @@ export function NetworkMetrics() {
</div> </div>
)} )}
{/* Cumulative Statistics - Only show if interface is UP */} {/* Cumulative Statistics - Only show if interface is UP and NOT a VM interface */}
{selectedInterface.status.toLowerCase() === "up" && ( {selectedInterface.status.toLowerCase() === "up" && selectedInterface.vm_type !== "vm" && (
<div> <div>
<h3 className="text-sm font-semibold text-muted-foreground mb-4"> <h3 className="text-sm font-semibold text-muted-foreground mb-4">
Cumulative Statistics (Since Last Boot) Cumulative Statistics (Since Last Boot)