mirror of
https://github.com/MacRimi/ProxMenux.git
synced 2025-11-18 11:36:17 +00:00
Update system-overview.tsx
This commit is contained in:
MacRimi
@@ -541,83 +541,61 @@ export function SystemOverview() {
|
|||||||
<CardContent>
|
<CardContent>
|
||||||
{networkData ? (
|
{networkData ? (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div className="flex justify-between items-center">
|
<div className="flex justify-between items-center pb-3 border-b border-border">
|
||||||
<span className="text-sm text-muted-foreground">Active Interfaces:</span>
|
<span className="text-sm text-muted-foreground">Active Interfaces:</span>
|
||||||
<span className="text-lg font-semibold text-foreground">
|
<span className="text-lg font-semibold text-foreground">
|
||||||
{(networkData.physical_active_count || 0) + (networkData.bridge_active_count || 0)}
|
{(networkData.physical_active_count || 0) + (networkData.bridge_active_count || 0)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{(() => {
|
<div className="space-y-2">
|
||||||
const primaryInterface =
|
|
||||||
networkData.physical_interfaces?.find((i) => i.status === "up") ||
|
|
||||||
networkData.bridge_interfaces?.find((i) => i.status === "up") ||
|
|
||||||
networkData.interfaces.find((i) => i.status === "up")
|
|
||||||
|
|
||||||
return primaryInterface ? (
|
|
||||||
<div className="flex justify-between items-center pb-3 border-b border-border">
|
|
||||||
<span className="text-sm text-muted-foreground">Primary Interface:</span>
|
|
||||||
<span className="text-sm font-semibold text-foreground font-mono">{primaryInterface.name}</span>
|
|
||||||
</div>
|
|
||||||
) : null
|
|
||||||
})()}
|
|
||||||
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<span className="text-sm text-muted-foreground">Data Sent:</span>
|
|
||||||
<span className="text-lg font-semibold text-foreground">
|
|
||||||
{(networkData.traffic.bytes_sent / 1024 ** 3).toFixed(2)} GB
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<span className="text-sm text-muted-foreground">Data Received:</span>
|
|
||||||
<span className="text-lg font-semibold text-foreground">
|
|
||||||
{(networkData.traffic.bytes_recv / 1024 ** 3).toFixed(2)} GB
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="pt-2 border-t border-border space-y-1">
|
|
||||||
{networkData.physical_interfaces && networkData.physical_interfaces.length > 0 && (
|
{networkData.physical_interfaces && networkData.physical_interfaces.length > 0 && (
|
||||||
<>
|
<div className="flex flex-wrap gap-2">
|
||||||
<div className="text-xs text-muted-foreground font-medium mb-1">Physical Interfaces</div>
|
{networkData.physical_interfaces
|
||||||
{networkData.physical_interfaces.slice(0, 2).map((iface) => (
|
.filter((iface) => iface.status === "up")
|
||||||
<div key={iface.name} className="flex justify-between items-center">
|
.map((iface) => (
|
||||||
<span className="text-xs text-muted-foreground font-mono">{iface.name}:</span>
|
|
||||||
<Badge
|
<Badge
|
||||||
|
key={iface.name}
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className={
|
className="bg-blue-500/10 text-blue-500 border-blue-500/20"
|
||||||
iface.status === "up"
|
|
||||||
? "bg-green-500/10 text-green-500 border-green-500/20"
|
|
||||||
: "bg-gray-500/10 text-gray-500 border-gray-500/20"
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
{iface.status}
|
{iface.name}
|
||||||
</Badge>
|
</Badge>
|
||||||
</div>
|
))}
|
||||||
))}
|
</div>
|
||||||
</>
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{networkData.bridge_interfaces && networkData.bridge_interfaces.length > 0 && (
|
{networkData.bridge_interfaces && networkData.bridge_interfaces.length > 0 && (
|
||||||
<>
|
<div className="flex flex-wrap gap-2">
|
||||||
<div className="text-xs text-muted-foreground font-medium mb-1 mt-2">Bridge Interfaces</div>
|
{networkData.bridge_interfaces
|
||||||
{networkData.bridge_interfaces.slice(0, 2).map((iface) => (
|
.filter((iface) => iface.status === "up")
|
||||||
<div key={iface.name} className="flex justify-between items-center">
|
.map((iface) => (
|
||||||
<span className="text-xs text-muted-foreground font-mono">{iface.name}:</span>
|
|
||||||
<Badge
|
<Badge
|
||||||
|
key={iface.name}
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className={
|
className="bg-green-500/10 text-green-500 border-green-500/20"
|
||||||
iface.status === "up"
|
|
||||||
? "bg-green-500/10 text-green-500 border-green-500/20"
|
|
||||||
: "bg-gray-500/10 text-gray-500 border-gray-500/20"
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
{iface.status}
|
{iface.name}
|
||||||
</Badge>
|
</Badge>
|
||||||
</div>
|
))}
|
||||||
))}
|
</div>
|
||||||
</>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="pt-2 border-t border-border space-y-2">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<span className="text-sm text-muted-foreground">Data Sent:</span>
|
||||||
|
<span className="text-lg font-semibold text-foreground">
|
||||||
|
{(networkData.traffic.bytes_sent / 1024 ** 3).toFixed(2)} GB
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<span className="text-sm text-muted-foreground">Data Received:</span>
|
||||||
|
<span className="text-lg font-semibold text-foreground">
|
||||||
|
{(networkData.traffic.bytes_recv / 1024 ** 3).toFixed(2)} GB
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="text-center py-8 text-muted-foreground">Network data not available</div>
|
<div className="text-center py-8 text-muted-foreground">Network data not available</div>
|
||||||
@@ -693,85 +671,6 @@ export function SystemOverview() {
|
|||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{vmData.length > 0 && (
|
|
||||||
<Card className="bg-card border-border">
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="text-foreground flex items-center justify-between">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<Server className="h-5 w-5 mr-2" />
|
|
||||||
Virtual Machines & Containers
|
|
||||||
</div>
|
|
||||||
<Badge variant="outline" className="bg-blue-500/10 text-blue-500 border-blue-500/20">
|
|
||||||
{vmData.length} Total
|
|
||||||
</Badge>
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
||||||
{vmData.map((vm) => (
|
|
||||||
<Card key={vm.vmid} className="bg-muted/30 border-border">
|
|
||||||
<CardContent className="p-4">
|
|
||||||
<div className="flex items-start justify-between mb-3">
|
|
||||||
<div>
|
|
||||||
<div className="font-semibold text-foreground">{vm.name}</div>
|
|
||||||
<div className="text-xs text-muted-foreground">
|
|
||||||
{vm.type === "lxc" ? "LXC" : "VM"} #{vm.vmid}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Badge
|
|
||||||
variant="outline"
|
|
||||||
className={
|
|
||||||
vm.status === "running"
|
|
||||||
? "bg-green-500/10 text-green-500 border-green-500/20"
|
|
||||||
: "bg-red-500/10 text-red-500 border-red-500/20"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{vm.status}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div>
|
|
||||||
<div className="flex justify-between text-xs mb-1">
|
|
||||||
<span className="text-muted-foreground">CPU</span>
|
|
||||||
<span className="text-foreground font-medium">{(vm.cpu * 100).toFixed(1)}%</span>
|
|
||||||
</div>
|
|
||||||
<Progress value={vm.cpu * 100} className="h-1.5 [&>div]:bg-blue-500" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<div className="flex justify-between text-xs mb-1">
|
|
||||||
<span className="text-muted-foreground">Memory</span>
|
|
||||||
<span className="text-foreground font-medium">
|
|
||||||
{formatBytes(vm.mem)} / {formatBytes(vm.maxmem)} GB
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<Progress value={(vm.mem / vm.maxmem) * 100} className="h-1.5 [&>div]:bg-purple-500" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<div className="flex justify-between text-xs mb-1">
|
|
||||||
<span className="text-muted-foreground">Disk</span>
|
|
||||||
<span className="text-foreground font-medium">
|
|
||||||
{formatBytes(vm.disk)} / {formatBytes(vm.maxdisk)} GB
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<Progress value={(vm.disk / vm.maxdisk) * 100} className="h-1.5 [&>div]:bg-orange-500" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-between text-xs pt-1 border-t border-border">
|
|
||||||
<span className="text-muted-foreground">Uptime</span>
|
|
||||||
<span className="text-foreground font-medium">{formatUptime(vm.uptime)}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user