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
1.9 KiB
TypeScript
76 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import { Play, Pause, RotateCcw, Download, Trash2 } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { cn } from '@/lib/utils/cn';
|
|
|
|
interface LogControlsProps {
|
|
isPlaying: boolean;
|
|
onPlayPause: () => void;
|
|
autoScroll: boolean;
|
|
onToggleAutoScroll: () => void;
|
|
onRefresh: () => void;
|
|
onClear?: () => void;
|
|
onDownload?: () => void;
|
|
isClearing?: boolean;
|
|
}
|
|
|
|
export function LogControls({
|
|
isPlaying,
|
|
onPlayPause,
|
|
autoScroll,
|
|
onToggleAutoScroll,
|
|
onRefresh,
|
|
onClear,
|
|
onDownload,
|
|
isClearing = false,
|
|
}: LogControlsProps) {
|
|
return (
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<Button
|
|
variant={isPlaying ? 'destructive' : 'success'}
|
|
size="sm"
|
|
onClick={onPlayPause}
|
|
title={isPlaying ? 'Pause auto-refresh' : 'Resume auto-refresh'}
|
|
>
|
|
{isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
|
|
{isPlaying ? 'Pause' : 'Play'}
|
|
</Button>
|
|
|
|
<Button
|
|
variant={autoScroll ? 'default' : 'outline'}
|
|
size="sm"
|
|
onClick={onToggleAutoScroll}
|
|
title={autoScroll ? 'Disable auto-scroll' : 'Enable auto-scroll'}
|
|
>
|
|
Auto-scroll
|
|
</Button>
|
|
|
|
<Button variant="outline" size="sm" onClick={onRefresh} title="Refresh logs now">
|
|
<RotateCcw className="h-4 w-4" />
|
|
Refresh
|
|
</Button>
|
|
|
|
{onDownload && (
|
|
<Button variant="outline" size="sm" onClick={onDownload} title="Download logs">
|
|
<Download className="h-4 w-4" />
|
|
Download
|
|
</Button>
|
|
)}
|
|
|
|
{onClear && (
|
|
<Button
|
|
variant="destructive"
|
|
size="sm"
|
|
onClick={onClear}
|
|
disabled={isClearing}
|
|
title="Clear logs"
|
|
>
|
|
<Trash2 className={cn('h-4 w-4', isClearing && 'animate-spin')} />
|
|
Clear
|
|
</Button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|