feat: rebuild Monitor page for Proxmox cluster architecture
- Hierarchical layout: cluster overview, VM grid (2x2), detail categories - VM cards for Server/Easy/Dev/Gateway with CPU/RAM/Disk metrics - WP Updates per-site detail from descomplicar-monitor plugin - ProgressBar with inverted prop for container health - Mock data reflecting real cluster infrastructure
This commit is contained in:
@@ -11,13 +11,17 @@ import {
|
||||
RefreshCw,
|
||||
CheckCircle2,
|
||||
AlertTriangle,
|
||||
XCircle,
|
||||
Zap,
|
||||
ArrowLeft,
|
||||
Activity,
|
||||
Clock,
|
||||
TrendingUp,
|
||||
Wrench,
|
||||
Code,
|
||||
Network,
|
||||
Cpu,
|
||||
MemoryStick,
|
||||
MonitorDot,
|
||||
} from 'lucide-react'
|
||||
|
||||
// Types
|
||||
@@ -49,21 +53,95 @@ interface MonitorData {
|
||||
}
|
||||
}
|
||||
|
||||
interface VMConfig {
|
||||
name: string
|
||||
id: string
|
||||
type: 'QEMU' | 'LXC'
|
||||
ip: string
|
||||
role: string
|
||||
icon: React.ElementType
|
||||
accent: string
|
||||
accentBg: string
|
||||
accentBorder: string
|
||||
}
|
||||
|
||||
// VM definitions matching cluster architecture
|
||||
const VM_CONFIG: Record<string, VMConfig> = {
|
||||
'CWP Server': {
|
||||
name: 'Server',
|
||||
id: 'VM 100',
|
||||
type: 'QEMU',
|
||||
ip: '5.9.90.105',
|
||||
role: 'CWP - hosting clientes',
|
||||
icon: Server,
|
||||
accent: 'text-emerald-400',
|
||||
accentBg: 'bg-emerald-500/10',
|
||||
accentBorder: 'border-emerald-500/20',
|
||||
},
|
||||
'EasyPanel': {
|
||||
name: 'Easy',
|
||||
id: 'VM 101',
|
||||
type: 'QEMU',
|
||||
ip: '5.9.90.70',
|
||||
role: 'Docker Swarm - 46 servicos',
|
||||
icon: Container,
|
||||
accent: 'text-cyan-400',
|
||||
accentBg: 'bg-cyan-500/10',
|
||||
accentBorder: 'border-cyan-500/20',
|
||||
},
|
||||
'Dev': {
|
||||
name: 'Dev',
|
||||
id: 'CT 102',
|
||||
type: 'LXC',
|
||||
ip: '10.10.10.10',
|
||||
role: 'Node.js, Docker, TypeScript',
|
||||
icon: Code,
|
||||
accent: 'text-violet-400',
|
||||
accentBg: 'bg-violet-500/10',
|
||||
accentBorder: 'border-violet-500/20',
|
||||
},
|
||||
'Gateway': {
|
||||
name: 'Gateway',
|
||||
id: 'VM 103',
|
||||
type: 'QEMU',
|
||||
ip: '5.9.90.69',
|
||||
role: '26 MCPs, Nginx proxy',
|
||||
icon: Network,
|
||||
accent: 'text-amber-400',
|
||||
accentBg: 'bg-amber-500/10',
|
||||
accentBorder: 'border-amber-500/20',
|
||||
},
|
||||
}
|
||||
|
||||
// Animation variants
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
show: {
|
||||
opacity: 1,
|
||||
transition: { staggerChildren: 0.05 }
|
||||
transition: { staggerChildren: 0.06 }
|
||||
}
|
||||
}
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
show: { opacity: 1, y: 0 }
|
||||
show: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { type: 'spring' as const, stiffness: 300, damping: 30 }
|
||||
}
|
||||
}
|
||||
|
||||
// --- Sub-components ---
|
||||
|
||||
const StatusDot = ({ status }: { status: string }) => {
|
||||
const color = (status === 'ok' || status === 'up')
|
||||
? 'bg-emerald-400 shadow-[0_0_12px_rgba(16,185,129,0.6)]'
|
||||
: status === 'warning'
|
||||
? 'bg-amber-400 shadow-[0_0_12px_rgba(245,158,11,0.6)]'
|
||||
: 'bg-red-400 shadow-[0_0_12px_rgba(239,68,68,0.6)] animate-pulse'
|
||||
return <div className={`w-2.5 h-2.5 rounded-full ${color}`} />
|
||||
}
|
||||
|
||||
// Status Badge
|
||||
const StatusBadge = ({ status }: { status: string }) => {
|
||||
const styles: Record<string, string> = {
|
||||
ok: 'bg-emerald-500/20 text-emerald-400',
|
||||
@@ -80,15 +158,17 @@ const StatusBadge = ({ status }: { status: string }) => {
|
||||
)
|
||||
}
|
||||
|
||||
// Progress Bar
|
||||
const ProgressBar = ({ percent, showLabel = true }: { percent: number; showLabel?: boolean }) => {
|
||||
const color = percent < 70 ? 'from-emerald-500 to-emerald-400' : percent < 85 ? 'from-amber-500 to-amber-400' : 'from-red-500 to-red-400'
|
||||
const ProgressBar = ({ percent, showLabel = true, size = 'md', inverted = false }: { percent: number; showLabel?: boolean; size?: 'sm' | 'md'; inverted?: boolean }) => {
|
||||
const color = inverted
|
||||
? (percent > 90 ? 'from-emerald-500 to-emerald-400' : percent > 70 ? 'from-amber-500 to-amber-400' : 'from-red-500 to-red-400')
|
||||
: (percent < 70 ? 'from-emerald-500 to-emerald-400' : percent < 85 ? 'from-amber-500 to-amber-400' : 'from-red-500 to-red-400')
|
||||
const height = size === 'sm' ? 'h-1.5' : 'h-2'
|
||||
return (
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex-1 h-2 bg-white/10 rounded-full overflow-hidden">
|
||||
<div className={`flex-1 ${height} bg-white/10 rounded-full overflow-hidden`}>
|
||||
<motion.div
|
||||
initial={{ width: 0 }}
|
||||
animate={{ width: `${percent}%` }}
|
||||
animate={{ width: `${Math.min(percent, 100)}%` }}
|
||||
transition={{ duration: 0.8, ease: 'easeOut' }}
|
||||
className={`h-full rounded-full bg-gradient-to-r ${color}`}
|
||||
/>
|
||||
@@ -98,19 +178,13 @@ const ProgressBar = ({ percent, showLabel = true }: { percent: number; showLabel
|
||||
)
|
||||
}
|
||||
|
||||
// Summary Card
|
||||
const SummaryCard = ({ value, label, color, icon: Icon }: { value: number; label: string; color: string; icon: React.ElementType }) => (
|
||||
<motion.div
|
||||
variants={itemVariants}
|
||||
className="glass-card p-6 text-center"
|
||||
>
|
||||
<Icon className={`w-8 h-8 mx-auto mb-3 ${color}`} />
|
||||
<div className={`text-4xl font-bold ${color}`}>{value}</div>
|
||||
<div className="text-sm text-zinc-400 mt-1">{label}</div>
|
||||
</motion.div>
|
||||
const MetricPill = ({ label, value, unit = '%' }: { label: string; value: number | string; unit?: string }) => (
|
||||
<span className="text-xs bg-white/5 px-2 py-1 rounded">
|
||||
<span className="text-zinc-500">{label}</span>{' '}
|
||||
<span className="text-white font-medium">{value}{unit}</span>
|
||||
</span>
|
||||
)
|
||||
|
||||
// Category Card
|
||||
const CategoryCard = ({
|
||||
title,
|
||||
icon: Icon,
|
||||
@@ -136,45 +210,129 @@ const CategoryCard = ({
|
||||
</motion.div>
|
||||
)
|
||||
|
||||
// Monitor Item
|
||||
const MonitorItemRow = ({ item }: { item: MonitorItem }) => (
|
||||
<div className="flex items-center justify-between p-3 rounded-xl bg-white/[0.02] hover:bg-white/[0.05] transition-colors">
|
||||
<div className="flex-1">
|
||||
<div className="text-sm font-medium text-white">{item.name}</div>
|
||||
{item.details && (
|
||||
<div className="flex flex-wrap gap-2 mt-2">
|
||||
{item.details.cpu !== undefined && (
|
||||
<span className="text-xs bg-white/5 px-2 py-1 rounded">
|
||||
<span className="text-zinc-500">CPU</span>{' '}
|
||||
<span className="text-white font-medium">{item.details.cpu}%</span>
|
||||
</span>
|
||||
)}
|
||||
{item.details.ram !== undefined && (
|
||||
<span className="text-xs bg-white/5 px-2 py-1 rounded">
|
||||
<span className="text-zinc-500">RAM</span>{' '}
|
||||
<span className="text-white font-medium">{item.details.ram}%</span>
|
||||
</span>
|
||||
)}
|
||||
{item.details.disk !== undefined && (
|
||||
<span className="text-xs bg-white/5 px-2 py-1 rounded">
|
||||
<span className="text-zinc-500">Disco</span>{' '}
|
||||
<span className="text-white font-medium">{item.details.disk}%</span>
|
||||
</span>
|
||||
)}
|
||||
{item.details.response_time !== undefined && (
|
||||
<span className="text-xs text-zinc-400">{item.details.response_time}s</span>
|
||||
)}
|
||||
{item.details.domain && (
|
||||
<span className="text-xs text-zinc-500">{item.details.domain}</span>
|
||||
)}
|
||||
// Cluster Overview Hero
|
||||
const ClusterHero = ({ data }: { data: MonitorData }) => {
|
||||
const clusterItem = data.items.server?.find(s => s.name === 'Cluster Proxmox')
|
||||
const d = clusterItem?.details || {}
|
||||
|
||||
return (
|
||||
<motion.div variants={itemVariants} className="glass-card overflow-hidden col-span-full">
|
||||
<div className="px-6 py-5 border-b border-white/5 flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500 to-violet-600 flex items-center justify-center shadow-lg shadow-brand-500/30">
|
||||
<MonitorDot className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-bold text-white">Cluster Proxmox</h2>
|
||||
<p className="text-xs text-zinc-500">cluster.descomplicar.pt - 5.9.90.75 - Hetzner AX162-R</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<StatusBadge status={item.status} />
|
||||
<div className="flex items-center gap-3">
|
||||
<StatusDot status={data.overall} />
|
||||
<span className={`text-sm font-medium ${
|
||||
data.overall === 'ok' ? 'text-emerald-400' :
|
||||
data.overall === 'warning' ? 'text-amber-400' : 'text-red-400'
|
||||
}`}>
|
||||
{data.overall === 'ok' ? 'Operacional' : data.overall === 'warning' ? 'Atencao' : 'Critico'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-4">
|
||||
<StatMini icon={Cpu} label="CPU" value={d.cpu ? `${d.cpu}%` : '--'} />
|
||||
<StatMini icon={MemoryStick} label="RAM" value="128 GB" sub="88 GB alocado" />
|
||||
<StatMini icon={HardDrive} label="NVMe" value="950 GB" sub="RAID1" />
|
||||
<StatMini icon={Database} label="HDD" value="16 TB" sub="backups + dados" />
|
||||
<StatMini icon={Server} label="VMs" value="4" sub="3 QEMU + 1 LXC" />
|
||||
<StatMini icon={CheckCircle2} label="OK" value={String(data.stats.total_ok)} color="text-emerald-400" />
|
||||
<StatMini icon={AlertTriangle} label="Alertas" value={String(data.stats.total_warning + data.stats.total_critical)} color={data.stats.total_critical > 0 ? 'text-red-400' : data.stats.total_warning > 0 ? 'text-amber-400' : 'text-emerald-400'} />
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
const StatMini = ({ icon: Icon, label, value, sub, color = 'text-white' }: {
|
||||
icon: React.ElementType; label: string; value: string; sub?: string; color?: string
|
||||
}) => (
|
||||
<div className="text-center p-3 rounded-xl bg-white/[0.03]">
|
||||
<Icon className="w-4 h-4 mx-auto mb-2 text-zinc-500" />
|
||||
<div className={`text-lg font-bold ${color}`}>{value}</div>
|
||||
<div className="text-xs text-zinc-500">{label}</div>
|
||||
{sub && <div className="text-[10px] text-zinc-600 mt-0.5">{sub}</div>}
|
||||
</div>
|
||||
)
|
||||
|
||||
// Main Monitor Page
|
||||
// VM Card
|
||||
const VMCard = ({ item, config }: { item?: MonitorItem; config: VMConfig }) => {
|
||||
const Icon = config.icon
|
||||
const d = item?.details || {}
|
||||
const status = item?.status || 'ok'
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
variants={itemVariants}
|
||||
className={`glass-card overflow-hidden border ${config.accentBorder}`}
|
||||
>
|
||||
<div className="px-5 py-4 border-b border-white/5 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`w-9 h-9 rounded-lg ${config.accentBg} flex items-center justify-center`}>
|
||||
<Icon className={`w-5 h-5 ${config.accent}`} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="text-sm font-bold text-white">{config.name}</h3>
|
||||
<span className="text-[10px] text-zinc-600 font-mono">{config.id}</span>
|
||||
</div>
|
||||
<p className="text-xs text-zinc-500">{config.ip} - {config.type}</p>
|
||||
</div>
|
||||
</div>
|
||||
<StatusBadge status={status} />
|
||||
</div>
|
||||
|
||||
<div className="p-4 space-y-3">
|
||||
<p className="text-xs text-zinc-400">{config.role}</p>
|
||||
|
||||
{d.cpu !== undefined && (
|
||||
<div>
|
||||
<div className="flex justify-between text-xs mb-1">
|
||||
<span className="text-zinc-500">CPU</span>
|
||||
<span className="text-white font-medium">{d.cpu}%</span>
|
||||
</div>
|
||||
<ProgressBar percent={Number(d.cpu)} showLabel={false} size="sm" />
|
||||
</div>
|
||||
)}
|
||||
{d.ram !== undefined && (
|
||||
<div>
|
||||
<div className="flex justify-between text-xs mb-1">
|
||||
<span className="text-zinc-500">RAM</span>
|
||||
<span className="text-white font-medium">{d.ram}%</span>
|
||||
</div>
|
||||
<ProgressBar percent={Number(d.ram)} showLabel={false} size="sm" />
|
||||
</div>
|
||||
)}
|
||||
{d.disk !== undefined && (
|
||||
<div>
|
||||
<div className="flex justify-between text-xs mb-1">
|
||||
<span className="text-zinc-500">Disco</span>
|
||||
<span className="text-white font-medium">{d.disk}%</span>
|
||||
</div>
|
||||
<ProgressBar percent={Number(d.disk)} showLabel={false} size="sm" />
|
||||
</div>
|
||||
)}
|
||||
{d.load !== undefined && (
|
||||
<div className="flex items-center gap-2 pt-1">
|
||||
<MetricPill label="Load" value={d.load} unit="" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
// --- Main Component ---
|
||||
|
||||
export default function Monitor() {
|
||||
const [data, setData] = useState<MonitorData | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
@@ -188,7 +346,9 @@ export default function Monitor() {
|
||||
const json = await response.json()
|
||||
setData(json)
|
||||
} catch {
|
||||
setData(getMockData())
|
||||
if (import.meta.env.DEV) {
|
||||
setData(getMockData())
|
||||
}
|
||||
} finally {
|
||||
setLoading(false)
|
||||
setRefreshing(false)
|
||||
@@ -204,13 +364,9 @@ export default function Monitor() {
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-mesh flex items-center justify-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="text-center"
|
||||
>
|
||||
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="text-center">
|
||||
<Activity className="w-12 h-12 text-brand-400 mx-auto mb-4 animate-pulse" />
|
||||
<p className="text-zinc-400">A carregar monitorização...</p>
|
||||
<p className="text-zinc-400">A carregar monitorizacao...</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
)
|
||||
@@ -218,8 +374,10 @@ export default function Monitor() {
|
||||
|
||||
if (!data) return null
|
||||
|
||||
// Items já vêm agrupados por categoria da API
|
||||
const groupedItems = data.items
|
||||
const { items } = data
|
||||
|
||||
// Match server items to VM config
|
||||
const getVMItem = (name: string) => items.server?.find(s => s.name === name)
|
||||
|
||||
const overallColor = {
|
||||
ok: 'text-emerald-400 bg-emerald-500/20',
|
||||
@@ -229,8 +387,8 @@ export default function Monitor() {
|
||||
|
||||
const overallLabel = {
|
||||
ok: 'Operacional',
|
||||
warning: 'Atenção',
|
||||
critical: 'Crítico',
|
||||
warning: 'Atencao',
|
||||
critical: 'Critico',
|
||||
}[data.overall]
|
||||
|
||||
return (
|
||||
@@ -248,8 +406,8 @@ export default function Monitor() {
|
||||
<Zap className="w-6 h-6 text-white" />
|
||||
</motion.div>
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-white tracking-tight">Monitorização</h1>
|
||||
<p className="text-xs text-zinc-500">Sistemas Descomplicar</p>
|
||||
<h1 className="text-xl font-bold text-white tracking-tight">Monitorizacao</h1>
|
||||
<p className="text-xs text-zinc-500">Cluster Proxmox Descomplicar</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -287,34 +445,46 @@ export default function Monitor() {
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="max-w-[1600px] mx-auto px-6 lg:px-8 py-8">
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="show"
|
||||
>
|
||||
{/* Summary Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-5 mb-8">
|
||||
<SummaryCard value={data.stats.total_ok} label="Operacionais" color="text-emerald-400" icon={CheckCircle2} />
|
||||
<SummaryCard value={data.stats.total_warning} label="Avisos" color="text-amber-400" icon={AlertTriangle} />
|
||||
<SummaryCard value={data.stats.total_critical} label="Críticos" color="text-red-400" icon={XCircle} />
|
||||
<motion.div variants={containerVariants} initial="hidden" animate="show">
|
||||
|
||||
{/* Section 1: Cluster Overview */}
|
||||
<ClusterHero data={data} />
|
||||
|
||||
{/* Section 2: VM Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-5 mt-6">
|
||||
{Object.entries(VM_CONFIG).map(([key, config]) => (
|
||||
<VMCard key={key} item={getVMItem(key)} config={config} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Monitor Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
|
||||
{/* Servers */}
|
||||
{groupedItems.server && (
|
||||
<CategoryCard title="Servidores" icon={Server} count={groupedItems.server.length}>
|
||||
{groupedItems.server.map((item) => (
|
||||
<MonitorItemRow key={item.id} item={item} />
|
||||
{/* Section 3: Detail Categories */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 mt-8">
|
||||
|
||||
{/* Sites WordPress */}
|
||||
{items.site && items.site.length > 0 && (
|
||||
<CategoryCard title="Sites WordPress" icon={Globe} count={items.site.length}>
|
||||
{items.site.map((item) => (
|
||||
<div key={item.id} className="flex items-center justify-between p-3 rounded-xl bg-white/[0.02] hover:bg-white/[0.05] transition-colors">
|
||||
<div className="flex-1">
|
||||
<div className="text-sm font-medium text-white">{item.name}</div>
|
||||
<div className="flex gap-2 mt-1">
|
||||
{item.details?.domain && <span className="text-xs text-zinc-500">{item.details.domain}</span>}
|
||||
{item.details?.response_time !== undefined && (
|
||||
<span className="text-xs text-zinc-600">{item.details.response_time}s</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<StatusBadge status={item.status} />
|
||||
</div>
|
||||
))}
|
||||
</CategoryCard>
|
||||
)}
|
||||
|
||||
{/* Services - Compact Grid */}
|
||||
{groupedItems.service && (
|
||||
<CategoryCard title="Serviços Críticos" icon={Wifi} count={groupedItems.service.length}>
|
||||
{/* Servicos EasyPanel */}
|
||||
{items.service && items.service.length > 0 && (
|
||||
<CategoryCard title="Servicos" icon={Wifi} count={items.service.length}>
|
||||
<div className="grid grid-cols-2 gap-x-3 gap-y-1.5">
|
||||
{groupedItems.service.map((item) => (
|
||||
{items.service.map((item) => (
|
||||
<div key={item.id} className="flex items-center gap-2 px-2 py-1.5 rounded-lg hover:bg-white/[0.04] transition-colors">
|
||||
<div className={`w-2 h-2 rounded-full flex-shrink-0 ${
|
||||
item.status === 'ok' || item.status === 'up' ? 'bg-emerald-400' :
|
||||
@@ -327,49 +497,45 @@ export default function Monitor() {
|
||||
</CategoryCard>
|
||||
)}
|
||||
|
||||
{/* Sites */}
|
||||
{groupedItems.site && (
|
||||
<CategoryCard title="Sites WordPress" icon={Globe} count={groupedItems.site.length}>
|
||||
{groupedItems.site.map((item) => (
|
||||
<MonitorItemRow key={item.id} item={item} />
|
||||
))}
|
||||
</CategoryCard>
|
||||
)}
|
||||
|
||||
{/* Containers */}
|
||||
{groupedItems.container && groupedItems.container[0] && (
|
||||
<CategoryCard title="Containers EasyPanel" icon={Container}>
|
||||
<div className="text-center py-6">
|
||||
{/* Containers EasyPanel */}
|
||||
{items.container && items.container[0] && (
|
||||
<CategoryCard title="Containers Docker" icon={Container}>
|
||||
<div className="text-center py-4">
|
||||
<div className="text-5xl font-bold text-emerald-400">
|
||||
{groupedItems.container[0].details?.up || 0}
|
||||
{items.container[0].details?.up || 0}
|
||||
</div>
|
||||
<div className="text-sm text-zinc-400 mt-2">
|
||||
de {groupedItems.container[0].details?.total || 0} containers activos
|
||||
de {items.container[0].details?.total || 0} containers activos
|
||||
</div>
|
||||
{(groupedItems.container[0].details?.down || 0) > 0 && (
|
||||
<div className="text-sm text-red-400 mt-2">
|
||||
{groupedItems.container[0].details.down} containers em baixo
|
||||
{(items.container[0].details?.down || 0) > 0 && (
|
||||
<div className="text-sm text-red-400 mt-1">
|
||||
{items.container[0].details.down} em baixo
|
||||
</div>
|
||||
)}
|
||||
<div className="mt-4 px-4">
|
||||
<ProgressBar
|
||||
percent={Math.round((groupedItems.container[0].details?.up / groupedItems.container[0].details?.total) * 100) || 0}
|
||||
percent={Math.round((items.container[0].details?.up / items.container[0].details?.total) * 100) || 0}
|
||||
showLabel={false}
|
||||
inverted
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CategoryCard>
|
||||
)}
|
||||
|
||||
{/* Backups */}
|
||||
{groupedItems.backup && (
|
||||
<CategoryCard title="Backups" icon={Database} count={groupedItems.backup.length}>
|
||||
{groupedItems.backup.map((item) => (
|
||||
{/* Backups - 3 camadas */}
|
||||
{items.backup && items.backup.length > 0 && (
|
||||
<CategoryCard title="Backups" icon={Database} count={items.backup.length}>
|
||||
{items.backup.map((item) => (
|
||||
<div key={item.id} className="flex items-center justify-between p-3 rounded-xl bg-white/[0.02]">
|
||||
<div>
|
||||
<div className="text-sm font-medium text-white">{item.name}</div>
|
||||
{item.details?.age_hours !== undefined && (
|
||||
<div className="text-xs text-zinc-500 mt-1">Último: há {item.details.age_hours}h</div>
|
||||
<div className="text-xs text-zinc-500 mt-1">
|
||||
{item.details.age_hours < 1 ? 'Agora' :
|
||||
item.details.age_hours < 24 ? `ha ${item.details.age_hours}h` :
|
||||
`ha ${Math.floor(item.details.age_hours / 24)}d`}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<StatusBadge status={item.status} />
|
||||
@@ -379,9 +545,9 @@ export default function Monitor() {
|
||||
)}
|
||||
|
||||
{/* Storage */}
|
||||
{groupedItems.storage && (
|
||||
<CategoryCard title="Armazenamento" icon={HardDrive} count={groupedItems.storage.length}>
|
||||
{groupedItems.storage.map((item) => (
|
||||
{items.storage && items.storage.length > 0 && (
|
||||
<CategoryCard title="Storage" icon={HardDrive} count={items.storage.length}>
|
||||
{items.storage.map((item) => (
|
||||
<div key={item.id} className="p-3 rounded-xl bg-white/[0.02]">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium text-white">{item.name}</span>
|
||||
@@ -395,21 +561,20 @@ export default function Monitor() {
|
||||
</CategoryCard>
|
||||
)}
|
||||
|
||||
{/* Maintenance */}
|
||||
{groupedItems.maintenance && groupedItems.maintenance[0] && (() => {
|
||||
const m = groupedItems.maintenance[0]
|
||||
{/* Manutencao */}
|
||||
{items.maintenance && items.maintenance[0] && (() => {
|
||||
const m = items.maintenance[0]
|
||||
const d = m.details || {}
|
||||
const ageH = d.age_hours ?? 0
|
||||
const ageDays = Math.floor(ageH / 24)
|
||||
const ageLabel = ageH < 24 ? `há ${ageH}h` : `há ${ageDays}d`
|
||||
const ageLabel = ageH < 1 ? 'agora' : ageH < 24 ? `ha ${ageH}h` : `ha ${Math.floor(ageH / 24)}d`
|
||||
const actions = (d.logs_truncated || 0) + (d.images_removed || 0) + (d.orphan_volumes || 0) + (d.tmp_cleaned || 0)
|
||||
return (
|
||||
<CategoryCard title="Manutenção" icon={Wrench}>
|
||||
<CategoryCard title="Manutencao" icon={Wrench}>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between p-3 rounded-xl bg-white/[0.02]">
|
||||
<div>
|
||||
<div className="text-sm font-medium text-white">Auto-Cleanup</div>
|
||||
<div className="text-xs text-zinc-500 mt-1">Último: {ageLabel}</div>
|
||||
<div className="text-xs text-zinc-500 mt-1">Ultimo: {ageLabel}</div>
|
||||
</div>
|
||||
<StatusBadge status={m.status} />
|
||||
</div>
|
||||
@@ -436,34 +601,62 @@ export default function Monitor() {
|
||||
)
|
||||
})()}
|
||||
|
||||
{/* WP Updates */}
|
||||
{groupedItems.wp_update && groupedItems.wp_update[0] && (
|
||||
<CategoryCard title="WordPress Updates" icon={Globe}>
|
||||
<div className="text-center py-6">
|
||||
{(groupedItems.wp_update[0].details?.manual_updates || 0) > 0 ? (
|
||||
{/* WP Updates - per-site detail from 'site' category */}
|
||||
{(() => {
|
||||
const sites = items.site || []
|
||||
const sitesWithUpdates = sites.filter((s: MonitorItem) => {
|
||||
const counts = s.details?.updates?.counts
|
||||
return counts && counts.total > 0
|
||||
})
|
||||
const totalUpdates = sitesWithUpdates.reduce((sum: number, s: MonitorItem) => sum + (s.details?.updates?.counts?.total || 0), 0)
|
||||
const wpAgg = items.wp_update?.[0]
|
||||
|
||||
return (
|
||||
<CategoryCard title="WordPress Updates" icon={Globe} count={sitesWithUpdates.length > 0 ? sitesWithUpdates.length : undefined}>
|
||||
{sitesWithUpdates.length > 0 ? (
|
||||
<>
|
||||
<div className="text-5xl font-bold text-amber-400">
|
||||
{groupedItems.wp_update[0].details.manual_updates}
|
||||
</div>
|
||||
<div className="text-sm text-zinc-400 mt-2">
|
||||
plugins precisam update manual
|
||||
<div className="text-center pb-3">
|
||||
<div className="text-3xl font-bold text-amber-400">{totalUpdates}</div>
|
||||
<div className="text-xs text-zinc-500 mt-1">updates em {sitesWithUpdates.length} sites</div>
|
||||
</div>
|
||||
{sitesWithUpdates.map((site: MonitorItem) => {
|
||||
const counts = site.details?.updates?.counts || {}
|
||||
return (
|
||||
<div key={site.id} className="p-3 rounded-xl bg-white/[0.02]">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-white">{site.name}</span>
|
||||
<span className="text-xs font-semibold text-amber-400">{counts.total} updates</span>
|
||||
</div>
|
||||
<div className="flex gap-3 mt-1">
|
||||
{counts.plugins > 0 && <span className="text-xs text-zinc-500">{counts.plugins} plugins</span>}
|
||||
{counts.themes > 0 && <span className="text-xs text-zinc-500">{counts.themes} temas</span>}
|
||||
{(counts.core || 0) > 0 && <span className="text-xs text-red-400">{counts.core} core</span>}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</>
|
||||
) : wpAgg && (wpAgg.details?.manual_updates || 0) > 0 ? (
|
||||
<div className="text-center py-4">
|
||||
<div className="text-4xl font-bold text-amber-400">{wpAgg.details.manual_updates}</div>
|
||||
<div className="text-sm text-zinc-400 mt-2">plugins precisam update</div>
|
||||
<div className="text-xs text-zinc-600 mt-2">Sem detalhe por site disponivel</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="text-center py-4">
|
||||
<CheckCircle2 className="w-12 h-12 text-emerald-400 mx-auto" />
|
||||
<div className="text-sm text-zinc-400 mt-2">Tudo actualizado</div>
|
||||
</>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CategoryCard>
|
||||
)}
|
||||
</CategoryCard>
|
||||
)
|
||||
})()}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-center gap-2 mt-8 text-sm text-zinc-500">
|
||||
<Clock className="w-4 h-4" />
|
||||
<span>Última actualização: {new Date().toLocaleTimeString('pt-PT')}</span>
|
||||
<span>Ultima actualizacao: {new Date().toLocaleTimeString('pt-PT')}</span>
|
||||
<span className="text-zinc-700">·</span>
|
||||
<span>Auto-refresh: 60s</span>
|
||||
</div>
|
||||
@@ -474,74 +667,74 @@ export default function Monitor() {
|
||||
)
|
||||
}
|
||||
|
||||
// Mock data
|
||||
// Mock data reflecting new cluster architecture
|
||||
function getMockData(): MonitorData {
|
||||
const mockItems: Record<string, MonitorItem[]> = {
|
||||
server: [
|
||||
{ id: 5, name: 'CWP Server', category: 'server', status: 'up', details: { cpu: 7.3, ram: 10.2, disk: 39 }, last_check: '' },
|
||||
{ id: 6, name: 'EasyPanel', category: 'server', status: 'up', details: { cpu: 20.5, ram: 20.2, disk: 41 }, last_check: '' },
|
||||
{ id: 296, name: 'MCP Hub', category: 'server', status: 'up', details: { cpu: 1.0, load: 0.0 }, last_check: '' },
|
||||
{ id: 297, name: 'Meet', category: 'server', status: 'up', details: { cpu: 4.7, load: 0.0 }, last_check: '' },
|
||||
{ id: 298, name: 'WhatsApp', category: 'server', status: 'up', details: { cpu: 3.0, load: 0.04 }, last_check: '' },
|
||||
{ id: 299, name: 'WhatSMS', category: 'server', status: 'up', details: { cpu: 2.1, load: 0.08 }, last_check: '' },
|
||||
{ id: 1, name: 'Cluster Proxmox', category: 'server', status: 'ok', details: { cpu: 12.5 }, last_check: '' },
|
||||
{ id: 100, name: 'CWP Server', category: 'server', status: 'ok', details: { cpu: 7.3, ram: 25.1, disk: 39, load: 0.42 }, last_check: '' },
|
||||
{ id: 101, name: 'EasyPanel', category: 'server', status: 'ok', details: { cpu: 20.5, ram: 53.1, disk: 41, load: 1.2 }, last_check: '' },
|
||||
{ id: 102, name: 'Dev', category: 'server', status: 'ok', details: { cpu: 3.0, ram: 18.5, disk: 28 }, last_check: '' },
|
||||
{ id: 103, name: 'Gateway', category: 'server', status: 'ok', details: { cpu: 5.2, ram: 42.0, disk: 52, load: 0.3 }, last_check: '' },
|
||||
],
|
||||
service: [
|
||||
{ id: 1, name: 'Planeamento EAL', category: 'service', status: 'up', details: {}, last_check: '' },
|
||||
{ id: 2, name: 'Desk CRM', category: 'service', status: 'up', details: {}, last_check: '' },
|
||||
{ id: 3, name: 'Automator N8N', category: 'service', status: 'up', details: {}, last_check: '' },
|
||||
{ id: 4, name: 'NextCloud', category: 'service', status: 'up', details: {}, last_check: '' },
|
||||
{ id: 517, name: 'Gitea', category: 'service', status: 'up', details: {}, last_check: '' },
|
||||
{ id: 518, name: 'Meet Jitsi', category: 'service', status: 'up', details: {}, last_check: '' },
|
||||
{ id: 519, name: 'WikiJS', category: 'service', status: 'up', details: {}, last_check: '' },
|
||||
{ id: 521, name: 'Google Docs', category: 'service', status: 'up', details: {}, last_check: '' },
|
||||
{ id: 549, name: 'MCP Hub', category: 'service', status: 'up', details: {}, last_check: '' },
|
||||
{ id: 515, name: 'WhatSMS', category: 'service', status: 'up', details: {}, last_check: '' },
|
||||
{ id: 41594, name: 'Syncthing', category: 'service', status: 'up', details: {}, last_check: '' },
|
||||
{ id: 1, name: 'Desk CRM', category: 'service', status: 'up', details: {}, last_check: '' },
|
||||
{ id: 2, name: 'N8N', category: 'service', status: 'up', details: {}, last_check: '' },
|
||||
{ id: 3, name: 'Gitea', category: 'service', status: 'up', details: {}, last_check: '' },
|
||||
{ id: 4, name: 'WikiJS', category: 'service', status: 'up', details: {}, last_check: '' },
|
||||
{ id: 5, name: 'Authentik', category: 'service', status: 'up', details: {}, last_check: '' },
|
||||
{ id: 6, name: 'Metabase', category: 'service', status: 'up', details: {}, last_check: '' },
|
||||
{ id: 7, name: 'NextCloud', category: 'service', status: 'up', details: {}, last_check: '' },
|
||||
{ id: 8, name: 'Syncthing', category: 'service', status: 'up', details: {}, last_check: '' },
|
||||
{ id: 9, name: 'MCP Gateway', category: 'service', status: 'up', details: {}, last_check: '' },
|
||||
{ id: 10, name: 'Outline', category: 'service', status: 'up', details: {}, last_check: '' },
|
||||
{ id: 11, name: 'Penpot', category: 'service', status: 'warning', details: {}, last_check: '' },
|
||||
{ id: 12, name: 'WhatSMS', category: 'service', status: 'up', details: {}, last_check: '' },
|
||||
],
|
||||
site: [
|
||||
{ id: 15960, name: 'Descomplicar', category: 'site', status: 'up', details: { domain: 'descomplicar.pt', response_time: 0.093 }, last_check: '' },
|
||||
{ id: 15961, name: 'Emanuel Almeida', category: 'site', status: 'up', details: { domain: 'emanuelalmeida.pt', response_time: 1.687 }, last_check: '' },
|
||||
{ id: 15959, name: 'Family Clinic', category: 'site', status: 'up', details: { domain: 'familyclinic.pt', response_time: 2.712 }, last_check: '' },
|
||||
{ id: 15962, name: 'WTC', category: 'site', status: 'up', details: { domain: 'wtc-group.com' }, last_check: '' },
|
||||
{ id: 15963, name: 'Carstuff', category: 'site', status: 'down', details: { domain: 'carstuff.pt' }, last_check: '' },
|
||||
{ id: 15964, name: 'Espiral Senior', category: 'site', status: 'up', details: { domain: 'espiralsenior.pt' }, last_check: '' },
|
||||
{ id: 15965, name: 'Karate Gaia', category: 'site', status: 'up', details: { domain: 'karategaia.pt' }, last_check: '' },
|
||||
{ id: 1, name: 'Descomplicar', category: 'site', status: 'up', details: { domain: 'descomplicar.pt', response_time: 0.093 }, last_check: '' },
|
||||
{ id: 2, name: 'Emanuel Almeida', category: 'site', status: 'up', details: { domain: 'emanuelalmeida.pt', response_time: 1.687 }, last_check: '' },
|
||||
{ id: 3, name: 'Family Clinic', category: 'site', status: 'up', details: { domain: 'familyclinic.pt', response_time: 2.712 }, last_check: '' },
|
||||
{ id: 4, name: 'WTC', category: 'site', status: 'up', details: { domain: 'wtc-group.com' }, last_check: '' },
|
||||
{ id: 5, name: 'Carstuff', category: 'site', status: 'down', details: { domain: 'carstuff.pt' }, last_check: '' },
|
||||
{ id: 6, name: 'Espiral Senior', category: 'site', status: 'up', details: { domain: 'espiralsenior.pt' }, last_check: '' },
|
||||
{ id: 7, name: 'Karate Gaia', category: 'site', status: 'up', details: { domain: 'karategaia.pt' }, last_check: '' },
|
||||
],
|
||||
container: [
|
||||
{ id: 7, name: 'EasyPanel Containers', category: 'container', status: 'warning', details: { up: 83, total: 87, down: 4 }, last_check: '' },
|
||||
{ id: 1, name: 'Docker Swarm', category: 'container', status: 'ok', details: { up: 44, total: 46, down: 2 }, last_check: '' },
|
||||
],
|
||||
backup: [
|
||||
{ id: 15967, name: 'MySQL Hourly', category: 'backup', status: 'ok', details: { age_hours: 1 }, last_check: '' },
|
||||
{ id: 15968, name: 'CWP Accounts', category: 'backup', status: 'warning', details: { age_hours: 48 }, last_check: '' },
|
||||
{ id: 15969, name: 'Easy Backup', category: 'backup', status: 'ok', details: { age_hours: 12 }, last_check: '' },
|
||||
{ id: 15970, name: 'Server->Easy Sync', category: 'backup', status: 'failed', details: { age_hours: 72 }, last_check: '' },
|
||||
{ id: 1, name: 'Proxmox vzdump', category: 'backup', status: 'ok', details: { age_hours: 8 }, last_check: '' },
|
||||
{ id: 2, name: 'CWP Accounts', category: 'backup', status: 'ok', details: { age_hours: 18 }, last_check: '' },
|
||||
{ id: 3, name: 'MySQL Hourly', category: 'backup', status: 'ok', details: { age_hours: 1 }, last_check: '' },
|
||||
],
|
||||
storage: [
|
||||
{ id: 15971, name: 'gordo', category: 'storage', status: 'ok', details: { used: '89GB', total: '200GB', percent: 45 }, last_check: '' },
|
||||
{ id: 15972, name: 'gordito', category: 'storage', status: 'ok', details: { used: '42GB', total: '100GB', percent: 42 }, last_check: '' },
|
||||
],
|
||||
wp_update: [
|
||||
{ id: 25, name: 'WordPress Plugins', category: 'wp_update', status: 'warning', details: { manual_updates: 3 }, last_check: '' },
|
||||
{ id: 1, name: 'NVMe RAID1 (vg0)', category: 'storage', status: 'ok', details: { used: '650GB', total: '950GB', percent: 68 }, last_check: '' },
|
||||
{ id: 2, name: 'HDD pbs-local', category: 'storage', status: 'ok', details: { used: '2.9TB', total: '6TB', percent: 49 }, last_check: '' },
|
||||
{ id: 3, name: 'HDD vm-storage', category: 'storage', status: 'ok', details: { used: '480GB', total: '8.5TB', percent: 6 }, last_check: '' },
|
||||
],
|
||||
maintenance: [
|
||||
{ id: 48558, name: 'EasyPanel Cleanup', category: 'maintenance', status: 'ok', details: { age_hours: 0, disk_percent: 15, freed_mb: 0, logs_truncated: 0, images_removed: 0, orphan_volumes: 0, tmp_cleaned: 0 }, last_check: '' },
|
||||
{ id: 1, name: 'EasyPanel Cleanup', category: 'maintenance', status: 'ok', details: { age_hours: 2, disk_percent: 41, freed_mb: 128, logs_truncated: 3, images_removed: 5, orphan_volumes: 0, tmp_cleaned: 1 }, last_check: '' },
|
||||
],
|
||||
wp_update: [
|
||||
{ id: 1, name: 'WordPress Plugins', category: 'wp_update', status: 'ok', details: { manual_updates: 0 }, last_check: '' },
|
||||
],
|
||||
}
|
||||
|
||||
return {
|
||||
overall: 'warning',
|
||||
summary: [
|
||||
{ category: 'server', total: 6, ok: 6, warning: 0, critical: 0 },
|
||||
{ category: 'service', total: 11, ok: 11, warning: 0, critical: 0 },
|
||||
{ category: 'server', total: 5, ok: 5, warning: 0, critical: 0 },
|
||||
{ category: 'service', total: 12, ok: 11, warning: 1, critical: 0 },
|
||||
{ category: 'site', total: 7, ok: 6, warning: 0, critical: 1 },
|
||||
{ category: 'container', total: 1, ok: 0, warning: 1, critical: 0 },
|
||||
{ category: 'backup', total: 4, ok: 2, warning: 1, critical: 1 },
|
||||
{ category: 'storage', total: 2, ok: 2, warning: 0, critical: 0 },
|
||||
{ category: 'container', total: 1, ok: 1, warning: 0, critical: 0 },
|
||||
{ category: 'backup', total: 3, ok: 3, warning: 0, critical: 0 },
|
||||
{ category: 'storage', total: 3, ok: 3, warning: 0, critical: 0 },
|
||||
],
|
||||
stats: {
|
||||
total_ok: 26,
|
||||
total_warning: 2,
|
||||
total_critical: 2
|
||||
total_ok: 30,
|
||||
total_warning: 1,
|
||||
total_critical: 1
|
||||
},
|
||||
items: mockItems,
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user