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)
68 lines
2.2 KiB
TypeScript
68 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 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 (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Process Uptime (Top 10)</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="h-[300px] flex items-center justify-center text-muted-foreground">
|
|
No running processes
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Process Uptime (Top 10)</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ResponsiveContainer width="100%" height={300}>
|
|
<BarChart data={data} layout="vertical">
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis type="number" label={{ value: 'Hours', position: 'insideBottom', offset: -5 }} />
|
|
<YAxis dataKey="displayName" type="category" width={120} />
|
|
<Tooltip
|
|
formatter={(value: number) => {
|
|
const hours = Math.floor(value);
|
|
const minutes = Math.floor((value - hours) * 60);
|
|
return `${hours}h ${minutes}m`;
|
|
}}
|
|
/>
|
|
<Legend />
|
|
<Bar dataKey="uptime" fill="hsl(var(--success))" name="Uptime (hours)" />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|