Mirrors/ProxMenux
1
0
Fork 0
mirror of https://github.com/MacRimi/ProxMenux.git synced 2025-11-18 03:26:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update AppImage

Browse Source
This commit is contained in:
MacRimi
2025-11-07 13:41:39 +01:00
parent d083e49d0b
commit 6e48bf2a71
3 changed files with 108 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
AppImage/components/hardware.tsx
View File

@@ -163,14 +163,49 @@ const groupAndSortTemperatures = (temperatures: any[]) => {
}
export default function Hardware() {
// Static data - load once without refresh
const {
data: hardwareData,
error,
isLoading,
data: staticHardwareData,
error: staticError,
isLoading: staticLoading,
} = useSWR<HardwareData>("/api/hardware", fetcher, {
refreshInterval: 5000,
revalidateOnFocus: false,
revalidateOnReconnect: false,
refreshInterval: 0, // No auto-refresh for static data
})
// Dynamic data - refresh every 5 seconds for temperatures, fans, power, ups
const {
data: dynamicHardwareData,
error: dynamicError,
isLoading: dynamicLoading,
} = useSWR<HardwareData>("/api/hardware", fetcher, {
refreshInterval: 5000, // 5 second refresh for dynamic data
})
// Merge static and dynamic data, preferring static for CPU/memory/PCI/disks
const hardwareData = staticHardwareData
? {
...dynamicHardwareData,
// Keep static data from initial load
cpu: staticHardwareData.cpu,
motherboard: staticHardwareData.motherboard,
memory_modules: staticHardwareData.memory_modules,
pci_devices: staticHardwareData.pci_devices,
storage_devices: staticHardwareData.storage_devices,
gpus: staticHardwareData.gpus,
// Use dynamic data for these
temperatures: dynamicHardwareData?.temperatures,
fans: dynamicHardwareData?.fans,
power_meter: dynamicHardwareData?.power_meter,
power_supplies: dynamicHardwareData?.power_supplies,
ups: dynamicHardwareData?.ups,
}
: undefined
const error = staticError || dynamicError
const isLoading = staticLoading
useEffect(() => {
if (hardwareData?.storage_devices) {
console.log("[v0] Storage devices data from backend:", hardwareData.storage_devices)

68
AppImage/components/proxmox-dashboard.tsx
View File

@@ -27,6 +27,7 @@ import {
Box,
Cpu,
FileText,
SettingsIcon,
} from "lucide-react"
import Image from "next/image"
import { ThemeToggle } from "./theme-toggle"
@@ -54,7 +55,7 @@ export function ProxmoxDashboard() {
const [systemStatus, setSystemStatus] = useState<SystemStatus>({
status: "healthy",
uptime: "Loading...",
lastUpdate: new Date().toLocaleTimeString(),
lastUpdate: new Date().toLocaleTimeString("en-US", { hour12: false }),
serverName: "Loading...",
nodeId: "Loading...",
})
@@ -99,12 +100,15 @@ export function ProxmoxDashboard() {
status = "warning"
}
const uptimeValue =
data.uptime && typeof data.uptime === "string" && data.uptime.trim() !== "" ? data.uptime : "N/A"
setSystemStatus({
status,
uptime: data.uptime,
lastUpdate: new Date().toLocaleTimeString(),
serverName: data.hostname,
nodeId: data.node_id,
uptime: uptimeValue,
lastUpdate: new Date().toLocaleTimeString("en-US", { hour12: false }),
serverName: data.hostname || "Unknown",
nodeId: data.node_id || "Unknown",
})
setIsServerConnected(true)
} catch (error) {
@@ -122,16 +126,27 @@ export function ProxmoxDashboard() {
serverName: "Server Offline",
nodeId: "Server Offline",
uptime: "N/A",
lastUpdate: new Date().toLocaleTimeString(),
lastUpdate: new Date().toLocaleTimeString("en-US", { hour12: false }),
}))
}
}, [])
useEffect(() => {
// Siempre fetch inicial
fetchSystemData()
const interval = setInterval(fetchSystemData, 10000)
return () => clearInterval(interval)
}, [fetchSystemData])
// Solo hacer polling si estamos en overview
let interval: ReturnType<typeof setInterval> | null = null
if (activeTab === "overview") {
interval = setInterval(fetchSystemData, 10000)
} else {
interval = setInterval(fetchSystemData, 60000)
}
return () => {
if (interval) clearInterval(interval)
}
}, [fetchSystemData, activeTab])
useEffect(() => {
if (
@@ -217,6 +232,8 @@ export function ProxmoxDashboard() {
return "Hardware"
case "logs":
return "System Logs"
case "settings":
return "Settings"
default:
return "Navigation Menu"
}
@@ -300,7 +317,9 @@ export function ProxmoxDashboard() {
<span className="ml-1 capitalize">{systemStatus.status}</span>
</Badge>
<div className="text-sm text-muted-foreground whitespace-nowrap">Uptime: {systemStatus.uptime}</div>
<div className="text-sm text-muted-foreground whitespace-nowrap">
Uptime: {systemStatus.uptime || "N/A"}
</div>
<Button
variant="outline"
@@ -349,7 +368,7 @@ export function ProxmoxDashboard() {
{/* Mobile Server Info */}
<div className="lg:hidden mt-2 flex items-center justify-end text-xs text-muted-foreground">
<span className="whitespace-nowrap">Uptime: {systemStatus.uptime}</span>
<span className="whitespace-nowrap">Uptime: {systemStatus.uptime || "N/A"}</span>
</div>
</div>
</header>
@@ -363,7 +382,7 @@ export function ProxmoxDashboard() {
>
<div className="container mx-auto px-4 md:px-6 pt-4 md:pt-6">
<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-0">
<TabsList className="hidden md:grid w-full grid-cols-6 bg-card border border-border">
<TabsList className="hidden md:grid w-full grid-cols-7 bg-card border border-border">
<TabsTrigger
value="overview"
className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
@@ -400,6 +419,12 @@ export function ProxmoxDashboard() {
>
System Logs
</TabsTrigger>
<TabsTrigger
value="settings"
className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
>
Settings
</TabsTrigger>
</TabsList>
<Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
@@ -508,6 +533,21 @@ export function ProxmoxDashboard() {
<FileText className="h-5 w-5" />
<span>System Logs</span>
</Button>
<Button
variant="ghost"
onClick={() => {
setActiveTab("settings")
setMobileMenuOpen(false)
}}
className={`w-full justify-start gap-3 ${
activeTab === "settings"
? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
: ""
}`}
>
<SettingsIcon className="h-5 w-5" />
<span>Settings</span>
</Button>
</div>
</SheetContent>
</Sheet>
@@ -540,6 +580,10 @@ export function ProxmoxDashboard() {
<TabsContent value="logs" className="space-y-4 md:space-y-6 mt-0">
<SystemLogs key={`logs-${componentKey}`} />
</TabsContent>
<TabsContent value="settings" className="space-y-4 md:space-y-6 mt-0">
<Settings />
</TabsContent>
</Tabs>
<footer className="mt-8 md:mt-12 pt-4 md:pt-6 border-t border-border text-center text-xs md:text-sm text-muted-foreground">

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

@@ -1266,26 +1266,25 @@ export function VirtualMachines() {
)}
</div>
{/* IP Addresses with proper keys */}
{selectedVM?.type === "lxc" && vmDetails?.lxc_ip_info && (
<div className="mt-4 lg:mt-6 pt-4 lg:pt-6 border-t border-border">
<h4 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
IP Addresses
</h4>
<div className="flex flex-wrap gap-2">
{/* Real IPs (green, without "Real" label) */}
{vmDetails.lxc_ip_info.real_ips.map((ip, index) => (
<Badge
key={`ip-real-${selectedVM.vmid}-${ip}-${index}`}
key={`real-ip-${selectedVM.vmid}-${ip.replace(/[.:/]/g, "-")}-${index}`}
variant="outline"
className="bg-green-500/10 text-green-500 border-green-500/20"
>
{ip}
</Badge>
))}
{/* Docker bridge IPs (yellow, with "Bridge" label) */}
{vmDetails.lxc_ip_info.docker_ips.map((ip, index) => (
<Badge
key={`ip-docker-${selectedVM.vmid}-${ip}-${index}`}
key={`docker-ip-${selectedVM.vmid}-${ip.replace(/[.:/]/g, "-")}-${index}`}
variant="outline"
className="bg-yellow-500/10 text-yellow-500 border-yellow-500/20"
>
@@ -1395,7 +1394,7 @@ export function VirtualMachines() {
</div>
)}
{/* GPU Passthrough */}
{/* GPU Passthrough with proper keys */}
{vmDetails.hardware_info.gpu_passthrough &&
vmDetails.hardware_info.gpu_passthrough.length > 0 && (
<div>
@@ -1403,7 +1402,7 @@ export function VirtualMachines() {
<div className="flex flex-wrap gap-2">
{vmDetails.hardware_info.gpu_passthrough.map((gpu, index) => (
<Badge
key={`gpu-${selectedVM.vmid}-${index}-${gpu.substring(0, 20)}`}
key={`gpu-${selectedVM.vmid}-${index}-${gpu.replace(/[^a-zA-Z0-9]/g, "-").substring(0, 30)}`}
variant="outline"
className={
gpu.includes("NVIDIA")
@@ -1418,7 +1417,7 @@ export function VirtualMachines() {
</div>
)}
{/* Other Hardware Devices */}
{/* Hardware Devices with proper keys */}
{vmDetails.hardware_info.devices &&
vmDetails.hardware_info.devices.length > 0 && (
<div>
@@ -1426,7 +1425,7 @@ export function VirtualMachines() {
<div className="flex flex-wrap gap-2">
{vmDetails.hardware_info.devices.map((device, index) => (
<Badge
key={`device-${selectedVM.vmid}-${index}-${device.substring(0, 20)}`}
key={`device-${selectedVM.vmid}-${index}-${device.replace(/[^a-zA-Z0-9]/g, "-").substring(0, 30)}`}
variant="outline"
className="bg-blue-500/10 text-blue-500 border-blue-500/20"
>
@@ -1561,6 +1560,7 @@ export function VirtualMachines() {
<div className="font-medium text-foreground">{vmDetails.config.scsihw}</div>
</div>
)}
{/* Disk Storage with proper keys */}
{Object.keys(vmDetails.config)
.filter((key) => key.match(/^(scsi|sata|ide|virtio)\d+$/))
.map((diskKey) => (
@@ -1589,6 +1589,7 @@ export function VirtualMachines() {
</div>
</div>
)}
{/* Mount Points with proper keys */}
{Object.keys(vmDetails.config)
.filter((key) => key.match(/^mp\d+$/))
.map((mpKey) => (
@@ -1610,6 +1611,7 @@ export function VirtualMachines() {
Network
</h4>
<div className="space-y-3">
{/* Network Interfaces with proper keys */}
{Object.keys(vmDetails.config)
.filter((key) => key.match(/^net\d+$/))
.map((netKey) => (
@@ -1651,7 +1653,7 @@ export function VirtualMachines() {
</div>
</div>
{/* PCI Devices Section */}
{/* PCI Devices with proper keys */}
{Object.keys(vmDetails.config).some((key) => key.match(/^hostpci\d+$/)) && (
<div>
<h4 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
@@ -1674,7 +1676,7 @@ export function VirtualMachines() {
</div>
)}
{/* USB Devices Section */}
{/* USB Devices with proper keys */}
{Object.keys(vmDetails.config).some((key) => key.match(/^usb\d+$/)) && (
<div>
<h4 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
@@ -1697,7 +1699,7 @@ export function VirtualMachines() {
</div>
)}
{/* Serial Devices Section */}
{/* Serial Ports with proper keys */}
{Object.keys(vmDetails.config).some((key) => key.match(/^serial\d+$/)) && (
<div>
<h4 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
@@ -1719,91 +1721,6 @@ export function VirtualMachines() {
</div>
</div>
)}
{/* Options Section */}
<div>
<h4 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
Options
</h4>
<div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
{vmDetails.config.onboot !== undefined && (
<div>
<div className="text-xs text-muted-foreground mb-1">Start on Boot</div>
<Badge
variant="outline"
className={
vmDetails.config.onboot
? "bg-green-500/10 text-green-500 border-green-500/20"
: "bg-red-500/10 text-red-500 border-red-500/20"
}
>
{vmDetails.config.onboot ? "Yes" : "No"}
</Badge>
</div>
)}
{vmDetails.config.ostype && (
<div>
<div className="text-xs text-muted-foreground mb-1">OS Type</div>
<div className="font-medium text-foreground">{vmDetails.config.ostype}</div>
</div>
)}
{vmDetails.config.arch && (
<div>
<div className="text-xs text-muted-foreground mb-1">Architecture</div>
<div className="font-medium text-foreground">{vmDetails.config.arch}</div>
</div>
)}
{vmDetails.config.boot && (
<div>
<div className="text-xs text-muted-foreground mb-1">Boot Order</div>
<div className="font-medium text-foreground">{vmDetails.config.boot}</div>
</div>
)}
{vmDetails.config.features && (
<div className="col-span-2 lg:grid-cols-3">
<div className="text-xs text-muted-foreground mb-1">Features</div>
<div className="font-medium text-foreground text-sm">
{vmDetails.config.features}
</div>
</div>
)}
</div>
</div>
{/* Advanced Section */}
{(vmDetails.config.vmgenid || vmDetails.config.smbios1 || vmDetails.config.meta) && (
<div>
<h4 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
Advanced
</h4>
<div className="space-y-3">
{vmDetails.config.vmgenid && (
<div>
<div className="text-xs text-muted-foreground mb-1">VM Generation ID</div>
<div className="font-medium text-muted-foreground text-sm font-mono">
{vmDetails.config.vmgenid}
</div>
</div>
)}
{vmDetails.config.smbios1 && (
<div>
<div className="text-xs text-muted-foreground mb-1">SMBIOS</div>
<div className="font-medium text-muted-foreground text-sm font-mono break-all">
{vmDetails.config.smbios1}
</div>
</div>
)}
{vmDetails.config.meta && (
<div>
<div className="text-xs text-muted-foreground mb-1">Metadata</div>
<div className="font-medium text-muted-foreground text-sm font-mono">
{vmDetails.config.meta}
</div>
</div>
)}
</div>
</div>
)}
</div>
)}
</CardContent>