mirror of
https://github.com/hansjone/netx.git
synced 2026-10-08 23:33:21 +08:00
Improve topology canvas UX and vendor NE icons.
Replace the top selection bar with a context menu, tighten map/palette cards and fullscreen controls, and tint the router asset by vendor (ZTE keeps default blue). Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
hansjone
parent
658c19e457
commit
2f1c33924e
5 changed files with 656 additions and 294 deletions
BIN
web/public/topo/ne-router.png
Normal file
BIN
web/public/topo/ne-router.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
|
|
@ -692,12 +692,14 @@ const en = {
|
|||
save: "Save",
|
||||
saving: "Saving…",
|
||||
saved: "Topology saved",
|
||||
discover: "Discover links",
|
||||
discover: "Discover all links",
|
||||
discovering: "Discovering…",
|
||||
discoverOne: "Discover links",
|
||||
discovered: "Discovery done: +{{added}} updated {{updated}} missing {{stale}}",
|
||||
discoverFail: "Discovery failed: {{detail}}",
|
||||
discoverOneNeedNe: "This node is not linked to a scannable NE",
|
||||
selectMap: "Select or create a topology map",
|
||||
canvasHint: "Add NEs from the left; blue dashed=found, red dashed=missing (deletable)",
|
||||
canvasHint: "Add NEs from the left; blue dashed=found, red dashed=missing (deletable); right-click a node for actions",
|
||||
selected: "Selected",
|
||||
selectedEdge: "Selected edge",
|
||||
openWebcrt: "Open terminal",
|
||||
|
|
@ -709,6 +711,8 @@ const en = {
|
|||
edgeDiscovered: "Discovered",
|
||||
edgeStale: "Missing",
|
||||
fit: "Fit view",
|
||||
fullscreen: "Fullscreen",
|
||||
exitFullscreen: "Exit fullscreen",
|
||||
display: "Display",
|
||||
hideIp: "Hide IP",
|
||||
hideVendor: "Hide vendor",
|
||||
|
|
|
|||
|
|
@ -689,12 +689,14 @@ const zh = {
|
|||
save: "保存",
|
||||
saving: "保存中…",
|
||||
saved: "拓扑已保存",
|
||||
discover: "发现链路",
|
||||
discover: "发现全量链路",
|
||||
discovering: "发现中…",
|
||||
discoverOne: "发现链路",
|
||||
discovered: "发现完成：新增 {{added}}，更新 {{updated}}，未发现 {{stale}}",
|
||||
discoverFail: "发现失败：{{detail}}",
|
||||
discoverOneNeedNe: "该节点未关联可扫描网元",
|
||||
selectMap: "请选择或新建一张拓扑图",
|
||||
canvasHint: "从左侧添加网元，拖动节点并连线；蓝虚线=发现链路，红虚线=本次未发现（可删）",
|
||||
canvasHint: "从左侧添加网元，拖动节点并连线；蓝虚线=发现链路，红虚线=本次未发现（可删）；右键节点可操作",
|
||||
selected: "已选节点",
|
||||
selectedEdge: "已选链路",
|
||||
openWebcrt: "打开终端",
|
||||
|
|
@ -706,6 +708,8 @@ const zh = {
|
|||
edgeDiscovered: "发现",
|
||||
edgeStale: "未发现",
|
||||
fit: "适应画布",
|
||||
fullscreen: "全屏显示",
|
||||
exitFullscreen: "退出全屏",
|
||||
display: "显示选项",
|
||||
hideIp: "隐藏 IP",
|
||||
hideVendor: "隐藏厂商",
|
||||
|
|
|
|||
|
|
@ -688,23 +688,30 @@ pre {
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.app-main .help-hint__trigger,
|
||||
.help-hint__trigger {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
padding: 0;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 50%;
|
||||
background: #f8fafc;
|
||||
width: auto;
|
||||
height: auto;
|
||||
min-width: 0;
|
||||
padding: 0 2px;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.app-main .help-hint__trigger:hover,
|
||||
.app-main .help-hint__trigger:focus-visible,
|
||||
.help-hint__trigger:hover,
|
||||
.help-hint__trigger:focus-visible {
|
||||
border-color: #1565c0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
color: #1565c0;
|
||||
outline: none;
|
||||
}
|
||||
|
|
@ -1931,6 +1938,7 @@ pre {
|
|||
flex-direction: column;
|
||||
gap: 8px;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.topo-sidebar__section--grow {
|
||||
|
|
@ -1983,28 +1991,84 @@ pre {
|
|||
padding: 0;
|
||||
overflow: auto;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.topo-map-list li {
|
||||
.topo-map-list li,
|
||||
.topo-palette > li {
|
||||
margin: 0 0 6px;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.topo-map-list li:last-child,
|
||||
.topo-palette > li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.topo-map-list__row,
|
||||
.topo-palette__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.topo-map-list li.is-active {
|
||||
.topo-map-list li.is-active .topo-map-list__row {
|
||||
border-color: #93c5fd;
|
||||
background: #e8f1fb;
|
||||
}
|
||||
|
||||
.topo-palette > li.is-on-canvas .topo-palette__row {
|
||||
background: #f8fafc;
|
||||
border-color: #e2e8f0;
|
||||
}
|
||||
|
||||
.topo-map-list__item,
|
||||
.topo-palette__item {
|
||||
flex: 1;
|
||||
display: block;
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
text-align: left;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding: 8px;
|
||||
padding: 8px 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
border-radius: 0;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.app-main .topo-map-list__item,
|
||||
.app-main .topo-map-list__icon,
|
||||
.app-main .topo-palette__item {
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.app-main .topo-map-list__item,
|
||||
.app-main .topo-palette__item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.app-main .topo-map-list__icon {
|
||||
width: 32px;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.topo-map-list__item:hover,
|
||||
|
|
@ -2012,6 +2076,43 @@ pre {
|
|||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.topo-map-list li.is-active .topo-map-list__item:hover {
|
||||
background: #dbeafe;
|
||||
}
|
||||
|
||||
.topo-map-list__actions {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
flex: 0 0 auto;
|
||||
border-left: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.topo-map-list li.is-active .topo-map-list__actions {
|
||||
border-left-color: #bfdbfe;
|
||||
}
|
||||
|
||||
.topo-map-list__icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
min-height: 100%;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.topo-map-list__icon:hover:not(:disabled) {
|
||||
background: #f1f5f9;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.topo-map-list__icon:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.topo-palette__item:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: default;
|
||||
|
|
@ -2019,6 +2120,8 @@ pre {
|
|||
|
||||
.topo-palette__empty {
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.topo-map-list__name,
|
||||
|
|
@ -2026,6 +2129,9 @@ pre {
|
|||
display: block;
|
||||
font-weight: 600;
|
||||
color: #0f172a;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.topo-map-list__meta,
|
||||
|
|
@ -2033,6 +2139,9 @@ pre {
|
|||
display: block;
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.topo-main {
|
||||
|
|
@ -2048,18 +2157,21 @@ pre {
|
|||
|
||||
.topo-toolbar {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 10px 12px;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.topo-toolbar__left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.topo-toolbar__title {
|
||||
|
|
@ -2069,16 +2181,23 @@ pre {
|
|||
min-width: 0;
|
||||
}
|
||||
|
||||
.topo-toolbar__title strong {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.topo-toolbar__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.topo-display-toggles {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-right: 4px;
|
||||
|
|
@ -2095,20 +2214,49 @@ pre {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.topo-selection {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 8px 12px;
|
||||
background: #f8fafc;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
.topo-ctx {
|
||||
position: fixed;
|
||||
z-index: 40;
|
||||
min-width: 168px;
|
||||
padding: 4px 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
background: #0f172a;
|
||||
color: #e2e8f0;
|
||||
border: 1px solid #334155;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.28);
|
||||
}
|
||||
|
||||
.topo-selection__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
.topo-ctx__item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 8px 14px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
text-align: left;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.topo-ctx__item:hover:not(:disabled) {
|
||||
background: #1e293b;
|
||||
}
|
||||
|
||||
.topo-ctx__item:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.topo-ctx__item--danger:hover:not(:disabled) {
|
||||
background: #7f1d1d;
|
||||
}
|
||||
|
||||
.topo-ctx__sep {
|
||||
height: 1px;
|
||||
margin: 4px 0;
|
||||
background: #334155;
|
||||
}
|
||||
|
||||
.topo-discover {
|
||||
|
|
@ -2197,6 +2345,29 @@ pre {
|
|||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.topo-canvas:fullscreen,
|
||||
.topo-canvas.is-fullscreen:fullscreen {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* Place fullscreen above zoom-in (+); Controls renders custom children last. */
|
||||
.topo-canvas .react-flow__controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.topo-canvas .react-flow__controls-button.topo-fs-control {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.topo-canvas .react-flow__controls-button.topo-fs-control svg {
|
||||
max-width: 14px;
|
||||
max-height: 14px;
|
||||
}
|
||||
|
||||
.topo-canvas__empty {
|
||||
|
|
@ -2215,17 +2386,43 @@ pre {
|
|||
box-shadow: none;
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
--topo-vendor: #64748b;
|
||||
/* Default asset is blue (= ZTE). */
|
||||
--topo-vendor: #0277bd;
|
||||
--topo-icon-filter: none;
|
||||
}
|
||||
|
||||
.topo-node--cisco { --topo-vendor: #1d4ed8; }
|
||||
.topo-node--huawei { --topo-vendor: #c62828; }
|
||||
.topo-node--zte { --topo-vendor: #0277bd; }
|
||||
.topo-node--juniper { --topo-vendor: #2e7d32; }
|
||||
.topo-node--nokia { --topo-vendor: #00838f; }
|
||||
.topo-node--ericsson { --topo-vendor: #f9a825; }
|
||||
.topo-node--h3c { --topo-vendor: #ef6c00; }
|
||||
.topo-node--other { --topo-vendor: #546e7a; }
|
||||
.topo-node--cisco {
|
||||
--topo-vendor: #1d4ed8;
|
||||
--topo-icon-filter: hue-rotate(-8deg) saturate(1.15);
|
||||
}
|
||||
.topo-node--huawei {
|
||||
--topo-vendor: #c62828;
|
||||
--topo-icon-filter: hue-rotate(155deg) saturate(1.35);
|
||||
}
|
||||
.topo-node--zte {
|
||||
--topo-vendor: #0277bd;
|
||||
--topo-icon-filter: none;
|
||||
}
|
||||
.topo-node--juniper {
|
||||
--topo-vendor: #2e7d32;
|
||||
--topo-icon-filter: hue-rotate(95deg) saturate(1.2);
|
||||
}
|
||||
.topo-node--nokia {
|
||||
--topo-vendor: #00838f;
|
||||
--topo-icon-filter: hue-rotate(-28deg) saturate(1.1) brightness(0.98);
|
||||
}
|
||||
.topo-node--ericsson {
|
||||
--topo-vendor: #f9a825;
|
||||
--topo-icon-filter: hue-rotate(175deg) saturate(1.45) brightness(1.05);
|
||||
}
|
||||
.topo-node--h3c {
|
||||
--topo-vendor: #ef6c00;
|
||||
--topo-icon-filter: hue-rotate(165deg) saturate(1.4);
|
||||
}
|
||||
.topo-node--other {
|
||||
--topo-vendor: #546e7a;
|
||||
--topo-icon-filter: grayscale(0.85) brightness(0.95);
|
||||
}
|
||||
|
||||
.topo-node__glyph {
|
||||
position: relative;
|
||||
|
|
@ -2252,14 +2449,20 @@ pre {
|
|||
transform: translate(-50%, -50%) !important;
|
||||
}
|
||||
|
||||
.topo-node.is-selected .topo-node__icon-body {
|
||||
stroke: #0f172a;
|
||||
stroke-width: 1.6;
|
||||
.topo-node.is-selected .topo-node__glyph {
|
||||
outline: 2px solid #2563eb;
|
||||
outline-offset: 5px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.topo-node.is-selected .topo-node__icon {
|
||||
transform: scale(1.08);
|
||||
filter: var(--topo-icon-filter, none) drop-shadow(0 0 8px rgba(37, 99, 235, 0.55));
|
||||
}
|
||||
|
||||
.topo-node.is-selected .topo-node__caption {
|
||||
color: #0f172a;
|
||||
font-weight: 600;
|
||||
color: #1d4ed8;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.topo-node__icon {
|
||||
|
|
@ -2267,30 +2470,11 @@ pre {
|
|||
width: 56px;
|
||||
height: 56px;
|
||||
margin: 0;
|
||||
object-fit: contain;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.topo-node__icon-shadow {
|
||||
fill: rgba(15, 23, 42, 0.28);
|
||||
}
|
||||
|
||||
.topo-node__icon-rim {
|
||||
fill: color-mix(in srgb, var(--topo-vendor, #64748b) 70%, #0f172a);
|
||||
}
|
||||
|
||||
.topo-node__icon-body {
|
||||
fill: var(--topo-vendor, #64748b);
|
||||
stroke: color-mix(in srgb, var(--topo-vendor, #64748b) 45%, #0f172a);
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.topo-node__icon-face {
|
||||
fill: color-mix(in srgb, var(--topo-vendor, #64748b) 62%, #cbd5e1);
|
||||
}
|
||||
|
||||
.topo-node__icon-arrows {
|
||||
fill: #ffffff;
|
||||
stroke: none;
|
||||
user-select: none;
|
||||
filter: var(--topo-icon-filter, none);
|
||||
transition: transform 0.12s ease, filter 0.12s ease;
|
||||
}
|
||||
|
||||
/* Same plain-text style as edge port labels */
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import {
|
|||
ReactFlow,
|
||||
Background,
|
||||
Controls,
|
||||
ControlButton,
|
||||
MiniMap,
|
||||
addEdge,
|
||||
useEdgesState,
|
||||
|
|
@ -31,6 +32,7 @@ import {
|
|||
updateTopologyMap,
|
||||
} from "../services/api";
|
||||
import { queryKeys } from "../constants/queryKeys";
|
||||
import { HelpHint } from "../components/HelpHint";
|
||||
import { useI18n } from "../i18n";
|
||||
import { useToast } from "../hooks/useToast";
|
||||
import { openNewModuleWindow, openOrFocusModule } from "../utils/moduleWindows";
|
||||
|
|
@ -43,6 +45,27 @@ import type {
|
|||
UmeNeItem,
|
||||
} from "../types";
|
||||
|
||||
function FullscreenIcon({ exit }: { exit?: boolean }) {
|
||||
if (exit) {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M7 14H5v5h5v-2H7v-3zm12 0h-2v3h-3v2h5v-5zM7 5h3V3H5v5h2V5zm10 0v3h2V3h-5v2h3z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M7 14H5v5h5v-2H7v-3zm0-9h3V3H5v5h2V5zm12 9h-2v3h-3v2h5v-5zm-2-9V3h-3v2h3v3h2V5h-2z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
type NeNodeData = {
|
||||
label: string;
|
||||
managed_ne_id: string;
|
||||
|
|
@ -72,6 +95,10 @@ type TopoDisplayOpts = {
|
|||
hidePorts: boolean;
|
||||
};
|
||||
|
||||
type CtxMenu =
|
||||
| { kind: "node"; id: string; x: number; y: number }
|
||||
| { kind: "edge"; id: string; x: number; y: number };
|
||||
|
||||
const TopoDisplayContext = createContext<TopoDisplayOpts>({
|
||||
hideIp: true,
|
||||
hideVendor: true,
|
||||
|
|
@ -97,25 +124,16 @@ function vendorTone(vendor: string): string {
|
|||
return "other";
|
||||
}
|
||||
|
||||
/** Classic Visio/Packet Tracer style router: disc + four outbound arrows. */
|
||||
/** Asset: /topo/ne-router.png (default blue = ZTE); other vendors tint via CSS. */
|
||||
function RouterIcon() {
|
||||
return (
|
||||
<svg className="topo-node__icon" viewBox="0 0 64 64" aria-hidden="true">
|
||||
<ellipse cx="32" cy="39" rx="19" ry="8.5" className="topo-node__icon-shadow" />
|
||||
<path
|
||||
d="M13 31 A19 9.5 0 0 0 51 31 L51 36.5 A19 9.5 0 0 1 13 36.5 Z"
|
||||
className="topo-node__icon-rim"
|
||||
/>
|
||||
<ellipse cx="32" cy="31" rx="19" ry="9.5" className="topo-node__icon-body" />
|
||||
<ellipse cx="32" cy="30" rx="15.5" ry="7" className="topo-node__icon-face" />
|
||||
<g className="topo-node__icon-arrows">
|
||||
{/* NW / NE / SW / SE */}
|
||||
<path d="M31 29 L19 18 L24.5 18.8 L23.2 23.8 Z" />
|
||||
<path d="M33 29 L45 18 L39.5 18.8 L40.8 23.8 Z" />
|
||||
<path d="M31 31 L19 42 L24.5 41.2 L23.2 36.2 Z" />
|
||||
<path d="M33 31 L45 42 L39.5 41.2 L40.8 36.2 Z" />
|
||||
</g>
|
||||
</svg>
|
||||
<img
|
||||
className="topo-node__icon"
|
||||
src="/topo/ne-router.png"
|
||||
alt=""
|
||||
draggable={false}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -223,6 +241,7 @@ export function TopologyPage() {
|
|||
const [keyword, setKeyword] = useState("");
|
||||
const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
|
||||
const [selectedEdgeId, setSelectedEdgeId] = useState<string | null>(null);
|
||||
const [ctxMenu, setCtxMenu] = useState<CtxMenu | null>(null);
|
||||
const [hideIp, setHideIp] = useState(true);
|
||||
const [hideVendor, setHideVendor] = useState(true);
|
||||
const [hidePorts, setHidePorts] = useState(true);
|
||||
|
|
@ -243,10 +262,12 @@ export function TopologyPage() {
|
|||
edgesUpdated: 0,
|
||||
});
|
||||
const [discoverError, setDiscoverError] = useState("");
|
||||
const [fullscreen, setFullscreen] = useState(false);
|
||||
const discoverAbortRef = useRef<AbortController | null>(null);
|
||||
const [nodes, setNodes, onNodesChange] = useNodesState<Node<NeNodeData>>([]);
|
||||
const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
|
||||
const rfRef = useRef<ReactFlowInstance<Node<NeNodeData>, Edge> | null>(null);
|
||||
const canvasRef = useRef<HTMLDivElement | null>(null);
|
||||
const dirtyRef = useRef(false);
|
||||
const displayOpts = useMemo(
|
||||
() => ({ hideIp, hideVendor, hidePorts }),
|
||||
|
|
@ -369,84 +390,99 @@ export function TopologyPage() {
|
|||
onError: (err) => showError(String(err)),
|
||||
});
|
||||
|
||||
const runDiscover = useCallback(async () => {
|
||||
if (!mapId || discovering) return;
|
||||
discoverAbortRef.current?.abort();
|
||||
const ac = new AbortController();
|
||||
discoverAbortRef.current = ac;
|
||||
setDiscoverOpen(true);
|
||||
setDiscovering(true);
|
||||
setDiscoverReport(null);
|
||||
setDiscoverLiveResults([]);
|
||||
setDiscoverError("");
|
||||
setDiscoverProgress({
|
||||
index: 0,
|
||||
total: nodes.filter((n) => Boolean(n.data.managed_ne_id)).length,
|
||||
neName: "",
|
||||
neIp: "",
|
||||
edgesAdded: 0,
|
||||
edgesUpdated: 0,
|
||||
});
|
||||
try {
|
||||
if (dirtyRef.current) {
|
||||
await putTopologyGraph(mapId, flowToGraphPayload(nodes, edges));
|
||||
dirtyRef.current = false;
|
||||
const runDiscover = useCallback(
|
||||
async (neIds?: string[]) => {
|
||||
if (!mapId || discovering) return;
|
||||
const filterIds = (neIds || []).map((x) => String(x || "").trim()).filter(Boolean);
|
||||
discoverAbortRef.current?.abort();
|
||||
const ac = new AbortController();
|
||||
discoverAbortRef.current = ac;
|
||||
setDiscoverOpen(true);
|
||||
setDiscovering(true);
|
||||
setDiscoverReport(null);
|
||||
setDiscoverLiveResults([]);
|
||||
setDiscoverError("");
|
||||
const scannable = nodes.filter((n) => Boolean(n.data.managed_ne_id || n.data.ume_ne_id));
|
||||
const scoped = filterIds.length
|
||||
? scannable.filter(
|
||||
(n) =>
|
||||
filterIds.includes(String(n.data.managed_ne_id || "")) ||
|
||||
filterIds.includes(String(n.data.ume_ne_id || "")),
|
||||
)
|
||||
: scannable;
|
||||
setDiscoverProgress({
|
||||
index: 0,
|
||||
total: scoped.length,
|
||||
neName: "",
|
||||
neIp: "",
|
||||
edgesAdded: 0,
|
||||
edgesUpdated: 0,
|
||||
});
|
||||
try {
|
||||
if (dirtyRef.current) {
|
||||
await putTopologyGraph(mapId, flowToGraphPayload(nodes, edges));
|
||||
dirtyRef.current = false;
|
||||
}
|
||||
const out = await discoverTopologyNeighborsStream(
|
||||
mapId,
|
||||
{
|
||||
protocol: "auto",
|
||||
...(filterIds.length ? { ne_ids: filterIds } : {}),
|
||||
},
|
||||
{
|
||||
onStart: (ev) => {
|
||||
setDiscoverProgress((p) => ({ ...p, total: ev.total, index: 0 }));
|
||||
},
|
||||
onNeStart: (ev) => {
|
||||
setDiscoverProgress((p) => ({
|
||||
...p,
|
||||
index: ev.index,
|
||||
total: ev.total,
|
||||
neName: ev.ne_name || ev.ne_ip || ev.ne_id,
|
||||
neIp: ev.ne_ip,
|
||||
}));
|
||||
},
|
||||
onNeResult: (ev) => {
|
||||
if (ev.result) {
|
||||
setDiscoverLiveResults((prev) => [...prev, ev.result]);
|
||||
}
|
||||
setDiscoverProgress((p) => ({
|
||||
...p,
|
||||
index: ev.index,
|
||||
total: ev.total,
|
||||
edgesAdded: ev.edges_added,
|
||||
edgesUpdated: ev.edges_updated,
|
||||
}));
|
||||
},
|
||||
},
|
||||
ac.signal,
|
||||
);
|
||||
if (out.graph) {
|
||||
queryClient.setQueryData(queryKeys.topologyGraph(mapId), out.graph);
|
||||
const { rfNodes, rfEdges } = graphToFlow(out.graph.nodes, out.graph.edges);
|
||||
setNodes(rfNodes);
|
||||
setEdges(rfEdges);
|
||||
dirtyRef.current = false;
|
||||
}
|
||||
setDiscoverReport(out);
|
||||
await queryClient.invalidateQueries({ queryKey: queryKeys.topologyMaps });
|
||||
showOk(
|
||||
t("topology.discovered")
|
||||
.replace("{{added}}", String(out.edges_added))
|
||||
.replace("{{updated}}", String(out.edges_updated))
|
||||
.replace("{{stale}}", String(out.edges_stale || 0)),
|
||||
);
|
||||
} catch (err) {
|
||||
if (ac.signal.aborted) return;
|
||||
setDiscoverError(String(err));
|
||||
showError(t("topology.discoverFail").replace("{{detail}}", String(err)));
|
||||
} finally {
|
||||
if (discoverAbortRef.current === ac) discoverAbortRef.current = null;
|
||||
setDiscovering(false);
|
||||
}
|
||||
const out = await discoverTopologyNeighborsStream(
|
||||
mapId,
|
||||
{ protocol: "auto" },
|
||||
{
|
||||
onStart: (ev) => {
|
||||
setDiscoverProgress((p) => ({ ...p, total: ev.total, index: 0 }));
|
||||
},
|
||||
onNeStart: (ev) => {
|
||||
setDiscoverProgress((p) => ({
|
||||
...p,
|
||||
index: ev.index,
|
||||
total: ev.total,
|
||||
neName: ev.ne_name || ev.ne_ip || ev.ne_id,
|
||||
neIp: ev.ne_ip,
|
||||
}));
|
||||
},
|
||||
onNeResult: (ev) => {
|
||||
if (ev.result) {
|
||||
setDiscoverLiveResults((prev) => [...prev, ev.result]);
|
||||
}
|
||||
setDiscoverProgress((p) => ({
|
||||
...p,
|
||||
index: ev.index,
|
||||
total: ev.total,
|
||||
edgesAdded: ev.edges_added,
|
||||
edgesUpdated: ev.edges_updated,
|
||||
}));
|
||||
},
|
||||
},
|
||||
ac.signal,
|
||||
);
|
||||
if (out.graph) {
|
||||
queryClient.setQueryData(queryKeys.topologyGraph(mapId), out.graph);
|
||||
const { rfNodes, rfEdges } = graphToFlow(out.graph.nodes, out.graph.edges);
|
||||
setNodes(rfNodes);
|
||||
setEdges(rfEdges);
|
||||
dirtyRef.current = false;
|
||||
}
|
||||
setDiscoverReport(out);
|
||||
await queryClient.invalidateQueries({ queryKey: queryKeys.topologyMaps });
|
||||
showOk(
|
||||
t("topology.discovered")
|
||||
.replace("{{added}}", String(out.edges_added))
|
||||
.replace("{{updated}}", String(out.edges_updated))
|
||||
.replace("{{stale}}", String(out.edges_stale || 0)),
|
||||
);
|
||||
} catch (err) {
|
||||
if (ac.signal.aborted) return;
|
||||
setDiscoverError(String(err));
|
||||
showError(t("topology.discoverFail").replace("{{detail}}", String(err)));
|
||||
} finally {
|
||||
if (discoverAbortRef.current === ac) discoverAbortRef.current = null;
|
||||
setDiscovering(false);
|
||||
}
|
||||
}, [mapId, discovering, nodes, edges, queryClient, setNodes, setEdges, showOk, showError, t]);
|
||||
},
|
||||
[mapId, discovering, nodes, edges, queryClient, setNodes, setEdges, showOk, showError, t],
|
||||
);
|
||||
|
||||
const discoverResults = discoverReport?.results?.length
|
||||
? discoverReport.results
|
||||
|
|
@ -558,10 +594,6 @@ export function TopologyPage() {
|
|||
() => nodes.find((n) => n.id === selectedNodeId) || null,
|
||||
[nodes, selectedNodeId],
|
||||
);
|
||||
const selectedEdge = useMemo(
|
||||
() => edges.find((e) => e.id === selectedEdgeId) || null,
|
||||
[edges, selectedEdgeId],
|
||||
);
|
||||
const staleEdgeCount = useMemo(
|
||||
() =>
|
||||
edges.filter((e) => String((e.data as { source?: string } | undefined)?.source || "") === "stale")
|
||||
|
|
@ -569,18 +601,62 @@ export function TopologyPage() {
|
|||
[edges],
|
||||
);
|
||||
|
||||
const removeSelected = () => {
|
||||
if (selectedEdgeId) {
|
||||
dirtyRef.current = true;
|
||||
setEdges((es) => es.filter((e) => e.id !== selectedEdgeId));
|
||||
setSelectedEdgeId(null);
|
||||
return;
|
||||
const closeCtxMenu = useCallback(() => setCtxMenu(null), []);
|
||||
|
||||
useEffect(() => {
|
||||
const syncFs = () => {
|
||||
const el = canvasRef.current;
|
||||
const active = Boolean(el && document.fullscreenElement === el);
|
||||
setFullscreen(active);
|
||||
if (active) {
|
||||
window.setTimeout(() => rfRef.current?.fitView({ padding: 0.15 }), 80);
|
||||
}
|
||||
};
|
||||
document.addEventListener("fullscreenchange", syncFs);
|
||||
return () => document.removeEventListener("fullscreenchange", syncFs);
|
||||
}, []);
|
||||
|
||||
const toggleFullscreen = useCallback(async () => {
|
||||
const el = canvasRef.current;
|
||||
if (!el) return;
|
||||
try {
|
||||
if (document.fullscreenElement === el) {
|
||||
await document.exitFullscreen();
|
||||
} else {
|
||||
await el.requestFullscreen();
|
||||
}
|
||||
} catch (err) {
|
||||
showError(String(err));
|
||||
}
|
||||
if (!selectedNodeId) return;
|
||||
}, [showError]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!ctxMenu) return;
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") closeCtxMenu();
|
||||
};
|
||||
const onScroll = () => closeCtxMenu();
|
||||
window.addEventListener("keydown", onKey);
|
||||
window.addEventListener("scroll", onScroll, true);
|
||||
return () => {
|
||||
window.removeEventListener("keydown", onKey);
|
||||
window.removeEventListener("scroll", onScroll, true);
|
||||
};
|
||||
}, [ctxMenu, closeCtxMenu]);
|
||||
|
||||
const removeNodeById = (nodeId: string) => {
|
||||
dirtyRef.current = true;
|
||||
setNodes((ns) => ns.filter((n) => n.id !== selectedNodeId));
|
||||
setEdges((es) => es.filter((e) => e.source !== selectedNodeId && e.target !== selectedNodeId));
|
||||
setSelectedNodeId(null);
|
||||
setNodes((ns) => ns.filter((n) => n.id !== nodeId));
|
||||
setEdges((es) => es.filter((e) => e.source !== nodeId && e.target !== nodeId));
|
||||
setSelectedNodeId((cur) => (cur === nodeId ? null : cur));
|
||||
closeCtxMenu();
|
||||
};
|
||||
|
||||
const removeEdgeById = (edgeId: string) => {
|
||||
dirtyRef.current = true;
|
||||
setEdges((es) => es.filter((e) => e.id !== edgeId));
|
||||
setSelectedEdgeId((cur) => (cur === edgeId ? null : cur));
|
||||
closeCtxMenu();
|
||||
};
|
||||
|
||||
const removeStaleEdges = () => {
|
||||
|
|
@ -594,9 +670,10 @@ export function TopologyPage() {
|
|||
showOk(t("topology.staleRemoved").replace("{{count}}", String(n)));
|
||||
};
|
||||
|
||||
const openWebcrt = () => {
|
||||
const managedId = selectedNode?.data.managed_ne_id;
|
||||
const umeId = selectedNode?.data.ume_ne_id;
|
||||
const openWebcrtFor = (node: Node<NeNodeData> | null) => {
|
||||
closeCtxMenu();
|
||||
const managedId = node?.data.managed_ne_id;
|
||||
const umeId = node?.data.ume_ne_id;
|
||||
if (managedId) {
|
||||
openNewModuleWindow({
|
||||
moduleId: "webcrt",
|
||||
|
|
@ -614,9 +691,10 @@ export function TopologyPage() {
|
|||
showError(t("topology.noNeLink"));
|
||||
};
|
||||
|
||||
const openNe = () => {
|
||||
const managedId = selectedNode?.data.managed_ne_id;
|
||||
const umeId = selectedNode?.data.ume_ne_id;
|
||||
const openNeFor = (node: Node<NeNodeData> | null) => {
|
||||
closeCtxMenu();
|
||||
const managedId = node?.data.managed_ne_id;
|
||||
const umeId = node?.data.ume_ne_id;
|
||||
if (managedId) {
|
||||
openOrFocusModule({
|
||||
moduleId: "managed-ne",
|
||||
|
|
@ -634,6 +712,52 @@ export function TopologyPage() {
|
|||
showError(t("topology.noNeLink"));
|
||||
};
|
||||
|
||||
const discoverOneFor = (node: Node<NeNodeData> | null) => {
|
||||
closeCtxMenu();
|
||||
const id = String(node?.data.managed_ne_id || node?.data.ume_ne_id || "").trim();
|
||||
if (!id) {
|
||||
showError(t("topology.discoverOneNeedNe"));
|
||||
return;
|
||||
}
|
||||
void runDiscover([id]);
|
||||
};
|
||||
|
||||
const placeCtxMenu = (clientX: number, clientY: number): { x: number; y: number } => {
|
||||
const pad = 8;
|
||||
const w = 180;
|
||||
const h = 200;
|
||||
const x = Math.min(clientX, window.innerWidth - w - pad);
|
||||
const y = Math.min(clientY, window.innerHeight - h - pad);
|
||||
return { x: Math.max(pad, x), y: Math.max(pad, y) };
|
||||
};
|
||||
|
||||
const selectNodeOnly = useCallback(
|
||||
(nodeId: string) => {
|
||||
setSelectedEdgeId(null);
|
||||
setSelectedNodeId(nodeId);
|
||||
setNodes((ns) => ns.map((n) => ({ ...n, selected: n.id === nodeId })));
|
||||
setEdges((es) => es.map((e) => ({ ...e, selected: false })));
|
||||
},
|
||||
[setNodes, setEdges],
|
||||
);
|
||||
|
||||
const selectEdgeOnly = useCallback(
|
||||
(edgeId: string) => {
|
||||
setSelectedNodeId(null);
|
||||
setSelectedEdgeId(edgeId);
|
||||
setNodes((ns) => ns.map((n) => ({ ...n, selected: false })));
|
||||
setEdges((es) => es.map((e) => ({ ...e, selected: e.id === edgeId })));
|
||||
},
|
||||
[setNodes, setEdges],
|
||||
);
|
||||
|
||||
const clearSelection = useCallback(() => {
|
||||
setSelectedNodeId(null);
|
||||
setSelectedEdgeId(null);
|
||||
setNodes((ns) => ns.map((n) => ({ ...n, selected: false })));
|
||||
setEdges((es) => es.map((e) => ({ ...e, selected: false })));
|
||||
}, [setNodes, setEdges]);
|
||||
|
||||
const maps = mapsQuery.data?.items || [];
|
||||
const onCanvasManagedIds = useMemo(
|
||||
() => new Set(nodes.map((n) => n.data.managed_ne_id).filter(Boolean)),
|
||||
|
|
@ -731,38 +855,42 @@ export function TopologyPage() {
|
|||
<ul className="topo-map-list">
|
||||
{maps.map((m) => (
|
||||
<li key={m.id} className={mapId === m.id ? "is-active" : ""}>
|
||||
<button
|
||||
type="button"
|
||||
className="topo-map-list__item"
|
||||
onClick={() => setMapId(m.id)}
|
||||
onDoubleClick={() => promptRenameMap(m.id, m.name)}
|
||||
title={t("topology.renameHint")}
|
||||
>
|
||||
<span className="topo-map-list__name">{m.name}</span>
|
||||
<span className="topo-map-list__meta">
|
||||
{m.node_count}N / {m.edge_count}E
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn--sm btn--ghost"
|
||||
title={t("topology.rename")}
|
||||
disabled={renameMapMut.isPending}
|
||||
onClick={() => promptRenameMap(m.id, m.name)}
|
||||
>
|
||||
✎
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn--sm btn--ghost"
|
||||
title={t("topology.deleteMap")}
|
||||
onClick={() => {
|
||||
const msg = t("topology.deleteMapConfirm").replace("{{name}}", m.name);
|
||||
if (window.confirm(msg)) deleteMapMut.mutate(m.id);
|
||||
}}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
<div className="topo-map-list__row">
|
||||
<button
|
||||
type="button"
|
||||
className="topo-map-list__item"
|
||||
onClick={() => setMapId(m.id)}
|
||||
onDoubleClick={() => promptRenameMap(m.id, m.name)}
|
||||
title={t("topology.renameHint")}
|
||||
>
|
||||
<span className="topo-map-list__name">{m.name}</span>
|
||||
<span className="topo-map-list__meta">
|
||||
{m.node_count}N / {m.edge_count}E
|
||||
</span>
|
||||
</button>
|
||||
<div className="topo-map-list__actions">
|
||||
<button
|
||||
type="button"
|
||||
className="topo-map-list__icon"
|
||||
title={t("topology.rename")}
|
||||
disabled={renameMapMut.isPending}
|
||||
onClick={() => promptRenameMap(m.id, m.name)}
|
||||
>
|
||||
✎
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="topo-map-list__icon"
|
||||
title={t("topology.deleteMap")}
|
||||
onClick={() => {
|
||||
const msg = t("topology.deleteMapConfirm").replace("{{name}}", m.name);
|
||||
if (window.confirm(msg)) deleteMapMut.mutate(m.id);
|
||||
}}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
|
@ -828,20 +956,22 @@ export function TopologyPage() {
|
|||
? onCanvasManagedIds.has(item.managed_ne_id)
|
||||
: onCanvasUmeIds.has(item.ume_ne_id);
|
||||
return (
|
||||
<li key={item.key}>
|
||||
<button
|
||||
type="button"
|
||||
className="topo-palette__item"
|
||||
disabled={!mapId || onCanvas}
|
||||
onClick={() => addPaletteItem(item)}
|
||||
title={`${item.name}\n${item.ip}`}
|
||||
>
|
||||
<span className="topo-palette__name">{item.name}</span>
|
||||
<span className="topo-palette__meta">
|
||||
{item.meta}
|
||||
{onCanvas ? " ✓" : ""}
|
||||
</span>
|
||||
</button>
|
||||
<li key={item.key} className={onCanvas ? "is-on-canvas" : ""}>
|
||||
<div className="topo-palette__row">
|
||||
<button
|
||||
type="button"
|
||||
className="topo-palette__item"
|
||||
disabled={!mapId || onCanvas}
|
||||
onClick={() => addPaletteItem(item)}
|
||||
title={`${item.name}\n${item.ip}`}
|
||||
>
|
||||
<span className="topo-palette__name">{item.name}</span>
|
||||
<span className="topo-palette__meta">
|
||||
{item.meta}
|
||||
{onCanvas ? " ✓" : ""}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})
|
||||
|
|
@ -857,22 +987,8 @@ export function TopologyPage() {
|
|||
<div className="topo-toolbar__left">
|
||||
<div className="topo-toolbar__title">
|
||||
<strong>{maps.find((m) => m.id === mapId)?.name || t("topology.selectMap")}</strong>
|
||||
{mapId ? (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn--sm btn--ghost"
|
||||
title={t("topology.rename")}
|
||||
disabled={renameMapMut.isPending}
|
||||
onClick={() => {
|
||||
const current = maps.find((m) => m.id === mapId)?.name || "";
|
||||
promptRenameMap(mapId, current);
|
||||
}}
|
||||
>
|
||||
{t("topology.rename")}
|
||||
</button>
|
||||
) : null}
|
||||
<HelpHint text={t("topology.canvasHint")} ariaLabel={t("common.help")} />
|
||||
</div>
|
||||
<span className="panel__hint">{t("topology.canvasHint")}</span>
|
||||
</div>
|
||||
<div className="topo-toolbar__actions">
|
||||
<div className="topo-display-toggles" role="group" aria-label={t("topology.display")}>
|
||||
|
|
@ -945,41 +1061,6 @@ export function TopologyPage() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{selectedNode ? (
|
||||
<div className="topo-selection">
|
||||
<span>
|
||||
{t("topology.selected")}: <strong>{selectedNode.data.label}</strong>
|
||||
{selectedNode.data.ne_ip ? ` (${selectedNode.data.ne_ip})` : ""}
|
||||
</span>
|
||||
<div className="topo-selection__actions">
|
||||
<button type="button" className="btn btn--sm" onClick={openWebcrt}>
|
||||
{t("topology.openWebcrt")}
|
||||
</button>
|
||||
<button type="button" className="btn btn--sm" onClick={openNe}>
|
||||
{t("topology.openNe")}
|
||||
</button>
|
||||
<button type="button" className="btn btn--sm btn--ghost" onClick={removeSelected}>
|
||||
{t("topology.removeNode")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : selectedEdge ? (
|
||||
<div className="topo-selection">
|
||||
<span>
|
||||
{t("topology.selectedEdge")}:{" "}
|
||||
<strong>
|
||||
{String((selectedEdge.data as { source?: string } | undefined)?.source || "manual")}
|
||||
</strong>
|
||||
{selectedEdge.label ? ` · ${String(selectedEdge.label)}` : ""}
|
||||
</span>
|
||||
<div className="topo-selection__actions">
|
||||
<button type="button" className="btn btn--sm btn--ghost" onClick={removeSelected}>
|
||||
{t("topology.removeEdge")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{discoverOpen ? (
|
||||
<div className="topo-discover">
|
||||
<div className="topo-discover__head">
|
||||
|
|
@ -1047,7 +1128,7 @@ export function TopologyPage() {
|
|||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="topo-canvas">
|
||||
<div className={`topo-canvas${fullscreen ? " is-fullscreen" : ""}`} ref={canvasRef}>
|
||||
{mapId ? (
|
||||
<TopoDisplayContext.Provider value={displayOpts}>
|
||||
<ReactFlow
|
||||
|
|
@ -1057,26 +1138,39 @@ export function TopologyPage() {
|
|||
connectionMode={ConnectionMode.Loose}
|
||||
defaultEdgeOptions={{ type: "straight" }}
|
||||
onNodesChange={(changes) => {
|
||||
dirtyRef.current = true;
|
||||
if (changes.some((c) => c.type !== "select")) dirtyRef.current = true;
|
||||
onNodesChange(changes);
|
||||
}}
|
||||
onEdgesChange={(changes) => {
|
||||
dirtyRef.current = true;
|
||||
if (changes.some((c) => c.type !== "select")) dirtyRef.current = true;
|
||||
onEdgesChange(changes);
|
||||
}}
|
||||
onConnect={onConnect}
|
||||
onNodeClick={(_e, node) => {
|
||||
setSelectedEdgeId(null);
|
||||
setSelectedNodeId(node.id);
|
||||
setCtxMenu(null);
|
||||
selectNodeOnly(node.id);
|
||||
}}
|
||||
onEdgeClick={(_e, edge) => {
|
||||
setSelectedNodeId(null);
|
||||
setSelectedEdgeId(edge.id);
|
||||
setCtxMenu(null);
|
||||
selectEdgeOnly(edge.id);
|
||||
}}
|
||||
onPaneClick={() => {
|
||||
setSelectedNodeId(null);
|
||||
setSelectedEdgeId(null);
|
||||
setCtxMenu(null);
|
||||
clearSelection();
|
||||
}}
|
||||
onNodeContextMenu={(e, node) => {
|
||||
e.preventDefault();
|
||||
selectNodeOnly(node.id);
|
||||
const pos = placeCtxMenu(e.clientX, e.clientY);
|
||||
setCtxMenu({ kind: "node", id: node.id, ...pos });
|
||||
}}
|
||||
onEdgeContextMenu={(e, edge) => {
|
||||
e.preventDefault();
|
||||
selectEdgeOnly(edge.id);
|
||||
const pos = placeCtxMenu(e.clientX, e.clientY);
|
||||
setCtxMenu({ kind: "edge", id: edge.id, ...pos });
|
||||
}}
|
||||
onMoveStart={closeCtxMenu}
|
||||
onInit={(inst) => {
|
||||
rfRef.current = inst;
|
||||
}}
|
||||
|
|
@ -1086,7 +1180,16 @@ export function TopologyPage() {
|
|||
elementsSelectable
|
||||
>
|
||||
<Background gap={18} size={1} />
|
||||
<Controls />
|
||||
<Controls showInteractive>
|
||||
<ControlButton
|
||||
className="topo-fs-control"
|
||||
onClick={() => void toggleFullscreen()}
|
||||
title={fullscreen ? t("topology.exitFullscreen") : t("topology.fullscreen")}
|
||||
aria-label={fullscreen ? t("topology.exitFullscreen") : t("topology.fullscreen")}
|
||||
>
|
||||
<FullscreenIcon exit={fullscreen} />
|
||||
</ControlButton>
|
||||
</Controls>
|
||||
<MiniMap pannable zoomable />
|
||||
</ReactFlow>
|
||||
</TopoDisplayContext.Provider>
|
||||
|
|
@ -1095,6 +1198,73 @@ export function TopologyPage() {
|
|||
)}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{ctxMenu ? (
|
||||
<ul
|
||||
className="topo-ctx"
|
||||
style={{ left: ctxMenu.x, top: ctxMenu.y }}
|
||||
role="menu"
|
||||
onContextMenu={(e) => e.preventDefault()}
|
||||
>
|
||||
{ctxMenu.kind === "node" ? (
|
||||
<>
|
||||
<li role="none">
|
||||
<button
|
||||
type="button"
|
||||
className="topo-ctx__item"
|
||||
role="menuitem"
|
||||
disabled={discovering}
|
||||
onClick={() => discoverOneFor(selectedNode)}
|
||||
>
|
||||
{t("topology.discoverOne")}
|
||||
</button>
|
||||
</li>
|
||||
<li role="none">
|
||||
<button
|
||||
type="button"
|
||||
className="topo-ctx__item"
|
||||
role="menuitem"
|
||||
onClick={() => openWebcrtFor(selectedNode)}
|
||||
>
|
||||
{t("topology.openWebcrt")}
|
||||
</button>
|
||||
</li>
|
||||
<li role="none">
|
||||
<button
|
||||
type="button"
|
||||
className="topo-ctx__item"
|
||||
role="menuitem"
|
||||
onClick={() => openNeFor(selectedNode)}
|
||||
>
|
||||
{t("topology.openNe")}
|
||||
</button>
|
||||
</li>
|
||||
<li className="topo-ctx__sep" aria-hidden />
|
||||
<li role="none">
|
||||
<button
|
||||
type="button"
|
||||
className="topo-ctx__item topo-ctx__item--danger"
|
||||
role="menuitem"
|
||||
onClick={() => removeNodeById(ctxMenu.id)}
|
||||
>
|
||||
{t("topology.removeNode")}
|
||||
</button>
|
||||
</li>
|
||||
</>
|
||||
) : (
|
||||
<li role="none">
|
||||
<button
|
||||
type="button"
|
||||
className="topo-ctx__item topo-ctx__item--danger"
|
||||
role="menuitem"
|
||||
onClick={() => removeEdgeById(ctxMenu.id)}
|
||||
>
|
||||
{t("topology.removeEdge")}
|
||||
</button>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue