Sebastian Krüger
a63f1923fb
All checks were successful
Build and Push Docker Image to Gitea / build-and-push (push) Successful in 1m8s
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)
64 lines
2.2 KiB
TypeScript
64 lines
2.2 KiB
TypeScript
'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<string, { name: string; running: number; stopped: number; fatal: number; total: number }>);
|
|
|
|
const data = Object.values(groupData).sort((a, b) => b.total - a.total);
|
|
|
|
if (data.length === 0) {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Process Groups Overview</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="h-[300px] flex items-center justify-center text-muted-foreground">
|
|
No process groups
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Process Groups Overview</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ResponsiveContainer width="100%" height={300}>
|
|
<BarChart data={data}>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis dataKey="name" />
|
|
<YAxis />
|
|
<Tooltip />
|
|
<Legend />
|
|
<Bar dataKey="running" stackId="a" fill="hsl(var(--success))" name="Running" />
|
|
<Bar dataKey="stopped" stackId="a" fill="hsl(var(--muted-foreground))" name="Stopped" />
|
|
<Bar dataKey="fatal" stackId="a" fill="hsl(var(--destructive))" name="Fatal" />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|