Update AppImage

AppImage/components/network-metrics.tsx

@@ -4,9 +4,10 @@ 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"
-import { Wifi, Activity, Network, Router, AlertCircle, Zap } from "lucide-react"
+import { Wifi, Activity, Network, Router, AlertCircle, Zap, Info } from "lucide-react"
 import useSWR from "swr"
 import { NetworkTrafficChart } from "./network-traffic-chart"
+import { VMNetworkChart } from "./vm-lxc-network-chart"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select"
 
 interface NetworkData {
@@ -343,21 +344,22 @@ export function NetworkMetrics() {
         </CardContent>
       </Card>
 
-      {/* Physical Interfaces section */}
+      {/* VM & LXC Network Interfaces section */}
+      {networkData.vm_lxc_interfaces && networkData.vm_lxc_interfaces.length > 0 && (
         <Card className="bg-card border-border">
           <CardHeader>
             <CardTitle className="text-foreground flex items-center">
-            <Router className="h-5 w-5 mr-2" />
+              <Network className="h-5 w-5 mr-2" />
-            Physical Interfaces
+              VM & LXC Network Interfaces
-            <Badge variant="outline" className="ml-3 bg-blue-500/10 text-blue-500 border-blue-500/20">
+              <Badge variant="outline" className="ml-3 bg-orange-500/10 text-orange-500 border-orange-500/20">
-              {networkData.physical_active_count ?? 0}/{networkData.physical_total_count ?? 0} Active
+                {networkData.vm_lxc_active_count ?? 0} / {networkData.vm_lxc_total_count ?? 0} Active
               </Badge>
             </CardTitle>
           </CardHeader>
           <CardContent>
             <div className="space-y-4">
-            {networkData.physical_interfaces.map((interface_, index) => {
+              {networkData.vm_lxc_interfaces.map((interface_, index) => {
-              const typeBadge = getInterfaceTypeBadge(interface_.type)
+                const vmTypeBadge = getVMTypeBadge(interface_.vm_type)
 
                 return (
                   <div
@@ -365,14 +367,17 @@ export function NetworkMetrics() {
                     className="flex flex-col gap-3 p-4 rounded-lg border border-white/10 bg-white/5 sm:bg-card sm:hover:bg-white/5 transition-colors cursor-pointer"
                     onClick={() => setSelectedInterface(interface_)}
                   >
-                  {/* First row: Icon, Name, Type Badge, Status */}
+                    {/* First row: Icon, Name, VM/LXC Badge, VM Name, Status */}
                     <div className="flex items-center gap-3 flex-wrap">
                       <Wifi className="h-5 w-5 text-muted-foreground flex-shrink-0" />
                       <div className="flex items-center gap-2 min-w-0 flex-1 flex-wrap">
                         <div className="font-medium text-foreground">{interface_.name}</div>
-                      <Badge variant="outline" className={typeBadge.color}>
+                        <Badge variant="outline" className={vmTypeBadge.color}>
-                        {typeBadge.label}
+                          {vmTypeBadge.label}
                         </Badge>
+                        {interface_.vm_name && (
+                          <div className="text-sm text-muted-foreground truncate">→ {interface_.vm_name}</div>
+                        )}
                       </div>
                       <Badge
                         variant="outline"
@@ -389,22 +394,20 @@ export function NetworkMetrics() {
                     {/* Second row: Details - Responsive layout */}
                     <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                       <div>
-                      <div className="text-muted-foreground text-xs">IP Address</div>
+                        <div className="text-sm text-muted-foreground">VMID</div>
-                      <div className="font-medium text-foreground font-mono text-sm truncate">
+                        <div className="font-medium">{interface_.vmid ?? "N/A"}</div>
-                        {interface_.addresses.length > 0 ? interface_.addresses[0].ip : "N/A"}
-                      </div>
                       </div>
 
                       <div>
-                      <div className="text-muted-foreground text-xs">Speed</div>
+                        <div className="text-sm text-muted-foreground">Speed</div>
-                      <div className="font-medium text-foreground flex items-center gap-1 text-xs">
+                        <div className="font-medium text-foreground flex items-center gap-1">
                           <Zap className="h-3 w-3" />
                           {formatSpeed(interface_.speed)}
                         </div>
                       </div>
 
                       <div className="col-span-2 md:col-span-1">
-                      <div className="text-muted-foreground text-xs">Traffic</div>
+                        <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>
                           {" / "}
@@ -414,7 +417,7 @@ export function NetworkMetrics() {
 
                       {interface_.mac_address && (
                         <div className="col-span-2 md:col-span-1">
-                        <div className="text-muted-foreground text-xs">MAC</div>
+                          <div className="text-sm text-muted-foreground">MAC</div>
                           <div className="font-medium text-foreground font-mono text-xs truncate">
                             {interface_.mac_address}
                           </div>
@@ -427,16 +430,24 @@ export function NetworkMetrics() {
             </div>
           </CardContent>
         </Card>
+      )}
 
       {networkData.bridge_interfaces && networkData.bridge_interfaces.length > 0 && (
         <Card className="bg-card border-border">
           <CardHeader>
-            <CardTitle className="text-foreground flex items-center">
+            <CardTitle className="text-foreground flex items-center flex-wrap gap-2">
               <Network className="h-5 w-5 mr-2" />
               Bridge Interfaces
-              <Badge variant="outline" className="ml-3 bg-green-500/10 text-green-500 border-green-500/20">
+              <Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
                 {networkData.bridge_active_count ?? 0}/{networkData.bridge_total_count ?? 0} Active
               </Badge>
+              <Badge
+                variant="outline"
+                className="bg-amber-500/10 text-amber-500 border-amber-500/20 flex items-center gap-1"
+              >
+                <Info className="h-3 w-3" />
+                Since Boot
+              </Badge>
             </CardTitle>
           </CardHeader>
           <CardContent>
@@ -542,22 +553,27 @@ export function NetworkMetrics() {
         </Card>
       )}
 
-      {/* VM & LXC Network Interfaces section */}
-      {networkData.vm_lxc_interfaces && networkData.vm_lxc_interfaces.length > 0 && (
       <Card className="bg-card border-border">
         <CardHeader>
-            <CardTitle className="text-foreground flex items-center">
+          <CardTitle className="text-foreground flex items-center flex-wrap gap-2">
-              <Network className="h-5 w-5 mr-2" />
+            <Router className="h-5 w-5 mr-2" />
-              VM & LXC Network Interfaces
+            Physical Interfaces
-              <Badge variant="outline" className="ml-3 bg-orange-500/10 text-orange-500 border-orange-500/20">
+            <Badge variant="outline" className="bg-blue-500/10 text-blue-500 border-blue-500/20">
-                {networkData.vm_lxc_active_count ?? 0} / {networkData.vm_lxc_total_count ?? 0} Active
+              {networkData.physical_active_count ?? 0}/{networkData.physical_total_count ?? 0} Active
+            </Badge>
+            <Badge
+              variant="outline"
+              className="bg-amber-500/10 text-amber-500 border-amber-500/20 flex items-center gap-1"
+            >
+              <Info className="h-3 w-3" />
+              Since Boot
             </Badge>
           </CardTitle>
         </CardHeader>
         <CardContent>
           <div className="space-y-4">
-              {networkData.vm_lxc_interfaces.map((interface_, index) => {
+            {networkData.physical_interfaces.map((interface_, index) => {
-                const vmTypeBadge = getVMTypeBadge(interface_.vm_type)
+              const typeBadge = getInterfaceTypeBadge(interface_.type)
 
               return (
                 <div
@@ -565,17 +581,14 @@ export function NetworkMetrics() {
                   className="flex flex-col gap-3 p-4 rounded-lg border border-white/10 bg-white/5 sm:bg-card sm:hover:bg-white/5 transition-colors cursor-pointer"
                   onClick={() => setSelectedInterface(interface_)}
                 >
-                    {/* First row: Icon, Name, VM/LXC Badge, VM Name, Status */}
+                  {/* First row: Icon, Name, Type Badge, Status */}
                   <div className="flex items-center gap-3 flex-wrap">
                     <Wifi className="h-5 w-5 text-muted-foreground flex-shrink-0" />
                     <div className="flex items-center gap-2 min-w-0 flex-1 flex-wrap">
                       <div className="font-medium text-foreground">{interface_.name}</div>
-                        <Badge variant="outline" className={vmTypeBadge.color}>
+                      <Badge variant="outline" className={typeBadge.color}>
-                          {vmTypeBadge.label}
+                        {typeBadge.label}
                       </Badge>
-                        {interface_.vm_name && (
-                          <div className="text-sm text-muted-foreground truncate">→ {interface_.vm_name}</div>
-                        )}
                     </div>
                     <Badge
                       variant="outline"
@@ -592,20 +605,22 @@ export function NetworkMetrics() {
                   {/* Second row: Details - Responsive layout */}
                   <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                     <div>
-                        <div className="text-sm text-muted-foreground">VMID</div>
+                      <div className="text-muted-foreground text-xs">IP Address</div>
-                        <div className="font-medium">{interface_.vmid ?? "N/A"}</div>
+                      <div className="font-medium text-foreground font-mono text-sm truncate">
+                        {interface_.addresses.length > 0 ? interface_.addresses[0].ip : "N/A"}
+                      </div>
                     </div>
 
                     <div>
-                        <div className="text-sm text-muted-foreground">Speed</div>
+                      <div className="text-muted-foreground text-xs">Speed</div>
-                        <div className="font-medium text-foreground flex items-center gap-1">
+                      <div className="font-medium text-foreground flex items-center gap-1 text-xs">
                         <Zap className="h-3 w-3" />
                         {formatSpeed(interface_.speed)}
                       </div>
                     </div>
 
                     <div className="col-span-2 md:col-span-1">
-                        <div className="text-sm text-muted-foreground">Traffic</div>
+                      <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>
                         {" / "}
@@ -615,7 +630,7 @@ export function NetworkMetrics() {
 
                     {interface_.mac_address && (
                       <div className="col-span-2 md:col-span-1">
-                          <div className="text-sm text-muted-foreground">MAC</div>
+                        <div className="text-muted-foreground text-xs">MAC</div>
                         <div className="font-medium text-foreground font-mono text-xs truncate">
                           {interface_.mac_address}
                         </div>
@@ -628,7 +643,6 @@ export function NetworkMetrics() {
           </div>
         </CardContent>
       </Card>
-      )}
 
       {/* Interface Details Modal */}
       <Dialog open={!!selectedInterface} onOpenChange={() => setSelectedInterface(null)}>
@@ -832,6 +846,18 @@ export function NetworkMetrics() {
                 </div>
               </div>
 
+              {/* Network chart for VM/LXC interfaces */}
+              {selectedInterface.type === "vm_lxc" && selectedInterface.vmid && selectedInterface.vm_type && (
+                <div>
+                  <h3 className="text-sm font-semibold text-muted-foreground mb-3">Network Traffic History</h3>
+                  <VMNetworkChart
+                    vmid={selectedInterface.vmid}
+                    vmType={selectedInterface.vm_type as "qemu" | "lxc"}
+                    initialTimeframe={timeframe}
+                  />
+                </div>
+              )}
+
               {/* Bond Information */}
               {selectedInterface.type === "bond" && selectedInterface.bond_slaves && (
                 <div>

AppImage/components/vm-lxc-network-chart.tsx

@@ -0,0 +1,195 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts"
+import useSWR from "swr"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select"
+
+interface VMNetworkChartProps {
+  vmid: number
+  vmType: "qemu" | "lxc"
+  initialTimeframe?: "hour" | "day" | "week" | "month" | "year"
+}
+
+const fetcher = async (url: string) => {
+  const response = await fetch(url, {
+    method: "GET",
+    headers: { "Content-Type": "application/json" },
+    signal: AbortSignal.timeout(10000),
+  })
+  if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`)
+  return response.json()
+}
+
+const formatBytes = (bytes: number): string => {
+  if (bytes === 0) return "0 B"
+  const k = 1024
+  const sizes = ["B", "KB", "MB", "GB", "TB"]
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return `${(bytes / Math.pow(k, i)).toFixed(2)} ${sizes[i]}`
+}
+
+export function VMNetworkChart({ vmid, vmType, initialTimeframe = "day" }: VMNetworkChartProps) {
+  const [timeframe, setTimeframe] = useState<"hour" | "day" | "week" | "month" | "year">(initialTimeframe)
+  const [visibleLines, setVisibleLines] = useState({ received: true, sent: true })
+  const [chartData, setChartData] = useState<any[]>([])
+
+  const { data: rrdData } = useSWR(`/api/${vmType}/${vmid}/rrddata?timeframe=${timeframe}`, fetcher, {
+    refreshInterval: 30000,
+    revalidateOnFocus: false,
+  })
+
+  useEffect(() => {
+    if (!rrdData) return
+
+    const transformedData = rrdData.map((point: any) => {
+      const timestamp = new Date(point.time * 1000)
+      const hours = timestamp.getHours().toString().padStart(2, "0")
+      const minutes = timestamp.getMinutes().toString().padStart(2, "0")
+      const month = (timestamp.getMonth() + 1).toString().padStart(2, "0")
+      const day = timestamp.getDate().toString().padStart(2, "0")
+
+      let timeLabel = `${hours}:${minutes}`
+      if (timeframe === "week" || timeframe === "month") {
+        timeLabel = `${month}/${day}`
+      } else if (timeframe === "year") {
+        timeLabel = `${month}/${day}`
+      }
+
+      // Calculate traffic in GB for the interval
+      const intervalSeconds = timeframe === "hour" ? 60 : timeframe === "day" ? 60 : timeframe === "week" ? 1800 : 3600
+      const receivedGB = ((point.netin || 0) * intervalSeconds) / (1024 * 1024 * 1024)
+      const sentGB = ((point.netout || 0) * intervalSeconds) / (1024 * 1024 * 1024)
+
+      return {
+        time: timeLabel,
+        received: receivedGB,
+        sent: sentGB,
+      }
+    })
+
+    setChartData(transformedData)
+  }, [rrdData, timeframe])
+
+  const toggleLine = (line: "received" | "sent") => {
+    setVisibleLines((prev) => ({ ...prev, [line]: !prev[line] }))
+  }
+
+  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"
+    }
+  }
+
+  const CustomTooltip = ({ active, payload }: any) => {
+    if (active && payload && payload.length) {
+      return (
+        <div className="bg-background/95 backdrop-blur-sm border border-border rounded-lg p-3 shadow-lg">
+          <p className="text-sm font-medium text-foreground mb-2">{payload[0].payload.time}</p>
+          {payload.map((entry: any, index: number) => (
+            <div key={index} className="flex items-center justify-between gap-4 text-sm">
+              <span className="flex items-center gap-2">
+                <span className="w-3 h-3 rounded-full" style={{ backgroundColor: entry.color }} />
+                <span className="text-muted-foreground">{entry.name}:</span>
+              </span>
+              <span className="font-medium text-foreground">{formatBytes(entry.value * 1024 * 1024 * 1024)}</span>
+            </div>
+          ))}
+        </div>
+      )
+    }
+    return null
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Timeframe Selector */}
+      <div className="flex justify-end">
+        <Select value={timeframe} onValueChange={(value: any) => setTimeframe(value)}>
+          <SelectTrigger className="w-[180px] bg-card border-border">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="hour">1 Hour</SelectItem>
+            <SelectItem value="day">24 Hours</SelectItem>
+            <SelectItem value="week">7 Days</SelectItem>
+            <SelectItem value="month">30 Days</SelectItem>
+            <SelectItem value="year">1 Year</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Interactive Legend */}
+      <div className="flex items-center justify-center gap-6 pb-2">
+        <button
+          onClick={() => toggleLine("received")}
+          className={`flex items-center gap-2 transition-opacity ${!visibleLines.received ? "opacity-40" : ""}`}
+        >
+          <span className="w-3 h-3 rounded-full bg-green-500" />
+          <span className="text-sm font-medium">Received</span>
+        </button>
+        <button
+          onClick={() => toggleLine("sent")}
+          className={`flex items-center gap-2 transition-opacity ${!visibleLines.sent ? "opacity-40" : ""}`}
+        >
+          <span className="w-3 h-3 rounded-full bg-blue-500" />
+          <span className="text-sm font-medium">Sent</span>
+        </button>
+      </div>
+
+      {/* Chart */}
+      <ResponsiveContainer width="100%" height={300}>
+        <AreaChart data={chartData} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
+          <defs>
+            <linearGradient id="colorReceived" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="5%" stopColor="#10b981" stopOpacity={0.3} />
+              <stop offset="95%" stopColor="#10b981" stopOpacity={0} />
+            </linearGradient>
+            <linearGradient id="colorSent" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.3} />
+              <stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
+            </linearGradient>
+          </defs>
+          <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" opacity={0.3} />
+          <XAxis dataKey="time" stroke="hsl(var(--muted-foreground))" fontSize={12} tickLine={false} />
+          <YAxis
+            stroke="hsl(var(--muted-foreground))"
+            fontSize={12}
+            tickLine={false}
+            tickFormatter={(value) => {
+              if (value === 0) return "0"
+              if (value < 0.01) return `${(value * 1024).toFixed(0)} MB`
+              return `${value.toFixed(2)} GB`
+            }}
+            label={{ value: "GB", angle: -90, position: "insideLeft", style: { fill: "hsl(var(--muted-foreground))" } }}
+          />
+          <Tooltip content={<CustomTooltip />} />
+          {visibleLines.received && (
+            <Area
+              type="monotone"
+              dataKey="received"
+              stroke="#10b981"
+              strokeWidth={2}
+              fill="url(#colorReceived)"
+              name="Received"
+            />
+          )}
+          {visibleLines.sent && (
+            <Area type="monotone" dataKey="sent" stroke="#3b82f6" strokeWidth={2} fill="url(#colorSent)" name="Sent" />
+          )}
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
+  )
+}