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.3 KiB
TypeScript
64 lines
2.3 KiB
TypeScript
'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 (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Process State Distribution</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ResponsiveContainer width="100%" height={300}>
|
|
<PieChart>
|
|
<Pie
|
|
data={data}
|
|
cx="50%"
|
|
cy="50%"
|
|
labelLine={false}
|
|
label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
|
|
outerRadius={80}
|
|
fill="#8884d8"
|
|
dataKey="value"
|
|
>
|
|
{data.map((entry, index) => (
|
|
<Cell key={`cell-${index}`} fill={entry.color} />
|
|
))}
|
|
</Pie>
|
|
<Tooltip />
|
|
<Legend />
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|