275 lines
9.6 KiB
TypeScript
275 lines
9.6 KiB
TypeScript
"use client"
|
|
|
|
import { DataGridContainer, DataGridScrollArea, DataGridTable, dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
|
|
|
|
import { useEffect, useMemo, useRef } from "react"
|
|
import {
|
|
type ColumnDef,
|
|
useTable,
|
|
} from "@tanstack/react-table"
|
|
import type { OspfNeighborState } from "@/lib/ospf-state"
|
|
import { cn } from "@/lib/utils"
|
|
import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
|
|
import {
|
|
DATA_GRID_CONTAINER_CLASS,
|
|
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 { Button } from "@/components/ui/button"
|
|
import { NetworkIcon } from "lucide-react"
|
|
|
|
export interface OspfNeighborRow {
|
|
id: string
|
|
dataUnknown?: boolean
|
|
localRouter: string
|
|
localLabel: string
|
|
localIface: string
|
|
remoteRouter: string
|
|
remoteLabel: string
|
|
remoteRouterId: string
|
|
area: string
|
|
state: OspfNeighborState
|
|
cost: number | null
|
|
uptime: string
|
|
priority: number | null
|
|
}
|
|
|
|
function stateClass(state: OspfNeighborRow["state"]) {
|
|
if (state === "Full")
|
|
return "bg-[var(--status-online-bg)] text-[var(--status-online-fg)] border-current/25"
|
|
if (state === "Unknown") return "bg-muted text-muted-foreground border-border"
|
|
if (state !== "Down")
|
|
return "bg-[var(--status-degraded-bg)] text-[var(--status-degraded-fg)] border-current/25"
|
|
return "bg-[var(--status-offline-bg)] text-[var(--status-offline-fg)] border-current/25"
|
|
}
|
|
|
|
interface OspfNeighborsDataGridProps {
|
|
emptyTitle?: string
|
|
neighbors: OspfNeighborRow[]
|
|
highlightRouterId?: string | null
|
|
selectedRouterId?: string | null
|
|
onHighlight?: (routerId: string | null) => void
|
|
onSelect?: (routerId: string | null) => void
|
|
}
|
|
|
|
function OspfNeighborsDataGrid({
|
|
neighbors,
|
|
emptyTitle,
|
|
highlightRouterId,
|
|
selectedRouterId,
|
|
onSelect,
|
|
}: OspfNeighborsDataGridProps) {
|
|
const columns = useMemo<ColumnDef<DataGridFeatures, OspfNeighborRow>[]>(
|
|
() => [
|
|
{
|
|
id: "localLabel",
|
|
size: 144,
|
|
accessorKey: "localLabel",
|
|
header: ({ column }) => (
|
|
<DataGridSortHeader column={column} title="Роутер" className="ml-1" />
|
|
),
|
|
cell: ({ row }) => (
|
|
onSelect ? <Button type="button" variant="ghost" size="sm" className="min-h-11" aria-label={`Открыть узел ${row.original.localLabel}`} aria-expanded={selectedRouterId === row.original.localRouter} onClick={event => { event.stopPropagation(); onSelect(selectedRouterId === row.original.localRouter ? null : row.original.localRouter) }}>{row.original.localLabel}</Button> : <span className="font-mono whitespace-nowrap">{row.original.localLabel}</span>
|
|
),
|
|
meta: {
|
|
headerTitle: "Роутер",
|
|
headerClassName: DATA_GRID_CELL_PAD_FIRST,
|
|
cellClassName: DATA_GRID_CELL_PAD_FIRST,
|
|
},
|
|
},
|
|
{
|
|
id: "localIface",
|
|
size: 160,
|
|
accessorKey: "localIface",
|
|
header: ({ column }) => <DataGridSortHeader column={column} title="Интерфейс" />,
|
|
cell: ({ row }) => (
|
|
<span className="font-mono text-muted-foreground whitespace-nowrap">
|
|
{row.original.localIface}
|
|
</span>
|
|
),
|
|
meta: {
|
|
headerTitle: "Интерфейс",
|
|
headerClassName: DATA_GRID_CELL_PAD,
|
|
cellClassName: DATA_GRID_CELL_PAD,
|
|
},
|
|
},
|
|
{
|
|
id: "remote",
|
|
size: 192,
|
|
header: () => (
|
|
<span className="text-xs font-medium text-muted-foreground">Сосед (Router ID)</span>
|
|
),
|
|
enableSorting: false,
|
|
cell: ({ row }) => {
|
|
const n = row.original
|
|
return (
|
|
<div className="flex flex-col">
|
|
<span className="font-mono">
|
|
{n.remoteLabel !== n.remoteRouterId ? n.remoteLabel : n.remoteRouterId}
|
|
</span>
|
|
{n.remoteLabel !== n.remoteRouterId && (
|
|
<span className="text-[10px] font-mono text-muted-foreground">{n.remoteRouterId}</span>
|
|
)}
|
|
</div>
|
|
)
|
|
},
|
|
meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
|
|
},
|
|
{
|
|
id: "area",
|
|
size: 176,
|
|
accessorKey: "area",
|
|
header: ({ column }) => <DataGridSortHeader column={column} title="Область" />,
|
|
cell: ({ row }) => (
|
|
<span className="font-mono text-muted-foreground">{row.original.area}</span>
|
|
),
|
|
meta: {
|
|
headerTitle: "Область",
|
|
headerClassName: DATA_GRID_CELL_PAD,
|
|
cellClassName: DATA_GRID_CELL_PAD,
|
|
},
|
|
},
|
|
{
|
|
id: "state",
|
|
size: 128,
|
|
accessorKey: "state",
|
|
header: ({ column }) => <DataGridSortHeader column={column} title="Состояние" />,
|
|
cell: ({ row }) => (
|
|
<span
|
|
className={cn(
|
|
"inline-flex items-center rounded border px-1.5 py-0.5 text-[11px] font-medium",
|
|
row.original.dataUnknown ? "bg-muted text-muted-foreground" : stateClass(row.original.state),
|
|
)}
|
|
>
|
|
{row.original.dataUnknown || row.original.state === "Unknown" ? "Неизвестно" : row.original.state}
|
|
</span>
|
|
),
|
|
meta: {
|
|
headerTitle: "Состояние",
|
|
headerClassName: DATA_GRID_CELL_PAD,
|
|
cellClassName: DATA_GRID_CELL_PAD,
|
|
},
|
|
},
|
|
{
|
|
id: "cost",
|
|
size: 80,
|
|
accessorKey: "cost",
|
|
header: ({ column }) => <DataGridSortHeader column={column} title="Cost" />,
|
|
cell: ({ row }) => (
|
|
<span className="font-mono tabular-nums text-center block">{row.original.cost ?? "—"}</span>
|
|
),
|
|
meta: {
|
|
headerTitle: "Cost",
|
|
headerClassName: DATA_GRID_CELL_PAD,
|
|
cellClassName: cn(DATA_GRID_CELL_PAD, "text-center"),
|
|
},
|
|
},
|
|
{
|
|
id: "uptime",
|
|
size: 112,
|
|
accessorKey: "uptime",
|
|
header: ({ column }) => <DataGridSortHeader column={column} title="Uptime" />,
|
|
cell: ({ row }) => (
|
|
<span className="text-muted-foreground whitespace-nowrap tabular-nums">
|
|
{row.original.uptime}
|
|
</span>
|
|
),
|
|
meta: {
|
|
headerTitle: "Uptime",
|
|
headerClassName: DATA_GRID_CELL_PAD,
|
|
cellClassName: DATA_GRID_CELL_PAD,
|
|
},
|
|
},
|
|
{
|
|
id: "priority",
|
|
size: 64,
|
|
accessorKey: "priority",
|
|
header: ({ column }) => <DataGridSortHeader column={column} title="Prio" />,
|
|
cell: ({ row }) => (
|
|
<span className="text-center font-mono block">{row.original.priority ?? "—"}</span>
|
|
),
|
|
meta: {
|
|
headerTitle: "Prio",
|
|
headerClassName: DATA_GRID_CELL_PAD_LAST,
|
|
cellClassName: cn(DATA_GRID_CELL_PAD_LAST, "text-center"),
|
|
},
|
|
},
|
|
],
|
|
[onSelect, selectedRouterId],
|
|
)
|
|
|
|
const rowSelection = useMemo(() => {
|
|
if (!selectedRouterId) return {}
|
|
const match = neighbors.find(
|
|
(n) => n.localRouter === selectedRouterId || n.remoteRouter === selectedRouterId || selectedRouterId === `remote-${n.remoteRouterId}`,
|
|
)
|
|
return match ? { [match.id]: true as const } : {}
|
|
}, [neighbors, selectedRouterId])
|
|
|
|
const table = useTable({
|
|
features: dataGridFeatures,
|
|
manualPagination: false,
|
|
autoResetPageIndex: false,
|
|
initialState: { pagination: { pageIndex: 0, pageSize: 50 }, columnPinning: { start: ["localLabel"], end: [] } },
|
|
data: neighbors,
|
|
columns,
|
|
getRowId: (row) => row.id,
|
|
enableRowSelection: true,
|
|
state: { rowSelection },
|
|
})
|
|
|
|
const { pageIndex, pageSize } = table.state.pagination
|
|
useEffect(() => {
|
|
const lastPage = Math.max(0, Math.ceil(neighbors.length / pageSize) - 1)
|
|
if (pageIndex > lastPage) table.setPageIndex(lastPage)
|
|
}, [neighbors.length, pageIndex, pageSize, table])
|
|
const requestedNode = useRef<string | null>(null)
|
|
useEffect(() => {
|
|
if (!selectedRouterId) { requestedNode.current = null; return }
|
|
if (requestedNode.current === selectedRouterId) return
|
|
const index = table.getSortedRowModel().rows.findIndex(({ original: n }) => n.localRouter === selectedRouterId || n.remoteRouter === selectedRouterId || selectedRouterId === `remote-${n.remoteRouterId}`)
|
|
if (index < 0) return
|
|
requestedNode.current = selectedRouterId
|
|
table.setPageIndex(Math.floor(index / pageSize))
|
|
}, [selectedRouterId, neighbors, pageSize, table])
|
|
|
|
if (neighbors.length === 0) {
|
|
return (
|
|
<EmptyState
|
|
icon={<NetworkIcon className="size-4" />}
|
|
title={emptyTitle ?? "Нет OSPF-соседей"}
|
|
className="border-0 py-10"
|
|
/>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<DataGridShell
|
|
table={table}
|
|
recordCount={neighbors.length}
|
|
pagination={neighbors.length > 50 || pageSize !== 50}
|
|
onRowClick={(row) => {
|
|
onSelect?.(selectedRouterId === row.localRouter ? null : row.localRouter)
|
|
}}
|
|
tableClassNames={{
|
|
headerRow: "border-b border-border",
|
|
bodyRow: cn(
|
|
"group/row cursor-pointer",
|
|
"data-[state=selected]:bg-primary/5",
|
|
highlightRouterId && "[&:hover]:bg-muted/30",
|
|
),
|
|
}}
|
|
tableLayout={{ dense: true, columnsPinnable: true }}
|
|
>
|
|
<DataGridContainer border={false} className={DATA_GRID_CONTAINER_CLASS}>
|
|
<DataGridScrollArea><DataGridTable /></DataGridScrollArea>
|
|
</DataGridContainer>
|
|
</DataGridShell>
|
|
)
|
|
}
|
|
|
|
export { OspfNeighborsDataGrid, type OspfNeighborsDataGridProps }
|