Add shutdown machine feature with configurable command

Backend:
- New migration: add shutdown_command TEXT column to machines table
- Machine model updated with ShutdownCommand field (Create/GetAll/GetByID/Update)
- MachineRequest/MachineResponse DTOs updated with shutdown_command field
- New ShutdownResponse DTO
- New POST /api/machines/{id}/shutdown handler via SSH
- Refactor sshmanager/testconn.go: extract dialSSH() helper shared with shutdown.go
- New sshmanager/shutdown.go: RunRemoteCommand with 15s timeout

Frontend:
- New shutdownMachine() API helper and ShutdownResponse type in client.ts
- New shutdown_command field in MachineForm
- Power button (amber) in machines table actions
- Shutdown confirmation modal with WoL warning notice
- shutdown_command input field in machine edit/create form
- Machine interface updated with shutdown_command and last_seen_at fields
This commit is contained in:
2026-07-13 10:02:18 -04:00
parent bf9bcccde2
commit bc3bc44c4a
11 changed files with 282 additions and 32 deletions
+13
View File
@@ -55,6 +55,7 @@ export interface Machine {
status: string;
last_seen_at: string | null;
created_at: string;
shutdown_command: string;
}
export interface TestConnectionResponse {
@@ -135,3 +136,15 @@ export async function deployKeys(machineId: number, options?: DeployKeysOptions)
body: options ?? {},
});
}
export interface ShutdownResponse {
success: boolean;
output?: string;
error?: string;
}
export async function shutdownMachine(machineId: number): Promise<ShutdownResponse> {
return api<ShutdownResponse>(`/api/machines/${machineId}/shutdown`, {
method: 'POST',
});
}
+100 -2
View File
@@ -1,5 +1,5 @@
import { useEffect, useState } from 'react';
import { api, Machine, SSHKey, TestConnectionResponse, deployKeys, DeployKeysResponse } from '../api/client';
import { api, Machine, SSHKey, TestConnectionResponse, deployKeys, DeployKeysResponse, shutdownMachine, ShutdownResponse } from '../api/client';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Label } from '@/components/ui/Label';
@@ -27,7 +27,7 @@ import {
import { EmptyState } from '@/components/ui/EmptyState';
import { CopyButton } from '@/components/ui/CopyButton';
import { Card } from '@/components/ui/Card';
import { Pencil, Trash2, Plus, Server, Zap, Cable, KeyRound } from 'lucide-react';
import { Pencil, Trash2, Plus, Server, Zap, Cable, KeyRound, Power } from 'lucide-react';
import { toast } from 'sonner';
import { cn } from '@/lib/utils';
import { subscribeMachineStatus } from '@/lib/sse';
@@ -44,6 +44,7 @@ type MachineForm = {
broadcast_addr: string;
wake_timeout_seconds: number;
wake_check_interval_seconds: number;
shutdown_command: string;
};
const defaultForm: MachineForm = {
@@ -58,6 +59,7 @@ const defaultForm: MachineForm = {
broadcast_addr: '',
wake_timeout_seconds: 180,
wake_check_interval_seconds: 5,
shutdown_command: 'shutdown now',
};
export default function Machines() {
@@ -70,6 +72,7 @@ export default function Machines() {
const [probing, setProbing] = useState(false);
const [connModal, setConnModal] = useState<{ machine: Machine | null; result: TestConnectionResponse | null; loading: boolean }>({ machine: null, result: null, loading: false });
const [deployModal, setDeployModal] = useState<{ machine: Machine | null; result: DeployKeysResponse | null; loading: boolean }>({ machine: null, result: null, loading: false });
const [shutdownModal, setShutdownModal] = useState<{ machine: Machine | null; result: ShutdownResponse | null; loading: boolean }>({ machine: null, result: null, loading: false });
useEffect(() => {
load();
@@ -119,6 +122,7 @@ export default function Machines() {
broadcast_addr: m.broadcast_addr || '',
wake_timeout_seconds: m.wake_timeout_seconds || 180,
wake_check_interval_seconds: m.wake_check_interval_seconds || 5,
shutdown_command: m.shutdown_command || 'shutdown now',
});
setModalOpen(true);
}
@@ -150,6 +154,7 @@ export default function Machines() {
broadcast_addr: form.broadcast_addr || null,
wake_timeout_seconds: Number(form.wake_timeout_seconds),
wake_check_interval_seconds: Number(form.wake_check_interval_seconds),
shutdown_command: form.shutdown_command || 'shutdown now',
};
await api(form.id ? `/api/machines/${form.id}` : '/api/machines', {
method: form.id ? 'PUT' : 'POST',
@@ -355,6 +360,15 @@ export default function Machines() {
<Zap className="h-3.5 w-3.5" />
</Button>
)}
<Button
variant="ghost"
size="icon-sm"
onClick={() => setShutdownModal({ machine: m, result: null, loading: false })}
title="Shutdown"
className="text-amber-400 hover:text-amber-300 hover:bg-amber-500/10"
>
<Power className="h-3.5 w-3.5" />
</Button>
<Button
variant="ghost"
size="icon-sm"
@@ -544,6 +558,20 @@ export default function Machines() {
</div>
</div>
)}
<div className="space-y-1.5">
<Label htmlFor="shutdown_command">Shutdown Command</Label>
<Input
id="shutdown_command"
placeholder="shutdown now"
value={form.shutdown_command}
onChange={e =>
setForm({ ...form, shutdown_command: e.target.value })
}
/>
<p className="text-xs text-fg-subtle">
Command sent via SSH to power off the machine. Leave blank to use the default.
</p>
</div>
</ModalBody>
<ModalFooter>
<Button
@@ -581,6 +609,76 @@ export default function Machines() {
</ModalContent>
</Modal>
<Modal open={shutdownModal.machine !== null} onOpenChange={v => !v && setShutdownModal({ machine: null, result: null, loading: false })}>
<ModalContent size="md">
<ModalHeader>
<ModalTitle>Shutdown Machine</ModalTitle>
<ModalDescription>
Are you sure you want to power off <strong>{shutdownModal.machine?.name}</strong>? You will need physical or remote access to power it back on.
</ModalDescription>
</ModalHeader>
<ModalBody className="space-y-4">
{shutdownModal.machine?.wol_enabled && (
<div className="rounded-card bg-sky-500/10 border border-sky-500/30 p-3 text-xs text-sky-300">
Wake-on-LAN is enabled you can power this machine back on remotely.
</div>
)}
{shutdownModal.loading && (
<div className="flex items-center justify-center py-8">
<div className="h-6 w-6 border-2 border-accent border-t-transparent rounded-full animate-spin" />
</div>
)}
{!shutdownModal.loading && shutdownModal.result && (
shutdownModal.result.success ? (
<div className="rounded-card bg-emerald-500/10 border border-emerald-500/30 p-4">
<p className="text-sm font-medium text-emerald-400">Shutdown command sent</p>
{shutdownModal.result.output && (
<pre className="text-xs text-fg-muted mt-1 whitespace-pre-wrap">{shutdownModal.result.output}</pre>
)}
</div>
) : (
<div className="rounded-card bg-rose-500/10 border border-rose-500/30 p-4">
<p className="text-sm font-medium text-rose-400">Shutdown failed</p>
<p className="text-xs text-fg-muted mt-1">{shutdownModal.result.error}</p>
</div>
)
)}
</ModalBody>
<ModalFooter>
<Button variant="secondary" onClick={() => setShutdownModal({ machine: null, result: null, loading: false })}>
{shutdownModal.result ? 'Close' : 'Cancel'}
</Button>
{!shutdownModal.result && (
<Button
variant="danger-solid"
loading={shutdownModal.loading}
onClick={async () => {
if (!shutdownModal.machine) return;
setShutdownModal(s => ({ ...s, loading: true }));
try {
const result = await shutdownMachine(shutdownModal.machine.id);
setShutdownModal({ machine: shutdownModal.machine, result, loading: false });
if (result.success) {
toast.success(`Shutdown command sent to ${shutdownModal.machine.name}`);
} else {
toast.error(`Shutdown failed: ${result.error}`);
}
} catch (e) {
setShutdownModal({
machine: shutdownModal.machine,
result: { success: false, error: (e as Error).message },
loading: false,
});
}
}}
>
Shutdown
</Button>
)}
</ModalFooter>
</ModalContent>
</Modal>
<Modal open={connModal.machine !== null} onOpenChange={v => !v && closeConnModal()}>
<ModalContent size="md">
<ModalHeader>