mirror of
https://github.com/MacRimi/ProxMenux.git
synced 2025-10-01 23:56:18 +00:00
Update system-overview.tsx
This commit is contained in:
MacRimi
@@ -4,8 +4,9 @@ import { useState, useEffect } from "react"
|
|||||||
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
|
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
|
||||||
import { Progress } from "./ui/progress"
|
import { Progress } from "./ui/progress"
|
||||||
import { Badge } from "./ui/badge"
|
import { Badge } from "./ui/badge"
|
||||||
|
import { Button } from "./ui/button"
|
||||||
import { XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from "recharts"
|
import { XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from "recharts"
|
||||||
import { Cpu, MemoryStick, Thermometer, Users, Activity, Server, Zap, AlertCircle } from "lucide-react"
|
import { Cpu, MemoryStick, Thermometer, Users, Activity, Server, Zap, AlertCircle, RefreshCw } from "lucide-react"
|
||||||
|
|
||||||
interface SystemData {
|
interface SystemData {
|
||||||
cpu_usage: number
|
cpu_usage: number
|
||||||
@@ -160,46 +161,55 @@ export function SystemOverview() {
|
|||||||
const [vmData, setVmData] = useState<VMData[]>([])
|
const [vmData, setVmData] = useState<VMData[]>([])
|
||||||
const [chartData, setChartData] = useState(generateChartData())
|
const [chartData, setChartData] = useState(generateChartData())
|
||||||
const [loading, setLoading] = useState(true)
|
const [loading, setLoading] = useState(true)
|
||||||
const [isDemo, setIsDemo] = useState(false) // Added demo mode state
|
const [isDemo, setIsDemo] = useState(false)
|
||||||
|
const [isRefreshing, setIsRefreshing] = useState(false)
|
||||||
|
const [lastUpdate, setLastUpdate] = useState<Date>(new Date())
|
||||||
|
|
||||||
|
const fetchData = async () => {
|
||||||
|
try {
|
||||||
|
setIsRefreshing(true)
|
||||||
|
|
||||||
|
const [systemResult, vmResult] = await Promise.all([fetchSystemData(), fetchVMData()])
|
||||||
|
|
||||||
|
setSystemData(systemResult.data)
|
||||||
|
setVmData(vmResult.data)
|
||||||
|
setIsDemo(systemResult.isDemo || vmResult.isDemo)
|
||||||
|
setLastUpdate(new Date())
|
||||||
|
|
||||||
|
if (systemResult.data) {
|
||||||
|
setChartData(generateChartData(systemResult.data))
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error("[v0] Error fetching data:", err)
|
||||||
|
const fallbackData = generateDemoSystemData()
|
||||||
|
setSystemData(fallbackData)
|
||||||
|
setVmData(demVMData)
|
||||||
|
setChartData(generateChartData(fallbackData))
|
||||||
|
setIsDemo(true)
|
||||||
|
setLastUpdate(new Date())
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
setIsRefreshing(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleManualRefresh = () => {
|
||||||
|
fetchData()
|
||||||
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchData = async () => {
|
|
||||||
try {
|
|
||||||
setLoading(true)
|
|
||||||
|
|
||||||
const [systemResult, vmResult] = await Promise.all([fetchSystemData(), fetchVMData()])
|
|
||||||
|
|
||||||
setSystemData(systemResult.data)
|
|
||||||
setVmData(vmResult.data)
|
|
||||||
setIsDemo(systemResult.isDemo || vmResult.isDemo) // Set demo mode if either fetch is demo
|
|
||||||
|
|
||||||
if (systemResult.data) {
|
|
||||||
setChartData(generateChartData(systemResult.data))
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error("[v0] Error fetching data:", err)
|
|
||||||
const fallbackData = generateDemoSystemData()
|
|
||||||
setSystemData(fallbackData)
|
|
||||||
setVmData(demVMData)
|
|
||||||
setChartData(generateChartData(fallbackData))
|
|
||||||
setIsDemo(true)
|
|
||||||
} finally {
|
|
||||||
setLoading(false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
fetchData()
|
fetchData()
|
||||||
|
|
||||||
const interval = setInterval(() => {
|
const interval = setInterval(() => {
|
||||||
if (!isDemo) {
|
if (!isDemo) {
|
||||||
fetchData()
|
fetchData()
|
||||||
} else {
|
} else {
|
||||||
// In demo mode, just update with new random data
|
|
||||||
const newDemoData = generateDemoSystemData()
|
const newDemoData = generateDemoSystemData()
|
||||||
setSystemData(newDemoData)
|
setSystemData(newDemoData)
|
||||||
setChartData(generateChartData(newDemoData))
|
setChartData(generateChartData(newDemoData))
|
||||||
|
setLastUpdate(new Date())
|
||||||
}
|
}
|
||||||
}, 5000) // Update every 5 seconds instead of 30
|
}, 30000)
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
clearInterval(interval)
|
clearInterval(interval)
|
||||||
@@ -208,22 +218,27 @@ export function SystemOverview() {
|
|||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<div className="space-y-6">
|
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 p-6">
|
||||||
<div className="text-center py-8">
|
<div className="max-w-7xl mx-auto space-y-6">
|
||||||
<div className="text-lg font-medium text-foreground mb-2">Connecting to ProxMenux Monitor...</div>
|
<div className="text-center py-12">
|
||||||
<div className="text-sm text-muted-foreground">Fetching real-time system data</div>
|
<div className="inline-flex items-center justify-center w-16 h-16 bg-blue-500/10 rounded-full mb-4">
|
||||||
</div>
|
<Server className="w-8 h-8 text-blue-500 animate-pulse" />
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
</div>
|
||||||
{[...Array(4)].map((_, i) => (
|
<div className="text-2xl font-bold text-white mb-2">Connecting to ProxMenux Monitor...</div>
|
||||||
<Card key={i} className="bg-card border-border animate-pulse">
|
<div className="text-slate-400">Fetching real-time system data</div>
|
||||||
<CardContent className="p-6">
|
</div>
|
||||||
<div className="h-4 bg-muted rounded w-1/2 mb-4"></div>
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
<div className="h-8 bg-muted rounded w-3/4 mb-2"></div>
|
{[...Array(4)].map((_, i) => (
|
||||||
<div className="h-2 bg-muted rounded w-full mb-2"></div>
|
<Card key={i} className="bg-slate-800/50 border-slate-700 backdrop-blur-sm animate-pulse">
|
||||||
<div className="h-3 bg-muted rounded w-2/3"></div>
|
<CardContent className="p-6">
|
||||||
</CardContent>
|
<div className="h-4 bg-slate-700 rounded w-1/2 mb-4"></div>
|
||||||
</Card>
|
<div className="h-8 bg-slate-700 rounded w-3/4 mb-2"></div>
|
||||||
))}
|
<div className="h-2 bg-slate-700 rounded w-full mb-2"></div>
|
||||||
|
<div className="h-3 bg-slate-700 rounded w-2/3"></div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
@@ -239,250 +254,276 @@ export function SystemOverview() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const getTemperatureStatus = (temp: number) => {
|
const getTemperatureStatus = (temp: number) => {
|
||||||
if (temp < 60) return { status: "Normal", color: "bg-green-500/10 text-green-500 border-green-500/20" }
|
if (temp < 60) return { status: "Normal", color: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20" }
|
||||||
if (temp < 75) return { status: "Warm", color: "bg-yellow-500/10 text-yellow-500 border-yellow-500/20" }
|
if (temp < 75) return { status: "Warm", color: "bg-amber-500/10 text-amber-400 border-amber-500/20" }
|
||||||
return { status: "Hot", color: "bg-red-500/10 text-red-500 border-red-500/20" }
|
return { status: "Hot", color: "bg-red-500/10 text-red-400 border-red-500/20" }
|
||||||
}
|
}
|
||||||
|
|
||||||
const tempStatus = getTemperatureStatus(systemData.temperature)
|
const tempStatus = getTemperatureStatus(systemData.temperature)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-6">
|
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 p-6">
|
||||||
{isDemo && (
|
<div className="max-w-7xl mx-auto space-y-6">
|
||||||
<Card className="bg-blue-500/10 border-blue-500/20">
|
<div className="flex items-center justify-between mb-8">
|
||||||
<CardContent className="p-4">
|
<div>
|
||||||
<div className="flex items-center gap-2 text-sm text-blue-600">
|
<h1 className="text-3xl font-bold text-white mb-2">ProxMenux System Dashboard</h1>
|
||||||
<AlertCircle className="h-4 w-4" />
|
<p className="text-slate-400">Last updated: {lastUpdate.toLocaleTimeString()} • Auto-refresh every 30s</p>
|
||||||
<span>
|
</div>
|
||||||
<strong>Demo Mode:</strong> Flask server not available. Showing simulated data for development. In the
|
<Button
|
||||||
AppImage, this will connect to the real Flask server.
|
onClick={handleManualRefresh}
|
||||||
</span>
|
disabled={isRefreshing}
|
||||||
</div>
|
className="bg-blue-600 hover:bg-blue-700 text-white border-0"
|
||||||
</CardContent>
|
>
|
||||||
</Card>
|
<RefreshCw className={`w-4 h-4 mr-2 ${isRefreshing ? "animate-spin" : ""}`} />
|
||||||
)}
|
{isRefreshing ? "Refreshing..." : "Refresh"}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Key Metrics Cards */}
|
{isDemo && (
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
<Card className="bg-blue-500/10 border-blue-500/20 backdrop-blur-sm">
|
||||||
<Card className="bg-card border-border metric-card">
|
<CardContent className="p-4">
|
||||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
<div className="flex items-center gap-2 text-sm text-blue-400">
|
||||||
<CardTitle className="text-sm font-medium text-muted-foreground">CPU Usage</CardTitle>
|
<AlertCircle className="h-4 w-4" />
|
||||||
<Cpu className="h-4 w-4 text-muted-foreground" />
|
<span>
|
||||||
</CardHeader>
|
<strong>Demo Mode:</strong> Flask server not available. Showing simulated data for development. In the
|
||||||
<CardContent>
|
AppImage, this will connect to the real Flask server.
|
||||||
<div className="text-2xl font-bold text-foreground metric-value">{systemData.cpu_usage}%</div>
|
</span>
|
||||||
<Progress value={systemData.cpu_usage} className="mt-2" />
|
</div>
|
||||||
<p className="text-xs text-muted-foreground mt-2 metric-label">
|
</CardContent>
|
||||||
{isDemo ? "Simulated data" : "Real-time data from Flask server"}
|
</Card>
|
||||||
</p>
|
)}
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card className="bg-card border-border metric-card">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
<Card className="bg-slate-800/50 border-slate-700 backdrop-blur-sm hover:bg-slate-800/70 transition-all duration-200">
|
||||||
<CardTitle className="text-sm font-medium text-muted-foreground">Memory Usage</CardTitle>
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
<MemoryStick className="h-4 w-4 text-muted-foreground" />
|
<CardTitle className="text-sm font-medium text-slate-400">CPU Usage</CardTitle>
|
||||||
</CardHeader>
|
<div className="p-2 bg-blue-500/10 rounded-lg">
|
||||||
<CardContent>
|
<Cpu className="h-4 w-4 text-blue-400" />
|
||||||
<div className="text-2xl font-bold text-foreground metric-value">
|
</div>
|
||||||
{systemData.memory_used.toFixed(1)} GB
|
</CardHeader>
|
||||||
</div>
|
<CardContent>
|
||||||
<Progress value={systemData.memory_usage} className="mt-2" />
|
<div className="text-3xl font-bold text-white mb-2">{systemData.cpu_usage}%</div>
|
||||||
<p className="text-xs text-muted-foreground mt-2 metric-label">
|
<Progress value={systemData.cpu_usage} className="mt-2 h-2" />
|
||||||
{systemData.memory_usage.toFixed(1)}% of {systemData.memory_total} GB
|
<p className="text-xs text-slate-400 mt-2">
|
||||||
</p>
|
{isDemo ? "Simulated data" : "Real-time data from Flask server"}
|
||||||
</CardContent>
|
</p>
|
||||||
</Card>
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
<Card className="bg-card border-border metric-card">
|
<Card className="bg-slate-800/50 border-slate-700 backdrop-blur-sm hover:bg-slate-800/70 transition-all duration-200">
|
||||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
<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>
|
<CardTitle className="text-sm font-medium text-slate-400">Memory Usage</CardTitle>
|
||||||
<Thermometer className="h-4 w-4 text-muted-foreground" />
|
<div className="p-2 bg-emerald-500/10 rounded-lg">
|
||||||
</CardHeader>
|
<MemoryStick className="h-4 w-4 text-emerald-400" />
|
||||||
<CardContent>
|
</div>
|
||||||
<div className="text-2xl font-bold text-foreground metric-value">{systemData.temperature}°C</div>
|
</CardHeader>
|
||||||
<div className="flex items-center mt-2">
|
<CardContent>
|
||||||
<Badge variant="outline" className={tempStatus.color}>
|
<div className="text-3xl font-bold text-white mb-2">{systemData.memory_used.toFixed(1)} GB</div>
|
||||||
{tempStatus.status}
|
<Progress value={systemData.memory_usage} className="mt-2 h-2" />
|
||||||
</Badge>
|
<p className="text-xs text-slate-400 mt-2">
|
||||||
</div>
|
{systemData.memory_usage.toFixed(1)}% of {systemData.memory_total} GB
|
||||||
<p className="text-xs text-muted-foreground mt-2 metric-label">
|
</p>
|
||||||
{isDemo ? "Simulated temperature" : "Live temperature reading"}
|
</CardContent>
|
||||||
</p>
|
</Card>
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card className="bg-card border-border metric-card">
|
<Card className="bg-slate-800/50 border-slate-700 backdrop-blur-sm hover:bg-slate-800/70 transition-all duration-200">
|
||||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
<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</CardTitle>
|
<CardTitle className="text-sm font-medium text-slate-400">Temperature</CardTitle>
|
||||||
<Server className="h-4 w-4 text-muted-foreground" />
|
<div className="p-2 bg-orange-500/10 rounded-lg">
|
||||||
</CardHeader>
|
<Thermometer className="h-4 w-4 text-orange-400" />
|
||||||
<CardContent>
|
</div>
|
||||||
<div className="text-2xl font-bold text-foreground metric-value">{vmStats.running}</div>
|
</CardHeader>
|
||||||
<div className="vm-badges mt-2 flex flex-wrap gap-1">
|
<CardContent>
|
||||||
<Badge variant="outline" className="vm-badge bg-green-500/10 text-green-500 border-green-500/20">
|
<div className="text-3xl font-bold text-white mb-2">{systemData.temperature}°C</div>
|
||||||
{vmStats.running} Running
|
<div className="flex items-center mt-2">
|
||||||
</Badge>
|
<Badge variant="outline" className={tempStatus.color}>
|
||||||
{vmStats.stopped > 0 && (
|
{tempStatus.status}
|
||||||
<Badge variant="outline" className="vm-badge bg-yellow-500/10 text-yellow-500 border-yellow-500/20">
|
|
||||||
{vmStats.stopped} Stopped
|
|
||||||
</Badge>
|
</Badge>
|
||||||
)}
|
</div>
|
||||||
</div>
|
<p className="text-xs text-slate-400 mt-2">
|
||||||
<p className="text-xs text-muted-foreground mt-2 metric-label">Total: {vmStats.total} VMs configured</p>
|
{isDemo ? "Simulated temperature" : "Live temperature reading"}
|
||||||
</CardContent>
|
</p>
|
||||||
</Card>
|
</CardContent>
|
||||||
</div>
|
</Card>
|
||||||
|
|
||||||
{/* Charts Section */}
|
<Card className="bg-slate-800/50 border-slate-700 backdrop-blur-sm hover:bg-slate-800/70 transition-all duration-200">
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
<Card className="bg-card border-border metric-card">
|
<CardTitle className="text-sm font-medium text-slate-400">Active VMs</CardTitle>
|
||||||
<CardHeader>
|
<div className="p-2 bg-purple-500/10 rounded-lg">
|
||||||
<CardTitle className="text-foreground flex items-center">
|
<Server className="h-4 w-4 text-purple-400" />
|
||||||
<Activity className="h-5 w-5 mr-2" />
|
</div>
|
||||||
CPU Usage (24h)
|
</CardHeader>
|
||||||
</CardTitle>
|
<CardContent>
|
||||||
</CardHeader>
|
<div className="text-3xl font-bold text-white mb-2">{vmStats.running}</div>
|
||||||
<CardContent>
|
<div className="flex flex-wrap gap-1 mt-2">
|
||||||
<ResponsiveContainer width="100%" height={300}>
|
<Badge variant="outline" className="bg-emerald-500/10 text-emerald-400 border-emerald-500/20">
|
||||||
<AreaChart data={chartData.cpuData}>
|
{vmStats.running} Running
|
||||||
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
|
</Badge>
|
||||||
<XAxis dataKey="time" stroke="hsl(var(--muted-foreground))" fontSize={12} />
|
{vmStats.stopped > 0 && (
|
||||||
<YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} />
|
<Badge variant="outline" className="bg-amber-500/10 text-amber-400 border-amber-500/20">
|
||||||
<Tooltip
|
{vmStats.stopped} Stopped
|
||||||
contentStyle={{
|
</Badge>
|
||||||
backgroundColor: "hsl(var(--card))",
|
)}
|
||||||
border: "1px solid hsl(var(--border))",
|
</div>
|
||||||
borderRadius: "8px",
|
<p className="text-xs text-slate-400 mt-2">Total: {vmStats.total} VMs configured</p>
|
||||||
color: "hsl(var(--foreground))",
|
</CardContent>
|
||||||
}}
|
</Card>
|
||||||
/>
|
</div>
|
||||||
<Area type="monotone" dataKey="value" stroke="#3b82f6" fill="#3b82f6" fillOpacity={0.2} />
|
|
||||||
</AreaChart>
|
|
||||||
</ResponsiveContainer>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card className="bg-card border-border metric-card">
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||||
<CardHeader>
|
<Card className="bg-slate-800/50 border-slate-700 backdrop-blur-sm">
|
||||||
<CardTitle className="text-foreground flex items-center">
|
<CardHeader>
|
||||||
<MemoryStick className="h-5 w-5 mr-2" />
|
<CardTitle className="text-white flex items-center">
|
||||||
Memory Usage (24h)
|
<div className="p-2 bg-blue-500/10 rounded-lg mr-3">
|
||||||
</CardTitle>
|
<Activity className="h-5 w-5 text-blue-400" />
|
||||||
</CardHeader>
|
</div>
|
||||||
<CardContent>
|
CPU Usage (24h)
|
||||||
<ResponsiveContainer width="100%" height={300}>
|
</CardTitle>
|
||||||
<AreaChart data={chartData.memoryData}>
|
</CardHeader>
|
||||||
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
|
<CardContent>
|
||||||
<XAxis dataKey="time" stroke="hsl(var(--muted-foreground))" fontSize={12} />
|
<ResponsiveContainer width="100%" height={300}>
|
||||||
<YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} />
|
<AreaChart data={chartData.cpuData}>
|
||||||
<Tooltip
|
<CartesianGrid strokeDasharray="3 3" stroke="#374151" />
|
||||||
contentStyle={{
|
<XAxis dataKey="time" stroke="#9CA3AF" fontSize={12} />
|
||||||
backgroundColor: "hsl(var(--card))",
|
<YAxis stroke="#9CA3AF" fontSize={12} />
|
||||||
border: "1px solid hsl(var(--border))",
|
<Tooltip
|
||||||
borderRadius: "8px",
|
contentStyle={{
|
||||||
color: "hsl(var(--foreground))",
|
backgroundColor: "#1F2937",
|
||||||
}}
|
border: "1px solid #374151",
|
||||||
/>
|
borderRadius: "8px",
|
||||||
<Area type="monotone" dataKey="used" stackId="1" stroke="#3b82f6" fill="#3b82f6" fillOpacity={0.6} />
|
color: "#F9FAFB",
|
||||||
<Area
|
}}
|
||||||
type="monotone"
|
/>
|
||||||
dataKey="available"
|
<Area type="monotone" dataKey="value" stroke="#3B82F6" fill="#3B82F6" fillOpacity={0.3} />
|
||||||
stackId="1"
|
</AreaChart>
|
||||||
stroke="#10b981"
|
</ResponsiveContainer>
|
||||||
fill="#10b981"
|
</CardContent>
|
||||||
fillOpacity={0.6}
|
</Card>
|
||||||
/>
|
|
||||||
</AreaChart>
|
|
||||||
</ResponsiveContainer>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* System Information */}
|
<Card className="bg-slate-800/50 border-slate-700 backdrop-blur-sm">
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
<CardHeader>
|
||||||
<Card className="bg-card border-border metric-card">
|
<CardTitle className="text-white flex items-center">
|
||||||
<CardHeader>
|
<div className="p-2 bg-emerald-500/10 rounded-lg mr-3">
|
||||||
<CardTitle className="text-foreground flex items-center">
|
<MemoryStick className="h-5 w-5 text-emerald-400" />
|
||||||
<Server className="h-5 w-5 mr-2" />
|
</div>
|
||||||
System Information
|
Memory Usage (24h)
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="space-y-3">
|
<CardContent>
|
||||||
<div className="flex justify-between">
|
<ResponsiveContainer width="100%" height={300}>
|
||||||
<span className="text-muted-foreground metric-label">Hostname:</span>
|
<AreaChart data={chartData.memoryData}>
|
||||||
<span className="text-foreground font-mono metric-value">{systemData.hostname}</span>
|
<CartesianGrid strokeDasharray="3 3" stroke="#374151" />
|
||||||
</div>
|
<XAxis dataKey="time" stroke="#9CA3AF" fontSize={12} />
|
||||||
<div className="flex justify-between">
|
<YAxis stroke="#9CA3AF" fontSize={12} />
|
||||||
<span className="text-muted-foreground metric-label">Uptime:</span>
|
<Tooltip
|
||||||
<span className="text-foreground metric-value">{systemData.uptime}</span>
|
contentStyle={{
|
||||||
</div>
|
backgroundColor: "#1F2937",
|
||||||
<div className="flex justify-between">
|
border: "1px solid #374151",
|
||||||
<span className="text-muted-foreground metric-label">Node ID:</span>
|
borderRadius: "8px",
|
||||||
<span className="text-foreground font-mono metric-value">{systemData.node_id}</span>
|
color: "#F9FAFB",
|
||||||
</div>
|
}}
|
||||||
<div className="flex justify-between">
|
/>
|
||||||
<span className="text-muted-foreground metric-label">Last Update:</span>
|
<Area type="monotone" dataKey="used" stackId="1" stroke="#3B82F6" fill="#3B82F6" fillOpacity={0.6} />
|
||||||
<span className="text-foreground metric-value">
|
<Area
|
||||||
{new Date(systemData.timestamp).toLocaleTimeString()}
|
type="monotone"
|
||||||
</span>
|
dataKey="available"
|
||||||
</div>
|
stackId="1"
|
||||||
</CardContent>
|
stroke="#10B981"
|
||||||
</Card>
|
fill="#10B981"
|
||||||
|
fillOpacity={0.6}
|
||||||
|
/>
|
||||||
|
</AreaChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
<Card className="bg-card border-border metric-card">
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||||
<CardHeader>
|
<Card className="bg-slate-800/50 border-slate-700 backdrop-blur-sm">
|
||||||
<CardTitle className="text-foreground flex items-center">
|
<CardHeader>
|
||||||
<Users className="h-5 w-5 mr-2" />
|
<CardTitle className="text-white flex items-center">
|
||||||
Active Sessions
|
<div className="p-2 bg-blue-500/10 rounded-lg mr-3">
|
||||||
</CardTitle>
|
<Server className="h-5 w-5 text-blue-400" />
|
||||||
</CardHeader>
|
</div>
|
||||||
<CardContent className="space-y-3">
|
System Information
|
||||||
<div className="flex justify-between items-center">
|
</CardTitle>
|
||||||
<span className="text-muted-foreground metric-label">Web Console:</span>
|
</CardHeader>
|
||||||
<Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
|
<CardContent className="space-y-4">
|
||||||
3 active
|
<div className="flex justify-between items-center">
|
||||||
</Badge>
|
<span className="text-slate-400">Hostname:</span>
|
||||||
</div>
|
<span className="text-white font-mono bg-slate-700/50 px-2 py-1 rounded text-sm">
|
||||||
<div className="flex justify-between items-center">
|
{systemData.hostname}
|
||||||
<span className="text-muted-foreground metric-label">SSH Sessions:</span>
|
</span>
|
||||||
<Badge variant="outline" className="bg-blue-500/10 text-blue-500 border-blue-500/20">
|
</div>
|
||||||
1 active
|
<div className="flex justify-between items-center">
|
||||||
</Badge>
|
<span className="text-slate-400">Uptime:</span>
|
||||||
</div>
|
<span className="text-white font-semibold">{systemData.uptime}</span>
|
||||||
<div className="flex justify-between">
|
</div>
|
||||||
<span className="text-muted-foreground metric-label">API Calls:</span>
|
<div className="flex justify-between items-center">
|
||||||
<span className="text-foreground metric-value">247/hour</span>
|
<span className="text-slate-400">Node ID:</span>
|
||||||
</div>
|
<span className="text-white font-mono bg-slate-700/50 px-2 py-1 rounded text-sm">
|
||||||
</CardContent>
|
{systemData.node_id}
|
||||||
</Card>
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<span className="text-slate-400">Status:</span>
|
||||||
|
<Badge className="bg-emerald-500/10 text-emerald-400 border-emerald-500/20">healthy</Badge>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
<Card className="bg-card border-border metric-card">
|
<Card className="bg-slate-800/50 border-slate-700 backdrop-blur-sm">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle className="text-foreground flex items-center">
|
<CardTitle className="text-white flex items-center">
|
||||||
<Zap className="h-5 w-5 mr-2" />
|
<div className="p-2 bg-emerald-500/10 rounded-lg mr-3">
|
||||||
Power & Performance
|
<Users className="h-5 w-5 text-emerald-400" />
|
||||||
</CardTitle>
|
</div>
|
||||||
</CardHeader>
|
Active Sessions
|
||||||
<CardContent className="space-y-3">
|
</CardTitle>
|
||||||
<div className="flex justify-between">
|
</CardHeader>
|
||||||
<span className="text-muted-foreground metric-label">Power State:</span>
|
<CardContent className="space-y-4">
|
||||||
<Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
|
<div className="flex justify-between items-center">
|
||||||
Running
|
<span className="text-slate-400">Web Console:</span>
|
||||||
</Badge>
|
<Badge className="bg-emerald-500/10 text-emerald-400 border-emerald-500/20">3 active</Badge>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between">
|
<div className="flex justify-between items-center">
|
||||||
<span className="text-muted-foreground metric-label">Load Average:</span>
|
<span className="text-slate-400">SSH Sessions:</span>
|
||||||
<span className="text-foreground font-mono metric-value">
|
<Badge className="bg-blue-500/10 text-blue-400 border-blue-500/20">1 active</Badge>
|
||||||
{systemData.load_average.map((avg) => avg.toFixed(2)).join(", ")}
|
</div>
|
||||||
</span>
|
<div className="flex justify-between items-center">
|
||||||
</div>
|
<span className="text-slate-400">API Calls:</span>
|
||||||
<div className="flex justify-between">
|
<span className="text-white font-semibold">247/hour</span>
|
||||||
<span className="text-muted-foreground metric-label">Boot Time:</span>
|
</div>
|
||||||
<span className="text-foreground metric-value">2.3s</span>
|
</CardContent>
|
||||||
</div>
|
</Card>
|
||||||
</CardContent>
|
|
||||||
</Card>
|
<Card className="bg-slate-800/50 border-slate-700 backdrop-blur-sm">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-white flex items-center">
|
||||||
|
<div className="p-2 bg-amber-500/10 rounded-lg mr-3">
|
||||||
|
<Zap className="h-5 w-5 text-amber-400" />
|
||||||
|
</div>
|
||||||
|
Power & Performance
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<span className="text-slate-400">Power State:</span>
|
||||||
|
<Badge className="bg-emerald-500/10 text-emerald-400 border-emerald-500/20">Running</Badge>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<span className="text-slate-400">Load Average:</span>
|
||||||
|
<span className="text-white font-mono bg-slate-700/50 px-2 py-1 rounded text-sm">
|
||||||
|
{systemData.load_average.map((avg) => avg.toFixed(2)).join(", ")}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<span className="text-slate-400">Boot Time:</span>
|
||||||
|
<span className="text-white font-semibold">2.3s</span>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user