Merge remote-tracking branch 'origin/develop' into HEAD

AppImage/components/apprise-service-help.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import { ExternalLink } from "lucide-react"
+import { useT } from "../lib/i18n/provider"
+
+// These are examples, never defaults: opening help must not replace a saved
+// destination or put placeholder credentials into the notification settings.
+export function AppriseServiceHelp() {
+  const t = useT()
+  return <details className="rounded-md border border-border bg-muted/20 p-2 text-xs">
+    <summary className="cursor-pointer font-medium">{t("settings.notifications.ui.appriseServiceHelp")}</summary>
+    <div className="grid gap-3 pt-3 sm:grid-cols-2">
+      <div className="space-y-1.5 min-w-0">
+        <h4 className="font-medium">Slack</h4>
+        <p className="text-muted-foreground">{t("settings.notifications.ui.appriseSlackSteps")}</p>
+        <code className="block break-all rounded bg-background p-2 text-[10px]">https://hooks.slack.com/services/TOKEN_A/TOKEN_B/TOKEN_C</code>
+        <a href="https://appriseit.com/services/slack/" target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1 text-cyan-500 hover:underline">
+          {t("settings.notifications.ui.appriseSlackDocs")} <ExternalLink className="h-3 w-3" />
+        </a>
+      </div>
+      <div className="space-y-1.5 min-w-0">
+        <h4 className="font-medium">Matrix</h4>
+        <p className="text-muted-foreground">{t("settings.notifications.ui.appriseMatrixSteps")}</p>
+        <code className="block break-all rounded bg-background p-2 text-[10px]">matrixs://USER:PASSWORD@matrix.example.com/!ROOM_ID:matrix.example.com</code>
+        <a href="https://appriseit.com/services/matrix/" target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1 text-cyan-500 hover:underline">
+          {t("settings.notifications.ui.appriseMatrixDocs")} <ExternalLink className="h-3 w-3" />
+        </a>
+      </div>
+    </div>
+    <p className="mt-3 text-muted-foreground">{t("settings.notifications.ui.appriseServiceFinish")}</p>
+  </details>
+}

AppImage/components/backup-storage-retention.tsx

@@ -0,0 +1,105 @@
+"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 [useDefault, setUseDefault] = 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)
+    setUseDefault(!storage.prune_backups)
+    setSaveError("")
+    setMessage("")
+    setEditing(storage)
+  }
+
+  async function save() {
+    if (!editing || busy) return
+    const prune = useDefault ? "" : buildRetention(fields, keepAll)
+    if (!useDefault && !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={useDefault} disabled={busy} onCheckedChange={checked => {
+          setUseDefault(checked === true)
+          if (checked) { setKeepAll(false); setFields({}) }
+        }} />{t("backup.storageRetention.useDefault")}</Label>
+        <Label className="flex items-center gap-2"><Checkbox checked={keepAll} disabled={useDefault || 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.keep${key[0].toUpperCase()}${key.slice(1)}`)}</Label>
+            <Input id={`storage-retention-${key}`} type="number" min={1} max={99999} step={1} disabled={useDefault || 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/notification-settings.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { AppriseServiceHelp } from "./apprise-service-help"
 import { useState, useEffect, useCallback } from "react"
 import { useTheme } from "next-themes"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card"
@@ -2061,6 +2062,7 @@ export function NotificationSettings() {
                     Enable toggle + Test button pattern as the other
                     channels. */}
                 <TabsContent value="apprise" className="space-y-3 pt-2">
+                  <AppriseServiceHelp />
                   <div className="flex items-center justify-between">
                     <div className="flex items-center gap-2">
                       <Label className="text-xs font-medium">{t("settings.notifications.ui.enableApprise")}</Label>

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)