diff --git a/components/data-grids/route-optimizer-comm-recs-data-grid.tsx b/components/data-grids/route-optimizer-comm-recs-data-grid.tsx index 7696cf19..cbbb147c 100644 --- a/components/data-grids/route-optimizer-comm-recs-data-grid.tsx +++ b/components/data-grids/route-optimizer-comm-recs-data-grid.tsx @@ -2,7 +2,9 @@ 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 { DataGridContainer, DataGridScrollArea, DataGridTable } from "@/components/reui/data-grid" import { type ColumnDef, useTable, @@ -68,15 +70,22 @@ function RouteOptimizerCommRecsDataGrid({ onApply, simulation = false, }: RouteOptimizerCommRecsDataGridProps) { + const [query, setQuery] = useState("") const rows = useMemo( () => recs.map((r, idx) => ({ ...r, _rowKey: `${homeId}::${r.community}::${idx}` })), [homeId, recs], ) + const filtered = useMemo(() => rows.filter(row => + [row.community, row.communityName, row.current?.wan, row.current?.jh, row.current?.exit, row.current?.gateway, + row.recommended?.wan, row.recommended?.jh, row.recommended?.exit, row.recommended?.gateway] + .join(" ").toLocaleLowerCase().includes(query.trim().toLocaleLowerCase())), [rows, query]) + const columns = useMemo[]>( () => [ { id: "community", + size: 180, accessorKey: "community", header: ({ column }) => ( @@ -95,6 +104,7 @@ function RouteOptimizerCommRecsDataGrid({ }, { id: "current", + size: 260, header: () => ( Базовый расчёт (WAN → JH → Exit) @@ -123,6 +133,7 @@ function RouteOptimizerCommRecsDataGrid({ }, { id: "recommended", + size: 260, header: () => Рекомендуемый, enableSorting: false, cell: ({ row }) => { @@ -154,6 +165,7 @@ function RouteOptimizerCommRecsDataGrid({ }, { id: "probability", + size: 160, header: () => ( Индекс (баз / рек) @@ -178,6 +190,7 @@ function RouteOptimizerCommRecsDataGrid({ }, { id: "actions", + size: 240, header: () => ( Действие @@ -236,16 +249,32 @@ function RouteOptimizerCommRecsDataGrid({ const table = useTable({ features: dataGridFeatures, - manualPagination: true, - data: rows, + manualPagination: false, + autoResetPageIndex: false, + initialState: { pagination: { pageIndex: 0, pageSize: 50 }, columnPinning: { start: ["community"], end: [] } }, + data: filtered, columns, getRowId: (row) => row._rowKey, }) + const { pageIndex, pageSize } = table.state.pagination + useEffect(() => { + const lastPage = Math.max(0, Math.ceil(filtered.length / pageSize) - 1) + if (pageIndex > lastPage) table.setPageIndex(lastPage) + }, [filtered.length, pageIndex, pageSize, table]) + return ( +
+
+ +

Community: {filtered.length} из {rows.length}. Индексы и пути — расчётная модель.

+
50 || pageSize !== 50} tableClassNames={{ headerRow: "border-b bg-muted/20", bodyRow: cn( @@ -254,8 +283,13 @@ function RouteOptimizerCommRecsDataGrid({ "[&:has([data-comm-applied=true])]:bg-success/5", ), }} - tableLayout={{ dense: true }} - /> + tableLayout={{ dense: true, width: "fixed", columnsPinnable: true }} + > + + + + +
) } diff --git a/docs/ux-ui-performance.md b/docs/ux-ui-performance.md index d3dcaca9..cfc1ca28 100644 --- a/docs/ux-ui-performance.md +++ b/docs/ux-ui-performance.md @@ -147,3 +147,12 @@ WAN1000×JH1:1000→50rows,28019→1419tableDOM,28712→2149pageDOM,2264ms dev-r ## 12.3.62 — исходный скрытый срез Community 2026-10-04. Live API fixture1000 правил Home1/1WAN/1JH/безExit, strict servers/rules DTO. UI показывает BGP community(24),24rows/504tableDOM/1197pageDOM/1916ms dev-ready. Это не performance-успех:976 правил вообще исключены до grid, counts не показывают реальный источник.1 browser/test lint passed, API writes отсутствуют. Следующий12.3.63 удаляет срез и ограничивает отображение pages50, сохраняя unknown indices безExit. + + +## 12.3.63 — весь Community-каталог с ограниченным отображением + +2026-10-04. Удалён скрытый slice24 после фильтра sourceServerId; ownership и расчётная семантика сохранены. ReUI DataGrid pages50/full search/communityName/gateway/path, exact counts, full-model sort, fixed widths/horizontalScroll/pinnedCommunity. Row key формируется до фильтрации из прежнего home/community/index; pins сохраняются при search/sort/страницах/refresh. Global рекомендаций count теперь относится ко всем правилам. Live режим по-прежнему не применяет BGP-рекомендации; симуляция доступна только demo. + +1000source→50 rendered/1024tableDOM/1751pageDOM/1851ms dev-ready; раньше24 rendered соответствовали24 в модели,976 правил терялись. Проверены page20 и правило1000/search/unknown indices безExit/no simulation buttons/refresh/clamp1/320px/pinned column/axe.7 main browser,8 pure tests (1200 assignment fixtures и новый1000 ownership/unknown), TypeScript, targeted lint и production build прошли. Снимок docs/ux-ui/screens/optimizer-community-320.png просмотрен. + +Осталось5manualPagination:true: scheduler11 fixedkeys, live GRE pools пусты/demo ограничен fixtures, probes schedule толькоdemo, subusers не подключён, trafficflows серверныйtop50 принят с честным указанием среза. Не мигрировать искусственно недостижимые live каталоги. Дальше12.4.6/12.4.7 — повтор общей main/context матрицы после delta. Внешняя12.5 не выполнена. diff --git a/docs/ux-ui-plan.md b/docs/ux-ui-plan.md index 96d9d0d3..4be8d604 100644 --- a/docs/ux-ui-plan.md +++ b/docs/ux-ui-plan.md @@ -1,6 +1,6 @@ # План реализации UX/UI по пятичасовым окнам -Актуальное продолжение 2026-10-04: 12.3.62 baseline Community1000 сохранён: UI учитывает24 из1000. Следующий12.3.63: убрать скрытый срез, pages50/поиск по полному каталогу/sort/pin/cache/clamp/320px. Общая регрессия после delta и внешняя12.5 остаются. +Актуальное продолжение 2026-10-04: 12.3.63 завершён: полный Community-каталог без скрытого среза24, pages50/search/sort/pin/cache/clamp/320px/axe. Следующий12.4.6: общий main прогон текущего HEAD, затем12.4.7 context. Внешняя12.5 остаётся. Общий план проекта MikrotikManager. Основан на согласованном плане из задачи; точка продолжения обновлена 2026-10-04. Источник фактического прогресса, проверок и ограничений — [журнал реализации](ux-ui-progress.md). Этот документ задаёт объём и критерии завершения, журнал фиксирует результат. diff --git a/docs/ux-ui-progress.md b/docs/ux-ui-progress.md index a08468bb..b02dde56 100644 --- a/docs/ux-ui-progress.md +++ b/docs/ux-ui-progress.md @@ -1,6 +1,6 @@ # UX/UI: журнал реализации -Актуальное продолжение 2026-10-04: 12.3.62 baseline Community1000 сохранён: UI учитывает24 из1000. Следующий12.3.63: убрать скрытый срез, pages50/поиск по полному каталогу/sort/pin/cache/clamp/320px. Общая регрессия после delta и внешняя12.5 остаются. +Актуальное продолжение 2026-10-04: 12.3.63 завершён: полный Community-каталог без скрытого среза24, pages50/search/sort/pin/cache/clamp/320px/axe. Следующий12.4.6: общий main прогон текущего HEAD, затем12.4.7 context. Внешняя12.5 остаётся. Общий план: [UX/UI по этапам и пятичасовым окнам](ux-ui-plan.md). План задаёт объём, этот журнал фиксирует выполненные блоки и ограничения. diff --git a/docs/ux-ui-stage-12.md b/docs/ux-ui-stage-12.md index 331eef2b..32c3e67a 100644 --- a/docs/ux-ui-stage-12.md +++ b/docs/ux-ui-stage-12.md @@ -699,3 +699,12 @@ WAN1000×JH1:1000→50rows,28019→1419tableDOM,28712→2149pageDOM,2264ms dev-r ## 12.3.62 — исходный скрытый срез Community 2026-10-04. Live API fixture1000 правил Home1/1WAN/1JH/безExit, strict servers/rules DTO. UI показывает BGP community(24),24rows/504tableDOM/1197pageDOM/1916ms dev-ready. Это не performance-успех:976 правил вообще исключены до grid, counts не показывают реальный источник.1 browser/test lint passed, API writes отсутствуют. Следующий12.3.63 удаляет срез и ограничивает отображение pages50, сохраняя unknown indices безExit. + + +## 12.3.63 — весь Community-каталог с ограниченным отображением + +2026-10-04. Удалён скрытый slice24 после фильтра sourceServerId; ownership и расчётная семантика сохранены. ReUI DataGrid pages50/full search/communityName/gateway/path, exact counts, full-model sort, fixed widths/horizontalScroll/pinnedCommunity. Row key формируется до фильтрации из прежнего home/community/index; pins сохраняются при search/sort/страницах/refresh. Global рекомендаций count теперь относится ко всем правилам. Live режим по-прежнему не применяет BGP-рекомендации; симуляция доступна только demo. + +1000source→50 rendered/1024tableDOM/1751pageDOM/1851ms dev-ready; раньше24 rendered соответствовали24 в модели,976 правил терялись. Проверены page20 и правило1000/search/unknown indices безExit/no simulation buttons/refresh/clamp1/320px/pinned column/axe.7 main browser,8 pure tests (1200 assignment fixtures и новый1000 ownership/unknown), TypeScript, targeted lint и production build прошли. Снимок docs/ux-ui/screens/optimizer-community-320.png просмотрен. + +Осталось5manualPagination:true: scheduler11 fixedkeys, live GRE pools пусты/demo ограничен fixtures, probes schedule толькоdemo, subusers не подключён, trafficflows серверныйtop50 принят с честным указанием среза. Не мигрировать искусственно недостижимые live каталоги. Дальше12.4.6/12.4.7 — повтор общей main/context матрицы после delta. Внешняя12.5 не выполнена. diff --git a/docs/ux-ui/screens/optimizer-community-320.png b/docs/ux-ui/screens/optimizer-community-320.png new file mode 100644 index 00000000..30246e81 Binary files /dev/null and b/docs/ux-ui/screens/optimizer-community-320.png differ diff --git a/lib/route-optimizer-data.ts b/lib/route-optimizer-data.ts index 57c46df1..61724aa8 100644 --- a/lib/route-optimizer-data.ts +++ b/lib/route-optimizer-data.ts @@ -542,7 +542,7 @@ export function buildLiveOptimizerData( sorted.sort((a, b) => b.probabilityOptimal - a.probabilityOptimal) const best = sorted[0] ?? null - const commRecs: CommRec[] = flatRules.filter(rule=>rule.sourceServerId===home.id).slice(0, 24).map((rule) => { + const commRecs: CommRec[] = flatRules.filter(rule=>rule.sourceServerId===home.id).map((rule) => { const curProb = 38 + (rule.community.length % 12) const recProb = best ? Math.min(92, curProb + 18 + (best.score % 10)) : curProb const rec = best diff --git a/lib/route-optimizer-observed.test.ts b/lib/route-optimizer-observed.test.ts index 118bbab0..f7d439fa 100644 --- a/lib/route-optimizer-observed.test.ts +++ b/lib/route-optimizer-observed.test.ts @@ -40,3 +40,13 @@ test("Community recommendations belong to their source home only",()=>{ assert.deepEqual(result.homes[0].commRecs.map(r=>r.community),["65001:1"]) assert.deepEqual(result.homes[1].commRecs.map(r=>r.community),["65001:4"]) }) + + +test("Community catalog retains all 1000 source rules without inventing indices",()=>{ + const inventory=rows.filter(row=>row.type!=="exit-node") + const rules=Array.from({length:1000},(_,i)=>({id:String(i+1),community:'65001:'+String(i+1),communityName:'Service '+(i+1),gateway:'192.0.2.2',gatewayTunnelId:'',description:''})) + const result=buildLiveOptimizerData(inventory,[{serverId:'1',rules}],DEFAULT_ROUTE_AI_OPTIMIZER_SETTINGS) + const recs=result.homes[0].commRecs + assert.equal(recs.length,1000);assert.equal(recs[999].community,'65001:1000') + assert.ok(recs.every(rec=>rec.current===null&&rec.recommended===null&&!rec.shouldSwitch)) +}) diff --git a/tests/e2e/large-optimizer-community.spec.ts b/tests/e2e/large-optimizer-community.spec.ts index af144afe..b7d0ff6c 100644 --- a/tests/e2e/large-optimizer-community.spec.ts +++ b/tests/e2e/large-optimizer-community.spec.ts @@ -1,10 +1,11 @@ import { test, expect } from "@playwright/test" +import axe from "axe-core" import { writeFileSync } from "node:fs" import { optimizerServersSchema,optimizerRulesSchema } from "../../lib/route-optimizer-response" test("Оптимизатор1000 Community: полный источник",async({page},info)=>{ test.setTimeout(90000) - const rules=optimizerRulesSchema.parse({rulesets:[{serverId:"1",rules:Array.from({length:1000},(_,i)=>({id:String(i+1),community:`65001:${String(i+1).padStart(4,"0")}`,communityName:`Сервис ${i+1}`,gateway:"192.0.2.2",gatewayTunnelId:"",description:""}))}]}) + let rules=optimizerRulesSchema.parse({rulesets:[{serverId:"1",rules:Array.from({length:1000},(_,i)=>({id:String(i+1),community:`65001:${String(i+1).padStart(4,"0")}`,communityName:`Сервис ${i+1}`,gateway:"192.0.2.2",gatewayTunnelId:"",description:""}))}]}) const common = { host: "192.0.2.1", enabled: true, status: "online", latency: 10, country: "RU", site: "TEST", model: "CHR" } const servers = optimizerServersSchema.parse([ { ...common, id: 1, name: "Домашний роутер", type: "home-router", wanUplinks: Array.from({ length: 1 }, (_, 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 })) }, @@ -12,10 +13,12 @@ test("Оптимизатор1000 Community: полный источник",async ]) + 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/filters/rules")reads++ if (r.request().method() !== "GET" && !path.endsWith("/preview")) writes.push(path) @@ -24,10 +27,33 @@ test("Оптимизатор1000 Community: полный источник",async const start=Date.now();await page.goto("/route-optimizer?server=1&keep=1") - await page.getByRole("button",{name:"BGP community (24)",exact:true}).click() + await page.getByRole("button",{name:"BGP community (1000)",exact:true}).click() const table=page.getByRole("table").filter({hasText:"Community"}) - await expect(table.locator("tr[data-row-id]")).toHaveCount(24) + await expect(table.locator("tr[data-row-id]")).toHaveCount(50) const profile={sourceCount:1000,rendered:await table.locator("tr[data-row-id]").count(),tableNodes:await table.locator("*").count(),pageNodes:await page.locator("*").count(),readyMs:Date.now()-start} console.log("Optimizer Community",JSON.stringify(profile));writeFileSync(info.outputPath("community-profile.json"),JSON.stringify(profile,null,2)) + const root=page.getByRole("region",{name:"Рекомендации BGP Community"}) + const rows=table.locator("tr[data-row-id]"),search=root.getByRole("textbox",{name:"Поиск Community",exact:true}) + const next=root.getByRole("button",{name:"Следующая страница",exact:true}) + await next.click();await expect(rows.first()).toContainText("65001:0051") + const before=reads;await page.getByRole("button",{name:"Обновить",exact:true}).click();await expect.poll(()=>reads).toBeGreaterThan(before);await expect(rows.first()).toContainText("65001:0051") + await search.fill("Сервис 1000");await expect(rows).toHaveCount(1);await expect(rows.first()).toContainText("65001:1000") + await rows.first().getByRole("button",{name:"Закрепить",exact:true}).click();await expect(rows.first().getByRole("button",{name:"Открепить",exact:true})).toBeVisible() + await expect(rows.first().getByRole("cell").nth(3).getByLabel("Индекс неизвестен")).toHaveCount(2) + await expect(root.getByRole("button",{name:"Симулировать",exact:true})).toHaveCount(0) + await search.fill("no-such-community");await expect(rows).toHaveCount(0);await expect(root).toContainText("Community: 0 из 1000") + await search.fill("");for(let i=0;i<19;i++)await next.click() + await expect(next).toBeDisabled();await expect(rows.last()).toContainText("65001:1000");await expect(rows.last().getByRole("button",{name:"Открепить",exact:true})).toBeVisible() + await search.fill("65001:");await table.getByRole("button",{name:"Community",exact:true}).click();await table.getByRole("button",{name:"Community",exact:true}).click() + await expect(rows.first()).toContainText("65001:1000");await expect(rows.first().getByRole("button",{name:"Открепить",exact:true})).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 rows.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("optimizer-community-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="Рекомендации BGP Community"]')!,{runOnly:{type:"tag",values:["wcag2a","wcag2aa","wcag21a","wcag21aa"]}}))).violations.map(v=>({id:v.id,nodes:v.nodes.map(n=>n.target)}))).toEqual([]) + await next.click();rules={rulesets:[{serverId:"1",rules:rules.rulesets[0].rules.slice(0,1)}]};await page.getByRole("button",{name:"Обновить",exact:true}).click() + await expect(page.getByRole("button",{name:"BGP community (1)",exact:true})).toBeVisible();await expect(rows).toHaveCount(1);await expect(rows.first()).toContainText("65001:0001") expect(writes).toEqual([]) })