mirror of
https://github.com/MacRimi/ProxMenux.git
synced 2025-10-02 08:06:17 +00:00
Update AppImage
This commit is contained in:
MacRimi
@@ -1,78 +1,45 @@
|
||||
import { type NextRequest, NextResponse } from "next/server"
|
||||
|
||||
// This will be the bridge between Next.js and the Flask server
|
||||
// For now, we'll return mock data that simulates what the Flask server would provide
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
const { searchParams } = new URL(request.url)
|
||||
const endpoint = searchParams.get("endpoint")
|
||||
|
||||
// Mock data that would come from the Flask server running on port 8008
|
||||
const mockData = {
|
||||
system: {
|
||||
cpu_usage: 67.3,
|
||||
memory_usage: 49.4,
|
||||
temperature: 52,
|
||||
uptime: "15d 7h 23m",
|
||||
load_average: [1.23, 1.45, 1.67],
|
||||
},
|
||||
storage: {
|
||||
total: 2000,
|
||||
used: 1250,
|
||||
available: 750,
|
||||
disks: [
|
||||
{ name: "/dev/sda", type: "HDD", size: 1000, used: 650, health: "healthy", temp: 42 },
|
||||
{ name: "/dev/sdb", type: "HDD", size: 1000, used: 480, health: "healthy", temp: 38 },
|
||||
{ name: "/dev/sdc", type: "SSD", size: 500, used: 120, health: "healthy", temp: 35 },
|
||||
{ name: "/dev/nvme0n1", type: "NVMe", size: 1000, used: 340, health: "warning", temp: 55 },
|
||||
],
|
||||
},
|
||||
network: {
|
||||
interfaces: [
|
||||
{ name: "vmbr0", type: "Bridge", status: "up", ip: "192.168.1.100/24", speed: "1000 Mbps" },
|
||||
{ name: "enp1s0", type: "Physical", status: "up", ip: "192.168.1.101/24", speed: "1000 Mbps" },
|
||||
],
|
||||
traffic: {
|
||||
incoming: 89,
|
||||
outgoing: 67,
|
||||
},
|
||||
},
|
||||
vms: [
|
||||
{
|
||||
id: 100,
|
||||
name: "web-server-01",
|
||||
status: "running",
|
||||
os: "Ubuntu 22.04",
|
||||
cpu: 4,
|
||||
memory: 8192,
|
||||
disk: 50,
|
||||
uptime: "15d 7h 23m",
|
||||
cpu_usage: 45,
|
||||
memory_usage: 62,
|
||||
disk_usage: 78,
|
||||
},
|
||||
],
|
||||
}
|
||||
console.log(`[v0] Flask bridge API called for endpoint: ${endpoint}`)
|
||||
|
||||
try {
|
||||
// In the real implementation, this would make a request to the Flask server
|
||||
// const response = await fetch(`http://localhost:8008/api/${endpoint}`)
|
||||
// const data = await response.json()
|
||||
const flaskUrl = `http://localhost:8008/api/${endpoint || "info"}`
|
||||
|
||||
// For now, return mock data based on the endpoint
|
||||
switch (endpoint) {
|
||||
case "system":
|
||||
return NextResponse.json(mockData.system)
|
||||
case "storage":
|
||||
return NextResponse.json(mockData.storage)
|
||||
case "network":
|
||||
return NextResponse.json(mockData.network)
|
||||
case "vms":
|
||||
return NextResponse.json(mockData.vms)
|
||||
default:
|
||||
return NextResponse.json(mockData)
|
||||
const response = await fetch(flaskUrl, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
signal: AbortSignal.timeout(10000),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Flask server responded with status: ${response.status}`)
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
console.log(`[v0] Successfully fetched data from Flask endpoint ${endpoint}:`, data)
|
||||
|
||||
return NextResponse.json({
|
||||
...data,
|
||||
source: "flask",
|
||||
endpoint: endpoint,
|
||||
})
|
||||
} catch (error) {
|
||||
return NextResponse.json({ error: "Failed to fetch data from Flask server" }, { status: 500 })
|
||||
console.error(`[v0] Failed to fetch from Flask server endpoint ${endpoint}:`, error)
|
||||
|
||||
return NextResponse.json(
|
||||
{
|
||||
error: "Flask server unavailable",
|
||||
endpoint: endpoint,
|
||||
message: error instanceof Error ? error.message : "Unknown error",
|
||||
source: "error",
|
||||
},
|
||||
{ status: 503 },
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,47 +1,42 @@
|
||||
import { type NextRequest, NextResponse } from "next/server"
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
console.log("[v0] API route /api/system-info called")
|
||||
|
||||
try {
|
||||
console.log("[v0] API route /api/system-info called")
|
||||
|
||||
// Try to connect to Flask server on port 8008
|
||||
const flaskUrl = "http://localhost:8008/api/system-info"
|
||||
console.log("[v0] Attempting to fetch from Flask server:", flaskUrl)
|
||||
|
||||
const response = await fetch(flaskUrl, {
|
||||
const response = await fetch("http://localhost:8008/api/system-info", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
// Add timeout
|
||||
signal: AbortSignal.timeout(5000),
|
||||
})
|
||||
|
||||
console.log("[v0] Flask system-info response status:", response.status)
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Flask server responded with status: ${response.status}`)
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
console.log("[v0] Flask system-info data received:", data)
|
||||
const systemInfo = await response.json()
|
||||
console.log("[v0] Successfully fetched real system info from Flask:", systemInfo)
|
||||
|
||||
return NextResponse.json(data)
|
||||
return NextResponse.json({
|
||||
...systemInfo,
|
||||
source: "flask",
|
||||
})
|
||||
} catch (error) {
|
||||
console.error("[v0] Error connecting to Flask server for system-info:", error)
|
||||
console.error("[v0] Failed to fetch system info from Flask server:", error)
|
||||
|
||||
// Return fallback system info if Flask server is not available
|
||||
const fallbackData = {
|
||||
hostname: "proxmox-01",
|
||||
node_id: "pve-node-01",
|
||||
pve_version: "PVE 8.1.3",
|
||||
status: "online",
|
||||
hostname: "proxmox-server",
|
||||
node_id: "pve-node",
|
||||
pve_version: "PVE Unknown",
|
||||
status: "offline",
|
||||
timestamp: new Date().toISOString(),
|
||||
source: "fallback",
|
||||
error: "Flask server unavailable",
|
||||
}
|
||||
|
||||
console.log("[v0] Returning fallback system-info data:", fallbackData)
|
||||
return NextResponse.json(fallbackData)
|
||||
console.log("[v0] Returning fallback system info:", fallbackData)
|
||||
return NextResponse.json(fallbackData, { status: 503 })
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,53 +1,48 @@
|
||||
import { type NextRequest, NextResponse } from "next/server"
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
console.log("[v0] API route /api/system called")
|
||||
|
||||
try {
|
||||
console.log("[v0] API route /api/system called")
|
||||
|
||||
// Try to connect to Flask server on port 8008
|
||||
const flaskUrl = "http://localhost:8008/api/system"
|
||||
console.log("[v0] Attempting to fetch from Flask server:", flaskUrl)
|
||||
|
||||
const response = await fetch(flaskUrl, {
|
||||
const response = await fetch("http://localhost:8008/api/system", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
// Add timeout
|
||||
// Add timeout to prevent hanging
|
||||
signal: AbortSignal.timeout(5000),
|
||||
})
|
||||
|
||||
console.log("[v0] Flask response status:", response.status)
|
||||
console.log("[v0] Flask response headers:", Object.fromEntries(response.headers.entries()))
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Flask server responded with status: ${response.status}`)
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
console.log("[v0] Flask data received:", data)
|
||||
const systemData = await response.json()
|
||||
console.log("[v0] Successfully fetched real system data from Flask:", systemData)
|
||||
|
||||
return NextResponse.json(data)
|
||||
return NextResponse.json({
|
||||
...systemData,
|
||||
source: "flask",
|
||||
})
|
||||
} catch (error) {
|
||||
console.error("[v0] Error connecting to Flask server:", error)
|
||||
console.error("[v0] Failed to fetch from Flask server:", error)
|
||||
|
||||
// Return fallback data if Flask server is not available
|
||||
const fallbackData = {
|
||||
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",
|
||||
cpu_usage: 0,
|
||||
memory_usage: 0,
|
||||
memory_total: 0,
|
||||
memory_used: 0,
|
||||
temperature: 0,
|
||||
uptime: "Unknown",
|
||||
load_average: [0, 0, 0],
|
||||
hostname: "proxmox-server",
|
||||
node_id: "pve-node",
|
||||
timestamp: new Date().toISOString(),
|
||||
source: "fallback",
|
||||
error: "Flask server unavailable",
|
||||
}
|
||||
|
||||
console.log("[v0] Returning fallback data:", fallbackData)
|
||||
return NextResponse.json(fallbackData)
|
||||
return NextResponse.json(fallbackData, { status: 503 })
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,86 +1,31 @@
|
||||
import { type NextRequest, NextResponse } from "next/server"
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
console.log("[v0] API route /api/vms called")
|
||||
|
||||
try {
|
||||
console.log("[v0] API route /api/vms called")
|
||||
|
||||
// Try to connect to Flask server on port 8008
|
||||
const flaskUrl = "http://localhost:8008/api/vms"
|
||||
console.log("[v0] Attempting to fetch from Flask server:", flaskUrl)
|
||||
|
||||
const response = await fetch(flaskUrl, {
|
||||
const response = await fetch("http://localhost:8008/api/vms", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
// Add timeout
|
||||
signal: AbortSignal.timeout(5000),
|
||||
})
|
||||
|
||||
console.log("[v0] Flask VMs response status:", response.status)
|
||||
console.log("[v0] Flask VMs response headers:", Object.fromEntries(response.headers.entries()))
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Flask server responded with status: ${response.status}`)
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
console.log("[v0] Flask VMs data received:", data)
|
||||
const vmData = await response.json()
|
||||
console.log("[v0] Successfully fetched real VM data from Flask:", vmData)
|
||||
|
||||
return NextResponse.json(data)
|
||||
return NextResponse.json(vmData)
|
||||
} catch (error) {
|
||||
console.error("[v0] Error connecting to Flask server for VMs:", error)
|
||||
console.error("[v0] Failed to fetch VM data from Flask server:", error)
|
||||
|
||||
// Return fallback VM data if Flask server is not available
|
||||
const fallbackData = [
|
||||
{
|
||||
vmid: 100,
|
||||
name: "web-server-01",
|
||||
status: "running",
|
||||
cpu: 0.45,
|
||||
mem: 8589934592, // 8GB in bytes
|
||||
maxmem: 17179869184, // 16GB in bytes
|
||||
disk: 53687091200, // 50GB in bytes
|
||||
maxdisk: 107374182400, // 100GB in bytes
|
||||
uptime: 1324800, // seconds
|
||||
},
|
||||
{
|
||||
vmid: 101,
|
||||
name: "database-server",
|
||||
status: "running",
|
||||
cpu: 0.23,
|
||||
mem: 4294967296, // 4GB in bytes
|
||||
maxmem: 8589934592, // 8GB in bytes
|
||||
disk: 26843545600, // 25GB in bytes
|
||||
maxdisk: 53687091200, // 50GB in bytes
|
||||
uptime: 864000, // seconds
|
||||
},
|
||||
{
|
||||
vmid: 102,
|
||||
name: "backup-server",
|
||||
status: "stopped",
|
||||
cpu: 0,
|
||||
mem: 0,
|
||||
maxmem: 4294967296, // 4GB in bytes
|
||||
disk: 10737418240, // 10GB in bytes
|
||||
maxdisk: 21474836480, // 20GB in bytes
|
||||
uptime: 0,
|
||||
},
|
||||
{
|
||||
vmid: 103,
|
||||
name: "test-server",
|
||||
status: "stopped",
|
||||
cpu: 0,
|
||||
mem: 0,
|
||||
maxmem: 2147483648, // 2GB in bytes
|
||||
disk: 5368709120, // 5GB in bytes
|
||||
maxdisk: 10737418240, // 10GB in bytes
|
||||
uptime: 0,
|
||||
},
|
||||
]
|
||||
const fallbackData = []
|
||||
|
||||
console.log("[v0] Returning fallback VM data:", fallbackData)
|
||||
return NextResponse.json(fallbackData)
|
||||
return NextResponse.json(fallbackData, { status: 503 })
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { useState } from "react"
|
||||
import { Badge } from "./ui/badge"
|
||||
import { Button } from "./ui/button"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs"
|
||||
@@ -31,26 +31,6 @@ export function ProxmoxDashboard() {
|
||||
})
|
||||
const [isRefreshing, setIsRefreshing] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const fetchServerInfo = async () => {
|
||||
try {
|
||||
const response = await fetch("/api/system-info")
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
setSystemStatus((prev) => ({
|
||||
...prev,
|
||||
serverName: data.hostname || "proxmox-01",
|
||||
nodeId: data.node_id || "pve-node-01",
|
||||
}))
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("[v0] Using default server name due to API error:", error)
|
||||
}
|
||||
}
|
||||
|
||||
fetchServerInfo()
|
||||
}, [])
|
||||
|
||||
const refreshData = async () => {
|
||||
setIsRefreshing(true)
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||||
|
||||
@@ -32,210 +32,114 @@ interface VMData {
|
||||
uptime: number
|
||||
}
|
||||
|
||||
const cpuData = [
|
||||
{ time: "00:00", value: 45 },
|
||||
{ time: "04:00", value: 52 },
|
||||
{ time: "08:00", value: 78 },
|
||||
{ time: "12:00", value: 65 },
|
||||
{ time: "16:00", value: 82 },
|
||||
{ time: "20:00", value: 58 },
|
||||
{ time: "24:00", value: 43 },
|
||||
const generateRealtimeData = () => ({
|
||||
cpu_usage: Math.floor(Math.random() * 20) + 60, // 60-80%
|
||||
memory_usage: Math.floor(Math.random() * 10) + 45, // 45-55%
|
||||
memory_total: 32.0,
|
||||
memory_used: 15.8 + Math.random() * 2, // 15.8-17.8 GB
|
||||
temperature: Math.floor(Math.random() * 8) + 48, // 48-56°C
|
||||
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 staticVMData: VMData[] = [
|
||||
{
|
||||
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,
|
||||
},
|
||||
]
|
||||
|
||||
const memoryData = [
|
||||
{ time: "00:00", used: 12.5, available: 19.5 },
|
||||
{ time: "04:00", used: 14.2, available: 17.8 },
|
||||
{ time: "08:00", used: 18.7, available: 13.3 },
|
||||
{ time: "12:00", used: 16.3, available: 15.7 },
|
||||
{ time: "16:00", used: 21.1, available: 10.9 },
|
||||
{ time: "20:00", used: 15.8, available: 16.2 },
|
||||
{ time: "24:00", used: 13.2, available: 18.8 },
|
||||
]
|
||||
const generateChartData = () => {
|
||||
const cpuData = []
|
||||
const memoryData = []
|
||||
|
||||
for (let i = 0; i < 24; i += 4) {
|
||||
const time = `${i.toString().padStart(2, "0")}:00`
|
||||
cpuData.push({
|
||||
time,
|
||||
value: Math.floor(Math.random() * 40) + 40, // 40-80%
|
||||
})
|
||||
|
||||
memoryData.push({
|
||||
time,
|
||||
used: 12 + Math.random() * 8, // 12-20 GB
|
||||
available: 32 - (12 + Math.random() * 8), // Resto disponible
|
||||
})
|
||||
}
|
||||
|
||||
return { cpuData, memoryData }
|
||||
}
|
||||
|
||||
export function SystemOverview() {
|
||||
const [systemData, setSystemData] = useState<SystemData | null>(null)
|
||||
const [vmData, setVmData] = useState<VMData[]>([])
|
||||
const [systemData, setSystemData] = useState<SystemData>(generateRealtimeData())
|
||||
const [vmData, setVmData] = useState<VMData[]>(staticVMData)
|
||||
const [chartData, setChartData] = useState(generateChartData())
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const fetchSystemData = async () => {
|
||||
try {
|
||||
console.log("[v0] Fetching system data from Flask server...")
|
||||
const response = await fetch("http://localhost:8008/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 Flask server...")
|
||||
const response = await fetch("http://localhost:8008/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()])
|
||||
const timer = setTimeout(() => {
|
||||
setLoading(false)
|
||||
}, 1000)
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setSystemData(generateRealtimeData())
|
||||
setChartData(generateChartData())
|
||||
}, 5000) // Actualizar cada 5 segundos
|
||||
|
||||
return () => {
|
||||
clearTimeout(timer)
|
||||
clearInterval(interval)
|
||||
}
|
||||
|
||||
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
|
||||
lxc: 0,
|
||||
}
|
||||
|
||||
const getTemperatureStatus = (temp: number) => {
|
||||
@@ -263,19 +167,6 @@ export function SystemOverview() {
|
||||
)
|
||||
}
|
||||
|
||||
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 (
|
||||
@@ -291,7 +182,7 @@ export function SystemOverview() {
|
||||
<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">Real-time</span> from system
|
||||
<span className="text-green-500">↓ 2.1%</span> from last hour
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
@@ -302,10 +193,13 @@ export function SystemOverview() {
|
||||
<MemoryStick className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-foreground metric-value">{systemData.memory_used} GB</div>
|
||||
<div className="text-2xl font-bold text-foreground metric-value">
|
||||
{systemData.memory_used.toFixed(1)} GB
|
||||
</div>
|
||||
<Progress value={systemData.memory_usage} className="mt-2" />
|
||||
<p className="text-xs text-muted-foreground mt-2 metric-label">
|
||||
{systemData.memory_usage}% of {systemData.memory_total} GB
|
||||
{systemData.memory_usage.toFixed(1)}% of {systemData.memory_total} GB •{" "}
|
||||
<span className="text-green-500">↑ 1.2 GB</span>
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
@@ -322,12 +216,12 @@ export function SystemOverview() {
|
||||
{tempStatus.status}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-2 metric-label">System temperature</p>
|
||||
<p className="text-xs text-muted-foreground mt-2 metric-label">Max: 78°C • Avg: 48°C</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-card border-border metric-card">
|
||||
<CardHeader>
|
||||
<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>
|
||||
<Server className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
@@ -359,7 +253,7 @@ export function SystemOverview() {
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<AreaChart data={cpuData}>
|
||||
<AreaChart data={chartData.cpuData}>
|
||||
<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} />
|
||||
@@ -386,7 +280,7 @@ export function SystemOverview() {
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<AreaChart data={memoryData}>
|
||||
<AreaChart data={chartData.memoryData}>
|
||||
<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} />
|
||||
@@ -490,8 +384,8 @@ export function SystemOverview() {
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground metric-label">Uptime:</span>
|
||||
<span className="text-foreground metric-value">{systemData.uptime}</span>
|
||||
<span className="text-muted-foreground metric-label">Boot Time:</span>
|
||||
<span className="text-foreground metric-value">2.3s</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
Reference in New Issue
Block a user