Netpulse_SasS/web/index.html
zotac 3de5643b98 Етап 4: фронтенд — мапа мережі в браузері
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>
2026-08-14 16:28:37 +03:00

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>