fix(ui): move MAC search under scan_id with visible styling and label
Made-with: Cursor
This commit is contained in:
PTah
+32
-32
@@ -36,7 +36,7 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h2>NetTopo: просмотр топологии</h2>
|
<h2>NetTopo: просмотр топологии</h2>
|
||||||
<div class="hint">После скана нажмите «Загрузить»: граф раскладывается пружинной моделью по LLDP, стрелки — от локального порта к соседу; полный список связей — блок под графом. Таблица устройств: сортировка по заголовкам.</div>
|
<div class="hint">После скана нажмите «Загрузить»: граф раскладывается пружинной моделью по LLDP, стрелки — от локального порта к соседу; полный список связей — блок под графом. Таблица устройств: сортировка по заголовкам. <strong>Поиск MAC</strong> — блок с фиолетовой рамкой сразу под полем scan_id: на каком коммутаторе и порту виден адрес (FDB в БД).</div>
|
||||||
<div class="pipeline">
|
<div class="pipeline">
|
||||||
<strong>Один scan = один полный проход по сети.</strong> Для каждого IP из CIDR (с исключениями): <strong>ping</strong> → для ответивших — проверка <strong>TCP-портов</strong> → если включён SNMP — опрос <strong>системы (sysName и др.)</strong> и сразу обход <strong>LLDP-MIB</strong> (соседи по портам). Отдельной кнопки «только LLDP» нет: соседи попадают в этот же цикл. Кнопка «Создать scan» ставит задачу и сама ждёт завершения, показывая прогресс в строке статуса ниже.
|
<strong>Один scan = один полный проход по сети.</strong> Для каждого IP из CIDR (с исключениями): <strong>ping</strong> → для ответивших — проверка <strong>TCP-портов</strong> → если включён SNMP — опрос <strong>системы (sysName и др.)</strong> и сразу обход <strong>LLDP-MIB</strong> (соседи по портам). Отдельной кнопки «только LLDP» нет: соседи попадают в этот же цикл. Кнопка «Создать scan» ставит задачу и сама ждёт завершения, показывая прогресс в строке статуса ниже.
|
||||||
</div>
|
</div>
|
||||||
@@ -53,6 +53,37 @@
|
|||||||
<button id="exportTopologyBtn">Экспорт topology JSON</button>
|
<button id="exportTopologyBtn">Экспорт topology JSON</button>
|
||||||
<button id="fitBtn">По центру</button>
|
<button id="fitBtn">По центру</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="macSearchPanel" style="margin:10px 0;padding:12px 14px;background:#eef2ff;border:2px solid #6366f1;border-radius:10px;box-shadow:0 1px 3px rgba(99,102,241,0.2);">
|
||||||
|
<div style="font-weight:700;font-size:15px;color:#1e1b4b;margin-bottom:6px;">Где этот MAC подключён? (таблица FDB по выбранному scan)</div>
|
||||||
|
<p class="hint" style="margin:0 0 10px;">Сначала укажите <strong>scan_id</strong> в поле выше (или «Последний scan» / «Загрузить»). Введите MAC — увидите коммутатор (IP и sysName), порт, VLAN, IP за портом из ARP.</p>
|
||||||
|
<div class="row" style="align-items:center;flex-wrap:wrap;gap:8px;">
|
||||||
|
<label for="macSearchInput" style="font-weight:600;color:#312e81;">MAC</label>
|
||||||
|
<input id="macSearchInput" placeholder="aa:bb:cc:dd:ee:ff" style="min-width:260px;font-family:monospace;" autocomplete="off" />
|
||||||
|
<button type="button" id="macSearchBtn" style="background:#4f46e5;color:#fff;border:none;padding:8px 14px;border-radius:8px;cursor:pointer;font-weight:600;">Показать на каком коммутаторе</button>
|
||||||
|
<span id="macSearchSummary" class="hint" style="margin:0;"></span>
|
||||||
|
</div>
|
||||||
|
<div style="overflow:auto; max-height:260px; margin-top:12px; border:1px solid #c7d2fe; border-radius:8px;background:#fff;">
|
||||||
|
<table id="macSearchTable" style="width:100%; border-collapse:collapse; font-size:13px;">
|
||||||
|
<thead>
|
||||||
|
<tr style="background:#e0e7ff;">
|
||||||
|
<th style="text-align:left;padding:8px 10px;">Коммутатор (IP)</th>
|
||||||
|
<th style="text-align:left;padding:8px 10px;">Имя коммутатора</th>
|
||||||
|
<th style="text-align:left;padding:8px 10px;">ifIndex</th>
|
||||||
|
<th style="text-align:left;padding:8px 10px;">bridge</th>
|
||||||
|
<th style="text-align:left;padding:8px 10px;">VLAN</th>
|
||||||
|
<th style="text-align:left;padding:8px 10px;">MAC</th>
|
||||||
|
<th style="text-align:left;padding:8px 10px;">IP за портом</th>
|
||||||
|
<th style="text-align:left;padding:8px 10px;">Имя клиента</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="macSearchTableBody">
|
||||||
|
<tr><td colspan="8" style="padding:10px;color:#64748b;">Введите MAC и нажмите кнопку (нужен scan_id в поле выше).</td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<input id="fromScanId" placeholder="from scan_id" style="min-width: 280px;" />
|
<input id="fromScanId" placeholder="from scan_id" style="min-width: 280px;" />
|
||||||
<input id="toScanId" placeholder="to scan_id" style="min-width: 280px;" />
|
<input id="toScanId" placeholder="to scan_id" style="min-width: 280px;" />
|
||||||
@@ -71,37 +102,6 @@
|
|||||||
</details>
|
</details>
|
||||||
<div id="status">Ожидание действия. Строка статуса показывает текущую операцию и прогресс скана.</div>
|
<div id="status">Ожидание действия. Строка статуса показывает текущую операцию и прогресс скана.</div>
|
||||||
|
|
||||||
<div class="panel" id="macSearchPanel" style="background:#fafafa;border:1px solid #e5e7eb;border-radius:8px;padding:10px 12px;">
|
|
||||||
<div class="row" style="margin-bottom:8px;align-items:center;">
|
|
||||||
<strong>Поиск MAC в сохранённом скане</strong>
|
|
||||||
<span class="hint" style="margin:0;">По FDB в БД: коммутатор (IP коммутатора из скана), порт (ifIndex / bridge), VLAN; IP и имя клиента — из ARP на коммутаторе и SNMP этого scan.</span>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<input id="macSearchInput" placeholder="MAC, напр. aa:99:0f:91:76:76" style="min-width:280px;" autocomplete="off" />
|
|
||||||
<button type="button" id="macSearchBtn">Найти</button>
|
|
||||||
<span id="macSearchSummary" class="hint" style="margin:0;"></span>
|
|
||||||
</div>
|
|
||||||
<div style="overflow:auto; max-height:240px; margin-top:8px; border:1px solid #e5e7eb; border-radius:8px;">
|
|
||||||
<table id="macSearchTable" style="width:100%; border-collapse:collapse; font-size:13px;">
|
|
||||||
<thead>
|
|
||||||
<tr style="background:#f1f5f9;">
|
|
||||||
<th style="text-align:left;padding:6px 8px;">Коммутатор (IP)</th>
|
|
||||||
<th style="text-align:left;padding:6px 8px;">Имя (sysName)</th>
|
|
||||||
<th style="text-align:left;padding:6px 8px;">ifIndex</th>
|
|
||||||
<th style="text-align:left;padding:6px 8px;">bridge</th>
|
|
||||||
<th style="text-align:left;padding:6px 8px;">VLAN</th>
|
|
||||||
<th style="text-align:left;padding:6px 8px;">MAC</th>
|
|
||||||
<th style="text-align:left;padding:6px 8px;">IP за портом</th>
|
|
||||||
<th style="text-align:left;padding:6px 8px;">Имя клиента</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody id="macSearchTableBody">
|
|
||||||
<tr><td colspan="8" style="padding:8px;color:#64748b;">Укажите scan_id выше и MAC, нажмите «Найти».</td></tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
<div class="row" style="margin-bottom: 6px;">
|
<div class="row" style="margin-bottom: 6px;">
|
||||||
<strong>Найденные устройства</strong>
|
<strong>Найденные устройства</strong>
|
||||||
|
|||||||
Reference in New Issue
Block a user