Sebastian Krüger
66495c1e1b
All checks were successful
Build and Push Docker Image to Gitea / build-and-push (push) Successful in 59s
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)
77 lines
2.6 KiB
TypeScript
77 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import { useConfig } from '@/lib/hooks/useSupervisor';
|
|
import { ConfigTable } from '@/components/config/ConfigTable';
|
|
import { ReloadConfigButton } from '@/components/config/ReloadConfigButton';
|
|
import { ProcessGroupForm } from '@/components/config/ProcessGroupForm';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { AlertCircle } from 'lucide-react';
|
|
|
|
export default function ConfigPage() {
|
|
const { data: configs, isLoading, isError } = useConfig();
|
|
|
|
if (isError) {
|
|
return (
|
|
<div className="space-y-6">
|
|
<h1 className="text-3xl font-bold">Configuration</h1>
|
|
<Card className="border-destructive/50">
|
|
<CardContent className="p-12 text-center">
|
|
<AlertCircle className="h-12 w-12 text-destructive mx-auto mb-4" />
|
|
<h2 className="text-xl font-semibold mb-2">Failed to load configuration</h2>
|
|
<p className="text-muted-foreground">
|
|
Could not connect to Supervisor. Please check your configuration.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-bold">Configuration</h1>
|
|
<p className="text-muted-foreground mt-1">
|
|
Manage process configurations and supervisor settings
|
|
</p>
|
|
</div>
|
|
<ReloadConfigButton />
|
|
</div>
|
|
|
|
{/* Process Group Management */}
|
|
<ProcessGroupForm />
|
|
|
|
{/* Configuration Table */}
|
|
<div className="space-y-4">
|
|
<CardHeader className="px-0">
|
|
<CardTitle>Process Configurations</CardTitle>
|
|
<p className="text-sm text-muted-foreground mt-1">
|
|
{configs?.length ?? 0} process{configs?.length !== 1 ? 'es' : ''} configured
|
|
</p>
|
|
</CardHeader>
|
|
|
|
{isLoading ? (
|
|
<Card>
|
|
<CardContent className="p-8 text-center">
|
|
<div className="animate-pulse">
|
|
<div className="h-8 bg-muted rounded w-full mb-4"></div>
|
|
<div className="h-8 bg-muted rounded w-full mb-4"></div>
|
|
<div className="h-8 bg-muted rounded w-full"></div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
) : configs && configs.length > 0 ? (
|
|
<ConfigTable configs={configs} />
|
|
) : (
|
|
<Card>
|
|
<CardContent className="p-12 text-center">
|
|
<p className="text-muted-foreground">No process configurations found</p>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|