From a8b8036311a8982275fcc1ba55d6d8e95d821838 Mon Sep 17 00:00:00 2001 From: MacRimi Date: Fri, 24 Oct 2025 21:40:19 +0200 Subject: [PATCH] Update network-metrics.tsx --- AppImage/components/network-metrics.tsx | 112 ++++-------------------- 1 file changed, 18 insertions(+), 94 deletions(-) diff --git a/AppImage/components/network-metrics.tsx b/AppImage/components/network-metrics.tsx index dd64ecb..bb4d264 100644 --- a/AppImage/components/network-metrics.tsx +++ b/AppImage/components/network-metrics.tsx @@ -1,6 +1,6 @@ "use client" -import { useState, useEffect } from "react" +import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "./ui/card" import { Badge } from "./ui/badge" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog" @@ -155,96 +155,14 @@ export function NetworkMetrics() { const [selectedInterface, setSelectedInterface] = useState(null) const [timeframe, setTimeframe] = useState<"hour" | "day" | "week" | "month" | "year">("day") const [networkTotals, setNetworkTotals] = useState<{ received: number; sent: number }>({ received: 0, sent: 0 }) - const [vmLxcTraffic, setVmLxcTraffic] = useState>({}) + // REMOVED: const [vmLxcTraffic, setVmLxcTraffic] = useState>({}) const { data: interfaceHistoricalData } = useSWR(`/api/node/metrics?timeframe=${timeframe}`, fetcher, { refreshInterval: 30000, revalidateOnFocus: false, }) - useEffect(() => { - console.log("[v0] ===== VM/LXC TRAFFIC FETCH EFFECT TRIGGERED =====") - console.log("[v0] Timeframe:", timeframe) - console.log("[v0] VM/LXC interfaces count:", networkData?.vm_lxc_interfaces?.length) - - if (!networkData?.vm_lxc_interfaces || networkData.vm_lxc_interfaces.length === 0) { - console.log("[v0] No VM/LXC interfaces found, skipping fetch") - return - } - - const fetchVMTraffic = async () => { - console.log("[v0] Starting VM/LXC traffic fetch for timeframe:", timeframe) - const trafficData: Record = {} - - for (const iface of networkData.vm_lxc_interfaces) { - if (!iface.vmid || !iface.vm_type) { - console.log(`[v0] Skipping interface ${iface.name}: missing vmid or vm_type`) - continue - } - - try { - console.log(`[v0] Fetching metrics for VM/LXC ${iface.vmid} (${iface.vm_type})...`) - const response = await fetch(`/api/vm/${iface.vmid}/metrics?timeframe=${timeframe}&type=${iface.vm_type}`) - - if (!response.ok) { - console.log(`[v0] Failed to fetch metrics for VM/LXC ${iface.vmid}: ${response.status}`) - continue - } - - const data = await response.json() - console.log(`[v0] VM/LXC ${iface.vmid} RRD data received:`, { - dataPoints: data.rrddata?.length, - hasData: !!data.rrddata, - }) - - if (!data.rrddata || data.rrddata.length === 0) { - console.log(`[v0] No RRD data for VM/LXC ${iface.vmid}`) - continue - } - - let totalReceived = 0 - let totalSent = 0 - - const timeInterval = - data.rrddata.length > 1 - ? (data.rrddata[data.rrddata.length - 1].time - data.rrddata[0].time) / (data.rrddata.length - 1) - : 60 - - console.log(`[v0] VM/LXC ${iface.vmid} time interval: ${timeInterval}s, data points: ${data.rrddata.length}`) - - for (const point of data.rrddata) { - if (point.netin !== null && point.netin !== undefined && !isNaN(point.netin)) { - totalReceived += point.netin * timeInterval - } - if (point.netout !== null && point.netout !== undefined && !isNaN(point.netout)) { - totalSent += point.netout * timeInterval - } - } - - console.log(`[v0] VM/LXC ${iface.vmid} calculated traffic:`, { - received: totalReceived, - sent: totalSent, - receivedFormatted: formatBytes(totalReceived), - sentFormatted: formatBytes(totalSent), - }) - - trafficData[iface.vmid] = { - received: totalReceived, - sent: totalSent, - } - } catch (error) { - console.error(`[v0] Error fetching traffic for VM/LXC ${iface.vmid}:`, error) - } - } - - console.log("[v0] Final VM/LXC traffic data:", trafficData) - console.log("[v0] Setting VM/LXC traffic state...") - setVmLxcTraffic(trafficData) - console.log("[v0] ===== VM/LXC TRAFFIC FETCH COMPLETE =====") - } - - fetchVMTraffic() - }, [networkData, timeframe]) // Changed dependency from networkData?.vm_lxc_interfaces to networkData + // REMOVED: useEffect for VM/LXC traffic fetch if (isLoading) { return ( @@ -277,8 +195,10 @@ export function NetworkMetrics() { ) } - const trafficInFormatted = formatStorage(networkData.traffic.bytes_recv * 1024 * 1024 * 1024) // Convert GB to bytes - const trafficOutFormatted = formatStorage(networkData.traffic.bytes_sent * 1024 * 1024 * 1024) + // REMOVED: const trafficInFormatted = formatStorage(networkData.traffic.bytes_recv * 1024 * 1024 * 1024) // Convert GB to bytes + // REMOVED: const trafficOutFormatted = formatStorage(networkData.traffic.bytes_sent * 1024 * 1024 * 1024) + const trafficInFormatted = formatStorage(networkData.traffic.bytes_recv) + const trafficOutFormatted = formatStorage(networkData.traffic.bytes_sent) const packetsRecvK = networkData.traffic.packets_recv ? (networkData.traffic.packets_recv / 1000).toFixed(0) : "0" const totalErrors = (networkData.traffic.errin || 0) + (networkData.traffic.errout || 0) @@ -328,11 +248,15 @@ export function NetworkMetrics() {
Received: - ↓ {trafficInFormatted} + + ↓ {formatStorage(networkData.traffic.bytes_recv)} +
Sent: - ↑ {trafficOutFormatted} + + ↑ {formatStorage(networkData.traffic.bytes_sent)} +
@@ -445,9 +369,9 @@ export function NetworkMetrics() {
{networkData.vm_lxc_interfaces.map((interface_, index) => { const vmTypeBadge = getVMTypeBadge(interface_.vm_type) - const trafficData = interface_.vmid && vmLxcTraffic[interface_.vmid] - const bytesRecv = trafficData ? trafficData.received : interface_.bytes_recv - const bytesSent = trafficData ? trafficData.sent : interface_.bytes_sent + // REMOVED: const trafficData = interface_.vmid && vmLxcTraffic[interface_.vmid] + // REMOVED: const bytesRecv = trafficData ? trafficData.received : interface_.bytes_recv + // REMOVED: const bytesSent = trafficData ? trafficData.sent : interface_.bytes_sent return (
Traffic
- ↓ {formatBytes(bytesRecv)} + ↓ {formatBytes(interface_.bytes_recv)} {" / "} - ↑ {formatBytes(bytesSent)} + ↑ {formatBytes(interface_.bytes_sent)}