Files
supervisor-ui/components/config/ReloadConfigButton.tsx
Sebastian Krüger 66495c1e1b
All checks were successful
Build and Push Docker Image to Gitea / build-and-push (push) Successful in 59s
feat: implement Phase 4 - Configuration Management
Features added:
- View all process configurations in sortable table
- Reload supervisord configuration with confirmation
- Add new process groups dynamically
- Remove process groups with confirmation
- Configuration auto-refresh every 10 seconds

Implementation details:
- Created config API routes: /api/supervisor/config (GET), /api/supervisor/config/reload (POST), /api/supervisor/config/group (POST/DELETE)
- Added React Query hooks: useConfig, useReloadConfig, useAddProcessGroup, useRemoveProcessGroup
- Created components:
  - ConfigTable: Sortable table with columns for group, name, command, directory, autostart, priority, numprocs
  - ReloadConfigButton: Reload config with confirmation dialog
  - ProcessGroupForm: Add/remove groups with separate forms

Configuration page features:
- Displays all process configurations in sortable table
- Click column headers to sort (ascending/descending)
- Visual indicators for autostart (green dot = enabled)
- Shows command in monospace code blocks
- Process group management forms
- Reload configuration button in header

Data displayed per process:
- Group name
- Process name
- Command (with syntax highlighting)
- Working directory
- Autostart enabled/disabled
- Priority value
- Number of processes (numprocs)

Phase 4 complete (8-10 hours estimated)
2025-11-23 19:20:20 +01:00

29 lines
776 B
TypeScript

'use client';
import { useReloadConfig } from '@/lib/hooks/useSupervisor';
import { Button } from '@/components/ui/button';
import { RefreshCw } from 'lucide-react';
import { cn } from '@/lib/utils/cn';
export function ReloadConfigButton() {
const reloadMutation = useReloadConfig();
const handleReload = () => {
if (confirm('Are you sure you want to reload the configuration? This will apply any changes made to supervisord.conf.')) {
reloadMutation.mutate();
}
};
return (
<Button
onClick={handleReload}
disabled={reloadMutation.isPending}
variant="outline"
className="gap-2"
>
<RefreshCw className={cn('h-4 w-4', reloadMutation.isPending && 'animate-spin')} />
Reload Configuration
</Button>
);
}