Add backups with S3, daily cost push, automation templates and a browser tool
- Daily backups (database + config) into <data_dir>/backups, keep N, optional upload to any S3-compatible bucket (SigV4, bucket pruning); settings panel with run-now, list and download - Daily cost summary push at 20:00 (opt-in per user, preview button) - Automations from templates (dependency check, security review, test health, daily summary, TODO report, docs freshness) via POST /jobs/create - browser tool: headless Chromium over CDP – click, type, keys, waits, JavaScript, navigation, screenshots, console errors; requests to private network addresses are blocked (sub-resources and redirects included) - Secrets masked in the config view: S3 secret key, metrics token - Replace the remaining text arrows/refresh glyphs with SVG icons Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Richard ZinkandClaude Opus 5.5 committed
1 parent
873447ed17
commit
01c1484033
25 files changed
+1720
-47
No files matched your search
@@ -0,0 +1,190 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { get, patch, post } from "../../api";
|
||||
import { toast } from "../../dialogs";
|
||||
import { useFetch } from "../../hooks";
|
||||
import { fmtDate, useT } from "../../i18n";
|
||||
import { formatSize } from "../FileFigure";
|
||||
import { Icon } from "../Icon";
|
||||
|
||||
const MASK = "••••••••";
|
||||
|
||||
interface Overview {
|
||||
files: { name: string; size: number; modified: number }[];
|
||||
dir: string;
|
||||
last?: { at: number; file: string; size: number; error?: string; s3?: string } | null;
|
||||
enabled: boolean;
|
||||
hour: number;
|
||||
keep: number;
|
||||
s3: boolean;
|
||||
}
|
||||
|
||||
interface S3 {
|
||||
endpoint: string;
|
||||
region: string;
|
||||
bucket: string;
|
||||
prefix: string;
|
||||
access_key: string;
|
||||
secret_key: string;
|
||||
keep: number;
|
||||
}
|
||||
|
||||
/** Admin: automatic daily backups (local + S3) and manual download. */
|
||||
export function Backups() {
|
||||
const t = useT();
|
||||
const { data, reload } = useFetch<Overview>("/backups");
|
||||
const [form, setForm] = useState<{ enabled: boolean; hour: number; keep: number; s3: S3 }>();
|
||||
const [secret, setSecret] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
get<{ config: { backup?: { enabled?: boolean; hour?: number; keep?: number; s3?: Partial<S3> } } }>("/config")
|
||||
.then((r) => {
|
||||
const b = r.config.backup ?? {};
|
||||
const s3 = b.s3 ?? {};
|
||||
setForm({
|
||||
enabled: b.enabled ?? true,
|
||||
hour: b.hour ?? 3,
|
||||
keep: b.keep ?? 30,
|
||||
s3: { endpoint: s3.endpoint ?? "", region: s3.region ?? "", bucket: s3.bucket ?? "", prefix: s3.prefix ?? "", access_key: s3.access_key ?? "", secret_key: s3.secret_key ?? "", keep: s3.keep ?? 0 },
|
||||
});
|
||||
})
|
||||
.catch((e) => toast(e.message));
|
||||
}, []);
|
||||
|
||||
const save = async () => {
|
||||
if (!form) return;
|
||||
const patches = [
|
||||
{ path: ["backup", "enabled"], value: form.enabled },
|
||||
{ path: ["backup", "hour"], value: Math.min(23, Math.max(0, Number(form.hour) || 0)) },
|
||||
{ path: ["backup", "keep"], value: Math.max(1, Number(form.keep) || 30) },
|
||||
{ path: ["backup", "s3", "endpoint"], value: form.s3.endpoint.trim() },
|
||||
{ path: ["backup", "s3", "region"], value: form.s3.region.trim() },
|
||||
{ path: ["backup", "s3", "bucket"], value: form.s3.bucket.trim() },
|
||||
{ path: ["backup", "s3", "prefix"], value: form.s3.prefix.trim() },
|
||||
{ path: ["backup", "s3", "access_key"], value: form.s3.access_key.trim() },
|
||||
{ path: ["backup", "s3", "keep"], value: Math.max(0, Number(form.s3.keep) || 0) },
|
||||
];
|
||||
// Empty field = keep the stored secret.
|
||||
if (secret) patches.push({ path: ["backup", "s3", "secret_key"], value: secret });
|
||||
try {
|
||||
await patch("/config", { patches });
|
||||
setSecret("");
|
||||
toast(t("settings.saved"), "success");
|
||||
reload();
|
||||
} catch (e: any) {
|
||||
toast(e.message);
|
||||
}
|
||||
};
|
||||
|
||||
const runNow = async () => {
|
||||
setBusy(true);
|
||||
try {
|
||||
const r = await post<{ file: string; s3?: string }>("/backups");
|
||||
if (r.s3 && r.s3 !== "ok") toast(`${t("backup.s3Failed")}: ${r.s3}`);
|
||||
else toast(t("backup.created", { file: r.file }), "success");
|
||||
reload();
|
||||
} catch (e: any) {
|
||||
toast(e.message);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const s3 = (k: keyof S3, label: string, placeholder = "", type = "text") =>
|
||||
form && (
|
||||
<label className="field">
|
||||
<span>{label}</span>
|
||||
<input
|
||||
type={type}
|
||||
value={String(form.s3[k] ?? "")}
|
||||
placeholder={placeholder}
|
||||
onChange={(e) => setForm({ ...form, s3: { ...form.s3, [k]: type === "number" ? Number(e.target.value) : e.target.value } })}
|
||||
/>
|
||||
</label>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="panel">
|
||||
<h3>
|
||||
<Icon name="archive" /> {t("audit.backup")}
|
||||
<span className="spacer" />
|
||||
<a className="button small" href="/api/backup">
|
||||
<Icon name="download" /> {t("audit.download")}
|
||||
</a>
|
||||
<button className="small primary" onClick={runNow} disabled={busy}>
|
||||
{busy ? t("backup.running") : t("backup.now")}
|
||||
</button>
|
||||
</h3>
|
||||
<div className="hint" style={{ marginBottom: 10 }}>
|
||||
{t("audit.backupHint")}
|
||||
</div>
|
||||
{form && (
|
||||
<>
|
||||
<div className="row" style={{ gap: 12, flexWrap: "wrap", alignItems: "center" }}>
|
||||
<label className="row" style={{ gap: 6, alignItems: "center" }}>
|
||||
<input type="checkbox" checked={form.enabled} onChange={(e) => setForm({ ...form, enabled: e.target.checked })} />
|
||||
{t("backup.daily")}
|
||||
</label>
|
||||
<label className="row" style={{ gap: 6, alignItems: "center" }}>
|
||||
{t("backup.at")}
|
||||
<input type="number" min={0} max={23} style={{ width: 64 }} value={form.hour} onChange={(e) => setForm({ ...form, hour: Number(e.target.value) })} />
|
||||
{t("backup.oclock")}
|
||||
</label>
|
||||
<label className="row" style={{ gap: 6, alignItems: "center" }}>
|
||||
{t("backup.keep")}
|
||||
<input type="number" min={1} style={{ width: 70 }} value={form.keep} onChange={(e) => setForm({ ...form, keep: Number(e.target.value) })} />
|
||||
</label>
|
||||
</div>
|
||||
{data && <div className="hint mono" style={{ marginTop: 6 }}>{data.dir}</div>}
|
||||
<details className="backup-s3" open={!!form.s3.endpoint}>
|
||||
<summary>{t("backup.s3")}</summary>
|
||||
<div className="hint" style={{ margin: "6px 0 10px" }}>
|
||||
{t("backup.s3Hint")}
|
||||
</div>
|
||||
<div className="field-grid">
|
||||
{s3("endpoint", t("backup.endpoint"), "https://s3.eu-central-1.amazonaws.com")}
|
||||
{s3("region", t("backup.region"), "eu-central-1")}
|
||||
{s3("bucket", t("backup.bucket"), "my-backups")}
|
||||
{s3("prefix", t("backup.prefix"), "codecraft/")}
|
||||
{s3("access_key", t("backup.accessKey"), "AKIA… or ${S3_ACCESS_KEY}")}
|
||||
<label className="field">
|
||||
<span>{t("backup.secretKey")}</span>
|
||||
<input
|
||||
type="password"
|
||||
value={secret}
|
||||
autoComplete="new-password"
|
||||
placeholder={form.s3.secret_key === MASK ? t("backup.secretStored") : form.s3.secret_key || "${S3_SECRET_KEY}"}
|
||||
onChange={(e) => setSecret(e.target.value)}
|
||||
/>
|
||||
</label>
|
||||
{s3("keep", t("backup.s3Keep"), "0", "number")}
|
||||
</div>
|
||||
</details>
|
||||
<div className="row" style={{ marginTop: 10, justifyContent: "flex-end" }}>
|
||||
<button className="primary" onClick={save}>
|
||||
{t("common.save")}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{data?.last && (
|
||||
<div className={`notice ${data.last.error || (data.last.s3 && data.last.s3 !== "ok") ? "err" : "ok"}`} style={{ marginTop: 10 }}>
|
||||
{t("backup.last")}: {fmtDate(data.last.at)} · {data.last.error ?? `${data.last.file} (${formatSize(data.last.size)})`}
|
||||
{data.last.s3 && ` · S3: ${data.last.s3 === "ok" ? t("backup.s3Ok") : data.last.s3}`}
|
||||
</div>
|
||||
)}
|
||||
{data && data.files.length > 0 && (
|
||||
<div className="backup-list">
|
||||
{data.files.map((f) => (
|
||||
<a key={f.name} href={`/api/backups/${encodeURIComponent(f.name)}`} className="backup-file">
|
||||
<Icon name="file" />
|
||||
<span className="grow">{f.name}</span>
|
||||
<span className="hint">{formatSize(f.size)}</span>
|
||||
<Icon name="download" />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user