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:22:24 +02:00
parent 3036711fb4
commit 9ff24dc446
1 changed files with 43 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -155,6 +155,11 @@ export function NetworkMetrics() {
const [timeframe, setTimeframe] = useState<"hour" | "day" | "week" | "month" | "year">("day")
const [networkTotals, setNetworkTotals] = useState<{ received: number; sent: number }>({ received: 0, sent: 0 })
const { data: interfaceHistoricalData } = useSWR<any>(`/api/node/metrics?timeframe=${timeframe}`, fetcher, {
refreshInterval: 30000,
revalidateOnFocus: false,
})
if (isLoading) {
return (
<div className="space-y-6">
@@ -186,6 +191,35 @@ export function NetworkMetrics() {
)
}
const calculateInterfaceTraffic = (interfaceName: string) => {
if (!interfaceHistoricalData?.data) {
return { received: 0, sent: 0 }
}
let totalReceived = 0
let totalSent = 0
// Sum up the traffic from RRD data
for (const point of interfaceHistoricalData.data) {
const netinKey = `netin:${interfaceName}`
const netoutKey = `netout:${interfaceName}`
if (point[netinKey] !== null && point[netinKey] !== undefined) {
// RRD data is in bytes/second, multiply by time interval to get total bytes
// Assuming 1 minute intervals for most timeframes
const interval = 60 // seconds
totalReceived += point[netinKey] * interval
}
if (point[netoutKey] !== null && point[netoutKey] !== undefined) {
const interval = 60
totalSent += point[netoutKey] * interval
}
}
return { received: totalReceived, sent: totalSent }
}
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"
@@ -244,7 +278,6 @@ export function NetworkMetrics() {
<span className="text-base lg:text-xl font-bold text-blue-500">↑ {trafficOutFormatted}</span>
</div>
</div>
<p className="text-xs text-muted-foreground mt-2 hidden md:block">Total data transferred</p>
</CardContent>
</Card>
@@ -335,17 +368,6 @@ export function NetworkMetrics() {
</CardTitle>
</CardHeader>
<CardContent>
<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>
@@ -365,6 +387,7 @@ export function NetworkMetrics() {
<div className="space-y-4">
{networkData.physical_interfaces.map((interface_, index) => {
const typeBadge = getInterfaceTypeBadge(interface_.type)
const traffic = calculateInterfaceTraffic(interface_.name)
return (
<div
@@ -413,9 +436,9 @@ export function NetworkMetrics() {
<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-green-500">↓ {formatBytes(traffic.received)}</span>
{" / "}
<span className="text-blue-500">↑ {formatBytes(interface_.bytes_sent)}</span>
<span className="text-blue-500">↑ {formatBytes(traffic.sent)}</span>
</div>
</div>
@@ -450,6 +473,7 @@ export function NetworkMetrics() {
<div className="space-y-4">
{networkData.bridge_interfaces.map((interface_, index) => {
const typeBadge = getInterfaceTypeBadge(interface_.type)
const traffic = calculateInterfaceTraffic(interface_.name)
return (
<div
@@ -526,9 +550,9 @@ export function NetworkMetrics() {
<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-green-500">↓ {formatBytes(traffic.received)}</span>
{" / "}
<span className="text-blue-500">↑ {formatBytes(interface_.bytes_sent)}</span>
<span className="text-blue-500">↑ {formatBytes(traffic.sent)}</span>
</div>
</div>
@@ -565,6 +589,7 @@ export function NetworkMetrics() {
<div className="space-y-4">
{networkData.vm_lxc_interfaces.map((interface_, index) => {
const vmTypeBadge = getVMTypeBadge(interface_.vm_type)
const traffic = calculateInterfaceTraffic(interface_.name)
return (
<div
@@ -614,9 +639,9 @@ export function NetworkMetrics() {
<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-green-500">↓ {formatBytes(traffic.received)}</span>
{" / "}
<span className="text-blue-500">↑ {formatBytes(interface_.bytes_sent)}</span>
<span className="text-blue-500">↑ {formatBytes(traffic.sent)}</span>
</div>
</div>