React Flow поверх наявного API: вузли фарбуються статусом, ребра кольором із порогів, точка на ребрі біжить зі швидкістю, оберненою до завантаження каналу. WebSocket дає живі статуси й util, реконект повертає підписку сам. Робота з живим UI знайшла дві вади: 1. Ревізія мапи росла від самих кліків — React Flow віддає onNodeDragStop на будь-яке натискання, і кожен клік писав порожню ревізію, змушуючи інші відкриті полотна перечитуватись. 2. Після збереження хук оновлював лише номер ревізії, тож наступна подія device.status відкидала щойно перетягнутий вузол назад. Перевірено в браузері проти повного стека зі справжнім snmpd: два зелені вузли з живим RTT, ребро eth0 з util і capacity 10 Гбіт/с, індикатор "наживо", кнопка автопобудови з topo.links. Драг через автоматизацію відтворити не вдалося — синтетичні події не запускають d3-drag; цей шлях покритий тестами сервера. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
12 lines
295 B
HTML
12 lines
295 B
HTML
<!doctype html>
|
|
<html lang="uk">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>NetPulse</title>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html>
|