UI: click device row to show links table and LLDP text table.

Made-with: Cursor
2026-04-10 13:13:30 +10:00
parent 0f32e0004f
commit 7e79072619
1 changed files with 152 additions and 5 deletions
@@ -21,6 +21,11 @@
      #edgeListPanel { margin-top: 12px; font-size: 13px; }
      #edgeListPanel summary { cursor: pointer; color: #334155; font-weight: 600; }
      #edgeListPre { max-height: 200px; overflow: auto; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px; margin-top: 6px; white-space: pre-wrap; word-break: break-all; }
+      tr.device-row { cursor: pointer; }
+      tr.device-row:hover { background: #f1f5f9; }
+      tr.device-row.selected { background: #dbeafe; box-shadow: inset 0.15em 0 0 #2563eb; }
+      .device-detail-table th, .device-detail-table td { border-bottom: 1px solid #e5e7eb; padding: 6px 8px; font-size: 13px; }
+      .subtable-wrap { overflow: auto; max-height: 200px; margin-top: 6px; border: 1px solid #e5e7eb; border-radius: 8px; }
    </style>
  </head>
  <body>
@@ -55,7 +60,7 @@
    <div class="panel">
      <div class="row" style="margin-bottom: 6px;">
        <strong>Найденные устройства</strong>
-        <span class="hint" style="margin:0;">отвечают на ping; имя — из SNMP при успехе. Связи между устройствами — в графе («Загрузить»).</span>
+        <span class="hint" style="margin:0;">отвечают на ping; клик по строке — связи этого устройства в таблицах ниже. Граф — «Загрузить».</span>
        <button type="button" id="refreshDevicesBtn">Обновить список</button>
      </div>
      <div style="overflow:auto; max-height: 240px; border: 1px solid #e5e7eb; border-radius: 8px;">
@@ -75,6 +80,49 @@
      </div>
    </div>

+    <div class="panel" id="deviceDetailPanel">
+      <strong>Связи выбранного устройства: <span id="selectedDeviceLabel">—</span></strong>
+      <p class="hint" style="margin:6px 0 10px;">Кликните по строке в таблице «Найденные устройства». Первая таблица — связи с попыткой сопоставить IP соседа (данные /links); вторая — каждая запись LLDP одной текстовой строкой.</p>
+
+      <div style="margin-bottom: 14px;">
+        <div style="font-weight:600; margin-bottom:4px; color:#334155;">Таблица 1. Связи (порты, сосед, IP если найден)</div>
+        <div class="subtable-wrap">
+          <table class="device-detail-table" id="deviceLinksTable" style="width:100%; border-collapse:collapse;">
+            <thead>
+              <tr style="background:#f1f5f9;">
+                <th style="text-align:left;">Локальный порт</th>
+                <th style="text-align:left;">Имя соседа (sysName)</th>
+                <th style="text-align:left;">IP соседа</th>
+                <th style="text-align:left;">Порт соседа</th>
+                <th style="text-align:left;">Chassis ID</th>
+                <th style="text-align:left;">Сопоставление</th>
+              </tr>
+            </thead>
+            <tbody id="deviceLinksTableBody">
+              <tr><td colspan="6" style="padding:10px;color:#64748b;">Выберите устройство выше.</td></tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div>
+        <div style="font-weight:600; margin-bottom:4px; color:#334155;">Таблица 2. LLDP текстом (по одной строке на запись MIB)</div>
+        <div class="subtable-wrap">
+          <table class="device-detail-table" id="deviceLldpTextTable" style="width:100%; border-collapse:collapse;">
+            <thead>
+              <tr style="background:#f1f5f9;">
+                <th style="text-align:left; width:2.5rem;">№</th>
+                <th style="text-align:left;">Текст LLDP</th>
+              </tr>
+            </thead>
+            <tbody id="deviceLldpTextTableBody">
+              <tr><td colspan="2" style="padding:10px;color:#64748b;">Выберите устройство выше.</td></tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
    <div style="margin: 6px 0 10px 0; font-size: 13px;">
      Легенда:
      <span style="display:inline-block;margin-left:8px;color:#2563eb;">● синий - обычный узел</span>
@@ -128,6 +176,7 @@
      /** @type {{ip:string,ping:string,name:string,snmp:string}[]} */
      let deviceRowsCache = [];
      let deviceSort = { key: "ip", dir: 1 };
+      let selectedDeviceIP = null;
      let lastGraphViewBox = "0 0 1200 620";

      const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
@@ -237,13 +286,108 @@
        }
        const sorted = [...deviceRowsCache].sort((a, b) => deviceSort.dir * compareRows(a, b, deviceSort.key));
        deviceTableBody.innerHTML = sorted
-          .map(
-            (r) =>
-              `<tr><td>${escapeHtml(r.ip)}</td><td>${escapeHtml(r.ping)}</td><td>${escapeHtml(r.name)}</td><td>${escapeHtml(r.snmp)}</td></tr>`
-          )
+          .map((r) => {
+            const dip = escapeHtml(r.ip);
+            return `<tr class="device-row" data-ip="${dip}" title="Показать связи этого устройства"><td>${dip}</td><td>${escapeHtml(r.ping)}</td><td>${escapeHtml(r.name)}</td><td>${escapeHtml(r.snmp)}</td></tr>`;
+          })
          .join("");
+        deviceTableBody.querySelectorAll("tr.device-row").forEach((tr) => {
+          if (tr.getAttribute("data-ip") === selectedDeviceIP) tr.classList.add("selected");
+        });
      }

+      const deviceLinksTableBody = document.getElementById("deviceLinksTableBody");
+      const deviceLldpTextTableBody = document.getElementById("deviceLldpTextTableBody");
+      const selectedDeviceLabel = document.getElementById("selectedDeviceLabel");
+
+      function clearDeviceDetailPanel() {
+        selectedDeviceIP = null;
+        selectedDeviceLabel.textContent = "—";
+        deviceLinksTableBody.innerHTML =
+          '<tr><td colspan="6" style="padding:10px;color:#64748b;">Выберите устройство в таблице выше.</td></tr>';
+        deviceLldpTextTableBody.innerHTML =
+          '<tr><td colspan="2" style="padding:10px;color:#64748b;">Выберите устройство в таблице выше.</td></tr>';
+      }
+
+      function resolvedLabelRu(resolvedBy) {
+        if (resolvedBy === "remote_sys_name") return "по sysName → IP в скане";
+        if (resolvedBy === "unresolved") return "IP не найден среди просканированных";
+        return resolvedBy || "—";
+      }
+
+      function formatLldpTextLine(item) {
+        const chunks = [];
+        chunks.push(`Источник ${item.ip}`);
+        if (item.local_port_num) chunks.push(`локальный порт: ${item.local_port_num}`);
+        if (item.remote_sys_name) chunks.push(`удалённый sysName: ${item.remote_sys_name}`);
+        if (item.remote_port_id) chunks.push(`удалённый порт ID: ${item.remote_port_id}`);
+        if (item.remote_chassis_id) chunks.push(`удалённый chassis ID: ${item.remote_chassis_id}`);
+        return chunks.join(". ") + ".";
+      }
+
+      async function selectDeviceAndLoadLinks(ip) {
+        const scanId = scanIdInput.value.trim();
+        if (!scanId) {
+          setStatus("Укажите scan_id, чтобы загрузить связи.");
+          return;
+        }
+        selectedDeviceIP = ip;
+        selectedDeviceLabel.textContent = ip;
+        renderDeviceTableBody();
+
+        deviceLinksTableBody.innerHTML = '<tr><td colspan="6" style="padding:10px;color:#64748b;">Загрузка…</td></tr>';
+        deviceLldpTextTableBody.innerHTML = '<tr><td colspan="2" style="padding:10px;color:#64748b;">Загрузка…</td></tr>';
+
+        try {
+          const [linksRes, lldpRes] = await Promise.all([
+            fetch(`/api/scans/${encodeURIComponent(scanId)}/links?limit=10000`),
+            fetch(`/api/scans/${encodeURIComponent(scanId)}/lldp?limit=10000`),
+          ]);
+          if (!linksRes.ok) throw new Error("links: " + (await linksRes.text()));
+          if (!lldpRes.ok) throw new Error("lldp: " + (await lldpRes.text()));
+          const linkItems = (await linksRes.json()).items || [];
+          const lldpItems = (await lldpRes.json()).items || [];
+          const myLinks = linkItems.filter((x) => x.source_ip === ip);
+          const myLldp = lldpItems.filter((x) => x.ip === ip);
+
+          if (myLinks.length === 0) {
+            deviceLinksTableBody.innerHTML =
+              '<tr><td colspan="6" style="padding:10px;color:#64748b;">Нет записей /links для этого IP (нет LLDP-соседей или скан без SNMP/LLDP).</td></tr>';
+          } else {
+            deviceLinksTableBody.innerHTML = myLinks
+              .map(
+                (L) =>
+                  `<tr><td>${escapeHtml(L.source_port || "—")}</td><td>${escapeHtml(L.target_sys_name || "—")}</td><td>${escapeHtml(L.target_ip || "—")}</td><td>${escapeHtml(L.target_port || "—")}</td><td>${escapeHtml(L.remote_chassis_id || "—")}</td><td>${escapeHtml(resolvedLabelRu(L.resolved_by))}</td></tr>`
+              )
+              .join("");
+          }
+
+          if (myLldp.length === 0) {
+            deviceLldpTextTableBody.innerHTML =
+              '<tr><td colspan="2" style="padding:10px;color:#64748b;">Нет сырых записей LLDP для этого IP.</td></tr>';
+          } else {
+            deviceLldpTextTableBody.innerHTML = myLldp
+              .map(
+                (row, i) =>
+                  `<tr><td style="vertical-align:top;color:#64748b;">${i + 1}</td><td style="white-space:pre-wrap;">${escapeHtml(formatLldpTextLine(row))}</td></tr>`
+              )
+              .join("");
+          }
+          setStatus(`Связи для ${ip}: /links ${myLinks.length}, запись(ей) LLDP ${myLldp.length}.`);
+        } catch (e) {
+          deviceLinksTableBody.innerHTML = `<tr><td colspan="6" style="padding:10px;color:#b91c1c;">${escapeHtml(e.message)}</td></tr>`;
+          deviceLldpTextTableBody.innerHTML = `<tr><td colspan="2" style="padding:10px;color:#b91c1c;">${escapeHtml(e.message)}</td></tr>`;
+        }
+      }
+
+      deviceTableBody.addEventListener("click", (ev) => {
+        const tr = ev.target.closest("tr.device-row");
+        if (!tr) return;
+        const ip = tr.getAttribute("data-ip");
+        if (!ip) return;
+        selectDeviceAndLoadLinks(ip);
+      });
+
      deviceTableHead.addEventListener("click", (ev) => {
        const th = ev.target.closest("[data-sort]");
        if (!th || !deviceTableHead.contains(th)) return;
@@ -260,10 +404,12 @@
      async function loadDeviceTable(scanId) {
        if (!scanId) {
          deviceRowsCache = [];
+          clearDeviceDetailPanel();
          deviceTableBody.innerHTML = '<tr><td colspan="4" style="padding:10px;color:#64748b;">Нет scan_id.</td></tr>';
          updateDeviceSortIndicators();
          return;
        }
+        clearDeviceDetailPanel();
        deviceTableBody.innerHTML = '<tr><td colspan="4" style="padding:10px;color:#64748b;">Загрузка…</td></tr>';
        try {
          const [hRes, sRes] = await Promise.all([
@@ -289,6 +435,7 @@
          renderDeviceTableBody();
        } catch (e) {
          deviceRowsCache = [];
+          clearDeviceDetailPanel();
          deviceTableBody.innerHTML = `<tr><td colspan="4" style="padding:10px;color:#b91c1c;">Ошибка: ${escapeHtml(e.message)}</td></tr>`;
          updateDeviceSortIndicators();
        }