Sebastian Krüger
dda335d501
All checks were successful
Build and Push Docker Image to Gitea / build-and-push (push) Successful in 1m8s
This commit fixes all reported UI issues across the dashboard: ## Issue 1: Chart Colors and Tooltips ✅ - Create chartColors utility with static hex colors for Recharts compatibility - Replace CSS variable colors (hsl(var(--))) with hex colors in all charts - Add custom tooltip styling with dark background and white text for readability - Fixes: ProcessStateChart, ProcessUptimeChart, GroupStatistics ## Issue 2: Process Card Heights ✅ - Add h-full and flex flex-col to ProcessCard component - Add auto-rows-fr to process grid layout - Ensures all cards have consistent heights regardless of content ## Issue 3: Batch Actions Button Labels ✅ - Simplify button labels from "Start Selected" to "Start" - Remove "Stop Selected" to "Stop", "Restart Selected" to "Restart" - Labels now always visible on all screen sizes ## Issue 4: Mobile Menu Background ✅ - Change mobile menu from semi-transparent (bg-background/95) to solid (bg-background) - Removes backdrop blur for better visibility ## Issue 5: Group Header Button Overflow ✅ - Add flex-wrap to button container in GroupCard - Stack buttons vertically on mobile (flex-col md:flex-row) - Buttons take full width on mobile, auto width on desktop ## Issue 6: Logs Search Input Overflow ✅ - Change LogSearch from max-w-md to w-full sm:flex-1 sm:max-w-md - Search input now full width on mobile, constrained on desktop ## Issue 7: Logs Action Button Overflow ✅ - Add flex-wrap to LogControls button container - Buttons wrap to new row when space is limited 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
73 lines
2.5 KiB
TypeScript
73 lines
2.5 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';
|
|
import { chartColors } from '@/lib/utils/chartColors';
|
|
|
|
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
|
|
contentStyle={{
|
|
backgroundColor: 'rgba(0, 0, 0, 0.9)',
|
|
border: 'none',
|
|
borderRadius: '8px',
|
|
color: '#ffffff',
|
|
}}
|
|
itemStyle={{ color: '#ffffff' }}
|
|
/>
|
|
<Legend />
|
|
<Bar dataKey="running" stackId="a" fill={chartColors.running} name="Running" />
|
|
<Bar dataKey="stopped" stackId="a" fill={chartColors.stopped} name="Stopped" />
|
|
<Bar dataKey="fatal" stackId="a" fill={chartColors.fatal} name="Fatal" />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|