Phase 6: remote backup destinations — SFTP & S3 (0.6.0)
- BackupDestination model + backup_destination_service (SFTP via paramiko,
S3-compatible via boto3): upload/list/download/delete/test.
- routers/destinations.py: destinations CRUD (secrets masked, merge-on-update),
test, list/delete remote backups. backups.py: POST /{id}/backup/push and
POST /restore-from (download from a destination + restore, volumes included).
- Frontend: Settings → Backup destinations (SFTP/S3 forms + test); Backup dialog
can push to a destination; Restore dialog can pick a destination + backup.
- deps: paramiko 3.5.0, boto3 1.35.99.
Verified end-to-end against live MinIO + atmoz/sftp: create/test destinations,
push (incl. volumes), list, restore-from to a fresh stack (volume data intact),
delete remote backup.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
menzelj
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
59037f4287
commit
7bd449101d
@@ -11,6 +11,7 @@ import {
|
||||
Power,
|
||||
Server,
|
||||
RefreshCw,
|
||||
HardDrive,
|
||||
} from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { Badge, Button, Card, Input, Spinner } from "@/components/ui";
|
||||
@@ -20,6 +21,7 @@ import {
|
||||
type Webhook,
|
||||
type WebhookInput,
|
||||
} from "@/api/settings";
|
||||
import { destinationsApi, type BackupDestination } from "@/api/backups";
|
||||
import { agentsApi } from "@/api/agents";
|
||||
import { HostDot } from "@/components/hosts/HostDot";
|
||||
import { apiErrorMessage } from "@/api/client";
|
||||
@@ -45,12 +47,171 @@ export function Settings() {
|
||||
<div className="mx-auto max-w-3xl space-y-6">
|
||||
<GeneralSection />
|
||||
<HostsSection />
|
||||
<DestinationsSection />
|
||||
<NotificationsSection />
|
||||
<UsersSection />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* Backup destinations */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
const selectClass =
|
||||
"w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm dark:border-slate-600 dark:bg-slate-800";
|
||||
|
||||
const FIELDS: Record<string, { key: string; label: string; secret?: boolean; area?: boolean; placeholder?: string }[]> = {
|
||||
sftp: [
|
||||
{ key: "host", label: "Host" },
|
||||
{ key: "port", label: "Port", placeholder: "22" },
|
||||
{ key: "username", label: "Username" },
|
||||
{ key: "password", label: "Password", secret: true },
|
||||
{ key: "private_key", label: "Private key (optional, instead of password)", secret: true, area: true },
|
||||
{ key: "path", label: "Remote directory", placeholder: "/backups/stackpilot" },
|
||||
],
|
||||
s3: [
|
||||
{ key: "endpoint_url", label: "Endpoint URL (blank = AWS)", placeholder: "https://minio.example:9000" },
|
||||
{ key: "region", label: "Region", placeholder: "us-east-1" },
|
||||
{ key: "bucket", label: "Bucket" },
|
||||
{ key: "access_key", label: "Access key", secret: true },
|
||||
{ key: "secret_key", label: "Secret key", secret: true },
|
||||
{ key: "prefix", label: "Key prefix (optional)", placeholder: "stackpilot/" },
|
||||
],
|
||||
};
|
||||
|
||||
function DestinationsSection() {
|
||||
const qc = useQueryClient();
|
||||
const { data, isLoading } = useQuery({ queryKey: ["destinations"], queryFn: destinationsApi.list });
|
||||
const [adding, setAdding] = useState(false);
|
||||
const invalidate = () => qc.invalidateQueries({ queryKey: ["destinations"] });
|
||||
|
||||
return (
|
||||
<section>
|
||||
<SectionTitle icon={<HardDrive className="h-4 w-4" />}>Backup destinations</SectionTitle>
|
||||
<div className="space-y-3">
|
||||
{isLoading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
data?.map((d) => <DestinationRow key={d.id} dest={d} onChange={invalidate} />)
|
||||
)}
|
||||
{data?.length === 0 && !adding && (
|
||||
<Card>
|
||||
<p className="text-sm text-slate-500">
|
||||
No destinations. Add an SFTP server or S3-compatible bucket to push stack
|
||||
backups off-box and restore from them.
|
||||
</p>
|
||||
</Card>
|
||||
)}
|
||||
{adding ? (
|
||||
<DestinationForm onDone={() => { setAdding(false); invalidate(); }} onCancel={() => setAdding(false)} />
|
||||
) : (
|
||||
<Button variant="outline" onClick={() => setAdding(true)}>
|
||||
<Plus className="h-4 w-4" /> Add destination
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function DestinationRow({ dest, onChange }: { dest: BackupDestination; onChange: () => void }) {
|
||||
const test = useMutation({
|
||||
mutationFn: () => destinationsApi.test(dest.id),
|
||||
onSuccess: (r) =>
|
||||
r.ok ? toast.success("Reachable") : toast.error(r.error || "Connection failed"),
|
||||
onError: (e) => toast.error(apiErrorMessage(e)),
|
||||
});
|
||||
const remove = useMutation({
|
||||
mutationFn: () => destinationsApi.remove(dest.id),
|
||||
onSuccess: () => { toast.success("Destination removed"); onChange(); },
|
||||
onError: (e) => toast.error(apiErrorMessage(e)),
|
||||
});
|
||||
|
||||
const summary =
|
||||
dest.type === "s3"
|
||||
? `${dest.config.bucket}${dest.config.prefix ? "/" + dest.config.prefix : ""}`
|
||||
: `${dest.config.username}@${dest.config.host}:${dest.config.path || "."}`;
|
||||
|
||||
return (
|
||||
<Card className="flex flex-wrap items-center justify-between gap-2">
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium">{dest.name}</span>
|
||||
<Badge>{dest.type}</Badge>
|
||||
</div>
|
||||
<p className="break-all font-mono text-xs text-slate-500">{summary}</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="ghost" onClick={() => test.mutate()} loading={test.isPending}>
|
||||
<RefreshCw className="h-4 w-4" /> Test
|
||||
</Button>
|
||||
<Button variant="ghost" onClick={() => remove.mutate()} loading={remove.isPending}>
|
||||
<Trash2 className="h-4 w-4 text-red-500" />
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function DestinationForm({ onDone, onCancel }: { onDone: () => void; onCancel: () => void }) {
|
||||
const [name, setName] = useState("");
|
||||
const [type, setType] = useState("sftp");
|
||||
const [config, setConfig] = useState<Record<string, string>>({});
|
||||
|
||||
const create = useMutation({
|
||||
mutationFn: () => destinationsApi.create({ name, type, config }),
|
||||
onSuccess: () => { toast.success("Destination added"); onDone(); },
|
||||
onError: (e) => toast.error(apiErrorMessage(e)),
|
||||
});
|
||||
|
||||
const setField = (k: string, v: string) => setConfig((c) => ({ ...c, [k]: v }));
|
||||
|
||||
return (
|
||||
<Card className="space-y-3">
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<label className="space-y-1">
|
||||
<span className="text-xs font-medium text-slate-500">Name</span>
|
||||
<Input value={name} onChange={(e) => setName(e.target.value)} placeholder="offsite-nas" />
|
||||
</label>
|
||||
<label className="space-y-1">
|
||||
<span className="text-xs font-medium text-slate-500">Type</span>
|
||||
<select className={selectClass} value={type} onChange={(e) => { setType(e.target.value); setConfig({}); }}>
|
||||
<option value="sftp">SFTP</option>
|
||||
<option value="s3">S3-compatible</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
{FIELDS[type].map((f) => (
|
||||
<label key={f.key} className="block space-y-1">
|
||||
<span className="text-xs font-medium text-slate-500">{f.label}</span>
|
||||
{f.area ? (
|
||||
<textarea
|
||||
value={config[f.key] ?? ""}
|
||||
onChange={(e) => setField(f.key, e.target.value)}
|
||||
rows={3}
|
||||
className={selectClass + " font-mono"}
|
||||
/>
|
||||
) : (
|
||||
<Input
|
||||
type={f.secret ? "password" : "text"}
|
||||
placeholder={f.placeholder}
|
||||
value={config[f.key] ?? ""}
|
||||
onChange={(e) => setField(f.key, e.target.value)}
|
||||
/>
|
||||
)}
|
||||
</label>
|
||||
))}
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="outline" onClick={onCancel}>Cancel</Button>
|
||||
<Button onClick={() => create.mutate()} loading={create.isPending} disabled={!name.trim()}>
|
||||
Add destination
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* Remote hosts (agents) */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
Reference in New Issue
Block a user