mirror of
https://github.com/MacRimi/ProxMenux.git
synced 2025-10-02 08:06:17 +00:00
Create AppImage
This commit is contained in:
MacRimi
59
AppImage/README.md
Normal file
59
AppImage/README.md
Normal file
@@ -0,0 +1,59 @@
|
||||
# ProxMenux Monitor
|
||||
|
||||
A modern, responsive dashboard for monitoring Proxmox VE systems built with Next.js and React.
|
||||
|
||||
## Features
|
||||
|
||||
- **System Overview**: Real-time monitoring of CPU, memory, temperature, and active VMs/LXC containers
|
||||
- **Storage Management**: Visual representation of storage distribution and disk performance metrics
|
||||
- **Network Monitoring**: Network interface statistics and performance graphs
|
||||
- **Virtual Machines**: Comprehensive view of VMs and LXC containers with resource usage
|
||||
- **System Logs**: Real-time system log monitoring and filtering
|
||||
- **Dark/Light Theme**: Toggle between themes with Proxmox-inspired design
|
||||
- **Responsive Design**: Works seamlessly on desktop and mobile devices
|
||||
|
||||
## Technology Stack
|
||||
|
||||
- **Frontend**: Next.js 15, React 19, TypeScript
|
||||
- **Styling**: Tailwind CSS with custom Proxmox-inspired theme
|
||||
- **Charts**: Recharts for data visualization
|
||||
- **UI Components**: Radix UI primitives with shadcn/ui
|
||||
- **Backend**: Flask server for system data collection
|
||||
- **Packaging**: AppImage for easy distribution
|
||||
|
||||
## Development
|
||||
|
||||
\`\`\`bash
|
||||
# Install dependencies
|
||||
npm install
|
||||
|
||||
# Start development server
|
||||
npm run dev
|
||||
|
||||
# Build for production
|
||||
npm run build
|
||||
\`\`\`
|
||||
|
||||
## Building AppImage
|
||||
|
||||
\`\`\`bash
|
||||
# Make build script executable
|
||||
chmod +x scripts/build_appimage.sh
|
||||
|
||||
# Build AppImage
|
||||
./scripts/build_appimage.sh
|
||||
\`\`\`
|
||||
|
||||
## Translation Support
|
||||
|
||||
The project includes a translation system for multi-language support:
|
||||
|
||||
\`\`\`bash
|
||||
# Build translation AppImage
|
||||
chmod +x scripts/build_translate_appimage.sh
|
||||
./scripts/build_translate_appimage.sh
|
||||
\`\`\`
|
||||
|
||||
## License
|
||||
|
||||
MIT License - see LICENSE file for details.
|
||||
78
AppImage/app/api/flask/route.ts
Normal file
78
AppImage/app/api/flask/route.ts
Normal file
@@ -0,0 +1,78 @@
|
||||
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 })
|
||||
}
|
||||
}
|
||||
202
AppImage/app/globals.css
Normal file
202
AppImage/app/globals.css
Normal file
@@ -0,0 +1,202 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
|
||||
@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);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: oklch(0.205 0 0);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--destructive-foreground: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
--radius: 0.625rem;
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-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 */
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.235 0.005 240);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.985 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.285 0.005 240); /* Better contrast for secondary elements */
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.285 0.005 240);
|
||||
--muted-foreground: oklch(0.708 0 0); /* Better contrast for muted text */
|
||||
--accent: oklch(0.285 0.005 240);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.396 0.141 25.723);
|
||||
--destructive-foreground: oklch(0.637 0.237 25.331);
|
||||
--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 */
|
||||
--sidebar: oklch(0.205 0 0);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.285 0.005 240);
|
||||
--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 {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--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 {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
/* Header styling that adapts to theme */
|
||||
.header-bg {
|
||||
background-color: var(--header-bg);
|
||||
color: var(--header-foreground);
|
||||
}
|
||||
|
||||
/* Custom scrollbar with better contrast */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--muted);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--muted-foreground);
|
||||
}
|
||||
|
||||
/* Better contrast for dark mode content */
|
||||
.dark .metric-card {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.dark .metric-value {
|
||||
color: var(--foreground);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dark .metric-label {
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
/* Fix chart axis visibility in dark mode */
|
||||
.dark .recharts-cartesian-axis-tick-value {
|
||||
fill: var(--muted-foreground) !important;
|
||||
}
|
||||
|
||||
.dark .recharts-text {
|
||||
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 .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;
|
||||
}
|
||||
46
AppImage/app/layout.tsx
Normal file
46
AppImage/app/layout.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import type React from "react"
|
||||
import type { Metadata } from "next"
|
||||
import { GeistSans } from "geist/font/sans"
|
||||
import { GeistMono } from "geist/font/mono"
|
||||
import { Analytics } from "@vercel/analytics/next"
|
||||
import { ThemeProvider } from "@/components/theme-provider"
|
||||
import { Suspense } from "react"
|
||||
import "./globals.css"
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "ProxMenux Monitor",
|
||||
description: "Proxmox System Dashboard and Monitor",
|
||||
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({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<body className={`${GeistSans.variable} ${GeistMono.variable} antialiased`}>
|
||||
<Suspense fallback={<div>Loading...</div>}>
|
||||
<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
<Analytics />
|
||||
</Suspense>
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
9
AppImage/app/page.tsx
Normal file
9
AppImage/app/page.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import { ProxmoxDashboard } from "@/components/proxmox-dashboard"
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main className="min-h-screen bg-background">
|
||||
<ProxmoxDashboard />
|
||||
</main>
|
||||
)
|
||||
}
|
||||
265
AppImage/components/network-metrics.tsx
Normal file
265
AppImage/components/network-metrics.tsx
Normal file
@@ -0,0 +1,265 @@
|
||||
"use client"
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from "recharts"
|
||||
import { Wifi, Globe, Shield, Activity, Network, Router } from "lucide-react"
|
||||
|
||||
const networkTraffic = [
|
||||
{ time: "00:00", incoming: 45, outgoing: 32 },
|
||||
{ time: "04:00", incoming: 52, outgoing: 28 },
|
||||
{ time: "08:00", incoming: 78, outgoing: 65 },
|
||||
{ time: "12:00", incoming: 65, outgoing: 45 },
|
||||
{ time: "16:00", incoming: 82, outgoing: 58 },
|
||||
{ time: "20:00", incoming: 58, outgoing: 42 },
|
||||
{ time: "24:00", incoming: 43, outgoing: 35 },
|
||||
]
|
||||
|
||||
const connectionData = [
|
||||
{ time: "00:00", connections: 1250 },
|
||||
{ time: "04:00", connections: 980 },
|
||||
{ time: "08:00", connections: 1850 },
|
||||
{ time: "12:00", connections: 1650 },
|
||||
{ time: "16:00", connections: 2100 },
|
||||
{ time: "20:00", connections: 1580 },
|
||||
{ time: "24:00", connections: 1320 },
|
||||
]
|
||||
|
||||
export function NetworkMetrics() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Network Overview Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">Network Traffic</CardTitle>
|
||||
<Activity className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-foreground">156 MB/s</div>
|
||||
<div className="flex items-center space-x-2 mt-2">
|
||||
<span className="text-xs text-green-500">↓ 89 MB/s</span>
|
||||
<span className="text-xs text-blue-500">↑ 67 MB/s</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-2">Peak: 245 MB/s at 16:30</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">Active Connections</CardTitle>
|
||||
<Network className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-foreground">1,847</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>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-2">
|
||||
<span className="text-green-500">↑ 12%</span> from last hour
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">Firewall Status</CardTitle>
|
||||
<Shield className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-foreground">Active</div>
|
||||
<div className="flex items-center mt-2">
|
||||
<Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
|
||||
Protected
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-2">247 blocked attempts today</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">Latency</CardTitle>
|
||||
<Globe className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-foreground">12ms</div>
|
||||
<div className="flex items-center mt-2">
|
||||
<Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
|
||||
Excellent
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-2">Avg response time</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Network Charts */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-foreground flex items-center">
|
||||
<Activity className="h-5 w-5 mr-2" />
|
||||
Network Traffic (24h)
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<AreaChart data={networkTraffic}>
|
||||
<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} />
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: "hsl(var(--card))",
|
||||
border: "1px solid hsl(var(--border))",
|
||||
borderRadius: "8px",
|
||||
color: "hsl(var(--foreground))",
|
||||
}}
|
||||
formatter={(value, name) => [`${value} MB/s`, name === "incoming" ? "Incoming" : "Outgoing"]}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="incoming"
|
||||
stackId="1"
|
||||
stroke="#10b981"
|
||||
fill="#10b981"
|
||||
fillOpacity={0.6}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="outgoing"
|
||||
stackId="1"
|
||||
stroke="#3b82f6"
|
||||
fill="#3b82f6"
|
||||
fillOpacity={0.6}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-foreground flex items-center">
|
||||
<Network className="h-5 w-5 mr-2" />
|
||||
Active Connections (24h)
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<LineChart data={connectionData}>
|
||||
<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} />
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: "hsl(var(--card))",
|
||||
border: "1px solid hsl(var(--border))",
|
||||
borderRadius: "8px",
|
||||
color: "hsl(var(--foreground))",
|
||||
}}
|
||||
formatter={(value) => [`${value}`, "Connections"]}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="connections"
|
||||
stroke="#8b5cf6"
|
||||
strokeWidth={3}
|
||||
dot={{ fill: "#8b5cf6", strokeWidth: 2, r: 5 }}
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Network Interfaces */}
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-foreground flex items-center">
|
||||
<Router className="h-5 w-5 mr-2" />
|
||||
Network Interfaces
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
{
|
||||
name: "vmbr0",
|
||||
type: "Bridge",
|
||||
status: "up",
|
||||
ip: "192.168.1.100/24",
|
||||
speed: "1000 Mbps",
|
||||
rx: "2.3 GB",
|
||||
tx: "1.8 GB",
|
||||
},
|
||||
{
|
||||
name: "enp1s0",
|
||||
type: "Physical",
|
||||
status: "up",
|
||||
ip: "192.168.1.101/24",
|
||||
speed: "1000 Mbps",
|
||||
rx: "1.2 GB",
|
||||
tx: "890 MB",
|
||||
},
|
||||
{
|
||||
name: "vmbr1",
|
||||
type: "Bridge",
|
||||
status: "up",
|
||||
ip: "10.0.0.1/24",
|
||||
speed: "1000 Mbps",
|
||||
rx: "456 MB",
|
||||
tx: "234 MB",
|
||||
},
|
||||
{
|
||||
name: "tap101i0",
|
||||
type: "TAP",
|
||||
status: "up",
|
||||
ip: "10.0.0.101/24",
|
||||
speed: "1000 Mbps",
|
||||
rx: "123 MB",
|
||||
tx: "89 MB",
|
||||
},
|
||||
].map((interface_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center justify-between p-4 rounded-lg border border-border bg-card/50"
|
||||
>
|
||||
<div className="flex items-center space-x-4">
|
||||
<Wifi className="h-5 w-5 text-muted-foreground" />
|
||||
<div>
|
||||
<div className="font-medium text-foreground">{interface_.name}</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{interface_.type} • {interface_.speed}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-6">
|
||||
<div className="text-center">
|
||||
<div className="text-sm text-muted-foreground">IP Address</div>
|
||||
<div className="text-sm font-medium text-foreground font-mono">{interface_.ip}</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="text-sm text-muted-foreground">RX / TX</div>
|
||||
<div className="text-sm font-medium text-foreground">
|
||||
{interface_.rx} / {interface_.tx}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
|
||||
{interface_.status.toUpperCase()}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
246
AppImage/components/proxmox-dashboard.tsx
Normal file
246
AppImage/components/proxmox-dashboard.tsx
Normal file
@@ -0,0 +1,246 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import { SystemOverview } from "@/components/system-overview"
|
||||
import { StorageMetrics } from "@/components/storage-metrics"
|
||||
import { NetworkMetrics } from "@/components/network-metrics"
|
||||
import { VirtualMachines } from "@/components/virtual-machines"
|
||||
import { SystemLogs } from "@/components/system-logs"
|
||||
import { RefreshCw, AlertTriangle, CheckCircle, XCircle, Languages, Server } from "lucide-react"
|
||||
import Image from "next/image"
|
||||
import { ThemeToggle } from "@/components/theme-toggle"
|
||||
|
||||
interface SystemStatus {
|
||||
status: "healthy" | "warning" | "critical"
|
||||
uptime: string
|
||||
lastUpdate: string
|
||||
serverName: string
|
||||
nodeId: string
|
||||
}
|
||||
|
||||
export function ProxmoxDashboard() {
|
||||
const [systemStatus, setSystemStatus] = useState<SystemStatus>({
|
||||
status: "healthy",
|
||||
uptime: "15d 7h 23m",
|
||||
lastUpdate: new Date().toLocaleTimeString(),
|
||||
serverName: "proxmox-01",
|
||||
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")
|
||||
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))
|
||||
setSystemStatus((prev) => ({
|
||||
...prev,
|
||||
lastUpdate: new Date().toLocaleTimeString(),
|
||||
}))
|
||||
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":
|
||||
return <CheckCircle className="h-4 w-4 text-green-500" />
|
||||
case "warning":
|
||||
return <AlertTriangle className="h-4 w-4 text-yellow-500" />
|
||||
case "critical":
|
||||
return <XCircle className="h-4 w-4 text-red-500" />
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusColor = () => {
|
||||
switch (systemStatus.status) {
|
||||
case "healthy":
|
||||
return "bg-green-500/10 text-green-500 border-green-500/20"
|
||||
case "warning":
|
||||
return "bg-yellow-500/10 text-yellow-500 border-yellow-500/20"
|
||||
case "critical":
|
||||
return "bg-red-500/10 text-red-500 border-red-500/20"
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<header className="border-b border-border header-bg 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">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-10 h-10 relative">
|
||||
<Image
|
||||
src="/images/proxmenux-logo.png"
|
||||
alt="ProxMenux Logo"
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-contain"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-xl font-semibold">ProxMenux Monitor</h1>
|
||||
<p className="text-sm opacity-70">Proxmox System Dashboard</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden md:flex items-center ml-6">
|
||||
<div className="server-info flex items-center space-x-2">
|
||||
<Server className="h-4 w-4 opacity-70" />
|
||||
<div className="text-sm">
|
||||
<div className="font-medium">{systemStatus.nodeId}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
<Badge variant="outline" className={getStatusColor()}>
|
||||
{getStatusIcon()}
|
||||
<span className="ml-1 capitalize">{systemStatus.status}</span>
|
||||
</Badge>
|
||||
|
||||
<div className="text-sm opacity-70">Uptime: {systemStatus.uptime}</div>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={refreshData}
|
||||
disabled={isRefreshing}
|
||||
className="border-border/50 bg-transparent hover:bg-secondary"
|
||||
>
|
||||
<RefreshCw className={`h-4 w-4 mr-2 ${isRefreshing ? "animate-spin" : ""}`} />
|
||||
Refresh
|
||||
</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">
|
||||
<Tabs defaultValue="overview" className="space-y-6">
|
||||
<TabsList className="grid w-full grid-cols-5 bg-card border border-border">
|
||||
<TabsTrigger
|
||||
value="overview"
|
||||
className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
|
||||
>
|
||||
Overview
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="storage"
|
||||
className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
|
||||
>
|
||||
Storage
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="network"
|
||||
className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
|
||||
>
|
||||
Network
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="vms"
|
||||
className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
|
||||
>
|
||||
Virtual Machines
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="logs"
|
||||
className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
|
||||
>
|
||||
System Logs
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="overview" className="space-y-6">
|
||||
<SystemOverview />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="storage" className="space-y-6">
|
||||
<StorageMetrics />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="network" className="space-y-6">
|
||||
<NetworkMetrics />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="vms" className="space-y-6">
|
||||
<VirtualMachines />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="logs" className="space-y-6">
|
||||
<SystemLogs />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<footer className="mt-12 pt-6 border-t border-border text-center text-sm text-muted-foreground">
|
||||
<p>Last updated: {systemStatus.lastUpdate} • ProxMenux Monitor v1.0.0</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
243
AppImage/components/storage-metrics.tsx
Normal file
243
AppImage/components/storage-metrics.tsx
Normal file
@@ -0,0 +1,243 @@
|
||||
"use client"
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Progress } from "@/components/ui/progress"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip } from "recharts"
|
||||
import { HardDrive, Database, Archive, AlertTriangle, CheckCircle, Activity } from "lucide-react"
|
||||
|
||||
const storageData = [
|
||||
{ name: "Used", value: 1250, color: "#3b82f6" }, // Blue
|
||||
{ name: "Available", value: 750, color: "#10b981" }, // Green
|
||||
]
|
||||
|
||||
const diskPerformance = [
|
||||
{ disk: "sda", read: 45, write: 32, iops: 1250 },
|
||||
{ disk: "sdb", read: 67, write: 28, iops: 980 },
|
||||
{ disk: "sdc", read: 23, write: 45, iops: 1100 },
|
||||
{ disk: "nvme0n1", read: 156, write: 89, iops: 3400 },
|
||||
]
|
||||
|
||||
export function StorageMetrics() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Storage Overview Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">Total Storage</CardTitle>
|
||||
<HardDrive className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-foreground">2.0 TB</div>
|
||||
<Progress value={62.5} className="mt-2" />
|
||||
<p className="text-xs text-muted-foreground mt-2">1.25 TB used • 750 GB available</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">VM & LXC Storage</CardTitle>
|
||||
<Database className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-foreground">890 GB</div>
|
||||
<Progress value={71.2} className="mt-2" />
|
||||
<p className="text-xs text-muted-foreground mt-2">71.2% of allocated space</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-foreground flex items-center">
|
||||
<Archive className="h-5 w-5 mr-2" />
|
||||
Backups
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-foreground">245 GB</div>
|
||||
<div className="flex items-center mt-2">
|
||||
<Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
|
||||
12 Backups
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-2">Last backup: 2h ago</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-foreground flex items-center">
|
||||
<Activity className="h-5 w-5 mr-2" />
|
||||
IOPS
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-foreground">6.7K</div>
|
||||
<div className="flex items-center space-x-2 mt-2">
|
||||
<span className="text-xs text-green-500">Read: 4.2K</span>
|
||||
<span className="text-xs text-blue-500">Write: 2.5K</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-2">Average operations/sec</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Storage Distribution and Performance */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-foreground flex items-center">
|
||||
<HardDrive className="h-5 w-5 mr-2" />
|
||||
Storage Distribution
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-foreground font-medium">Used Storage</span>
|
||||
<span className="text-muted-foreground">1.25 TB (62.5%)</span>
|
||||
</div>
|
||||
<div className="w-full bg-muted rounded-full h-3">
|
||||
<div
|
||||
className="bg-blue-500 h-3 rounded-full transition-all duration-300"
|
||||
style={{ width: "62.5%" }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-foreground font-medium">Available Storage</span>
|
||||
<span className="text-muted-foreground">750 GB (37.5%)</span>
|
||||
</div>
|
||||
<div className="w-full bg-muted rounded-full h-3">
|
||||
<div
|
||||
className="bg-green-500 h-3 rounded-full transition-all duration-300"
|
||||
style={{ width: "37.5%" }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 border-t border-border">
|
||||
<div className="grid grid-cols-2 gap-4 text-center">
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="w-3 h-3 bg-blue-500 rounded-full mr-2"></div>
|
||||
<span className="text-sm font-medium text-foreground">Used</span>
|
||||
</div>
|
||||
<div className="text-lg font-bold text-foreground">1.25 TB</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
|
||||
<span className="text-sm font-medium text-foreground">Available</span>
|
||||
</div>
|
||||
<div className="text-lg font-bold text-foreground">750 GB</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-foreground flex items-center">
|
||||
<Activity className="h-5 w-5 mr-2" />
|
||||
Disk Performance
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<BarChart data={diskPerformance}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
|
||||
<XAxis dataKey="disk" stroke="hsl(var(--muted-foreground))" fontSize={12} />
|
||||
<YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} />
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: "hsl(var(--card))",
|
||||
border: "1px solid hsl(var(--border))",
|
||||
borderRadius: "8px",
|
||||
color: "hsl(var(--foreground))",
|
||||
}}
|
||||
/>
|
||||
<Bar dataKey="read" fill="#3b82f6" name="Read MB/s" />
|
||||
<Bar dataKey="write" fill="#10b981" name="Write MB/s" />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Disk Details */}
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-foreground flex items-center">
|
||||
<Database className="h-5 w-5 mr-2" />
|
||||
Storage Devices
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
{ name: "/dev/sda", type: "HDD", size: "1TB", used: "650GB", health: "healthy", temp: "42°C" },
|
||||
{ name: "/dev/sdb", type: "HDD", size: "1TB", used: "480GB", health: "healthy", temp: "38°C" },
|
||||
{ name: "/dev/sdc", type: "SSD", size: "500GB", used: "120GB", health: "healthy", temp: "35°C" },
|
||||
{ name: "/dev/nvme0n1", type: "NVMe", size: "1TB", used: "340GB", health: "warning", temp: "55°C" },
|
||||
].map((disk, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center justify-between p-4 rounded-lg border border-border bg-card/50"
|
||||
>
|
||||
<div className="flex items-center space-x-4">
|
||||
<HardDrive className="h-5 w-5 text-muted-foreground" />
|
||||
<div>
|
||||
<div className="font-medium text-foreground">{disk.name}</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{disk.type} • {disk.size}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-6">
|
||||
<div className="text-right">
|
||||
<div className="text-sm font-medium text-foreground">
|
||||
{disk.used} / {disk.size}
|
||||
</div>
|
||||
<Progress
|
||||
value={(Number.parseInt(disk.used) / Number.parseInt(disk.size)) * 100}
|
||||
className="w-24 mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="text-sm text-muted-foreground">Temp</div>
|
||||
<div className="text-sm font-medium text-foreground">{disk.temp}</div>
|
||||
</div>
|
||||
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={
|
||||
disk.health === "healthy"
|
||||
? "bg-green-500/10 text-green-500 border-green-500/20"
|
||||
: "bg-yellow-500/10 text-yellow-500 border-yellow-500/20"
|
||||
}
|
||||
>
|
||||
{disk.health === "healthy" ? (
|
||||
<CheckCircle className="h-3 w-3 mr-1" />
|
||||
) : (
|
||||
<AlertTriangle className="h-3 w-3 mr-1" />
|
||||
)}
|
||||
{disk.health}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
275
AppImage/components/system-logs.tsx
Normal file
275
AppImage/components/system-logs.tsx
Normal file
@@ -0,0 +1,275 @@
|
||||
"use client"
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { ScrollArea } from "@/components/ui/scroll-area"
|
||||
import { FileText, Search, Download, AlertTriangle, Info, CheckCircle, XCircle } from "lucide-react"
|
||||
import { useState } from "react"
|
||||
|
||||
const systemLogs = [
|
||||
{
|
||||
timestamp: "2024-01-15 14:32:15",
|
||||
level: "info",
|
||||
service: "pveproxy",
|
||||
message: "User root@pam authenticated successfully",
|
||||
source: "auth.log",
|
||||
},
|
||||
{
|
||||
timestamp: "2024-01-15 14:31:45",
|
||||
level: "warning",
|
||||
service: "pvedaemon",
|
||||
message: "VM 101 high memory usage detected (85%)",
|
||||
source: "syslog",
|
||||
},
|
||||
{
|
||||
timestamp: "2024-01-15 14:30:22",
|
||||
level: "error",
|
||||
service: "pve-cluster",
|
||||
message: "Failed to connect to cluster node pve-02",
|
||||
source: "cluster.log",
|
||||
},
|
||||
{
|
||||
timestamp: "2024-01-15 14:29:18",
|
||||
level: "info",
|
||||
service: "pvestatd",
|
||||
message: "Storage local: 1.25TB used, 750GB available",
|
||||
source: "syslog",
|
||||
},
|
||||
{
|
||||
timestamp: "2024-01-15 14:28:33",
|
||||
level: "info",
|
||||
service: "pve-firewall",
|
||||
message: "Blocked connection attempt from 192.168.1.50",
|
||||
source: "firewall.log",
|
||||
},
|
||||
{
|
||||
timestamp: "2024-01-15 14:27:45",
|
||||
level: "warning",
|
||||
service: "smartd",
|
||||
message: "SMART warning: /dev/nvme0n1 temperature high (55°C)",
|
||||
source: "smart.log",
|
||||
},
|
||||
{
|
||||
timestamp: "2024-01-15 14:26:12",
|
||||
level: "info",
|
||||
service: "pveproxy",
|
||||
message: "Started backup job for VM 100",
|
||||
source: "backup.log",
|
||||
},
|
||||
{
|
||||
timestamp: "2024-01-15 14:25:38",
|
||||
level: "error",
|
||||
service: "qemu-server",
|
||||
message: "VM 102 failed to start: insufficient memory",
|
||||
source: "qemu.log",
|
||||
},
|
||||
{
|
||||
timestamp: "2024-01-15 14:24:55",
|
||||
level: "info",
|
||||
service: "pvedaemon",
|
||||
message: "VM 103 migrated successfully to node pve-01",
|
||||
source: "migration.log",
|
||||
},
|
||||
{
|
||||
timestamp: "2024-01-15 14:23:17",
|
||||
level: "warning",
|
||||
service: "pve-ha-lrm",
|
||||
message: "Resource VM:104 state changed to error",
|
||||
source: "ha.log",
|
||||
},
|
||||
]
|
||||
|
||||
export function SystemLogs() {
|
||||
const [searchTerm, setSearchTerm] = useState("")
|
||||
const [levelFilter, setLevelFilter] = useState("all")
|
||||
const [serviceFilter, setServiceFilter] = useState("all")
|
||||
|
||||
const filteredLogs = systemLogs.filter((log) => {
|
||||
const matchesSearch =
|
||||
log.message.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
log.service.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
const matchesLevel = levelFilter === "all" || log.level === levelFilter
|
||||
const matchesService = serviceFilter === "all" || log.service === serviceFilter
|
||||
|
||||
return matchesSearch && matchesLevel && matchesService
|
||||
})
|
||||
|
||||
const getLevelColor = (level: string) => {
|
||||
switch (level) {
|
||||
case "error":
|
||||
return "bg-red-500/10 text-red-500 border-red-500/20"
|
||||
case "warning":
|
||||
return "bg-yellow-500/10 text-yellow-500 border-yellow-500/20"
|
||||
case "info":
|
||||
return "bg-blue-500/10 text-blue-500 border-blue-500/20"
|
||||
default:
|
||||
return "bg-gray-500/10 text-gray-500 border-gray-500/20"
|
||||
}
|
||||
}
|
||||
|
||||
const getLevelIcon = (level: string) => {
|
||||
switch (level) {
|
||||
case "error":
|
||||
return <XCircle className="h-3 w-3 mr-1" />
|
||||
case "warning":
|
||||
return <AlertTriangle className="h-3 w-3 mr-1" />
|
||||
case "info":
|
||||
return <Info className="h-3 w-3 mr-1" />
|
||||
default:
|
||||
return <CheckCircle className="h-3 w-3 mr-1" />
|
||||
}
|
||||
}
|
||||
|
||||
const logCounts = {
|
||||
total: systemLogs.length,
|
||||
error: systemLogs.filter((log) => log.level === "error").length,
|
||||
warning: systemLogs.filter((log) => log.level === "warning").length,
|
||||
info: systemLogs.filter((log) => log.level === "info").length,
|
||||
}
|
||||
|
||||
const uniqueServices = [...new Set(systemLogs.map((log) => log.service))]
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Log Statistics */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">Total Logs</CardTitle>
|
||||
<FileText className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-foreground">{logCounts.total}</div>
|
||||
<p className="text-xs text-muted-foreground mt-2">Last 24 hours</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">Errors</CardTitle>
|
||||
<XCircle className="h-4 w-4 text-red-500" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-red-500">{logCounts.error}</div>
|
||||
<p className="text-xs text-muted-foreground mt-2">Requires attention</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">Warnings</CardTitle>
|
||||
<AlertTriangle className="h-4 w-4 text-yellow-500" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-yellow-500">{logCounts.warning}</div>
|
||||
<p className="text-xs text-muted-foreground mt-2">Monitor closely</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">Info</CardTitle>
|
||||
<Info className="h-4 w-4 text-blue-500" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-blue-500">{logCounts.info}</div>
|
||||
<p className="text-xs text-muted-foreground mt-2">Normal operations</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Log Filters and Search */}
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-foreground flex items-center">
|
||||
<FileText className="h-5 w-5 mr-2" />
|
||||
System Logs
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-col sm:flex-row gap-4 mb-6">
|
||||
<div className="flex-1">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search logs..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-10 bg-background border-border"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Select value={levelFilter} onValueChange={setLevelFilter}>
|
||||
<SelectTrigger className="w-full sm:w-[180px] bg-background border-border">
|
||||
<SelectValue placeholder="Filter by level" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Levels</SelectItem>
|
||||
<SelectItem value="error">Error</SelectItem>
|
||||
<SelectItem value="warning">Warning</SelectItem>
|
||||
<SelectItem value="info">Info</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select value={serviceFilter} onValueChange={setServiceFilter}>
|
||||
<SelectTrigger className="w-full sm:w-[180px] bg-background border-border">
|
||||
<SelectValue placeholder="Filter by service" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Services</SelectItem>
|
||||
{uniqueServices.map((service) => (
|
||||
<SelectItem key={service} value={service}>
|
||||
{service}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Button variant="outline" className="border-border bg-transparent">
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
Export
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<ScrollArea className="h-[600px] w-full rounded-md border border-border">
|
||||
<div className="space-y-2 p-4">
|
||||
{filteredLogs.map((log, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-start space-x-4 p-3 rounded-lg bg-card/50 border border-border/50"
|
||||
>
|
||||
<div className="flex-shrink-0">
|
||||
<Badge variant="outline" className={getLevelColor(log.level)}>
|
||||
{getLevelIcon(log.level)}
|
||||
{log.level.toUpperCase()}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<div className="text-sm font-medium text-foreground">{log.service}</div>
|
||||
<div className="text-xs text-muted-foreground font-mono">{log.timestamp}</div>
|
||||
</div>
|
||||
<div className="text-sm text-foreground mb-1">{log.message}</div>
|
||||
<div className="text-xs text-muted-foreground">Source: {log.source}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{filteredLogs.length === 0 && (
|
||||
<div className="text-center py-8 text-muted-foreground">
|
||||
<FileText className="h-12 w-12 mx-auto mb-4 opacity-50" />
|
||||
<p>No logs found matching your criteria</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
249
AppImage/components/system-overview.tsx
Normal file
249
AppImage/components/system-overview.tsx
Normal file
@@ -0,0 +1,249 @@
|
||||
"use client"
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Progress } from "@/components/ui/progress"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from "recharts"
|
||||
import { Cpu, MemoryStick, Thermometer, Users, Activity, Server, Zap } from "lucide-react"
|
||||
|
||||
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 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 },
|
||||
]
|
||||
|
||||
export function SystemOverview() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Key Metrics Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<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">CPU Usage</CardTitle>
|
||||
<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" />
|
||||
<p className="text-xs text-muted-foreground mt-2 metric-label">
|
||||
<span className="text-green-500">↓ 2.1%</span> from last hour
|
||||
</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">Memory Usage</CardTitle>
|
||||
<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" />
|
||||
<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>
|
||||
</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">Temperature</CardTitle>
|
||||
<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="flex items-center mt-2">
|
||||
<Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
|
||||
Normal
|
||||
</Badge>
|
||||
</div>
|
||||
<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 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>
|
||||
<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">
|
||||
<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
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-2 metric-label">Total: 12 VMs • 6 LXC configured</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Charts Section */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<Card className="bg-card border-border metric-card">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-foreground flex items-center">
|
||||
<Activity className="h-5 w-5 mr-2" />
|
||||
CPU Usage (24h)
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<AreaChart data={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} />
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: "hsl(var(--card))",
|
||||
border: "1px solid hsl(var(--border))",
|
||||
borderRadius: "8px",
|
||||
color: "hsl(var(--foreground))",
|
||||
}}
|
||||
/>
|
||||
<Area type="monotone" dataKey="value" stroke="#3b82f6" fill="#3b82f6" fillOpacity={0.2} />
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-card border-border metric-card">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-foreground flex items-center">
|
||||
<MemoryStick className="h-5 w-5 mr-2" />
|
||||
Memory Usage (24h)
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<AreaChart data={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} />
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: "hsl(var(--card))",
|
||||
border: "1px solid hsl(var(--border))",
|
||||
borderRadius: "8px",
|
||||
color: "hsl(var(--foreground))",
|
||||
}}
|
||||
/>
|
||||
<Area type="monotone" dataKey="used" stackId="1" stroke="#3b82f6" fill="#3b82f6" fillOpacity={0.6} />
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="available"
|
||||
stackId="1"
|
||||
stroke="#10b981"
|
||||
fill="#10b981"
|
||||
fillOpacity={0.6}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* System Information */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<Card className="bg-card border-border metric-card">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-foreground flex items-center">
|
||||
<Server className="h-5 w-5 mr-2" />
|
||||
System Information
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<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>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground metric-label">Version:</span>
|
||||
<span className="text-foreground metric-value">PVE 8.1.3</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground metric-label">Kernel:</span>
|
||||
<span className="text-foreground font-mono metric-value">6.5.11-7-pve</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground metric-label">Architecture:</span>
|
||||
<span className="text-foreground metric-value">x86_64</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-card border-border metric-card">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-foreground flex items-center">
|
||||
<Users className="h-5 w-5 mr-2" />
|
||||
Active Sessions
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-muted-foreground metric-label">Web Console:</span>
|
||||
<Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
|
||||
3 active
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-muted-foreground metric-label">SSH Sessions:</span>
|
||||
<Badge variant="outline" className="bg-blue-500/10 text-blue-500 border-blue-500/20">
|
||||
1 active
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground metric-label">API Calls:</span>
|
||||
<span className="text-foreground metric-value">247/hour</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-card border-border metric-card">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-foreground flex items-center">
|
||||
<Zap className="h-5 w-5 mr-2" />
|
||||
Power & Performance
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground metric-label">Power State:</span>
|
||||
<Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
|
||||
Running
|
||||
</Badge>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
7
AppImage/components/theme-provider.tsx
Normal file
7
AppImage/components/theme-provider.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
"use client"
|
||||
import { ThemeProvider as NextThemesProvider } from "next-themes"
|
||||
import type { ThemeProviderProps } from "next-themes"
|
||||
|
||||
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
|
||||
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
|
||||
}
|
||||
22
AppImage/components/theme-toggle.tsx
Normal file
22
AppImage/components/theme-toggle.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
"use client"
|
||||
import { Moon, Sun } from "lucide-react"
|
||||
import { useTheme } from "next-themes"
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
export function ThemeToggle() {
|
||||
const { theme, setTheme } = useTheme()
|
||||
|
||||
return (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setTheme(theme === "light" ? "dark" : "light")}
|
||||
className="border-border bg-transparent"
|
||||
>
|
||||
<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>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
317
AppImage/components/virtual-machines.tsx
Normal file
317
AppImage/components/virtual-machines.tsx
Normal file
@@ -0,0 +1,317 @@
|
||||
"use client"
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Progress } from "@/components/ui/progress"
|
||||
import { Server, Play, Square, RotateCcw, Monitor, Cpu, MemoryStick } from "lucide-react"
|
||||
|
||||
const virtualMachines = [
|
||||
{
|
||||
id: 100,
|
||||
name: "web-server-01",
|
||||
type: "vm",
|
||||
status: "running",
|
||||
os: "Ubuntu 22.04",
|
||||
cpu: 4,
|
||||
memory: 8192,
|
||||
disk: 50,
|
||||
uptime: "15d 7h 23m",
|
||||
cpuUsage: 45,
|
||||
memoryUsage: 62,
|
||||
diskUsage: 78,
|
||||
},
|
||||
{
|
||||
id: 101,
|
||||
name: "database-01",
|
||||
type: "vm",
|
||||
status: "running",
|
||||
os: "CentOS 8",
|
||||
cpu: 8,
|
||||
memory: 16384,
|
||||
disk: 100,
|
||||
uptime: "12d 3h 45m",
|
||||
cpuUsage: 78,
|
||||
memoryUsage: 85,
|
||||
diskUsage: 45,
|
||||
},
|
||||
{
|
||||
id: 102,
|
||||
name: "backup-server",
|
||||
type: "vm",
|
||||
status: "stopped",
|
||||
os: "Debian 11",
|
||||
cpu: 2,
|
||||
memory: 4096,
|
||||
disk: 200,
|
||||
uptime: "0d 0h 0m",
|
||||
cpuUsage: 0,
|
||||
memoryUsage: 0,
|
||||
diskUsage: 23,
|
||||
},
|
||||
{
|
||||
id: 103,
|
||||
name: "dev-environment",
|
||||
type: "vm",
|
||||
status: "running",
|
||||
os: "Ubuntu 20.04",
|
||||
cpu: 6,
|
||||
memory: 12288,
|
||||
disk: 75,
|
||||
uptime: "3d 12h 18m",
|
||||
cpuUsage: 32,
|
||||
memoryUsage: 58,
|
||||
diskUsage: 67,
|
||||
},
|
||||
{
|
||||
id: 104,
|
||||
name: "monitoring-01",
|
||||
type: "vm",
|
||||
status: "running",
|
||||
os: "Alpine Linux",
|
||||
cpu: 2,
|
||||
memory: 2048,
|
||||
disk: 25,
|
||||
uptime: "8d 15h 32m",
|
||||
cpuUsage: 15,
|
||||
memoryUsage: 34,
|
||||
diskUsage: 42,
|
||||
},
|
||||
{
|
||||
id: 105,
|
||||
name: "mail-server",
|
||||
type: "vm",
|
||||
status: "stopped",
|
||||
os: "Ubuntu 22.04",
|
||||
cpu: 4,
|
||||
memory: 8192,
|
||||
disk: 60,
|
||||
uptime: "0d 0h 0m",
|
||||
cpuUsage: 0,
|
||||
memoryUsage: 0,
|
||||
diskUsage: 56,
|
||||
},
|
||||
{
|
||||
id: 200,
|
||||
name: "nginx-proxy",
|
||||
type: "lxc",
|
||||
status: "running",
|
||||
os: "Ubuntu 22.04 LXC",
|
||||
cpu: 1,
|
||||
memory: 512,
|
||||
disk: 8,
|
||||
uptime: "25d 14h 12m",
|
||||
cpuUsage: 8,
|
||||
memoryUsage: 45,
|
||||
diskUsage: 32,
|
||||
},
|
||||
{
|
||||
id: 201,
|
||||
name: "redis-cache",
|
||||
type: "lxc",
|
||||
status: "running",
|
||||
os: "Alpine Linux LXC",
|
||||
cpu: 1,
|
||||
memory: 1024,
|
||||
disk: 4,
|
||||
uptime: "18d 6h 45m",
|
||||
cpuUsage: 12,
|
||||
memoryUsage: 38,
|
||||
diskUsage: 28,
|
||||
},
|
||||
{
|
||||
id: 202,
|
||||
name: "log-collector",
|
||||
type: "lxc",
|
||||
status: "stopped",
|
||||
os: "Debian 11 LXC",
|
||||
cpu: 1,
|
||||
memory: 256,
|
||||
disk: 2,
|
||||
uptime: "0d 0h 0m",
|
||||
cpuUsage: 0,
|
||||
memoryUsage: 0,
|
||||
diskUsage: 15,
|
||||
},
|
||||
]
|
||||
|
||||
export function VirtualMachines() {
|
||||
const runningVMs = virtualMachines.filter((vm) => vm.status === "running").length
|
||||
const stoppedVMs = virtualMachines.filter((vm) => vm.status === "stopped").length
|
||||
const runningLXC = virtualMachines.filter((vm) => vm.type === "lxc" && vm.status === "running").length
|
||||
const totalVMs = virtualMachines.filter((vm) => vm.type === "vm").length
|
||||
const totalLXC = virtualMachines.filter((vm) => vm.type === "lxc").length
|
||||
const totalCPU = virtualMachines.reduce((sum, vm) => sum + vm.cpu, 0)
|
||||
const totalMemory = virtualMachines.reduce((sum, vm) => sum + vm.memory, 0)
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case "running":
|
||||
return "bg-green-500/10 text-green-500 border-green-500/20"
|
||||
case "stopped":
|
||||
return "bg-red-500/10 text-red-500 border-red-500/20"
|
||||
default:
|
||||
return "bg-yellow-500/10 text-yellow-500 border-yellow-500/20"
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusIcon = (status: string) => {
|
||||
switch (status) {
|
||||
case "running":
|
||||
return <Play className="h-3 w-3 mr-1" />
|
||||
case "stopped":
|
||||
return <Square className="h-3 w-3 mr-1" />
|
||||
default:
|
||||
return <RotateCcw className="h-3 w-3 mr-1" />
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* VM Overview Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">Total VMs & LXC</CardTitle>
|
||||
<Server className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-foreground">{virtualMachines.length}</div>
|
||||
<div className="vm-badges mt-2">
|
||||
<Badge variant="outline" className="vm-badge bg-green-500/10 text-green-500 border-green-500/20">
|
||||
{runningVMs} VMs
|
||||
</Badge>
|
||||
<Badge variant="outline" className="vm-badge bg-blue-500/10 text-blue-500 border-blue-500/20">
|
||||
{runningLXC} LXC
|
||||
</Badge>
|
||||
<Badge variant="outline" className="vm-badge bg-red-500/10 text-red-500 border-red-500/20">
|
||||
{stoppedVMs} Stopped
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-2">
|
||||
{totalVMs} VMs • {totalLXC} LXC
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">Total CPU Cores</CardTitle>
|
||||
<Cpu className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-foreground">{totalCPU}</div>
|
||||
<p className="text-xs text-muted-foreground mt-2">Allocated across all VMs and LXC containers</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">Total Memory</CardTitle>
|
||||
<MemoryStick className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-foreground">{(totalMemory / 1024).toFixed(1)} GB</div>
|
||||
<p className="text-xs text-muted-foreground mt-2">Allocated RAM across all VMs and LXC containers</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">Average Load</CardTitle>
|
||||
<Monitor className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-foreground">42%</div>
|
||||
<p className="text-xs text-muted-foreground mt-2">Average resource utilization</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Virtual Machines List */}
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-foreground flex items-center">
|
||||
<Server className="h-5 w-5 mr-2" />
|
||||
Virtual Machines & LXC Containers
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{virtualMachines.map((vm) => (
|
||||
<div key={vm.id} className="p-6 rounded-lg border border-border bg-card/50">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Server className="h-6 w-6 text-muted-foreground" />
|
||||
<div>
|
||||
<div className="font-semibold text-foreground text-lg flex items-center">
|
||||
{vm.name}
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`ml-2 text-xs ${
|
||||
vm.type === "lxc"
|
||||
? "bg-blue-500/10 text-blue-500 border-blue-500/20"
|
||||
: "bg-purple-500/10 text-purple-500 border-purple-500/20"
|
||||
}`}
|
||||
>
|
||||
{vm.type.toUpperCase()}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
ID: {vm.id} • {vm.os}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-3">
|
||||
<Badge variant="outline" className={getStatusColor(vm.status)}>
|
||||
{getStatusIcon(vm.status)}
|
||||
{vm.status.toUpperCase()}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground mb-2">Resources</div>
|
||||
<div className="space-y-1 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span>CPU:</span>
|
||||
<span className="font-medium">{vm.cpu} cores</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Memory:</span>
|
||||
<span className="font-medium">{(vm.memory / 1024).toFixed(1)} GB</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Disk:</span>
|
||||
<span className="font-medium">{vm.disk} GB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground mb-2">CPU Usage</div>
|
||||
<div className="text-lg font-semibold text-foreground mb-1">{vm.cpuUsage}%</div>
|
||||
<Progress value={vm.cpuUsage} className="h-2" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground mb-2">Memory Usage</div>
|
||||
<div className="text-lg font-semibold text-foreground mb-1">{vm.memoryUsage}%</div>
|
||||
<Progress value={vm.memoryUsage} className="h-2" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground mb-2">Uptime</div>
|
||||
<div className="text-lg font-semibold text-foreground">{vm.uptime}</div>
|
||||
<div className="text-xs text-muted-foreground mt-1">Disk: {vm.diskUsage}% used</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
42
AppImage/next.config.mjs
Normal file
42
AppImage/next.config.mjs
Normal file
@@ -0,0 +1,42 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
output: 'standalone',
|
||||
trailingSlash: true,
|
||||
eslint: {
|
||||
ignoreDuringBuilds: true,
|
||||
},
|
||||
typescript: {
|
||||
ignoreBuildErrors: true,
|
||||
},
|
||||
images: {
|
||||
unoptimized: true,
|
||||
},
|
||||
experimental: {
|
||||
esmExternals: 'loose',
|
||||
},
|
||||
webpack: (config, { isServer }) => {
|
||||
if (!isServer) {
|
||||
config.resolve.fallback = {
|
||||
...config.resolve.fallback,
|
||||
fs: false,
|
||||
net: false,
|
||||
tls: false,
|
||||
};
|
||||
}
|
||||
return config;
|
||||
},
|
||||
async headers() {
|
||||
return [
|
||||
{
|
||||
source: '/api/:path*',
|
||||
headers: [
|
||||
{ key: 'Access-Control-Allow-Origin', value: '*' },
|
||||
{ key: 'Access-Control-Allow-Methods', value: 'GET, POST, PUT, DELETE, OPTIONS' },
|
||||
{ key: 'Access-Control-Allow-Headers', value: 'Content-Type, Authorization' },
|
||||
],
|
||||
},
|
||||
];
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
75
AppImage/package.json
Normal file
75
AppImage/package.json
Normal file
@@ -0,0 +1,75 @@
|
||||
{
|
||||
"name": "proxmenux-monitor",
|
||||
"version": "1.0.0",
|
||||
"description": "Proxmox System Monitoring Dashboard",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@hookform/resolvers": "^3.10.0",
|
||||
"@radix-ui/react-accordion": "1.2.2",
|
||||
"@radix-ui/react-alert-dialog": "1.1.4",
|
||||
"@radix-ui/react-aspect-ratio": "1.1.1",
|
||||
"@radix-ui/react-avatar": "1.1.2",
|
||||
"@radix-ui/react-checkbox": "1.1.3",
|
||||
"@radix-ui/react-collapsible": "1.1.2",
|
||||
"@radix-ui/react-context-menu": "2.2.4",
|
||||
"@radix-ui/react-dialog": "1.1.4",
|
||||
"@radix-ui/react-dropdown-menu": "2.1.4",
|
||||
"@radix-ui/react-hover-card": "1.1.4",
|
||||
"@radix-ui/react-label": "2.1.1",
|
||||
"@radix-ui/react-menubar": "1.1.4",
|
||||
"@radix-ui/react-navigation-menu": "1.2.3",
|
||||
"@radix-ui/react-popover": "1.1.4",
|
||||
"@radix-ui/react-progress": "1.1.1",
|
||||
"@radix-ui/react-radio-group": "1.2.2",
|
||||
"@radix-ui/react-scroll-area": "1.2.2",
|
||||
"@radix-ui/react-select": "2.1.4",
|
||||
"@radix-ui/react-separator": "1.1.1",
|
||||
"@radix-ui/react-slider": "1.2.2",
|
||||
"@radix-ui/react-slot": "1.1.1",
|
||||
"@radix-ui/react-switch": "1.1.2",
|
||||
"@radix-ui/react-tabs": "1.1.2",
|
||||
"@radix-ui/react-toast": "1.2.4",
|
||||
"@radix-ui/react-toggle": "1.1.1",
|
||||
"@radix-ui/react-toggle-group": "1.1.1",
|
||||
"@radix-ui/react-tooltip": "1.1.6",
|
||||
"@vercel/analytics": "1.3.1",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"cmdk": "1.0.4",
|
||||
"date-fns": "4.1.0",
|
||||
"embla-carousel-react": "8.5.1",
|
||||
"geist": "^1.3.1",
|
||||
"input-otp": "1.4.1",
|
||||
"lucide-react": "^0.454.0",
|
||||
"next": "14.2.25",
|
||||
"next-themes": "^0.4.6",
|
||||
"react": "^19",
|
||||
"react-day-picker": "9.8.0",
|
||||
"react-dom": "^19",
|
||||
"react-hook-form": "^7.60.0",
|
||||
"react-resizable-panels": "^2.1.7",
|
||||
"recharts": "2.15.4",
|
||||
"sonner": "^1.7.4",
|
||||
"tailwind-merge": "^3.3.1",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"vaul": "^0.9.9",
|
||||
"zod": "3.25.67"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4.1.9",
|
||||
"@types/node": "^22",
|
||||
"@types/react": "^18",
|
||||
"@types/react-dom": "^18",
|
||||
"postcss": "^8.5",
|
||||
"tailwindcss": "^4.1.9",
|
||||
"tw-animate-css": "1.3.3",
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
334
AppImage/scripts/build_appimage.sh
Normal file
334
AppImage/scripts/build_appimage.sh
Normal file
@@ -0,0 +1,334 @@
|
||||
#!/bin/bash
|
||||
|
||||
# ProxMenux Monitor AppImage Builder
|
||||
# This script creates a single AppImage with Flask server, Next.js dashboard, and translation support
|
||||
|
||||
set -e
|
||||
|
||||
WORK_DIR="/tmp/proxmenux_build"
|
||||
APP_DIR="$WORK_DIR/ProxMenux.AppDir"
|
||||
SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
|
||||
DIST_DIR="$SCRIPT_DIR/../dist"
|
||||
|
||||
VERSION=$(grep '"version"' "$SCRIPT_DIR/../package.json" | sed 's/.*"version": *"$$[^"]*$$".*/\1/')
|
||||
APPIMAGE_NAME="ProxMenux-${VERSION}.AppImage"
|
||||
|
||||
echo "🚀 Building ProxMenux Monitor AppImage v${VERSION} with translation support..."
|
||||
|
||||
# Clean and create work directory
|
||||
rm -rf "$WORK_DIR"
|
||||
mkdir -p "$APP_DIR"
|
||||
mkdir -p "$DIST_DIR"
|
||||
|
||||
# Download appimagetool if not exists
|
||||
if [ ! -f "$WORK_DIR/appimagetool" ]; then
|
||||
echo "📥 Downloading appimagetool..."
|
||||
wget -q "https://github.com/AppImage/AppImageKit/releases/download/continuous/appimagetool-x86_64.AppImage" -O "$WORK_DIR/appimagetool"
|
||||
chmod +x "$WORK_DIR/appimagetool"
|
||||
fi
|
||||
|
||||
# Create directory structure
|
||||
mkdir -p "$APP_DIR/usr/bin"
|
||||
mkdir -p "$APP_DIR/usr/lib/python3/dist-packages"
|
||||
mkdir -p "$APP_DIR/usr/share/applications"
|
||||
mkdir -p "$APP_DIR/usr/share/icons/hicolor/256x256/apps"
|
||||
mkdir -p "$APP_DIR/web"
|
||||
|
||||
# Copy Flask server
|
||||
echo "📋 Copying Flask server..."
|
||||
cp "$SCRIPT_DIR/flask_server.py" "$APP_DIR/usr/bin/"
|
||||
|
||||
echo "📋 Adding translation support..."
|
||||
cat > "$APP_DIR/usr/bin/translate_cli.py" << 'PYEOF'
|
||||
#!/usr/bin/env python3
|
||||
# -*- coding: utf-8 -*-
|
||||
"""
|
||||
ProxMenux translate CLI
|
||||
stdin JSON -> {"text":"...", "dest_lang":"es", "context":"...", "cache_file":"/usr/local/share/proxmenux/cache.json"}
|
||||
stdout JSON -> {"success":true,"text":"..."} or {"success":false,"error":"..."}
|
||||
"""
|
||||
import sys, json, re
|
||||
from pathlib import Path
|
||||
|
||||
# Ensure embedded site-packages are discoverable
|
||||
HERE = Path(__file__).resolve().parents[2] # .../AppDir
|
||||
DIST = HERE / "usr" / "lib" / "python3" / "dist-packages"
|
||||
SITE = HERE / "usr" / "lib" / "python3" / "site-packages"
|
||||
for p in (str(DIST), str(SITE)):
|
||||
if p not in sys.path:
|
||||
sys.path.insert(0, p)
|
||||
|
||||
# Python 3.13 compat: inline 'cgi' shim
|
||||
try:
|
||||
import cgi
|
||||
except Exception:
|
||||
import types, html
|
||||
def _parse_header(value: str):
|
||||
value = str(value or "")
|
||||
parts = [p.strip() for p in value.split(";")]
|
||||
if not parts:
|
||||
return "", {}
|
||||
key = parts[0].lower()
|
||||
params = {}
|
||||
for item in parts[1:]:
|
||||
if not item:
|
||||
continue
|
||||
if "=" in item:
|
||||
k, v = item.split("=", 1)
|
||||
k = k.strip().lower()
|
||||
v = v.strip().strip('"').strip("'")
|
||||
params[k] = v
|
||||
else:
|
||||
params[item.strip().lower()] = ""
|
||||
return key, params
|
||||
cgi = types.SimpleNamespace(parse_header=_parse_header, escape=html.escape)
|
||||
|
||||
try:
|
||||
from googletrans import Translator
|
||||
except Exception as e:
|
||||
print(json.dumps({"success": False, "error": f"ImportError: {e}"}))
|
||||
sys.exit(0)
|
||||
|
||||
def load_json_stdin():
|
||||
try:
|
||||
return json.load(sys.stdin)
|
||||
except Exception as e:
|
||||
print(json.dumps({"success": False, "error": f"Invalid JSON input: {e}"}))
|
||||
sys.exit(0)
|
||||
|
||||
def ensure_cache(path: Path):
|
||||
try:
|
||||
path.parent.mkdir(parents=True, exist_ok=True)
|
||||
if not path.exists():
|
||||
path.write_text("{}", encoding="utf-8")
|
||||
json.loads(path.read_text(encoding="utf-8") or "{}")
|
||||
except Exception:
|
||||
path.write_text("{}", encoding="utf-8")
|
||||
|
||||
def read_cache(path: Path):
|
||||
try:
|
||||
return json.loads(path.read_text(encoding="utf-8") or "{}")
|
||||
except Exception:
|
||||
return {}
|
||||
|
||||
def write_cache(path: Path, cache: dict):
|
||||
tmp = path.with_suffix(".tmp")
|
||||
tmp.write_text(json.dumps(cache, ensure_ascii=False), encoding="utf-8")
|
||||
tmp.replace(path)
|
||||
|
||||
def clean_translated(s: str) -> str:
|
||||
s = re.sub(r'^.*?(Translate:|Traducir:|Traduire:|Übersetzen:|Tradurre:|Traduzir:|翻译:|翻訳:)', '', s, flags=re.IGNORECASE | re.DOTALL).strip()
|
||||
s = re.sub(r'^.*?(Context:|Contexto:|Contexte:|Kontext:|Contesto:|上下文：|コンテキスト：).*?:', '', s, flags=re.IGNORECASE | re.DOTALL).strip()
|
||||
return s.strip()
|
||||
|
||||
def main():
|
||||
req = load_json_stdin()
|
||||
text = req.get("text", "")
|
||||
dest = req.get("dest_lang", "en") or "en"
|
||||
context = req.get("context", "")
|
||||
cache_file = Path(req.get("cache_file", "")) if req.get("cache_file") else None
|
||||
|
||||
if dest == "en":
|
||||
print(json.dumps({"success": True, "text": text}))
|
||||
return
|
||||
|
||||
cache = {}
|
||||
if cache_file:
|
||||
ensure_cache(cache_file)
|
||||
cache = read_cache(cache_file)
|
||||
if text in cache and (dest in cache[text] or "notranslate" in cache[text]):
|
||||
found = cache[text].get(dest) or cache[text].get("notranslate")
|
||||
print(json.dumps({"success": True, "text": found}))
|
||||
return
|
||||
|
||||
try:
|
||||
full = (context + " " + text).strip() if context else text
|
||||
tr = Translator()
|
||||
result = tr.translate(full, dest=dest).text
|
||||
result = clean_translated(result)
|
||||
|
||||
if cache_file:
|
||||
cache.setdefault(text, {})
|
||||
cache[text][dest] = result
|
||||
write_cache(cache_file, cache)
|
||||
|
||||
print(json.dumps({"success": True, "text": result}))
|
||||
except Exception as e:
|
||||
print(json.dumps({"success": False, "error": str(e)}))
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
PYEOF
|
||||
|
||||
chmod +x "$APP_DIR/usr/bin/translate_cli.py"
|
||||
|
||||
# Copy Next.js build
|
||||
echo "📋 Copying web dashboard..."
|
||||
if [ -d "$SCRIPT_DIR/../.next" ]; then
|
||||
cp -r "$SCRIPT_DIR/../.next" "$APP_DIR/web/"
|
||||
cp -r "$SCRIPT_DIR/../public" "$APP_DIR/web/"
|
||||
cp "$SCRIPT_DIR/../package.json" "$APP_DIR/web/"
|
||||
echo "✅ Next.js build copied successfully"
|
||||
else
|
||||
echo "⚠️ Warning: Next.js build not found. Run 'npm run build' first."
|
||||
echo "📋 Creating minimal web structure..."
|
||||
mkdir -p "$APP_DIR/web/public/images"
|
||||
if [ -f "$SCRIPT_DIR/../public/images/proxmenux-logo.png" ]; then
|
||||
cp "$SCRIPT_DIR/../public/images/proxmenux-logo.png" "$APP_DIR/web/public/images/"
|
||||
fi
|
||||
fi
|
||||
|
||||
# Create AppRun script
|
||||
cat > "$APP_DIR/AppRun" << 'EOF'
|
||||
#!/bin/bash
|
||||
|
||||
# Get the directory where this AppImage is located
|
||||
HERE="$(dirname "$(readlink -f "${0}")")"
|
||||
|
||||
# Set Python path
|
||||
export PYTHONPATH="$HERE/usr/lib/python3/dist-packages:$PYTHONPATH"
|
||||
export PATH="$HERE/usr/bin:$PATH"
|
||||
|
||||
# Check if translation mode is requested
|
||||
if [ "$1" = "--translate" ]; then
|
||||
shift
|
||||
exec python3 "$HERE/usr/bin/translate_cli.py" "$@"
|
||||
fi
|
||||
|
||||
# Start Flask server in background
|
||||
echo "🚀 Starting ProxMenux Monitor..."
|
||||
echo "📊 Dashboard will be available at: http://localhost:8008"
|
||||
|
||||
cd "$HERE"
|
||||
python3 "$HERE/usr/bin/flask_server.py" &
|
||||
FLASK_PID=$!
|
||||
|
||||
# Function to cleanup on exit
|
||||
cleanup() {
|
||||
echo "🛑 Stopping ProxMenux Monitor..."
|
||||
kill $FLASK_PID 2>/dev/null || true
|
||||
exit 0
|
||||
}
|
||||
|
||||
# Set trap for cleanup
|
||||
trap cleanup SIGINT SIGTERM EXIT
|
||||
|
||||
# Wait for Flask to start
|
||||
sleep 3
|
||||
|
||||
# Try to open browser
|
||||
if command -v xdg-open > /dev/null; then
|
||||
xdg-open "http://localhost:8008" 2>/dev/null || true
|
||||
elif command -v firefox > /dev/null; then
|
||||
firefox "http://localhost:8008" 2>/dev/null || true
|
||||
elif command -v chromium > /dev/null; then
|
||||
chromium "http://localhost:8008" 2>/dev/null || true
|
||||
elif command -v google-chrome > /dev/null; then
|
||||
google-chrome "http://localhost:8008" 2>/dev/null || true
|
||||
fi
|
||||
|
||||
echo "✅ ProxMenux Monitor is running!"
|
||||
echo "📝 Press Ctrl+C to stop"
|
||||
echo "🌐 Access dashboard at: http://localhost:8008"
|
||||
echo "🌍 Translation available with: ./ProxMenux-Monitor.AppImage --translate"
|
||||
|
||||
# Keep the script running
|
||||
wait $FLASK_PID
|
||||
EOF
|
||||
|
||||
chmod +x "$APP_DIR/AppRun"
|
||||
|
||||
# Create desktop file
|
||||
cat > "$APP_DIR/proxmenux-monitor.desktop" << EOF
|
||||
[Desktop Entry]
|
||||
Type=Application
|
||||
Name=ProxMenux Monitor
|
||||
Comment=Proxmox System Monitoring Dashboard with Translation Support
|
||||
Exec=AppRun
|
||||
Icon=proxmenux-monitor
|
||||
Categories=System;Monitor;
|
||||
Terminal=false
|
||||
StartupNotify=true
|
||||
EOF
|
||||
|
||||
# Copy desktop file to applications directory
|
||||
cp "$APP_DIR/proxmenux-monitor.desktop" "$APP_DIR/usr/share/applications/"
|
||||
|
||||
# Download and set icon
|
||||
echo "🎨 Setting up icon..."
|
||||
if [ -f "$SCRIPT_DIR/../public/images/proxmenux-logo.png" ]; then
|
||||
cp "$SCRIPT_DIR/../public/images/proxmenux-logo.png" "$APP_DIR/proxmenux-monitor.png"
|
||||
else
|
||||
wget -q "https://raw.githubusercontent.com/MacRimi/ProxMenux/main/images/logo.png" -O "$APP_DIR/proxmenux-monitor.png" || {
|
||||
echo "⚠️ Could not download logo, creating placeholder..."
|
||||
convert -size 256x256 xc:blue -fill white -gravity center -pointsize 24 -annotate +0+0 "PM" "$APP_DIR/proxmenux-monitor.png" 2>/dev/null || {
|
||||
echo "⚠️ ImageMagick not available, skipping icon creation"
|
||||
}
|
||||
}
|
||||
fi
|
||||
|
||||
if [ -f "$APP_DIR/proxmenux-monitor.png" ]; then
|
||||
cp "$APP_DIR/proxmenux-monitor.png" "$APP_DIR/usr/share/icons/hicolor/256x256/apps/"
|
||||
fi
|
||||
|
||||
echo "📦 Installing Python dependencies..."
|
||||
pip3 install --target "$APP_DIR/usr/lib/python3/dist-packages" \
|
||||
flask \
|
||||
flask-cors \
|
||||
psutil \
|
||||
requests \
|
||||
googletrans==4.0.0-rc1 \
|
||||
httpx==0.13.3 \
|
||||
httpcore==0.9.1 \
|
||||
beautifulsoup4
|
||||
|
||||
cat > "$APP_DIR/usr/lib/python3/dist-packages/cgi.py" << 'PYEOF'
|
||||
from typing import Tuple, Dict
|
||||
try:
|
||||
from html import escape as _html_escape
|
||||
except Exception:
|
||||
def _html_escape(s, quote=True): return s
|
||||
|
||||
__all__ = ["parse_header", "escape"]
|
||||
|
||||
def escape(s, quote=True):
|
||||
return _html_escape(s, quote=quote)
|
||||
|
||||
def parse_header(value: str) -> Tuple[str, Dict[str, str]]:
|
||||
if not isinstance(value, str):
|
||||
value = str(value or "")
|
||||
parts = [p.strip() for p in value.split(";")]
|
||||
if not parts:
|
||||
return "", {}
|
||||
key = parts[0].lower()
|
||||
params: Dict[str, str] = {}
|
||||
for item in parts[1:]:
|
||||
if not item:
|
||||
continue
|
||||
if "=" in item:
|
||||
k, v = item.split("=", 1)
|
||||
k = k.strip().lower()
|
||||
v = v.strip().strip('"').strip("'")
|
||||
params[k] = v
|
||||
else:
|
||||
params[item.strip().lower()] = ""
|
||||
return key, params
|
||||
PYEOF
|
||||
|
||||
# Build AppImage
|
||||
echo "🔨 Building unified AppImage v${VERSION}..."
|
||||
cd "$WORK_DIR"
|
||||
ARCH=x86_64 ./appimagetool "$APP_DIR" "$APPIMAGE_NAME"
|
||||
|
||||
# Move to dist directory
|
||||
mv "$APPIMAGE_NAME" "$DIST_DIR/"
|
||||
|
||||
echo "✅ Unified AppImage created: $DIST_DIR/$APPIMAGE_NAME"
|
||||
echo ""
|
||||
echo "📋 Usage:"
|
||||
echo " Dashboard: ./$APPIMAGE_NAME"
|
||||
echo " Translation: ./$APPIMAGE_NAME --translate"
|
||||
echo ""
|
||||
echo "🚀 Installation:"
|
||||
echo " sudo cp $DIST_DIR/$APPIMAGE_NAME /usr/local/bin/proxmenux-monitor"
|
||||
echo " sudo chmod +x /usr/local/bin/proxmenux-monitor"
|
||||
547
AppImage/scripts/flask_server.py
Normal file
547
AppImage/scripts/flask_server.py
Normal file
@@ -0,0 +1,547 @@
|
||||
#!/usr/bin/env python3
|
||||
"""
|
||||
ProxMenux Flask Server
|
||||
Provides REST API endpoints for Proxmox monitoring data
|
||||
Runs on port 8008 and serves system metrics, storage info, network stats, etc.
|
||||
Also serves the Next.js dashboard as static files
|
||||
"""
|
||||
|
||||
from flask import Flask, jsonify, request, send_from_directory, send_file
|
||||
from flask_cors import CORS
|
||||
import psutil
|
||||
import subprocess
|
||||
import json
|
||||
import os
|
||||
import time
|
||||
import socket
|
||||
from datetime import datetime, timedelta
|
||||
|
||||
app = Flask(__name__)
|
||||
CORS(app) # Enable CORS for Next.js frontend
|
||||
|
||||
@app.route('/')
|
||||
def serve_dashboard():
|
||||
"""Serve the main dashboard page"""
|
||||
try:
|
||||
web_dir = os.path.join(os.path.dirname(__file__), '..', '.next', 'static')
|
||||
index_file = os.path.join(os.path.dirname(__file__), '..', '.next', 'server', 'app', 'page.html')
|
||||
|
||||
if os.path.exists(index_file):
|
||||
return send_file(index_file)
|
||||
else:
|
||||
# Fallback to enhanced HTML page with PWA support
|
||||
return '''
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>ProxMenux Monitor</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Proxmox System Monitoring Dashboard">
|
||||
<meta name="theme-color" content="#4f46e5">
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.jpg">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.jpg">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.jpg">
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
margin: 0; padding: 40px;
|
||||
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
|
||||
color: #fff; min-height: 100vh;
|
||||
}
|
||||
.container { max-width: 900px; margin: 0 auto; }
|
||||
.header { text-align: center; margin-bottom: 50px; }
|
||||
.logo { width: 80px; height: 80px; margin: 0 auto 20px; border-radius: 16px; }
|
||||
.title { font-size: 2.5rem; font-weight: 700; margin: 0 0 10px; }
|
||||
.subtitle { font-size: 1.2rem; color: #888; margin: 0; }
|
||||
.api-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
|
||||
.api-card {
|
||||
background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
|
||||
padding: 25px; border-radius: 12px;
|
||||
border: 1px solid #333;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.api-card:hover { transform: translateY(-2px); border-color: #4f46e5; }
|
||||
.api-card h3 { margin: 0 0 15px; color: #4f46e5; font-size: 1.3rem; }
|
||||
.api-card a {
|
||||
color: #60a5fa; text-decoration: none;
|
||||
font-family: 'Monaco', 'Menlo', monospace;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.api-card a:hover { color: #93c5fd; text-decoration: underline; }
|
||||
.status {
|
||||
display: inline-block;
|
||||
background: #10b981;
|
||||
color: white;
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<img src="/images/proxmenux-logo.png" alt="ProxMenux" class="logo">
|
||||
<h1 class="title">ProxMenux Monitor</h1>
|
||||
<p class="subtitle">Proxmox System Monitoring Dashboard</p>
|
||||
<div class="status">🟢 Server Running</div>
|
||||
</div>
|
||||
<div class="api-grid">
|
||||
<div class="api-card">
|
||||
<h3>📊 System Metrics</h3>
|
||||
<a href="/api/system">/api/system</a>
|
||||
<p>CPU, memory, temperature, and uptime information</p>
|
||||
</div>
|
||||
<div class="api-card">
|
||||
<h3>💾 Storage Info</h3>
|
||||
<a href="/api/storage">/api/storage</a>
|
||||
<p>Disk usage, health status, and storage metrics</p>
|
||||
</div>
|
||||
<div class="api-card">
|
||||
<h3>🌐 Network Stats</h3>
|
||||
<a href="/api/network">/api/network</a>
|
||||
<p>Interface status, traffic, and network information</p>
|
||||
</div>
|
||||
<div class="api-card">
|
||||
<h3>🖥️ Virtual Machines</h3>
|
||||
<a href="/api/vms">/api/vms</a>
|
||||
<p>VM status, resource usage, and management</p>
|
||||
</div>
|
||||
<div class="api-card">
|
||||
<h3>📝 System Logs</h3>
|
||||
<a href="/api/logs">/api/logs</a>
|
||||
<p>Recent system events and log entries</p>
|
||||
</div>
|
||||
<div class="api-card">
|
||||
<h3>❤️ Health Check</h3>
|
||||
<a href="/api/health">/api/health</a>
|
||||
<p>Server status and health monitoring</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
// PWA Service Worker Registration
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.register('/sw.js');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
'''
|
||||
except Exception as e:
|
||||
print(f"Error serving dashboard: {e}")
|
||||
return jsonify({'error': 'Dashboard not available'}), 500
|
||||
|
||||
@app.route('/manifest.json')
|
||||
def serve_manifest():
|
||||
"""Serve PWA manifest"""
|
||||
return send_from_directory(os.path.join(os.path.dirname(__file__), '..', 'public'), 'manifest.json')
|
||||
|
||||
@app.route('/sw.js')
|
||||
def serve_sw():
|
||||
"""Serve service worker"""
|
||||
return '''
|
||||
const CACHE_NAME = 'proxmenux-v1';
|
||||
const urlsToCache = [
|
||||
'/',
|
||||
'/api/system',
|
||||
'/api/storage',
|
||||
'/api/network',
|
||||
'/api/health'
|
||||
];
|
||||
|
||||
self.addEventListener('install', event => {
|
||||
event.waitUntil(
|
||||
caches.open(CACHE_NAME)
|
||||
.then(cache => cache.addAll(urlsToCache))
|
||||
);
|
||||
});
|
||||
|
||||
self.addEventListener('fetch', event => {
|
||||
event.respondWith(
|
||||
caches.match(event.request)
|
||||
.then(response => response || fetch(event.request))
|
||||
);
|
||||
});
|
||||
''', 200, {'Content-Type': 'application/javascript'}
|
||||
|
||||
@app.route('/<path:filename>')
|
||||
def serve_static_files(filename):
|
||||
"""Serve static files (icons, etc.)"""
|
||||
try:
|
||||
# Try public directory first
|
||||
public_dir = os.path.join(os.path.dirname(__file__), '..', 'public')
|
||||
if os.path.exists(os.path.join(public_dir, filename)):
|
||||
return send_from_directory(public_dir, filename)
|
||||
|
||||
# Try Next.js static directory
|
||||
static_dir = os.path.join(os.path.dirname(__file__), '..', '.next', 'static')
|
||||
if os.path.exists(os.path.join(static_dir, filename)):
|
||||
return send_from_directory(static_dir, filename)
|
||||
|
||||
return '', 404
|
||||
except Exception as e:
|
||||
print(f"Error serving static file {filename}: {e}")
|
||||
return '', 404
|
||||
|
||||
@app.route('/images/<path:filename>')
|
||||
def serve_images(filename):
|
||||
"""Serve image files"""
|
||||
try:
|
||||
web_dir = os.path.join(os.path.dirname(__file__), '..', 'web', 'public', 'images')
|
||||
if os.path.exists(os.path.join(web_dir, filename)):
|
||||
return send_from_directory(web_dir, filename)
|
||||
else:
|
||||
# Fallback: try to serve from current directory
|
||||
return send_from_directory(os.path.dirname(__file__), filename)
|
||||
except Exception as e:
|
||||
print(f"Error serving image {filename}: {e}")
|
||||
return '', 404
|
||||
|
||||
def get_system_info():
|
||||
"""Get basic system information"""
|
||||
try:
|
||||
# CPU usage
|
||||
cpu_percent = psutil.cpu_percent(interval=1)
|
||||
|
||||
# Memory usage
|
||||
memory = psutil.virtual_memory()
|
||||
|
||||
# Temperature (if available)
|
||||
temp = 0
|
||||
try:
|
||||
if hasattr(psutil, "sensors_temperatures"):
|
||||
temps = psutil.sensors_temperatures()
|
||||
if temps:
|
||||
# Get first available temperature sensor
|
||||
for name, entries in temps.items():
|
||||
if entries:
|
||||
temp = entries[0].current
|
||||
break
|
||||
except:
|
||||
temp = 52 # Default fallback
|
||||
|
||||
# Uptime
|
||||
boot_time = psutil.boot_time()
|
||||
uptime_seconds = time.time() - boot_time
|
||||
uptime_str = str(timedelta(seconds=int(uptime_seconds)))
|
||||
|
||||
# Load average
|
||||
load_avg = os.getloadavg() if hasattr(os, 'getloadavg') else [1.23, 1.45, 1.67]
|
||||
|
||||
hostname = socket.gethostname()
|
||||
node_id = f"pve-{hostname}"
|
||||
|
||||
# Try to get Proxmox node info if available
|
||||
try:
|
||||
result = subprocess.run(['pvesh', 'get', '/nodes', '--output-format', 'json'],
|
||||
capture_output=True, text=True, timeout=5)
|
||||
if result.returncode == 0:
|
||||
nodes = json.loads(result.stdout)
|
||||
if nodes and len(nodes) > 0:
|
||||
node_id = nodes[0].get('node', node_id)
|
||||
except:
|
||||
pass # Use default if pvesh not available
|
||||
|
||||
return {
|
||||
'cpu_usage': round(cpu_percent, 1),
|
||||
'memory_usage': round(memory.percent, 1),
|
||||
'memory_total': round(memory.total / (1024**3), 1), # GB
|
||||
'memory_used': round(memory.used / (1024**3), 1), # GB
|
||||
'temperature': temp,
|
||||
'uptime': uptime_str,
|
||||
'load_average': list(load_avg),
|
||||
'hostname': hostname,
|
||||
'node_id': node_id,
|
||||
'timestamp': datetime.now().isoformat()
|
||||
}
|
||||
except Exception as e:
|
||||
print(f"Error getting system info: {e}")
|
||||
return {
|
||||
'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': datetime.now().isoformat()
|
||||
}
|
||||
|
||||
def get_storage_info():
|
||||
"""Get storage and disk information"""
|
||||
try:
|
||||
storage_data = {
|
||||
'total': 0,
|
||||
'used': 0,
|
||||
'available': 0,
|
||||
'disks': []
|
||||
}
|
||||
|
||||
# Get disk usage for root partition
|
||||
disk_usage = psutil.disk_usage('/')
|
||||
storage_data['total'] = round(disk_usage.total / (1024**3), 1) # GB
|
||||
storage_data['used'] = round(disk_usage.used / (1024**3), 1) # GB
|
||||
storage_data['available'] = round(disk_usage.free / (1024**3), 1) # GB
|
||||
|
||||
# Get individual disk information
|
||||
disk_partitions = psutil.disk_partitions()
|
||||
for partition in disk_partitions:
|
||||
try:
|
||||
partition_usage = psutil.disk_usage(partition.mountpoint)
|
||||
disk_info = {
|
||||
'name': partition.device,
|
||||
'mountpoint': partition.mountpoint,
|
||||
'fstype': partition.fstype,
|
||||
'total': round(partition_usage.total / (1024**3), 1),
|
||||
'used': round(partition_usage.used / (1024**3), 1),
|
||||
'available': round(partition_usage.free / (1024**3), 1),
|
||||
'usage_percent': round((partition_usage.used / partition_usage.total) * 100, 1),
|
||||
'health': 'healthy', # Would need SMART data for real health
|
||||
'temperature': 42 # Would need actual sensor data
|
||||
}
|
||||
storage_data['disks'].append(disk_info)
|
||||
except PermissionError:
|
||||
continue
|
||||
|
||||
return storage_data
|
||||
except Exception as e:
|
||||
print(f"Error getting storage info: {e}")
|
||||
return {
|
||||
'total': 2000,
|
||||
'used': 1250,
|
||||
'available': 750,
|
||||
'disks': [
|
||||
{'name': '/dev/sda', 'total': 1000, 'used': 650, 'health': 'healthy', 'temperature': 42}
|
||||
]
|
||||
}
|
||||
|
||||
def get_network_info():
|
||||
"""Get network interface information"""
|
||||
try:
|
||||
network_data = {
|
||||
'interfaces': [],
|
||||
'traffic': {'incoming': 0, 'outgoing': 0}
|
||||
}
|
||||
|
||||
# Get network interfaces
|
||||
net_if_addrs = psutil.net_if_addrs()
|
||||
net_if_stats = psutil.net_if_stats()
|
||||
|
||||
for interface_name, interface_addresses in net_if_addrs.items():
|
||||
if interface_name == 'lo': # Skip loopback
|
||||
continue
|
||||
|
||||
interface_info = {
|
||||
'name': interface_name,
|
||||
'status': 'up' if net_if_stats[interface_name].isup else 'down',
|
||||
'addresses': []
|
||||
}
|
||||
|
||||
for address in interface_addresses:
|
||||
if address.family == 2: # IPv4
|
||||
interface_info['addresses'].append({
|
||||
'ip': address.address,
|
||||
'netmask': address.netmask
|
||||
})
|
||||
|
||||
network_data['interfaces'].append(interface_info)
|
||||
|
||||
# Get network I/O statistics
|
||||
net_io = psutil.net_io_counters()
|
||||
network_data['traffic'] = {
|
||||
'bytes_sent': net_io.bytes_sent,
|
||||
'bytes_recv': net_io.bytes_recv,
|
||||
'packets_sent': net_io.packets_sent,
|
||||
'packets_recv': net_io.packets_recv
|
||||
}
|
||||
|
||||
return network_data
|
||||
except Exception as e:
|
||||
print(f"Error getting network info: {e}")
|
||||
return {
|
||||
'interfaces': [
|
||||
{'name': 'eth0', 'status': 'up', 'addresses': [{'ip': '192.168.1.100', 'netmask': '255.255.255.0'}]}
|
||||
],
|
||||
'traffic': {'bytes_sent': 1000000, 'bytes_recv': 2000000}
|
||||
}
|
||||
|
||||
def get_proxmox_vms():
|
||||
"""Get Proxmox VM information (requires pvesh command)"""
|
||||
try:
|
||||
# Try to get VM list using pvesh command
|
||||
result = subprocess.run(['pvesh', 'get', '/nodes/localhost/qemu', '--output-format', 'json'],
|
||||
capture_output=True, text=True, timeout=10)
|
||||
|
||||
if result.returncode == 0:
|
||||
vms = json.loads(result.stdout)
|
||||
return vms
|
||||
else:
|
||||
# Fallback to mock data if pvesh is not available
|
||||
return [
|
||||
{
|
||||
'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
|
||||
}
|
||||
]
|
||||
except Exception as e:
|
||||
print(f"Error getting VM info: {e}")
|
||||
return []
|
||||
|
||||
@app.route('/api/system', methods=['GET'])
|
||||
def api_system():
|
||||
"""Get system information"""
|
||||
return jsonify(get_system_info())
|
||||
|
||||
@app.route('/api/storage', methods=['GET'])
|
||||
def api_storage():
|
||||
"""Get storage information"""
|
||||
return jsonify(get_storage_info())
|
||||
|
||||
@app.route('/api/network', methods=['GET'])
|
||||
def api_network():
|
||||
"""Get network information"""
|
||||
return jsonify(get_network_info())
|
||||
|
||||
@app.route('/api/vms', methods=['GET'])
|
||||
def api_vms():
|
||||
"""Get virtual machine information"""
|
||||
return jsonify(get_proxmox_vms())
|
||||
|
||||
@app.route('/api/logs', methods=['GET'])
|
||||
def api_logs():
|
||||
"""Get system logs"""
|
||||
try:
|
||||
# Get recent system logs
|
||||
result = subprocess.run(['journalctl', '-n', '100', '--output', 'json'],
|
||||
capture_output=True, text=True, timeout=10)
|
||||
|
||||
if result.returncode == 0:
|
||||
logs = []
|
||||
for line in result.stdout.strip().split('\n'):
|
||||
if line:
|
||||
try:
|
||||
log_entry = json.loads(line)
|
||||
logs.append({
|
||||
'timestamp': log_entry.get('__REALTIME_TIMESTAMP', ''),
|
||||
'level': log_entry.get('PRIORITY', '6'),
|
||||
'service': log_entry.get('_SYSTEMD_UNIT', 'system'),
|
||||
'message': log_entry.get('MESSAGE', ''),
|
||||
'source': 'journalctl'
|
||||
})
|
||||
except json.JSONDecodeError:
|
||||
continue
|
||||
return jsonify(logs)
|
||||
else:
|
||||
# Fallback mock logs
|
||||
return jsonify([
|
||||
{
|
||||
'timestamp': datetime.now().isoformat(),
|
||||
'level': 'info',
|
||||
'service': 'pveproxy',
|
||||
'message': 'User root@pam authenticated successfully',
|
||||
'source': 'auth.log'
|
||||
}
|
||||
])
|
||||
except Exception as e:
|
||||
print(f"Error getting logs: {e}")
|
||||
return jsonify([])
|
||||
|
||||
@app.route('/api/health', methods=['GET'])
|
||||
def api_health():
|
||||
"""Health check endpoint"""
|
||||
return jsonify({
|
||||
'status': 'healthy',
|
||||
'timestamp': datetime.now().isoformat(),
|
||||
'version': '1.0.0'
|
||||
})
|
||||
|
||||
@app.route('/api/system-info', methods=['GET'])
|
||||
def api_system_info():
|
||||
"""Get system and node information for dashboard header"""
|
||||
try:
|
||||
hostname = socket.gethostname()
|
||||
node_id = f"pve-{hostname}"
|
||||
|
||||
# Try to get Proxmox version and node info
|
||||
pve_version = "PVE 8.1.3"
|
||||
try:
|
||||
result = subprocess.run(['pveversion'], capture_output=True, text=True, timeout=5)
|
||||
if result.returncode == 0:
|
||||
pve_version = result.stdout.strip().split('\n')[0]
|
||||
except:
|
||||
pass
|
||||
|
||||
# Try to get node info from Proxmox API
|
||||
try:
|
||||
result = subprocess.run(['pvesh', 'get', '/nodes', '--output-format', 'json'],
|
||||
capture_output=True, text=True, timeout=5)
|
||||
if result.returncode == 0:
|
||||
nodes = json.loads(result.stdout)
|
||||
if nodes and len(nodes) > 0:
|
||||
node_info = nodes[0]
|
||||
node_id = node_info.get('node', node_id)
|
||||
hostname = node_info.get('node', hostname)
|
||||
except:
|
||||
pass
|
||||
|
||||
return jsonify({
|
||||
'hostname': hostname,
|
||||
'node_id': node_id,
|
||||
'pve_version': pve_version,
|
||||
'status': 'online',
|
||||
'timestamp': datetime.now().isoformat()
|
||||
})
|
||||
except Exception as e:
|
||||
print(f"Error getting system info: {e}")
|
||||
return jsonify({
|
||||
'hostname': 'proxmox-01',
|
||||
'node_id': 'pve-node-01',
|
||||
'pve_version': 'PVE 8.1.3',
|
||||
'status': 'online',
|
||||
'timestamp': datetime.now().isoformat()
|
||||
})
|
||||
|
||||
@app.route('/api/info', methods=['GET'])
|
||||
def api_info():
|
||||
"""Root endpoint with API information"""
|
||||
return jsonify({
|
||||
'name': 'ProxMenux Monitor API',
|
||||
'version': '1.0.0',
|
||||
'endpoints': [
|
||||
'/api/system',
|
||||
'/api/system-info',
|
||||
'/api/storage',
|
||||
'/api/network',
|
||||
'/api/vms',
|
||||
'/api/logs',
|
||||
'/api/health'
|
||||
]
|
||||
})
|
||||
|
||||
if __name__ == '__main__':
|
||||
print("🚀 Starting ProxMenux Flask Server on port 8008...")
|
||||
print("📊 Dashboard: http://localhost:8008")
|
||||
print("🔌 API endpoints:")
|
||||
print(" http://localhost:8008/api/system")
|
||||
print(" http://localhost:8008/api/system-info")
|
||||
print(" http://localhost:8008/api/storage")
|
||||
print(" http://localhost:8008/api/network")
|
||||
print(" http://localhost:8008/api/vms")
|
||||
print(" http://localhost:8008/api/logs")
|
||||
print(" http://localhost:8008/api/health")
|
||||
|
||||
app.run(host='0.0.0.0', port=8008, debug=False)
|
||||
Reference in New Issue
Block a user