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-24 20:08:33 +02:00
parent 53363f293b
commit 3036711fb4
1 changed files with 32 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -153,6 +153,7 @@ 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 })
if (isLoading) {
return (
@@ -185,8 +186,8 @@ export function NetworkMetrics() {
)
}
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)
@@ -206,6 +207,23 @@ export function NetworkMetrics() {
healthColor = "bg-yellow-500/10 text-yellow-500 border-yellow-500/20"
}
const getTimeframeLabel = () => {
switch (timeframe) {
case "hour":
return "1 Hour"
case "day":
return "24 Hours"
case "week":
return "7 Days"
case "month":
return "30 Days"
case "year":
return "1 Year"
default:
return "24 Hours"
}
}
return (
<div className="space-y-6">
{/* Network Overview Cards */}
@@ -317,7 +335,18 @@ export function NetworkMetrics() {
</CardTitle>
</CardHeader>
<CardContent>
<NetworkTrafficChart timeframe={timeframe} />
<div className="flex flex-col gap-4 mb-4">
<div className="flex items-center justify-between">
<span className="text-sm text-muted-foreground">Received:</span>
<span className="text-xl font-bold text-green-500">↓ {trafficInFormatted}</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">↑ {trafficOutFormatted}</span>
</div>
<p className="text-xs text-muted-foreground">Data transferred in {getTimeframeLabel().toLowerCase()}</p>
</div>
<NetworkTrafficChart timeframe={timeframe} onTotalsCalculated={setNetworkTotals} />
</CardContent>
</Card>