fix(ui): ограничить список Filters с сохранением порядка

tests/e2e/large-filters.spec.ts

@@ -0,0 +1,31 @@
+import { test, expect } from "@playwright/test"
+import type { FilterRule } from "../../lib/data"
+import axe from "axe-core"
+test("Filters1000: global order/page boundary/full PUT/search/sort/cache/320px",async({page},info)=>{
+  test.setTimeout(90000)
+  let rules:FilterRule[]=Array.from({length:1000},(_,i)=>({id:"r"+(i+1),community:"65001:"+String(i+1).padStart(5,"0"),gateway:"",gatewayTunnelId:"",action:"blackhole",description:"rule-"+String(i+1).padStart(4,"0")}))
+  let reads=0,failed=false,writeFail=false;const payloads:FilterRule[][]=[]
+  await page.route("**/health",r=>r.fulfill({json:{ok:true}}))
+  await page.route("**/api/**",r=>{const p=new URL(r.request().url()).pathname
+    if(p==="/api/filters/rules"&&r.request().method()==="PUT"){const body=r.request().postDataJSON();expect(body.serverId).toBe("1");expect(body.source).toBe("apply");payloads.push(body.rules);if(writeFail)return r.fulfill({status:403,json:{error:"Перемещение запрещено тест1000"}});rules=body.rules;return r.fulfill({json:{ok:true,rules}})}
+    if(p==="/api/filters/rules"){reads++;return r.fulfill(failed?{status:503,json:{error:"Каталог Filters недоступен тест"}}:{json:{rulesets:[{serverId:"1",rules}],greTunnels:[],live:true}})}
+    return r.fulfill({json:p==="/api/auth/config"?{required:false}:p==="/api/servers"?[{id:1,name:"Роутер",host:"192.0.2.1",country:"RU",type:"exit-node",enabled:true,status:null}]:p==="/api/filters/gre-tunnels"?{tunnels:[]}:p==="/api/recursive-routes"?{routes:[]}:{} })
+  })
+  const started=Date.now();await page.goto("/filters");const rows=page.locator("tr[data-row-id]");await expect(rows).toHaveCount(50)
+  const profile={count:1000,jsonBytes:Buffer.byteLength(JSON.stringify(rules)),rows:await rows.count(),nodes:await page.locator("*").count(),readyMs:Date.now()-started};console.log("Filters profile",JSON.stringify(profile));await info.attach("profile",{body:JSON.stringify(profile),contentType:"application/json"})
+  await expect(rows.first().getByRole("button",{name:"Поднять правило 65001:00001",exact:true})).toBeDisabled()
+  await rows.last().getByRole("button",{name:"Опустить правило 65001:00050",exact:true}).click();await expect.poll(()=>payloads.length).toBe(1)
+  expect(payloads[0]).toHaveLength(1000);expect(payloads[0].slice(48,52).map(r=>r.id)).toEqual(["r49","r51","r50","r52"]);await expect(rows.last()).toHaveAttribute("data-row-id","r51")
+  const next=page.getByRole("button",{name:"Следующая страница",exact:true});await next.click();await expect(rows.first()).toHaveAttribute("data-row-id","r50")
+  await rows.first().getByRole("button",{name:"Поднять правило 65001:00050",exact:true}).focus();await page.keyboard.press("Enter");await expect.poll(()=>payloads.length).toBe(2);expect(payloads[1].slice(48,52).map(r=>r.id)).toEqual(["r49","r50","r51","r52"]);await expect(rows.first()).toHaveAttribute("data-row-id","r51")
+  writeFail=true;await rows.first().getByRole("button",{name:"Поднять правило 65001:00051",exact:true}).click();await expect(page.getByRole("alert").filter({hasText:"Перемещение запрещено тест1000"})).toBeVisible();await expect(rows.first()).toHaveAttribute("data-row-id","r51");writeFail=false
+  const before=reads;await page.getByRole("button",{name:"Обновить",exact:true}).click();await expect.poll(()=>reads).toBeGreaterThan(before);await expect(rows.first()).toHaveAttribute("data-row-id","r51")
+  const search=page.getByPlaceholder("Community, gateway, описание…");await search.fill("rule-1000");await expect(rows).toHaveCount(1);await expect(rows.first().getByRole("button",{name:"Опустить правило 65001:01000",exact:true})).toBeDisabled();await expect(rows.first().getByLabel("Наивысший приоритет",{exact:true})).toBeVisible()
+  await search.fill("rule");await expect(rows).toHaveCount(50);await page.getByRole("table").getByRole("button",{name:"Community",exact:true}).click();await page.getByRole("table").getByRole("button",{name:"Community",exact:true}).click();await expect(rows.first()).toHaveAttribute("data-row-id","r1000")
+  await search.fill("");await expect(rows.first()).toHaveAttribute("data-row-id","r1");await expect(page.getByRole("table").getByRole("button",{name:"Community",exact:true})).toHaveCount(0)
+  await next.click();const previous=await rows.first().getAttribute("data-row-id");failed=true;await page.getByRole("button",{name:"Обновить",exact:true}).click();await expect(page.getByText("Роутер недоступен — показан кэш. Изменения заблокированы, пока не удастся прочитать CHR.",{exact:true})).toBeVisible();await expect(rows.first()).toHaveAttribute("data-row-id",previous!);await expect(rows.first().getByRole("button",{name:"Редактировать правило",exact:true})).toBeDisabled()
+  await page.setViewportSize({width:320,height:1000});const edit=rows.first().getByRole("button",{name:"Редактировать правило",exact:true});await edit.scrollIntoViewIfNeeded();await page.locator('[data-slot="data-grid"] [data-slot="scroll-area-viewport"]').evaluate(el=>{el.scrollLeft=el.scrollWidth});await expect(edit).toBeInViewport();await expect.poll(()=>page.evaluate(()=>document.documentElement.scrollWidth)).toBeLessThanOrEqual(320)
+  await page.addScriptTag({content:axe.source});expect((await page.evaluate(async()=>(window as unknown as {axe:typeof axe}).axe.run(document.querySelector('[data-slot="data-grid"]')!,{runOnly:{type:"tag",values:["wcag2a","wcag2aa","wcag21a","wcag21aa"]}}))).violations).toEqual([])
+  await page.addStyleTag({content:"nextjs-portal{display:none!important}"});await page.screenshot({path:info.outputPath("filters-320.png"),animations:"disabled"})
+  failed=false;rules=[rules[999]];await page.getByRole("button",{name:"Обновить",exact:true}).click();await expect(rows).toHaveCount(1);await expect(rows.first()).toHaveAttribute("data-row-id","r1000");expect(payloads).toHaveLength(3)
+})