fix(ui): ограничить preview OSPF без изменения применения

components/data-grids/route-optimizer-ospf-preview-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, useState } from "react"
 import type {OspfOptimizerObserved} from "@mmapp/contracts"
 import {
   type ColumnDef,
@@ -15,6 +15,7 @@ import {
   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 { Input } from "@/components/ui/input"
 import { EmptyState } from "@/components/empty-state"
 import { NetworkIcon } from "lucide-react"
 
@@ -48,15 +49,21 @@ function RouteOptimizerOspfPreviewDataGrid({
   error,
   loading,
 }: RouteOptimizerOspfPreviewDataGridProps) {
+  const [query, setQuery] = useState("")
+  const filteredRows = useMemo(() => {
+    const value = query.trim().toLowerCase()
+    return value ? rows.filter(row => `${row.interface} ${row.id}`.toLowerCase().includes(value)) : rows
+  }, [rows, query])
   const columns = useMemo<ColumnDef<DataGridFeatures, OspfPreviewInterfaceRow>[]>(
     () => [
       {
         id: "interface",
+        size: 120,
         accessorKey: "interface",
         header: ({ column }) => (
           <DataGridSortHeader column={column} title="Интерфейс" className="ml-1" />
         ),
-        cell: ({ row }) => <span className="font-mono">{row.original.interface}</span>,
+        cell: ({ row }) => <span className="block truncate font-mono" title={row.original.interface}>{row.original.interface}</span>,
         meta: {
           headerTitle: "Интерфейс",
           headerClassName: DATA_GRID_CELL_PAD_FIRST,
@@ -65,6 +72,7 @@ function RouteOptimizerOspfPreviewDataGrid({
       },
       {
         id: "cost",
+        size: 144,
         accessorKey: "currentCost",
         header: ({ column }) => <DataGridSortHeader column={column} title="Cost" />,
         cell: ({ row }) => {
@@ -89,6 +97,7 @@ function RouteOptimizerOspfPreviewDataGrid({
       },
       {
         id: "score",
+        size: 96,
         accessorKey: "score",
         header: ({ column }) => <DataGridSortHeader column={column} title="Score" />,
         cell: ({ row }) => <span className="font-mono">{row.original.score}</span>,
@@ -96,6 +105,7 @@ function RouteOptimizerOspfPreviewDataGrid({
       },
       {
         id: "pingMs",
+        size: 288,
         accessorKey: "pingMs",
         header: ({ column }) => <DataGridSortHeader column={column} title="Ping модели" />,
         cell: ({ row }) => <div><span className="font-mono">{row.original.pingMs}ms</span><p className="text-[10px] text-muted-foreground">{describeObserved(row.original.observed?.ping,"мс")}</p></div>,
@@ -103,6 +113,7 @@ function RouteOptimizerOspfPreviewDataGrid({
       },
       {
         id: "speed",
+        size: 336,
         header: () => <span className="text-xs font-medium text-muted-foreground">Speed (dl/ul) · модель</span>,
         enableSorting: false,
         cell: ({ row }) => {
@@ -121,12 +132,20 @@ function RouteOptimizerOspfPreviewDataGrid({
 
   const table = useTable({
     features: dataGridFeatures,
-    manualPagination: true,
-    data: rows,
+    manualPagination: false,
+    autoResetPageIndex: false,
+    initialState: { pagination: { pageIndex: 0, pageSize: 50 }, columnPinning: { start: ["interface"], end: [] } },
+    data: filteredRows,
     columns,
     getRowId: (row) => row.id,
   })
 
+  const { pageIndex, pageSize } = table.state.pagination
+  useEffect(() => {
+    const lastPage = Math.max(0, Math.ceil(filteredRows.length / pageSize) - 1)
+    if (pageIndex > lastPage) table.setPageIndex(lastPage)
+  }, [filteredRows.length, pageIndex, pageSize, table])
+
   if (error && rows.length === 0) {
     return (
       <p role="alert" className="px-3 py-2 text-xs text-destructive">Ошибка preview: {error}</p>
@@ -144,18 +163,28 @@ function RouteOptimizerOspfPreviewDataGrid({
   }
 
   return (
-    <>
+    <section aria-label="Preview интерфейсов OSPF" className="min-w-0">
     {error && <p role="alert" className="px-3 py-2 text-xs text-warning">Ошибка preview: {error}. Последний снимок; актуальность неизвестна.</p>}
     {loading && rows.length > 0 && <p role="status" className="px-3 py-2 text-xs text-muted-foreground">Обновление preview OSPF…</p>}
+    <div className="flex min-w-0 flex-col gap-2 px-3 py-3">
+      <Input aria-label="Поиск интерфейсов preview OSPF" placeholder="Имя интерфейса…" value={query} onChange={event => { setQuery(event.target.value); table.setPageIndex(0) }} />
+      <p role="status" className="text-xs text-muted-foreground">Найдено {filteredRows.length} из {rows.length} интерфейсов. Фильтр меняет только отображение preview.</p>
+    </div>
     <DataGridShell
       table={table}
-      recordCount={rows.length}
+      recordCount={filteredRows.length}
+      pagination={filteredRows.length > 50 || pageSize !== 50}
+      emptyMessage="Нет интерфейсов по запросу"
       isLoading={loading && rows.length === 0}
       loadingMode="skeleton"
       tableClassNames={{ headerRow: "border-b bg-muted/30", bodyRow: "group/row" }}
-      tableLayout={{ dense: true }}
-    />
-    </>
+      tableLayout={{ dense: true, width: "fixed", columnsPinnable: true }}
+    >
+      <DataGridContainer border={false}>
+        <DataGridScrollArea orientation="horizontal"><DataGridTable /></DataGridScrollArea>
+      </DataGridContainer>
+    </DataGridShell>
+    </section>
   )
 }