Update network-metrics.tsx

AppImage/components/network-metrics.tsx

@@ -163,35 +163,71 @@ export function NetworkMetrics() {
   })
 
   useEffect(() => {
-    if (!networkData?.vm_lxc_interfaces) return
+    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<number, { received: number; sent: number }> = {}
 
       for (const iface of networkData.vm_lxc_interfaces) {
-        if (!iface.vmid || !iface.vm_type) continue
+        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) continue
+
+          if (!response.ok) {
+            console.log(`[v0] Failed to fetch metrics for VM/LXC ${iface.vmid}: ${response.status}`)
+            continue
+          }
 
           const data = await response.json()
-          if (!data.rrddata) continue
+          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
+          }
 
-          // Calculate total traffic from RRD data
           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) {
+            if (point.netin !== null && point.netin !== undefined && !isNaN(point.netin)) {
-              // netin is in bytes/second, multiply by interval to get total bytes
+              totalReceived += point.netin * timeInterval
-              totalReceived += point.netin * (data.rrddata.length > 1 ? 60 : 1) // Assume 60 second intervals
             }
-            if (point.netout !== null && point.netout !== undefined) {
+            if (point.netout !== null && point.netout !== undefined && !isNaN(point.netout)) {
-              totalSent += point.netout * (data.rrddata.length > 1 ? 60 : 1)
+              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,
@@ -201,11 +237,14 @@ export function NetworkMetrics() {
         }
       }
 
+      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?.vm_lxc_interfaces, timeframe])
+  }, [networkData, timeframe]) // Changed dependency from networkData?.vm_lxc_interfaces to networkData
 
   if (isLoading) {
     return (
@@ -238,8 +277,8 @@ export function NetworkMetrics() {
     )
   }
 
-  const trafficInFormatted = formatStorage(networkTotals.received * 1024 * 1024 * 1024) // Convert GB to bytes
+  const trafficInFormatted = formatStorage(networkData.traffic.bytes_recv * 1024 * 1024 * 1024) // Convert GB to bytes
-  const trafficOutFormatted = formatStorage(networkTotals.sent * 1024 * 1024 * 1024)
+  const trafficOutFormatted = formatStorage(networkData.traffic.bytes_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)