feat(backups): добавить S3-хранилище и обновить экран бэкапов

Сохранять снимки в S3-compatible бакет, скачивать и удалять их вместе с локальными файлами. Привести /backups к DNA /servers: Frame, KPI, фильтры и реальное восстановление. Co-authored-by: Cursor <[email protected]>
2026-09-08 14:06:27 +07:00
parent 39c8ec4a02
commit cff26813b9
21 changed files with 2429 additions and 637 deletions
@@ -0,0 +1,199 @@
+"use client"
+
+import type { Server } from "@/lib/data"
+import { FormField } from "@/components/form-kit"
+import { StatusBadge } from "@/components/status-badge"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+  SheetFooter,
+  SheetClose,
+} from "@/components/ui/sheet"
+import {
+  Stepper,
+  StepperContent,
+  StepperIndicator,
+  StepperItem,
+  StepperNav,
+  StepperPanel,
+  StepperSeparator,
+  StepperTitle,
+  StepperTrigger,
+} from "@/components/reui/stepper"
+import { cn } from "@/lib/utils"
+
+export function BackupCreateSheet({
+  open,
+  onOpenChange,
+  step,
+  onStepChange,
+  servers,
+  selected,
+  onToggle,
+  onSelectAll,
+  onClear,
+  notes,
+  onNotesChange,
+  destinationLabel,
+  busy,
+  onSubmit,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  step: number
+  onStepChange: (step: number) => void
+  servers: Server[]
+  selected: Set<string>
+  onToggle: (id: string) => void
+  onSelectAll: () => void
+  onClear: () => void
+  notes: string
+  onNotesChange: (value: string) => void
+  destinationLabel: string
+  busy: boolean
+  onSubmit: () => void
+}) {
+  return (
+    <Sheet open={open} onOpenChange={(v) => { onOpenChange(v); if (!v) onStepChange(1) }}>
+      <SheetContent side="right" className="w-full sm:max-w-md flex flex-col gap-0 p-0">
+        <SheetHeader className="px-6 pt-6 pb-4 border-b shrink-0">
+          <SheetTitle>Новый бэкап</SheetTitle>
+          <SheetDescription>Снять конфигурацию вручную с выбранных серверов</SheetDescription>
+        </SheetHeader>
+
+        <Stepper value={step} onValueChange={onStepChange} className="flex-1 flex flex-col min-h-0 px-6 py-5">
+          <StepperNav className="mb-5">
+            <StepperItem step={1}>
+              <StepperTrigger>
+                <StepperIndicator>1</StepperIndicator>
+                <StepperTitle className="sr-only">Серверы</StepperTitle>
+              </StepperTrigger>
+              <StepperSeparator />
+            </StepperItem>
+            <StepperItem step={2}>
+              <StepperTrigger>
+                <StepperIndicator>2</StepperIndicator>
+                <StepperTitle className="sr-only">Заметка</StepperTitle>
+              </StepperTrigger>
+              <StepperSeparator />
+            </StepperItem>
+            <StepperItem step={3}>
+              <StepperTrigger>
+                <StepperIndicator>3</StepperIndicator>
+                <StepperTitle className="sr-only">Подтверждение</StepperTitle>
+              </StepperTrigger>
+            </StepperItem>
+          </StepperNav>
+          <StepperPanel className="flex-1 overflow-y-auto">
+            <StepperContent value={1} className="flex flex-col gap-3">
+              <div className="flex items-center justify-between mb-1">
+                <p className="text-sm font-medium">Выберите серверы</p>
+                <div className="flex items-center gap-2">
+                  <button type="button" onClick={onSelectAll} className="text-xs text-primary hover:underline">
+                    Все
+                  </button>
+                  <span className="text-border">·</span>
+                  <button
+                    type="button"
+                    onClick={onClear}
+                    className="text-xs text-muted-foreground hover:text-foreground hover:underline"
+                  >
+                    Сбросить
+                  </button>
+                </div>
+              </div>
+              {servers.map((s) => {
+                const checked = selected.has(s.id)
+                return (
+                  <button
+                    key={s.id}
+                    type="button"
+                    onClick={() => onToggle(s.id)}
+                    className={cn(
+                      "flex items-center gap-3 rounded-lg border p-3 text-left transition-colors",
+                      checked ? "border-primary/40 bg-primary/5" : "border-border hover:bg-muted/40",
+                    )}
+                  >
+                    <div
+                      className={cn(
+                        "flex size-4 shrink-0 items-center justify-center rounded border transition-colors",
+                        checked ? "bg-primary border-primary" : "border-border",
+                      )}
+                    >
+                      {checked && (
+                        <svg width="10" height="8" viewBox="0 0 10 8" fill="none" aria-hidden="true">
+                          <path d="M1 4l2.5 2.5L9 1" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                        </svg>
+                      )}
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium">{s.name}</p>
+                      <div className="flex items-center gap-1.5 mt-0.5">
+                        <span className="text-xs font-mono text-muted-foreground">{s.host}</span>
+                        <StatusBadge status={s.status} />
+                      </div>
+                    </div>
+                    {s.status === "offline" && (
+                      <span className="text-xs text-muted-foreground">недоступен</span>
+                    )}
+                  </button>
+                )
+              })}
+            </StepperContent>
+            <StepperContent value={2} className="flex flex-col gap-4">
+              <FormField label="Заметка">
+                <Input
+                  placeholder="Например: перед обновлением BGP"
+                  value={notes}
+                  onChange={(e) => onNotesChange(e.target.value)}
+                />
+              </FormField>
+            </StepperContent>
+            <StepperContent value={3} className="flex flex-col gap-3 text-sm">
+              <p className="text-muted-foreground">
+                Будет создан бэкап для <strong className="text-foreground">{selected.size}</strong> серверов.
+              </p>
+              <p className="text-muted-foreground">
+                Куда сохранится: <strong className="text-foreground">{destinationLabel}</strong>
+              </p>
+              {notes ? <p className="text-muted-foreground">Заметка: {notes}</p> : null}
+            </StepperContent>
+          </StepperPanel>
+        </Stepper>
+
+        <SheetFooter className="px-6 py-4 border-t shrink-0 flex-row gap-2">
+          <SheetClose render={<Button variant="outline" className="flex-1" />}>Отмена</SheetClose>
+          {step > 1 && (
+            <Button type="button" variant="outline" className="flex-1" onClick={() => onStepChange(step - 1)}>
+              Назад
+            </Button>
+          )}
+          {step < 3 ? (
+            <Button
+              type="button"
+              className="flex-1"
+              disabled={step === 1 && selected.size === 0}
+              onClick={() => onStepChange(step + 1)}
+            >
+              Далее
+            </Button>
+          ) : (
+            <Button
+              type="button"
+              className="flex-1"
+              disabled={selected.size === 0 || busy}
+              onClick={onSubmit}
+            >
+              Снять бэкап ({selected.size})
+            </Button>
+          )}
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  )
+}