114 lines
4.6 KiB
TypeScript
114 lines
4.6 KiB
TypeScript
"use client"
|
|
|
|
import { useMemo } from "react"
|
|
import { PageHeader } from "@/components/page-header"
|
|
import { DataTable } from "@/components/data-table"
|
|
import { ipRanges as mockIpRanges } from "@/lib/data"
|
|
import { Button } from "@/components/ui/button"
|
|
import { UploadIcon, DownloadIcon, PlusIcon, FilterIcon, LoaderCircleIcon } from "lucide-react"
|
|
import { useDataSource } from "@/lib/data-source"
|
|
import { useEvoBGP } from "@/lib/evobgp-context"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
export default function IpRangesPage() {
|
|
const { mode } = useDataSource()
|
|
const { enabled, snapshot, loading, error } = useEvoBGP()
|
|
|
|
/** При включённом EvoBGP в live локальные моки не показываем — только каталог API (или пусто при загрузке/ошибке). */
|
|
const useEvoCatalog = mode === "live" && enabled
|
|
|
|
const rows = useMemo(() => {
|
|
if (!useEvoCatalog) return mockIpRanges
|
|
if (loading && !snapshot) return []
|
|
return snapshot?.ipRanges ?? []
|
|
}, [useEvoCatalog, loading, snapshot])
|
|
|
|
return (
|
|
<div className="flex flex-col h-full">
|
|
<PageHeader
|
|
crumbs={[{ label: "Данные" }, { label: "IP-диапазоны" }]}
|
|
actions={
|
|
<>
|
|
<Button variant="outline" size="sm"><UploadIcon className="size-4" />Импорт</Button>
|
|
<Button variant="outline" size="sm"><DownloadIcon className="size-4" />Экспорт</Button>
|
|
<Button size="sm"><PlusIcon className="size-4" />Добавить диапазон</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">IP-диапазоны</h1>
|
|
<p className="text-sm text-muted-foreground mt-1">
|
|
CIDR-блоки, отправляемые в address-list MikroTik по всем настроенным фильтрам
|
|
</p>
|
|
{useEvoCatalog && (
|
|
<p className={cn(
|
|
"text-xs mt-2 flex items-center gap-1.5",
|
|
error ? "text-destructive" : "text-muted-foreground",
|
|
)}>
|
|
{loading && <LoaderCircleIcon className="size-3.5 animate-spin shrink-0" />}
|
|
{error
|
|
? `EvoBGP: ${error}`
|
|
: snapshot?.fetchedAt
|
|
? `Источник: EvoBGP, обновлено ${new Date(snapshot.fetchedAt).toLocaleString("ru-RU")}`
|
|
: loading ? "Загрузка EvoBGP…" : "EvoBGP"}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<DataTable
|
|
data={rows}
|
|
searchPlaceholder="Поиск по CIDR, ASN…"
|
|
searchKeys={["cidr", "asn", "country", "filter"]}
|
|
columns={[
|
|
{
|
|
key: "cidr",
|
|
label: "CIDR",
|
|
render: (d) => <span className="font-mono font-medium">{d.cidr}</span>,
|
|
},
|
|
{
|
|
key: "asn",
|
|
label: "ASN",
|
|
render: (d) => <span className="font-mono text-xs text-muted-foreground">{d.asn}</span>,
|
|
},
|
|
{
|
|
key: "country",
|
|
label: "Страна",
|
|
render: (d) => <span className="text-xs border border-border rounded px-2 py-0.5">{d.country}</span>,
|
|
},
|
|
{
|
|
key: "purpose",
|
|
label: "Назначение",
|
|
render: (d) => <span className="text-xs border border-border rounded px-2 py-0.5">{d.purpose}</span>,
|
|
},
|
|
{
|
|
key: "filter",
|
|
label: "Фильтр",
|
|
render: (d) => (
|
|
<span className="inline-flex items-center gap-1 text-xs bg-muted rounded px-2 py-0.5">
|
|
<FilterIcon className="size-3 text-muted-foreground" />{d.filter}
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
key: "updated",
|
|
label: "Обновлён",
|
|
render: (d) => <span className="text-xs text-muted-foreground">{d.updated}</span>,
|
|
},
|
|
{
|
|
key: "enabled",
|
|
label: "Статус",
|
|
render: (d) => (
|
|
<span className={`text-xs font-medium ${d.enabled ? "text-emerald-600" : "text-muted-foreground"}`}>
|
|
{d.enabled ? "Активен" : "Отключён"}
|
|
</span>
|
|
),
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|