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

Update system-overview.tsx

Browse Source
This commit is contained in:
MacRimi
2025-10-02 18:11:00 +02:00
parent 5e168c2561
commit 97288ed6ce
1 changed files with 48 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
AppImage/components/system-overview.tsx
View File

@@ -4,7 +4,7 @@ import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
import { Progress } from "./ui/progress"
import { Badge } from "./ui/badge"
import { XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from "recharts"
import { XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area, Legend } from "recharts"
import { Cpu, MemoryStick, Thermometer, Activity, Server, Zap, AlertCircle } from "lucide-react"
interface SystemData {
@@ -18,6 +18,7 @@ interface SystemData {
hostname: string
node_id: string
timestamp: string
cpu_cores?: number
}
interface VMData {
@@ -41,7 +42,7 @@ interface HistoricalData {
}
const historicalDataStore: HistoricalData[] = []
const MAX_HISTORICAL_POINTS = 24 // Store 24 data points for 24h view
const MAX_HISTORICAL_POINTS = 144 // Store 144 data points for 24h view
const fetchSystemData = async (): Promise<SystemData | null> => {
try {
@@ -353,16 +354,16 @@ export function SystemOverview() {
<CardHeader>
<CardTitle className="text-foreground flex items-center">
<Activity className="h-5 w-5 mr-2" />
CPU Usage (Last {historicalDataStore.length} readings)
CPU Usage (Last 24h)
</CardTitle>
</CardHeader>
<CardContent>
{chartData.cpuData.length > 0 ? (
<ResponsiveContainer width="100%" height={300}>
<AreaChart data={chartData.cpuData}>
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
<XAxis dataKey="time" stroke="hsl(var(--muted-foreground))" fontSize={12} />
<YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} />
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" opacity={0.3} />
<XAxis dataKey="time" stroke="hsl(var(--foreground))" fontSize={12} opacity={0.7} />
<YAxis stroke="hsl(var(--foreground))" fontSize={12} opacity={0.7} />
<Tooltip
contentStyle={{
backgroundColor: "hsl(var(--card))",
@@ -370,8 +371,16 @@ export function SystemOverview() {
borderRadius: "8px",
color: "hsl(var(--foreground))",
}}
labelStyle={{ color: "hsl(var(--foreground))" }}
/>
<Area
type="monotone"
dataKey="value"
stroke="#60a5fa"
fill="#60a5fa"
fillOpacity={0.3}
name="CPU %"
/>
<Area type="monotone" dataKey="value" stroke="#3b82f6" fill="#3b82f6" fillOpacity={0.2} />
</AreaChart>
</ResponsiveContainer>
) : (
@@ -386,16 +395,16 @@ export function SystemOverview() {
<CardHeader>
<CardTitle className="text-foreground flex items-center">
<MemoryStick className="h-5 w-5 mr-2" />
Memory Usage (Last {historicalDataStore.length} readings)
Memory Usage (Last 24h)
</CardTitle>
</CardHeader>
<CardContent>
{chartData.memoryData.length > 0 ? (
<ResponsiveContainer width="100%" height={300}>
<AreaChart data={chartData.memoryData}>
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
<XAxis dataKey="time" stroke="hsl(var(--muted-foreground))" fontSize={12} />
<YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} />
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" opacity={0.3} />
<XAxis dataKey="time" stroke="hsl(var(--foreground))" fontSize={12} opacity={0.7} />
<YAxis stroke="hsl(var(--foreground))" fontSize={12} opacity={0.7} />
<Tooltip
contentStyle={{
backgroundColor: "hsl(var(--card))",
@@ -403,15 +412,26 @@ export function SystemOverview() {
borderRadius: "8px",
color: "hsl(var(--foreground))",
}}
labelStyle={{ color: "hsl(var(--foreground))" }}
/>
<Legend wrapperStyle={{ color: "hsl(var(--foreground))" }} iconType="square" />
<Area
type="monotone"
dataKey="used"
stackId="1"
stroke="#60a5fa"
fill="#60a5fa"
fillOpacity={0.6}
name="Used Memory (GB)"
/>
<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"
stroke="#34d399"
fill="#34d399"
fillOpacity={0.6}
name="Available Memory (GB)"
/>
</AreaChart>
</ResponsiveContainer>
@@ -434,22 +454,22 @@ export function SystemOverview() {
</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
<div className="flex justify-between">
<span className="text-muted-foreground">Hostname:</span>
<span className="text-foreground font-mono">{systemData.hostname}</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">Uptime:</span>
<span className="text-foreground">{systemData.uptime}</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">Node ID:</span>
<span className="text-foreground font-mono">{systemData.node_id}</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">Last Update:</span>
<span className="text-foreground">{new Date(systemData.timestamp).toLocaleTimeString()}</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">Proxmox Version:</span>
<span className="text-foreground">8.x</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">Kernel:</span>
<span className="text-foreground font-mono text-sm">Linux</span>
</div>
</CardContent>
</Card>
@@ -461,8 +481,11 @@ export function SystemOverview() {
</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
<div className="flex justify-between">
<span className="text-muted-foreground">Load Average:</span>
<div className="flex justify-between items-start">
<div className="flex flex-col">
<span className="text-muted-foreground">Load Average:</span>
<span className="text-xs text-muted-foreground">(1m, 5m, 15m)</span>
</div>
<span className="text-foreground font-mono">
{systemData.load_average.map((avg) => avg.toFixed(2)).join(", ")}
</span>
@@ -479,7 +502,7 @@ export function SystemOverview() {
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">CPU Cores:</span>
<span className="text-foreground">{navigator.hardwareConcurrency || "N/A"}</span>
<span className="text-foreground">{systemData.cpu_cores || "N/A"}</span>
</div>
</CardContent>
</Card>