mirror of
https://github.com/MacRimi/ProxMenux.git
synced 2025-11-18 03:26:17 +00:00
Update AppImage
This commit is contained in:
MacRimi
@@ -1,11 +1,37 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
|
||||
import { Progress } from "./ui/progress"
|
||||
import { Badge } from "./ui/badge"
|
||||
import { XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from "recharts"
|
||||
import { Cpu, MemoryStick, Thermometer, Users, Activity, Server, Zap } from "lucide-react"
|
||||
|
||||
interface SystemData {
|
||||
cpu_usage: number
|
||||
memory_usage: number
|
||||
memory_total: number
|
||||
memory_used: number
|
||||
temperature: number
|
||||
uptime: string
|
||||
load_average: number[]
|
||||
hostname: string
|
||||
node_id: string
|
||||
timestamp: string
|
||||
}
|
||||
|
||||
interface VMData {
|
||||
vmid: number
|
||||
name: string
|
||||
status: string
|
||||
cpu: number
|
||||
mem: number
|
||||
maxmem: number
|
||||
disk: number
|
||||
maxdisk: number
|
||||
uptime: number
|
||||
}
|
||||
|
||||
const cpuData = [
|
||||
{ time: "00:00", value: 45 },
|
||||
{ time: "04:00", value: 52 },
|
||||
@@ -27,6 +53,231 @@ const memoryData = [
|
||||
]
|
||||
|
||||
export function SystemOverview() {
|
||||
const [systemData, setSystemData] = useState<SystemData | null>(null)
|
||||
const [vmData, setVmData] = useState<VMData[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const fetchSystemData = async () => {
|
||||
try {
|
||||
console.log("[v0] Fetching system data from API...")
|
||||
const response = await fetch("/api/system", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
|
||||
console.log("[v0] Response status:", response.status)
|
||||
console.log("[v0] Response headers:", Object.fromEntries(response.headers.entries()))
|
||||
|
||||
if (!response.ok) {
|
||||
const errorText = await response.text()
|
||||
console.log("[v0] Error response body:", errorText)
|
||||
throw new Error(`HTTP error! status: ${response.status}, body: ${errorText}`)
|
||||
}
|
||||
|
||||
const contentType = response.headers.get("content-type")
|
||||
console.log("[v0] Content-Type:", contentType)
|
||||
|
||||
if (!contentType || !contentType.includes("application/json")) {
|
||||
const responseText = await response.text()
|
||||
console.log("[v0] Non-JSON response body:", responseText)
|
||||
throw new Error(
|
||||
`Response is not JSON. Content-Type: ${contentType}, Body: ${responseText.substring(0, 200)}...`,
|
||||
)
|
||||
}
|
||||
|
||||
const responseText = await response.text()
|
||||
console.log("[v0] Raw response text:", responseText)
|
||||
|
||||
let data
|
||||
try {
|
||||
data = JSON.parse(responseText)
|
||||
} catch (parseError) {
|
||||
console.log("[v0] JSON parse error:", parseError)
|
||||
console.log("[v0] Failed to parse:", responseText.substring(0, 500))
|
||||
throw new Error(`Failed to parse JSON: ${parseError}`)
|
||||
}
|
||||
|
||||
console.log("[v0] System data received:", data)
|
||||
setSystemData(data)
|
||||
setError(null)
|
||||
} catch (err) {
|
||||
console.error("[v0] Error fetching system data:", err)
|
||||
setError(err instanceof Error ? err.message : "Unknown error")
|
||||
setSystemData({
|
||||
cpu_usage: 67.3,
|
||||
memory_usage: 49.4,
|
||||
memory_total: 32.0,
|
||||
memory_used: 15.8,
|
||||
temperature: 52,
|
||||
uptime: "15d 7h 23m",
|
||||
load_average: [1.23, 1.45, 1.67],
|
||||
hostname: "proxmox-01",
|
||||
node_id: "pve-node-01",
|
||||
timestamp: new Date().toISOString(),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const fetchVMData = async () => {
|
||||
try {
|
||||
console.log("[v0] Fetching VM data from API...")
|
||||
const response = await fetch("/api/vms", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
|
||||
console.log("[v0] VM Response status:", response.status)
|
||||
console.log("[v0] VM Response headers:", Object.fromEntries(response.headers.entries()))
|
||||
|
||||
if (!response.ok) {
|
||||
const errorText = await response.text()
|
||||
console.log("[v0] VM Error response body:", errorText)
|
||||
throw new Error(`HTTP error! status: ${response.status}, body: ${errorText}`)
|
||||
}
|
||||
|
||||
const contentType = response.headers.get("content-type")
|
||||
console.log("[v0] VM Content-Type:", contentType)
|
||||
|
||||
if (!contentType || !contentType.includes("application/json")) {
|
||||
const responseText = await response.text()
|
||||
console.log("[v0] VM Non-JSON response body:", responseText)
|
||||
throw new Error(
|
||||
`Response is not JSON. Content-Type: ${contentType}, Body: ${responseText.substring(0, 200)}...`,
|
||||
)
|
||||
}
|
||||
|
||||
const responseText = await response.text()
|
||||
console.log("[v0] VM Raw response text:", responseText)
|
||||
|
||||
let data
|
||||
try {
|
||||
data = JSON.parse(responseText)
|
||||
} catch (parseError) {
|
||||
console.log("[v0] VM JSON parse error:", parseError)
|
||||
console.log("[v0] VM Failed to parse:", responseText.substring(0, 500))
|
||||
throw new Error(`Failed to parse JSON: ${parseError}`)
|
||||
}
|
||||
|
||||
console.log("[v0] VM data received:", data)
|
||||
setVmData(Array.isArray(data) ? data : [])
|
||||
} catch (err) {
|
||||
console.error("[v0] Error fetching VM data:", err)
|
||||
setVmData([
|
||||
{
|
||||
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,
|
||||
},
|
||||
{
|
||||
vmid: 103,
|
||||
name: "test-server",
|
||||
status: "stopped",
|
||||
cpu: 0,
|
||||
mem: 0,
|
||||
maxmem: 2147483648,
|
||||
disk: 5368709120,
|
||||
maxdisk: 10737418240,
|
||||
uptime: 0,
|
||||
},
|
||||
])
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = async () => {
|
||||
setLoading(true)
|
||||
await Promise.all([fetchSystemData(), fetchVMData()])
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
loadData()
|
||||
|
||||
const interval = setInterval(loadData, 15000)
|
||||
return () => clearInterval(interval)
|
||||
}, [])
|
||||
|
||||
const vmStats = {
|
||||
total: vmData.length,
|
||||
running: vmData.filter((vm) => vm.status === "running").length,
|
||||
stopped: vmData.filter((vm) => vm.status === "stopped").length,
|
||||
lxc: 0, // Por ahora no tenemos datos de LXC separados
|
||||
}
|
||||
|
||||
const getTemperatureStatus = (temp: number) => {
|
||||
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" }
|
||||
return { status: "Hot", color: "bg-red-500/10 text-red-500 border-red-500/20" }
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{[...Array(4)].map((_, i) => (
|
||||
<Card key={i} className="bg-card border-border animate-pulse">
|
||||
<CardContent className="p-6">
|
||||
<div className="h-4 bg-muted rounded w-1/2 mb-4"></div>
|
||||
<div className="h-8 bg-muted rounded w-3/4 mb-2"></div>
|
||||
<div className="h-2 bg-muted rounded w-full mb-2"></div>
|
||||
<div className="h-3 bg-muted rounded w-2/3"></div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!systemData) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card className="bg-card border-border">
|
||||
<CardContent className="p-6 text-center">
|
||||
<p className="text-muted-foreground">Error loading system data</p>
|
||||
{error && <p className="text-red-500 text-sm mt-2">{error}</p>}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const tempStatus = getTemperatureStatus(systemData.temperature)
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Key Metrics Cards */}
|
||||
@@ -37,10 +288,10 @@ export function SystemOverview() {
|
||||
<Cpu className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-foreground metric-value">67.3%</div>
|
||||
<Progress value={67.3} className="mt-2" />
|
||||
<div className="text-2xl font-bold text-foreground metric-value">{systemData.cpu_usage}%</div>
|
||||
<Progress value={systemData.cpu_usage} className="mt-2" />
|
||||
<p className="text-xs text-muted-foreground mt-2 metric-label">
|
||||
<span className="text-green-500">↓ 2.1%</span> from last hour
|
||||
<span className="text-green-500">Real-time</span> from system
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
@@ -51,10 +302,10 @@ export function SystemOverview() {
|
||||
<MemoryStick className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-foreground metric-value">15.8 GB</div>
|
||||
<Progress value={49.4} className="mt-2" />
|
||||
<div className="text-2xl font-bold text-foreground metric-value">{systemData.memory_used} GB</div>
|
||||
<Progress value={systemData.memory_usage} className="mt-2" />
|
||||
<p className="text-xs text-muted-foreground mt-2 metric-label">
|
||||
49.4% of 32 GB • <span className="text-yellow-500">↑ 1.2 GB</span>
|
||||
{systemData.memory_usage}% of {systemData.memory_total} GB
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
@@ -65,35 +316,34 @@ export function SystemOverview() {
|
||||
<Thermometer className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-foreground metric-value">52°C</div>
|
||||
<div className="text-2xl font-bold text-foreground metric-value">{systemData.temperature}°C</div>
|
||||
<div className="flex items-center mt-2">
|
||||
<Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
|
||||
Normal
|
||||
<Badge variant="outline" className={tempStatus.color}>
|
||||
{tempStatus.status}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-2 metric-label">Max: 78°C • Avg: 48°C</p>
|
||||
<p className="text-xs text-muted-foreground mt-2 metric-label">System temperature</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-card border-border metric-card">
|
||||
<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 & LXC</CardTitle>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">Active VMs</CardTitle>
|
||||
<Server className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-foreground metric-value">15</div>
|
||||
<div className="vm-badges mt-2">
|
||||
<div className="text-2xl font-bold text-foreground metric-value">{vmStats.running}</div>
|
||||
<div className="vm-badges mt-2 flex flex-wrap gap-1">
|
||||
<Badge variant="outline" className="vm-badge bg-green-500/10 text-green-500 border-green-500/20">
|
||||
8 Running VMs
|
||||
</Badge>
|
||||
<Badge variant="outline" className="vm-badge bg-blue-500/10 text-blue-500 border-blue-500/20">
|
||||
3 Running LXC
|
||||
</Badge>
|
||||
<Badge variant="outline" className="vm-badge bg-yellow-500/10 text-yellow-500 border-yellow-500/20">
|
||||
4 Stopped
|
||||
{vmStats.running} Running
|
||||
</Badge>
|
||||
{vmStats.stopped > 0 && (
|
||||
<Badge variant="outline" className="vm-badge bg-yellow-500/10 text-yellow-500 border-yellow-500/20">
|
||||
{vmStats.stopped} Stopped
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-2 metric-label">Total: 12 VMs • 6 LXC configured</p>
|
||||
<p className="text-xs text-muted-foreground mt-2 metric-label">Total: {vmStats.total} VMs configured</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
@@ -175,7 +425,7 @@ export function SystemOverview() {
|
||||
<CardContent className="space-y-3">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground metric-label">Hostname:</span>
|
||||
<span className="text-foreground font-mono metric-value">proxmox-01</span>
|
||||
<span className="text-foreground font-mono metric-value">{systemData.hostname}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground metric-label">Version:</span>
|
||||
@@ -235,11 +485,13 @@ export function SystemOverview() {
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground metric-label">Load Average:</span>
|
||||
<span className="text-foreground font-mono metric-value">1.23, 1.45, 1.67</span>
|
||||
<span className="text-foreground font-mono metric-value">
|
||||
{systemData.load_average.map((avg) => avg.toFixed(2)).join(", ")}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground metric-label">Boot Time:</span>
|
||||
<span className="text-foreground metric-value">2.3s</span>
|
||||
<span className="text-muted-foreground metric-label">Uptime:</span>
|
||||
<span className="text-foreground metric-value">{systemData.uptime}</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
Reference in New Issue
Block a user