diff --git a/components/data-grids/bgp-sessions-data-grid.tsx b/components/data-grids/bgp-sessions-data-grid.tsx index 9f9de846..d47dc3d9 100644 --- a/components/data-grids/bgp-sessions-data-grid.tsx +++ b/components/data-grids/bgp-sessions-data-grid.tsx @@ -1,20 +1,19 @@ "use client" +import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid" + import { useMemo } from "react" import { type ColumnDef, - getCoreRowModel, - getExpandedRowModel, - getSortedRowModel, - useReactTable, -} from "@tanstack/react-table-v8" + useTable, +} from "@tanstack/react-table" import { cn } from "@/lib/utils" -import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell" +import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell" import { DATA_GRID_CELL_PAD, DATA_GRID_CELL_PAD_FIRST, -} from "@/components/data-grids/shared/legacy-data-grid-layout" -import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header" +} from "@/components/data-grids/shared/data-grid-layout" +import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header" import { EmptyState } from "@/components/empty-state" import { BgpSessionDetail } from "@/components/data-grids/bgp-session-detail" import type { BgpSessionRow, BgpState, BgpType } from "@/lib/bgp/types" @@ -104,7 +103,7 @@ interface BgpSessionsDataGridProps { } function BgpSessionsDataGrid({ sessions }: BgpSessionsDataGridProps) { - const columns = useMemo[]>( + const columns = useMemo[]>( () => [ { id: "serverLabel", @@ -260,12 +259,11 @@ function BgpSessionsDataGrid({ sessions }: BgpSessionsDataGridProps) { [], ) - const table = useReactTable({ + const table = useTable({ + features: dataGridFeatures, + manualPagination: true, data: sessions, columns, - getCoreRowModel: getCoreRowModel(), - getSortedRowModel: getSortedRowModel(), - getExpandedRowModel: getExpandedRowModel(), getRowId: (row) => row.id, getRowCanExpand: () => true, }) diff --git a/components/data-grids/ospf-bfd-data-grid.tsx b/components/data-grids/ospf-bfd-data-grid.tsx index 66c936bb..600d4c62 100644 --- a/components/data-grids/ospf-bfd-data-grid.tsx +++ b/components/data-grids/ospf-bfd-data-grid.tsx @@ -1,20 +1,20 @@ "use client" +import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid" + import { useMemo } from "react" import { type ColumnDef, - getCoreRowModel, - getSortedRowModel, - useReactTable, -} from "@tanstack/react-table-v8" + useTable, +} from "@tanstack/react-table" import { cn } from "@/lib/utils" -import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell" +import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell" import { DATA_GRID_CELL_PAD, DATA_GRID_CELL_PAD_FIRST, DATA_GRID_CELL_PAD_LAST, -} from "@/components/data-grids/shared/legacy-data-grid-layout" -import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header" +} from "@/components/data-grids/shared/data-grid-layout" +import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header" import { EmptyState } from "@/components/empty-state" import { ActivityIcon } from "lucide-react" @@ -69,7 +69,7 @@ interface OspfBfdDataGridProps { } function OspfBfdDataGrid({ sessions }: OspfBfdDataGridProps) { - const columns = useMemo[]>( + const columns = useMemo[]>( () => [ { id: "serverLabel", @@ -267,11 +267,11 @@ function OspfBfdDataGrid({ sessions }: OspfBfdDataGridProps) { [], ) - const table = useReactTable({ + const table = useTable({ + features: dataGridFeatures, + manualPagination: true, data: sessions, columns, - getCoreRowModel: getCoreRowModel(), - getSortedRowModel: getSortedRowModel(), getRowId: (row) => row.id, }) diff --git a/components/data-grids/ospf-neighbors-data-grid.tsx b/components/data-grids/ospf-neighbors-data-grid.tsx index 5b30a51b..30dd5990 100644 --- a/components/data-grids/ospf-neighbors-data-grid.tsx +++ b/components/data-grids/ospf-neighbors-data-grid.tsx @@ -1,20 +1,20 @@ "use client" +import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid" + import { useMemo } from "react" import { type ColumnDef, - getCoreRowModel, - getSortedRowModel, - useReactTable, -} from "@tanstack/react-table-v8" + useTable, +} from "@tanstack/react-table" import { cn } from "@/lib/utils" -import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell" +import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell" import { DATA_GRID_CELL_PAD, DATA_GRID_CELL_PAD_FIRST, DATA_GRID_CELL_PAD_LAST, -} from "@/components/data-grids/shared/legacy-data-grid-layout" -import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header" +} from "@/components/data-grids/shared/data-grid-layout" +import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header" import { EmptyState } from "@/components/empty-state" import { NetworkIcon } from "lucide-react" @@ -53,10 +53,9 @@ function OspfNeighborsDataGrid({ neighbors, highlightRouterId, selectedRouterId, - onHighlight, onSelect, }: OspfNeighborsDataGridProps) { - const columns = useMemo[]>( + const columns = useMemo[]>( () => [ { id: "localLabel", @@ -192,14 +191,14 @@ function OspfNeighborsDataGrid({ const match = neighbors.find( (n) => n.localRouter === selectedRouterId || n.remoteRouter === selectedRouterId, ) - return match ? { [match.id]: true } : {} + return match ? { [match.id]: true as const } : {} }, [neighbors, selectedRouterId]) - const table = useReactTable({ + const table = useTable({ + features: dataGridFeatures, + manualPagination: true, data: neighbors, columns, - getCoreRowModel: getCoreRowModel(), - getSortedRowModel: getSortedRowModel(), getRowId: (row) => row.id, enableRowSelection: true, state: { rowSelection }, diff --git a/components/data-grids/ospf-routes-data-grid.tsx b/components/data-grids/ospf-routes-data-grid.tsx index c9531d6a..8593367b 100644 --- a/components/data-grids/ospf-routes-data-grid.tsx +++ b/components/data-grids/ospf-routes-data-grid.tsx @@ -1,20 +1,20 @@ "use client" +import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid" + import { useMemo } from "react" import { type ColumnDef, - getCoreRowModel, - getSortedRowModel, - useReactTable, -} from "@tanstack/react-table-v8" + useTable, +} from "@tanstack/react-table" import { cn } from "@/lib/utils" -import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell" +import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell" import { DATA_GRID_CELL_PAD, DATA_GRID_CELL_PAD_FIRST, DATA_GRID_CELL_PAD_LAST, -} from "@/components/data-grids/shared/legacy-data-grid-layout" -import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header" +} from "@/components/data-grids/shared/data-grid-layout" +import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header" import { EmptyState } from "@/components/empty-state" import { RouteIcon } from "lucide-react" @@ -42,7 +42,7 @@ interface OspfRoutesDataGridProps { } function OspfRoutesDataGrid({ routes }: OspfRoutesDataGridProps) { - const columns = useMemo[]>( + const columns = useMemo[]>( () => [ { id: "destination", @@ -140,11 +140,11 @@ function OspfRoutesDataGrid({ routes }: OspfRoutesDataGridProps) { [], ) - const table = useReactTable({ + const table = useTable({ + features: dataGridFeatures, + manualPagination: true, data: routes, columns, - getCoreRowModel: getCoreRowModel(), - getSortedRowModel: getSortedRowModel(), getRowId: (row) => row.id, }) diff --git a/docs/ux-ui-progress.md b/docs/ux-ui-progress.md index efcf1e34..ef2fa739 100644 --- a/docs/ux-ui-progress.md +++ b/docs/ux-ui-progress.md @@ -18,7 +18,7 @@ | 1 | Достоверность сохранения, удаления, включения и опроса серверов | Завершён 2026-09-13 | | 2 | Общая оболочка Data Grid/TanStack v9, Filters и эталон серверов | Завершён 2026-09-13, с перечисленными ограничениями приёмки | | 3 | Основные таблицы и справочники | Завершён 2026-09-13, границы проверок ниже | -| 4 | Остальные таблицы, удаление старых API, общая регрессия | Не начат | +| 4 | Остальные таблицы, удаление старых API, общая регрессия | В работе: блок BGP/OSPF перенесён | | 5 | Состояния данных, свежесть, частичные сбои, гонки polling | Не начат | | 6 | Навигация и дашборд | Не начат | | 7 | Серверы и мониторинг: детали, формы, URL-контекст, права | Не начат | @@ -206,6 +206,18 @@ Production build прошёл: `npm run build`, 34 статические стр Следующий шаг: проверить квоту и git status; начать этап 4 в `codex/reui-v9-migration`, переносить оставшихся потребителей ограниченными группами, затем удалить v8/старые Filters и выполнить общую регрессию. Ветку до этой проверки не выпускать. Коммит этапа 3 — только локальный, без push; настройки skills/AGENTS/.codex других работ не включать. +## Этап 4 — блок 1: BGP и OSPF + +Перенесены `bgp-sessions-data-grid`, `ospf-neighbors-data-grid`, `ospf-routes-data-grid`, `ospf-bfd-data-grid`. Использована установленная основа ReUI v9 (`useTable`, `dataGridFeatures`, современная оболочка и заголовки); `manualPagination: true` сохраняет полный список. Стабильные row ID, сортировка, раскрытие BGP и управляемый выбор OSPF сохранены. Убрано неиспользуемое извлечение `onHighlight` из props, сам внешний контракт не менялся. + +Проверки: `npx tsc --noEmit --incremental false` и целевой ESLint успешны. Три сценария `tests/e2e/routing-tables.spec.ts` подтвердили 12 строк во всех четырёх таблицах, числовую сортировку, выбор OSPF-соседа, раскрытие/сворачивание BGP после сортировки и пустые ответы API. Один тест сначала ожидал сокращённый текст пустого BFD; после уточнения селектора прошёл. Это HTTP-моки, не подтверждение реальной работы сетевых протоколов. Общая основа не менялась, повторная полная сборка/регрессия отложены до завершения этапа 4. + +ReUI checklist получен: сохранены композиция, props установленного API, источники данных и оформление. Полная клавиатурная доступность действий строк, мобильная компоновка и сценарии графа остаются профильному этапу 10 и итоговой приёмке; текущие тесты их не подтверждают. + +Квота: на старте использовано 49%, после блока 58% пятичасового окна (общий расход аккаунта). Этап 4 не завершён. BGP и три OSPF-таблицы исключить из списка оставшихся выше; остальные legacy-таблицы и все перечисленные старые Filters ещё остаются. + +Точный следующий шаг: проверить git status и квоту, перенести VPN-группу (`wireguard-data-grid`, `wireguard-peers-grid`, `ipsec-users-grid`, `gre-pools-data-grid`, `gre-tunnels-data-grid`, `vxlan-data-grid`) с профильными проверками. Затем перейти к оставшимся таблицам управления/диагностики и миграции Filters. Старые зависимости удалять только после последнего потребителя. Этот блок сохранить отдельным локальным коммитом без push; ветку не выпускать. + ## Карта миграции (исходная инвентаризация этапа 0) Текущая связка: @tanstack/react-table ^8.21.3, @tanstack/react-virtual ^3.14.4, base-nova. Актуальный ReUI MCP ранее подтвердил useTable/dataGridFeatures для Data Grid и дерево FilterQuery вместо filters/onChange для Filters. Перед установкой перепроверить совместимые версии, сохранить семантику существующих фильтров (простые условия → AND) и закрепить lockfile. diff --git a/tests/e2e/routing-tables.spec.ts b/tests/e2e/routing-tables.spec.ts new file mode 100644 index 00000000..36f6e930 --- /dev/null +++ b/tests/e2e/routing-tables.spec.ts @@ -0,0 +1,74 @@ +import { test, expect, type Page } from "@playwright/test" + +const ids = Array.from({ length: 12 }, (_, i) => i + 1) +const host = { serverId: 1, serverName: "Тестовый роутер", serverSite: "TEST", serverCountry: "RU" } +const ospf = { + instances: [], interfaces: [], + neighbors: ids.map(i => ({ ...host, serverId: i, id: String(i), address: `192.0.2.${i}`, + routerId: `192.0.2.${i}`, instance: "default", area: "0.0.0.0", areaId: "0.0.0.0", + interface: `ether${i}`, state: "Full", uptime: "1h", stateChanges: 0, priority: i })), + routes: ids.map(i => ({ ...host, id: String(i), destination: `10.0.${i}.0/24`, + type: "O", cost: i, nextHop: "192.0.2.1", via: "ether1", area: "0.0.0.0" })), + bfdSessions: ids.map(i => ({ ...host, id: String(i), localAddr: "192.0.2.100", remoteAddr: `192.0.2.${i}`, + interface: `ether${i}`, state: "Up", uptime: "1h", multihop: false, + multiplier: 3, txInterval: 200, rxInterval: 200, holdTime: 600, packetsRx: i, packetsTx: i, stateChanges: 0 })), +} +const bgp = ids.map(i => ({ ...host, id: String(i), name: `Пир ${i}`, peerIp: `192.0.2.${i}`, + remoteAs: 65000 + i, localAs: 64512, localId: "192.0.2.100", remoteId: `192.0.2.${i}`, + state: "Established", type: "eBGP", uptime: "1h", holdTime: 90, keepalive: 30, + prefixesRx: i, prefixesTx: i, inputMessages: i, outputMessages: i, capabilities: ["route-refresh"], lastError: null })) + +async function setup(page: Page, path: string, empty = false) { + await page.route("**/health", route => route.fulfill({ json: { ok: true } })) + await page.route("**/api/**", route => { + const path = new URL(route.request().url()).pathname + const json = path === "/api/ospf/all" ? (empty ? { instances: [], interfaces: [], neighbors: [], routes: [], bfdSessions: [] } : ospf) + : path === "/api/bgp/sessions" ? (empty ? [] : bgp) + : path === "/api/auth/config" ? { required: false } + : path === "/api/servers" ? [] : {} + return route.fulfill({ json }) + }) + await page.goto(path) +} + +test("OSPF: все строки соседей, маршрутов и BFD; выбор и числовая сортировка", async ({ page }) => { + const errors: string[] = [] + page.on("pageerror", e => errors.push(e.message)) + await setup(page, "/ospf") + await page.getByRole("button", { name: "Соседи", exact: true }).click() + const rows = page.locator("tr[data-row-id]") + await expect(rows).toHaveCount(12) + await rows.last().click() + await expect(page.locator('tr[data-row-id="12-12"]')).toHaveAttribute("data-state", "selected") + await page.getByRole("button", { name: "Маршруты", exact: true }).click() + await expect(rows).toHaveCount(12) + await page.getByRole("button", { name: "Cost", exact: true }).click() + await expect(rows.first()).toContainText("10.0.12.0/24") + await page.getByRole("button", { name: "BFD", exact: true }).click() + await expect(rows).toHaveCount(12) + await page.getByRole("button", { name: "Пакеты Rx", exact: true }).click() + await expect(rows.first()).toContainText("192.0.2.12") + expect(errors).toEqual([]) +}) + +test("BGP: 12 сессий, сортировка и раскрытие после сортировки", async ({ page }) => { + await setup(page, "/bgp") + const rows = page.locator("tr[data-row-id]") + await expect(rows).toHaveCount(12) + await page.getByRole("button", { name: "Remote AS", exact: true }).click() + await expect(rows.first()).toContainText("65012") + await rows.first().click() + await expect(page.getByText("route-refresh", { exact: true })).toBeVisible() + await rows.first().click() + await expect(page.getByText("route-refresh", { exact: true })).toBeHidden() +}) + +test("Пустые ответы API показывают пустые состояния BGP и OSPF", async ({ page }) => { + await setup(page, "/bgp", true) + await expect(page.getByText("Нет BGP-сессий", { exact: true })).toBeVisible() + await page.goto("/ospf") + for (const [tab, message] of [["Соседи", "Нет OSPF-соседей"], ["Маршруты", "Нет OSPF-маршрутов"], ["BFD", "BFD-сессий не обнаружено ни на одном сервере"]]) { + await page.getByRole("button", { name: tab, exact: true }).click() + await expect(page.getByText(message, { exact: true })).toBeVisible() + } +})