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.6 KiB
TypeScript
73 lines
2.6 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';
|
|
import { chartColors } from '@/lib/utils/chartColors';
|
|
|
|
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: chartColors.running },
|
|
{ name: 'Stopped', value: stateCounts.stopped, color: chartColors.stopped },
|
|
{ name: 'Fatal', value: stateCounts.fatal, color: chartColors.fatal },
|
|
{ name: 'Starting', value: stateCounts.starting, color: chartColors.starting },
|
|
{ name: 'Stopping', value: stateCounts.stopping, color: chartColors.stopping },
|
|
{ name: 'Other', value: stateCounts.other, color: chartColors.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
|
|
contentStyle={{
|
|
backgroundColor: 'rgba(0, 0, 0, 0.9)',
|
|
border: 'none',
|
|
borderRadius: '8px',
|
|
color: '#ffffff',
|
|
}}
|
|
itemStyle={{ color: '#ffffff' }}
|
|
/>
|
|
<Legend />
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|