Add Tailscale integration and harden all routes against crash-on-throw
First of the six planned live integrations (Proxmox, Synology, Semaphore, Tailscale, Gitea, Dockhand), reusing Sloth Manager's existing Tailscale adapter logic. Generalizes the "integrations" table already scaffolded in the foundation pass into a working config-in-UI + encrypted-credentials flow, following the same pattern as the DNS providers module — an "Add integration" form only offers types with an implemented adapter (currently just Tailscale), so the framework is ready for the next five integrations without further schema/plumbing changes. - server/src/integrations/tailscale/adapter.ts: ported from Sloth Manager's backend/src/adapters/tailscale.js — listDevices/setAuthorized/deleteDevice against the Tailscale API, now config-based (tailnet + apiKey) instead of reading process.env, and returning a ping() result instead of throwing. - server/src/routes/integrations.ts: generic integration CRUD (admin) + a "test connection" endpoint, plus Tailscale-specific device routes (dashboard-and-basic-actions depth per the plan: authorize/deauthorize/ remove, gated to operator+, audit-logged). - web: an Integrations page (provider-style manage/browse split, matching the DNS page's UX) with a device table, and a live Tailscale widget on the Dashboard. Bug found and fixed while testing: hitting the Tailscale device routes on a non-Tailscale integration row crashed the ENTIRE server process, not just that request — the generic adapter registry throws for unimplemented types, and that throw happened inside an async handler with no surrounding try/catch, which Express 4 doesn't catch, so it became an unhandled rejection that (on modern Node) kills the process. Fixed at the source (check the row's type before ever constructing an adapter) and, since the same "a helper throws before any local try/catch runs" shape existed wherever a route calls into loadDnsProviderConfig/loadIntegrationConfig (both call decryptSecret, which throws if CREDENTIALS_ENCRYPTION_KEY is ever wrong/missing after data was already encrypted with a different key), added a small asyncHandler() wrapper and applied it to every route handler across every router — a single bad request should never be able to take the whole app down for every user. Verified: full build passes. Fresh HTTP-layer tests against a running server (17 checks) cover not-implemented-type rejection, missing-field validation, a real network call to api.tailscale.com with a bogus key (clean ok:false, not a crash), role gating at every tier, credential non-leakage, disabled-integration blocking, and the wrong_type case that originally crashed the server — confirmed it now returns 400 cleanly and the server stays up. Re-ran the existing DNS (13 checks) and Servers/Tasks suites afterward to confirm the asyncHandler sweep didn't regress anything — all passing. Authorizing/removing a real device still needs a real Tailscale API key to verify end-to-end. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
bobbanandClaude Sonnet 5 committed
1 parent
3bb0c767b9
commit
9c2742c30f
21 files changed
+1234
-84
No files matched your search
@@ -0,0 +1,173 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { api, type IntegrationField, type IntegrationType } from "../api/client";
|
||||
|
||||
const TYPE_LABELS: Record<IntegrationType, string> = {
|
||||
tailscale: "Tailscale",
|
||||
proxmox: "Proxmox",
|
||||
synology: "Synology",
|
||||
semaphore: "Semaphore",
|
||||
gitea: "Gitea",
|
||||
dockhand: "Dockhand",
|
||||
};
|
||||
|
||||
export default function IntegrationForm({ onCreated, onCancel }: { onCreated: () => void; onCancel: () => void }) {
|
||||
const [allFields, setAllFields] = useState<Partial<Record<IntegrationType, IntegrationField[]>> | null>(null);
|
||||
const [type, setType] = useState<IntegrationType | null>(null);
|
||||
const [name, setName] = useState("");
|
||||
const [values, setValues] = useState<Record<string, string | boolean>>({});
|
||||
const [testResult, setTestResult] = useState<{ ok: boolean; latencyMs?: number; error?: string } | null>(null);
|
||||
const [testing, setTesting] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
api.integrations.fields().then((res) => {
|
||||
setAllFields(res.fields);
|
||||
const firstType = Object.keys(res.fields)[0] as IntegrationType | undefined;
|
||||
if (firstType) setType(firstType);
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setValues({});
|
||||
setTestResult(null);
|
||||
}, [type]);
|
||||
|
||||
const availableTypes = allFields ? (Object.keys(allFields) as IntegrationType[]) : [];
|
||||
const fields = (type && allFields?.[type]) ?? [];
|
||||
|
||||
function setField(key: string, value: string | boolean) {
|
||||
setValues((v) => ({ ...v, [key]: value }));
|
||||
}
|
||||
|
||||
async function testConnection() {
|
||||
if (!type) return;
|
||||
setTesting(true);
|
||||
setTestResult(null);
|
||||
try {
|
||||
const result = await api.integrations.test({ type, config: values });
|
||||
setTestResult(result);
|
||||
} catch (err) {
|
||||
setTestResult({ ok: false, error: err instanceof Error ? err.message : String(err) });
|
||||
} finally {
|
||||
setTesting(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function submit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!type) return;
|
||||
setError(null);
|
||||
setSaving(true);
|
||||
try {
|
||||
await api.integrations.create({ type, name, config: values });
|
||||
onCreated();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : String(err));
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (allFields && availableTypes.length === 0) {
|
||||
return (
|
||||
<div className="card mb-3">
|
||||
<div className="card-body text-secondary">
|
||||
No integration types are implemented yet.
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="card mb-3">
|
||||
<div className="card-header">
|
||||
<h3 className="card-title">Add an integration</h3>
|
||||
</div>
|
||||
<form onSubmit={submit}>
|
||||
<div className="card-body row g-3">
|
||||
{error && (
|
||||
<div className="col-12">
|
||||
<div className="alert alert-danger">{error}</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="col-md-4">
|
||||
<label className="form-label">Integration</label>
|
||||
<select
|
||||
className="form-select"
|
||||
value={type ?? ""}
|
||||
onChange={(e) => setType(e.target.value as IntegrationType)}
|
||||
>
|
||||
{availableTypes.map((t) => (
|
||||
<option key={t} value={t}>
|
||||
{TYPE_LABELS[t]}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<label className="form-label">Display name</label>
|
||||
<input
|
||||
className="form-control"
|
||||
required
|
||||
placeholder="e.g. Home tailnet"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{fields.map((field) => (
|
||||
<div className="col-md-4" key={field.key}>
|
||||
{field.type === "checkbox" ? (
|
||||
<label className="form-check form-check-single mt-4">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
checked={Boolean(values[field.key])}
|
||||
onChange={(e) => setField(field.key, e.target.checked)}
|
||||
/>
|
||||
<span className="form-check-label">{field.label}</span>
|
||||
</label>
|
||||
) : (
|
||||
<>
|
||||
<label className="form-label">{field.label}</label>
|
||||
<input
|
||||
type={field.type === "password" ? "password" : "text"}
|
||||
className="form-control"
|
||||
placeholder={field.placeholder}
|
||||
required
|
||||
value={(values[field.key] as string) ?? ""}
|
||||
onChange={(e) => setField(field.key, e.target.value)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{testResult && (
|
||||
<div className="col-12">
|
||||
{testResult.ok ? (
|
||||
<div className="alert alert-success mb-0">
|
||||
Connection OK{testResult.latencyMs !== undefined ? ` (${testResult.latencyMs}ms)` : ""}.
|
||||
</div>
|
||||
) : (
|
||||
<div className="alert alert-danger mb-0">Connection failed: {testResult.error}</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="card-footer d-flex gap-2">
|
||||
<button type="button" className="btn btn-outline-secondary" onClick={testConnection} disabled={testing || !type}>
|
||||
{testing ? "Testing…" : "Test connection"}
|
||||
</button>
|
||||
<button type="submit" className="btn btn-primary" disabled={saving || !type}>
|
||||
Add integration
|
||||
</button>
|
||||
<button type="button" className="btn" onClick={onCancel}>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user