Update network-metrics.tsx

AppImage/components/network-metrics.tsx

@@ -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>