fix(ui): изолировать операции GRE и готовность устройств

tests/e2e/gre-context.spec.ts

@@ -0,0 +1,81 @@
+import { test, expect, type Page } from "@playwright/test"
+const headers = { "access-control-allow-origin": "*", "access-control-allow-methods": "GET,POST,PUT,PATCH,DELETE,OPTIONS", "access-control-allow-headers": "Content-Type,Authorization" }
+const payload = (port: string) => ({ tunnels: [{ id: "*old", serverId: "1", name: port === "8101" ? "Новый источник" : "Старый источник", localAddress: "192.0.2.1", remoteAddress: "192.0.2.2", localInnerIp: "10.0.0.1/30", remoteInnerIp: "10.0.0.2/30", poolId: "live", ipsec: null, mtu: 1476, keepaliveInterval: 10, keepaliveRetries: 3, dscp: "inherit", clampTcpMss: true, allowFastPath: true, comment: "", enabled: true, status: "up" }] })
+async function setup(page: Page) {
+  let oldReads = 0
+  await page.route("**/health", r => r.fulfill({ headers, json: { ok: true } }))
+  await page.route("**/api/**", r => {
+    const url = new URL(r.request().url()), path = url.pathname
+    if (r.request().method() === "OPTIONS") return r.fulfill({ status: 204, headers })
+    if (path === "/api/gre/tunnels" && url.port === "8000") oldReads++
+    return r.fulfill({ headers, json: path === "/api/gre/tunnels" ? payload(url.port) : path === "/api/servers" ? [{ id: 1, name: "Роутер", host: "192.0.2.1", enabled: true, country: "RU" }] : path === "/api/auth/config" ? { required: false } : {} })
+  })
+  await page.goto("/settings")
+  await page.getByRole("link", { name: /^GRE/ }).click()
+  await expect(page.locator("tr[data-row-id]")).toContainText("Старый источник")
+  return () => oldReads
+}
+async function change(page: Page, kind: string) {
+  await page.goBack()
+  await expect(page).toHaveURL(/settings/)
+  if (kind === "backend") {
+    const input = page.getByPlaceholder("http://localhost:8000")
+    await input.fill("http://localhost:8101")
+    await input.press("Enter")
+  } else await page.getByRole("button", { name: "Моковые", exact: true }).click()
+  await page.getByRole("link", { name: /^GRE/ }).click()
+  if (kind === "backend") await expect(page.locator("tr[data-row-id]")).toContainText("Новый источник")
+  else await expect(page.locator('tr[data-row-id]').filter({ hasText: 'Старый источник' })).toHaveCount(0)
+}
+async function flush(page: Page) {
+  await page.evaluate(() => new Promise<void>(resolve => requestAnimationFrame(() => requestAnimationFrame(() => resolve()))))
+}
+for (const fails of [false, true]) {
+  test(`GRE: позднее чтение старого backend ${fails}`, async ({ page }) => {
+    await setup(page)
+    let release: (() => void) | undefined, started = false
+    const gate = new Promise<void>(resolve => { release = resolve })
+    await page.route("**/api/gre/tunnels", async r => {
+      if (new URL(r.request().url()).port !== "8000") return r.fallback()
+      started = true
+      await gate
+      return r.fulfill(fails ? { headers, status: 503, json: { error: "Старая ошибка чтения" } } : { headers, json: { tunnels: [] } })
+    })
+    await page.getByRole("button", { name: "Обновить", exact: true }).click()
+    await expect.poll(() => started).toBe(true)
+    await change(page, "backend")
+    const response = page.waitForResponse(r => r.url().includes(":8000/api/gre/tunnels"))
+    release!()
+    await (await response).finished()
+    await flush(page)
+    await expect(page.locator("tr[data-row-id]")).toContainText("Новый источник")
+    await expect(page.getByRole("alert").filter({ hasText: "Не удалось загрузить GRE" })).toHaveCount(0)
+  })
+}
+for (const kind of ["backend", "mode"]) for (const fails of [false, true]) {
+  test(`GRE: позднее удаление после смены ${kind}/${fails}`, async ({ page }) => {
+    const reads = await setup(page)
+    let release: (() => void) | undefined, started = false
+    const gate = new Promise<void>(resolve => { release = resolve })
+    await page.route("**/api/gre/tunnels", async r => {
+      if (r.request().method() !== "DELETE") return r.fallback()
+      started = true
+      await gate
+      return r.fulfill(fails ? { headers, status: 403, json: { error: "Старое удаление запрещено" } } : { headers, json: { ok: true } })
+    })
+    await page.getByRole("button", { name: "Действия: Старый источник", exact: true }).click()
+    await page.getByRole("menuitem", { name: "Удалить туннель", exact: true }).click()
+    await page.getByRole("alertdialog").getByRole("button", { name: "Удалить", exact: true }).click()
+    await expect.poll(() => started).toBe(true)
+    const before = reads()
+    await change(page, kind)
+    const response = page.waitForResponse(r => r.url().includes(":8000/api/gre/tunnels") && r.request().method() === "DELETE")
+    release!()
+    await (await response).finished()
+    await flush(page)
+    expect(reads()).toBe(before)
+    await expect(page.getByText("Удалён Старый источник", { exact: true })).toHaveCount(0)
+    await expect(page.getByRole("alertdialog")).toHaveCount(0)
+    if (kind === "backend") await expect(page.getByRole("button", { name: "Добавить туннель", exact: true })).toBeEnabled()
+  })
+}

tests/e2e/gre-readiness.spec.ts

@@ -0,0 +1,70 @@
+import { test, expect } from "@playwright/test"
+const tunnel = (id: string) => ({ id: "*1", serverId: id, name: "GRE " + id, localAddress: "192.0.2.1", remoteAddress: "192.0.2.2", localInnerIp: "10.0.0.1/30", remoteInnerIp: "10.0.0.2/30", poolId: "live", ipsec: null, mtu: 1476, keepaliveInterval: 10, keepaliveRetries: 3, dscp: "inherit", clampTcpMss: true, allowFastPath: true, comment: "", enabled: true, status: "up" })
+
+test("GRE: readiness отказавшего и выключенного устройства", async ({ page }) => {
+  let phase = 0, writes = 0
+  await page.route("**/health", r => r.fulfill({ json: { ok: true } }))
+  await page.route("**/api/**", r => {
+    if (!["GET", "HEAD"].includes(r.request().method())) writes++
+    const path = new URL(r.request().url()).pathname
+    return r.fulfill({ json: path === "/api/servers" ? [1, 2, 3].map(id => ({ id, name: "Роутер " + id, host: "192.0.2." + id, enabled: id !== 3, country: "RU" })) : path === "/api/gre/tunnels" ? phase === 0 ? { tunnels: [tunnel("1"), tunnel("2"), tunnel("3")] } : { tunnels: [tunnel("1"), tunnel("3")], failures: [{ serverId: "2", error: "Таймаут тест" }] } : path === "/api/auth/config" ? { required: false } : {} })
+  })
+  await page.goto("/gre")
+  await expect(page.locator("tr[data-row-id]")).toHaveCount(3)
+  phase = 1
+  await page.getByRole("button", { name: "Обновить", exact: true }).click()
+  await expect(page.getByRole("alert").filter({ hasText: "Таймаут тест" })).toBeVisible()
+  for (const id of ["2", "3", "1"]) {
+    await page.getByRole("button", { name: "Действия: GRE " + id, exact: true }).click()
+    const menu = page.getByRole("menu", { name: "Действия: GRE " + id })
+    const edit = menu.getByRole("menuitem", { name: "Редактировать", exact: true })
+    if (id === "1") await expect(edit).toBeEnabled()
+    else await expect(edit).toBeDisabled()
+    await page.keyboard.press("Escape")
+    await expect(menu).toHaveCount(0)
+  }
+  await page.getByRole("button", { name: "Добавить туннель", exact: true }).click()
+  const selector = page.getByRole("dialog").getByLabel("Сервер (MikroTik)")
+  await expect(selector.locator('option[value="1"]')).toBeEnabled()
+  await expect(selector.locator('option[value="2"]')).toBeDisabled()
+  await expect(selector.locator('option[value="3"]')).toBeDisabled()
+  expect(writes).toBe(0)
+})
+
+test("GRE: общий замок до опроса после подтверждённого удаления", async ({ page }) => {
+  let reads = 0, writes = 0, release: (() => void) | undefined, phase = 0
+  const gate = new Promise<void>(resolve => { release = resolve })
+  await page.route("**/health", r => r.fulfill({ json: { ok: true } }))
+  await page.route("**/api/**", async r => {
+    const path = new URL(r.request().url()).pathname
+    if (r.request().method() === "DELETE") { writes++; await gate; phase = 1; return r.fulfill({ json: { ok: true } }) }
+    if (path === "/api/gre/tunnels") {
+      reads++
+      return phase === 1 ? r.fulfill({ status: 503, json: { error: "Опрос после удаления недоступен" } }) : r.fulfill({ json: { tunnels: phase === 2 ? [] : [tunnel("1")] } })
+    }
+    return r.fulfill({ json: path === "/api/servers" ? [{ id: 1, name: "Роутер", host: "192.0.2.1", enabled: true, country: "RU" }] : path === "/api/auth/config" ? { required: false } : {} })
+  })
+  await page.goto("/gre")
+  await page.getByRole("button", { name: "Действия: GRE 1" }).click()
+  await page.getByRole("menuitem", { name: "Удалить туннель", exact: true }).click()
+  const dialog = page.getByRole("alertdialog")
+  const submit = dialog.getByRole("button", { name: "Удалить", exact: true })
+  await submit.evaluate(el => { (el as HTMLButtonElement).click(); (el as HTMLButtonElement).click() })
+  await expect.poll(() => writes).toBe(1)
+  const before = reads
+  const refresh = page.getByRole("button", { name: "Обновить", exact: true, includeHidden: true })
+  await expect(refresh).toBeDisabled()
+  await refresh.evaluate(el => (el as HTMLButtonElement).click())
+  expect(reads).toBe(before)
+  release!()
+  await expect(dialog).toHaveCount(0)
+  await expect(page.getByRole("alert").filter({ hasText: "Не удалось загрузить GRE" })).toContainText("Опрос после удаления недоступен")
+  await expect(page.locator("tr[data-row-id]")).toHaveCount(1)
+  await page.getByRole("button", { name: "Действия: GRE 1" }).click()
+  await expect(page.getByRole("menuitem", { name: "Удалить туннель", exact: true })).toBeDisabled()
+  await page.keyboard.press("Escape")
+  phase = 2
+  await page.getByRole("button", { name: "Повторить загрузку GRE" }).click()
+  await expect(page.locator("tr[data-row-id]")).toHaveCount(0)
+  expect(writes).toBe(1)
+})