Mirrors/ProxMenux
1
0
Fork 0
mirror of https://github.com/MacRimi/ProxMenux.git synced 2025-10-02 08:06:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update AppImage

Browse Source
This commit is contained in:
MacRimi
2025-09-30 00:09:11 +02:00
parent 00db93e03f
commit acc0362180
4 changed files with 622 additions and 748 deletions
Download Patch File Download Diff File Expand all files Collapse all files

300
AppImage/components/network-metrics.tsx
View File

@@ -1,31 +1,111 @@
"use client" "use client"
import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card" import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
import { Badge } from "./ui/badge" import { Badge } from "./ui/badge"
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from "recharts" import { Wifi, Globe, Shield, Activity, Network, Router, AlertCircle } from "lucide-react"
import { Wifi, Globe, Shield, Activity, Network, Router } from "lucide-react"
const networkTraffic = [ interface NetworkData {
{ time: "00:00", incoming: 45, outgoing: 32 }, interfaces: NetworkInterface[]
{ time: "04:00", incoming: 52, outgoing: 28 }, traffic: {
{ time: "08:00", incoming: 78, outgoing: 65 }, bytes_sent: number
{ time: "12:00", incoming: 65, outgoing: 45 }, bytes_recv: number
{ time: "16:00", incoming: 82, outgoing: 58 }, packets_sent?: number
{ time: "20:00", incoming: 58, outgoing: 42 }, packets_recv?: number
{ time: "24:00", incoming: 43, outgoing: 35 }, }
] }
const connectionData = [ interface NetworkInterface {
{ time: "00:00", connections: 1250 }, name: string
{ time: "04:00", connections: 980 }, status: string
{ time: "08:00", connections: 1850 }, addresses: Array<{
{ time: "12:00", connections: 1650 }, ip: string
{ time: "16:00", connections: 2100 }, netmask: string
{ time: "20:00", connections: 1580 }, }>
{ time: "24:00", connections: 1320 }, }
]
const fetchNetworkData = async (): Promise<NetworkData | null> => {
try {
console.log("[v0] Fetching network data from Flask server...")
const response = await fetch("/api/network", {
method: "GET",
headers: {
"Content-Type": "application/json",
},
signal: AbortSignal.timeout(5000),
})
if (!response.ok) {
throw new Error(`Flask server responded with status: ${response.status}`)
}
const data = await response.json()
console.log("[v0] Successfully fetched network data from Flask:", data)
return data
} catch (error) {
console.error("[v0] Failed to fetch network data from Flask server:", error)
return null
}
}
export function NetworkMetrics() { export function NetworkMetrics() {
const [networkData, setNetworkData] = useState<NetworkData | null>(null)
const [loading, setLoading] = useState(true)
const [error, setError] = useState<string | null>(null)
useEffect(() => {
const fetchData = async () => {
setLoading(true)
setError(null)
const result = await fetchNetworkData()
if (!result) {
setError("Flask server not available. Please ensure the server is running.")
} else {
setNetworkData(result)
}
setLoading(false)
}
fetchData()
const interval = setInterval(fetchData, 30000)
return () => clearInterval(interval)
}, [])
if (loading) {
return (
<div className="space-y-6">
<div className="text-center py-8">
<div className="text-lg font-medium text-foreground mb-2">Loading network data...</div>
</div>
</div>
)
}
if (error || !networkData) {
return (
<div className="space-y-6">
<Card className="bg-red-500/10 border-red-500/20">
<CardContent className="p-6">
<div className="flex items-center gap-3 text-red-600">
<AlertCircle className="h-6 w-6" />
<div>
<div className="font-semibold text-lg mb-1">Flask Server Not Available</div>
<div className="text-sm">
{error || "Unable to connect to the Flask server. Please ensure the server is running and try again."}
</div>
</div>
</div>
</CardContent>
</Card>
</div>
)
}
const trafficInMB = (networkData.traffic.bytes_recv / (1024 * 1024)).toFixed(1)
const trafficOutMB = (networkData.traffic.bytes_sent / (1024 * 1024)).toFixed(1)
return ( return (
<div className="space-y-6"> <div className="space-y-6">
{/* Network Overview Cards */} {/* Network Overview Cards */}
@@ -36,30 +116,30 @@ export function NetworkMetrics() {
<Activity className="h-4 w-4 text-muted-foreground" /> <Activity className="h-4 w-4 text-muted-foreground" />
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold text-foreground">156 MB/s</div> <div className="text-2xl font-bold text-foreground">{trafficInMB} MB</div>
<div className="flex items-center space-x-2 mt-2"> <div className="flex items-center space-x-2 mt-2">
<span className="text-xs text-green-500">↓ 89 MB/s</span> <span className="text-xs text-green-500">↓ {trafficInMB} MB</span>
<span className="text-xs text-blue-500">↑ 67 MB/s</span> <span className="text-xs text-blue-500">↑ {trafficOutMB} MB</span>
</div> </div>
<p className="text-xs text-muted-foreground mt-2">Peak: 245 MB/s at 16:30</p> <p className="text-xs text-muted-foreground mt-2">Total data transferred</p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="bg-card border-border"> <Card className="bg-card border-border">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium text-muted-foreground">Active Connections</CardTitle> <CardTitle className="text-sm font-medium text-muted-foreground">Active Interfaces</CardTitle>
<Network className="h-4 w-4 text-muted-foreground" /> <Network className="h-4 w-4 text-muted-foreground" />
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold text-foreground">1,847</div> <div className="text-2xl font-bold text-foreground">
{networkData.interfaces.filter((i) => i.status === "up").length}
</div>
<div className="flex items-center mt-2"> <div className="flex items-center mt-2">
<Badge variant="outline" className="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">
Normal Online
</Badge> </Badge>
</div> </div>
<p className="text-xs text-muted-foreground mt-2"> <p className="text-xs text-muted-foreground mt-2">{networkData.interfaces.length} total interfaces</p>
<span className="text-green-500">↑ 12%</span> from last hour
</p>
</CardContent> </CardContent>
</Card> </Card>
@@ -75,7 +155,7 @@ export function NetworkMetrics() {
Protected Protected
</Badge> </Badge>
</div> </div>
<p className="text-xs text-muted-foreground mt-2">247 blocked attempts today</p> <p className="text-xs text-muted-foreground mt-2">System protected</p>
</CardContent> </CardContent>
</Card> </Card>
@@ -83,97 +163,19 @@ export function NetworkMetrics() {
<CardHeader> <CardHeader>
<CardTitle className="text-foreground flex items-center"> <CardTitle className="text-foreground flex items-center">
<Globe className="h-5 w-5 mr-2" /> <Globe className="h-5 w-5 mr-2" />
Latency Packets
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold text-foreground">12ms</div> <div className="text-2xl font-bold text-foreground">
{networkData.traffic.packets_recv ? (networkData.traffic.packets_recv / 1000).toFixed(0) : "N/A"}K
</div>
<div className="flex items-center mt-2"> <div className="flex items-center mt-2">
<Badge variant="outline" className="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">
Excellent Received
</Badge> </Badge>
</div> </div>
<p className="text-xs text-muted-foreground mt-2">Avg response time</p> <p className="text-xs text-muted-foreground mt-2">Total packets received</p>
</CardContent>
</Card>
</div>
{/* Network Charts */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<Card className="bg-card border-border">
<CardHeader>
<CardTitle className="text-foreground flex items-center">
<Activity className="h-5 w-5 mr-2" />
Network Traffic (24h)
</CardTitle>
</CardHeader>
<CardContent>
<ResponsiveContainer width="100%" height={300}>
<AreaChart data={networkTraffic}>
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
<XAxis dataKey="time" stroke="hsl(var(--muted-foreground))" fontSize={12} />
<YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} />
<Tooltip
contentStyle={{
backgroundColor: "hsl(var(--card))",
border: "1px solid hsl(var(--border))",
borderRadius: "8px",
color: "hsl(var(--foreground))",
}}
formatter={(value, name) => [`${value} MB/s`, name === "incoming" ? "Incoming" : "Outgoing"]}
/>
<Area
type="monotone"
dataKey="incoming"
stackId="1"
stroke="#10b981"
fill="#10b981"
fillOpacity={0.6}
/>
<Area
type="monotone"
dataKey="outgoing"
stackId="1"
stroke="#3b82f6"
fill="#3b82f6"
fillOpacity={0.6}
/>
</AreaChart>
</ResponsiveContainer>
</CardContent>
</Card>
<Card className="bg-card border-border">
<CardHeader>
<CardTitle className="text-foreground flex items-center">
<Network className="h-5 w-5 mr-2" />
Active Connections (24h)
</CardTitle>
</CardHeader>
<CardContent>
<ResponsiveContainer width="100%" height={300}>
<LineChart data={connectionData}>
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
<XAxis dataKey="time" stroke="hsl(var(--muted-foreground))" fontSize={12} />
<YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} />
<Tooltip
contentStyle={{
backgroundColor: "hsl(var(--card))",
border: "1px solid hsl(var(--border))",
borderRadius: "8px",
color: "hsl(var(--foreground))",
}}
formatter={(value) => [`${value}`, "Connections"]}
/>
<Line
type="monotone"
dataKey="connections"
stroke="#8b5cf6"
strokeWidth={3}
dot={{ fill: "#8b5cf6", strokeWidth: 2, r: 5 }}
/>
</LineChart>
</ResponsiveContainer>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
@@ -188,44 +190,7 @@ export function NetworkMetrics() {
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="space-y-4"> <div className="space-y-4">
{[ {networkData.interfaces.map((interface_, index) => (
{
name: "vmbr0",
type: "Bridge",
status: "up",
ip: "192.168.1.100/24",
speed: "1000 Mbps",
rx: "2.3 GB",
tx: "1.8 GB",
},
{
name: "enp1s0",
type: "Physical",
status: "up",
ip: "192.168.1.101/24",
speed: "1000 Mbps",
rx: "1.2 GB",
tx: "890 MB",
},
{
name: "vmbr1",
type: "Bridge",
status: "up",
ip: "10.0.0.1/24",
speed: "1000 Mbps",
rx: "456 MB",
tx: "234 MB",
},
{
name: "tap101i0",
type: "TAP",
status: "up",
ip: "10.0.0.101/24",
speed: "1000 Mbps",
rx: "123 MB",
tx: "89 MB",
},
].map((interface_, index) => (
<div <div
key={index} key={index}
className="flex items-center justify-between p-4 rounded-lg border border-border bg-card/50" className="flex items-center justify-between p-4 rounded-lg border border-border bg-card/50"
@@ -234,26 +199,33 @@ export function NetworkMetrics() {
<Wifi className="h-5 w-5 text-muted-foreground" /> <Wifi className="h-5 w-5 text-muted-foreground" />
<div> <div>
<div className="font-medium text-foreground">{interface_.name}</div> <div className="font-medium text-foreground">{interface_.name}</div>
<div className="text-sm text-muted-foreground"> <div className="text-sm text-muted-foreground">Network Interface</div>
{interface_.type} • {interface_.speed}
</div>
</div> </div>
</div> </div>
<div className="flex items-center space-x-6"> <div className="flex items-center space-x-6">
<div className="text-center"> <div className="text-center">
<div className="text-sm text-muted-foreground">IP Address</div> <div className="text-sm text-muted-foreground">IP Address</div>
<div className="text-sm font-medium text-foreground font-mono">{interface_.ip}</div> <div className="text-sm font-medium text-foreground font-mono">
</div> {interface_.addresses.length > 0 ? interface_.addresses[0].ip : "N/A"}
<div className="text-center">
<div className="text-sm text-muted-foreground">RX / TX</div>
<div className="text-sm font-medium text-foreground">
{interface_.rx} / {interface_.tx}
</div> </div>
</div> </div>
<Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20"> <div className="text-center">
<div className="text-sm text-muted-foreground">Netmask</div>
<div className="text-sm font-medium text-foreground">
{interface_.addresses.length > 0 ? interface_.addresses[0].netmask : "N/A"}
</div>
</div>
<Badge
variant="outline"
className={
interface_.status === "up"
? "bg-green-500/10 text-green-500 border-green-500/20"
: "bg-red-500/10 text-red-500 border-red-500/20"
}
>
{interface_.status.toUpperCase()} {interface_.status.toUpperCase()}
</Badge> </Badge>
</div> </div>

252
AppImage/components/storage-metrics.tsx
View File

@@ -1,24 +1,111 @@
"use client" "use client"
import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card" import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
import { Progress } from "./ui/progress" import { Progress } from "./ui/progress"
import { Badge } from "./ui/badge" import { Badge } from "./ui/badge"
import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip } from "recharts" import { HardDrive, Database, Archive, AlertTriangle, CheckCircle, Activity, AlertCircle } from "lucide-react"
import { HardDrive, Database, Archive, AlertTriangle, CheckCircle, Activity } from "lucide-react"
const storageData = [ interface StorageData {
{ name: "Used", value: 1250, color: "#3b82f6" }, // Blue total: number
{ name: "Available", value: 750, color: "#10b981" }, // Green used: number
] available: number
disks: DiskInfo[]
}
const diskPerformance = [ interface DiskInfo {
{ disk: "sda", read: 45, write: 32, iops: 1250 }, name: string
{ disk: "sdb", read: 67, write: 28, iops: 980 }, mountpoint: string
{ disk: "sdc", read: 23, write: 45, iops: 1100 }, fstype: string
{ disk: "nvme0n1", read: 156, write: 89, iops: 3400 }, total: number
] used: number
available: number
usage_percent: number
health: string
temperature: number
}
const fetchStorageData = async (): Promise<StorageData | null> => {
try {
console.log("[v0] Fetching storage data from Flask server...")
const response = await fetch("/api/storage", {
method: "GET",
headers: {
"Content-Type": "application/json",
},
signal: AbortSignal.timeout(5000),
})
if (!response.ok) {
throw new Error(`Flask server responded with status: ${response.status}`)
}
const data = await response.json()
console.log("[v0] Successfully fetched storage data from Flask:", data)
return data
} catch (error) {
console.error("[v0] Failed to fetch storage data from Flask server:", error)
return null
}
}
export function StorageMetrics() { export function StorageMetrics() {
const [storageData, setStorageData] = useState<StorageData | null>(null)
const [loading, setLoading] = useState(true)
const [error, setError] = useState<string | null>(null)
useEffect(() => {
const fetchData = async () => {
setLoading(true)
setError(null)
const result = await fetchStorageData()
if (!result) {
setError("Flask server not available. Please ensure the server is running.")
} else {
setStorageData(result)
}
setLoading(false)
}
fetchData()
const interval = setInterval(fetchData, 30000)
return () => clearInterval(interval)
}, [])
if (loading) {
return (
<div className="space-y-6">
<div className="text-center py-8">
<div className="text-lg font-medium text-foreground mb-2">Loading storage data...</div>
</div>
</div>
)
}
if (error || !storageData) {
return (
<div className="space-y-6">
<Card className="bg-red-500/10 border-red-500/20">
<CardContent className="p-6">
<div className="flex items-center gap-3 text-red-600">
<AlertCircle className="h-6 w-6" />
<div>
<div className="font-semibold text-lg mb-1">Flask Server Not Available</div>
<div className="text-sm">
{error || "Unable to connect to the Flask server. Please ensure the server is running and try again."}
</div>
</div>
</div>
</CardContent>
</Card>
</div>
)
}
const usagePercent = storageData.total > 0 ? (storageData.used / storageData.total) * 100 : 0
return ( return (
<div className="space-y-6"> <div className="space-y-6">
{/* Storage Overview Cards */} {/* Storage Overview Cards */}
@@ -29,21 +116,23 @@ export function StorageMetrics() {
<HardDrive className="h-4 w-4 text-muted-foreground" /> <HardDrive className="h-4 w-4 text-muted-foreground" />
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold text-foreground">2.0 TB</div> <div className="text-2xl font-bold text-foreground">{storageData.total.toFixed(1)} GB</div>
<Progress value={62.5} className="mt-2" /> <Progress value={usagePercent} className="mt-2" />
<p className="text-xs text-muted-foreground mt-2">1.25 TB used • 750 GB available</p> <p className="text-xs text-muted-foreground mt-2">
{storageData.used.toFixed(1)} GB used • {storageData.available.toFixed(1)} GB available
</p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="bg-card border-border"> <Card className="bg-card border-border">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium text-muted-foreground">VM & LXC Storage</CardTitle> <CardTitle className="text-sm font-medium text-muted-foreground">Used Storage</CardTitle>
<Database className="h-4 w-4 text-muted-foreground" /> <Database className="h-4 w-4 text-muted-foreground" />
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold text-foreground">890 GB</div> <div className="text-2xl font-bold text-foreground">{storageData.used.toFixed(1)} GB</div>
<Progress value={71.2} className="mt-2" /> <Progress value={usagePercent} className="mt-2" />
<p className="text-xs text-muted-foreground mt-2">71.2% of allocated space</p> <p className="text-xs text-muted-foreground mt-2">{usagePercent.toFixed(1)}% of total space</p>
</CardContent> </CardContent>
</Card> </Card>
@@ -51,17 +140,17 @@ export function StorageMetrics() {
<CardHeader> <CardHeader>
<CardTitle className="text-foreground flex items-center"> <CardTitle className="text-foreground flex items-center">
<Archive className="h-5 w-5 mr-2" /> <Archive className="h-5 w-5 mr-2" />
Backups Available
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold text-foreground">245 GB</div> <div className="text-2xl font-bold text-foreground">{storageData.available.toFixed(1)} GB</div>
<div className="flex items-center mt-2"> <div className="flex items-center mt-2">
<Badge variant="outline" className="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">
12 Backups {((storageData.available / storageData.total) * 100).toFixed(1)}% Free
</Badge> </Badge>
</div> </div>
<p className="text-xs text-muted-foreground mt-2">Last backup: 2h ago</p> <p className="text-xs text-muted-foreground mt-2">Available space</p>
</CardContent> </CardContent>
</Card> </Card>
@@ -69,104 +158,17 @@ export function StorageMetrics() {
<CardHeader> <CardHeader>
<CardTitle className="text-foreground flex items-center"> <CardTitle className="text-foreground flex items-center">
<Activity className="h-5 w-5 mr-2" /> <Activity className="h-5 w-5 mr-2" />
IOPS Disks
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold text-foreground">6.7K</div> <div className="text-2xl font-bold text-foreground">{storageData.disks.length}</div>
<div className="flex items-center space-x-2 mt-2"> <div className="flex items-center space-x-2 mt-2">
<span className="text-xs text-green-500">Read: 4.2K</span> <Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
<span className="text-xs text-blue-500">Write: 2.5K</span> {storageData.disks.filter((d) => d.health === "healthy").length} Healthy
</Badge>
</div> </div>
<p className="text-xs text-muted-foreground mt-2">Average operations/sec</p> <p className="text-xs text-muted-foreground mt-2">Storage devices</p>
</CardContent>
</Card>
</div>
{/* Storage Distribution and Performance */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<Card className="bg-card border-border">
<CardHeader>
<CardTitle className="text-foreground flex items-center">
<HardDrive className="h-5 w-5 mr-2" />
Storage Distribution
</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className="space-y-2">
<div className="flex justify-between text-sm">
<span className="text-foreground font-medium">Used Storage</span>
<span className="text-muted-foreground">1.25 TB (62.5%)</span>
</div>
<div className="w-full bg-muted rounded-full h-3">
<div
className="bg-blue-500 h-3 rounded-full transition-all duration-300"
style={{ width: "62.5%" }}
></div>
</div>
</div>
<div className="space-y-2">
<div className="flex justify-between text-sm">
<span className="text-foreground font-medium">Available Storage</span>
<span className="text-muted-foreground">750 GB (37.5%)</span>
</div>
<div className="w-full bg-muted rounded-full h-3">
<div
className="bg-green-500 h-3 rounded-full transition-all duration-300"
style={{ width: "37.5%" }}
></div>
</div>
</div>
<div className="pt-4 border-t border-border">
<div className="grid grid-cols-2 gap-4 text-center">
<div className="space-y-1">
<div className="flex items-center justify-center">
<div className="w-3 h-3 bg-blue-500 rounded-full mr-2"></div>
<span className="text-sm font-medium text-foreground">Used</span>
</div>
<div className="text-lg font-bold text-foreground">1.25 TB</div>
</div>
<div className="space-y-1">
<div className="flex items-center justify-center">
<div className="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
<span className="text-sm font-medium text-foreground">Available</span>
</div>
<div className="text-lg font-bold text-foreground">750 GB</div>
</div>
</div>
</div>
</div>
</CardContent>
</Card>
<Card className="bg-card border-border">
<CardHeader>
<CardTitle className="text-foreground flex items-center">
<Activity className="h-5 w-5 mr-2" />
Disk Performance
</CardTitle>
</CardHeader>
<CardContent>
<ResponsiveContainer width="100%" height={300}>
<BarChart data={diskPerformance}>
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
<XAxis dataKey="disk" stroke="hsl(var(--muted-foreground))" fontSize={12} />
<YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} />
<Tooltip
contentStyle={{
backgroundColor: "hsl(var(--card))",
border: "1px solid hsl(var(--border))",
borderRadius: "8px",
color: "hsl(var(--foreground))",
}}
/>
<Bar dataKey="read" fill="#3b82f6" name="Read MB/s" />
<Bar dataKey="write" fill="#10b981" name="Write MB/s" />
</BarChart>
</ResponsiveContainer>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
@@ -181,12 +183,7 @@ export function StorageMetrics() {
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="space-y-4"> <div className="space-y-4">
{[ {storageData.disks.map((disk, index) => (
{ name: "/dev/sda", type: "HDD", size: "1TB", used: "650GB", health: "healthy", temp: "42°C" },
{ name: "/dev/sdb", type: "HDD", size: "1TB", used: "480GB", health: "healthy", temp: "38°C" },
{ name: "/dev/sdc", type: "SSD", size: "500GB", used: "120GB", health: "healthy", temp: "35°C" },
{ name: "/dev/nvme0n1", type: "NVMe", size: "1TB", used: "340GB", health: "warning", temp: "55°C" },
].map((disk, index) => (
<div <div
key={index} key={index}
className="flex items-center justify-between p-4 rounded-lg border border-border bg-card/50" className="flex items-center justify-between p-4 rounded-lg border border-border bg-card/50"
@@ -196,7 +193,7 @@ export function StorageMetrics() {
<div> <div>
<div className="font-medium text-foreground">{disk.name}</div> <div className="font-medium text-foreground">{disk.name}</div>
<div className="text-sm text-muted-foreground"> <div className="text-sm text-muted-foreground">
{disk.type} • {disk.size} {disk.fstype} • {disk.mountpoint}
</div> </div>
</div> </div>
</div> </div>
@@ -204,17 +201,14 @@ export function StorageMetrics() {
<div className="flex items-center space-x-6"> <div className="flex items-center space-x-6">
<div className="text-right"> <div className="text-right">
<div className="text-sm font-medium text-foreground"> <div className="text-sm font-medium text-foreground">
{disk.used} / {disk.size} {disk.used.toFixed(1)} GB / {disk.total.toFixed(1)} GB
</div> </div>
<Progress <Progress value={disk.usage_percent} className="w-24 mt-1" />
value={(Number.parseInt(disk.used) / Number.parseInt(disk.size)) * 100}
className="w-24 mt-1"
/>
</div> </div>
<div className="text-center"> <div className="text-center">
<div className="text-sm text-muted-foreground">Temp</div> <div className="text-sm text-muted-foreground">Temp</div>
<div className="text-sm font-medium text-foreground">{disk.temp}</div> <div className="text-sm font-medium text-foreground">{disk.temperature}°C</div>
</div> </div>
<Badge <Badge

424
AppImage/components/system-overview.tsx
View File

@@ -5,7 +5,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
import { Progress } from "./ui/progress" import { Progress } from "./ui/progress"
import { Badge } from "./ui/badge" import { Badge } from "./ui/badge"
import { XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from "recharts" import { XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from "recharts"
import { Cpu, MemoryStick, Thermometer, Users, Activity, Server, Zap, AlertCircle } from "lucide-react" import { Cpu, MemoryStick, Thermometer, Activity, Server, Zap, AlertCircle } from "lucide-react"
interface SystemData { interface SystemData {
cpu_usage: number cpu_usage: number
@@ -32,64 +32,25 @@ interface VMData {
uptime: number uptime: number
} }
const generateDemoSystemData = (): SystemData => ({ interface HistoricalData {
cpu_usage: Math.floor(Math.random() * 20) + 60, // 60-80% timestamp: string
memory_usage: Math.floor(Math.random() * 10) + 45, // 45-55% cpu_usage: number
memory_total: 32.0, memory_used: number
memory_used: 15.8 + Math.random() * 2, // 15.8-17.8 GB memory_total: number
temperature: Math.floor(Math.random() * 8) + 48, // 48-56°C }
uptime: "15d 7h 23m",
load_average: [1.23, 1.45, 1.67],
hostname: "proxmox-demo",
node_id: "pve-demo-node",
timestamp: new Date().toISOString(),
})
const demVMData: VMData[] = [ const historicalDataStore: HistoricalData[] = []
{ const MAX_HISTORICAL_POINTS = 24 // Store 24 data points for 24h view
vmid: 100,
name: "web-server-01",
status: "running",
cpu: 0.45,
mem: 8589934592,
maxmem: 17179869184,
disk: 53687091200,
maxdisk: 107374182400,
uptime: 1324800,
},
{
vmid: 101,
name: "database-server",
status: "running",
cpu: 0.23,
mem: 4294967296,
maxmem: 8589934592,
disk: 26843545600,
maxdisk: 53687091200,
uptime: 864000,
},
{
vmid: 102,
name: "backup-server",
status: "stopped",
cpu: 0,
mem: 0,
maxmem: 4294967296,
disk: 10737418240,
maxdisk: 21474836480,
uptime: 0,
},
]
const fetchSystemData = async (): Promise<{ data: SystemData | null; isDemo: boolean }> => { const fetchSystemData = async (): Promise<SystemData | null> => {
try { try {
console.log("[v0] Attempting to fetch system data from Flask server...") console.log("[v0] Fetching system data from Flask server...")
const response = await fetch("/api/system", { const response = await fetch("/api/system", {
method: "GET", method: "GET",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
signal: AbortSignal.timeout(3000), // Reduced timeout for faster fallback signal: AbortSignal.timeout(5000),
}) })
if (!response.ok) { if (!response.ok) {
@@ -98,22 +59,36 @@ const fetchSystemData = async (): Promise<{ data: SystemData | null; isDemo: boo
const data = await response.json() const data = await response.json()
console.log("[v0] Successfully fetched real system data from Flask:", data) console.log("[v0] Successfully fetched real system data from Flask:", data)
return { data, isDemo: false }
// Store historical data
historicalDataStore.push({
timestamp: data.timestamp,
cpu_usage: data.cpu_usage,
memory_used: data.memory_used,
memory_total: data.memory_total,
})
// Keep only last MAX_HISTORICAL_POINTS
if (historicalDataStore.length > MAX_HISTORICAL_POINTS) {
historicalDataStore.shift()
}
return data
} catch (error) { } catch (error) {
console.log("[v0] Flask server not available, using demo data for development") console.error("[v0] Failed to fetch system data from Flask server:", error)
return { data: generateDemoSystemData(), isDemo: true } return null
} }
} }
const fetchVMData = async (): Promise<{ data: VMData[]; isDemo: boolean }> => { const fetchVMData = async (): Promise<VMData[]> => {
try { try {
console.log("[v0] Attempting to fetch VM data from Flask server...") console.log("[v0] Fetching VM data from Flask server...")
const response = await fetch("/api/vms", { const response = await fetch("/api/vms", {
method: "GET", method: "GET",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
signal: AbortSignal.timeout(3000), // Reduced timeout for faster fallback signal: AbortSignal.timeout(5000),
}) })
if (!response.ok) { if (!response.ok) {
@@ -122,36 +97,29 @@ const fetchVMData = async (): Promise<{ data: VMData[]; isDemo: boolean }> => {
const data = await response.json() const data = await response.json()
console.log("[v0] Successfully fetched VM data from Flask:", data) console.log("[v0] Successfully fetched VM data from Flask:", data)
return { data: data.vms || [], isDemo: false } return Array.isArray(data) ? data : data.vms || []
} catch (error) { } catch (error) {
console.log("[v0] Flask server not available, using demo VM data") console.error("[v0] Failed to fetch VM data from Flask server:", error)
return { data: demVMData, isDemo: true } return []
} }
} }
const generateChartData = (systemData?: SystemData) => { const generateChartData = () => {
const cpuData = [] if (historicalDataStore.length === 0) {
const memoryData = [] return { cpuData: [], memoryData: [] }
for (let i = 0; i < 24; i += 4) {
const time = `${i.toString().padStart(2, "0")}:00`
// Use real CPU data as base if available, otherwise use random data
const baseCpu = systemData?.cpu_usage || 60
cpuData.push({
time,
value: Math.max(0, Math.min(100, baseCpu + (Math.random() - 0.5) * 20)),
})
// Use real memory data as base if available
const baseMemory = systemData?.memory_used || 15.8
const totalMemory = systemData?.memory_total || 32
memoryData.push({
time,
used: Math.max(0, baseMemory + (Math.random() - 0.5) * 4),
available: Math.max(0, totalMemory - (baseMemory + (Math.random() - 0.5) * 4)),
})
} }
const cpuData = historicalDataStore.map((point) => ({
time: new Date(point.timestamp).toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" }),
value: point.cpu_usage,
}))
const memoryData = historicalDataStore.map((point) => ({
time: new Date(point.timestamp).toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" }),
used: point.memory_used,
available: point.memory_total - point.memory_used,
}))
return { cpuData, memoryData } return { cpuData, memoryData }
} }
@@ -160,29 +128,28 @@ export function SystemOverview() {
const [vmData, setVmData] = useState<VMData[]>([]) const [vmData, setVmData] = useState<VMData[]>([])
const [chartData, setChartData] = useState(generateChartData()) const [chartData, setChartData] = useState(generateChartData())
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const [isDemo, setIsDemo] = useState(false) // Added demo mode state const [error, setError] = useState<string | null>(null)
useEffect(() => { useEffect(() => {
const fetchData = async () => { const fetchData = async () => {
try { try {
setLoading(true) setLoading(true)
setError(null)
const [systemResult, vmResult] = await Promise.all([fetchSystemData(), fetchVMData()]) const [systemResult, vmResult] = await Promise.all([fetchSystemData(), fetchVMData()])
setSystemData(systemResult.data) if (!systemResult) {
setVmData(vmResult.data) setError("Flask server not available. Please ensure the server is running.")
setIsDemo(systemResult.isDemo || vmResult.isDemo) // Set demo mode if either fetch is demo setLoading(false)
return
if (systemResult.data) {
setChartData(generateChartData(systemResult.data))
} }
setSystemData(systemResult)
setVmData(vmResult)
setChartData(generateChartData())
} catch (err) { } catch (err) {
console.error("[v0] Error fetching data:", err) console.error("[v0] Error fetching data:", err)
const fallbackData = generateDemoSystemData() setError("Failed to connect to Flask server. Please check your connection.")
setSystemData(fallbackData)
setVmData(demVMData)
setChartData(generateChartData(fallbackData))
setIsDemo(true)
} finally { } finally {
setLoading(false) setLoading(false)
} }
@@ -191,20 +158,13 @@ export function SystemOverview() {
fetchData() fetchData()
const interval = setInterval(() => { const interval = setInterval(() => {
if (!isDemo) { fetchData()
fetchData() }, 30000) // Update every 30 seconds
} else {
// In demo mode, just update with new random data
const newDemoData = generateDemoSystemData()
setSystemData(newDemoData)
setChartData(generateChartData(newDemoData))
}
}, 30000) // Update every 30 seconds instead of 5
return () => { return () => {
clearInterval(interval) clearInterval(interval)
} }
}, [isDemo]) }, [])
if (loading) { if (loading) {
return ( return (
@@ -229,7 +189,33 @@ export function SystemOverview() {
) )
} }
if (!systemData) return null if (error || !systemData) {
return (
<div className="space-y-6">
<Card className="bg-red-500/10 border-red-500/20">
<CardContent className="p-6">
<div className="flex items-center gap-3 text-red-600">
<AlertCircle className="h-6 w-6" />
<div>
<div className="font-semibold text-lg mb-1">Flask Server Not Available</div>
<div className="text-sm">
{error || "Unable to connect to the Flask server. Please ensure the server is running and try again."}
</div>
<div className="text-sm mt-2">
<strong>Troubleshooting:</strong>
<ul className="list-disc list-inside mt-1 space-y-1">
<li>Check if the Flask server is running on the correct port</li>
<li>Verify network connectivity</li>
<li>Check server logs for errors</li>
</ul>
</div>
</div>
</div>
</CardContent>
</Card>
</div>
)
}
const vmStats = { const vmStats = {
total: vmData.length, total: vmData.length,
@@ -239,6 +225,7 @@ export function SystemOverview() {
} }
const getTemperatureStatus = (temp: number) => { const getTemperatureStatus = (temp: number) => {
if (temp === 0) return { status: "N/A", color: "bg-gray-500/10 text-gray-500 border-gray-500/20" }
if (temp < 60) return { status: "Normal", color: "bg-green-500/10 text-green-500 border-green-500/20" } if (temp < 60) return { status: "Normal", color: "bg-green-500/10 text-green-500 border-green-500/20" }
if (temp < 75) return { status: "Warm", color: "bg-yellow-500/10 text-yellow-500 border-yellow-500/20" } if (temp < 75) return { status: "Warm", color: "bg-yellow-500/10 text-yellow-500 border-yellow-500/20" }
return { status: "Hot", color: "bg-red-500/10 text-red-500 border-red-500/20" } return { status: "Hot", color: "bg-red-500/10 text-red-500 border-red-500/20" }
@@ -248,160 +235,156 @@ export function SystemOverview() {
return ( return (
<div className="space-y-6"> <div className="space-y-6">
{isDemo && (
<Card className="bg-blue-500/10 border-blue-500/20">
<CardContent className="p-4">
<div className="flex items-center gap-2 text-sm text-blue-600">
<AlertCircle className="h-4 w-4" />
<span>
<strong>Demo Mode:</strong> Flask server not available. Showing simulated data for development. In the
AppImage, this will connect to the real Flask server.
</span>
</div>
</CardContent>
</Card>
)}
{/* Key Metrics Cards */} {/* Key Metrics Cards */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<Card className="bg-card border-border metric-card"> <Card className="bg-card border-border">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium text-muted-foreground">CPU Usage</CardTitle> <CardTitle className="text-sm font-medium text-muted-foreground">CPU Usage</CardTitle>
<Cpu className="h-4 w-4 text-muted-foreground" /> <Cpu className="h-4 w-4 text-muted-foreground" />
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold text-foreground metric-value">{systemData.cpu_usage}%</div> <div className="text-2xl font-bold text-foreground">{systemData.cpu_usage}%</div>
<Progress value={systemData.cpu_usage} className="mt-2" /> <Progress value={systemData.cpu_usage} className="mt-2" />
<p className="text-xs text-muted-foreground mt-2 metric-label"> <p className="text-xs text-muted-foreground mt-2">Real-time data from Flask server</p>
{isDemo ? "Simulated data" : "Real-time data from Flask server"}
</p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="bg-card border-border metric-card"> <Card className="bg-card border-border">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium text-muted-foreground">Memory Usage</CardTitle> <CardTitle className="text-sm font-medium text-muted-foreground">Memory Usage</CardTitle>
<MemoryStick className="h-4 w-4 text-muted-foreground" /> <MemoryStick className="h-4 w-4 text-muted-foreground" />
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold text-foreground metric-value"> <div className="text-2xl font-bold text-foreground">{systemData.memory_used.toFixed(1)} GB</div>
{systemData.memory_used.toFixed(1)} GB
</div>
<Progress value={systemData.memory_usage} className="mt-2" /> <Progress value={systemData.memory_usage} className="mt-2" />
<p className="text-xs text-muted-foreground mt-2 metric-label"> <p className="text-xs text-muted-foreground mt-2">
{systemData.memory_usage.toFixed(1)}% of {systemData.memory_total} GB {systemData.memory_usage.toFixed(1)}% of {systemData.memory_total} GB
</p> </p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="bg-card border-border metric-card"> <Card className="bg-card border-border">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium text-muted-foreground">Temperature</CardTitle> <CardTitle className="text-sm font-medium text-muted-foreground">Temperature</CardTitle>
<Thermometer className="h-4 w-4 text-muted-foreground" /> <Thermometer className="h-4 w-4 text-muted-foreground" />
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold text-foreground metric-value">{systemData.temperature}°C</div> <div className="text-2xl font-bold text-foreground">
{systemData.temperature === 0 ? "N/A" : `${systemData.temperature}°C`}
</div>
<div className="flex items-center mt-2"> <div className="flex items-center mt-2">
<Badge variant="outline" className={tempStatus.color}> <Badge variant="outline" className={tempStatus.color}>
{tempStatus.status} {tempStatus.status}
</Badge> </Badge>
</div> </div>
<p className="text-xs text-muted-foreground mt-2 metric-label"> <p className="text-xs text-muted-foreground mt-2">
{isDemo ? "Simulated temperature" : "Live temperature reading"} {systemData.temperature === 0 ? "No sensor available" : "Live temperature reading"}
</p> </p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="bg-card border-border metric-card"> <Card className="bg-card border-border">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium text-muted-foreground">Active VMs</CardTitle> <CardTitle className="text-sm font-medium text-muted-foreground">Active VMs</CardTitle>
<Server className="h-4 w-4 text-muted-foreground" /> <Server className="h-4 w-4 text-muted-foreground" />
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold text-foreground metric-value">{vmStats.running}</div> <div className="text-2xl font-bold text-foreground">{vmStats.running}</div>
<div className="vm-badges mt-2 flex flex-wrap gap-1"> <div className="mt-2 flex flex-wrap gap-1">
<Badge variant="outline" className="vm-badge 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">
{vmStats.running} Running {vmStats.running} Running
</Badge> </Badge>
{vmStats.stopped > 0 && ( {vmStats.stopped > 0 && (
<Badge variant="outline" className="vm-badge bg-yellow-500/10 text-yellow-500 border-yellow-500/20"> <Badge variant="outline" className="bg-yellow-500/10 text-yellow-500 border-yellow-500/20">
{vmStats.stopped} Stopped {vmStats.stopped} Stopped
</Badge> </Badge>
)} )}
</div> </div>
<p className="text-xs text-muted-foreground mt-2 metric-label">Total: {vmStats.total} VMs configured</p> <p className="text-xs text-muted-foreground mt-2">Total: {vmStats.total} VMs configured</p>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
{/* Charts Section */} {/* Charts Section */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<Card className="bg-card border-border metric-card"> <Card className="bg-card border-border">
<CardHeader> <CardHeader>
<CardTitle className="text-foreground flex items-center"> <CardTitle className="text-foreground flex items-center">
<Activity className="h-5 w-5 mr-2" /> <Activity className="h-5 w-5 mr-2" />
CPU Usage (24h) CPU Usage (Last {historicalDataStore.length} readings)
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ResponsiveContainer width="100%" height={300}> {chartData.cpuData.length > 0 ? (
<AreaChart data={chartData.cpuData}> <ResponsiveContainer width="100%" height={300}>
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" /> <AreaChart data={chartData.cpuData}>
<XAxis dataKey="time" stroke="hsl(var(--muted-foreground))" fontSize={12} /> <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
<YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} /> <XAxis dataKey="time" stroke="hsl(var(--muted-foreground))" fontSize={12} />
<Tooltip <YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} />
contentStyle={{ <Tooltip
backgroundColor: "hsl(var(--card))", contentStyle={{
border: "1px solid hsl(var(--border))", backgroundColor: "hsl(var(--card))",
borderRadius: "8px", border: "1px solid hsl(var(--border))",
color: "hsl(var(--foreground))", borderRadius: "8px",
}} color: "hsl(var(--foreground))",
/> }}
<Area type="monotone" dataKey="value" stroke="#3b82f6" fill="#3b82f6" fillOpacity={0.2} /> />
</AreaChart> <Area type="monotone" dataKey="value" stroke="#3b82f6" fill="#3b82f6" fillOpacity={0.2} />
</ResponsiveContainer> </AreaChart>
</ResponsiveContainer>
) : (
<div className="h-[300px] flex items-center justify-center text-muted-foreground">
Collecting data... Check back in a few minutes
</div>
)}
</CardContent> </CardContent>
</Card> </Card>
<Card className="bg-card border-border metric-card"> <Card className="bg-card border-border">
<CardHeader> <CardHeader>
<CardTitle className="text-foreground flex items-center"> <CardTitle className="text-foreground flex items-center">
<MemoryStick className="h-5 w-5 mr-2" /> <MemoryStick className="h-5 w-5 mr-2" />
Memory Usage (24h) Memory Usage (Last {historicalDataStore.length} readings)
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ResponsiveContainer width="100%" height={300}> {chartData.memoryData.length > 0 ? (
<AreaChart data={chartData.memoryData}> <ResponsiveContainer width="100%" height={300}>
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" /> <AreaChart data={chartData.memoryData}>
<XAxis dataKey="time" stroke="hsl(var(--muted-foreground))" fontSize={12} /> <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
<YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} /> <XAxis dataKey="time" stroke="hsl(var(--muted-foreground))" fontSize={12} />
<Tooltip <YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} />
contentStyle={{ <Tooltip
backgroundColor: "hsl(var(--card))", contentStyle={{
border: "1px solid hsl(var(--border))", backgroundColor: "hsl(var(--card))",
borderRadius: "8px", border: "1px solid hsl(var(--border))",
color: "hsl(var(--foreground))", borderRadius: "8px",
}} color: "hsl(var(--foreground))",
/> }}
<Area type="monotone" dataKey="used" stackId="1" stroke="#3b82f6" fill="#3b82f6" fillOpacity={0.6} /> />
<Area <Area type="monotone" dataKey="used" stackId="1" stroke="#3b82f6" fill="#3b82f6" fillOpacity={0.6} />
type="monotone" <Area
dataKey="available" type="monotone"
stackId="1" dataKey="available"
stroke="#10b981" stackId="1"
fill="#10b981" stroke="#10b981"
fillOpacity={0.6} fill="#10b981"
/> fillOpacity={0.6}
</AreaChart> />
</ResponsiveContainer> </AreaChart>
</ResponsiveContainer>
) : (
<div className="h-[300px] flex items-center justify-center text-muted-foreground">
Collecting data... Check back in a few minutes
</div>
)}
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
{/* System Information */} {/* System Information */}
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<Card className="bg-card border-border metric-card"> <Card className="bg-card border-border">
<CardHeader> <CardHeader>
<CardTitle className="text-foreground flex items-center"> <CardTitle className="text-foreground flex items-center">
<Server className="h-5 w-5 mr-2" /> <Server className="h-5 w-5 mr-2" />
@@ -410,76 +393,51 @@ export function SystemOverview() {
</CardHeader> </CardHeader>
<CardContent className="space-y-3"> <CardContent className="space-y-3">
<div className="flex justify-between"> <div className="flex justify-between">
<span className="text-muted-foreground metric-label">Hostname:</span> <span className="text-muted-foreground">Hostname:</span>
<span className="text-foreground font-mono metric-value">{systemData.hostname}</span> <span className="text-foreground font-mono">{systemData.hostname}</span>
</div> </div>
<div className="flex justify-between"> <div className="flex justify-between">
<span className="text-muted-foreground metric-label">Uptime:</span> <span className="text-muted-foreground">Uptime:</span>
<span className="text-foreground metric-value">{systemData.uptime}</span> <span className="text-foreground">{systemData.uptime}</span>
</div> </div>
<div className="flex justify-between"> <div className="flex justify-between">
<span className="text-muted-foreground metric-label">Node ID:</span> <span className="text-muted-foreground">Node ID:</span>
<span className="text-foreground font-mono metric-value">{systemData.node_id}</span> <span className="text-foreground font-mono">{systemData.node_id}</span>
</div> </div>
<div className="flex justify-between"> <div className="flex justify-between">
<span className="text-muted-foreground metric-label">Last Update:</span> <span className="text-muted-foreground">Last Update:</span>
<span className="text-foreground metric-value"> <span className="text-foreground">{new Date(systemData.timestamp).toLocaleTimeString()}</span>
{new Date(systemData.timestamp).toLocaleTimeString()}
</span>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
<Card className="bg-card border-border metric-card"> <Card className="bg-card border-border">
<CardHeader>
<CardTitle className="text-foreground flex items-center">
<Users className="h-5 w-5 mr-2" />
Active Sessions
</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
<div className="flex justify-between items-center">
<span className="text-muted-foreground metric-label">Web Console:</span>
<Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
3 active
</Badge>
</div>
<div className="flex justify-between items-center">
<span className="text-muted-foreground metric-label">SSH Sessions:</span>
<Badge variant="outline" className="bg-blue-500/10 text-blue-500 border-blue-500/20">
1 active
</Badge>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground metric-label">API Calls:</span>
<span className="text-foreground metric-value">247/hour</span>
</div>
</CardContent>
</Card>
<Card className="bg-card border-border metric-card">
<CardHeader> <CardHeader>
<CardTitle className="text-foreground flex items-center"> <CardTitle className="text-foreground flex items-center">
<Zap className="h-5 w-5 mr-2" /> <Zap className="h-5 w-5 mr-2" />
Power & Performance Performance Metrics
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="space-y-3"> <CardContent className="space-y-3">
<div className="flex justify-between"> <div className="flex justify-between">
<span className="text-muted-foreground metric-label">Power State:</span> <span className="text-muted-foreground">Load Average:</span>
<Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20"> <span className="text-foreground font-mono">
Running
</Badge>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground metric-label">Load Average:</span>
<span className="text-foreground font-mono metric-value">
{systemData.load_average.map((avg) => avg.toFixed(2)).join(", ")} {systemData.load_average.map((avg) => avg.toFixed(2)).join(", ")}
</span> </span>
</div> </div>
<div className="flex justify-between"> <div className="flex justify-between">
<span className="text-muted-foreground metric-label">Boot Time:</span> <span className="text-muted-foreground">Total Memory:</span>
<span className="text-foreground metric-value">2.3s</span> <span className="text-foreground">{systemData.memory_total} GB</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">Available Memory:</span>
<span className="text-foreground">
{(systemData.memory_total - systemData.memory_used).toFixed(1)} GB
</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">CPU Cores:</span>
<span className="text-foreground">{navigator.hardwareConcurrency || "N/A"}</span>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>

394
AppImage/components/virtual-machines.tsx
View File

@@ -1,147 +1,105 @@
"use client" "use client"
import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card" import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
import { Badge } from "./ui/badge" import { Badge } from "./ui/badge"
import { Progress } from "./ui/progress" import { Progress } from "./ui/progress"
import { Server, Play, Square, RotateCcw, Monitor, Cpu, MemoryStick } from "lucide-react" import { Server, Play, Square, Monitor, Cpu, MemoryStick, AlertCircle } from "lucide-react"
const virtualMachines = [ interface VMData {
{ vmid: number
id: 100, name: string
name: "web-server-01", status: string
type: "vm", cpu: number
status: "running", mem: number
os: "Ubuntu 22.04", maxmem: number
cpu: 4, disk: number
memory: 8192, maxdisk: number
disk: 50, uptime: number
uptime: "15d 7h 23m", }
cpuUsage: 45,
memoryUsage: 62, const fetchVMData = async (): Promise<VMData[]> => {
diskUsage: 78, try {
}, console.log("[v0] Fetching VM data from Flask server...")
{ const response = await fetch("/api/vms", {
id: 101, method: "GET",
name: "database-01", headers: {
type: "vm", "Content-Type": "application/json",
status: "running", },
os: "CentOS 8", signal: AbortSignal.timeout(5000),
cpu: 8, })
memory: 16384,
disk: 100, if (!response.ok) {
uptime: "12d 3h 45m", throw new Error(`Flask server responded with status: ${response.status}`)
cpuUsage: 78, }
memoryUsage: 85,
diskUsage: 45, const data = await response.json()
}, console.log("[v0] Successfully fetched VM data from Flask:", data)
{ return Array.isArray(data) ? data : []
id: 102, } catch (error) {
name: "backup-server", console.error("[v0] Failed to fetch VM data from Flask server:", error)
type: "vm", throw error
status: "stopped", }
os: "Debian 11", }
cpu: 2,
memory: 4096,
disk: 200,
uptime: "0d 0h 0m",
cpuUsage: 0,
memoryUsage: 0,
diskUsage: 23,
},
{
id: 103,
name: "dev-environment",
type: "vm",
status: "running",
os: "Ubuntu 20.04",
cpu: 6,
memory: 12288,
disk: 75,
uptime: "3d 12h 18m",
cpuUsage: 32,
memoryUsage: 58,
diskUsage: 67,
},
{
id: 104,
name: "monitoring-01",
type: "vm",
status: "running",
os: "Alpine Linux",
cpu: 2,
memory: 2048,
disk: 25,
uptime: "8d 15h 32m",
cpuUsage: 15,
memoryUsage: 34,
diskUsage: 42,
},
{
id: 105,
name: "mail-server",
type: "vm",
status: "stopped",
os: "Ubuntu 22.04",
cpu: 4,
memory: 8192,
disk: 60,
uptime: "0d 0h 0m",
cpuUsage: 0,
memoryUsage: 0,
diskUsage: 56,
},
{
id: 200,
name: "nginx-proxy",
type: "lxc",
status: "running",
os: "Ubuntu 22.04 LXC",
cpu: 1,
memory: 512,
disk: 8,
uptime: "25d 14h 12m",
cpuUsage: 8,
memoryUsage: 45,
diskUsage: 32,
},
{
id: 201,
name: "redis-cache",
type: "lxc",
status: "running",
os: "Alpine Linux LXC",
cpu: 1,
memory: 1024,
disk: 4,
uptime: "18d 6h 45m",
cpuUsage: 12,
memoryUsage: 38,
diskUsage: 28,
},
{
id: 202,
name: "log-collector",
type: "lxc",
status: "stopped",
os: "Debian 11 LXC",
cpu: 1,
memory: 256,
disk: 2,
uptime: "0d 0h 0m",
cpuUsage: 0,
memoryUsage: 0,
diskUsage: 15,
},
]
export function VirtualMachines() { export function VirtualMachines() {
const runningVMs = virtualMachines.filter((vm) => vm.status === "running").length const [vmData, setVmData] = useState<VMData[]>([])
const stoppedVMs = virtualMachines.filter((vm) => vm.status === "stopped").length const [loading, setLoading] = useState(true)
const runningLXC = virtualMachines.filter((vm) => vm.type === "lxc" && vm.status === "running").length const [error, setError] = useState<string | null>(null)
const totalVMs = virtualMachines.filter((vm) => vm.type === "vm").length
const totalLXC = virtualMachines.filter((vm) => vm.type === "lxc").length useEffect(() => {
const totalCPU = virtualMachines.reduce((sum, vm) => sum + vm.cpu, 0) const fetchData = async () => {
const totalMemory = virtualMachines.reduce((sum, vm) => sum + vm.memory, 0) try {
setLoading(true)
setError(null)
const result = await fetchVMData()
setVmData(result)
} catch (err) {
setError("Flask server not available. Please ensure the server is running.")
} finally {
setLoading(false)
}
}
fetchData()
const interval = setInterval(fetchData, 30000)
return () => clearInterval(interval)
}, [])
if (loading) {
return (
<div className="space-y-6">
<div className="text-center py-8">
<div className="text-lg font-medium text-foreground mb-2">Loading VM data...</div>
</div>
</div>
)
}
if (error) {
return (
<div className="space-y-6">
<Card className="bg-red-500/10 border-red-500/20">
<CardContent className="p-6">
<div className="flex items-center gap-3 text-red-600">
<AlertCircle className="h-6 w-6" />
<div>
<div className="font-semibold text-lg mb-1">Flask Server Not Available</div>
<div className="text-sm">
{error || "Unable to connect to the Flask server. Please ensure the server is running and try again."}
</div>
</div>
</div>
</CardContent>
</Card>
</div>
)
}
const runningVMs = vmData.filter((vm) => vm.status === "running").length
const stoppedVMs = vmData.filter((vm) => vm.status === "stopped").length
const totalCPU = vmData.reduce((sum, vm) => sum + (vm.cpu || 0), 0)
const totalMemory = vmData.reduce((sum, vm) => sum + (vm.maxmem || 0), 0)
const getStatusColor = (status: string) => { const getStatusColor = (status: string) => {
switch (status) { switch (status) {
@@ -161,46 +119,48 @@ export function VirtualMachines() {
case "stopped": case "stopped":
return <Square className="h-3 w-3 mr-1" /> return <Square className="h-3 w-3 mr-1" />
default: default:
return <RotateCcw className="h-3 w-3 mr-1" /> return null
} }
} }
const formatUptime = (seconds: number) => {
const days = Math.floor(seconds / 86400)
const hours = Math.floor((seconds % 86400) / 3600)
const minutes = Math.floor((seconds % 3600) / 60)
return `${days}d ${hours}h ${minutes}m`
}
return ( return (
<div className="space-y-6"> <div className="space-y-6">
{/* VM Overview Cards */} {/* VM Overview Cards */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<Card className="bg-card border-border"> <Card className="bg-card border-border">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium text-muted-foreground">Total VMs & LXC</CardTitle> <CardTitle className="text-sm font-medium text-muted-foreground">Total VMs</CardTitle>
<Server className="h-4 w-4 text-muted-foreground" /> <Server className="h-4 w-4 text-muted-foreground" />
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold text-foreground">{virtualMachines.length}</div> <div className="text-2xl font-bold text-foreground">{vmData.length}</div>
<div className="vm-badges mt-2"> <div className="vm-badges mt-2">
<Badge variant="outline" className="vm-badge bg-green-500/10 text-green-500 border-green-500/20"> <Badge variant="outline" className="vm-badge bg-green-500/10 text-green-500 border-green-500/20">
{runningVMs} VMs {runningVMs} Running
</Badge>
<Badge variant="outline" className="vm-badge bg-blue-500/10 text-blue-500 border-blue-500/20">
{runningLXC} LXC
</Badge> </Badge>
<Badge variant="outline" className="vm-badge bg-red-500/10 text-red-500 border-red-500/20"> <Badge variant="outline" className="vm-badge bg-red-500/10 text-red-500 border-red-500/20">
{stoppedVMs} Stopped {stoppedVMs} Stopped
</Badge> </Badge>
</div> </div>
<p className="text-xs text-muted-foreground mt-2"> <p className="text-xs text-muted-foreground mt-2">Virtual machines configured</p>
{totalVMs} VMs • {totalLXC} LXC
</p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="bg-card border-border"> <Card className="bg-card border-border">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium text-muted-foreground">Total CPU Cores</CardTitle> <CardTitle className="text-sm font-medium text-muted-foreground">Total CPU</CardTitle>
<Cpu className="h-4 w-4 text-muted-foreground" /> <Cpu className="h-4 w-4 text-muted-foreground" />
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold text-foreground">{totalCPU}</div> <div className="text-2xl font-bold text-foreground">{(totalCPU * 100).toFixed(0)}%</div>
<p className="text-xs text-muted-foreground mt-2">Allocated across all VMs and LXC containers</p> <p className="text-xs text-muted-foreground mt-2">Allocated CPU usage</p>
</CardContent> </CardContent>
</Card> </Card>
@@ -210,8 +170,8 @@ export function VirtualMachines() {
<MemoryStick className="h-4 w-4 text-muted-foreground" /> <MemoryStick className="h-4 w-4 text-muted-foreground" />
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold text-foreground">{(totalMemory / 1024).toFixed(1)} GB</div> <div className="text-2xl font-bold text-foreground">{(totalMemory / 1024 ** 3).toFixed(1)} GB</div>
<p className="text-xs text-muted-foreground mt-2">Allocated RAM across all VMs and LXC containers</p> <p className="text-xs text-muted-foreground mt-2">Allocated RAM</p>
</CardContent> </CardContent>
</Card> </Card>
@@ -221,7 +181,9 @@ export function VirtualMachines() {
<Monitor className="h-4 w-4 text-muted-foreground" /> <Monitor className="h-4 w-4 text-muted-foreground" />
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold text-foreground">42%</div> <div className="text-2xl font-bold text-foreground">
{runningVMs > 0 ? ((totalCPU / runningVMs) * 100).toFixed(0) : 0}%
</div>
<p className="text-xs text-muted-foreground mt-2">Average resource utilization</p> <p className="text-xs text-muted-foreground mt-2">Average resource utilization</p>
</CardContent> </CardContent>
</Card> </Card>
@@ -232,84 +194,72 @@ export function VirtualMachines() {
<CardHeader> <CardHeader>
<CardTitle className="text-foreground flex items-center"> <CardTitle className="text-foreground flex items-center">
<Server className="h-5 w-5 mr-2" /> <Server className="h-5 w-5 mr-2" />
Virtual Machines & LXC Containers Virtual Machines
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="space-y-4"> {vmData.length === 0 ? (
{virtualMachines.map((vm) => ( <div className="text-center py-8 text-muted-foreground">No virtual machines found</div>
<div key={vm.id} className="p-6 rounded-lg border border-border bg-card/50"> ) : (
<div className="flex items-center justify-between mb-4"> <div className="space-y-4">
<div className="flex items-center space-x-4"> {vmData.map((vm) => {
<Server className="h-6 w-6 text-muted-foreground" /> const cpuPercent = (vm.cpu * 100).toFixed(1)
<div> const memPercent = vm.maxmem > 0 ? ((vm.mem / vm.maxmem) * 100).toFixed(1) : "0"
<div className="font-semibold text-foreground text-lg flex items-center"> const memGB = (vm.mem / 1024 ** 3).toFixed(1)
{vm.name} const maxMemGB = (vm.maxmem / 1024 ** 3).toFixed(1)
<Badge
variant="outline" return (
className={`ml-2 text-xs ${ <div key={vm.vmid} className="p-6 rounded-lg border border-border bg-card/50">
vm.type === "lxc" <div className="flex items-center justify-between mb-4">
? "bg-blue-500/10 text-blue-500 border-blue-500/20" <div className="flex items-center space-x-4">
: "bg-purple-500/10 text-purple-500 border-purple-500/20" <Server className="h-6 w-6 text-muted-foreground" />
}`} <div>
> <div className="font-semibold text-foreground text-lg flex items-center">
{vm.type.toUpperCase()} {vm.name}
<Badge
variant="outline"
className="ml-2 text-xs bg-purple-500/10 text-purple-500 border-purple-500/20"
>
VM
</Badge>
</div>
<div className="text-sm text-muted-foreground">ID: {vm.vmid}</div>
</div>
</div>
<div className="flex items-center space-x-3">
<Badge variant="outline" className={getStatusColor(vm.status)}>
{getStatusIcon(vm.status)}
{vm.status.toUpperCase()}
</Badge> </Badge>
</div> </div>
<div className="text-sm text-muted-foreground"> </div>
ID: {vm.id} • {vm.os}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 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>
<Progress value={Number.parseFloat(cpuPercent)} className="h-2" />
</div>
<div>
<div className="text-sm text-muted-foreground mb-2">Memory Usage</div>
<div className="text-lg font-semibold text-foreground mb-1">
{memGB} GB / {maxMemGB} GB
</div>
<Progress value={Number.parseFloat(memPercent)} className="h-2" />
</div>
<div>
<div className="text-sm text-muted-foreground mb-2">Uptime</div>
<div className="text-lg font-semibold text-foreground">{formatUptime(vm.uptime)}</div>
</div> </div>
</div> </div>
</div> </div>
)
<div className="flex items-center space-x-3"> })}
<Badge variant="outline" className={getStatusColor(vm.status)}> </div>
{getStatusIcon(vm.status)} )}
{vm.status.toUpperCase()}
</Badge>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div>
<div className="text-sm text-muted-foreground mb-2">Resources</div>
<div className="space-y-1 text-sm">
<div className="flex justify-between">
<span>CPU:</span>
<span className="font-medium">{vm.cpu} cores</span>
</div>
<div className="flex justify-between">
<span>Memory:</span>
<span className="font-medium">{(vm.memory / 1024).toFixed(1)} GB</span>
</div>
<div className="flex justify-between">
<span>Disk:</span>
<span className="font-medium">{vm.disk} GB</span>
</div>
</div>
</div>
<div>
<div className="text-sm text-muted-foreground mb-2">CPU Usage</div>
<div className="text-lg font-semibold text-foreground mb-1">{vm.cpuUsage}%</div>
<Progress value={vm.cpuUsage} className="h-2" />
</div>
<div>
<div className="text-sm text-muted-foreground mb-2">Memory Usage</div>
<div className="text-lg font-semibold text-foreground mb-1">{vm.memoryUsage}%</div>
<Progress value={vm.memoryUsage} className="h-2" />
</div>
<div>
<div className="text-sm text-muted-foreground mb-2">Uptime</div>
<div className="text-lg font-semibold text-foreground">{vm.uptime}</div>
<div className="text-xs text-muted-foreground mt-1">Disk: {vm.diskUsage}% used</div>
</div>
</div>
</div>
))}
</div>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>