diff --git a/app/page.tsx b/app/page.tsx index 3aeb4ee..533393c 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -3,6 +3,9 @@ import { Activity, Server, FileText, Settings } from 'lucide-react'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { SystemStatus } from '@/components/process/SystemStatus'; +import { ProcessStateChart } from '@/components/charts/ProcessStateChart'; +import { ProcessUptimeChart } from '@/components/charts/ProcessUptimeChart'; +import { GroupStatistics } from '@/components/charts/GroupStatistics'; import { useProcesses } from '@/lib/hooks/useSupervisor'; import { ProcessState } from '@/lib/supervisor/types'; @@ -86,6 +89,20 @@ export default function HomePage() { + {/* Charts and Analytics */} + {!isLoading && processes && processes.length > 0 && ( +
+

Analytics

+
+ + +
+
+ +
+
+ )} + {/* Quick Actions */}
window.location.href = '/processes'}> diff --git a/components/charts/GroupStatistics.tsx b/components/charts/GroupStatistics.tsx new file mode 100644 index 0000000..f7e79f0 --- /dev/null +++ b/components/charts/GroupStatistics.tsx @@ -0,0 +1,63 @@ +'use client'; + +import { ProcessInfo, ProcessState } from '@/lib/supervisor/types'; +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; +import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts'; + +interface GroupStatisticsProps { + processes: ProcessInfo[]; +} + +export function GroupStatistics({ processes }: GroupStatisticsProps) { + // Group processes and count states + const groupData = processes.reduce((acc, proc) => { + const group = proc.group; + if (!acc[group]) { + acc[group] = { name: group, running: 0, stopped: 0, fatal: 0, total: 0 }; + } + acc[group].total++; + if (proc.state === ProcessState.RUNNING) acc[group].running++; + else if (proc.state === ProcessState.STOPPED || proc.state === ProcessState.EXITED) acc[group].stopped++; + else if (proc.state === ProcessState.FATAL) acc[group].fatal++; + return acc; + }, {} as Record); + + const data = Object.values(groupData).sort((a, b) => b.total - a.total); + + if (data.length === 0) { + return ( + + + Process Groups Overview + + +
+ No process groups +
+ + + ); + } + + return ( + + + Process Groups Overview + + + + + + + + + + + + + + + + + ); +} diff --git a/components/charts/ProcessStateChart.tsx b/components/charts/ProcessStateChart.tsx new file mode 100644 index 0000000..2e7079f --- /dev/null +++ b/components/charts/ProcessStateChart.tsx @@ -0,0 +1,63 @@ +'use client'; + +import { ProcessInfo, ProcessState } from '@/lib/supervisor/types'; +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; +import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from 'recharts'; + +interface ProcessStateChartProps { + processes: ProcessInfo[]; +} + +export function ProcessStateChart({ processes }: ProcessStateChartProps) { + const stateCounts = processes.reduce( + (acc, proc) => { + if (proc.state === ProcessState.RUNNING) acc.running++; + else if (proc.state === ProcessState.STOPPED || proc.state === ProcessState.EXITED) acc.stopped++; + else if (proc.state === ProcessState.FATAL) acc.fatal++; + else if (proc.state === ProcessState.STARTING) acc.starting++; + else if (proc.state === ProcessState.STOPPING) acc.stopping++; + else acc.other++; + return acc; + }, + { running: 0, stopped: 0, fatal: 0, starting: 0, stopping: 0, other: 0 } + ); + + const data = [ + { name: 'Running', value: stateCounts.running, color: 'hsl(var(--success))' }, + { name: 'Stopped', value: stateCounts.stopped, color: 'hsl(var(--muted-foreground))' }, + { name: 'Fatal', value: stateCounts.fatal, color: 'hsl(var(--destructive))' }, + { name: 'Starting', value: stateCounts.starting, color: 'hsl(var(--warning))' }, + { name: 'Stopping', value: stateCounts.stopping, color: 'hsl(var(--accent))' }, + { name: 'Other', value: stateCounts.other, color: 'hsl(var(--muted))' }, + ].filter((item) => item.value > 0); + + return ( + + + Process State Distribution + + + + + `${name}: ${(percent * 100).toFixed(0)}%`} + outerRadius={80} + fill="#8884d8" + dataKey="value" + > + {data.map((entry, index) => ( + + ))} + + + + + + + + ); +} diff --git a/components/charts/ProcessUptimeChart.tsx b/components/charts/ProcessUptimeChart.tsx new file mode 100644 index 0000000..5d875b3 --- /dev/null +++ b/components/charts/ProcessUptimeChart.tsx @@ -0,0 +1,67 @@ +'use client'; + +import { ProcessInfo, ProcessState } from '@/lib/supervisor/types'; +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; +import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts'; + +interface ProcessUptimeChartProps { + processes: ProcessInfo[]; +} + +export function ProcessUptimeChart({ processes }: ProcessUptimeChartProps) { + // Filter only running processes and calculate uptime in hours + const data = processes + .filter((p) => p.state === ProcessState.RUNNING && p.start > 0) + .map((p) => { + const uptimeSeconds = p.now - p.start; + const uptimeHours = uptimeSeconds / 3600; + return { + name: `${p.group}:${p.name}`, + uptime: parseFloat(uptimeHours.toFixed(2)), + displayName: p.name.length > 15 ? p.name.substring(0, 15) + '...' : p.name, + }; + }) + .sort((a, b) => b.uptime - a.uptime) + .slice(0, 10); // Top 10 processes by uptime + + if (data.length === 0) { + return ( + + + Process Uptime (Top 10) + + +
+ No running processes +
+ + + ); + } + + return ( + + + Process Uptime (Top 10) + + + + + + + + { + const hours = Math.floor(value); + const minutes = Math.floor((value - hours) * 60); + return `${hours}h ${minutes}m`; + }} + /> + + + + + + + ); +}