feat(waf): complete composable rule orchestration

Add the React Flow rule editor, ordered graph APIs and runtime DAG execution.\n\nPublish rules only on OpenResty reload and reconcile checksum-driven IP group snapshots in bounded shared memory.
2026-10-13 18:36:37 +08:00 · 2026-07-13 14:16:55 +08:00
parent d36409fbf9
commit a1a997bcda
72 changed files with 5897 additions and 3080 deletions
@@ -0,0 +1,124 @@
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
+import {act, fireEvent, render, screen, waitFor} from '@testing-library/react';
+import {AxiosError, type AxiosResponse} from 'axios';
+import {beforeEach, expect, it, vi} from 'vitest';
+
+import type {WAFRule, WAFRuleGraph} from '@/lib/services';
+
+import WAFRuleEditorPage from './page';
+
+const {getRule, saveRuleGraph, updateRuleMeta, listIPGroups, toastError} = vi.hoisted(() => ({
+  getRule: vi.fn(),
+  saveRuleGraph: vi.fn(),
+  updateRuleMeta: vi.fn(),
+  listIPGroups: vi.fn().mockResolvedValue([]),
+  toastError: vi.fn(),
+}));
+
+vi.mock('next/navigation', () => ({useRouter: () => ({push: vi.fn()}), useSearchParams: () => new URLSearchParams('id=9')}));
+vi.mock('sonner', () => ({toast: {success: vi.fn(), error: toastError}}));
+vi.mock('@/lib/services', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/lib/services')>();
+  return {...actual, services: {...actual.services, openflareWaf: {getRule, saveRuleGraph, updateRuleMeta, listIPGroups}}};
+});
+vi.mock('./components/rule-flow-canvas', () => ({RuleFlowCanvas: ({graph, focusTarget, onGraphChange}: {graph: WAFRuleGraph; focusTarget?: {kind: string; id: string}; onGraphChange: (graph: WAFRuleGraph) => void}) => <div><button onClick={() => onGraphChange({...graph, nodes: graph.nodes.map((node) => node.id === 'start' ? {...node, position: {x: 10, y: 0}} : node)})}>修改画布</button>{focusTarget && <span>focus:{focusTarget.kind}:{focusTarget.id}</span>}</div>}));
+vi.mock('./components/node-properties', () => ({NodeProperties: () => null}));
+
+const graph: WAFRuleGraph = {schema_version: 1, nodes: [
+  {id: 'start', type: 'start', position: {x: 0, y: 0}, config: {}},
+  {id: 'allow', type: 'allow', position: {x: 200, y: 0}, config: {}},
+], edges: [{id: 'start-allow', source: 'start', source_handle: 'next', target: 'allow'}]};
+const rule = {id: 9, name: '边缘防护', enabled: true, is_global: false, graph, revision: 1, applied_site_ids: [], applied_site_count: 0, created_at: '', updated_at: ''} satisfies WAFRule;
+
+function renderPage() {
+  const client = new QueryClient({defaultOptions: {queries: {retry: false}, mutations: {retry: false}}});
+  return render(<QueryClientProvider client={client}><WAFRuleEditorPage/></QueryClientProvider>);
+}
+
+beforeEach(() => {
+  getRule.mockReset();
+  saveRuleGraph.mockReset();
+  updateRuleMeta.mockReset();
+  listIPGroups.mockClear();
+  toastError.mockReset();
+});
+
+it('renders a query error with a working retry action', async () => {
+  getRule.mockRejectedValueOnce(new Error('offline')).mockResolvedValueOnce(rule);
+  renderPage();
+  fireEvent.click(await screen.findByRole('button', {name: '重新加载'}));
+  expect(await screen.findByRole('heading', {name: '边缘防护'})).toBeInTheDocument();
+  expect(getRule).toHaveBeenCalledTimes(2);
+});
+
+it('exposes conflict reload and maps typed server node errors to canvas focus', async () => {
+  getRule.mockResolvedValue(rule);
+  const conflict = new AxiosError('conflict');
+  conflict.response = {status: 409, data: {}, headers: {}, config: {headers: {}}} as AxiosResponse;
+  saveRuleGraph.mockRejectedValueOnce(conflict).mockRejectedValueOnce(new Error('规则图无效: 节点 start 的 next 出口未连接'));
+  renderPage();
+  await screen.findByRole('heading', {name: '边缘防护'});
+  fireEvent.click(screen.getByRole('button', {name: '修改画布'}));
+  fireEvent.click(screen.getByRole('button', {name: '保存'}));
+  expect(await screen.findByRole('button', {name: '重新加载'})).toBeInTheDocument();
+  fireEvent.click(screen.getByRole('button', {name: '保存'}));
+  await waitFor(() => expect(screen.getByText('focus:node:start')).toBeInTheDocument());
+});
+
+it('optimistically enables a saved valid rule with its current name', async () => {
+  const disabledRule = {...rule, enabled: false};
+  let resolveUpdate: (value: WAFRule) => void = () => undefined;
+  updateRuleMeta.mockImplementation(() => new Promise<WAFRule>((resolve) => {
+    resolveUpdate = resolve;
+  }));
+  getRule.mockResolvedValue(disabledRule);
+
+  renderPage();
+  expect(await screen.findByText('已停用')).toBeInTheDocument();
+  fireEvent.click(screen.getByRole('switch', {name: '启用规则'}));
+
+  await waitFor(() => {
+    expect(updateRuleMeta).toHaveBeenCalledWith(9, {
+      name: '边缘防护',
+      enabled: true,
+    });
+    expect(screen.getByText('已启用')).toBeInTheDocument();
+  });
+
+  await act(async () => resolveUpdate({...disabledRule, enabled: true}));
+});
+
+it('rolls back an optimistic enabled change when metadata update fails', async () => {
+  const disabledRule = {...rule, enabled: false};
+  let rejectUpdate: (reason: Error) => void = () => undefined;
+  updateRuleMeta.mockImplementation(() => new Promise<WAFRule>((_resolve, reject) => {
+    rejectUpdate = reject;
+  }));
+  getRule.mockResolvedValue(disabledRule);
+
+  renderPage();
+  expect(await screen.findByText('已停用')).toBeInTheDocument();
+  fireEvent.click(screen.getByRole('switch', {name: '启用规则'}));
+  await waitFor(() => expect(screen.getByText('已启用')).toBeInTheDocument());
+
+  await act(async () => rejectUpdate(new Error('网络不可用')));
+
+  await waitFor(() => expect(screen.getByText('已停用')).toBeInTheDocument());
+  expect(toastError).toHaveBeenCalledWith('网络不可用');
+});
+
+it('requires graph changes to be saved before changing enabled state', async () => {
+  const disabledRule = {...rule, enabled: false};
+  getRule.mockResolvedValue(disabledRule);
+  saveRuleGraph.mockResolvedValue({...disabledRule, revision: 2});
+
+  renderPage();
+  const enabledSwitch = await screen.findByRole('switch', {name: '启用规则'});
+  expect(enabledSwitch).toBeEnabled();
+
+  fireEvent.click(screen.getByRole('button', {name: '修改画布'}));
+  expect(enabledSwitch).toBeDisabled();
+  fireEvent.click(screen.getByRole('button', {name: '保存'}));
+
+  await waitFor(() => expect(enabledSwitch).toBeEnabled());
+});