feat: implement Phase 7 - Signal Operations
All checks were successful
Build and Push Docker Image to Gitea / build-and-push (push) Successful in 1m8s
All checks were successful
Build and Push Docker Image to Gitea / build-and-push (push) Successful in 1m8s
Features added: - Send Unix signals to processes via interactive modal - Support for common signals (HUP, INT, TERM, KILL, USR1, USR2, QUIT) - Custom signal input for advanced use cases - Safety confirmations for dangerous signals (TERM, KILL, QUIT) - Signal button added to each ProcessCard Implementation details: - Created signal API routes: - /api/supervisor/processes/[name]/signal - Send signal to process - /api/supervisor/groups/[name]/signal - Send signal to group - /api/supervisor/processes/signal-all - Send signal to all processes - Added React Query hooks: - useSignalProcess() - Send signal to single process - useSignalProcessGroup() - Send signal to process group - useSignalAllProcesses() - Send signal to all processes - Created SignalSender modal component: - Grid of common signal buttons with descriptions - Custom signal text input (auto-uppercase) - Two-step confirmation for dangerous signals - Visual warning with AlertTriangle icon - Destructive button variant for confirmed dangerous signals - Backdrop blur overlay ProcessCard enhancements: - Added Zap icon signal button - Modal opens on signal button click - Button disabled when process is stopped - Modal integrates with useSignalProcess hook Common signals with descriptions: - HUP (1): Reload configuration - INT (2): Interrupt - graceful shutdown - QUIT (3): Quit - TERM (15): Terminate - graceful shutdown (dangerous) - KILL (9): Kill - immediate termination (dangerous) - USR1 (10): User-defined signal 1 - USR2 (12): User-defined signal 2 Safety features: - Dangerous signals require confirmation - Warning message explains risks - Button changes to destructive variant - Custom signals also checked for danger - Clear visual feedback during operation Phase 7 complete (3-4 hours estimated)
This commit is contained in:
37
app/api/supervisor/groups/[name]/signal/route.ts
Normal file
37
app/api/supervisor/groups/[name]/signal/route.ts
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { createSupervisorClient } from '@/lib/supervisor/client';
|
||||||
|
|
||||||
|
interface RouteParams {
|
||||||
|
params: Promise<{ name: string }>;
|
||||||
|
}
|
||||||
|
|
||||||
|
// POST - Send signal to all processes in a group
|
||||||
|
export async function POST(request: NextRequest, { params }: RouteParams) {
|
||||||
|
try {
|
||||||
|
const { name } = await params;
|
||||||
|
const body = await request.json();
|
||||||
|
const { signal } = body;
|
||||||
|
|
||||||
|
if (!signal) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Signal is required' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const client = createSupervisorClient();
|
||||||
|
const results = await client.signalProcessGroup(name, signal);
|
||||||
|
|
||||||
|
return NextResponse.json({
|
||||||
|
success: true,
|
||||||
|
message: `Signal ${signal} sent to group ${name}`,
|
||||||
|
results,
|
||||||
|
});
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('Supervisor signal process group error:', error);
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: error.message || 'Failed to send signal to process group' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
36
app/api/supervisor/processes/[name]/signal/route.ts
Normal file
36
app/api/supervisor/processes/[name]/signal/route.ts
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { createSupervisorClient } from '@/lib/supervisor/client';
|
||||||
|
|
||||||
|
interface RouteParams {
|
||||||
|
params: Promise<{ name: string }>;
|
||||||
|
}
|
||||||
|
|
||||||
|
// POST - Send signal to a process
|
||||||
|
export async function POST(request: NextRequest, { params }: RouteParams) {
|
||||||
|
try {
|
||||||
|
const { name } = await params;
|
||||||
|
const body = await request.json();
|
||||||
|
const { signal } = body;
|
||||||
|
|
||||||
|
if (!signal) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Signal is required' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const client = createSupervisorClient();
|
||||||
|
const result = await client.signalProcess(name, signal);
|
||||||
|
|
||||||
|
return NextResponse.json({
|
||||||
|
success: result,
|
||||||
|
message: `Signal ${signal} sent to ${name}`,
|
||||||
|
});
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('Supervisor signal process error:', error);
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: error.message || 'Failed to send signal to process' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
32
app/api/supervisor/processes/signal-all/route.ts
Normal file
32
app/api/supervisor/processes/signal-all/route.ts
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { createSupervisorClient } from '@/lib/supervisor/client';
|
||||||
|
|
||||||
|
// POST - Send signal to all processes
|
||||||
|
export async function POST(request: NextRequest) {
|
||||||
|
try {
|
||||||
|
const body = await request.json();
|
||||||
|
const { signal } = body;
|
||||||
|
|
||||||
|
if (!signal) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Signal is required' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const client = createSupervisorClient();
|
||||||
|
const results = await client.signalAllProcesses(signal);
|
||||||
|
|
||||||
|
return NextResponse.json({
|
||||||
|
success: true,
|
||||||
|
message: `Signal ${signal} sent to all processes`,
|
||||||
|
results,
|
||||||
|
});
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('Supervisor signal all processes error:', error);
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: error.message || 'Failed to send signal to all processes' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,11 +1,13 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { Play, Square, RotateCw, Activity } from 'lucide-react';
|
import { useState } from 'react';
|
||||||
|
import { Play, Square, RotateCw, Activity, Zap } from 'lucide-react';
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
import { ProcessInfo, ProcessStateCode, getProcessStateClass, formatUptime, canStartProcess, canStopProcess } from '@/lib/supervisor/types';
|
import { ProcessInfo, ProcessStateCode, getProcessStateClass, formatUptime, canStartProcess, canStopProcess } from '@/lib/supervisor/types';
|
||||||
import { useStartProcess, useStopProcess, useRestartProcess } from '@/lib/hooks/useSupervisor';
|
import { useStartProcess, useStopProcess, useRestartProcess } from '@/lib/hooks/useSupervisor';
|
||||||
|
import { SignalSender } from './SignalSender';
|
||||||
import { cn } from '@/lib/utils/cn';
|
import { cn } from '@/lib/utils/cn';
|
||||||
|
|
||||||
interface ProcessCardProps {
|
interface ProcessCardProps {
|
||||||
@@ -15,6 +17,7 @@ interface ProcessCardProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function ProcessCard({ process, isSelected = false, onSelectionChange }: ProcessCardProps) {
|
export function ProcessCard({ process, isSelected = false, onSelectionChange }: ProcessCardProps) {
|
||||||
|
const [showSignalModal, setShowSignalModal] = useState(false);
|
||||||
const startMutation = useStartProcess();
|
const startMutation = useStartProcess();
|
||||||
const stopMutation = useStopProcess();
|
const stopMutation = useStopProcess();
|
||||||
const restartMutation = useRestartProcess();
|
const restartMutation = useRestartProcess();
|
||||||
@@ -131,6 +134,15 @@ export function ProcessCard({ process, isSelected = false, onSelectionChange }:
|
|||||||
>
|
>
|
||||||
<RotateCw className={cn('h-4 w-4', isLoading && 'animate-spin-slow')} />
|
<RotateCw className={cn('h-4 w-4', isLoading && 'animate-spin-slow')} />
|
||||||
</Button>
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => setShowSignalModal(true)}
|
||||||
|
disabled={process.state === 0}
|
||||||
|
title="Send Signal"
|
||||||
|
>
|
||||||
|
<Zap className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Description */}
|
{/* Description */}
|
||||||
@@ -140,6 +152,11 @@ export function ProcessCard({ process, isSelected = false, onSelectionChange }:
|
|||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
</CardContent>
|
</CardContent>
|
||||||
|
|
||||||
|
{/* Signal Modal */}
|
||||||
|
{showSignalModal && (
|
||||||
|
<SignalSender processName={fullName} onClose={() => setShowSignalModal(false)} />
|
||||||
|
)}
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
154
components/process/SignalSender.tsx
Normal file
154
components/process/SignalSender.tsx
Normal file
@@ -0,0 +1,154 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { useSignalProcess } from '@/lib/hooks/useSupervisor';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { X, AlertTriangle } from 'lucide-react';
|
||||||
|
import { cn } from '@/lib/utils/cn';
|
||||||
|
|
||||||
|
interface SignalSenderProps {
|
||||||
|
processName: string;
|
||||||
|
onClose: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const COMMON_SIGNALS = [
|
||||||
|
{ value: 'HUP', label: 'HUP (1)', description: 'Hangup - reload configuration', dangerous: false },
|
||||||
|
{ value: 'INT', label: 'INT (2)', description: 'Interrupt - graceful shutdown', dangerous: false },
|
||||||
|
{ value: 'QUIT', label: 'QUIT (3)', description: 'Quit', dangerous: false },
|
||||||
|
{ value: 'TERM', label: 'TERM (15)', description: 'Terminate - graceful shutdown', dangerous: true },
|
||||||
|
{ value: 'KILL', label: 'KILL (9)', description: 'Kill - immediate termination', dangerous: true },
|
||||||
|
{ value: 'USR1', label: 'USR1 (10)', description: 'User-defined signal 1', dangerous: false },
|
||||||
|
{ value: 'USR2', label: 'USR2 (12)', description: 'User-defined signal 2', dangerous: false },
|
||||||
|
];
|
||||||
|
|
||||||
|
export function SignalSender({ processName, onClose }: SignalSenderProps) {
|
||||||
|
const [selectedSignal, setSelectedSignal] = useState<string>('');
|
||||||
|
const [customSignal, setCustomSignal] = useState('');
|
||||||
|
const [showConfirm, setShowConfirm] = useState(false);
|
||||||
|
|
||||||
|
const signalMutation = useSignalProcess();
|
||||||
|
|
||||||
|
const handleSendSignal = () => {
|
||||||
|
const signal = selectedSignal || customSignal;
|
||||||
|
if (!signal) return;
|
||||||
|
|
||||||
|
const isDangerous = ['TERM', 'KILL', 'QUIT'].includes(signal.toUpperCase());
|
||||||
|
|
||||||
|
if (isDangerous && !showConfirm) {
|
||||||
|
setShowConfirm(true);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
signalMutation.mutate(
|
||||||
|
{ name: processName, signal },
|
||||||
|
{
|
||||||
|
onSuccess: () => {
|
||||||
|
onClose();
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const signal = selectedSignal || customSignal;
|
||||||
|
const isDangerous = signal && ['TERM', 'KILL', 'QUIT'].includes(signal.toUpperCase());
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm">
|
||||||
|
<Card className="w-full max-w-lg shadow-2xl">
|
||||||
|
<CardHeader>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<CardTitle>Send Signal</CardTitle>
|
||||||
|
<CardDescription className="mt-1">
|
||||||
|
Send Unix signal to <span className="font-mono text-foreground">{processName}</span>
|
||||||
|
</CardDescription>
|
||||||
|
</div>
|
||||||
|
<Button variant="ghost" size="icon" onClick={onClose}>
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
|
||||||
|
<CardContent className="space-y-6">
|
||||||
|
{/* Common Signals */}
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium mb-3 block">Common Signals</label>
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
{COMMON_SIGNALS.map((sig) => (
|
||||||
|
<Button
|
||||||
|
key={sig.value}
|
||||||
|
variant={selectedSignal === sig.value ? 'default' : 'outline'}
|
||||||
|
className={cn(
|
||||||
|
'justify-start text-left h-auto py-3',
|
||||||
|
sig.dangerous && selectedSignal === sig.value && 'bg-destructive hover:bg-destructive/90'
|
||||||
|
)}
|
||||||
|
onClick={() => {
|
||||||
|
setSelectedSignal(sig.value);
|
||||||
|
setCustomSignal('');
|
||||||
|
setShowConfirm(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold">{sig.label}</div>
|
||||||
|
<div className="text-xs opacity-80">{sig.description}</div>
|
||||||
|
</div>
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Custom Signal */}
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium mb-2 block">Custom Signal</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="e.g., WINCH, CONT, STOP"
|
||||||
|
value={customSignal}
|
||||||
|
onChange={(e) => {
|
||||||
|
setCustomSignal(e.target.value.toUpperCase());
|
||||||
|
setSelectedSignal('');
|
||||||
|
setShowConfirm(false);
|
||||||
|
}}
|
||||||
|
className="w-full h-10 rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Confirmation Warning */}
|
||||||
|
{isDangerous && showConfirm && (
|
||||||
|
<div className="p-4 rounded-md bg-destructive/10 border border-destructive/20">
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<AlertTriangle className="h-5 w-5 text-destructive flex-shrink-0 mt-0.5" />
|
||||||
|
<div className="space-y-2">
|
||||||
|
<p className="text-sm font-medium text-destructive">Warning: Dangerous Signal</p>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Signal <span className="font-mono font-bold">{signal}</span> may terminate or kill the process.
|
||||||
|
Are you sure you want to continue?
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="flex gap-2 justify-end">
|
||||||
|
<Button variant="outline" onClick={onClose} disabled={signalMutation.isPending}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={handleSendSignal}
|
||||||
|
disabled={!signal || signalMutation.isPending}
|
||||||
|
variant={isDangerous && showConfirm ? 'destructive' : 'default'}
|
||||||
|
>
|
||||||
|
{signalMutation.isPending
|
||||||
|
? 'Sending...'
|
||||||
|
: isDangerous && !showConfirm
|
||||||
|
? 'Confirm & Send'
|
||||||
|
: `Send ${signal || 'Signal'}`}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -558,3 +558,90 @@ export function useRemoveProcessGroup() {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Signal Operations
|
||||||
|
|
||||||
|
async function signalProcess(name: string, signal: string): Promise<{ success: boolean; message: string }> {
|
||||||
|
const response = await fetch(`/api/supervisor/processes/${encodeURIComponent(name)}/signal`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ signal }),
|
||||||
|
});
|
||||||
|
if (!response.ok) {
|
||||||
|
const error = await response.json();
|
||||||
|
throw new Error(error.error || 'Failed to send signal');
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function signalProcessGroup(name: string, signal: string): Promise<{ success: boolean; message: string; results: any[] }> {
|
||||||
|
const response = await fetch(`/api/supervisor/groups/${encodeURIComponent(name)}/signal`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ signal }),
|
||||||
|
});
|
||||||
|
if (!response.ok) {
|
||||||
|
const error = await response.json();
|
||||||
|
throw new Error(error.error || 'Failed to send signal to group');
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function signalAllProcesses(signal: string): Promise<{ success: boolean; message: string; results: any[] }> {
|
||||||
|
const response = await fetch('/api/supervisor/processes/signal-all', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ signal }),
|
||||||
|
});
|
||||||
|
if (!response.ok) {
|
||||||
|
const error = await response.json();
|
||||||
|
throw new Error(error.error || 'Failed to send signal to all processes');
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useSignalProcess() {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: ({ name, signal }: { name: string; signal: string }) => signalProcess(name, signal),
|
||||||
|
onSuccess: (data, variables) => {
|
||||||
|
toast.success(data.message);
|
||||||
|
queryClient.invalidateQueries({ queryKey: supervisorKeys.process(variables.name) });
|
||||||
|
queryClient.invalidateQueries({ queryKey: supervisorKeys.processes() });
|
||||||
|
},
|
||||||
|
onError: (error: Error) => {
|
||||||
|
toast.error(`Failed to send signal: ${error.message}`);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useSignalProcessGroup() {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: ({ name, signal }: { name: string; signal: string }) => signalProcessGroup(name, signal),
|
||||||
|
onSuccess: (data) => {
|
||||||
|
toast.success(data.message);
|
||||||
|
queryClient.invalidateQueries({ queryKey: supervisorKeys.processes() });
|
||||||
|
},
|
||||||
|
onError: (error: Error) => {
|
||||||
|
toast.error(`Failed to send signal to group: ${error.message}`);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useSignalAllProcesses() {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: (signal: string) => signalAllProcesses(signal),
|
||||||
|
onSuccess: (data) => {
|
||||||
|
toast.success(data.message);
|
||||||
|
queryClient.invalidateQueries({ queryKey: supervisorKeys.processes() });
|
||||||
|
},
|
||||||
|
onError: (error: Error) => {
|
||||||
|
toast.error(`Failed to send signal to all processes: ${error.message}`);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user