511 lines
18 KiB
TypeScript
511 lines
18 KiB
TypeScript
import React, { useEffect, useRef, useState } from 'react';
|
|
import api from '../utils/api';
|
|
import EmptyState from './EmptyState/EmptyState';
|
|
import Modal from './Modal/Modal';
|
|
import './Dashboard.css';
|
|
import './Swarm.css';
|
|
import './DeckyFleet.css';
|
|
import {
|
|
AlertTriangle, Check, Copy, HardDrive, PowerOff, RefreshCw, RotateCcw,
|
|
Server, Trash2, UserPlus, Wifi, WifiOff,
|
|
} from '../icons';
|
|
|
|
interface SwarmHost {
|
|
uuid: string;
|
|
name: string;
|
|
address: string;
|
|
agent_port: number;
|
|
status: string;
|
|
last_heartbeat: string | null;
|
|
client_cert_fingerprint: string;
|
|
updater_cert_fingerprint: string | null;
|
|
enrolled_at: string;
|
|
notes: string | null;
|
|
}
|
|
|
|
interface BundleResult {
|
|
token: string;
|
|
host_uuid: string;
|
|
command: string;
|
|
expires_at: string;
|
|
}
|
|
|
|
const shortFp = (fp: string): string => (fp ? fp.slice(0, 16) + '…' : '—');
|
|
|
|
// ─── Enrollment wizard ────────────────────────────────────────────────────
|
|
|
|
interface EnrollmentWizardProps {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
onEnrolled: () => void;
|
|
}
|
|
|
|
const EnrollmentWizard: React.FC<EnrollmentWizardProps> = ({ open, onClose, onEnrolled }) => {
|
|
const [step, setStep] = useState(0);
|
|
const [masterHost, setMasterHost] = useState(window.location.hostname);
|
|
const [agentName, setAgentName] = useState('');
|
|
const [withUpdater, setWithUpdater] = useState(true);
|
|
const [useIpvlan, setUseIpvlan] = useState(false);
|
|
const [servicesIni, setServicesIni] = useState<string | null>(null);
|
|
const [servicesIniName, setServicesIniName] = useState<string | null>(null);
|
|
const [submitting, setSubmitting] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [result, setResult] = useState<BundleResult | null>(null);
|
|
const [copied, setCopied] = useState(false);
|
|
const [now, setNow] = useState<number>(Date.now());
|
|
const fileRef = useRef<HTMLInputElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
setStep(0);
|
|
setMasterHost(window.location.hostname);
|
|
setAgentName('');
|
|
setWithUpdater(true);
|
|
setUseIpvlan(false);
|
|
setServicesIni(null);
|
|
setServicesIniName(null);
|
|
setSubmitting(false);
|
|
setError(null);
|
|
setResult(null);
|
|
setCopied(false);
|
|
if (fileRef.current) fileRef.current.value = '';
|
|
}, [open]);
|
|
|
|
useEffect(() => {
|
|
if (!result) return;
|
|
const t = setInterval(() => setNow(Date.now()), 1000);
|
|
return () => clearInterval(t);
|
|
}, [result]);
|
|
|
|
const handleFile = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const f = e.target.files?.[0];
|
|
if (!f) {
|
|
setServicesIni(null);
|
|
setServicesIniName(null);
|
|
return;
|
|
}
|
|
const reader = new FileReader();
|
|
reader.onload = () => {
|
|
setServicesIni(String(reader.result));
|
|
setServicesIniName(f.name);
|
|
};
|
|
reader.readAsText(f);
|
|
};
|
|
|
|
const nameOk = /^[a-z0-9][a-z0-9-]{0,62}$/.test(agentName);
|
|
|
|
const generate = async () => {
|
|
setSubmitting(true);
|
|
setError(null);
|
|
try {
|
|
const res = await api.post('/swarm/enroll-bundle', {
|
|
master_host: masterHost,
|
|
agent_name: agentName,
|
|
with_updater: withUpdater,
|
|
use_ipvlan: useIpvlan,
|
|
services_ini: servicesIni,
|
|
});
|
|
setResult(res.data);
|
|
onEnrolled();
|
|
} catch (err: unknown) {
|
|
const e = err as { response?: { data?: { detail?: string } } };
|
|
setError(e?.response?.data?.detail || 'Enrollment bundle creation failed');
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const copyCmd = async () => {
|
|
if (!result) return;
|
|
await navigator.clipboard.writeText(result.command);
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2000);
|
|
};
|
|
|
|
const remainingSecs = result
|
|
? Math.max(0, Math.floor((new Date(result.expires_at).getTime() - now) / 1000))
|
|
: 0;
|
|
const mm = Math.floor(remainingSecs / 60).toString().padStart(2, '0');
|
|
const ss = (remainingSecs % 60).toString().padStart(2, '0');
|
|
|
|
const canNext = step === 0 ? (nameOk && !!masterHost) : true;
|
|
|
|
return (
|
|
<Modal
|
|
open={open}
|
|
onClose={onClose}
|
|
title="ENROLL SWARM HOST"
|
|
icon={UserPlus}
|
|
accent="violet"
|
|
width="wide"
|
|
footer={
|
|
<>
|
|
<button className="btn ghost" onClick={onClose}>
|
|
{result ? 'CLOSE' : 'CANCEL'}
|
|
</button>
|
|
<div style={{ display: 'flex', gap: 8 }}>
|
|
{step > 0 && !result && (
|
|
<button className="btn ghost" onClick={() => setStep((s) => s - 1)}>← BACK</button>
|
|
)}
|
|
{step < 2 && (
|
|
<button className="btn" disabled={!canNext} onClick={() => setStep((s) => s + 1)}>
|
|
NEXT →
|
|
</button>
|
|
)}
|
|
{step === 2 && !result && (
|
|
<button
|
|
className="btn violet"
|
|
disabled={submitting || !nameOk || !masterHost}
|
|
onClick={generate}
|
|
>
|
|
{submitting ? 'GENERATING…' : 'GENERATE BUNDLE'}
|
|
</button>
|
|
)}
|
|
{result && (
|
|
<button
|
|
className="btn"
|
|
onClick={() => {
|
|
setResult(null);
|
|
setAgentName('');
|
|
setStep(0);
|
|
}}
|
|
>
|
|
<RotateCcw size={12} /> NEW BUNDLE
|
|
</button>
|
|
)}
|
|
</div>
|
|
</>
|
|
}
|
|
>
|
|
<>
|
|
<div className="wizard-steps">
|
|
{['IDENTITY', 'OPTIONS', 'BUNDLE'].map((l, i) => (
|
|
<div key={l} className={`wizard-step ${i === step ? 'active' : i < step ? 'done' : ''}`}>
|
|
{i + 1}. {l}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="modal-body">
|
|
{step === 0 && (
|
|
<>
|
|
<div className="type-label">Who is this worker, and how does it reach the master?</div>
|
|
<div className="tweak-group">
|
|
<label>MASTER HOST (IP or DNS this agent can reach)</label>
|
|
<input
|
|
className="input"
|
|
type="text"
|
|
value={masterHost}
|
|
onChange={(e) => setMasterHost(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="tweak-group">
|
|
<label>AGENT NAME (lowercase, digits, dashes)</label>
|
|
<input
|
|
className="input"
|
|
type="text"
|
|
value={agentName}
|
|
onChange={(e) => setAgentName(e.target.value.toLowerCase())}
|
|
pattern="^[a-z0-9][a-z0-9-]{0,62}$"
|
|
data-autofocus
|
|
/>
|
|
{agentName && !nameOk && (
|
|
<small className="field-warn">
|
|
<AlertTriangle size={12} /> must match ^[a-z0-9][a-z0-9-]{'{0,62}'}$
|
|
</small>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{step === 1 && (
|
|
<>
|
|
<div className="type-label">Bundle options — tune for the target environment.</div>
|
|
<div
|
|
style={{
|
|
display: 'flex', gap: 10, alignItems: 'flex-start',
|
|
padding: 14, border: '1px solid var(--border)',
|
|
}}
|
|
>
|
|
<input
|
|
id="with-updater"
|
|
type="checkbox"
|
|
checked={withUpdater}
|
|
onChange={(e) => setWithUpdater(e.target.checked)}
|
|
style={{ accentColor: 'var(--matrix)', marginTop: 2 }}
|
|
/>
|
|
<label htmlFor="with-updater" style={{ fontSize: '0.8rem', letterSpacing: 1, flex: 1 }}>
|
|
INSTALL UPDATER DAEMON
|
|
<div className="dim" style={{ fontSize: '0.65rem', letterSpacing: 1, marginTop: 4 }}>
|
|
Lets the master push code updates to this agent.
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<div
|
|
style={{
|
|
display: 'flex', gap: 10, alignItems: 'flex-start',
|
|
padding: 14, border: '1px solid var(--border)',
|
|
}}
|
|
>
|
|
<input
|
|
id="use-ipvlan"
|
|
type="checkbox"
|
|
checked={useIpvlan}
|
|
onChange={(e) => setUseIpvlan(e.target.checked)}
|
|
style={{ accentColor: 'var(--matrix)', marginTop: 2 }}
|
|
/>
|
|
<label htmlFor="use-ipvlan" style={{ fontSize: '0.8rem', letterSpacing: 1, flex: 1 }}>
|
|
USE IPVLAN INSTEAD OF MACVLAN
|
|
<div className="dim" style={{ fontSize: '0.65rem', letterSpacing: 1, marginTop: 4 }}>
|
|
Required for VirtualBox/VMware guests bridged over Wi-Fi — Wi-Fi APs bind
|
|
one MAC per station, so MACVLAN rotates the VM's lease.
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<div className="tweak-group">
|
|
<label>SERVICES INI (optional)</label>
|
|
<input ref={fileRef} type="file" accept=".ini,.conf,.txt" onChange={handleFile} />
|
|
{servicesIniName && (
|
|
<div className="dim" style={{ fontSize: '0.65rem', letterSpacing: 1 }}>
|
|
loaded: {servicesIniName}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{step === 2 && (
|
|
<>
|
|
{!result ? (
|
|
<>
|
|
<div className="type-label">
|
|
Review and generate a one-shot bootstrap URL valid for 5 minutes.
|
|
</div>
|
|
<div className="code-block">
|
|
<span className="comment"># enrollment bundle preview</span>{'\n'}
|
|
<span className="key"> master_host</span>{' '}<span className="str">{masterHost}</span>{'\n'}
|
|
<span className="key"> agent_name </span>{' '}<span className="str">{agentName}</span>{'\n'}
|
|
<span className="key"> updater </span>{' '}<span className="str">{withUpdater ? 'yes' : 'no'}</span>{'\n'}
|
|
<span className="key"> ipvlan </span>{' '}<span className="str">{useIpvlan ? 'yes' : 'no'}</span>{'\n'}
|
|
<span className="key"> services </span>{' '}<span className="str">{servicesIniName ?? '—'}</span>
|
|
</div>
|
|
{error && (
|
|
<div
|
|
style={{
|
|
border: '1px solid var(--alert)', color: 'var(--alert)',
|
|
padding: '8px 12px', fontSize: '0.75rem', letterSpacing: 1,
|
|
}}
|
|
>
|
|
✖ {error}
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className="type-label">Paste this on the new worker (as root):</div>
|
|
<div className="code-block" style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
|
|
{result.command}
|
|
</div>
|
|
<div style={{ display: 'flex', gap: 8 }}>
|
|
<button className="btn" onClick={copyCmd}>
|
|
{copied ? <><Check size={12} /> COPIED</> : <><Copy size={12} /> COPY</>}
|
|
</button>
|
|
</div>
|
|
<div className="dim" style={{ fontSize: '0.7rem', letterSpacing: 1 }}>
|
|
Expires in <strong>{mm}:{ss}</strong> — one-shot, single download.
|
|
Host UUID: <code>{result.host_uuid}</code>
|
|
</div>
|
|
{remainingSecs === 0 && (
|
|
<div
|
|
style={{
|
|
border: '1px solid var(--alert)', color: 'var(--alert)',
|
|
padding: '8px 12px', fontSize: '0.75rem', letterSpacing: 1,
|
|
display: 'flex', alignItems: 'center', gap: 8,
|
|
}}
|
|
>
|
|
<AlertTriangle size={14} /> This bundle has expired. Generate another.
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
// ─── Swarm hosts page ─────────────────────────────────────────────────────
|
|
|
|
const SwarmHosts: React.FC = () => {
|
|
const [hosts, setHosts] = useState<SwarmHost[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [decommissioning, setDecommissioning] = useState<Set<string>>(new Set());
|
|
const [tearingDown, setTearingDown] = useState<Set<string>>(new Set());
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [showEnroll, setShowEnroll] = useState(false);
|
|
// Two-click arm/commit replaces window.confirm(). Browsers silently
|
|
// suppress confirm() after the "prevent additional dialogs" opt-out,
|
|
// which manifests as a dead button — no network request, no console
|
|
// error. Key format: "<action>:<uuid>".
|
|
const [armed, setArmed] = useState<string | null>(null);
|
|
const arm = (key: string) => {
|
|
setArmed(key);
|
|
setTimeout(() => setArmed((prev) => (prev === key ? null : prev)), 4000);
|
|
};
|
|
|
|
const fetchHosts = async () => {
|
|
try {
|
|
const res = await api.get('/swarm/hosts');
|
|
setHosts(res.data);
|
|
setError(null);
|
|
} catch (err: any) {
|
|
setError(err?.response?.data?.detail || 'Failed to fetch swarm hosts');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchHosts();
|
|
const t = setInterval(fetchHosts, 10000);
|
|
return () => clearInterval(t);
|
|
}, []);
|
|
|
|
const addTo = (set: Set<string>, id: string) => { const n = new Set(set); n.add(id); return n; };
|
|
const removeFrom = (set: Set<string>, id: string) => { const n = new Set(set); n.delete(id); return n; };
|
|
|
|
const handleTeardownAll = async (host: SwarmHost) => {
|
|
const key = `teardown:${host.uuid}`;
|
|
if (armed !== key) { arm(key); return; }
|
|
setArmed(null);
|
|
setTearingDown((s) => addTo(s, host.uuid));
|
|
try {
|
|
// 202 Accepted — teardown runs async on the backend.
|
|
await api.post(`/swarm/hosts/${host.uuid}/teardown`, {});
|
|
await fetchHosts();
|
|
} catch (err: any) {
|
|
alert(err?.response?.data?.detail || 'Teardown failed');
|
|
} finally {
|
|
setTearingDown((s) => removeFrom(s, host.uuid));
|
|
}
|
|
};
|
|
|
|
const handleDecommission = async (host: SwarmHost) => {
|
|
const key = `decom:${host.uuid}`;
|
|
if (armed !== key) { arm(key); return; }
|
|
setArmed(null);
|
|
setDecommissioning((s) => addTo(s, host.uuid));
|
|
try {
|
|
await api.delete(`/swarm/hosts/${host.uuid}`);
|
|
await fetchHosts();
|
|
} catch (err: any) {
|
|
alert(err?.response?.data?.detail || 'Decommission failed');
|
|
} finally {
|
|
setDecommissioning((s) => removeFrom(s, host.uuid));
|
|
}
|
|
};
|
|
|
|
const online = hosts.filter((h) => h.status === 'online').length;
|
|
|
|
return (
|
|
<div className="dashboard swarm-root">
|
|
<div className="page-header">
|
|
<div className="page-title-group">
|
|
<h1><HardDrive size={18} /> SWARM HOSTS</h1>
|
|
<span className="page-sub">
|
|
{loading ? 'LOADING…' : `${hosts.length} ENROLLED · ${online} ONLINE`}
|
|
</span>
|
|
</div>
|
|
<div style={{ display: 'flex', gap: 8 }}>
|
|
<button onClick={fetchHosts} className="control-btn" disabled={loading}>
|
|
<RefreshCw size={14} /> REFRESH
|
|
</button>
|
|
<button onClick={() => setShowEnroll(true)} className="control-btn primary">
|
|
<UserPlus size={14} /> ENROLL HOST
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{error && <div className="error-box">{error}</div>}
|
|
|
|
<div className="panel">
|
|
{loading ? (
|
|
<p>Loading hosts…</p>
|
|
) : hosts.length === 0 ? (
|
|
<EmptyState
|
|
icon={Server}
|
|
title="NO SWARM HOSTS ENROLLED"
|
|
hint="onboard an agent to expand the fleet"
|
|
cta={{ label: 'ENROLL HOST', onClick: () => setShowEnroll(true) }}
|
|
/>
|
|
) : (
|
|
<table className="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Status</th>
|
|
<th>Name</th>
|
|
<th>Address</th>
|
|
<th>Last heartbeat</th>
|
|
<th>Client cert</th>
|
|
<th>Enrolled</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{hosts.map((h) => (
|
|
<tr key={h.uuid}>
|
|
<td>
|
|
{h.status === 'active' ? <Wifi size={16} /> : <WifiOff size={16} />} {h.status}
|
|
</td>
|
|
<td>{h.name}</td>
|
|
<td>{h.address ? `${h.address}:${h.agent_port}` : <em>pending first connect</em>}</td>
|
|
<td>{h.last_heartbeat ? new Date(h.last_heartbeat).toLocaleString() : '—'}</td>
|
|
<td title={h.client_cert_fingerprint}><code>{shortFp(h.client_cert_fingerprint)}</code></td>
|
|
<td>{new Date(h.enrolled_at).toLocaleString()}</td>
|
|
<td>
|
|
<button
|
|
className={`control-btn${armed === `teardown:${h.uuid}` ? ' danger' : ''}`}
|
|
disabled={tearingDown.has(h.uuid) || h.status !== 'active'}
|
|
onClick={() => handleTeardownAll(h)}
|
|
title="Stop all deckies on this host (keeps it enrolled)"
|
|
>
|
|
<PowerOff size={14} />{' '}
|
|
{tearingDown.has(h.uuid)
|
|
? 'Tearing down…'
|
|
: armed === `teardown:${h.uuid}`
|
|
? 'Click again to confirm'
|
|
: 'Teardown all'}
|
|
</button>
|
|
<button
|
|
className="control-btn danger"
|
|
disabled={decommissioning.has(h.uuid)}
|
|
onClick={() => handleDecommission(h)}
|
|
>
|
|
<Trash2 size={14} />{' '}
|
|
{decommissioning.has(h.uuid)
|
|
? 'Decommissioning…'
|
|
: armed === `decom:${h.uuid}`
|
|
? 'Click again to confirm'
|
|
: 'Decommission'}
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
</div>
|
|
|
|
<EnrollmentWizard
|
|
open={showEnroll}
|
|
onClose={() => setShowEnroll(false)}
|
|
onEnrolled={fetchHosts}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SwarmHosts;
|