PapaTramp/nettopo-go
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Made-with: Cursor
This commit is contained in:
Луценко Андрей Анатольевич
2026-04-10 13:13:30 +10:00
parent 0f32e0004f
commit 7e79072619
1 changed files with 152 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/webui/index.html
+150 -3
View File
@@ -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) => {
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(
(r) =>
`<tr><td>${escapeHtml(r.ip)}</td><td>${escapeHtml(r.ping)}</td><td>${escapeHtml(r.name)}</td><td>${escapeHtml(r.snmp)}</td></tr>`
(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();
}