fix(ui): ограничить отображение матрицы WAN и Jump Host

components/data-grids/route-optimizer-wan-matrix-data-grid.tsx

@@ -2,7 +2,10 @@
 
 import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
 
-import { useMemo } from "react"
+import { useEffect, useMemo, useState } from "react"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { DataGridContainer, DataGridScrollArea, DataGridTable } from "@/components/reui/data-grid"
 import {
   type ColumnDef,
   useTable,
@@ -38,12 +41,35 @@ function RouteOptimizerWanMatrixDataGrid({
   legs,
   jumpHosts,
 }: RouteOptimizerWanMatrixDataGridProps) {
-  const bestScore = legs.length ? Math.max(...legs.map((l) => l.score)) : 0
+  const [wanQuery, setWanQuery] = useState("")
+  const [jhQuery, setJhQuery] = useState("")
+  const [jhPage, setJhPage] = useState(0)
+  const filteredWans = useMemo(() => home.wans.filter(wan =>
+    [wan.name, wan.iface, wan.isp, wan.ip, wan.id].join(" ").toLocaleLowerCase().includes(wanQuery.trim().toLocaleLowerCase())), [home.wans, wanQuery])
+  const filteredHosts = useMemo(() => jumpHosts.filter(jh =>
+    [jh.label, jh.site, jh.ip, jh.country, jh.id].join(" ").toLocaleLowerCase().includes(jhQuery.trim().toLocaleLowerCase())), [jumpHosts, jhQuery])
+  const lastHostPage = Math.max(0, Math.ceil(filteredHosts.length / 5) - 1)
+  const hostPage = Math.min(jhPage, lastHostPage)
+  if (jhPage !== hostPage) setJhPage(hostPage)
+  const visibleHosts = useMemo(() => filteredHosts.slice(hostPage * 5, hostPage * 5 + 5), [filteredHosts, hostPage])
+  const { bestScore, legMap } = useMemo(() => {
+    let bestScore = legs.length ? -Infinity : 0
+    const legMap = new Map<string, Map<string, WanJhLeg>>()
+    for (const leg of legs) {
+      bestScore = Math.max(bestScore, leg.score)
+      let byHost = legMap.get(leg.wanId)
+      if (!byHost) { byHost = new Map(); legMap.set(leg.wanId, byHost) }
+      // Preserve the first matching leg, as the former Array.find did.
+      if (!byHost.has(leg.jhId)) byHost.set(leg.jhId, leg)
+    }
+    return { bestScore, legMap }
+  }, [legs])
 
   const columns = useMemo<ColumnDef<DataGridFeatures, HomeRouter["wans"][number]>[]>(() => {
     const base: ColumnDef<DataGridFeatures, HomeRouter["wans"][number]>[] = [
       {
         id: "wan",
+        size: 180,
         accessorKey: "name",
         header: () => <span className="text-[11px] font-medium text-muted-foreground">WAN-аплинк</span>,
         cell: ({ row }) => {
@@ -62,6 +88,7 @@ function RouteOptimizerWanMatrixDataGrid({
       },
       {
         id: "isp",
+        size: 160,
         header: () => <span className="text-[11px] font-medium text-muted-foreground">ISP / IP</span>,
         cell: ({ row }) => {
           const wan = row.original
@@ -76,6 +103,7 @@ function RouteOptimizerWanMatrixDataGrid({
       },
       {
         id: "bandwidth",
+        size: 112,
         header: () => (
           <span className="text-[11px] font-medium text-muted-foreground block text-right">
             Лимит модели
@@ -97,8 +125,9 @@ function RouteOptimizerWanMatrixDataGrid({
       },
     ]
 
-    const jhCols: ColumnDef<DataGridFeatures, HomeRouter["wans"][number]>[] = jumpHosts.map((jh) => ({
+    const jhCols: ColumnDef<DataGridFeatures, HomeRouter["wans"][number]>[] = visibleHosts.map((jh) => ({
       id: `jh-${jh.id}`,
+      size: 200,
       header: () => (
         <div className="text-center">
           <div className="text-[11px] font-medium text-muted-foreground">{jh.label}</div>
@@ -110,7 +139,7 @@ function RouteOptimizerWanMatrixDataGrid({
       ),
       cell: ({ row }) => {
         const wan = row.original
-        const leg = legs.find((l) => l.wanId === wan.id && l.jhId === jh.id)
+        const leg = legMap.get(wan.id)?.get(jh.id)
         if (!leg) return <span className="text-center text-muted-foreground text-xs block">—</span>
         const isBest = leg.score === bestScore
         return (
@@ -165,24 +194,55 @@ function RouteOptimizerWanMatrixDataGrid({
     }
 
     return [...base, ...jhCols]
-  }, [bestScore, jumpHosts, legs])
+  }, [bestScore, visibleHosts, legMap])
 
   const table = useTable({
     features: dataGridFeatures,
-    manualPagination: true,
+    manualPagination: false,
+    autoResetPageIndex: false,
+    initialState: { pagination: { pageIndex: 0, pageSize: 50 }, columnPinning: { start: ["wan"], end: [] } },
     manualSorting: true,
-    data: home.wans,
+    data: filteredWans,
     columns,
     getRowId: (row) => row.id,
   })
 
+  const { pageIndex, pageSize } = table.state.pagination
+  useEffect(() => {
+    const lastPage = Math.max(0, Math.ceil(filteredWans.length / pageSize) - 1)
+    if (pageIndex > lastPage) table.setPageIndex(lastPage)
+  }, [filteredWans.length, pageIndex, pageSize, table])
+
   return (
+    <section aria-label="Матрица WAN и Jump Host" className="min-w-0">
+      <div className="flex flex-wrap gap-3 px-5 py-3">
+        <label className="min-w-0 flex-1 basis-48 text-xs">Поиск WAN
+          <Input className="mt-1" value={wanQuery} onChange={event => { setWanQuery(event.target.value); table.setPageIndex(0) }} placeholder="Название, интерфейс, ISP или IP" />
+        </label>
+        <label className="min-w-0 flex-1 basis-48 text-xs">Поиск Jump Host
+          <Input className="mt-1" value={jhQuery} onChange={event => { setJhQuery(event.target.value); setJhPage(0) }} placeholder="Название, площадка или IP" />
+        </label>
+      </div>
+      <div className="flex flex-wrap items-center gap-2 px-5 pb-3 text-xs text-muted-foreground">
+        <span>WAN: {filteredWans.length} из {home.wans.length}. Jump Host: {filteredHosts.length} из {jumpHosts.length}.</span>
+        {filteredHosts.length > 5 && <>
+          <span>Столбцы {hostPage * 5 + 1}–{Math.min((hostPage + 1) * 5, filteredHosts.length)} из {filteredHosts.length}</span>
+          <Button variant="outline" size="sm" aria-label="Предыдущие Jump Host" disabled={hostPage === 0} onClick={() => setJhPage(hostPage - 1)}>Назад</Button>
+          <Button variant="outline" size="sm" aria-label="Следующие Jump Host" disabled={hostPage === lastHostPage} onClick={() => setJhPage(hostPage + 1)}>Далее</Button>
+        </>}
+      </div>
     <DataGridShell
       table={table}
-      recordCount={home.wans.length}
+      recordCount={filteredWans.length}
+      pagination={filteredWans.length > 50 || pageSize !== 50}
       tableClassNames={{ headerRow: "border-b bg-muted/20", bodyRow: "group/row hover:bg-muted/30" }}
-      tableLayout={{ dense: true }}
-    />
+      tableLayout={{ dense: true, width: "fixed", columnsPinnable: true }}
+    >
+      <DataGridContainer border={false}>
+        <DataGridScrollArea orientation="horizontal"><DataGridTable /></DataGridScrollArea>
+      </DataGridContainer>
+    </DataGridShell>
+    </section>
   )
 }
 

docs/ux-ui-performance.md

@@ -124,3 +124,12 @@ commRecs строятся через filter(sourceServerId).slice(0,24), а Home
 2026-10-04. Live API подменён строгими DTO, без Exit и API mutations. Два браузерных профиля прошли: WAN1000×JH1 — 1000 строк,4 столбца,28019 DOM таблицы,28712 DOM страницы,4977мс dev-ready,108917байт; WAN10×JH100 — 10 строк,103 столбца,9803 DOM таблицы,10595 DOM страницы,2258мс dev-ready,16593байт. Время dev измеряет также загрузку/компиляцию и не является production benchmark.
 
 Чистый расчёт7WAN×20 wildcard probes воспроизводится scripts/performance/optimizer-probes-profile.mjs, в отдельном child process с жёстким timeout10000мс. Расчёт не завершился за timeout; тяжёлый DFS нельзя воспроизводить в UI. Нет DB/API/сетевых операций. Следующий12.3.60 — страницы50WAN и ограниченное окно JH, поиск по полному каталогу, проверка обновления/сжатия и320px. Семантику назначения probes этим блоком не меняем.
+
+
+## 12.3.60 — ограниченное отображение WAN matrix
+
+2026-10-04. ReUI DataGrid/TanStack v9: клиентские страницы50WAN, окно5JH, поиск по полному WAN/JH каталогу, точные filtered/total counts. Fixed widths/горизонтальный DataGridScrollArea/закреплённый WAN; страницы сохраняются при refresh и нормализуются при сжатии каталога. Best score берётся из всех legs циклом без spread; Map WAN→JH сохраняет первый matching leg, как прежний find. Raw unknown/zero/даты и модель остаются раздельными. API writes отсутствуют.
+
+WAN1000×JH1:1000→50rows,28019→1419tableDOM,28712→2149pageDOM,2264ms dev-ready. WAN10×JH100:103→8columns,9803→683tableDOM,10595→1492pageDOM,1785ms dev-ready. Полные исходные массивы остаются в памяти.
+
+Проверены12browser + повтор2 после lint-правки, TypeScript без incremental, targeted ESLint, production build, ReUI validate_usage/checklist. Мобильные снимки docs/ux-ui/screens/optimizer-wan-matrix-{1000,100jh}-320.png просмотрены. Поиск последних объектов, последний диапазон, cache/refresh/clamp,320px/pinnedWAN и WCAG axe приняты. Общая регрессия после delta ещё требуется.6 manualPagination:true остаются; CPU DFS и срез24 commRecs не исправлены этим блоком.

docs/ux-ui-plan.md

@@ -1,6 +1,6 @@
 # План реализации UX/UI по пятичасовым окнам
 
-Актуальное продолжение 2026-10-04: 12.3.59 завершён: отдельные профили WAN1000×JH1, WAN10×JH100 и CPU7WAN×20 probes. Следующий12.3.60: ограничить отображение WAN/JH без среза исходных данных; тяжёлый DFS пока остаётся отдельным риском. Общая регрессия после delta и внешняя12.5 остаются.
+Актуальное продолжение 2026-10-04: 12.3.60 завершён: WAN matrix50 rows/5JH, полный поиск и best, обновление/clamp/320px/axe. Следующий12.3.61: ускорить DFS назначения проб с доказательством сохранения выбора и tie-порядка; CPU7WAN×20 пока timeout10с. Общая регрессия после delta и внешняя12.5 остаются.
 
 Общий план проекта MikrotikManager. Основан на согласованном плане из задачи; точка продолжения обновлена 2026-10-04. Источник фактического прогресса, проверок и ограничений — [журнал реализации](ux-ui-progress.md). Этот документ задаёт объём и критерии завершения, журнал фиксирует результат.
 

docs/ux-ui-progress.md

@@ -1,6 +1,6 @@
 # UX/UI: журнал реализации
 
-Актуальное продолжение 2026-10-04: 12.3.59 завершён: отдельные профили WAN1000×JH1, WAN10×JH100 и CPU7WAN×20 probes. Следующий12.3.60: ограничить отображение WAN/JH без среза исходных данных; тяжёлый DFS пока остаётся отдельным риском. Общая регрессия после delta и внешняя12.5 остаются.
+Актуальное продолжение 2026-10-04: 12.3.60 завершён: WAN matrix50 rows/5JH, полный поиск и best, обновление/clamp/320px/axe. Следующий12.3.61: ускорить DFS назначения проб с доказательством сохранения выбора и tie-порядка; CPU7WAN×20 пока timeout10с. Общая регрессия после delta и внешняя12.5 остаются.
 
 Общий план: [UX/UI по этапам и пятичасовым окнам](ux-ui-plan.md). План задаёт объём, этот журнал фиксирует выполненные блоки и ограничения.
 

docs/ux-ui-stage-12.md

@@ -676,3 +676,12 @@ commRecs строятся через filter(sourceServerId).slice(0,24), а Home
 2026-10-04. Live API подменён строгими DTO, без Exit и API mutations. Два браузерных профиля прошли: WAN1000×JH1 — 1000 строк,4 столбца,28019 DOM таблицы,28712 DOM страницы,4977мс dev-ready,108917байт; WAN10×JH100 — 10 строк,103 столбца,9803 DOM таблицы,10595 DOM страницы,2258мс dev-ready,16593байт. Время dev измеряет также загрузку/компиляцию и не является production benchmark.
 
 Чистый расчёт7WAN×20 wildcard probes воспроизводится scripts/performance/optimizer-probes-profile.mjs, в отдельном child process с жёстким timeout10000мс. Расчёт не завершился за timeout; тяжёлый DFS нельзя воспроизводить в UI. Нет DB/API/сетевых операций. Следующий12.3.60 — страницы50WAN и ограниченное окно JH, поиск по полному каталогу, проверка обновления/сжатия и320px. Семантику назначения probes этим блоком не меняем.
+
+
+## 12.3.60 — ограниченное отображение WAN matrix
+
+2026-10-04. ReUI DataGrid/TanStack v9: клиентские страницы50WAN, окно5JH, поиск по полному WAN/JH каталогу, точные filtered/total counts. Fixed widths/горизонтальный DataGridScrollArea/закреплённый WAN; страницы сохраняются при refresh и нормализуются при сжатии каталога. Best score берётся из всех legs циклом без spread; Map WAN→JH сохраняет первый matching leg, как прежний find. Raw unknown/zero/даты и модель остаются раздельными. API writes отсутствуют.
+
+WAN1000×JH1:1000→50rows,28019→1419tableDOM,28712→2149pageDOM,2264ms dev-ready. WAN10×JH100:103→8columns,9803→683tableDOM,10595→1492pageDOM,1785ms dev-ready. Полные исходные массивы остаются в памяти.
+
+Проверены12browser + повтор2 после lint-правки, TypeScript без incremental, targeted ESLint, production build, ReUI validate_usage/checklist. Мобильные снимки docs/ux-ui/screens/optimizer-wan-matrix-{1000,100jh}-320.png просмотрены. Поиск последних объектов, последний диапазон, cache/refresh/clamp,320px/pinnedWAN и WCAG axe приняты. Общая регрессия после delta ещё требуется.6 manualPagination:true остаются; CPU DFS и срез24 commRecs не исправлены этим блоком.

tests/e2e/large-optimizer-wan-matrix.spec.ts

@@ -1,4 +1,5 @@
 import { test, expect } from "@playwright/test"
+import axe from "axe-core"
 import { writeFileSync } from "node:fs"
 import { optimizerServersSchema } from "../../lib/route-optimizer-response"
 
@@ -6,15 +7,17 @@ for (const [wanCount,jhCount] of [[1000,1],[10,100]]) {
  test(`Матрица WAN${wanCount} × JH${jhCount} без Exit`, async ({page},info) => {
  test.setTimeout(90000)
   const common = { host: "192.0.2.1", enabled: true, status: "online", latency: 10, country: "RU", site: "TEST", model: "CHR" }
-  const servers = optimizerServersSchema.parse([
+  let servers = optimizerServersSchema.parse([
     { ...common, id: 1, name: "Домашний роутер", type: "home-router", wanUplinks: Array.from({ length: wanCount }, (_, i) => ({ id: `wan${i+1}`, name: `WAN${i+1}`, isp: "ISP", iface: `ether${i+1}`, ip: `198.51.100.${i+1}`, maxDl: 100, maxUl: 100 })) },
     ...Array.from({ length: jhCount }, (_, i) => ({ ...common, id: i+2, name: `Jump ${i+1}`, type: "jump-host" })),
   ])
 
+  let reads = 0
   const writes: string[] = []
   await page.route("**/health", r => r.fulfill({ json: { ok: true } }))
   await page.route("**/api/**", r => {
     const path = new URL(r.request().url()).pathname
+    if (path === "/api/servers") reads++
 
     if (r.request().method() !== "GET" && !path.endsWith("/preview")) writes.push(path)
     return r.fulfill({ json: path === "/api/auth/config" ? { required: false } : path === "/api/servers" ? servers : path === "/api/filters/rules" ? { rulesets: [] } : path === "/api/uptime/speed-probes" ? { probes: [] } : path === "/api/ospf/catalog" ? { interfaces: [], instances: [], neighbors: [], bfdSessions: [], routes: [], failures: [] } : path.endsWith("/ospf/optimize/preview") ? { serverId: 1, serverName: "Домашний роутер", pingWeight: 60, interfacesTotal: 0, changedCount: 0, unchangedCount: 0, interfaces: [], changes: [] } : {} })
@@ -22,9 +25,46 @@ for (const [wanCount,jhCount] of [[1000,1],[10,100]]) {
 
  const started=Date.now(); await page.goto("/route-optimizer?server=1&keep=1")
  const table=page.getByRole("table").filter({hasText:"WAN-аплинк"})
- await expect(table.locator("tr[data-row-id]")).toHaveCount(wanCount)
+ await expect(table.locator("tr[data-row-id]")).toHaveCount(Math.min(50,wanCount))
  const profile={wanCount,jhCount,bytes:Buffer.byteLength(JSON.stringify(servers)),rows:await table.locator("tr[data-row-id]").count(),columns:await table.getByRole("columnheader").count(),tableNodes:await table.locator("*").count(),pageNodes:await page.locator("*").count(),readyMs:Date.now()-started}
  console.log("WAN matrix",JSON.stringify(profile)); writeFileSync(info.outputPath("matrix-profile.json"),JSON.stringify(profile,null,2))
+ const root=page.getByRole("region",{name:"Матрица WAN и Jump Host"})
+ await expect(table.getByRole("columnheader")).toHaveCount(3+Math.min(5,jhCount))
+ if(wanCount>50){
+   const next=root.getByRole("button",{name:"Следующая страница",exact:true})
+   await next.click(); await expect(table.locator("tr[data-row-id]").first()).toHaveAttribute("data-row-id","wan51")
+   const before=reads; await page.getByRole("button",{name:"Обновить",exact:true}).click(); await expect.poll(()=>reads).toBeGreaterThan(before)
+   await expect(table.locator("tr[data-row-id]").first()).toHaveAttribute("data-row-id","wan51")
+   await root.getByRole("textbox",{name:"Поиск WAN",exact:true}).fill("WAN1000")
+   await expect(table.locator("tr[data-row-id]")).toHaveCount(1); await expect(table.locator("tr[data-row-id]").first()).toHaveAttribute("data-row-id","wan1000")
+   await root.getByRole("textbox",{name:"Поиск WAN",exact:true}).fill("")
+   for(let i=0;i<19;i++)await next.click()
+   await expect(next).toBeDisabled();await expect(table.locator("tr[data-row-id]").last()).toHaveAttribute("data-row-id","wan1000")
+ } else {
+   const next=root.getByRole("button",{name:"Следующие Jump Host",exact:true})
+   await next.click();await expect(table.getByRole("columnheader",{name:/Jump 6/})).toBeVisible()
+   const before=reads;await page.getByRole("button",{name:"Обновить",exact:true}).click();await expect.poll(()=>reads).toBeGreaterThan(before)
+   await expect(table.getByRole("columnheader",{name:/Jump 6/})).toBeVisible()
+   await root.getByRole("textbox",{name:"Поиск Jump Host",exact:true}).fill("Jump 100")
+   await expect(table.getByRole("columnheader")).toHaveCount(4);await expect(table.getByRole("columnheader",{name:/Jump 100/})).toBeVisible()
+   await root.getByRole("textbox",{name:"Поиск Jump Host",exact:true}).fill("no-such-host")
+   await expect(root).toContainText("Jump Host: 0 из 100");await expect(table.getByRole("columnheader")).toHaveCount(3)
+   await root.getByRole("textbox",{name:"Поиск Jump Host",exact:true}).fill("")
+   for(let i=0;i<19;i++)await next.click()
+   await expect(next).toBeDisabled();await expect(table.getByRole("columnheader",{name:/Jump 100/})).toBeVisible()
+ }
+ await page.setViewportSize({width:320,height:1000})
+ const scroll=root.locator('[data-slot="scroll-area-viewport"]')
+ await scroll.evaluate(el=>{el.scrollLeft=el.scrollWidth})
+ expect(await table.locator('tr[data-row-id]').first().getByRole('cell').first().evaluate(el=>{const a=el.getBoundingClientRect(),v=el.closest('[data-slot="scroll-area-viewport"]')!.getBoundingClientRect();return a.left>=v.left-1&&a.right<=v.right+1})).toBe(true)
+ expect(await page.evaluate(()=>document.documentElement.scrollWidth)).toBeLessThanOrEqual(320)
+ await scroll.evaluate(el=>{el.scrollLeft=0});await root.evaluate(el=>el.scrollIntoView({block:"start"}))
+ await page.addStyleTag({content:"nextjs-portal{display:none!important}"});await page.screenshot({path:info.outputPath("matrix-320.png"),animations:"disabled"})
+ await page.addScriptTag({content:axe.source})
+ expect((await page.evaluate(async()=> (window as unknown as {axe:typeof axe}).axe.run(document.querySelector('[aria-label="Матрица WAN и Jump Host"]')!,{runOnly:{type:"tag",values:["wcag2a","wcag2aa","wcag21a","wcag21aa"]}}))).violations.map(v=>({id:v.id,nodes:v.nodes.map(n=>n.target)}))).toEqual([])
+ servers=servers.slice(0,2).map(server=>server.id===1?{...server,wanUplinks:server.wanUplinks!.slice(0,1)}:server)
+ await page.getByRole("button",{name:"Обновить",exact:true}).click()
+ await expect(table.locator('tr[data-row-id]')).toHaveCount(1);await expect(table.locator('tr[data-row-id]').first()).toHaveAttribute('data-row-id','wan1');await expect(table.getByRole('columnheader')).toHaveCount(4)
  expect(writes).toEqual([])
  })
 }