diff --git a/app/(main)/traffic/page.tsx b/app/(main)/traffic/page.tsx index 03581c00..e98c1844 100644 --- a/app/(main)/traffic/page.tsx +++ b/app/(main)/traffic/page.tsx @@ -805,7 +805,10 @@ export default function TrafficPage() { const flowClients = useMemo(() => currentFlows?.clients ?? [], [currentFlows]) const [analyticsRetry, setAnalyticsRetry] = useState(0) const [analyticsResult, setAnalyticsResult] = useState<{ key: string; data?: FlowAnalyticsDto; monthly?: FlowMonthlyDto; error?: string } | null>(null) - const [flowIface, setFlowIface] = useState("__all__") + const flowIfaceOwner = JSON.stringify([isLive, backendUrl, groupMode, flowScope, selectedId]) + const [flowIfaceSelection, setFlowIfaceSelection] = useState<{ owner: string; iface: string } | null>(null) + const flowIface = flowIfaceSelection?.owner === flowIfaceOwner ? flowIfaceSelection.iface : "__all__" + const setFlowIface = (iface: string) => setFlowIfaceSelection({ owner: flowIfaceOwner, iface }) const [flowDedup, setFlowDedup] = useState(true) const [flowExcludeMesh, setFlowExcludeMesh] = useState(true) const [flowExcludeOverlay, setFlowExcludeOverlay] = useState(true) @@ -911,10 +914,6 @@ export default function TrafficPage() { return () => { cancelled = true } }, [isLive, effectiveMode, selectedId, range, flowScope, flowIface, flowDedup, flowExcludeMesh, flowExcludeOverlay, backendUrl, analyticsKey]) - useEffect(() => { - setFlowIface("__all__") - }, [selectedId, flowScope]) - useEffect(() => { if (!isLive) return void listServers(backendUrl).then(setCatalogServers).catch(() => setCatalogServers([])) @@ -1264,7 +1263,7 @@ export default function TrafficPage() { key={card.id} card={card} selected={card.id === (selFlowCard?.id ?? selectedId)} - onClick={() => setSelectedId(card.id)} + onClick={() => { setFlowIface("__all__"); setSelectedId(card.id) }} /> ))} {!liveBusy && !liveError && sortedFlowCards.length === 0 ? ( diff --git a/docs/ux-ui-progress.md b/docs/ux-ui-progress.md index b3f79728..874e98d5 100644 --- a/docs/ux-ui-progress.md +++ b/docs/ux-ui-progress.md @@ -29,6 +29,13 @@ | 11Б | Оповещения, сбор данных, интеграции, релизы и настройки | Не начат | | 12 | Итоговая доступность, адаптивность, производительность и регрессия | Не начат | +## Блок 8.4И — интерфейс в контексте flow-сервера (2026-09-24) + +- Выбор flow-интерфейса хранится вместе с контекстом backend, live/mock, раздела, источника и объекта. Чужой интерфейс не используется при первом рендере нового контекста. При выборе карточки фильтр сбрасывается; синхронный сброс через useEffect удалён. +- Страница traffic и изменённый тест теперь проходят lint без замечаний. 18 flow-E2E прошли; новый сценарий задерживает ответ ether1 первого сервера, выбирает второй, проверяет отсутствие iface во всех его запросах и сохранение аналитики после позднего ответа первого. +- diff-check, production build/TypeScript прошли (34 страницы). Использовано 89% пятичасового и 91% недельного лимита; локальный коммит без push. +- Далее: свежесть данных трафика, отдельные проверки смены backend и позднего SSE, общая приёмка этапа 8. Новый тест проверяет REST-смену сервера; backend/SSE этим сценарием не считаются проверенными. Реальный IPFIX/RouterOS не проверен. + ## Блок 8.4З — разрывы общего Sparkline (2026-09-24) - Sparkline принимает null/undefined и исключает нечисловые значения из расчётов, сохраняя исходную позицию каждой точки. Линия и заливка разделены на сегменты, пропуски не соединяются. Одиночная точка (включая ноль) отображается; пустая история имеет доступное имя. Масштаб для валидных значений сохранён. diff --git a/tests/e2e/traffic-flow.spec.ts b/tests/e2e/traffic-flow.spec.ts index 09d8be34..8de6d6d2 100644 --- a/tests/e2e/traffic-flow.spec.ts +++ b/tests/e2e/traffic-flow.spec.ts @@ -1,7 +1,7 @@ import { test, expect, type Page } from '@playwright/test' async function setup(page: Page) { - const control = { hold: '', fail: false, failList: false, invalidSample: undefined as unknown, mergeSample: false, metrics: {} as Record, release: () => {} } + const control = { hold: '', holdIface: '', fail: false, failList: false, invalidSample: undefined as unknown, mergeSample: false, metrics: {} as Record, release: () => {} } const gate = new Promise(resolve => { control.release = resolve }) const card = { id: '1', name: 'Экспортёр тест', subtitle: '', site: 'TEST', country: 'RU', status: 'online', rxNow: 2, txNow: 3, sessions: 1, rxSeries: [1, 2], txSeries: [2, 3], bytes: 200 } const data = { bpsNow: 1000000, bytes: 200, packets: 2, conversations: 1, uniqueSrc: 1, uniqueDst: 1, topProto: 'TCP', rxSeries: [1], txSeries: [2], applications: [], protocols: [], sources: [], destinations: [], interfaces: [], conversationsList: [], ifaces: [], live: false } @@ -10,14 +10,14 @@ async function setup(page: Page) { const url = new URL(route.request().url()), path = url.pathname, range = url.searchParams.get('range') if (path === '/api/traffic/flow/monthly') return route.fulfill({ json: { month: url.searchParams.get('month'), bytes: 1500, countries: [{ id: 'RU', label: 'Россия', bytes: 1500, packets: 1, bps: 0, percent: 100 }], services: [], asns: [] } }) if (path === '/api/traffic/flow/analytics') { - if (control.hold === range) await gate + if (control.hold === range || (control.holdIface && url.searchParams.get('iface') === control.holdIface)) await gate if (control.fail) return route.fulfill({ status: 500, json: { error: 'Срез временно недоступен' } }) - return route.fulfill({ json: { ...data, ...control.metrics, topCategory: 'Категория ' + range } }) + return route.fulfill({ json: { ...data, ...control.metrics, topCategory: url.searchParams.get('serverId') === '2' ? 'Второй сервер' : 'Категория ' + range } }) } if (path === '/api/traffic/flow/live') return route.fulfill({ contentType: 'text/event-stream', body: 'event: sample\ndata: ' + JSON.stringify({ ...data, live: true }) + '\n\n' + (control.invalidSample === undefined ? '' : 'event: sample\ndata: ' + JSON.stringify(control.mergeSample ? { ...data, ...(control.invalidSample as object) } : control.invalidSample) + '\n\n') }) if (path === '/api/traffic/flow/exporters' && control.failList) return route.fulfill({ status: 403, json: { error: 'Нет доступа к экспортёрам' } }) const json = path === '/api/auth/config' ? { required: false } - : path === '/api/traffic/flow/exporters' ? { exporters: [card] } + : path === '/api/traffic/flow/exporters' ? { exporters: [card, { ...card, id: '2', name: 'Экспортёр второй' }] } : path === '/api/traffic/flow/clients' ? { clients: [{ ...card, id: 'client1', name: 'Клиент тест' }] } : path === '/api/traffic/flows' ? { exportersOnline: 1, bytesPerMin: 1, uniqueSrc: 1, uniqueDst: 1, topProto: 'TCP', talkers: [], listenerBound: true } : path === '/api/traffic/servers' ? { servers: [] } @@ -166,3 +166,27 @@ for (const [name, metrics, rate, bytes] of [ if (name === 'нулевые') await expect(card('JH↔EN overlay')).toContainText('0 Б') }) } + + +test('Flow: интерфейс прежнего сервера не передаётся новому; поздний ответ игнорируется', async ({ page }) => { + const control = await setup(page) + control.metrics = { ifaces: [{ name: 'ether1', index: '1', bps: 1 }] } + await page.getByRole('button', { name: '15м', exact: true }).click() + await expect(page.getByRole('button', { name: 'ether1', exact: true })).toBeVisible() + control.holdIface = 'ether1' + const oldRequest = page.waitForRequest(r => r.url().includes('/flow/analytics?') && r.url().includes('iface=ether1')) + await page.getByRole('button', { name: 'ether1', exact: true }).click() + await oldRequest + const requests: URL[] = [] + page.on('request', r => { if (r.url().includes('/flow/analytics?')) requests.push(new URL(r.url())) }) + await page.getByRole('button').filter({ hasText: 'Экспортёр второй' }).click() + await expect(page.getByText('Второй сервер', { exact: true }).filter({ visible: true })).toBeVisible() + const newRequests = requests.filter(url => url.searchParams.get('serverId') === '2') + expect(newRequests.length).toBeGreaterThan(0) + expect(newRequests.every(url => !url.searchParams.has('iface'))).toBe(true) + const late = page.waitForResponse(r => r.url().includes('/flow/analytics?') && r.url().includes('iface=ether1')) + control.release() + await late + await expect(page.getByText('Второй сервер', { exact: true }).filter({ visible: true })).toBeVisible() + await expect(page.getByText('Категория 15m', { exact: true })).toHaveCount(0) +})