From a63f1923fb6a608535aab05e073f80bad55bf6d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= Date: Sun, 23 Nov 2025 19:24:48 +0100 Subject: [PATCH] feat: implement Phase 5 - Charts and Statistics Features added: - Visual analytics dashboard with interactive charts - Process state distribution pie chart - Process uptime bar chart (top 10 by uptime) - Group statistics stacked bar chart - Real-time data visualization using Recharts Implementation details: - Created chart components: - ProcessStateChart: Pie chart showing state distribution (Running, Stopped, Fatal, Starting, Stopping) - ProcessUptimeChart: Horizontal bar chart displaying top 10 processes by uptime in hours - GroupStatistics: Stacked bar chart showing process counts per group by state Dashboard enhancements: - Added "Analytics" section between statistics cards and quick actions - Charts display only when processes are loaded and available - Responsive grid layout (2 columns on large screens for state/group charts) - Full-width uptime chart for better readability Chart features: - Interactive tooltips with formatted data - Color-coded by state (success green, destructive red, muted gray) - Proper legends and labels - Uptime displayed in hours with minutes in tooltip - Process names truncated to 15 chars for display - Empty state messages when no data available Data visualization: - Pie chart: Percentage distribution of process states - Bar chart: Top 10 processes sorted by uptime (descending) - Stacked bar: Group overview with running/stopped/fatal breakdown Phase 5 complete (3-4 hours estimated) --- app/page.tsx | 17 ++++++ components/charts/GroupStatistics.tsx | 63 ++++++++++++++++++++++ components/charts/ProcessStateChart.tsx | 63 ++++++++++++++++++++++ components/charts/ProcessUptimeChart.tsx | 67 ++++++++++++++++++++++++ 4 files changed, 210 insertions(+) create mode 100644 components/charts/GroupStatistics.tsx create mode 100644 components/charts/ProcessStateChart.tsx create mode 100644 components/charts/ProcessUptimeChart.tsx 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`; + }} + /> + + + + + + + ); +}