fix(ui): ограничить таблицу соседей OSPF и сохранить URL узла

components/data-grids/ospf-neighbors-data-grid.tsx

@@ -1,8 +1,8 @@
 "use client"
 
-import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
+import { DataGridContainer, DataGridScrollArea, DataGridTable, dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
 
-import { useMemo } from "react"
+import { useEffect, useMemo, useRef } from "react"
 import {
   type ColumnDef,
   useTable,
@@ -11,6 +11,7 @@ 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,
@@ -65,12 +66,13 @@ function OspfNeighborsDataGrid({
     () => [
       {
         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" 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>
+          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: "Роутер",
@@ -80,6 +82,7 @@ function OspfNeighborsDataGrid({
       },
       {
         id: "localIface",
+        size: 160,
         accessorKey: "localIface",
         header: ({ column }) => <DataGridSortHeader column={column} title="Интерфейс" />,
         cell: ({ row }) => (
@@ -95,6 +98,7 @@ function OspfNeighborsDataGrid({
       },
       {
         id: "remote",
+        size: 192,
         header: () => (
           <span className="text-xs font-medium text-muted-foreground">Сосед (Router ID)</span>
         ),
@@ -116,6 +120,7 @@ function OspfNeighborsDataGrid({
       },
       {
         id: "area",
+        size: 176,
         accessorKey: "area",
         header: ({ column }) => <DataGridSortHeader column={column} title="Область" />,
         cell: ({ row }) => (
@@ -129,6 +134,7 @@ function OspfNeighborsDataGrid({
       },
       {
         id: "state",
+        size: 128,
         accessorKey: "state",
         header: ({ column }) => <DataGridSortHeader column={column} title="Состояние" />,
         cell: ({ row }) => (
@@ -149,6 +155,7 @@ function OspfNeighborsDataGrid({
       },
       {
         id: "cost",
+        size: 80,
         accessorKey: "cost",
         header: ({ column }) => <DataGridSortHeader column={column} title="Cost" />,
         cell: ({ row }) => (
@@ -162,6 +169,7 @@ function OspfNeighborsDataGrid({
       },
       {
         id: "uptime",
+        size: 112,
         accessorKey: "uptime",
         header: ({ column }) => <DataGridSortHeader column={column} title="Uptime" />,
         cell: ({ row }) => (
@@ -177,6 +185,7 @@ function OspfNeighborsDataGrid({
       },
       {
         id: "priority",
+        size: 64,
         accessorKey: "priority",
         header: ({ column }) => <DataGridSortHeader column={column} title="Prio" />,
         cell: ({ row }) => (
@@ -202,7 +211,9 @@ function OspfNeighborsDataGrid({
 
   const table = useTable({
     features: dataGridFeatures,
-    manualPagination: true,
+    manualPagination: false,
+    autoResetPageIndex: false,
+    initialState: { pagination: { pageIndex: 0, pageSize: 50 }, columnPinning: { start: ["localLabel"], end: [] } },
     data: neighbors,
     columns,
     getRowId: (row) => row.id,
@@ -210,6 +221,21 @@ function OspfNeighborsDataGrid({
     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
@@ -224,6 +250,7 @@ function OspfNeighborsDataGrid({
     <DataGridShell
       table={table}
       recordCount={neighbors.length}
+      pagination={neighbors.length > 50 || pageSize !== 50}
       onRowClick={(row) => {
         onSelect?.(selectedRouterId === row.localRouter ? null : row.localRouter)
       }}
@@ -235,8 +262,12 @@ function OspfNeighborsDataGrid({
           highlightRouterId && "[&:hover]:bg-muted/30",
         ),
       }}
-      tableLayout={{ dense: true }}
-    />
+      tableLayout={{ dense: true, columnsPinnable: true }}
+    >
+      <DataGridContainer border={false} className={DATA_GRID_CONTAINER_CLASS}>
+        <DataGridScrollArea><DataGridTable /></DataGridScrollArea>
+      </DataGridContainer>
+    </DataGridShell>
   )
 }