fix(ui): учитывать весь каталог Community в оптимизаторе
This commit is contained in:
Denozordec committed
1 parent
53603f17c1
commit
991f2b3871
9 files changed
+100
-12
No files matched your search
@@ -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<ColumnDef<DataGridFeatures, (typeof rows)[number]>[]>(
|
||||
() => [
|
||||
{
|
||||
id: "community",
|
||||
size: 180,
|
||||
accessorKey: "community",
|
||||
header: ({ column }) => (
|
||||
<DataGridSortHeader column={column} title="Community" className="ml-1" />
|
||||
@@ -95,6 +104,7 @@ function RouteOptimizerCommRecsDataGrid({
|
||||
},
|
||||
{
|
||||
id: "current",
|
||||
size: 260,
|
||||
header: () => (
|
||||
<span className="text-[11px] font-medium text-muted-foreground">
|
||||
Базовый расчёт (WAN → JH → Exit)
|
||||
@@ -123,6 +133,7 @@ function RouteOptimizerCommRecsDataGrid({
|
||||
},
|
||||
{
|
||||
id: "recommended",
|
||||
size: 260,
|
||||
header: () => <span className="text-[11px] font-medium text-muted-foreground">Рекомендуемый</span>,
|
||||
enableSorting: false,
|
||||
cell: ({ row }) => {
|
||||
@@ -154,6 +165,7 @@ function RouteOptimizerCommRecsDataGrid({
|
||||
},
|
||||
{
|
||||
id: "probability",
|
||||
size: 160,
|
||||
header: () => (
|
||||
<span className="text-[11px] font-medium text-muted-foreground block text-center">
|
||||
Индекс (баз / рек)
|
||||
@@ -178,6 +190,7 @@ function RouteOptimizerCommRecsDataGrid({
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
size: 240,
|
||||
header: () => (
|
||||
<span className="text-[11px] font-medium text-muted-foreground block text-right">
|
||||
Действие
|
||||
@@ -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 (
|
||||
<section aria-label="Рекомендации BGP Community" className="min-w-0">
|
||||
<div className="px-5 py-3 space-y-2">
|
||||
<label className="block text-xs">Поиск Community
|
||||
<Input className="mt-1" value={query} onChange={event => { setQuery(event.target.value); table.setPageIndex(0) }} placeholder="Community, название или шлюз" />
|
||||
</label>
|
||||
<p className="text-xs text-muted-foreground">Community: {filtered.length} из {rows.length}. Индексы и пути — расчётная модель.</p>
|
||||
</div>
|
||||
<DataGridShell
|
||||
table={table}
|
||||
recordCount={rows.length}
|
||||
recordCount={filtered.length}
|
||||
pagination={filtered.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 }}
|
||||
>
|
||||
<DataGridContainer border={false}>
|
||||
<DataGridScrollArea orientation="horizontal"><DataGridTable /></DataGridScrollArea>
|
||||
</DataGridContainer>
|
||||
</DataGridShell>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -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 не выполнена.
|
||||
+1
-1
@@ -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). Этот документ задаёт объём и критерии завершения, журнал фиксирует результат.
|
||||
|
||||
|
||||
@@ -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). План задаёт объём, этот журнал фиксирует выполненные блоки и ограничения.
|
||||
|
||||
|
||||
@@ -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 не выполнена.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
@@ -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
|
||||
|
||||
@@ -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))
|
||||
})
|
||||
@@ -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([])
|
||||
})
|
||||
Reference in new issue
Block a user