mirror of
https://github.com/MacRimi/ProxMenux.git
synced 2025-10-02 16:16:19 +00:00
Update AppImage
This commit is contained in:
MacRimi
@@ -9,7 +9,7 @@ import { StorageMetrics } from "./storage-metrics"
|
||||
import { NetworkMetrics } from "./network-metrics"
|
||||
import { VirtualMachines } from "./virtual-machines"
|
||||
import { SystemLogs } from "./system-logs"
|
||||
import { RefreshCw, AlertTriangle, CheckCircle, XCircle, Languages, Server } from "lucide-react"
|
||||
import { RefreshCw, AlertTriangle, CheckCircle, XCircle, Server } from "lucide-react"
|
||||
import Image from "next/image"
|
||||
import { ThemeToggle } from "./theme-toggle"
|
||||
|
||||
@@ -30,12 +30,11 @@ export function ProxmoxDashboard() {
|
||||
nodeId: "pve-node-01",
|
||||
})
|
||||
const [isRefreshing, setIsRefreshing] = useState(false)
|
||||
const [isTranslating, setIsTranslating] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const fetchServerInfo = async () => {
|
||||
try {
|
||||
const response = await fetch("/api/flask/system-info")
|
||||
const response = await fetch("/api/system-info")
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
setSystemStatus((prev) => ({
|
||||
@@ -62,34 +61,6 @@ export function ProxmoxDashboard() {
|
||||
setIsRefreshing(false)
|
||||
}
|
||||
|
||||
const translatePage = async () => {
|
||||
setIsTranslating(true)
|
||||
try {
|
||||
if ("translate" in document.documentElement.dataset) {
|
||||
const currentLang = document.documentElement.dataset.translate
|
||||
document.documentElement.dataset.translate = currentLang === "yes" ? "no" : "yes"
|
||||
} else {
|
||||
const googleTranslateScript = document.createElement("script")
|
||||
googleTranslateScript.src = "https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
|
||||
document.head.appendChild(googleTranslateScript)
|
||||
|
||||
window.googleTranslateElementInit = () => {
|
||||
new window.google.translate.TranslateElement(
|
||||
{
|
||||
pageLanguage: "en",
|
||||
includedLanguages: "es,en,fr,de,it,pt,ru,zh,ja,ko",
|
||||
layout: window.google.translate.TranslateElement.InlineLayout.SIMPLE,
|
||||
},
|
||||
"google_translate_element",
|
||||
)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Translation error:", error)
|
||||
}
|
||||
setIsTranslating(false)
|
||||
}
|
||||
|
||||
const getStatusIcon = () => {
|
||||
switch (systemStatus.status) {
|
||||
case "healthy":
|
||||
@@ -114,7 +85,7 @@ export function ProxmoxDashboard() {
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<header className="border-b border-border header-bg sticky top-0 z-50">
|
||||
<header className="border-b border-border bg-background sticky top-0 z-50">
|
||||
<div className="container mx-auto px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-4">
|
||||
@@ -164,21 +135,9 @@ export function ProxmoxDashboard() {
|
||||
</Button>
|
||||
|
||||
<ThemeToggle />
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-border/50 bg-transparent hover:bg-secondary"
|
||||
onClick={translatePage}
|
||||
disabled={isTranslating}
|
||||
>
|
||||
<Languages className={`h-4 w-4 mr-2 ${isTranslating ? "animate-pulse" : ""}`} />
|
||||
Translate
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="google_translate_element" className="hidden"></div>
|
||||
</header>
|
||||
|
||||
<div className="container mx-auto px-6 py-6">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,19 +1,36 @@
|
||||
"use client"
|
||||
import { Moon, Sun } from "lucide-react"
|
||||
import { useTheme } from "next-themes"
|
||||
import { useEffect, useState } from "react"
|
||||
|
||||
import { Button } from "./ui/button"
|
||||
|
||||
export function ThemeToggle() {
|
||||
const { theme, setTheme } = useTheme()
|
||||
const [mounted, setMounted] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true)
|
||||
}, [])
|
||||
|
||||
const handleThemeToggle = () => {
|
||||
console.log("[v0] Current theme:", theme)
|
||||
const newTheme = theme === "light" ? "dark" : "light"
|
||||
console.log("[v0] Switching to theme:", newTheme)
|
||||
setTheme(newTheme)
|
||||
}
|
||||
|
||||
if (!mounted) {
|
||||
return (
|
||||
<Button variant="outline" size="sm" className="border-border bg-transparent w-9 h-9">
|
||||
<Sun className="h-4 w-4" />
|
||||
<span className="sr-only">Toggle theme</span>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setTheme(theme === "light" ? "dark" : "light")}
|
||||
className="border-border bg-transparent"
|
||||
>
|
||||
<Button variant="outline" size="sm" onClick={handleThemeToggle} className="border-border bg-transparent w-9 h-9">
|
||||
<Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
||||
<Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
||||
<span className="sr-only">Toggle theme</span>
|
||||
|
||||
Reference in New Issue
Block a user