feat: add Deploy Keys function to Machines UI

- sshmanager/deploy.go: new DeployKeysToMachine function that uploads
  private keys, populates known_hosts via ssh-keyscan, and adds server
  pub key to authorized_keys on remote machines
- handlers_machines.go: new DeployKeys handler with auto-detection of
  keys needed per sync pair (source->dest uploads dest key, dest->source
  uploads source key)
- router.go: POST /machines/{id}/deploy-keys route
- client.ts: deployKeys() API method
- Machines.tsx: Deploy Keys button + modal with result display
This commit is contained in:
2026-07-09 20:33:04 -04:00
parent 5d708e1d7b
commit dbf998703f
5 changed files with 390 additions and 5 deletions
+18
View File
@@ -116,3 +116,21 @@ export interface SettingsInfo {
data_dir: string;
ssh_pub_key: string;
}
export interface DeployKeysResponse {
success: boolean;
messages: string[];
errors: string[];
}
export interface DeployKeysOptions {
known_hosts_host?: string;
include_server_key?: boolean;
}
export async function deployKeys(machineId: number, options?: DeployKeysOptions): Promise<DeployKeysResponse> {
return api<DeployKeysResponse>(`/api/machines/${machineId}/deploy-keys`, {
method: 'POST',
body: options ?? { include_server_key: true },
});
}
+78 -2
View File
@@ -1,5 +1,5 @@
import { useEffect, useState } from 'react';
import { api, Machine, SSHKey, TestConnectionResponse } from '../api/client';
import { api, Machine, SSHKey, TestConnectionResponse, deployKeys, DeployKeysResponse } from '../api/client';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Label } from '@/components/ui/Label';
@@ -26,7 +26,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 } from 'lucide-react';
import { Pencil, Trash2, Plus, Server, Zap, Cable, KeyRound } from 'lucide-react';
import { toast } from 'sonner';
import { cn } from '@/lib/utils';
import { subscribeMachineStatus } from '@/lib/sse';
@@ -68,6 +68,7 @@ export default function Machines() {
const [loading, setLoading] = useState(false);
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 });
useEffect(() => {
load();
@@ -213,6 +214,20 @@ export default function Machines() {
setConnModal({ machine: null, result: null, loading: false });
}
async function handleDeployKeys(m: Machine) {
setDeployModal({ machine: m, result: null, loading: true });
try {
const result = await deployKeys(m.id, { include_server_key: true });
setDeployModal({ machine: m, result, loading: false });
} catch (e: unknown) {
setDeployModal({ machine: m, result: { success: false, messages: [], errors: [(e as Error).message] }, loading: false });
}
}
function closeDeployModal() {
setDeployModal({ machine: null, result: null, loading: false });
}
function keyLabel(id: number | null) {
if (!id) return 'Server Key';
const k = sshKeys.find(k => k.id === id);
@@ -315,6 +330,14 @@ export default function Machines() {
>
<Cable className="h-3.5 w-3.5" />
</Button>
<Button
variant="ghost"
size="icon-sm"
onClick={() => handleDeployKeys(m)}
title="Deploy SSH Keys"
>
<KeyRound className="h-3.5 w-3.5" />
</Button>
{m.wol_enabled && (
<Button
variant="ghost"
@@ -615,6 +638,59 @@ export default function Machines() {
</ModalFooter>
</ModalContent>
</Modal>
<Modal open={deployModal.machine !== null} onOpenChange={v => !v && closeDeployModal()}>
<ModalContent size="md">
<ModalHeader>
<ModalTitle>Deploy SSH Keys</ModalTitle>
<ModalDescription>
{deployModal.machine?.name} ({deployModal.machine?.host}:{deployModal.machine?.port})
</ModalDescription>
</ModalHeader>
<ModalBody className="space-y-4">
{deployModal.loading && (
<div className="flex flex-col items-center justify-center py-8 gap-3">
<div className="h-6 w-6 border-2 border-accent border-t-transparent rounded-full animate-spin" />
<p className="text-sm text-fg-muted">Deploying keys...</p>
</div>
)}
{!deployModal.loading && deployModal.result && (
<div className="space-y-4">
{deployModal.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 mb-2">Deployment successful</p>
<ul className="space-y-1">
{deployModal.result.messages.map((msg, i) => (
<li key={i} className="text-xs text-fg-muted flex items-start gap-2">
<span className="text-emerald-400 mt-0.5">&#10003;</span>
{msg}
</li>
))}
</ul>
</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 mb-2">Deployment failed</p>
<ul className="space-y-1">
{deployModal.result.errors.map((err, i) => (
<li key={i} className="text-xs text-fg-muted flex items-start gap-2">
<span className="text-rose-400 mt-0.5">&#10007;</span>
{err}
</li>
))}
</ul>
</div>
)}
</div>
)}
</ModalBody>
<ModalFooter>
<Button variant="secondary" onClick={closeDeployModal}>
Close
</Button>
</ModalFooter>
</ModalContent>
</Modal>
</div>
);
}