hansjone/netx
1
0
Fork 0
mirror of https://github.com/hansjone/netx.git synced 2026-10-09 13:00:44 +08:00
Code Issues Projects Releases 1 Packages Wiki Activity Actions 2

Harden topology canvas edge delete, discover cancel, and map UX.

Browse source 
Persist Fabric edge deletes, stop LLDP jobs from the canvas, surface truncation/placeholders/stale edges, and fix LLDP job deep-links.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
oliver 2026-08-05 21:23:00 +08:00
parent 5e567408e7
commit 617d4245b0
14 changed files with 468 additions and 238 deletions
Download patch file Download diff file Expand all files Collapse all files

227
web/src/index.css
View file

@ -6586,180 +6586,12 @@ pre {
color: #cbd5e1;
}
.topo-discover__filters {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.topo-discover__filter {
display: inline-flex;
align-items: center;
gap: 4px;
height: 26px;
padding: 0 8px;
border: 1px solid rgba(148, 163, 184, 0.28);
border-radius: 999px;
background: rgba(30, 41, 59, 0.9);
font-size: 12px;
color: #cbd5e1;
cursor: pointer;
}
.topo-discover__filter.is-active {
border-color: #38bdf8;
background: rgba(14, 165, 233, 0.18);
color: #e0f2fe;
}
.topo-discover__filter--primary {
border-color: #0ea5e9;
background: #0284c7;
color: #fff;
}
.topo-discover__filter--primary .topo-discover__filter-count {
color: #fff;
}
.topo-discover__filter-count {
font-variant-numeric: tabular-nums;
font-weight: 600;
}
.topo-discover__empty-ok {
margin: 0;
font-size: 12px;
color: #86efac;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.topo-discover__link {
border: 0;
background: none;
padding: 0;
color: #38bdf8;
cursor: pointer;
font-size: 12px;
text-decoration: underline;
}
.topo-discover__cap {
margin: 0;
font-size: 11px;
color: #64748b;
}
.topo-discover__error {
margin: 0;
font-size: 13px;
color: #fca5a5;
}
.topo-discover__list {
list-style: none;
margin: 0;
padding: 0;
overflow: auto;
flex: 1;
min-height: 0;
}
.topo-discover__list--modal {
max-height: min(52vh, 480px);
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 4px;
background: #f8fafc;
}
.topo-discover-list-modal {
width: min(880px, 100%);
}
.topo-discover__list > li {
margin-bottom: 2px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 6px;
}
.topo-discover__list > li.is-fail {
border-color: #fecaca;
background: #fff1f2;
}
.topo-discover__list > li.is-warn {
border-color: #fde68a;
background: #fffbeb;
}
.topo-discover__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
padding: 5px 8px;
border: 0;
background: transparent;
text-align: left;
cursor: pointer;
}
.topo-discover__row-main {
display: flex;
align-items: baseline;
gap: 8px;
min-width: 0;
flex: 1;
flex-wrap: wrap;
}
.topo-discover__row-name {
font-weight: 600;
font-size: 12px;
color: #0f172a;
}
.topo-discover__row-ip {
font-size: 12px;
color: #64748b;
font-variant-numeric: tabular-nums;
}
.topo-discover__row-meta {
font-size: 11px;
color: #94a3b8;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.topo-discover__badge {
flex-shrink: 0;
font-size: 11px;
font-weight: 700;
color: #166534;
}
.topo-discover__list > li.is-fail .topo-discover__badge {
color: #b91c1c;
}
.topo-discover__list > li.is-warn .topo-discover__badge {
color: #b45309;
}
.topo-discover__detail {
padding: 0 8px 6px;
border-top: 1px dashed #e2e8f0;
}
.topo-discover__item-meta,
.topo-discover__item-cmd,
.topo-discover__item-warn {
@ -6931,11 +6763,6 @@ pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.topo-discover-list-modal .topo-discover__list--modal {
max-height: min(52vh, 480px);
overflow: auto;
}
.topo-canvas {
position: relative;
flex: 1;
@ -7091,6 +6918,60 @@ pre {
--topo-icon-color: var(--topo-vendor-gray, #94a3b8);
}
.topo-node.is-placeholder .topo-node__glyph {
outline: 1px dashed rgba(148, 163, 184, 0.65);
outline-offset: 2px;
opacity: 0.88;
}
.topo-node__badge {
position: absolute;
top: -4px;
right: -6px;
z-index: 2;
min-width: 22px;
padding: 1px 4px;
border-radius: 4px;
background: rgba(15, 23, 42, 0.92);
border: 1px solid rgba(148, 163, 184, 0.45);
color: #fbbf24;
font-size: 9px;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.02em;
pointer-events: none;
}
.topo-truncate-banner {
position: absolute;
top: 8px;
left: 50%;
z-index: 5;
transform: translateX(-50%);
max-width: min(720px, calc(100% - 24px));
padding: 8px 12px;
border-radius: 8px;
border: 1px solid rgba(251, 191, 36, 0.45);
background: rgba(15, 23, 42, 0.92);
color: #fde68a;
font-size: 12px;
line-height: 1.4;
text-align: center;
pointer-events: none;
}
.topo-outside-peers {
display: flex;
flex-direction: column;
gap: 6px;
padding: 0 10px 10px;
}
.topo-outside-peers .panel__hint {
margin: 0;
}
.topo-node--cisco {
--topo-icon-color: var(--topo-vendor-cisco, #049fd9);
}