90 lines
3.6 KiB
TypeScript
90 lines
3.6 KiB
TypeScript
"use client"
|
|
|
|
import { useMemo, useState } from "react"
|
|
import { PageHeader } from "@/components/page-header"
|
|
import { DataPageCard } from "@/components/data-page-card"
|
|
import { DataPageToolbar } from "@/components/data-page-toolbar"
|
|
import { AsnsDataGrid } from "@/components/data-grids/asns-data-grid"
|
|
import { FileImportDialog } from "@/components/file-import-dialog"
|
|
import { asns as mockAsns } from "@/lib/data"
|
|
import { Button } from "@/components/ui/button"
|
|
import { UploadIcon, DownloadIcon, PlusIcon } from "lucide-react"
|
|
import { useEvoCatalogView, EvoBgpCatalogStatus, EvoBgpCatalogUnavailable } from "@/components/settings/evobgp-catalog-status"
|
|
import { toast } from "sonner"
|
|
|
|
export default function AsnsPage() {
|
|
const { mode, snapshot, loading, known } = useEvoCatalogView()
|
|
const [importOpen, setImportOpen] = useState(false)
|
|
const [search, setSearch] = useState("")
|
|
|
|
const useEvoCatalog = mode === "live"
|
|
|
|
const rows = useMemo(() => {
|
|
if (mode === "mock") return mockAsns
|
|
if (loading && !snapshot) return []
|
|
return snapshot?.asns ?? []
|
|
}, [mode, loading, snapshot])
|
|
|
|
const filtered = useMemo(() => {
|
|
if (!search) return rows
|
|
const q = search.toLowerCase()
|
|
return rows.filter(
|
|
(r) =>
|
|
r.asn.toLowerCase().includes(q) ||
|
|
r.org.toLowerCase().includes(q) ||
|
|
(r.prefixes === null ? "" : String(r.prefixes)).includes(q),
|
|
)
|
|
}, [rows, search])
|
|
|
|
return (
|
|
<div className="flex flex-col h-full">
|
|
<PageHeader
|
|
crumbs={[{ label: "Данные" }, { label: "ASN" }]}
|
|
actions={mode === "live" ? null : <>
|
|
<Button variant="outline" size="sm" onClick={() => setImportOpen(true)}>
|
|
<UploadIcon className="size-4" />Импорт
|
|
</Button>
|
|
<Button variant="outline" size="sm"><DownloadIcon className="size-4" />Экспорт</Button>
|
|
<Button size="sm"><PlusIcon className="size-4" />Добавить ASN</Button>
|
|
</>
|
|
}
|
|
/>
|
|
<div className="flex-1 overflow-y-auto p-6">
|
|
<div className="flex flex-col gap-4">
|
|
<div>
|
|
<h1 className="text-2xl font-semibold tracking-tight">ASN</h1>
|
|
<p className="text-sm text-muted-foreground mt-1">
|
|
Автономные системы — источники маршрутов для BGP-фильтров
|
|
</p>
|
|
<div className="mt-3"><EvoBgpCatalogStatus /></div>
|
|
</div>
|
|
<DataPageCard>
|
|
<DataPageToolbar
|
|
search={search}
|
|
onSearchChange={setSearch}
|
|
searchPlaceholder="Поиск по ASN, имени, префиксам…"
|
|
countLabel={known ? `${filtered.length} ASN` : "Количество: —"}
|
|
/>
|
|
{known || loading ? <AsnsDataGrid
|
|
asns={filtered}
|
|
isLoading={useEvoCatalog && loading && !snapshot}
|
|
pagination={useEvoCatalog}
|
|
emptyDescription={search ? "Измените поисковый запрос" : useEvoCatalog ? "В подтверждённом каталоге нет записей этого типа" : undefined}
|
|
/> : <EvoBgpCatalogUnavailable />}
|
|
</DataPageCard>
|
|
</div>
|
|
</div>
|
|
<FileImportDialog
|
|
open={importOpen}
|
|
onOpenChange={setImportOpen}
|
|
title="Импорт ASN"
|
|
description="Загрузите CSV или JSON со списком автономных систем"
|
|
accept=".csv,.json,text/csv,application/json"
|
|
onImport={async (files) => {
|
|
toast.info(`Выбран файл: ${files[0]?.name ?? "—"}`)
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|