Expose native storage retention for VM and CT backups

AppImage/components/backup-storage-retention.tsx

@@ -0,0 +1,99 @@
+"use client"
+
+import { useState } from "react"
+import useSWR from "swr"
+import { HardDrive, Loader2, Pencil, RefreshCw } from "lucide-react"
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
+import { Badge } from "./ui/badge"
+import { Button } from "./ui/button"
+import { Checkbox } from "./ui/checkbox"
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "./ui/dialog"
+import { Input } from "./ui/input"
+import { Label } from "./ui/label"
+import { fetchApi } from "../lib/api-config"
+import { buildRetention, parseRetention, RETENTION } from "../lib/backup-retention"
+import { useT } from "../lib/i18n/provider"
+
+interface StorageRetention { id: string; type: string; prune_backups: string; digest: string }
+const fetcher = (url: string) => fetchApi<{ storages: StorageRetention[] }>(url)
+
+export function BackupStorageRetention() {
+  const t = useT()
+  const { data, error, mutate, isValidating } = useSWR("/api/vm-backup-storages", fetcher)
+  const [editing, setEditing] = useState<StorageRetention | null>(null)
+  const [fields, setFields] = useState<Record<string, string>>({})
+  const [keepAll, setKeepAll] = useState(false)
+  const [busy, setBusy] = useState(false)
+  const [message, setMessage] = useState("")
+  const [saveError, setSaveError] = useState("")
+
+  function edit(storage: StorageRetention) {
+    const policy = parseRetention(storage.prune_backups)
+    setFields(policy.fields)
+    setKeepAll(policy.keepAll || !storage.prune_backups)
+    setSaveError("")
+    setMessage("")
+    setEditing(storage)
+  }
+
+  async function save() {
+    if (!editing || busy) return
+    const prune = buildRetention(fields, keepAll)
+    if (!prune) return setSaveError(t("backup.storageRetention.choosePolicy"))
+    setBusy(true)
+    setSaveError("")
+    try {
+      await fetchApi(`/api/vm-backup-storages/${encodeURIComponent(editing.id)}`, {
+        method: "PUT", body: JSON.stringify({ digest: editing.digest, prune_backups: prune }),
+      })
+      setMessage(t("backup.storageRetention.saved"))
+      setEditing(null)
+      await mutate()
+    } catch (error) {
+      setSaveError(`${t("backup.storageRetention.saveFailed")} ${error instanceof Error ? error.message : ""}`)
+    } finally { setBusy(false) }
+  }
+
+  return <Card className="border-border bg-card/50">
+    <CardHeader className="pb-3 flex-row items-center justify-between gap-2">
+      <CardTitle className="text-base flex items-center gap-2"><HardDrive className="h-4 w-4" />{t("backup.storageRetention.title")}</CardTitle>
+      <Button variant="ghost" size="sm" disabled={isValidating} onClick={() => { void mutate().catch(() => {}) }}>
+        <RefreshCw className={`h-4 w-4 mr-2 ${isValidating ? "animate-spin" : ""}`} />{t("backup.storageRetention.refresh")}
+      </Button>
+    </CardHeader>
+    <CardContent className="space-y-3">
+      <p className="text-xs text-muted-foreground">{t("backup.storageRetention.description")}</p>
+      {message && <p role="status" className="text-xs text-emerald-500">{message}</p>}
+      {error ? <p role="alert" className="text-xs text-destructive">{t("backup.storageRetention.loadFailed")}</p> : !data ?
+        <Loader2 className="h-4 w-4 animate-spin" /> : !data.storages.length ?
+        <p className="text-xs text-muted-foreground">{t("backup.storageRetention.empty")}</p> :
+        data.storages.map(storage => <div key={storage.id} className="flex flex-wrap gap-2 items-center border rounded-lg p-3">
+          <span className="font-medium text-sm">{storage.id}</span><Badge variant="outline">{storage.type}</Badge>
+          <span className="text-xs font-mono text-muted-foreground break-all">{storage.prune_backups || t("backup.storageRetention.default")}</span>
+          <Button variant="outline" size="sm" className="ml-auto gap-1" onClick={() => edit(storage)} disabled={!storage.digest || busy}>
+            <Pencil className="h-3 w-3" />{t("backup.storageRetention.edit")}
+          </Button>
+        </div>)}
+    </CardContent>
+    <Dialog open={!!editing} onOpenChange={open => { if (!open && !busy) setEditing(null) }}>
+      <DialogContent className="bg-accent [&_input]:bg-background">
+        <DialogHeader><DialogTitle>{t("backup.storageRetention.editTitle", { storage: editing?.id ?? "" })}</DialogTitle>
+          <DialogDescription>{t("backup.storageRetention.effect")}</DialogDescription></DialogHeader>
+        <Label className="flex items-center gap-2"><Checkbox checked={keepAll} disabled={busy} onCheckedChange={checked => {
+          setKeepAll(checked === true)
+          if (checked) setFields({})
+        }} />{t("backup.storageRetention.keepAll")}</Label>
+        <div className="grid grid-cols-2 gap-3">
+          {RETENTION.map(key => <div key={key} className="space-y-1">
+            <Label htmlFor={`storage-retention-${key}`}>{t(`backup.retention.${key}`)}</Label>
+            <Input id={`storage-retention-${key}`} type="number" min={1} max={99999} step={1} disabled={keepAll || busy}
+              value={fields[key] ?? ""} onChange={event => setFields(previous => ({ ...previous, [key]: event.target.value }))} />
+          </div>)}
+        </div>
+        {saveError && <p role="alert" className="text-xs text-destructive break-words">{saveError}</p>}
+        <DialogFooter><Button variant="outline" disabled={busy} onClick={() => setEditing(null)}>{t("backup.storageRetention.cancel")}</Button>
+          <Button disabled={busy} onClick={save}>{busy && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}{t("backup.storageRetention.save")}</Button></DialogFooter>
+      </DialogContent>
+    </Dialog>
+  </Card>
+}

AppImage/components/backup-tab.tsx

@@ -7,6 +7,7 @@ import { useState } from "react"
 import { DatabaseBackup } from "lucide-react"
 import { HostBackup } from "./host-backup"
 import { VmBackupJobs } from "./vm-backup-jobs"
+import { BackupStorageRetention } from "./backup-storage-retention"
 import { useT } from "../lib/i18n/provider"
 
 type BackupView = "host" | "guests"
@@ -51,7 +52,7 @@ export function BackupTab() {
       <div className={view === "host" ? "" : "hidden"}>
         <HostBackup />
       </div>
-      {view === "guests" && <VmBackupJobs />}
+      {view === "guests" && <><VmBackupJobs /><BackupStorageRetention /></>}
     </div>
   )
 }

AppImage/components/vm-backup-jobs.tsx

@@ -21,6 +21,7 @@ import {
 import { fetchApi } from "../lib/api-config"
 import { cancelButtonClass } from "../lib/utils"
 import { useT } from "../lib/i18n/provider"
+import { RETENTION, parseRetention, buildRetention } from "../lib/backup-retention"
 
 interface VmBackupJob {
   id: string
@@ -70,24 +71,6 @@ const EMPTY_FORM: FormState = {
   mode: "snapshot", compress: "zstd", retention: {}, keepAll: false, notes: "{{guestname}}", attached: [],
 }
 
-// The limits a job can keep, in the order Proxmox lists them.
-const RETENTION = ["last", "hourly", "daily", "weekly", "monthly", "yearly"] as const
-
-const parseRetention = (prune: string) => {
-  const fields: Record<string, string> = {}
-  let keepAll = false
-  for (const part of prune.split(",")) {
-    const [key, value] = part.trim().split("=")
-    if (key === "keep-all") keepAll = value === "1"
-    else if (key?.startsWith("keep-") && Number(value) > 0) fields[key.slice(5)] = String(Number(value))
-  }
-  return { fields, keepAll }
-}
-
-const buildRetention = (fields: Record<string, string>, keepAll: boolean) => {
-  const parts = RETENTION.filter((key) => Number(fields[key]) > 0).map((key) => `keep-${key}=${Number(fields[key])}`)
-  return parts.length ? parts.join(",") : keepAll ? "keep-all=1" : ""
-}
 
 const isOn = (value: unknown) => value === 1 || value === true || value === "1"
 const jobEnabled = (job: VmBackupJob) => job.enabled === undefined || isOn(job.enabled)