import AppLayout from '@/Layouts/AppLayout'; import { Head } from '@inertiajs/react'; import { motion } from 'framer-motion'; import { Activity, Bell, CheckCircle, AlertTriangle, XCircle, Plus } from 'lucide-react'; import { GlassCard, StatCard } from '@/Components/ui/GlassCard'; import { StatusBadge } from '@/Components/ui/StatusBadge'; import { Button } from '@/Components/ui/Button'; import { DataTable } from '@/Components/ui/DataTable'; import { ProgressBar } from '@/Components/ui/ProgressBar'; import { timeAgo } from '@/lib/utils'; import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, AreaChart, Area } from 'recharts'; // Demo metric data const metricStream = Array.from({ length: 30 }, (_, i) => ({ t: `-${30 - i}m`, cpu: 30 + Math.sin(i * 0.3) * 20 + Math.random() * 10, mem: 55 + Math.cos(i * 0.2) * 15 + Math.random() * 8, net: Math.abs(Math.sin(i * 0.5) * 400 + Math.random() * 100), })); export default function MonitoringIndex({ alerts, alert_stats, dashboards }) { const firing = alerts?.filter(a => a.status === 'firing') ?? []; const acked = alerts?.filter(a => a.status === 'acknowledged') ?? []; const alertColumns = [ { header: 'Alert', accessor: 'title', render: row => (

{row.title}

{row.target_name}

)}, { header: 'Severity', accessor: 'severity', render: row => ( )}, { header: 'Status', accessor: 'status', render: row => ( )}, { header: 'Fired', accessor: 'created_at', render: row => ( {timeAgo(row.created_at)} )}, { header: '', key: 'actions', render: row => ( row.status === 'firing' && ( ) )}, ]; return (

Unified Monitoring

Real-time metrics, alerts, and dashboards

{/* Alert Stats */}
{/* Charts */}

CPU & Memory

Average across all VMs — last 30 min

Network I/O

Mbps across all endpoints
{/* Active Alerts Table */}

Active Alerts
); }