fix(ui): перенести таблицу VXLAN на ReUI v9
This commit is contained in:
1 parent
e7d45d194d
commit
8b9b584513
3 files changed
+54
-12
No files matched your search
@@ -1,12 +1,11 @@
|
|||||||
"use client"
|
"use client"
|
||||||
|
|
||||||
import { useMemo } from "react"
|
import { useMemo } from "react"
|
||||||
|
import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
|
||||||
import {
|
import {
|
||||||
type ColumnDef,
|
type ColumnDef,
|
||||||
getCoreRowModel,
|
useTable,
|
||||||
getSortedRowModel,
|
} from "@tanstack/react-table"
|
||||||
useReactTable,
|
|
||||||
} from "@tanstack/react-table-v8"
|
|
||||||
import type { Server, VxlanTunnel } from "@/lib/data"
|
import type { Server, VxlanTunnel } from "@/lib/data"
|
||||||
import { Flag } from "@/components/flag"
|
import { Flag } from "@/components/flag"
|
||||||
import { cn } from "@/lib/utils"
|
import { cn } from "@/lib/utils"
|
||||||
@@ -18,13 +17,13 @@ import {
|
|||||||
DropdownMenuSeparator,
|
DropdownMenuSeparator,
|
||||||
DropdownMenuTrigger,
|
DropdownMenuTrigger,
|
||||||
} from "@/components/ui/dropdown-menu"
|
} from "@/components/ui/dropdown-menu"
|
||||||
import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
|
import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
|
||||||
import {
|
import {
|
||||||
DATA_GRID_CELL_PAD,
|
DATA_GRID_CELL_PAD,
|
||||||
DATA_GRID_CELL_PAD_FIRST,
|
DATA_GRID_CELL_PAD_FIRST,
|
||||||
DATA_GRID_CELL_PAD_LAST,
|
DATA_GRID_CELL_PAD_LAST,
|
||||||
} from "@/components/data-grids/shared/legacy-data-grid-layout"
|
} from "@/components/data-grids/shared/data-grid-layout"
|
||||||
import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
|
import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
|
||||||
import { EmptyState } from "@/components/empty-state"
|
import { EmptyState } from "@/components/empty-state"
|
||||||
import {
|
import {
|
||||||
CodeXmlIcon,
|
CodeXmlIcon,
|
||||||
@@ -47,7 +46,7 @@ function VxlanDataGrid({ tunnels, servers, onExport }: VxlanDataGridProps) {
|
|||||||
[servers],
|
[servers],
|
||||||
)
|
)
|
||||||
|
|
||||||
const columns = useMemo<ColumnDef<VxlanTunnel>[]>(
|
const columns = useMemo<ColumnDef<DataGridFeatures, VxlanTunnel>[]>(
|
||||||
() => [
|
() => [
|
||||||
{
|
{
|
||||||
id: "name",
|
id: "name",
|
||||||
@@ -255,11 +254,11 @@ function VxlanDataGrid({ tunnels, servers, onExport }: VxlanDataGridProps) {
|
|||||||
[onExport, serverMap],
|
[onExport, serverMap],
|
||||||
)
|
)
|
||||||
|
|
||||||
const table = useReactTable({
|
const table = useTable({
|
||||||
|
features: dataGridFeatures,
|
||||||
|
manualPagination: true,
|
||||||
data: tunnels,
|
data: tunnels,
|
||||||
columns,
|
columns,
|
||||||
getCoreRowModel: getCoreRowModel(),
|
|
||||||
getSortedRowModel: getSortedRowModel(),
|
|
||||||
getRowId: (row) => row.id,
|
getRowId: (row) => row.id,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
| 1 | Достоверность сохранения, удаления, включения и опроса серверов | Завершён 2026-09-13 |
|
| 1 | Достоверность сохранения, удаления, включения и опроса серверов | Завершён 2026-09-13 |
|
||||||
| 2 | Общая оболочка Data Grid/TanStack v9, Filters и эталон серверов | Завершён 2026-09-13, с перечисленными ограничениями приёмки |
|
| 2 | Общая оболочка Data Grid/TanStack v9, Filters и эталон серверов | Завершён 2026-09-13, с перечисленными ограничениями приёмки |
|
||||||
| 3 | Основные таблицы и справочники | Завершён 2026-09-13, границы проверок ниже |
|
| 3 | Основные таблицы и справочники | Завершён 2026-09-13, границы проверок ниже |
|
||||||
| 4 | Остальные таблицы, удаление старых API, общая регрессия | В работе: BGP/OSPF и WireGuard перенесены |
|
| 4 | Остальные таблицы, удаление старых API, общая регрессия | В работе: BGP/OSPF, WireGuard и VXLAN перенесены |
|
||||||
| 5 | Состояния данных, свежесть, частичные сбои, гонки polling | Не начат |
|
| 5 | Состояния данных, свежесть, частичные сбои, гонки polling | Не начат |
|
||||||
| 6 | Навигация и дашборд | Не начат |
|
| 6 | Навигация и дашборд | Не начат |
|
||||||
| 7 | Серверы и мониторинг: детали, формы, URL-контекст, права | Не начат |
|
| 7 | Серверы и мониторинг: детали, формы, URL-контекст, права | Не начат |
|
||||||
@@ -228,6 +228,14 @@ ReUI checklist получен: сохранены композиция, props у
|
|||||||
|
|
||||||
Следующий шаг после проверки квоты: перенести оставшиеся четыре VPN-таблицы `ipsec-users-grid`, `gre-pools-data-grid`, `gre-tunnels-data-grid`, `vxlan-data-grid`. WireGuard, BGP и три OSPF-таблицы уже исключены из остатка. Остальные таблицы управления/диагностики и старые Filters ещё не перенесены; этап 4 не завершён, ветку не выпускать. Блок WireGuard сохранить локальным коммитом без push.
|
Следующий шаг после проверки квоты: перенести оставшиеся четыре VPN-таблицы `ipsec-users-grid`, `gre-pools-data-grid`, `gre-tunnels-data-grid`, `vxlan-data-grid`. WireGuard, BGP и три OSPF-таблицы уже исключены из остатка. Остальные таблицы управления/диагностики и старые Filters ещё не перенесены; этап 4 не завершён, ветку не выпускать. Блок WireGuard сохранить локальным коммитом без push.
|
||||||
|
|
||||||
|
## Этап 4 — блок 3: VXLAN
|
||||||
|
|
||||||
|
По явному поручению пользователя продолжить ниже резервного порога выполнен один небольшой блок: `vxlan-data-grid` перенесён на установленную ReUI v9-оболочку. Использованы `useTable`, `dataGridFeatures`, типы v9 и `manualPagination: true`; сохранены идентификаторы, сортировка и обработчик экспорта. Общая основа не менялась.
|
||||||
|
|
||||||
|
TypeScript (`--incremental false`), целевой ESLint и браузерный сценарий `tests/e2e/vxlan-table.spec.ts` прошли. Проверены 12 строк, числовая сортировка VNI, открытие экспорта выбранного туннеля после сортировки, поиск, пустой результат и сброс. Использованы типизированные HTTP-моки; скачивание файла, применение RouterOS и существующие пункты редактирования/включения/удаления этим тестом не проверены. По ранее полученному ReUI checklist сохранены композиция, публичный API и оформление; профильная доступность и адаптивность остаются этапу 9. Полная регрессия остаётся завершению этапа 4.
|
||||||
|
|
||||||
|
После проверок осталось 8% пятичасового лимита (общая квота аккаунта). Блок сохранить локальным коммитом без push. Следующий шаг после сброса: `ipsec-users-grid`, `gre-pools-data-grid`, `gre-tunnels-data-grid`; затем оставшиеся таблицы управления/диагностики и старые Filters. VXLAN исключить из предыдущего списка остатка. Этап 4 не завершён, ветку не выпускать.
|
||||||
|
|
||||||
## Карта миграции (исходная инвентаризация этапа 0)
|
## Карта миграции (исходная инвентаризация этапа 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.
|
Текущая связка: @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.
|
||||||
|
|||||||
@@ -0,0 +1,35 @@
|
|||||||
|
import { test, expect } from "@playwright/test"
|
||||||
|
import type { VxlanTunnel } from "../../lib/data"
|
||||||
|
|
||||||
|
test("VXLAN: все строки, числовая сортировка, экспорт выбранной строки и поиск", async ({ page }) => {
|
||||||
|
const tunnels: VxlanTunnel[] = Array.from({ length: 12 }, (_, i) => ({
|
||||||
|
id: String(i + 1), name: `vxlan-test-${i + 1}`, vni: i + 1, port: 0, dstPort: 8472,
|
||||||
|
serverId: "1", vtepIp: "192.0.2.1", remoteVteps: [`192.0.2.${i + 2}`], l2mtu: 1500,
|
||||||
|
arpProxy: false, macLearning: true, comment: "Тест", enabled: true, status: "up",
|
||||||
|
}))
|
||||||
|
const errors: string[] = []
|
||||||
|
page.on("pageerror", e => errors.push(e.message))
|
||||||
|
await page.route("**/health", route => route.fulfill({ json: { ok: true } }))
|
||||||
|
await page.route("**/api/**", route => {
|
||||||
|
const path = new URL(route.request().url()).pathname
|
||||||
|
return route.fulfill({ json: path === "/api/vxlan" ? { tunnels }
|
||||||
|
: path === "/api/auth/config" ? { required: false } : path === "/api/servers" ? [] : {} })
|
||||||
|
})
|
||||||
|
await page.goto("/vxlan")
|
||||||
|
const rows = page.locator("tr[data-row-id]")
|
||||||
|
await expect(rows).toHaveCount(12)
|
||||||
|
await page.getByRole("button", { name: "VNI", exact: true }).click()
|
||||||
|
await expect(rows.first()).toContainText("vxlan-test-12")
|
||||||
|
await page.getByRole("button", { name: "Действия: vxlan-test-12", exact: true }).click()
|
||||||
|
await page.getByRole("menuitem", { name: "Экспорт .rsc", exact: true }).click()
|
||||||
|
await expect(page.getByRole("dialog")).toContainText("vxlan-test-12")
|
||||||
|
await page.keyboard.press("Escape")
|
||||||
|
await page.getByPlaceholder("Поиск по имени, VNI, серверу…").fill("vxlan-test-12")
|
||||||
|
await expect(rows).toHaveCount(1)
|
||||||
|
await expect(rows.first()).toContainText("vxlan-test-12")
|
||||||
|
await page.getByPlaceholder("Поиск по имени, VNI, серверу…").fill("нет-совпадений")
|
||||||
|
await expect(page.getByText("Нет VXLAN-туннелей", { exact: true })).toBeVisible()
|
||||||
|
await page.getByPlaceholder("Поиск по имени, VNI, серверу…").fill("")
|
||||||
|
await expect(rows).toHaveCount(12)
|
||||||
|
expect(errors).toEqual([])
|
||||||
|
})
|
||||||
Reference in new issue
Block a user