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

Сохранять снимки в S3-compatible бакет, скачивать и удалять их вместе с локальными файлами.
Привести /backups к DNA /servers: Frame, KPI, фильтры и реальное восстановление.

Co-authored-by: Cursor <[email protected]>

components/data-grids/backups-data-grid.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useMemo } from "react"
+import { useMemo, type ReactNode } from "react"
 import {
   type ColumnDef,
   getCoreRowModel,
@@ -8,8 +8,9 @@ import {
   useReactTable,
 } from "@tanstack/react-table"
 import type { Backup } from "@/lib/data"
-import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/reui/badge"
+import { IconTile } from "@/components/reui/icon-tile"
 import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
@@ -18,13 +19,28 @@ import {
 } from "@/components/data-grids/shared/data-grid-layout"
 import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
 import { EmptyState } from "@/components/empty-state"
-import { DownloadIcon, HardDriveIcon, RefreshCwIcon, Trash2Icon } from "lucide-react"
+import {
+  CloudIcon,
+  DownloadIcon,
+  HardDriveIcon,
+  RefreshCwIcon,
+  Trash2Icon,
+} from "lucide-react"
 
 interface BackupsDataGridProps {
   backups: Backup[]
   onDownload: (id: string, filename: string) => void
   onRestore: (backup: Backup) => void
-  onDelete: (id: string) => void
+  onDelete: (backup: Backup) => void
+  emptyAction?: ReactNode
+  emptyTitle?: string
+  emptyDescription?: string
+}
+
+function storageBadge(storage: Backup["storage"]) {
+  if (storage === "s3") return { label: "S3", variant: "info-light" as const }
+  if (storage === "both") return { label: "Локально + S3", variant: "success-light" as const }
+  return { label: "Локально", variant: "secondary" as const }
 }
 
 function BackupsDataGrid({
@@ -32,6 +48,9 @@ function BackupsDataGrid({
   onDownload,
   onRestore,
   onDelete,
+  emptyAction,
+  emptyTitle = "Нет бэкапов",
+  emptyDescription = "Создайте первый бэкап вручную или настройте расписание",
 }: BackupsDataGridProps) {
   const columns = useMemo<ColumnDef<Backup>[]>(
     () => [
@@ -39,9 +58,27 @@ function BackupsDataGrid({
         id: "filename",
         accessorKey: "filename",
         header: ({ column }) => <DataGridSortHeader column={column} title="Файл" />,
-        cell: ({ row }) => (
-          <span className="font-mono text-xs font-medium">{row.original.filename}</span>
-        ),
+        cell: ({ row }) => {
+          const b = row.original
+          const inS3 = b.storage === "s3" || b.storage === "both"
+          return (
+            <div className="flex items-center gap-3 min-w-0">
+              <IconTile
+                variant="elevated"
+                className={inS3 ? "size-10.5 shrink-0 text-info" : "size-10.5 shrink-0 text-muted-foreground"}
+                aria-hidden="true"
+              >
+                {inS3 ? <CloudIcon /> : <HardDriveIcon />}
+              </IconTile>
+              <div className="min-w-0">
+                <span className="font-mono text-xs font-medium block truncate">{b.filename}</span>
+                {b.uploadError ? (
+                  <span className="text-[11px] text-destructive truncate block">{b.uploadError}</span>
+                ) : null}
+              </div>
+            </div>
+          )
+        },
         meta: {
           headerTitle: "Файл",
           headerClassName: DATA_GRID_CELL_PAD_FIRST,
@@ -78,23 +115,35 @@ function BackupsDataGrid({
         id: "kind",
         accessorKey: "kind",
         header: ({ column }) => <DataGridSortHeader column={column} title="Тип" />,
+        cell: ({ row }) => (
+          <Badge
+            variant={row.original.kind === "manual" ? "info-light" : "secondary"}
+            size="sm"
+            radius="full"
+          >
+            {row.original.kind === "auto" ? "авто" : "вручную"}
+          </Badge>
+        ),
+        meta: {
+          headerTitle: "Тип",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "storage",
+        accessorKey: "storage",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Хранилище" />,
         cell: ({ row }) => {
-          const kind = row.original.kind
+          const badge = storageBadge(row.original.storage)
           return (
-            <span
-              className={cn(
-                "text-xs px-2 py-0.5 rounded border font-medium",
-                kind === "manual"
-                  ? "bg-blue-500/10 text-blue-400 border-blue-500/20"
-                  : "bg-muted text-muted-foreground border-border",
-              )}
-            >
-              {kind === "auto" ? "авто" : "вручную"}
-            </span>
+            <Badge variant={badge.variant} size="sm" radius="full">
+              {badge.label}
+            </Badge>
           )
         },
         meta: {
-          headerTitle: "Тип",
+          headerTitle: "Хранилище",
           headerClassName: DATA_GRID_CELL_PAD,
           cellClassName: DATA_GRID_CELL_PAD,
         },
@@ -135,29 +184,35 @@ function BackupsDataGrid({
           return (
             <div className="flex items-center gap-1 justify-end opacity-0 transition-opacity group-hover/row:opacity-100 focus-within:opacity-100">
               <Button
+                type="button"
                 variant="ghost"
                 size="icon"
                 className="size-7"
                 title="Скачать"
+                aria-label={`Скачать ${b.filename}`}
                 onClick={() => onDownload(b.id, b.filename)}
               >
                 <DownloadIcon className="size-3.5" />
               </Button>
               <Button
+                type="button"
                 variant="ghost"
                 size="icon"
                 className="size-7"
                 title="Восстановить"
+                aria-label={`Восстановить ${b.filename}`}
                 onClick={() => onRestore(b)}
               >
                 <RefreshCwIcon className="size-3.5" />
               </Button>
               <Button
+                type="button"
                 variant="ghost"
                 size="icon"
                 className="size-7 text-destructive hover:text-destructive"
                 title="Удалить"
-                onClick={() => onDelete(b.id)}
+                aria-label={`Удалить ${b.filename}`}
+                onClick={() => onDelete(b)}
               >
                 <Trash2Icon className="size-3.5" />
               </Button>
@@ -186,9 +241,10 @@ function BackupsDataGrid({
   if (backups.length === 0) {
     return (
       <EmptyState
-        icon={<HardDriveIcon className="size-4" />}
-        title="Нет бэкапов"
-        description="Создайте первый бэкап вручную или настройте расписание"
+        icon={<HardDriveIcon className="size-5" />}
+        title={emptyTitle}
+        description={emptyDescription}
+        action={emptyAction}
         className="border-0 py-10"
       />
     )