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-25 21:36:46 +02:00
parent 042e6584eb
commit 35c50a7c60
1 changed files with 78 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -789,73 +789,40 @@ export function NetworkMetrics() {
</div> </div>
)} )}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6"> <div>
{/* Traffic Statistics - Left Column */} <h3 className="text-sm font-semibold text-muted-foreground mb-4">
<div> Network Traffic Statistics (
<h3 className="text-sm font-semibold text-muted-foreground mb-3">Traffic since last boot</h3> {modalTimeframe === "hour"
<div className="grid grid-cols-2 gap-4"> ? "Last Hour"
<div> : modalTimeframe === "day"
<div className="text-sm text-muted-foreground">Bytes Received</div> ? "Last 24 Hours"
<div className="font-medium text-green-500"> : modalTimeframe === "week"
{formatStorage(interfaceTotals.received * 1024 * 1024 * 1024)} ? "Last 7 Days"
</div> : modalTimeframe === "month"
</div> ? "Last 30 Days"
<div> : "Last Year"}
<div className="text-sm text-muted-foreground">Bytes Sent</div> )
<div className="font-medium text-blue-500"> </h3>
{formatStorage(interfaceTotals.sent * 1024 * 1024 * 1024)} <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
</div> {/* Traffic Data - Left Column */}
</div> <div className="space-y-4">
<div> <div className="grid grid-cols-2 gap-4">
<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>
<div className="text-sm text-muted-foreground">Packet Loss In</div> <div className="text-sm text-muted-foreground">Bytes Received</div>
<div <div className="font-medium text-green-500 text-lg">
className={`font-medium ${selectedInterface.packet_loss_in > 1 ? "text-red-500" : "text-green-500"}`} {formatStorage(interfaceTotals.received * 1024 * 1024 * 1024)}
>
{selectedInterface.packet_loss_in}%
</div> </div>
</div> </div>
)}
{selectedInterface.packet_loss_out !== undefined && (
<div> <div>
<div className="text-sm text-muted-foreground">Packet Loss Out</div> <div className="text-sm text-muted-foreground">Bytes Sent</div>
<div <div className="font-medium text-blue-500 text-lg">
className={`font-medium ${selectedInterface.packet_loss_out > 1 ? "text-red-500" : "text-green-500"}`} {formatStorage(interfaceTotals.sent * 1024 * 1024 * 1024)}
>
{selectedInterface.packet_loss_out}%
</div> </div>
</div> </div>
)} </div>
</div> </div>
</div>
{/* Network Traffic Chart - Right Column */} {/* Network Traffic Chart - Right Column */}
<div>
<h3 className="text-sm font-semibold text-muted-foreground mb-3">Network Traffic History</h3>
<div className="bg-muted/30 rounded-lg p-4"> <div className="bg-muted/30 rounded-lg p-4">
<NetworkTrafficChart <NetworkTrafficChart
timeframe={modalTimeframe} timeframe={modalTimeframe}
@@ -866,6 +833,58 @@ export function NetworkMetrics() {
</div> </div>
</div> </div>
<div>
<h3 className="text-sm font-semibold text-muted-foreground mb-4">
Cumulative Statistics (Since Last Boot)
</h3>
<div className="grid grid-cols-2 gap-4">
<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>
{/* Bond Information */} {/* Bond Information */}
{selectedInterface.type === "bond" && selectedInterface.bond_slaves && ( {selectedInterface.type === "bond" && selectedInterface.bond_slaves && (
<div> <div>