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>
76 lines
2.5 KiB
TypeScript
76 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 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`;
|
|
}}
|
|
contentStyle={{
|
|
backgroundColor: 'rgba(0, 0, 0, 0.9)',
|
|
border: 'none',
|
|
borderRadius: '8px',
|
|
color: '#ffffff',
|
|
}}
|
|
itemStyle={{ color: '#ffffff' }}
|
|
/>
|
|
<Legend />
|
|
<Bar dataKey="uptime" fill={chartColors.success} name="Uptime (hours)" />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|