282 lines
10 KiB
TypeScript
282 lines
10 KiB
TypeScript
"use client"
|
|
|
|
import { DataGridContainer, DataGridScrollArea, DataGridTable, dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
|
|
|
|
import { useEffect, useMemo, type ReactNode } from "react"
|
|
import {
|
|
type ColumnDef,
|
|
useTable,
|
|
} from "@tanstack/react-table"
|
|
import type { Backup } from "@/lib/data"
|
|
import { backupFileMissing, backupLocalFileDescription } from "@/lib/backup-file-state"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Badge } from "@/components/reui/badge"
|
|
import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
|
|
import {
|
|
DEFAULT_DATA_GRID_LAYOUT,
|
|
DATA_GRID_CELL_PAD,
|
|
DATA_GRID_CELL_PAD_FIRST,
|
|
DATA_GRID_CELL_PAD_LAST,
|
|
} 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"
|
|
|
|
interface BackupsDataGridProps {
|
|
backups: Backup[]
|
|
onDownload: (id: string, filename: string) => void
|
|
onRestore: (backup: Backup) => void
|
|
onDelete: (backup: Backup) => void
|
|
canRestore?: boolean
|
|
canWrite?: boolean
|
|
canDownload?: boolean
|
|
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({
|
|
backups,
|
|
onDownload,
|
|
onRestore,
|
|
onDelete,
|
|
canRestore = true,
|
|
canWrite = true,
|
|
canDownload = true,
|
|
emptyAction,
|
|
emptyTitle = "Нет бэкапов",
|
|
emptyDescription = "Создайте первый бэкап вручную или настройте расписание",
|
|
}: BackupsDataGridProps) {
|
|
const columns = useMemo<ColumnDef<DataGridFeatures, Backup>[]>(
|
|
() => [
|
|
{
|
|
id: "filename",
|
|
accessorKey: "filename",
|
|
size: 110,
|
|
header: ({ column }) => <DataGridSortHeader column={column} title="Файл" />,
|
|
cell: ({ row }) => {
|
|
const b = row.original
|
|
return (
|
|
<div className="flex items-center gap-3 min-w-0">
|
|
<div className="min-w-0">
|
|
<span title={b.filename} className="font-mono text-xs font-medium block break-all">{b.filename}</span>
|
|
{backupLocalFileDescription(b) && <span id={`backup-file-${encodeURIComponent(b.id)}`} className="text-xs text-muted-foreground block">{backupLocalFileDescription(b)}</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,
|
|
cellClassName: DATA_GRID_CELL_PAD_FIRST,
|
|
},
|
|
},
|
|
{
|
|
id: "server",
|
|
accessorKey: "server",
|
|
header: ({ column }) => <DataGridSortHeader column={column} title="Сервер" />,
|
|
cell: ({ row }) => (
|
|
<span className="text-sm text-muted-foreground">{row.original.server}</span>
|
|
),
|
|
meta: {
|
|
headerTitle: "Сервер",
|
|
headerClassName: DATA_GRID_CELL_PAD,
|
|
cellClassName: DATA_GRID_CELL_PAD,
|
|
},
|
|
},
|
|
{
|
|
id: "size",
|
|
accessorFn: (row) => row.sizeBytes,
|
|
sortUndefined: "last",
|
|
header: ({ column }) => <DataGridSortHeader column={column} title="Размер" />,
|
|
cell: ({ row }) => (
|
|
<span className="font-mono text-xs text-muted-foreground">{row.original.size}</span>
|
|
),
|
|
meta: {
|
|
headerTitle: "Размер",
|
|
headerClassName: DATA_GRID_CELL_PAD,
|
|
cellClassName: DATA_GRID_CELL_PAD,
|
|
},
|
|
},
|
|
{
|
|
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 backup = row.original
|
|
const badge = backupFileMissing(backup)
|
|
? { label: "Нет файла", variant: "warning-light" as const }
|
|
: backup.localFileStatus === "missing" ? { label: "S3", variant: "warning-light" as const }
|
|
: backup.localFileStatus === "unknown" ? { label: "Файл не проверен", variant: "warning-light" as const }
|
|
: storageBadge(backup.storage)
|
|
return (
|
|
<Badge variant={badge.variant} size="sm" radius="full">
|
|
{badge.label}
|
|
</Badge>
|
|
)
|
|
},
|
|
meta: {
|
|
headerTitle: "Хранилище",
|
|
headerClassName: DATA_GRID_CELL_PAD,
|
|
cellClassName: DATA_GRID_CELL_PAD,
|
|
},
|
|
},
|
|
{
|
|
id: "notes",
|
|
accessorKey: "notes",
|
|
header: ({ column }) => <DataGridSortHeader column={column} title="Заметки" />,
|
|
cell: ({ row }) => (
|
|
<span className="text-xs text-muted-foreground max-w-[200px] truncate block">
|
|
{row.original.notes || "—"}
|
|
</span>
|
|
),
|
|
meta: {
|
|
headerTitle: "Заметки",
|
|
headerClassName: DATA_GRID_CELL_PAD,
|
|
cellClassName: DATA_GRID_CELL_PAD,
|
|
},
|
|
},
|
|
{
|
|
id: "created",
|
|
accessorKey: "created",
|
|
header: ({ column }) => <DataGridSortHeader column={column} title="Создан" />,
|
|
cell: ({ row }) => (
|
|
<span className="text-xs text-muted-foreground">{row.original.created}</span>
|
|
),
|
|
meta: {
|
|
headerTitle: "Создан",
|
|
headerClassName: DATA_GRID_CELL_PAD,
|
|
cellClassName: DATA_GRID_CELL_PAD,
|
|
},
|
|
},
|
|
{
|
|
id: "actions",
|
|
header: () => <span className="sr-only">Действия</span>,
|
|
cell: ({ row }) => {
|
|
const b = row.original
|
|
return (
|
|
<div className="flex items-center gap-1 justify-end sm:opacity-0 transition-opacity group-hover/row:opacity-100 focus-within:opacity-100">
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className="size-11 min-w-[44px] min-h-[44px] sm:size-7 sm:min-w-0 sm:min-h-0"
|
|
title={backupFileMissing(b) ? "Локальный файл отсутствует" : "Скачать"}
|
|
aria-label={`Скачать ${b.filename}`}
|
|
disabled={!canDownload || backupFileMissing(b)}
|
|
aria-describedby={backupLocalFileDescription(b) ? `backup-file-${encodeURIComponent(b.id)}` : undefined}
|
|
onClick={() => onDownload(b.id, b.filename)}
|
|
>
|
|
<DownloadIcon className="size-3.5" />
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className="size-11 min-w-[44px] min-h-[44px] sm:size-7 sm:min-w-0 sm:min-h-0"
|
|
title={backupFileMissing(b) ? "Локальный файл отсутствует" : "Восстановить"}
|
|
aria-label={`Восстановить ${b.filename}`}
|
|
disabled={!canWrite || !canRestore || !b.serverId || backupFileMissing(b)}
|
|
aria-describedby={backupLocalFileDescription(b) ? `backup-file-${encodeURIComponent(b.id)}` : undefined}
|
|
onClick={() => onRestore(b)}
|
|
>
|
|
<RefreshCwIcon className="size-3.5" />
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className="size-11 min-w-[44px] min-h-[44px] sm:size-7 sm:min-w-0 sm:min-h-0 text-destructive hover:text-destructive"
|
|
title="Удалить"
|
|
aria-label={`Удалить ${b.filename}`}
|
|
disabled={!canWrite}
|
|
onClick={() => onDelete(b)}
|
|
>
|
|
<Trash2Icon className="size-3.5" />
|
|
</Button>
|
|
</div>
|
|
)
|
|
},
|
|
enableSorting: false,
|
|
size: 176,
|
|
meta: {
|
|
headerClassName: DATA_GRID_CELL_PAD_LAST,
|
|
cellClassName: DATA_GRID_CELL_PAD_LAST,
|
|
},
|
|
},
|
|
],
|
|
[onDelete, onDownload, onRestore, canWrite, canRestore, canDownload],
|
|
)
|
|
|
|
const table = useTable({
|
|
features: dataGridFeatures,
|
|
manualPagination: false,
|
|
autoResetPageIndex: false,
|
|
initialState: { pagination: { pageIndex: 0, pageSize: 50 }, columnPinning: { start: ["filename"], end: [] } },
|
|
data: backups,
|
|
columns,
|
|
getRowId: (row) => row.id,
|
|
})
|
|
|
|
const { pageIndex, pageSize } = table.state.pagination
|
|
useEffect(() => {
|
|
const lastPage = Math.max(0, Math.ceil(backups.length / pageSize) - 1)
|
|
if (pageIndex > lastPage) table.setPageIndex(lastPage)
|
|
}, [backups.length, pageSize, pageIndex, table])
|
|
|
|
if (backups.length === 0) {
|
|
return (
|
|
<EmptyState
|
|
icon={<HardDriveIcon className="size-5" />}
|
|
title={emptyTitle}
|
|
description={emptyDescription}
|
|
action={emptyAction}
|
|
className="border-0 py-10"
|
|
/>
|
|
)
|
|
}
|
|
|
|
return <DataGridShell table={table} recordCount={backups.length}
|
|
pagination={backups.length > 50 || pageSize !== 50}
|
|
tableLayout={{ ...DEFAULT_DATA_GRID_LAYOUT, columnsPinnable: true }}>
|
|
<DataGridContainer border={false} className="w-full rounded-none border-0">
|
|
<DataGridScrollArea orientation="horizontal"><DataGridTable /></DataGridScrollArea>
|
|
</DataGridContainer>
|
|
</DataGridShell>
|
|
}
|
|
|
|
export { BackupsDataGrid, type BackupsDataGridProps }
|