Update AppImage

AppImage/components/network-metrics.tsx

@@ -4,7 +4,7 @@ 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, Shield } from "lucide-react"
+import { Wifi, Activity, Network, Router, AlertCircle, Zap } from "lucide-react"
 import useSWR from "swr"
 
 interface NetworkData {
@@ -214,36 +214,6 @@ export function NetworkMetrics() {
           </CardContent>
         </Card>
 
-        <Card className="bg-card border-border">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium text-muted-foreground">Firewall Status</CardTitle>
-            <Shield className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold text-foreground">Active</div>
-            <Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20 mt-2">
-              Protected
-            </Badge>
-            <p className="text-xs text-muted-foreground mt-2">System protected</p>
-          </CardContent>
-        </Card>
-
-        <Card className="bg-card border-border">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium text-muted-foreground">Packets</CardTitle>
-            <Activity className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold text-foreground">{packetsRecvK}K</div>
-            <Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20 mt-2">
-              Received
-            </Badge>
-            <p className="text-xs text-muted-foreground mt-2">No packet loss</p>
-          </CardContent>
-        </Card>
-      </div>
-
-      {networkData.physical_interfaces && networkData.physical_interfaces.length > 0 && (
         <Card className="bg-card border-border">
           <CardHeader>
             <CardTitle className="text-foreground flex items-center">
@@ -268,7 +238,7 @@ export function NetworkMetrics() {
                     {/* 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">
+                      <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}>
                           {typeBadge.label}
@@ -327,7 +297,6 @@ export function NetworkMetrics() {
             </div>
           </CardContent>
         </Card>
-      )}
 
         {networkData.bridge_interfaces && networkData.bridge_interfaces.length > 0 && (
           <Card className="bg-card border-border">
@@ -354,7 +323,7 @@ export function NetworkMetrics() {
                       {/* First row: Icon, Name, Type Badge, Physical Interface, 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">
+                        <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}>
                             {typeBadge.label}
@@ -371,7 +340,7 @@ export function NetworkMetrics() {
                                       )
                                       if (bondInterface?.bond_slaves && bondInterface.bond_slaves.length > 0) {
                                         return (
-                                        <span className="text-muted-foreground text-xs">
+                                          <span className="text-muted-foreground text-xs break-all">
                                             ({bondInterface.bond_slaves.join(", ")})
                                           </span>
                                         )
@@ -381,7 +350,7 @@ export function NetworkMetrics() {
                                   </>
                                 )}
                               {interface_.bridge_bond_slaves && interface_.bridge_bond_slaves.length > 0 && (
-                              <span className="text-muted-foreground text-xs">
+                                <span className="text-muted-foreground text-xs break-all">
                                   ({interface_.bridge_bond_slaves.join(", ")})
                                 </span>
                               )}
@@ -468,7 +437,7 @@ export function NetworkMetrics() {
                       {/* 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">
+                        <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}>
                             {vmTypeBadge.label}
@@ -529,6 +498,7 @@ export function NetworkMetrics() {
             </CardContent>
           </Card>
         )}
+      </div>
 
       {/* Interface Details Modal */}
       <Dialog open={!!selectedInterface} onOpenChange={() => setSelectedInterface(null)}>
@@ -721,9 +691,35 @@ export function NetworkMetrics() {
               )}
 
               {/* Bridge Information */}
-              {selectedInterface.type === "bridge" && selectedInterface.bridge_members && (
+              {selectedInterface.type === "bridge" && (
                 <div>
                   <h3 className="text-sm font-semibold text-muted-foreground mb-3">Bridge Configuration</h3>
+                  <div className="space-y-3">
+                    {selectedInterface.bridge_physical_interface && (
+                      <div>
+                        <div className="text-sm text-muted-foreground mb-2">Physical Interface</div>
+                        <div className="font-medium text-blue-500 text-lg">
+                          {selectedInterface.bridge_physical_interface}
+                        </div>
+                      </div>
+                    )}
+                    {selectedInterface.bridge_bond_slaves && selectedInterface.bridge_bond_slaves.length > 0 && (
+                      <div>
+                        <div className="text-sm text-muted-foreground mb-2">Bond Slave Interfaces</div>
+                        <div className="flex flex-wrap gap-2">
+                          {selectedInterface.bridge_bond_slaves.map((slave, idx) => (
+                            <Badge
+                              key={idx}
+                              variant="outline"
+                              className="bg-purple-500/10 text-purple-500 border-purple-500/20"
+                            >
+                              {slave}
+                            </Badge>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                    {selectedInterface.bridge_members && (
                       <div>
                         <div className="text-sm text-muted-foreground mb-2">Virtual Member Interfaces</div>
                         <div className="flex flex-wrap gap-2">
@@ -752,6 +748,8 @@ export function NetworkMetrics() {
                           )}
                         </div>
                       </div>
+                    )}
+                  </div>
                 </div>
               )}
             </div>

AppImage/components/virtual-machines.tsx

@@ -94,6 +94,24 @@ const formatBytes = (bytes: number | undefined): string => {
   return `${(bytes / Math.pow(k, i)).toFixed(2)} ${sizes[i]}`
 }
 
+const extractIPFromNetConfig = (netConfig: string | undefined): string => {
+  if (!netConfig) return "N/A"
+
+  // Parse the network config string: name=eth0,bridge=vmbr0,gw=192.168.0.1,hwaddr=...,ip=192.168.0.4/24,type=veth
+  const ipMatch = netConfig.match(/ip=([^,]+)/)
+  if (ipMatch && ipMatch[1]) {
+    const ip = ipMatch[1]
+    // Check if it's DHCP
+    if (ip.toLowerCase() === "dhcp") {
+      return "DHCP"
+    }
+    // Return the IP without the subnet mask for cleaner display
+    return ip.split("/")[0]
+  }
+
+  return "N/A"
+}
+
 export function VirtualMachines() {
   const {
     data: vmData,
@@ -396,7 +414,7 @@ export function VirtualMachines() {
                       </Badge>
                     </div>
 
-                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                       <div>
                         <div className="text-sm text-muted-foreground mb-2">CPU Usage</div>
                         <div className="text-lg font-semibold text-foreground mb-1">{cpuPercent}%</div>
@@ -624,16 +642,31 @@ export function VirtualMachines() {
                       <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                         {Object.keys(vmDetails.config)
                           .filter((key) => key.match(/^net\d+$/))
-                          .map((netKey) => (
+                          .map((netKey) => {
+                            const netConfig = vmDetails.config[netKey]
+                            const ipAddress = selectedVM?.type === "lxc" ? extractIPFromNetConfig(netConfig) : null
+
+                            return (
                               <div key={netKey} className="col-span-1">
                                 <div className="text-xs text-muted-foreground mb-1">
                                   Network Interface {netKey.replace("net", "")}
                                 </div>
-                              <div className="font-medium text-green-500 text-sm break-all font-mono">
+                                {ipAddress && (
-                                {vmDetails.config[netKey]}
+                                  <div className="mb-2">
+                                    <span className="text-xs text-muted-foreground">IP Address: </span>
+                                    <span
+                                      className={`font-semibold ${ipAddress === "DHCP" ? "text-yellow-500" : "text-blue-500"}`}
+                                    >
+                                      {ipAddress}
+                                    </span>
+                                  </div>
+                                )}
+                                <div className="font-medium text-green-500 text-xs break-all font-mono">
+                                  {netConfig}
                                 </div>
                               </div>
-                          ))}
+                            )
+                          })}
                         {vmDetails.config.nameserver && (
                           <div>
                             <div className="text-xs text-muted-foreground mb-1">DNS Nameserver</div>