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

Update AppImage

Browse Source
This commit is contained in:
MacRimi
2025-09-28 23:05:59 +02:00
parent 38569ff7fc
commit a8e7119b4a
84 changed files with 6024 additions and 2204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
AppImage/app/api/flask/route.ts
View File

@@ -1,78 +0,0 @@
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,
},
],
}
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()
// 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)
}
} catch (error) {
return NextResponse.json({ error: "Failed to fetch data from Flask server" }, { status: 500 })
}
}

141
AppImage/app/globals.css
View File

@@ -4,7 +4,6 @@
@custom-variant dark (&:is(.dark *));
:root {
/* Proxmox light theme colors */
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
@@ -32,10 +31,11 @@
--radius: 0.625rem;
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--header-bg: oklch(1 0 0);
--header-foreground: oklch(0.145 0 0);
}
.dark {
/* Proxmox dark theme with proper gray background (#2b2f36) */
--background: oklch(0.205 0.005 240); /* Proxmox dark gray #2b2f36 */
--foreground: oklch(0.985 0 0);
--card: oklch(0.235 0.005 240); /* Slightly lighter gray for cards #363c45 */
@@ -55,12 +55,15 @@
--border: oklch(0.335 0.005 240); /* More visible borders */
--input: oklch(0.285 0.005 240);
--ring: oklch(0.439 0 0);
/* Updated chart colors to be more vibrant and visible in dark mode */
--chart-1: oklch(0.65 0.2 220); /* Bright Blue */
--chart-2: oklch(0.65 0.2 140); /* Bright Green */
--chart-3: oklch(0.7 0.2 50); /* Bright Yellow */
--chart-4: oklch(0.65 0.2 300); /* Bright Purple */
--chart-5: oklch(0.65 0.2 20); /* Bright Orange */
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
@@ -69,12 +72,13 @@
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(0.285 0.005 240);
--sidebar-ring: oklch(0.439 0 0);
/* Header is black only in dark mode */
--header-bg: oklch(0 0 0);
--header-foreground: oklch(1 0 0);
}
@theme inline {
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
@@ -111,9 +115,6 @@
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
/* Custom header colors */
--color-header-bg: var(--header-bg);
--color-header-foreground: var(--header-foreground);
}
@layer base {
@@ -123,80 +124,78 @@
body {
@apply bg-background text-foreground;
}
}
.header-bg {
background-color: var(--header-bg);
color: var(--header-foreground);
backdrop-filter: none; /* Remove any blur effects */
}
/* Custom scrollbar with better contrast */
::-webkit-scrollbar {
width: 6px;
}
/* Header styling that adapts to theme */
.header-bg {
background-color: var(--header-bg);
color: var(--header-foreground);
}
::-webkit-scrollbar-track {
background: var(--background);
}
/* Custom scrollbar with better contrast */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-thumb {
background: var(--muted);
border-radius: 3px;
}
::-webkit-scrollbar-track {
background: var(--background);
}
::-webkit-scrollbar-thumb:hover {
background: var(--muted-foreground);
}
::-webkit-scrollbar-thumb {
background: var(--muted);
border-radius: 3px;
}
/* Better contrast for dark mode content */
.dark .metric-card {
background: var(--card);
border: 1px solid var(--border);
}
::-webkit-scrollbar-thumb:hover {
background: var(--muted-foreground);
}
.dark .metric-value {
color: var(--foreground);
font-weight: 600;
}
/* Better contrast for dark mode content */
.dark .metric-card {
background: var(--card);
border: 1px solid var(--border);
}
.dark .metric-label {
color: var(--muted-foreground);
}
.dark .metric-value {
color: var(--foreground);
font-weight: 600;
}
/* Fix chart axis visibility in dark mode */
.dark .recharts-cartesian-axis-tick-value {
fill: var(--muted-foreground) !important;
}
.dark .metric-label {
color: var(--muted-foreground);
}
.dark .recharts-text {
fill: var(--muted-foreground) !important;
}
/* Fix chart axis visibility in dark mode */
.dark .recharts-cartesian-axis-tick-value {
fill: var(--muted-foreground) !important;
}
/* Improve server info layout in header - clean design without transparency */
.server-info {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem 0.75rem;
border-radius: 0.375rem;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.dark .recharts-text {
fill: var(--muted-foreground) !important;
}
.dark .server-info {
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Improve server info layout in header - clean design without transparency */
.server-info {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem 0.75rem;
border-radius: 0.375rem;
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Better spacing for VM/LXC badges */
.vm-badges {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
align-items: center;
}
.dark .server-info {
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Better spacing for VM/LXC badges */
.vm-badges {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
align-items: center;
}
.vm-badge {
font-size: 0.75rem;
padding: 0.125rem 0.5rem;
white-space: nowrap;
.vm-badge {
font-size: 0.75rem;
padding: 0.125rem 0.5rem;
white-space: nowrap;
}
}

21
AppImage/app/layout.tsx
View File

@@ -9,21 +9,8 @@ import "./globals.css"
export const metadata: Metadata = {
title: "ProxMenux Monitor",
description: "Proxmox System Dashboard and Monitor",
description: "Proxmox System Dashboard",
generator: "v0.app",
manifest: "/manifest.json",
icons: {
icon: [
{ url: "/favicon-16x16.png", sizes: "16x16", type: "image/png" },
{ url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
],
apple: [{ url: "/apple-touch-icon.png", sizes: "180x180", type: "image/png" }],
},
viewport: "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no",
themeColor: [
{ media: "(prefers-color-scheme: light)", color: "#ffffff" },
{ media: "(prefers-color-scheme: dark)", color: "#1a1a1a" },
],
}
export default function RootLayout({
@@ -33,13 +20,13 @@ export default function RootLayout({
}>) {
return (
<html lang="en" suppressHydrationWarning>
<body className={`${GeistSans.variable} ${GeistMono.variable} antialiased`}>
<Suspense fallback={<div>Loading...</div>}>
<body className={`font-sans ${GeistSans.variable} ${GeistMono.variable}`}>
<Suspense fallback={null}>
<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
{children}
</ThemeProvider>
<Analytics />
</Suspense>
<Analytics />
</body>
</html>
)

4
AppImage/app/page.tsx
View File

@@ -1,6 +1,6 @@
import { ProxmoxDashboard } from "../components/proxmox-dashboard"
import { ProxmoxDashboard } from "../AppImage/components/proxmox-dashboard"
export default function Home() {
export default function Page() {
return (
<main className="min-h-screen bg-background">
<ProxmoxDashboard />