Enhance UI with latest-scan and inline diff tools.

Add automatic latest scan selection and two-scan diff viewer in web UI, then reflect completion in technical specification checklist. Made-with: Cursor
2026-04-09 22:08:55 +10:00
parent f1545b2afd
commit 975a45ffd6
3 changed files with 73 additions and 1 deletions
@@ -15,24 +15,37 @@
  </head>
  <body>
    <h2>NetTopo: просмотр топологии</h2>
-    <div class="hint">Введите `scan_id`, нажмите "Загрузить", и страница покажет граф nodes/edges.</div>
+    <div class="hint">Можно выбрать последний scan автоматически или сравнить два скана через встроенный diff.</div>
    <div class="row">
      <input id="scanId" placeholder="scan_id" style="min-width: 380px;" />
      <button id="loadBtn">Загрузить</button>
+      <button id="latestBtn">Последний scan</button>
      <button id="fitBtn">По центру</button>
    </div>
+    <div class="row">
+      <input id="fromScanId" placeholder="from scan_id" style="min-width: 280px;" />
+      <input id="toScanId" placeholder="to scan_id" style="min-width: 280px;" />
+      <button id="diffBtn">Сравнить</button>
+    </div>
    <div id="status">Ожидание данных...</div>
+    <pre id="diffBox" style="background:#f8fafc;border:1px solid #e5e7eb;border-radius:8px;padding:10px;white-space:pre-wrap;"></pre>
    <svg id="canvas" viewBox="0 0 1200 620"></svg>

    <script>
      const scanIdInput = document.getElementById("scanId");
+      const fromScanIdInput = document.getElementById("fromScanId");
+      const toScanIdInput = document.getElementById("toScanId");
      const loadBtn = document.getElementById("loadBtn");
+      const latestBtn = document.getElementById("latestBtn");
+      const diffBtn = document.getElementById("diffBtn");
      const fitBtn = document.getElementById("fitBtn");
      const statusEl = document.getElementById("status");
+      const diffBox = document.getElementById("diffBox");
      const svg = document.getElementById("canvas");
      const NS = "http://www.w3.org/2000/svg";

      function setStatus(text) { statusEl.textContent = text; }
+      function setDiff(text) { diffBox.textContent = text; }

      function clearSVG() {
        while (svg.firstChild) svg.removeChild(svg.firstChild);
@@ -116,10 +129,62 @@
        }
      }

+      async function loadLatestScan() {
+        setStatus("Ищу последний scan...");
+        try {
+          const res = await fetch("/api/scans?limit=1");
+          if (!res.ok) {
+            setStatus(`Ошибка ${res.status} при получении scan list`);
+            return;
+          }
+          const data = await res.json();
+          const latest = data.items && data.items[0];
+          if (!latest || !latest.id) {
+            setStatus("Сканы не найдены");
+            return;
+          }
+          scanIdInput.value = latest.id;
+          toScanIdInput.value = latest.id;
+          setStatus(`Найден последний scan: ${latest.id}`);
+          await loadTopology();
+        } catch (e) {
+          setStatus(`Ошибка загрузки последнего scan: ${e.message}`);
+        }
+      }
+
+      async function loadDiff() {
+        const fromId = fromScanIdInput.value.trim();
+        const toId = toScanIdInput.value.trim();
+        if (!fromId || !toId) {
+          setStatus("Введите from и to scan_id");
+          return;
+        }
+        setStatus("Сравниваю сканы...");
+        try {
+          const url = `/api/scans/diff?from=${encodeURIComponent(fromId)}&to=${encodeURIComponent(toId)}`;
+          const res = await fetch(url);
+          if (!res.ok) {
+            const t = await res.text();
+            setStatus(`Ошибка ${res.status}: ${t}`);
+            return;
+          }
+          const d = await res.json();
+          setDiff(JSON.stringify(d, null, 2));
+          setStatus(
+            `Diff готов: +hosts ${d.new_hosts?.length || 0}, -hosts ${d.missing_hosts?.length || 0}, +links ${d.new_links?.length || 0}, -links ${d.missing_links?.length || 0}`
+          );
+        } catch (e) {
+          setStatus(`Ошибка diff: ${e.message}`);
+        }
+      }
+
      loadBtn.addEventListener("click", loadTopology);
+      latestBtn.addEventListener("click", loadLatestScan);
+      diffBtn.addEventListener("click", loadDiff);
      fitBtn.addEventListener("click", () => {
        svg.setAttribute("viewBox", "0 0 1200 620");
      });
+      setDiff("Diff будет показан здесь...");
    </script>
  </body>
 </html>