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

Split topology page into modules and hooks; add SVG/XML export.

Browse source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
oliver 2026-08-11 22:00:38 +08:00
parent 54ca265430
commit b1aee86701
31 changed files with 6874 additions and 4697 deletions
Download patch file Download diff file Expand all files Collapse all files

8
web/src/i18n/en.ts
View file

@ -1601,6 +1601,14 @@ const en = {
edgeDiscovered: "LLDP",
edgeStale: "Missing",
fit: "Fit view",
export: "Export",
exportSvg: "SVG vector",
exportXml: "XML data",
exporting: "Exporting…",
exportEmpty: "Nothing on the canvas to export",
exportedSvg: "SVG exported",
exportedXml: "XML exported",
exportFailed: "Export failed: {{detail}}",
liveSync: "Live sync",
liveSyncOn: "Syncing…",
liveSyncHint: "Poll the tree about every 5s and the open map every 3s (watch MCP create/draw). Off by default",

8
web/src/i18n/zh.ts
View file

@ -1586,6 +1586,14 @@ const zh = {
edgeDiscovered: "LLDP 发现",
edgeStale: "未发现",
fit: "适应画布",
export: "导出",
exportSvg: "SVG 矢量",
exportXml: "XML 数据",
exporting: "导出中…",
exportEmpty: "画布上没有可导出的内容",
exportedSvg: "已导出 SVG",
exportedXml: "已导出 XML",
exportFailed: "导出失败：{{detail}}",
liveSync: "实时同步",
liveSyncOn: "同步中…",
liveSyncHint: "开启后约每 5 秒刷新左侧树、每 3 秒刷新当前画布（观看 MCP 建图/画拓扑）；默认关闭",

67
web/src/index.css
View file

@ -6433,6 +6433,73 @@ pre {
color: #e2e8f0;
}
.topo-toolbar__export {
position: relative;
}
.topo-toolbar__export > summary {
list-style: none;
cursor: pointer;
user-select: none;
height: 30px;
padding: 0 10px;
border: 1px solid rgba(148, 163, 184, 0.28);
border-radius: 6px;
background: #0b1220;
color: #e2e8f0;
font-size: 12px;
font-weight: 600;
line-height: 1.2;
display: inline-flex;
align-items: center;
}
.topo-toolbar__export > summary::-webkit-details-marker {
display: none;
}
.topo-toolbar__export[open] > summary {
border-color: rgba(59, 130, 246, 0.55);
background: rgba(37, 99, 235, 0.22);
color: #93c5fd;
}
.topo-export-menu {
position: absolute;
top: calc(100% + 4px);
right: 0;
z-index: 20;
min-width: 140px;
padding: 4px;
border: 1px solid rgba(148, 163, 184, 0.28);
border-radius: 8px;
background: #0b1220;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.45);
}
.topo-export-menu__btn {
display: block;
width: 100%;
padding: 8px 10px;
border: 0;
border-radius: 6px;
background: transparent;
color: #e2e8f0;
font-size: 12px;
text-align: left;
cursor: pointer;
}
.topo-export-menu__btn:hover:not(:disabled) {
background: rgba(37, 99, 235, 0.22);
color: #93c5fd;
}
.topo-export-menu__btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.topo-mode-hint {
position: absolute;
top: 10px;

5282
web/src/pages/TopologyPage.tsx
View file

File diff suppressed because it is too large Load diff

439
web/src/pages/topology/TopologyCtxMenu.tsx Normal file
View file

@ -0,0 +1,439 @@
import type { RefObject } from "react";
import { createPortal } from "react-dom";
import type { Edge, Node } from "@xyflow/react";
import { useI18n } from "../../i18n";
import type { CtxMenu } from "./pageTypes";
import type { EdgeStyleData } from "./edgeStyle";
import { formatPortPairLabel } from "./linkDisplay";
import { isPlaceholderSource } from "./searchUtils";
import type { NeNodeData } from "./TopologyReactFlowView";
export type ResolvedEdgeStyle = {
stroke: string;
strokeWidth: number;
strokeDasharray?: string;
};
export type TopologyCtxMenuProps = {
ctxMenu: CtxMenu;
menuRef: RefObject<HTMLUListElement | null>;
portalTarget: HTMLElement | null;
fullscreen: boolean;
selectedNodeCount: number;
selectedNode: Node<NeNodeData> | null;
selectedEdge: Edge | null;
selectedEdgeData: EdgeStyleData;
selectedEdgeResolved: ResolvedEdgeStyle | null;
selectedEdgeSourceNode: Node<NeNodeData> | null;
selectedEdgeTargetNode: Node<NeNodeData> | null;
expandPhysicalLinks: boolean;
discovering: boolean;
isWorldFlatCanvas: boolean;
createRegionPending: boolean;
onClose: () => void;
onToggleFullscreen: () => void;
onRemoveSelected: () => void;
onOpenCreateNe: (flowX: number, flowY: number) => void;
onPromptNewSubRegion: () => void;
onRenameSelectedNode: () => void;
onDiscoverOne: (node: Node<NeNodeData> | null) => void;
onOpenWebcrt: (node: Node<NeNodeData> | null) => void;
onOpenNe: (node: Node<NeNodeData> | null) => void;
onPurgePlaceholder: (id: string) => void;
onRemoveNode: (id: string) => void;
onExpandPhysicalLinks: () => void;
onPushHistory: () => void;
onPatchSelectedEdgeStyle: (
patch: Partial<EdgeStyleData>,
opts?: { skipHistory?: boolean },
) => void;
onOpenPortTraffic: (edge: Edge | null) => void;
onRemoveEdge: (id: string) => void;
};
export function TopologyCtxMenu({
ctxMenu,
menuRef,
portalTarget,
fullscreen,
selectedNodeCount,
selectedNode,
selectedEdge,
selectedEdgeData,
selectedEdgeResolved,
selectedEdgeSourceNode,
selectedEdgeTargetNode,
expandPhysicalLinks,
discovering,
isWorldFlatCanvas,
createRegionPending,
onClose,
onToggleFullscreen,
onRemoveSelected,
onOpenCreateNe,
onPromptNewSubRegion,
onRenameSelectedNode,
onDiscoverOne,
onOpenWebcrt,
onOpenNe,
onPurgePlaceholder,
onRemoveNode,
onExpandPhysicalLinks,
onPushHistory,
onPatchSelectedEdgeStyle,
onOpenPortTraffic,
onRemoveEdge,
}: TopologyCtxMenuProps) {
const { t } = useI18n();
return createPortal(
<ul
ref={menuRef}
className={`topo-ctx${ctxMenu.kind === "edge" ? " topo-ctx--edge" : ""}`}
style={{ left: ctxMenu.x, top: ctxMenu.y }}
role="menu"
onContextMenu={(e) => e.preventDefault()}
>
{ctxMenu.kind === "selection" ? (
<>
<li className="topo-ctx__head" role="presentation">
{t("topology.selectionMenu")}
</li>
<li role="none">
<button
type="button"
className="topo-ctx__item"
role="menuitem"
onClick={() => {
onClose();
void onToggleFullscreen();
}}
>
{fullscreen ? t("topology.exitFullscreen") : t("topology.fullscreen")}
</button>
</li>
<li role="none">
<button
type="button"
className="topo-ctx__item topo-ctx__item--danger"
role="menuitem"
onClick={() => onRemoveSelected()}
>
{t("topology.removeSelected").replace("{{count}}", String(selectedNodeCount))}
</button>
</li>
</>
) : ctxMenu.kind === "pane" ? (
<>
<li className="topo-ctx__head" role="presentation">
{t("topology.paneMenu")}
</li>
<li role="none">
<button
type="button"
className="topo-ctx__item"
role="menuitem"
disabled={isWorldFlatCanvas}
onClick={() => onOpenCreateNe(ctxMenu.flowX, ctxMenu.flowY)}
>
{t("topology.createNe")}
</button>
</li>
{!isWorldFlatCanvas ? (
<li role="none">
<button
type="button"
className="topo-ctx__item"
role="menuitem"
disabled={createRegionPending}
onClick={() => onPromptNewSubRegion()}
>
{t("topology.newSubRegion")}
</button>
</li>
) : null}
<li role="none">
<button
type="button"
className="topo-ctx__item"
role="menuitem"
onClick={() => {
onClose();
void onToggleFullscreen();
}}
>
{fullscreen ? t("topology.exitFullscreen") : t("topology.fullscreen")}
</button>
</li>
</>
) : ctxMenu.kind === "node" ? (
<>
<li className="topo-ctx__head" role="presentation">
{t("topology.nodeMenu")}
</li>
<li role="none">
<button
type="button"
className="topo-ctx__item"
role="menuitem"
onClick={() => {
onClose();
void onToggleFullscreen();
}}
>
{fullscreen ? t("topology.exitFullscreen") : t("topology.fullscreen")}
</button>
</li>
<li role="none">
<button
type="button"
className="topo-ctx__item"
role="menuitem"
onClick={onRenameSelectedNode}
>
{t("topology.renameNode")}
</button>
</li>
<li role="none">
<button
type="button"
className="topo-ctx__item"
role="menuitem"
disabled={discovering}
onClick={() => onDiscoverOne(selectedNode)}
>
{t("topology.discoverOne")}
</button>
</li>
<li role="none">
<button
type="button"
className="topo-ctx__item"
role="menuitem"
onClick={() => onOpenWebcrt(selectedNode)}
>
{t("topology.openWebcrt")}
</button>
</li>
<li role="none">
<button
type="button"
className="topo-ctx__item"
role="menuitem"
onClick={() => onOpenNe(selectedNode)}
>
{t("topology.openNe")}
</button>
</li>
<li className="topo-ctx__sep" aria-hidden />
{selectedNode &&
isPlaceholderSource(selectedNode.data.managed_source, selectedNode.data.ne_ip) ? (
<li role="none">
<button
type="button"
className="topo-ctx__item topo-ctx__item--danger"
role="menuitem"
onClick={() => void onPurgePlaceholder(ctxMenu.id)}
>
{t("topology.deletePlaceholder")}
</button>
</li>
) : null}
<li role="none">
<button
type="button"
className="topo-ctx__item topo-ctx__item--danger"
role="menuitem"
onClick={() => onRemoveNode(ctxMenu.id)}
>
{t("topology.removeNode")}
</button>
</li>
</>
) : (
<>
<li className="topo-ctx__head" role="presentation">
{t("topology.edgeMenu")}
</li>
<li role="none">
<button
type="button"
className="topo-ctx__item"
role="menuitem"
onClick={() => {
onClose();
void onToggleFullscreen();
}}
>
{fullscreen ? t("topology.exitFullscreen") : t("topology.fullscreen")}
</button>
</li>
<li className="topo-ctx__section" role="none">
<div className="topo-ctx__style" onMouseDown={(e) => e.stopPropagation()}>
<div className="topo-ctx__style-title">{t("topology.edgeStyle")}</div>
{selectedEdgeResolved ? (
<div className="topo-ctx__style-grid">
{Number(selectedEdgeData.member_count || 1) > 1 ? (
<div className="topo-ctx__style-members">
<div className="topo-ctx__style-title">
{t("topology.linkMembers").replace(
"{{count}}",
String(selectedEdgeData.member_count || 0),
)}
</div>
<ul className="topo-ctx__member-list">
{(selectedEdgeData.members || []).map((m) => (
<li key={m.id}>
{formatPortPairLabel(m.a_port, m.b_port, m.display_label) ||
m.id.slice(0, 8)}
</li>
))}
</ul>
{!expandPhysicalLinks ? (
<button
type="button"
className="btn btn--sm"
onClick={() => {
onExpandPhysicalLinks();
onClose();
}}
>
{t("topology.expandPhysicalLinks")}
</button>
) : null}
</div>
) : null}
<label className="topo-ctx__style-row">
<span>
{(selectedEdgeSourceNode?.data.label ||
selectedEdgeSourceNode?.data.ne_ip ||
t("topology.endpointA")) +
" · " +
t("topology.port")}
</span>
<input
type="text"
className="topo-ctx__style-input"
value={selectedEdgeData.source_port || ""}
placeholder="?"
disabled={
Number(selectedEdgeData.member_count || 1) > 1 && !expandPhysicalLinks
}
onFocus={() => onPushHistory()}
onChange={(e) =>
onPatchSelectedEdgeStyle({ source_port: e.target.value }, { skipHistory: true })
}
/>
</label>
<label className="topo-ctx__style-row">
<span>
{(selectedEdgeTargetNode?.data.label ||
selectedEdgeTargetNode?.data.ne_ip ||
t("topology.endpointB")) +
" · " +
t("topology.port")}
</span>
<input
type="text"
className="topo-ctx__style-input"
value={selectedEdgeData.target_port || ""}
placeholder="?"
disabled={
Number(selectedEdgeData.member_count || 1) > 1 && !expandPhysicalLinks
}
onFocus={() => onPushHistory()}
onChange={(e) =>
onPatchSelectedEdgeStyle({ target_port: e.target.value }, { skipHistory: true })
}
/>
</label>
<label className="topo-ctx__style-row">
<span>{t("topology.edgeColor")}</span>
<input
type="color"
value={selectedEdgeResolved.stroke}
onFocus={() => onPushHistory()}
onChange={(e) =>
onPatchSelectedEdgeStyle(
{ stroke_color: e.target.value },
{ skipHistory: true },
)
}
/>
</label>
<label className="topo-ctx__style-row">
<span>{t("topology.edgeLineStyle")}</span>
<select
value={
selectedEdgeData.line_style ||
(selectedEdgeResolved.strokeDasharray ? "dashed" : "solid")
}
onChange={(e) => onPatchSelectedEdgeStyle({ line_style: e.target.value })}
>
<option value="solid">{t("topology.edgeLineSolid")}</option>
<option value="dashed">{t("topology.edgeLineDashed")}</option>
<option value="dotted">{t("topology.edgeLineDotted")}</option>
</select>
</label>
<label className="topo-ctx__style-row">
<span>{t("topology.edgeWidth")}</span>
<select
value={String(
Number(selectedEdgeData.stroke_width || 0) > 0
? Number(selectedEdgeData.stroke_width)
: Math.round(Number(selectedEdgeResolved.strokeWidth || 2)),
)}
onChange={(e) =>
onPatchSelectedEdgeStyle({ stroke_width: Number(e.target.value) || 0 })
}
>
{[1, 2, 3, 4, 5, 6, 8].map((w) => (
<option key={w} value={w}>
{w}px
</option>
))}
</select>
</label>
</div>
) : null}
</div>
</li>
<li className="topo-ctx__sep" aria-hidden />
<li role="none">
<button
type="button"
className="topo-ctx__item"
role="menuitem"
onClick={() => onOpenPortTraffic(selectedEdge)}
>
{t("topology.openPortTraffic")}
</button>
</li>
<li role="none">
<button
type="button"
className="topo-ctx__item"
role="menuitem"
onClick={() =>
onPatchSelectedEdgeStyle({ stroke_color: "", stroke_width: 0, line_style: "" })
}
>
{t("topology.edgeStyleReset")}
</button>
</li>
<li role="none">
<button
type="button"
className="topo-ctx__item topo-ctx__item--danger"
role="menuitem"
onClick={() => onRemoveEdge(ctxMenu.id)}
>
{t("topology.removeEdge")}
</button>
</li>
</>
)}
</ul>,
portalTarget || document.body,
);
}

118
web/src/pages/topology/TopologyDiscoverPanel.tsx Normal file
View file

@ -0,0 +1,118 @@
import type { TopologyDiscoverOut } from "../../types";
import { useI18n } from "../../i18n";
import { openOrFocusModule } from "../../utils/moduleWindows";
export type DiscoverProgress = {
index: number;
total: number;
neName: string;
neIp: string;
edgesAdded: number;
edgesUpdated: number;
};
export type DiscoverSummary = {
scanned: number;
added: number;
updated: number;
missing: number;
failed: number;
};
export type TopologyDiscoverPanelProps = {
discovering: boolean;
discoverProgress: DiscoverProgress;
discoverPct: number;
discoverReport: TopologyDiscoverOut | null;
discoverError: string;
hasResults: boolean;
discoverSummary: DiscoverSummary;
onCancelDiscover: () => void;
onClose: () => void;
};
export function TopologyDiscoverPanel({
discovering,
discoverProgress,
discoverPct,
discoverReport,
discoverError,
hasResults,
discoverSummary,
onCancelDiscover,
onClose,
}: TopologyDiscoverPanelProps) {
const { t } = useI18n();
return (
<div className="topo-discover">
<div className="topo-discover__head">
<strong>{t("topology.discoverReport")}</strong>
<button
type="button"
className="btn btn--sm btn--ghost"
onClick={() => {
if (discovering) {
void onCancelDiscover();
return;
}
onClose();
}}
>
{discovering ? t("topology.discoverCancel") : t("topology.discoverClose")}
</button>
</div>
{discovering && discoverProgress.total > 0 ? (
<div className="topo-discover__progress" aria-live="polite">
<div className="topo-discover__bar">
<div className="topo-discover__bar-fill" style={{ width: `${discoverPct}%` }} />
</div>
<div className="topo-discover__progress-meta">
<span>
{t("topology.discoverProgressLive")
.replace("{{index}}", String(discoverProgress.index))
.replace("{{total}}", String(discoverProgress.total))
.replace("{{name}}", discoverProgress.neName || discoverProgress.neIp || "?")}
</span>
<span>{discoverPct}%</span>
</div>
</div>
) : null}
{discovering && discoverProgress.total <= 0 ? (
<p className="panel__hint panel__hint--live">{t("topology.discoverNoTargets")}</p>
) : null}
{!discovering && discoverReport && discoverReport.scanned === 0 ? (
<p className="panel__hint">{t("topology.discoverNoTargets")}</p>
) : null}
{discoverError ? <p className="topo-discover__error">{discoverError}</p> : null}
{hasResults ? (
<>
<p className="topo-discover__summary">
{t("topology.discoverSummary")
.replace("{{scanned}}", String(discoverSummary.scanned))
.replace("{{added}}", String(discoverSummary.added))
.replace("{{updated}}", String(discoverSummary.updated))
.replace("{{stale}}", String(discoverSummary.missing))
.replace("{{failed}}", String(discoverSummary.failed))}
</p>
<p className="panel__hint">
<button
type="button"
className="btn btn--sm btn--ghost"
onClick={() => {
const jobId = String(discoverReport?.job_id || "").trim();
const qs = jobId ? `?job_id=${encodeURIComponent(jobId)}` : "";
openOrFocusModule({
moduleId: "network",
path: `/network/topology/lldp${qs}`,
});
}}
>
{t("topology.discoverGoLldp")}
</button>
</p>
</>
) : null}
</div>
);
}

314
web/src/pages/topology/TopologyHexBrowser.tsx Normal file
View file

@ -0,0 +1,314 @@
import { Fragment } from "react";
import type { TopologyTreeFolderItem, TopologyTreeViewItem } from "../../types";
import { useI18n } from "../../i18n";
import {
displayViewName,
folderNeCount,
formatNeCount,
isUmeWorldContainer,
regionDisplayName,
} from "./treeUtils";
import { LayerGlyph, RegionGlyph } from "./topologyIcons";
export type UmeWorldHexModules = {
drill: TopologyTreeFolderItem | null;
flatView: TopologyTreeViewItem | null;
};
export type TopologyHexBrowserProps = {
titleText: string;
breadcrumbFolders: TopologyTreeFolderItem[];
hexBrowseRegion: TopologyTreeFolderItem | null;
umeWorldHexModules: UmeWorldHexModules | null;
browseEntries: TopologyTreeViewItem[];
regions: TopologyTreeFolderItem[];
rootFolderId: string;
selectedFolderId: string;
mapId: string;
hotBrowseKey: string;
treeLoading: boolean;
treeFailed: boolean;
treeError: unknown;
createRegionPending: boolean;
onTreeRetry: () => void;
onHotBrowseKey: (key: string) => void;
onClearHotBrowseKey: (key: string) => void;
goRoot: () => void;
goRegion: (folderId: string) => void;
goUmeWorldNav: () => void;
goCanvas: (viewId: string, folderId: string) => void;
promptNewRegion: () => void;
promptNewSubRegion: () => void;
onSelectFolder: (folderId: string) => void;
};
export function TopologyHexBrowser({
titleText,
breadcrumbFolders,
hexBrowseRegion,
umeWorldHexModules,
browseEntries,
regions,
rootFolderId,
selectedFolderId,
mapId,
hotBrowseKey,
treeLoading,
treeFailed,
treeError,
createRegionPending,
onTreeRetry,
onHotBrowseKey,
onClearHotBrowseKey,
goRoot,
goRegion,
goUmeWorldNav,
goCanvas,
promptNewRegion,
promptNewSubRegion,
onSelectFolder,
}: TopologyHexBrowserProps) {
const { t } = useI18n();
const regionCountLabel = hexBrowseRegion
? isUmeWorldContainer(hexBrowseRegion) && umeWorldHexModules
? t("topology.browserRegionSub").replace(
"{{count}}",
String((umeWorldHexModules.drill ? 1 : 0) + (umeWorldHexModules.flatView ? 1 : 0)),
)
: t("topology.browserRegionSub").replace("{{count}}", String(browseEntries.length))
: t("topology.browserRegionsSub").replace("{{count}}", String(regions.length));
return (
<div className="topo-browser" aria-label={t("topology.browserTitle")}>
<div className="topo-browser__head">
<div>
{hexBrowseRegion ? (
<div className="topo-breadcrumb">
<button type="button" className="topo-breadcrumb__link" onClick={() => goRoot()}>
{t("topology.rootName")}
</button>
{breadcrumbFolders.map((folder, idx) => {
const isLast = idx === breadcrumbFolders.length - 1;
return (
<Fragment key={folder.id}>
<span className="topo-breadcrumb__sep">/</span>
{isLast ? (
<span className="topo-breadcrumb__current">{regionDisplayName(folder, t)}</span>
) : (
<button
type="button"
className="topo-breadcrumb__link"
onClick={() => goRegion(folder.id)}
>
{regionDisplayName(folder, t)}
</button>
)}
</Fragment>
);
})}
</div>
) : (
<strong>{titleText}</strong>
)}
<p className="topo-browser__sub">{regionCountLabel}</p>
</div>
</div>
{!hexBrowseRegion ? (
treeLoading ? (
<div className="topo-browser__empty topo-browser__empty--loading" role="status">
<span className="topo-loading-spinner" aria-hidden="true" />
<p>{t("topology.treeLoading")}</p>
</div>
) : treeFailed ? (
<div className="topo-browser__empty">
<p>{t("topology.treeLoadFailed")}</p>
{treeError ? <span className="muted"> ({String(treeError)})</span> : null}
<div className="topo-browser__empty-actions">
<button type="button" className="btn btn--sm btn--ghost" onClick={onTreeRetry}>
{t("topology.treeRetry")}
</button>
<button
type="button"
className="btn btn--sm"
onClick={promptNewRegion}
disabled={createRegionPending}
>
{t("topology.newRegion")}
</button>
</div>
</div>
) : regions.length === 0 ? (
<div className="topo-browser__empty">
<span className="topo-browser__empty-icon" aria-hidden="true">
<RegionGlyph size={36} />
</span>
<p>{t("topology.emptyMaps")}</p>
<button
type="button"
className="btn btn--sm"
onClick={promptNewRegion}
disabled={createRegionPending}
>
{t("topology.newRegion")}
</button>
</div>
) : (
<div className="topo-browser__grid topo-browser__grid--regions">
{regions.map((region, idx) => (
<button
key={region.id}
type="button"
className={`topo-region-hex topo-region-hex--tone-${idx % 5}${
selectedFolderId === region.id ? " is-selected" : ""
}${hotBrowseKey === `region:${region.id}` ? " is-hot" : ""}`}
onMouseEnter={() => onHotBrowseKey(`region:${region.id}`)}
onMouseLeave={() => onClearHotBrowseKey(`region:${region.id}`)}
onClick={() =>
isUmeWorldContainer(region) ? goUmeWorldNav() : goRegion(region.id)
}
title={t("topology.openRegion")}
>
<span className="topo-region-hex__icon" aria-hidden="true">
<RegionGlyph size={22} />
</span>
<span className="topo-region-hex__title">
<span className="topo-region-hex__name">{regionDisplayName(region, t)}</span>
<span className="topo-region-hex__meta">{formatNeCount(folderNeCount(region))}</span>
</span>
</button>
))}
<button
type="button"
className="topo-region-hex topo-region-hex--add"
onClick={promptNewRegion}
disabled={createRegionPending}
title={t("topology.newRegion")}
>
<span className="topo-region-hex__plus" aria-hidden="true">
+
</span>
<span className="topo-region-hex__name">{t("topology.newRegion")}</span>
</button>
</div>
)
) : isUmeWorldContainer(hexBrowseRegion) && umeWorldHexModules ? (
<div className="topo-browser__grid topo-browser__grid--regions">
{umeWorldHexModules.drill ? (
<button
key={umeWorldHexModules.drill.id}
type="button"
className={`topo-region-hex topo-region-hex--tone-0${
hotBrowseKey === `region:${umeWorldHexModules.drill.id}` ? " is-hot" : ""
}`}
onMouseEnter={() => onHotBrowseKey(`region:${umeWorldHexModules.drill!.id}`)}
onMouseLeave={() => onClearHotBrowseKey(`region:${umeWorldHexModules.drill!.id}`)}
onClick={() => goRegion(umeWorldHexModules.drill!.id)}
title={t("topology.openRegion")}
>
<span className="topo-region-hex__icon" aria-hidden="true">
<RegionGlyph size={22} />
</span>
<span className="topo-region-hex__title">
<span className="topo-region-hex__name">
{regionDisplayName(umeWorldHexModules.drill, t)}
</span>
<span className="topo-region-hex__meta">
{formatNeCount(folderNeCount(umeWorldHexModules.drill))}
</span>
</span>
</button>
) : null}
{umeWorldHexModules.flatView ? (
<button
key={umeWorldHexModules.flatView.id}
type="button"
className={`topo-region-hex topo-region-hex--tone-1${
hotBrowseKey === `view:${umeWorldHexModules.flatView.id}` ? " is-hot" : ""
}`}
onMouseEnter={() => onHotBrowseKey(`view:${umeWorldHexModules.flatView!.id}`)}
onMouseLeave={() => onClearHotBrowseKey(`view:${umeWorldHexModules.flatView!.id}`)}
onClick={() => goCanvas(umeWorldHexModules.flatView!.id, hexBrowseRegion.id)}
title={t("topology.openMap")}
>
<span className="topo-region-hex__icon" aria-hidden="true">
<RegionGlyph size={22} />
</span>
<span className="topo-region-hex__title">
<span className="topo-region-hex__name">{umeWorldHexModules.flatView.name}</span>
<span className="topo-region-hex__meta">
{formatNeCount(umeWorldHexModules.flatView.node_count)}
</span>
</span>
</button>
) : null}
</div>
) : (
<div className="topo-browser__grid topo-browser__grid--regions">
{(hexBrowseRegion.children || []).map((region, idx) => (
<button
key={region.id}
type="button"
className={`topo-region-hex topo-region-hex--tone-${idx % 5}${
selectedFolderId === region.id ? " is-selected" : ""
}${hotBrowseKey === `region:${region.id}` ? " is-hot" : ""}`}
onMouseEnter={() => onHotBrowseKey(`region:${region.id}`)}
onMouseLeave={() => onClearHotBrowseKey(`region:${region.id}`)}
onClick={() => goRegion(region.id)}
title={t("topology.openRegion")}
>
<span className="topo-region-hex__icon" aria-hidden="true">
<RegionGlyph size={22} />
</span>
<span className="topo-region-hex__title">
<span className="topo-region-hex__name">{regionDisplayName(region, t)}</span>
<span className="topo-region-hex__meta">{formatNeCount(folderNeCount(region))}</span>
</span>
</button>
))}
{browseEntries.map((v, idx) => {
const isPhysical = String(v.kind) === "physical";
const tone = isPhysical ? "physical" : String((idx + 1) % 5);
return (
<button
key={v.id}
type="button"
className={`topo-region-hex topo-region-hex--tone-${tone}${
mapId === v.id ? " is-selected" : ""
}${hotBrowseKey === `view:${v.id}` ? " is-hot" : ""}`}
onMouseEnter={() => onHotBrowseKey(`view:${v.id}`)}
onMouseLeave={() => onClearHotBrowseKey(`view:${v.id}`)}
onClick={() => goCanvas(v.id, hexBrowseRegion.id)}
title={t("topology.openMap")}
>
<span className="topo-region-hex__icon" aria-hidden="true">
<LayerGlyph role={isPhysical ? "core" : "aggregation"} size={22} />
</span>
<span className="topo-region-hex__title">
<span className="topo-region-hex__name">{displayViewName(v.name, t)}</span>
<span className="topo-region-hex__meta">{formatNeCount(v.node_count)}</span>
</span>
</button>
);
})}
{String(hexBrowseRegion.parent_id || "") !== rootFolderId ? (
<button
type="button"
className="topo-region-hex topo-region-hex--add"
onClick={() => {
onSelectFolder(hexBrowseRegion.id);
promptNewSubRegion();
}}
title={t("topology.newSubRegion")}
>
<span className="topo-region-hex__plus" aria-hidden="true">
+
</span>
<span className="topo-region-hex__name">{t("topology.newSubRegion")}</span>
</button>
) : null}
</div>
)}
</div>
);
}

545
web/src/pages/topology/TopologyModals.tsx Normal file
View file

@ -0,0 +1,545 @@
import type { DragEvent } from "react";
import type { TopologyOutsidePeer } from "../../types";
import { useI18n } from "../../i18n";
import type { PaletteItem, PaletteSource } from "./pageTypes";
export type CreateNeDialogState = {
flowX: number;
flowY: number;
name: string;
ip_address: string;
};
export type TopologyModalsProps = {
canvasMode: boolean;
newRootDialog: { name: string } | null;
onNewRootNameChange: (name: string) => void;
onCloseNewRoot: () => void;
onSubmitNewRoot: () => void;
createRegionPending: boolean;
createNeDialog: CreateNeDialogState | null;
createNeBusy: boolean;
onCreateNeChange: (patch: Partial<Pick<CreateNeDialogState, "name" | "ip_address">>) => void;
onCloseCreateNe: () => void;
onSubmitCreateNe: () => void;
outsidePeersOpen: boolean;
outsidePeers: TopologyOutsidePeer[];
outsidePeersVisible: TopologyOutsidePeer[];
outsidePeerQuery: string;
onOutsidePeerQueryChange: (q: string) => void;
outsidePeerSelectedIds: string[];
onOutsidePeerSelectedIdsChange: (ids: string[] | ((prev: string[]) => string[])) => void;
outsidePeerNameById: Map<string, string>;
outsidePeersAdding: boolean;
onCloseOutsidePeers: () => void;
onAddOutsidePeers: (ids: string[]) => void;
addNeOpen: boolean;
paletteSource: PaletteSource;
onPaletteSourceChange: (source: PaletteSource) => void;
keyword: string;
onKeywordChange: (keyword: string) => void;
paletteVisible: PaletteItem[];
paletteSelectedKeys: string[];
onPaletteSelectedKeysChange: (keys: string[] | ((prev: string[]) => string[])) => void;
paletteLoading: boolean;
paletteAdding: boolean;
onCloseAddNe: () => void;
onPaletteDragStart: (e: DragEvent, item: PaletteItem) => void;
onAddSelectedPalette: () => void;
};
export function TopologyModals({
canvasMode,
newRootDialog,
onNewRootNameChange,
onCloseNewRoot,
onSubmitNewRoot,
createRegionPending,
createNeDialog,
createNeBusy,
onCreateNeChange,
onCloseCreateNe,
onSubmitCreateNe,
outsidePeersOpen,
outsidePeers,
outsidePeersVisible,
outsidePeerQuery,
onOutsidePeerQueryChange,
outsidePeerSelectedIds,
onOutsidePeerSelectedIdsChange,
outsidePeerNameById,
outsidePeersAdding,
onCloseOutsidePeers,
onAddOutsidePeers,
addNeOpen,
paletteSource,
onPaletteSourceChange,
keyword,
onKeywordChange,
paletteVisible,
paletteSelectedKeys,
onPaletteSelectedKeysChange,
paletteLoading,
paletteAdding,
onCloseAddNe,
onPaletteDragStart,
onAddSelectedPalette,
}: TopologyModalsProps) {
const { t } = useI18n();
return (
<>
{newRootDialog ? (
<div
className="topo-modal"
role="dialog"
aria-modal="true"
aria-labelledby="topo-new-root-title"
>
<div className="topo-modal__backdrop" onClick={onCloseNewRoot} />
<div className="topo-modal__panel" style={{ maxWidth: 420 }}>
<div className="topo-modal__head">
<strong id="topo-new-root-title">{t("topology.newRegion")}</strong>
<button type="button" className="btn btn--sm btn--ghost" onClick={onCloseNewRoot}>
{t("topology.discoverClose")}
</button>
</div>
<p className="panel__hint topo-modal__hint">{t("topology.folderHint")}</p>
<div className="form-grid" style={{ padding: "0 16px 8px" }}>
<label>
<span className="form-label">{t("topology.newRegionPrompt")}</span>
<input
autoFocus
value={newRootDialog.name}
disabled={createRegionPending}
onChange={(e) => onNewRootNameChange(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter") onSubmitNewRoot();
}}
/>
</label>
</div>
<div className="topo-modal__foot">
<button
type="button"
className="btn btn--sm btn--ghost"
disabled={createRegionPending}
onClick={onCloseNewRoot}
>
{t("topology.discoverClose")}
</button>
<button
type="button"
className="btn btn--sm"
disabled={createRegionPending || !String(newRootDialog.name || "").trim()}
onClick={onSubmitNewRoot}
>
{createRegionPending ? "…" : t("topology.newRegion")}
</button>
</div>
</div>
</div>
) : null}
{createNeDialog && canvasMode ? (
<div
className="topo-modal"
role="dialog"
aria-modal="true"
aria-labelledby="topo-create-ne-title"
>
<div
className="topo-modal__backdrop"
onClick={() => {
if (createNeBusy) return;
onCloseCreateNe();
}}
/>
<div className="topo-modal__panel" style={{ maxWidth: 420 }}>
<div className="topo-modal__head">
<strong id="topo-create-ne-title">{t("topology.createNeTitle")}</strong>
<button
type="button"
className="btn btn--sm btn--ghost"
disabled={createNeBusy}
onClick={onCloseCreateNe}
>
{t("topology.discoverClose")}
</button>
</div>
<p className="panel__hint topo-modal__hint">{t("topology.createNeHint")}</p>
<div className="form-grid" style={{ padding: "0 16px 8px" }}>
<label>
<span className="form-label">
{t("topology.createNeName")}
<span className="form-label__required" aria-hidden="true">
{" "}
*
</span>
</span>
<input
autoFocus
value={createNeDialog.name}
placeholder={t("topology.createNeNamePh")}
disabled={createNeBusy}
onChange={(e) => onCreateNeChange({ name: e.target.value })}
onKeyDown={(e) => {
if (e.key === "Enter") void onSubmitCreateNe();
}}
/>
</label>
<label>
<span className="form-label">{t("topology.createNeIp")}</span>
<input
value={createNeDialog.ip_address}
placeholder={t("topology.createNeIpPh")}
disabled={createNeBusy}
onChange={(e) => onCreateNeChange({ ip_address: e.target.value })}
onKeyDown={(e) => {
if (e.key === "Enter") void onSubmitCreateNe();
}}
/>
</label>
</div>
<div className="topo-modal__foot">
<button
type="button"
className="btn btn--ghost"
disabled={createNeBusy}
onClick={onCloseCreateNe}
>
{t("topology.discoverClose")}
</button>
<button
type="button"
className="btn btn--primary"
disabled={createNeBusy}
onClick={() => void onSubmitCreateNe()}
>
{createNeBusy ? t("topology.createNeBusy") : t("topology.createNe")}
</button>
</div>
</div>
</div>
) : null}
{outsidePeersOpen && canvasMode ? (
<div
className="topo-modal"
role="dialog"
aria-modal="true"
aria-label={t("topology.outsidePeersTitle")}
>
<div
className="topo-modal__backdrop"
onClick={() => {
if (outsidePeersAdding) return;
onCloseOutsidePeers();
}}
/>
<div className="topo-modal__panel topo-modal__panel--wide">
<div className="topo-modal__head">
<strong>
{t("topology.outsidePeersTitle")}
<span className="topo-modal__count"> · {outsidePeers.length}</span>
</strong>
<button
type="button"
className="btn btn--sm btn--ghost"
disabled={outsidePeersAdding}
onClick={onCloseOutsidePeers}
>
{t("topology.discoverClose")}
</button>
</div>
<p className="panel__hint topo-modal__hint">{t("topology.outsidePeersHint")}</p>
<input
className="input"
value={outsidePeerQuery}
onChange={(e) => onOutsidePeerQueryChange(e.target.value)}
placeholder={t("topology.outsidePeersFilterPh")}
disabled={outsidePeersAdding}
autoFocus
/>
{outsidePeersVisible.length > 0 ? (
<div className="topo-modal__selectbar">
<label className="topo-modal__selectall">
<input
type="checkbox"
checked={
outsidePeersVisible.length > 0 &&
outsidePeersVisible.every((p) =>
outsidePeerSelectedIds.includes(p.fabric_node_id),
)
}
disabled={outsidePeersAdding}
onChange={(e) => {
if (e.target.checked) {
onOutsidePeerSelectedIdsChange((prev) => [
...new Set([
...prev,
...outsidePeersVisible.map((p) => p.fabric_node_id),
]),
]);
return;
}
const drop = new Set(outsidePeersVisible.map((p) => p.fabric_node_id));
onOutsidePeerSelectedIdsChange((prev) => prev.filter((id) => !drop.has(id)));
}}
aria-label={t("topology.selectAllVisible")}
/>
<span>{t("topology.selectAllVisible")}</span>
</label>
<span className="panel__hint">
{t("topology.selectedCount").replace(
"{{count}}",
String(outsidePeerSelectedIds.length),
)}
</span>
</div>
) : null}
<ul className="topo-palette topo-modal__list">
{outsidePeersVisible.length === 0 ? (
<li className="topo-palette__empty">
<span className="panel__hint">{t("topology.outsidePeersEmpty")}</span>
</li>
) : (
outsidePeersVisible.map((peer) => {
const checked = outsidePeerSelectedIds.includes(peer.fabric_node_id);
const viaName =
outsidePeerNameById.get(peer.via_node_id) || peer.via_node_id.slice(0, 8);
const title = peer.name || peer.ip || peer.fabric_node_id.slice(0, 8);
return (
<li key={peer.fabric_node_id}>
<div className={`topo-palette__row${checked ? " is-selected" : ""}`}>
<label className="topo-palette__check">
<input
type="checkbox"
checked={checked}
disabled={outsidePeersAdding}
onChange={(e) => {
onOutsidePeerSelectedIdsChange((prev) =>
e.target.checked
? [...new Set([...prev, peer.fabric_node_id])]
: prev.filter((id) => id !== peer.fabric_node_id),
);
}}
aria-label={title}
/>
</label>
<button
type="button"
className="topo-palette__item"
disabled={outsidePeersAdding}
onClick={() => {
onOutsidePeerSelectedIdsChange((prev) =>
prev.includes(peer.fabric_node_id)
? prev.filter((id) => id !== peer.fabric_node_id)
: [...prev, peer.fabric_node_id],
);
}}
>
<span className="topo-palette__name">{title}</span>
<span className="topo-palette__meta">
{[peer.ip, t("topology.outsidePeersVia").replace("{{name}}", viaName)]
.filter(Boolean)
.join(" · ")}
</span>
</button>
</div>
</li>
);
})
)}
</ul>
<div className="topo-modal__foot">
<button
type="button"
className="btn btn--sm btn--ghost"
disabled={outsidePeersAdding}
onClick={onCloseOutsidePeers}
>
{t("topology.discoverClose")}
</button>
<button
type="button"
className="btn btn--sm"
disabled={outsidePeerSelectedIds.length === 0 || outsidePeersAdding}
onClick={() => void onAddOutsidePeers(outsidePeerSelectedIds)}
>
{outsidePeersAdding
? t("topology.addingNe")
: t("topology.addSelected").replace(
"{{count}}",
String(outsidePeerSelectedIds.length),
)}
</button>
</div>
</div>
</div>
) : null}
{addNeOpen && canvasMode ? (
<div className="topo-modal" role="dialog" aria-modal="true" aria-label={t("topology.addNe")}>
<div
className="topo-modal__backdrop"
onClick={() => {
if (paletteAdding) return;
onCloseAddNe();
}}
/>
<div className="topo-modal__panel">
<div className="topo-modal__head">
<strong>{t("topology.addNe")}</strong>
<button
type="button"
className="btn btn--sm btn--ghost"
disabled={paletteAdding}
onClick={onCloseAddNe}
>
{t("topology.discoverClose")}
</button>
</div>
<p className="panel__hint topo-modal__hint">{t("topology.paletteHint")}</p>
<div className="topo-palette-source" role="tablist">
<button
type="button"
role="tab"
aria-selected={paletteSource === "managed"}
className={`topo-palette-source__btn${paletteSource === "managed" ? " is-active" : ""}`}
disabled={paletteAdding}
onClick={() => onPaletteSourceChange("managed")}
>
{t("topology.paletteManaged")}
</button>
<button
type="button"
role="tab"
aria-selected={paletteSource === "ume"}
className={`topo-palette-source__btn${paletteSource === "ume" ? " is-active" : ""}`}
disabled={paletteAdding}
onClick={() => onPaletteSourceChange("ume")}
>
{t("topology.paletteUme")}
</button>
</div>
<input
className="input"
value={keyword}
onChange={(e) => onKeywordChange(e.target.value)}
placeholder={t("topology.filterPh")}
disabled={paletteAdding}
autoFocus
/>
{paletteVisible.length > 0 ? (
<div className="topo-modal__selectbar">
<label className="topo-modal__selectall">
<input
type="checkbox"
checked={
paletteVisible.length > 0 &&
paletteVisible.every((item) => paletteSelectedKeys.includes(item.key))
}
disabled={paletteAdding}
onChange={(e) => {
if (e.target.checked) {
onPaletteSelectedKeysChange(paletteVisible.map((item) => item.key));
return;
}
onPaletteSelectedKeysChange([]);
}}
aria-label={t("topology.selectAllVisible")}
/>
<span>{t("topology.selectAllVisible")}</span>
</label>
<span className="panel__hint">
{t("topology.selectedCount").replace(
"{{count}}",
String(paletteSelectedKeys.length),
)}
</span>
</div>
) : null}
<ul className="topo-palette topo-modal__list">
{paletteLoading ? (
<li className="topo-palette__empty">
<span className="panel__hint">{t("topology.paletteLoading")}</span>
</li>
) : paletteVisible.length === 0 ? (
<li className="topo-palette__empty">
<span className="panel__hint">{t("topology.paletteEmpty")}</span>
</li>
) : (
paletteVisible.map((item) => {
const checked = paletteSelectedKeys.includes(item.key);
return (
<li key={item.key}>
<div className={`topo-palette__row${checked ? " is-selected" : ""}`}>
<label className="topo-palette__check">
<input
type="checkbox"
checked={checked}
disabled={paletteAdding}
onChange={(e) => {
onPaletteSelectedKeysChange((prev) =>
e.target.checked
? [...new Set([...prev, item.key])]
: prev.filter((key) => key !== item.key),
);
}}
aria-label={item.name}
/>
</label>
<button
type="button"
className="topo-palette__item"
draggable={!paletteAdding}
disabled={paletteAdding}
onClick={() => {
onPaletteSelectedKeysChange((prev) =>
prev.includes(item.key)
? prev.filter((key) => key !== item.key)
: [...prev, item.key],
);
}}
onDragStart={(e) => onPaletteDragStart(e, item)}
title={t("topology.paletteDragHint")}
>
<span className="topo-palette__name">{item.name}</span>
<span className="topo-palette__meta">{item.meta}</span>
</button>
</div>
</li>
);
})
)}
</ul>
<div className="topo-modal__foot">
<button
type="button"
className="btn btn--sm btn--ghost"
disabled={paletteAdding}
onClick={onCloseAddNe}
>
{t("topology.discoverClose")}
</button>
<button
type="button"
className="btn btn--sm"
disabled={paletteSelectedKeys.length === 0 || paletteAdding}
onClick={() => void onAddSelectedPalette()}
>
{paletteAdding
? t("topology.addingNe")
: t("topology.addSelected").replace(
"{{count}}",
String(paletteSelectedKeys.length),
)}
</button>
</div>
</div>
</div>
) : null}
</>
);
}

27
web/src/pages/topology/TopologyReactFlowView.tsx
View file

@ -64,31 +64,8 @@ const TopoDisplayContext = createContext<TopoDisplayOpts>({
const SEP = " / ";
function nodeIconTone(vendor: string, managedNeId: string, umeNeId = ""): string {
const hasManaged = Boolean(String(managedNeId || "").trim());
const hasUme = Boolean(String(umeNeId || "").trim());
if (!hasManaged && !hasUme) return "gray";
const v = String(vendor || "").trim().toLowerCase();
if (!v || v === "other" || v === "unknown" || v === "generic") {
return hasUme ? "zte" : "gray";
}
if (v.includes("cisco")) return "cisco";
if (v.includes("huawei")) return "huawei";
if (v.includes("zte")) return "zte";
if (v.includes("juniper")) return "juniper";
if (v.includes("nokia") || v.includes("alcatel")) return "nokia";
if (v.includes("ericsson")) return "ericsson";
if (v.includes("h3c") || v.includes("comware")) return "h3c";
if (v.includes("ruijie") || v.includes("锐捷")) return "ruijie";
if (v.includes("mikrotik")) return "mikrotik";
return hasUme ? "zte" : "gray";
}
function isPlaceholderSource(source: string | undefined, neIp: string): boolean {
const src = String(source || "").trim().toLowerCase();
if (src === "lldp" || src === "topology") return true;
return !String(neIp || "").trim() && Boolean(src);
}
import { isPlaceholderSource } from "./searchUtils";
import { nodeIconTone } from "./vendorTone";
export { isPlaceholderSource };

243
web/src/pages/topology/TopologySidebar.tsx Normal file
View file

@ -0,0 +1,243 @@
import type { MouseEvent as ReactMouseEvent, RefObject } from "react";
import type { FabricNodeSearchHit, TopologyTreeFolderItem } from "../../types";
import { useI18n } from "../../i18n";
import { WORLD_MAP_ENABLED } from "./constants";
import { isWorldFlatViewName } from "./treeUtils";
import { PlusIcon, SidebarFoldIcon } from "./topologyIcons";
import {
TopologyTreeNavFolder,
type TopologyTreeNavFolderProps,
} from "./TopologyTreeNavFolder";
export type TopologySidebarProps = {
collapsed: boolean;
resizing: boolean;
treeSearchRef: RefObject<HTMLDivElement | null>;
treeNeQuery: string;
onTreeNeQueryChange: (value: string) => void;
treeSearchOpen: boolean;
onTreeSearchOpen: (open: boolean) => void;
debouncedTreeNeQuery: string;
treeSearchFetching: boolean;
treeSearchItems: FabricNodeSearchHit[];
treeSearchTotal: number;
onJumpToSearchHit: (
hit: FabricNodeSearchHit,
view?: NonNullable<FabricNodeSearchHit["views"]>[number],
) => void;
promptNewRegion: () => void;
createRegionPending: boolean;
onCollapse: () => void;
onExpand: () => void;
treeRoot: TopologyTreeFolderItem | null | undefined;
treeLoading: boolean;
treeFailed: boolean;
treeError: unknown;
onTreeRetry: () => void;
regions: TopologyTreeFolderItem[];
treeNav: Omit<TopologyTreeNavFolderProps, "folder" | "depth">;
onResizeDown: (e: ReactMouseEvent<HTMLDivElement>) => void;
};
export function TopologySidebar({
collapsed,
resizing,
treeSearchRef,
treeNeQuery,
onTreeNeQueryChange,
treeSearchOpen,
onTreeSearchOpen,
debouncedTreeNeQuery,
treeSearchFetching,
treeSearchItems,
treeSearchTotal,
onJumpToSearchHit,
promptNewRegion,
createRegionPending,
onCollapse,
onExpand,
treeRoot,
treeLoading,
treeFailed,
treeError,
onTreeRetry,
regions,
treeNav,
onResizeDown,
}: TopologySidebarProps) {
const { t } = useI18n();
return (
<aside className="topo-sidebar" aria-label={t("topology.maps")}>
{collapsed ? (
<div className="topo-sidebar__rail-wrap">
<button
type="button"
className="topo-sidebar__rail"
title={t("topology.expandSidebar")}
aria-label={t("topology.expandSidebar")}
onClick={onExpand}
>
<span className="topo-sidebar__rail-icon" aria-hidden="true">
<SidebarFoldIcon expand />
</span>
</button>
</div>
) : (
<>
<div className="topo-sidebar__section">
<div className="topo-tree-search" ref={treeSearchRef}>
<div className="topo-tree-search__bar">
<input
className="input"
type="search"
value={treeNeQuery}
placeholder={t("topology.treeSearchPh")}
aria-label={t("topology.treeSearch")}
onChange={(e) => {
onTreeNeQueryChange(e.target.value);
onTreeSearchOpen(true);
}}
onFocus={() => onTreeSearchOpen(true)}
/>
<button
type="button"
className="topo-sidebar__icon-btn"
onClick={promptNewRegion}
disabled={createRegionPending}
title={t("topology.newRegion")}
aria-label={t("topology.newRegion")}
>
<PlusIcon />
</button>
<button
type="button"
className="topo-sidebar__icon-btn"
title={t("topology.collapseSidebar")}
aria-label={t("topology.collapseSidebar")}
onClick={onCollapse}
>
<SidebarFoldIcon />
</button>
</div>
{treeSearchOpen && treeNeQuery.trim() ? (
<div className="topo-tree-search__panel" role="listbox">
{debouncedTreeNeQuery.length < 1 || treeSearchFetching ? (
<p className="topo-tree-search__hint muted">…</p>
) : !treeSearchItems.length ? (
<p className="topo-tree-search__hint muted">{t("topology.treeSearchEmpty")}</p>
) : (
treeSearchItems.map((hit) => {
const views = hit.views || [];
const title = hit.name || hit.ip || hit.id.slice(0, 8);
return (
<div key={hit.id} className="topo-tree-search__item">
<button
type="button"
className="topo-tree-search__ne"
onClick={() => onJumpToSearchHit(hit)}
title={
views.length
? t("topology.locateOnCanvas")
: t("topology.treeSearchNotOnMap")
}
>
<span className="topo-tree-search__name">{title}</span>
{hit.ip ? (
<span className="topo-tree-search__ip muted">{hit.ip}</span>
) : null}
{!views.length ? (
<span className="topo-tree-search__meta muted">
{t("topology.treeSearchNoViews")}
</span>
) : (
<span className="topo-tree-search__meta muted">
{t("topology.treeSearchViewCount").replace(
"{{count}}",
String(views.length),
)}
</span>
)}
</button>
{views.length > 0 ? (
<div className="topo-tree-search__views">
{views
.filter(
(v) => WORLD_MAP_ENABLED || !isWorldFlatViewName(v.view_name),
)
.map((v) => (
<button
key={`${hit.id}-${v.view_id}`}
type="button"
className="topo-tree-search__view"
onClick={() => onJumpToSearchHit(hit, v)}
title={`${v.folder_name ? `${v.folder_name} / ` : ""}${v.view_name}`}
>
{v.folder_name
? `${v.folder_name} / ${v.view_name || v.view_id.slice(0, 8)}`
: v.view_name || v.view_id.slice(0, 8)}
</button>
))}
</div>
) : null}
</div>
);
})
)}
{treeSearchTotal > 30 ? (
<p className="topo-tree-search__hint muted">
{t("topology.treeSearchTruncated").replace(
"{{total}}",
String(treeSearchTotal),
)}
</p>
) : null}
</div>
) : null}
</div>
{!treeRoot ? (
<p className="panel__hint topo-tree-status" role="status">
{treeLoading ? (
<>
<span className="topo-loading-spinner" aria-hidden="true" />
{t("topology.treeLoading")}
</>
) : treeFailed ? (
<>
{t("topology.treeLoadFailed")}
{treeError ? <span className="muted"> ({String(treeError)})</span> : null}{" "}
<button type="button" className="btn btn--sm btn--ghost" onClick={onTreeRetry}>
{t("topology.treeRetry")}
</button>
</>
) : (
t("topology.emptyMaps")
)}
</p>
) : regions.length === 0 ? (
<p className="panel__hint">{t("topology.emptyMaps")}</p>
) : (
<div className="topo-region-list-scroll">
<ul className="topo-map-list topo-region-list">
{regions.map((region) => (
<TopologyTreeNavFolder key={region.id} folder={region} depth={0} {...treeNav} />
))}
</ul>
</div>
)}
</div>
</>
)}
{!collapsed ? (
<div
className={`topo-sidebar__resizer${resizing ? " is-dragging" : ""}`}
role="separator"
aria-orientation="vertical"
aria-label={t("topology.resizeSidebar")}
title={t("topology.resizeSidebar")}
onMouseDown={onResizeDown}
/>
) : null}
</aside>
);
}

322
web/src/pages/topology/TopologyToolbar.tsx Normal file
View file

@ -0,0 +1,322 @@
import { Fragment, type RefObject } from "react";
import type { Edge, Node, ReactFlowInstance } from "@xyflow/react";
import type { TopologyTreeFolderItem, TopologyTreeViewItem } from "../../types";
import { HelpHint } from "../../components/HelpHint";
import { useI18n } from "../../i18n";
import { displayViewName, isRegionCanvasFolder, regionDisplayName } from "./treeUtils";
import type { NeNodeData } from "./TopologyReactFlowView";
import type { ToolMode } from "./toolMode";
export type TopologyToolbarProps = {
breadcrumbFolders: TopologyTreeFolderItem[];
activeView: TopologyTreeViewItem | null | undefined;
activeRegion: TopologyTreeFolderItem | null | undefined;
rootFolderId: string;
dirty: boolean;
selectedNodes: Node<NeNodeData>[];
selectedEdgeId: string | null;
liveSync: boolean;
onLiveSyncToggle: () => void;
isWorldFlatCanvas: boolean;
onAddNe: () => void;
onCreateNe: (flowX: number, flowY: number) => void;
nodes: Node<NeNodeData>[];
rfRef: RefObject<ReactFlowInstance<Node<NeNodeData>, Edge> | null>;
onBackUp: () => void;
canUndo: boolean;
onUndo: () => void;
canRedo: boolean;
onRedo: () => void;
savePending: boolean;
onSave: () => void;
onFit: () => void;
exportMenuRef: RefObject<HTMLDetailsElement | null>;
exporting: boolean;
onExport: (kind: "svg" | "xml") => void;
mapId: string;
staleEdgeCount: number;
onRemoveStale: () => void;
toolMode: ToolMode;
onToolModeChange: (mode: ToolMode) => void;
onConnectClickReset: () => void;
fullscreen: boolean;
viewToolsToolbarSlotRef: (el: HTMLDivElement | null) => void;
outsidePeerCount: number;
onOpenOutsidePeers: () => void;
goRoot: () => void;
goRegion: (folderId: string) => void;
primaryViewOfFolder: (
folder: TopologyTreeFolderItem | null | undefined,
) => TopologyTreeViewItem | null | undefined;
};
export function TopologyToolbar({
breadcrumbFolders,
activeView,
activeRegion,
rootFolderId,
dirty,
selectedNodes,
selectedEdgeId,
liveSync,
onLiveSyncToggle,
isWorldFlatCanvas,
onAddNe,
onCreateNe,
nodes,
rfRef,
onBackUp,
canUndo,
onUndo,
canRedo,
onRedo,
savePending,
onSave,
onFit,
exportMenuRef,
exporting,
onExport,
mapId,
staleEdgeCount,
onRemoveStale,
toolMode,
onToolModeChange,
onConnectClickReset,
fullscreen,
viewToolsToolbarSlotRef,
outsidePeerCount,
onOpenOutsidePeers,
goRoot,
goRegion,
primaryViewOfFolder,
}: TopologyToolbarProps) {
const { t } = useI18n();
const handleCreateNe = () => {
let flowX = 80 + nodes.length * 24;
let flowY = 80 + nodes.length * 24;
if (rfRef.current) {
const pane = document.querySelector(".react-flow__pane");
const rect = pane?.getBoundingClientRect();
if (rect && rect.width > 0 && rect.height > 0) {
const center = rfRef.current.screenToFlowPosition({
x: rect.left + rect.width / 2,
y: rect.top + rect.height / 2,
});
flowX = center.x;
flowY = center.y;
}
}
onCreateNe(flowX, flowY);
};
return (
<div className="topo-toolbar">
<div className="topo-toolbar__row">
<div className="topo-toolbar__title">
<div className="topo-breadcrumb">
<button type="button" className="topo-breadcrumb__link" onClick={() => goRoot()}>
{t("topology.rootName")}
</button>
{breadcrumbFolders.map((folder, idx) => {
const isLast = idx === breadcrumbFolders.length - 1;
const primaryView = primaryViewOfFolder(folder);
const showExtraView =
isLast &&
Boolean(activeView) &&
!(
isRegionCanvasFolder(folder, rootFolderId) &&
primaryView?.id === activeView?.id
);
const asCurrent = isLast && !showExtraView;
return (
<Fragment key={folder.id}>
<span className="topo-breadcrumb__sep">/</span>
{asCurrent ? (
<span className="topo-breadcrumb__current">
{regionDisplayName(folder, t)}
{dirty ? " *" : ""}
</span>
) : (
<button
type="button"
className="topo-breadcrumb__link"
onClick={() => goRegion(folder.id)}
>
{regionDisplayName(folder, t)}
</button>
)}
</Fragment>
);
})}
{activeView &&
!(
activeRegion &&
isRegionCanvasFolder(activeRegion, rootFolderId) &&
primaryViewOfFolder(activeRegion)?.id === activeView.id
) ? (
<>
<span className="topo-breadcrumb__sep">/</span>
<span className="topo-breadcrumb__current">
{displayViewName(activeView.name, t)}
{dirty ? " *" : ""}
</span>
</>
) : null}
</div>
{selectedNodes.length > 0 || selectedEdgeId ? (
<span className="topo-toolbar__meta">
{selectedNodes.length > 0
? t("topology.selectedCount").replace("{{count}}", String(selectedNodes.length))
: t("topology.selectedEdge")}
</span>
) : null}
<HelpHint text={t("topology.canvasHint")} ariaLabel={t("common.help")} />
</div>
<div className="topo-toolbar__actions">
<button
type="button"
className={`btn btn--sm${liveSync ? "" : " btn--ghost"}`}
aria-pressed={liveSync}
title={t("topology.liveSyncHint")}
onClick={onLiveSyncToggle}
>
{liveSync ? t("topology.liveSyncOn") : t("topology.liveSync")}
</button>
<button
type="button"
className="btn btn--sm"
disabled={isWorldFlatCanvas}
title={isWorldFlatCanvas ? t("topology.worldMapNoDirectNes") : undefined}
onClick={onAddNe}
>
{t("topology.addNe")}
</button>
<button
type="button"
className="btn btn--sm"
disabled={isWorldFlatCanvas}
title={isWorldFlatCanvas ? t("topology.worldMapNoDirectNes") : undefined}
onClick={handleCreateNe}
>
{t("topology.createNe")}
</button>
<button type="button" className="btn btn--sm btn--ghost" onClick={onBackUp}>
{t("topology.backUp")}
</button>
<button
type="button"
className="btn btn--sm btn--ghost"
disabled={!canUndo}
onClick={onUndo}
title="Ctrl+Z"
>
{t("topology.undo")}
</button>
<button
type="button"
className="btn btn--sm btn--ghost"
disabled={!canRedo}
onClick={onRedo}
title="Ctrl+Y"
>
{t("topology.redo")}
</button>
<button
type="button"
className={`btn btn--sm${dirty ? "" : " btn--ghost"}`}
disabled={savePending || !dirty}
onClick={onSave}
title="Ctrl+S"
>
{savePending ? t("topology.saving") : dirty ? t("topology.saveDirty") : t("topology.save")}
</button>
<button
type="button"
className="btn btn--sm btn--ghost"
disabled={!isWorldFlatCanvas && nodes.length === 0}
onClick={onFit}
>
{t("topology.fit")}
</button>
<details className="topo-toolbar__export" ref={exportMenuRef}>
<summary>{exporting ? t("topology.exporting") : t("topology.export")}</summary>
<div className="topo-export-menu" role="menu" aria-label={t("topology.export")}>
<button
type="button"
className="topo-export-menu__btn"
role="menuitem"
disabled={exporting || (!isWorldFlatCanvas && nodes.length === 0)}
onClick={() => void onExport("svg")}
>
{t("topology.exportSvg")}
</button>
<button
type="button"
className="topo-export-menu__btn"
role="menuitem"
disabled={exporting || !mapId}
onClick={() => void onExport("xml")}
>
{t("topology.exportXml")}
</button>
</div>
</details>
<button
type="button"
className="btn btn--sm btn--ghost"
disabled={!staleEdgeCount}
title={t("topology.removeStaleHint")}
onClick={() => void onRemoveStale()}
>
{t("topology.removeStale").replace("{{count}}", String(staleEdgeCount))}
</button>
</div>
</div>
<div className="topo-toolbar__row topo-toolbar__row--tools">
<div className="topo-tools" role="toolbar" aria-label={t("topology.toolModes")}>
{(
[
["select", t("topology.toolSelect"), "V"],
["pan", t("topology.toolPan"), "H"],
["connect", t("topology.toolConnect"), "C"],
] as const
).map(([mode, label, key]) => (
<button
key={mode}
type="button"
className={`topo-tools__btn${toolMode === mode ? " is-active" : ""}`}
title={`${label} (${key})`}
aria-pressed={toolMode === mode}
onClick={() => {
onToolModeChange(mode);
onConnectClickReset();
}}
>
<span className="topo-tools__label">{label}</span>
<kbd className="topo-tools__key">{key}</kbd>
</button>
))}
</div>
{!fullscreen ? (
<div
className="topo-toolbar__cluster"
role="toolbar"
aria-label={t("topology.display")}
ref={viewToolsToolbarSlotRef}
/>
) : null}
{outsidePeerCount > 0 ? (
<button
type="button"
className="btn btn--sm btn--ghost topo-toolbar__outside-peers"
title={t("topology.outsidePeers").replace("{{count}}", String(outsidePeerCount))}
onClick={onOpenOutsidePeers}
>
{t("topology.outsidePeersView").replace("{{count}}", String(outsidePeerCount))}
</button>
) : null}
</div>
</div>
);
}

393
web/src/pages/topology/TopologyTreeNavFolder.tsx Normal file
View file

@ -0,0 +1,393 @@
import type { TopologyTreeFolderItem, TopologyTreeViewItem } from "../../types";
import { useI18n } from "../../i18n";
import { WORLD_MAP_ENABLED } from "./constants";
import {
displayViewName,
folderNeCount,
formatNeCount,
isManualRootMapFolder,
isRegionCanvasFolder,
isUmeStructuralFolder,
isUmeSyncedSubRegion,
isUmeWorldNavFolder,
isWorldDrillFolder,
isWorldFlatViewName,
regionDisplayName,
} from "./treeUtils";
import {
ChevronIcon,
CloseIcon,
LayerGlyph,
PencilIcon,
RegionGlyph,
} from "./topologyIcons";
export type TopologyTreeNavFolderProps = {
folder: TopologyTreeFolderItem;
depth: number;
treeRootId: string;
expandedIds: Record<string, boolean>;
mapId: string;
worldViewId: string;
selectedFolderId: string;
hotBrowseKey: string;
dirty: boolean;
onToggleExpand: (folderId: string, nextOpen: boolean) => void;
onHotBrowseKey: (key: string) => void;
onClearHotBrowseKey: (key: string) => void;
onWorldFocusClear: () => void;
goUmeWorldNav: () => void;
goRegion: (folderId: string) => void;
goCanvas: (viewId: string, folderId: string) => void;
promptRenameRegion: (folderId: string, name: string) => void;
promptRenameMap: (viewId: string, name: string) => void;
renameRegionPending: boolean;
renameMapPending: boolean;
onDeleteFolder: (folderId: string) => void;
deleteFolderPending: boolean;
onDeleteMap: (viewId: string) => void;
};
function ViewRow({
v,
folder,
umeNav,
mapId,
dirty,
hotBrowseKey,
renameMapPending,
onHotBrowseKey,
onClearHotBrowseKey,
onWorldFocusClear,
goCanvas,
promptRenameMap,
onDeleteMap,
}: {
v: TopologyTreeViewItem;
folder: TopologyTreeFolderItem;
umeNav: boolean;
mapId: string;
dirty: boolean;
hotBrowseKey: string;
renameMapPending: boolean;
onHotBrowseKey: (key: string) => void;
onClearHotBrowseKey: (key: string) => void;
onWorldFocusClear: () => void;
goCanvas: (viewId: string, folderId: string) => void;
promptRenameMap: (viewId: string, name: string) => void;
onDeleteMap: (viewId: string) => void;
}) {
const { t } = useI18n();
const isPhysical = String(v.kind) === "physical";
const viewHot = hotBrowseKey === `view:${v.id}`;
const viewActive = mapId === v.id;
return (
<li
key={v.id}
className={`topo-region-list__view${viewActive ? " is-active" : ""}${viewHot ? " is-hot" : ""}`}
>
<div
className="topo-map-list__row"
onMouseEnter={() => onHotBrowseKey(`view:${v.id}`)}
onMouseLeave={() => onClearHotBrowseKey(`view:${v.id}`)}
>
<span className="topo-region-list__chevron-spacer" aria-hidden="true" />
<button
type="button"
className="topo-map-list__item"
onClick={() => {
onWorldFocusClear();
goCanvas(v.id, folder.id);
}}
onDoubleClick={() => (!umeNav ? promptRenameMap(v.id, v.name) : undefined)}
title={!umeNav ? t("topology.renameHint") : undefined}
>
<span className="topo-map-list__name">
<span
className={`topo-region-list__glyph topo-dir__icon--${
isPhysical ? "core" : "aggregation"
}`}
aria-hidden="true"
>
<LayerGlyph role={isPhysical ? "core" : "aggregation"} size={13} />
</span>
<span className="topo-map-list__title">
{displayViewName(v.name, t)}
{viewActive && dirty ? " *" : ""}
</span>
<span className="topo-map-list__count">{formatNeCount(v.node_count)}</span>
</span>
</button>
{!umeNav ? (
<div className="topo-map-list__actions">
<button
type="button"
className="topo-map-list__icon"
title={t("topology.rename")}
aria-label={t("topology.rename")}
disabled={renameMapPending}
onClick={() => promptRenameMap(v.id, v.name)}
>
<PencilIcon />
</button>
<button
type="button"
className="topo-map-list__icon"
title={t("topology.deleteMap")}
aria-label={t("topology.deleteMap")}
disabled={isPhysical}
onClick={() => {
const msg = t("topology.deleteMapConfirm").replace("{{name}}", v.name);
if (window.confirm(msg)) onDeleteMap(v.id);
}}
>
<CloseIcon />
</button>
</div>
) : null}
</div>
</li>
);
}
export function TopologyTreeNavFolder({
folder,
depth,
treeRootId,
expandedIds,
mapId,
worldViewId,
selectedFolderId,
hotBrowseKey,
dirty,
onToggleExpand,
onHotBrowseKey,
onClearHotBrowseKey,
onWorldFocusClear,
goUmeWorldNav,
goRegion,
goCanvas,
promptRenameRegion,
promptRenameMap,
renameRegionPending,
renameMapPending,
onDeleteFolder,
deleteFolderPending,
onDeleteMap,
}: TopologyTreeNavFolderProps) {
const { t } = useI18n();
const kids = folder.children || [];
const containerFolder = folder.external_ref === "ume:world" || folder.name === "UME World";
const drillFolder = isWorldDrillFolder(folder);
const umeNav = isUmeWorldNavFolder(folder);
const canvasRegion = isRegionCanvasFolder(folder, treeRootId);
const visibleViews = (
canvasRegion
? (folder.views || []).filter((v) => String(v.kind) !== "physical")
: containerFolder
? (folder.views || []).filter((v) => isWorldFlatViewName(v.name))
: folder.views || []
).filter((v) => WORLD_MAP_ENABLED || !isWorldFlatViewName(v.name));
const hasKids = kids.length > 0 || visibleViews.length > 0;
const open = Boolean(expandedIds[folder.id]);
const viewActiveUnder =
(folder.views || []).some((v) => v.id === mapId) ||
(drillFolder && Boolean(worldViewId) && mapId === worldViewId);
const isSelected = selectedFolderId === folder.id;
const focused = viewActiveUnder || (isSelected && Boolean(mapId));
const regionActive = isSelected && !mapId;
const hot = hotBrowseKey === `region:${folder.id}`;
const canRenameFolder =
!isUmeStructuralFolder(folder) && (!folder.is_system || isManualRootMapFolder(folder));
const canDeleteFolder =
!isUmeStructuralFolder(folder) &&
!isManualRootMapFolder(folder) &&
(!folder.is_system || isUmeSyncedSubRegion(folder));
return (
<li
key={folder.id}
className={`topo-region-list__block${focused ? " is-branch-active" : ""}${
regionActive ? " is-active" : ""
}${hot ? " is-hot" : ""}`}
>
<div
className="topo-map-list__row topo-region-list__row"
onMouseEnter={() => onHotBrowseKey(`region:${folder.id}`)}
onMouseLeave={() => onClearHotBrowseKey(`region:${folder.id}`)}
>
<button
type="button"
className="topo-map-list__icon topo-region-list__chevron"
title={open ? t("topology.collapseRegion") : t("topology.expandRegion")}
aria-label={open ? t("topology.collapseRegion") : t("topology.expandRegion")}
aria-expanded={open}
disabled={!hasKids}
onClick={(e) => {
e.stopPropagation();
if (!hasKids) return;
onToggleExpand(folder.id, !open);
}}
>
<ChevronIcon open={open} />
</button>
<button
type="button"
className="topo-map-list__item"
onClick={() => {
if (containerFolder) {
goUmeWorldNav();
} else {
goRegion(folder.id);
}
}}
title={t("topology.openRegion")}
>
<span className="topo-map-list__name">
<span className="topo-region-list__glyph" aria-hidden="true">
<RegionGlyph size={14} />
</span>
<span className="topo-map-list__title">{regionDisplayName(folder, t)}</span>
<span className="topo-map-list__count">{formatNeCount(folderNeCount(folder))}</span>
</span>
</button>
{canRenameFolder || canDeleteFolder ? (
<div className="topo-map-list__actions">
{canRenameFolder ? (
<button
type="button"
className="topo-map-list__icon"
title={t("topology.renameRegion")}
aria-label={t("topology.renameRegion")}
disabled={renameRegionPending}
onClick={() => promptRenameRegion(folder.id, folder.name)}
>
<PencilIcon />
</button>
) : null}
{canDeleteFolder ? (
<button
type="button"
className="topo-map-list__icon"
title={t("topology.deleteRegion")}
aria-label={t("topology.deleteRegion")}
disabled={deleteFolderPending}
onClick={() => {
const msg = t("topology.deleteRegionConfirm").replace("{{name}}", folder.name);
if (window.confirm(msg)) onDeleteFolder(folder.id);
}}
>
<CloseIcon />
</button>
) : null}
</div>
) : null}
</div>
{open ? (
<ul className="topo-map-list topo-region-list__maps">
{containerFolder ? (
<>
{kids.map((child) => (
<TopologyTreeNavFolder
key={child.id}
folder={child}
depth={depth + 1}
treeRootId={treeRootId}
expandedIds={expandedIds}
mapId={mapId}
worldViewId={worldViewId}
selectedFolderId={selectedFolderId}
hotBrowseKey={hotBrowseKey}
dirty={dirty}
onToggleExpand={onToggleExpand}
onHotBrowseKey={onHotBrowseKey}
onClearHotBrowseKey={onClearHotBrowseKey}
onWorldFocusClear={onWorldFocusClear}
goUmeWorldNav={goUmeWorldNav}
goRegion={goRegion}
goCanvas={goCanvas}
promptRenameRegion={promptRenameRegion}
promptRenameMap={promptRenameMap}
renameRegionPending={renameRegionPending}
renameMapPending={renameMapPending}
onDeleteFolder={onDeleteFolder}
deleteFolderPending={deleteFolderPending}
onDeleteMap={onDeleteMap}
/>
))}
{visibleViews.map((v) => (
<ViewRow
key={v.id}
v={v}
folder={folder}
umeNav={umeNav}
mapId={mapId}
dirty={dirty}
hotBrowseKey={hotBrowseKey}
renameMapPending={renameMapPending}
onHotBrowseKey={onHotBrowseKey}
onClearHotBrowseKey={onClearHotBrowseKey}
onWorldFocusClear={onWorldFocusClear}
goCanvas={goCanvas}
promptRenameMap={promptRenameMap}
onDeleteMap={onDeleteMap}
/>
))}
</>
) : (
<>
{visibleViews.map((v) => (
<ViewRow
key={v.id}
v={v}
folder={folder}
umeNav={umeNav}
mapId={mapId}
dirty={dirty}
hotBrowseKey={hotBrowseKey}
renameMapPending={renameMapPending}
onHotBrowseKey={onHotBrowseKey}
onClearHotBrowseKey={onClearHotBrowseKey}
onWorldFocusClear={onWorldFocusClear}
goCanvas={goCanvas}
promptRenameMap={promptRenameMap}
onDeleteMap={onDeleteMap}
/>
))}
{kids.map((child) => (
<TopologyTreeNavFolder
key={child.id}
folder={child}
depth={depth + 1}
treeRootId={treeRootId}
expandedIds={expandedIds}
mapId={mapId}
worldViewId={worldViewId}
selectedFolderId={selectedFolderId}
hotBrowseKey={hotBrowseKey}
dirty={dirty}
onToggleExpand={onToggleExpand}
onHotBrowseKey={onHotBrowseKey}
onClearHotBrowseKey={onClearHotBrowseKey}
onWorldFocusClear={onWorldFocusClear}
goUmeWorldNav={goUmeWorldNav}
goRegion={goRegion}
goCanvas={goCanvas}
promptRenameRegion={promptRenameRegion}
promptRenameMap={promptRenameMap}
renameRegionPending={renameRegionPending}
renameMapPending={renameMapPending}
onDeleteFolder={onDeleteFolder}
deleteFolderPending={deleteFolderPending}
onDeleteMap={onDeleteMap}
/>
))}
</>
)}
</ul>
) : null}
</li>
);
}

558
web/src/pages/topology/TopologyViewTools.tsx Normal file
View file

@ -0,0 +1,558 @@
import type { RefObject } from "react";
import { createPortal } from "react-dom";
import { useQueryClient } from "@tanstack/react-query";
import type { Node } from "@xyflow/react";
import { queryKeys } from "../../constants/queryKeys";
import { useI18n } from "../../i18n";
import { updateLldpCollectPolicy } from "../../services/api";
import {
DEFAULT_CANVAS_BG,
DISCOVER_AUTO_ADD_KEY,
DISCOVER_PROJECT_NEIGHBORS_KEY,
SCALE_BUNDLE_WIDTH_KEY,
SEP,
SHOW_PLACEHOLDER_BADGE_KEY,
} from "./constants";
import {
DEFAULT_LABEL_COLORS,
DEFAULT_VENDOR_COLORS,
VENDOR_TONE_KEYS,
isHexColor,
loadCanvasBg,
loadLabelColors,
loadVendorColors,
persistAutoLayoutAfterDiscover,
persistBoolFlag,
persistCanvasBg,
persistLabelColors,
persistVendorColors,
type LabelColors,
type VendorColors,
} from "./displayPrefs";
import type { EdgeDefaultStyle, EdgeDefaults, EdgeLineStyle, EdgeSourceKind } from "./edgeStyle";
import type { alignNodes } from "./layoutGraph";
import type { NeNodeData } from "./TopologyReactFlowView";
export type AlignKind = Parameters<typeof alignNodes>[2];
export type TopologyViewToolsProps = {
fullscreen: boolean;
toolbarSlot: HTMLDivElement | null;
displayMenuRef: RefObject<HTMLDetailsElement | null>;
findBoxRef: RefObject<HTMLDivElement | null>;
hideIp: boolean;
onHideIpChange: (v: boolean) => void;
hideVendor: boolean;
onHideVendorChange: (v: boolean) => void;
showPlaceholderBadge: boolean;
onShowPlaceholderBadgeChange: (v: boolean) => void;
hidePorts: boolean;
onHidePortsChange: (v: boolean) => void;
expandPhysicalLinks: boolean;
onExpandPhysicalLinksChange: (v: boolean) => void;
scaleBundleWidth: boolean;
onScaleBundleWidthChange: (v: boolean) => void;
edgeFlow: boolean;
onEdgeFlowChange: (v: boolean) => void;
snapToGrid: boolean;
onSnapToGridChange: (v: boolean) => void;
autoLayoutAfterDiscover: boolean;
onAutoLayoutAfterDiscoverChange: (v: boolean) => void;
discoverAutoAddUnmatched: boolean;
onDiscoverAutoAddUnmatchedChange: (v: boolean) => void;
discoverProjectNeighbors: boolean;
onDiscoverProjectNeighborsChange: (v: boolean) => void;
canvasBg: string;
onCanvasBgChange: (v: string) => void;
labelColors: LabelColors;
onLabelColorsChange: (v: LabelColors) => void;
vendorColors: VendorColors;
onVendorColorsChange: (v: VendorColors) => void;
edgeDefaults: EdgeDefaults;
onUpdateEdgeDefault: (kind: EdgeSourceKind, patch: Partial<EdgeDefaultStyle>) => void;
onResetEdgeDefaults: () => void;
selectedNodeCount: number;
onAlign: (kind: AlignKind) => void;
mapId: string;
nodeCount: number;
canvasQuery: string;
onCanvasQueryChange: (v: string) => void;
findOpen: boolean;
onFindOpenChange: (v: boolean) => void;
findActiveIdx: number;
onFindActiveIdxChange: (v: number | ((i: number) => number)) => void;
canvasHits: Node<NeNodeData>[];
onFindOnCanvas: (nodeId?: string) => void;
};
export function TopologyViewTools(props: TopologyViewToolsProps) {
const { t } = useI18n();
const queryClient = useQueryClient();
const {
fullscreen,
toolbarSlot,
displayMenuRef,
findBoxRef,
hideIp,
onHideIpChange,
hideVendor,
onHideVendorChange,
showPlaceholderBadge,
onShowPlaceholderBadgeChange,
hidePorts,
onHidePortsChange,
expandPhysicalLinks,
onExpandPhysicalLinksChange,
scaleBundleWidth,
onScaleBundleWidthChange,
edgeFlow,
onEdgeFlowChange,
snapToGrid,
onSnapToGridChange,
autoLayoutAfterDiscover,
onAutoLayoutAfterDiscoverChange,
discoverAutoAddUnmatched,
onDiscoverAutoAddUnmatchedChange,
discoverProjectNeighbors,
onDiscoverProjectNeighborsChange,
canvasBg,
onCanvasBgChange,
labelColors,
onLabelColorsChange,
vendorColors,
onVendorColorsChange,
edgeDefaults,
onUpdateEdgeDefault,
onResetEdgeDefaults,
selectedNodeCount,
onAlign,
mapId,
nodeCount,
canvasQuery,
onCanvasQueryChange,
findOpen,
onFindOpenChange,
findActiveIdx,
onFindActiveIdxChange,
canvasHits,
onFindOnCanvas,
} = props;
const body = (
<>
<details className="topo-toolbar__display" ref={displayMenuRef}>
<summary>{t("topology.display")}</summary>
<div className="topo-display-toggles" role="group" aria-label={t("topology.display")}>
<label className="topo-display-toggles__item">
<input type="checkbox" checked={hideIp} onChange={(e) => onHideIpChange(e.target.checked)} />
{t("topology.hideIp")}
</label>
<label className="topo-display-toggles__item">
<input
type="checkbox"
checked={hideVendor}
onChange={(e) => onHideVendorChange(e.target.checked)}
/>
{t("topology.hideVendor")}
</label>
<label className="topo-display-toggles__item">
<input
type="checkbox"
checked={showPlaceholderBadge}
onChange={(e) => {
const next = e.target.checked;
onShowPlaceholderBadgeChange(next);
persistBoolFlag(SHOW_PLACEHOLDER_BADGE_KEY, next);
}}
/>
{t("topology.showPlaceholderBadge")}
</label>
<label className="topo-display-toggles__item">
<input type="checkbox" checked={hidePorts} onChange={(e) => onHidePortsChange(e.target.checked)} />
{t("topology.hidePorts")}
</label>
<label className="topo-display-toggles__item">
<input
type="checkbox"
checked={expandPhysicalLinks}
onChange={(e) => onExpandPhysicalLinksChange(e.target.checked)}
/>
{t("topology.expandPhysicalLinks")}
</label>
<label className="topo-display-toggles__item">
<input
type="checkbox"
checked={scaleBundleWidth}
disabled={expandPhysicalLinks}
onChange={(e) => {
const next = e.target.checked;
onScaleBundleWidthChange(next);
persistBoolFlag(SCALE_BUNDLE_WIDTH_KEY, next);
}}
/>
{t("topology.scaleBundleWidth")}
</label>
<label className="topo-display-toggles__item">
<input type="checkbox" checked={edgeFlow} onChange={(e) => onEdgeFlowChange(e.target.checked)} />
{t("topology.edgeFlow")}
</label>
<label className="topo-display-toggles__item">
<input type="checkbox" checked={snapToGrid} onChange={(e) => onSnapToGridChange(e.target.checked)} />
{t("topology.snapGrid")}
</label>
<label className="topo-display-toggles__item">
<input
type="checkbox"
checked={autoLayoutAfterDiscover}
onChange={(e) => {
const next = e.target.checked;
onAutoLayoutAfterDiscoverChange(next);
persistAutoLayoutAfterDiscover(next);
}}
/>
{t("topology.autoLayoutDiscover")}
</label>
<label className="topo-display-toggles__item">
<input
type="checkbox"
checked={discoverAutoAddUnmatched}
onChange={(e) => {
const next = e.target.checked;
onDiscoverAutoAddUnmatchedChange(next);
persistBoolFlag(DISCOVER_AUTO_ADD_KEY, next);
void updateLldpCollectPolicy({ auto_add_unmatched: next })
.then(() => {
void queryClient.invalidateQueries({ queryKey: queryKeys.lldpCollectDashboard });
})
.catch(() => {
/* local toggle still applies to this canvas discover */
});
}}
/>
{t("topology.discoverAutoAddUnmatched")}
</label>
<label className="topo-display-toggles__item">
<input
type="checkbox"
checked={discoverProjectNeighbors}
onChange={(e) => {
const next = e.target.checked;
onDiscoverProjectNeighborsChange(next);
persistBoolFlag(DISCOVER_PROJECT_NEIGHBORS_KEY, next);
}}
/>
{t("topology.discoverProjectNeighbors")}
</label>
<div className="topo-display-defaults topo-display-defaults--canvas-bg topo-display-defaults--colors">
<div className="topo-display-defaults__head">
<strong>{t("topology.canvasBg")}</strong>
<button
type="button"
className="btn btn--sm btn--ghost"
onClick={() => {
onCanvasBgChange(DEFAULT_CANVAS_BG);
persistCanvasBg(DEFAULT_CANVAS_BG);
}}
>
{t("topology.canvasBgReset")}
</button>
</div>
<div className="topo-display-defaults__row">
<span className="topo-display-defaults__name">{t("topology.canvasBgColor")}</span>
<input
type="color"
value={canvasBg}
title={t("topology.canvasBgColor")}
onChange={(e) => {
const next = e.target.value;
onCanvasBgChange(next);
persistCanvasBg(next);
}}
/>
<input
className="topo-toolbar__select topo-canvas-bg-hex"
value={canvasBg}
spellCheck={false}
aria-label={t("topology.canvasBgColor")}
onChange={(e) => {
const raw = e.target.value.trim();
if (!/^#[0-9a-fA-F]{0,6}$/.test(raw)) return;
onCanvasBgChange(raw);
if (isHexColor(raw)) persistCanvasBg(raw.toLowerCase());
}}
onBlur={() => {
if (!isHexColor(canvasBg)) onCanvasBgChange(loadCanvasBg());
}}
/>
</div>
</div>
<div className="topo-display-defaults topo-display-defaults--canvas-bg topo-display-defaults--colors">
<div className="topo-display-defaults__head">
<strong>{t("topology.textColors")}</strong>
<button
type="button"
className="btn btn--sm btn--ghost"
onClick={() => {
onLabelColorsChange({ ...DEFAULT_LABEL_COLORS });
persistLabelColors({ ...DEFAULT_LABEL_COLORS });
}}
>
{t("topology.textColorsReset")}
</button>
</div>
{(
[
["name", t("topology.labelColor")],
["edgeLabel", t("topology.edgeLabelColor")],
] as const
).map(([key, label]) => (
<div key={key} className="topo-display-defaults__row">
<span className="topo-display-defaults__name">{label}</span>
<input
type="color"
value={labelColors[key]}
title={label}
onChange={(e) => {
const next = { ...labelColors, [key]: e.target.value.toLowerCase() };
onLabelColorsChange(next);
persistLabelColors(next);
}}
/>
<input
className="topo-toolbar__select topo-canvas-bg-hex"
value={labelColors[key]}
spellCheck={false}
aria-label={label}
onChange={(e) => {
const raw = e.target.value.trim();
if (!/^#[0-9a-fA-F]{0,6}$/.test(raw)) return;
const next = { ...labelColors, [key]: raw };
onLabelColorsChange(next);
if (isHexColor(raw)) persistLabelColors({ ...next, [key]: raw.toLowerCase() });
}}
onBlur={() => {
if (!isHexColor(labelColors[key])) onLabelColorsChange(loadLabelColors());
}}
/>
</div>
))}
</div>
<div className="topo-display-defaults topo-display-defaults--canvas-bg topo-display-defaults--colors">
<div className="topo-display-defaults__head">
<strong>{t("topology.vendorColors")}</strong>
<button
type="button"
className="btn btn--sm btn--ghost"
onClick={() => {
onVendorColorsChange({ ...DEFAULT_VENDOR_COLORS });
persistVendorColors({ ...DEFAULT_VENDOR_COLORS });
}}
>
{t("topology.vendorColorsReset")}
</button>
</div>
{VENDOR_TONE_KEYS.map((key) => {
const label = t(`topology.vendorTone.${key}`);
return (
<div key={key} className="topo-display-defaults__row">
<span className="topo-display-defaults__name">{label}</span>
<input
type="color"
value={vendorColors[key]}
title={label}
onChange={(e) => {
const next = { ...vendorColors, [key]: e.target.value.toLowerCase() };
onVendorColorsChange(next);
persistVendorColors(next);
}}
/>
<input
className="topo-toolbar__select topo-canvas-bg-hex"
value={vendorColors[key]}
spellCheck={false}
aria-label={label}
onChange={(e) => {
const raw = e.target.value.trim();
if (!/^#[0-9a-fA-F]{0,6}$/.test(raw)) return;
const next = { ...vendorColors, [key]: raw };
onVendorColorsChange(next);
if (isHexColor(raw)) {
persistVendorColors({ ...next, [key]: raw.toLowerCase() });
}
}}
onBlur={() => {
if (!isHexColor(vendorColors[key])) onVendorColorsChange(loadVendorColors());
}}
/>
</div>
);
})}
</div>
<div className="topo-display-defaults">
<div className="topo-display-defaults__head">
<strong>{t("topology.edgeDefaults")}</strong>
<button type="button" className="btn btn--sm btn--ghost" onClick={onResetEdgeDefaults}>
{t("topology.edgeDefaultsReset")}
</button>
</div>
{(
[
["ume", t("topology.edgeUme")],
["discovered", t("topology.edgeDiscovered")],
["stale", t("topology.edgeStale")],
["manual", t("topology.edgeManual")],
] as const
).map(([kind, label]) => {
const d = edgeDefaults[kind];
return (
<div key={kind} className="topo-display-defaults__row">
<span className="topo-display-defaults__name">{label}</span>
<input
type="color"
value={d.stroke_color}
title={t("topology.edgeColor")}
onChange={(e) => onUpdateEdgeDefault(kind, { stroke_color: e.target.value })}
/>
<select
className="topo-toolbar__select"
aria-label={t("topology.edgeLineStyle")}
value={d.line_style}
onChange={(e) =>
onUpdateEdgeDefault(kind, {
line_style: e.target.value as EdgeLineStyle,
})
}
>
<option value="solid">{t("topology.edgeLineSolid")}</option>
<option value="dashed">{t("topology.edgeLineDashed")}</option>
<option value="dotted">{t("topology.edgeLineDotted")}</option>
</select>
<select
className="topo-toolbar__select"
aria-label={t("topology.edgeWidth")}
value={String(d.stroke_width)}
onChange={(e) =>
onUpdateEdgeDefault(kind, { stroke_width: Number(e.target.value) || 2 })
}
>
{[1, 2, 3, 4, 5, 6, 8].map((w) => (
<option key={w} value={w}>
{w}px
</option>
))}
</select>
</div>
);
})}
</div>
</div>
</details>
<select
className="topo-toolbar__select"
aria-label={t("topology.align")}
disabled={selectedNodeCount < 2}
defaultValue=""
onChange={(e) => {
const v = e.target.value as AlignKind | "";
e.target.value = "";
if (v) onAlign(v);
}}
>
<option value="" disabled>
{t("topology.align")}
</option>
<option value="left">{t("topology.alignLeft")}</option>
<option value="right">{t("topology.alignRight")}</option>
<option value="top">{t("topology.alignTop")}</option>
<option value="bottom">{t("topology.alignBottom")}</option>
<option value="h-center">{t("topology.alignHCenter")}</option>
<option value="v-center">{t("topology.alignVCenter")}</option>
<option value="h-distribute">{t("topology.alignHDistribute")}</option>
<option value="v-distribute">{t("topology.alignVDistribute")}</option>
</select>
<div
className="topo-toolbar__group topo-toolbar__group--find"
aria-label={t("topology.findNode")}
ref={findBoxRef}
>
<input
className="topo-toolbar__find"
value={canvasQuery}
onChange={(e) => onCanvasQueryChange(e.target.value)}
onFocus={() => {
if (canvasQuery.trim()) onFindOpenChange(true);
}}
onKeyDown={(e) => {
if (e.key === "ArrowDown") {
e.preventDefault();
if (!canvasHits.length) return;
onFindOpenChange(true);
onFindActiveIdxChange((i) => (i + 1) % canvasHits.length);
return;
}
if (e.key === "ArrowUp") {
e.preventDefault();
if (!canvasHits.length) return;
onFindOpenChange(true);
onFindActiveIdxChange((i) => (i - 1 + canvasHits.length) % canvasHits.length);
return;
}
if (e.key === "Escape") {
onFindOpenChange(false);
return;
}
if (e.key === "Enter") {
e.preventDefault();
onFindOnCanvas();
}
}}
placeholder={t("topology.findNodePh")}
disabled={!mapId || nodeCount === 0}
aria-label={t("topology.findNode")}
aria-autocomplete="list"
aria-expanded={findOpen}
/>
{findOpen && canvasQuery.trim() ? (
<div className="topo-find-suggest" role="listbox">
{canvasHits.length === 0 ? (
<div className="topo-find-suggest__empty">{t("topology.findNoMatch")}</div>
) : (
canvasHits.slice(0, 12).map((n, idx) => (
<button
key={n.id}
type="button"
role="option"
aria-selected={idx === findActiveIdx}
className={`topo-find-suggest__item${idx === findActiveIdx ? " is-active" : ""}`}
onMouseEnter={() => onFindActiveIdxChange(idx)}
onClick={() => onFindOnCanvas(n.id)}
>
<span className="topo-find-suggest__name">{n.data.label || n.id}</span>
<span className="topo-find-suggest__meta">
{[n.data.ne_ip, n.data.vendor].filter(Boolean).join(SEP)}
</span>
</button>
))
)}
{canvasHits.length > 12 ? (
<div className="topo-find-suggest__more">
{t("topology.findMore").replace("{{count}}", String(canvasHits.length - 12))}
</div>
) : null}
</div>
) : null}
</div>
</>
);
if (!fullscreen) {
if (!toolbarSlot) return null;
return createPortal(body, toolbarSlot);
}
return (
<div className="topo-view-tools" role="toolbar" aria-label={t("topology.display")}>
{body}
</div>
);
}

30
web/src/pages/topology/constants.ts Normal file
View file

@ -0,0 +1,30 @@
/** Flat world-map canvas (LOD / scatter). Temporarily offline in the UI. */
export const WORLD_MAP_ENABLED = false;
export const LAST_LEAF_KEY = "netx.topology.lastLeafViewId";
export const TREE_EXPAND_KEY = "netx.topology.treeExpanded";
export const SIDEBAR_WIDTH_KEY = "netx.topology.sidebarWidth";
export const SIDEBAR_WIDTH_DEFAULT = 260;
export const SIDEBAR_WIDTH_MIN = 180;
export const SIDEBAR_WIDTH_MAX = 560;
export const UNDO_MAX = 40;
export const PALETTE_DND = "application/x-netx-topo-palette";
export const SEP = " / ";
export const FIT_VIEW_OPTS = { padding: 0.2, includeHiddenNodes: true } as const;
export const WORLD_LOCATE_ZOOM = 0.22;
export const WORLD_LOCATE_HALF = 12000;
export const WORLD_FLAT_ACCUM_CAP = 8000;
export const EDGE_DEFAULTS_KEY = "netx.topology.edgeDefaults";
export const AUTO_LAYOUT_DISCOVER_KEY = "netx.topology.autoLayoutAfterDiscover";
export const DISCOVER_AUTO_ADD_KEY = "netx.topology.discoverAutoAddUnmatched.v2";
export const DISCOVER_PROJECT_NEIGHBORS_KEY = "netx.topology.discoverProjectNeighbors.v2";
export const SCALE_BUNDLE_WIDTH_KEY = "netx.topology.scaleBundleWidth";
export const SHOW_PLACEHOLDER_BADGE_KEY = "netx.topology.showPlaceholderBadge";
export const CANVAS_BG_KEY = "netx.topology.canvasBg";
export const DEFAULT_CANVAS_BG = "#0f172a";
export const LEGACY_CANVAS_BG = "#dbeafe";
export const LABEL_COLORS_KEY = "netx.topology.labelColors";
export const VENDOR_COLORS_KEY = "netx.topology.vendorColors";

146
web/src/pages/topology/displayPrefs.ts Normal file
View file

@ -0,0 +1,146 @@
import type { CSSProperties } from "react";
import {
AUTO_LAYOUT_DISCOVER_KEY,
CANVAS_BG_KEY,
DEFAULT_CANVAS_BG,
LABEL_COLORS_KEY,
LEGACY_CANVAS_BG,
VENDOR_COLORS_KEY,
} from "./constants";
export const VENDOR_TONE_KEYS = [
"cisco",
"huawei",
"zte",
"juniper",
"nokia",
"ericsson",
"h3c",
"ruijie",
"mikrotik",
"gray",
] as const;
export type VendorToneKey = (typeof VENDOR_TONE_KEYS)[number];
export type VendorColors = Record<VendorToneKey, string>;
export type LabelColors = { name: string; edgeLabel: string };
export const DEFAULT_LABEL_COLORS: LabelColors = {
name: "#f1f5f9",
edgeLabel: "#e2e8f0",
};
export const DEFAULT_VENDOR_COLORS: VendorColors = {
cisco: "#049fd9",
huawei: "#cf0a2c",
zte: "#0091da",
juniper: "#84b135",
nokia: "#124191",
ericsson: "#1e3a5f",
h3c: "#7ac143",
ruijie: "#7c3aed",
mikrotik: "#ea580c",
gray: "#94a3b8",
};
export function isHexColor(value: string): boolean {
return /^#[0-9a-fA-F]{6}$/.test(value);
}
export function loadCanvasBg(): string {
try {
const raw = String(localStorage.getItem(CANVAS_BG_KEY) || "").trim().toLowerCase();
if (raw === LEGACY_CANVAS_BG) {
persistCanvasBg(DEFAULT_CANVAS_BG);
return DEFAULT_CANVAS_BG;
}
if (isHexColor(raw)) return raw;
} catch {
/* ignore */
}
return DEFAULT_CANVAS_BG;
}
export function persistCanvasBg(value: string) {
try {
localStorage.setItem(CANVAS_BG_KEY, value);
} catch {
/* ignore */
}
}
export function loadLabelColors(): LabelColors {
try {
const raw = localStorage.getItem(LABEL_COLORS_KEY);
if (!raw) return { ...DEFAULT_LABEL_COLORS };
const parsed = JSON.parse(raw) as Partial<LabelColors>;
return {
name: isHexColor(String(parsed.name || "")) ? String(parsed.name).toLowerCase() : DEFAULT_LABEL_COLORS.name,
edgeLabel: isHexColor(String(parsed.edgeLabel || ""))
? String(parsed.edgeLabel).toLowerCase()
: DEFAULT_LABEL_COLORS.edgeLabel,
};
} catch {
return { ...DEFAULT_LABEL_COLORS };
}
}
export function persistLabelColors(value: LabelColors) {
try {
localStorage.setItem(LABEL_COLORS_KEY, JSON.stringify(value));
} catch {
/* ignore */
}
}
export function loadVendorColors(): VendorColors {
try {
const raw = localStorage.getItem(VENDOR_COLORS_KEY);
if (!raw) return { ...DEFAULT_VENDOR_COLORS };
const parsed = JSON.parse(raw) as Partial<VendorColors>;
const out = { ...DEFAULT_VENDOR_COLORS };
for (const key of VENDOR_TONE_KEYS) {
const c = String(parsed?.[key] || "").trim().toLowerCase();
if (isHexColor(c)) out[key] = c;
}
return out;
} catch {
return { ...DEFAULT_VENDOR_COLORS };
}
}
export function persistVendorColors(value: VendorColors) {
try {
localStorage.setItem(VENDOR_COLORS_KEY, JSON.stringify(value));
} catch {
/* ignore */
}
}
export function loadBoolFlag(key: string, defaultValue: boolean): boolean {
try {
const raw = localStorage.getItem(key);
if (raw === null) return defaultValue;
return raw === "1" || raw === "true";
} catch {
return defaultValue;
}
}
export function persistBoolFlag(key: string, value: boolean) {
try {
localStorage.setItem(key, value ? "1" : "0");
} catch {
/* ignore */
}
}
export function loadAutoLayoutAfterDiscover(): boolean {
return loadBoolFlag(AUTO_LAYOUT_DISCOVER_KEY, false);
}
export function persistAutoLayoutAfterDiscover(value: boolean) {
persistBoolFlag(AUTO_LAYOUT_DISCOVER_KEY, value);
}
export type { CSSProperties };

118
web/src/pages/topology/edgeStyle.ts Normal file
View file

@ -0,0 +1,118 @@
import type { Edge } from "@xyflow/react";
import type { LinkEdgeData } from "./linkDisplay";
import { EDGE_DEFAULTS_KEY } from "./constants";
export type EdgeLineStyle = "solid" | "dashed" | "dotted";
export type EdgeSourceKind = "manual" | "ume" | "discovered" | "stale";
export type EdgeDefaultStyle = {
stroke_color: string;
stroke_width: number;
line_style: EdgeLineStyle;
};
export type EdgeDefaults = Record<EdgeSourceKind, EdgeDefaultStyle>;
export type EdgeStyleData = LinkEdgeData;
const BUILTIN_EDGE_DEFAULTS: EdgeDefaults = {
ume: { stroke_color: "#2563eb", stroke_width: 2, line_style: "solid" },
discovered: { stroke_color: "#0ea5e9", stroke_width: 2, line_style: "dashed" },
stale: { stroke_color: "#dc2626", stroke_width: 2, line_style: "dashed" },
manual: { stroke_color: "#64748b", stroke_width: 2, line_style: "solid" },
};
export function sourceKind(source: string): EdgeSourceKind {
const src = (source || "manual").toLowerCase();
if (src === "stale" || src === "missing") return "stale";
if (src === "ume") return "ume";
if (src === "lldp" || src === "cdp") return "discovered";
return "manual";
}
export function loadEdgeDefaults(): EdgeDefaults {
try {
const raw = localStorage.getItem(EDGE_DEFAULTS_KEY);
if (!raw) {
return {
ume: { ...BUILTIN_EDGE_DEFAULTS.ume },
discovered: { ...BUILTIN_EDGE_DEFAULTS.discovered },
stale: { ...BUILTIN_EDGE_DEFAULTS.stale },
manual: { ...BUILTIN_EDGE_DEFAULTS.manual },
};
}
const parsed = JSON.parse(raw) as Partial<EdgeDefaults>;
const pick = (kind: EdgeSourceKind): EdgeDefaultStyle => {
const base = BUILTIN_EDGE_DEFAULTS[kind];
const cur = parsed?.[kind];
const color = String(cur?.stroke_color || base.stroke_color).trim() || base.stroke_color;
const width = Math.max(1, Math.min(12, Number(cur?.stroke_width || base.stroke_width) || base.stroke_width));
const line = String(cur?.line_style || base.line_style).toLowerCase();
const line_style: EdgeLineStyle =
line === "dashed" || line === "dotted" || line === "solid" ? line : base.line_style;
return { stroke_color: color, stroke_width: width, line_style };
};
return {
ume: pick("ume"),
discovered: pick("discovered"),
stale: pick("stale"),
manual: pick("manual"),
};
} catch {
return {
ume: { ...BUILTIN_EDGE_DEFAULTS.ume },
discovered: { ...BUILTIN_EDGE_DEFAULTS.discovered },
stale: { ...BUILTIN_EDGE_DEFAULTS.stale },
manual: { ...BUILTIN_EDGE_DEFAULTS.manual },
};
}
}
export function persistEdgeDefaults(next: EdgeDefaults) {
try {
localStorage.setItem(EDGE_DEFAULTS_KEY, JSON.stringify(next));
} catch {
/* ignore quota */
}
}
export function dashForLineStyle(lineStyle: string): string | undefined {
const s = (lineStyle || "").trim().toLowerCase();
if (s === "dashed") return "6 4";
if (s === "dotted") return "2 2";
return undefined;
}
export function edgeStyleBySource(
source: string,
defaults: EdgeDefaults,
): { stroke: string; strokeDasharray?: string; strokeWidth: number } {
const d = defaults[sourceKind(source)];
return {
stroke: d.stroke_color,
strokeWidth: d.stroke_width,
strokeDasharray: dashForLineStyle(d.line_style),
};
}
export function resolveEdgeStyle(
data: EdgeStyleData | undefined,
defaults: EdgeDefaults,
): { stroke: string; strokeDasharray?: string; strokeWidth: number } {
const base = edgeStyleBySource(data?.source || "manual", defaults);
const color = String(data?.stroke_color || "").trim();
const width = Number(data?.stroke_width || 0);
const line = String(data?.line_style || "").trim().toLowerCase();
return {
stroke: color || base.stroke,
strokeWidth: width > 0 ? width : base.strokeWidth,
strokeDasharray: line ? dashForLineStyle(line) : base.strokeDasharray,
};
}
export function withEdgeVisual(edge: Edge, defaults: EdgeDefaults): Edge {
const data = (edge.data || {}) as EdgeStyleData;
const style = resolveEdgeStyle(data, defaults);
return { ...edge, style, markerEnd: undefined, labelShowBg: false };
}
export { BUILTIN_EDGE_DEFAULTS };

459
web/src/pages/topology/exportTopology.ts Normal file
View file

@ -0,0 +1,459 @@
import { getStraightPath } from "@xyflow/react";
import type { Edge, Node } from "@xyflow/react";
import type { TopologyViewGraph, TopologyViewItem, TopologyViewNodeItem } from "../../types";
import type { NeNodeData } from "./TopologyReactFlowView";
import { isAggregateEdgeId, type LinkEdgeData } from "./linkDisplay";
import {
TOPO_HANDLE_X,
TOPO_HANDLE_Y,
TOPO_ICON,
TOPO_NODE_W,
TOPO_REGION_HANDLE_X,
TOPO_REGION_HANDLE_Y,
TOPO_REGION_ICON_H,
} from "./topoGeometry";
import type { VendorColors } from "./displayPrefs";
import { vendorColorForNode } from "./vendorTone";
const NE_ICON_URL = "/topo/ne-router.png";
const REGION_ICON_URL = "/topo/region-building.png";
export type TopologyVectorSvgTheme = {
labelColor: string;
edgeLabelColor: string;
vendorColors: VendorColors;
hideIp: boolean;
hideVendor: boolean;
};
type IconAssets = {
neTinted: Map<string, string>;
regionPlain: string;
};
function sanitizeFilename(name: string): string {
const trimmed = String(name || "topology")
.trim()
.replace(/[<>:"/\\|?*\x00-\x1f]/g, "_")
.replace(/\s+/g, "_")
.slice(0, 80);
return trimmed || "topology";
}
function downloadBlob(filename: string, blob: Blob): void {
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = filename;
a.click();
window.setTimeout(() => URL.revokeObjectURL(url), 2000);
}
function downloadText(filename: string, text: string, mime: string): void {
downloadBlob(filename, new Blob([text], { type: mime }));
}
function loadImage(url: string): Promise<HTMLImageElement> {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = () => reject(new Error(`failed to load icon: ${url}`));
img.src = url;
});
}
/** Match canvas: `.topo-node__icon-art` + masked `.topo-node__icon-tint` (mix-blend-mode: color). */
async function tintedIconDataUrl(
img: HTMLImageElement,
color: string,
w: number,
h: number,
): Promise<string> {
const canvas = document.createElement("canvas");
canvas.width = w;
canvas.height = h;
const ctx = canvas.getContext("2d");
if (!ctx) throw new Error("canvas unsupported");
ctx.drawImage(img, 0, 0, w, h);
const tint = document.createElement("canvas");
tint.width = w;
tint.height = h;
const tctx = tint.getContext("2d");
if (!tctx) throw new Error("canvas unsupported");
tctx.fillStyle = color;
tctx.fillRect(0, 0, w, h);
tctx.globalCompositeOperation = "destination-in";
tctx.drawImage(img, 0, 0, w, h);
ctx.globalCompositeOperation = "color";
ctx.drawImage(tint, 0, 0);
return canvas.toDataURL("image/png");
}
async function plainIconDataUrl(img: HTMLImageElement, w: number, h: number): Promise<string> {
const canvas = document.createElement("canvas");
canvas.width = w;
canvas.height = h;
const ctx = canvas.getContext("2d");
if (!ctx) throw new Error("canvas unsupported");
ctx.drawImage(img, 0, 0, w, h);
return canvas.toDataURL("image/png");
}
async function prepareIconAssets(
nodes: Node<NeNodeData>[],
theme: TopologyVectorSvgTheme,
): Promise<IconAssets> {
const [neImg, regionImg] = await Promise.all([loadImage(NE_ICON_URL), loadImage(REGION_ICON_URL)]);
const colors = new Set<string>();
for (const n of nodes) {
if (!isRegionNode(n)) colors.add(vendorColor(theme, n.data));
}
const neTinted = new Map<string, string>();
await Promise.all(
[...colors].map(async (color) => {
neTinted.set(color, await tintedIconDataUrl(neImg, color, TOPO_ICON, TOPO_ICON));
}),
);
const regionPlain = await plainIconDataUrl(regionImg, TOPO_ICON, TOPO_REGION_ICON_H);
return { neTinted, regionPlain };
}
function isRegionNode(node: Node<NeNodeData>): boolean {
return node.data.kind === "region" || String(node.id || "").startsWith("region:");
}
function nodeApiPosition(node: Node<NeNodeData>): { x: number; y: number } {
const isRegion = isRegionNode(node);
const hx = isRegion ? TOPO_REGION_HANDLE_X : TOPO_HANDLE_X;
const hy = isRegion ? TOPO_REGION_HANDLE_Y : TOPO_HANDLE_Y;
return { x: node.position.x + hx, y: node.position.y + hy };
}
function nodeGlyphBox(node: Node<NeNodeData>): { x: number; y: number; w: number; h: number } {
const isRegion = isRegionNode(node);
const w = TOPO_ICON;
const h = isRegion ? TOPO_REGION_ICON_H : TOPO_ICON;
return {
x: node.position.x + (TOPO_NODE_W - w) / 2,
y: node.position.y,
w,
h,
};
}
function nodeHandleCenter(node: Node<NeNodeData>): { x: number; y: number } {
const box = nodeGlyphBox(node);
return { x: box.x + box.w / 2, y: box.y + box.h / 2 };
}
function vendorColor(theme: TopologyVectorSvgTheme, data: NeNodeData): string {
return vendorColorForNode(data, theme.vendorColors);
}
function xmlEscape(value: string): string {
return String(value ?? "")
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&apos;");
}
function xmlAttr(name: string, value: string | number | boolean | null | undefined): string {
if (value === null || value === undefined || value === "") return "";
return ` ${name}="${xmlEscape(String(value))}"`;
}
type Bounds = { minX: number; minY: number; maxX: number; maxY: number };
function growBounds(bounds: Bounds, x: number, y: number, pad = 0): void {
bounds.minX = Math.min(bounds.minX, x - pad);
bounds.minY = Math.min(bounds.minY, y - pad);
bounds.maxX = Math.max(bounds.maxX, x + pad);
bounds.maxY = Math.max(bounds.maxY, y + pad);
}
function nodeCaptionLines(node: Node<NeNodeData>, theme: TopologyVectorSvgTheme): string[] {
const data = node.data;
const isRegion = isRegionNode(node);
const name = data.label || (!theme.hideIp ? data.ne_ip : "") || (isRegion ? "Region" : "NE");
const lines = [name];
if (!isRegion) {
const meta = [
theme.hideIp || !data.ne_ip || data.ne_ip === name ? "" : data.ne_ip,
theme.hideVendor || !data.vendor ? "" : data.vendor,
].filter(Boolean);
if (meta.length) lines.push(meta.join(" / "));
}
return lines;
}
function computeGraphBounds(
nodes: Node<NeNodeData>[],
displayEdges: Edge[],
centers: Map<string, { x: number; y: number }>,
theme: TopologyVectorSvgTheme,
): Bounds {
const bounds: Bounds = { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity };
for (const node of nodes) {
const box = nodeGlyphBox(node);
growBounds(bounds, box.x, box.y);
growBounds(bounds, box.x + box.w, box.y + box.h);
const lines = nodeCaptionLines(node, theme);
const captionY = box.y + box.h + 1;
for (let i = 0; i < lines.length; i += 1) {
const line = lines[i];
const approxWidth = Math.max(24, line.length * (i === 0 ? 5 : 4.2));
const lineY = captionY + i * (i === 0 ? 10 : 8);
growBounds(bounds, box.x + box.w / 2 - approxWidth / 2, lineY);
growBounds(bounds, box.x + box.w / 2 + approxWidth / 2, lineY + (i === 0 ? 10 : 8));
}
}
for (const edge of displayEdges) {
const a = centers.get(edge.source);
const b = centers.get(edge.target);
if (!a || !b) continue;
growBounds(bounds, a.x, a.y);
growBounds(bounds, b.x, b.y);
const label = String(edge.label || "").trim();
if (label) {
const mx = (a.x + b.x) / 2;
const my = (a.y + b.y) / 2;
growBounds(bounds, mx, my, Math.max(20, label.length * 3));
}
}
if (!Number.isFinite(bounds.minX)) {
return { minX: 0, minY: 0, maxX: 800, maxY: 600 };
}
return bounds;
}
function edgeVisual(edge: Edge): { stroke: string; strokeWidth: number; strokeDasharray?: string } {
const style = (edge.style || {}) as {
stroke?: string;
strokeWidth?: number;
strokeDasharray?: string;
};
return {
stroke: String(style.stroke || "#64748b"),
strokeWidth: Number(style.strokeWidth || 2),
strokeDasharray: style.strokeDasharray ? String(style.strokeDasharray) : undefined,
};
}
function renderNodeIcon(
node: Node<NeNodeData>,
theme: TopologyVectorSvgTheme,
icons: IconAssets,
): string {
const box = nodeGlyphBox(node);
if (isRegionNode(node)) {
return `<image href="${icons.regionPlain}" x="${box.x}" y="${box.y}" width="${box.w}" height="${box.h}" preserveAspectRatio="xMidYMid meet"/>`;
}
const color = vendorColor(theme, node.data);
const href = icons.neTinted.get(color);
if (!href) return "";
return `<image href="${href}" x="${box.x}" y="${box.y}" width="${box.w}" height="${box.h}" preserveAspectRatio="xMidYMid meet"/>`;
}
function renderNode(node: Node<NeNodeData>, theme: TopologyVectorSvgTheme, icons: IconAssets): string {
const box = nodeGlyphBox(node);
const centerX = box.x + box.w / 2;
const icon = renderNodeIcon(node, theme, icons);
const lines = nodeCaptionLines(node, theme);
const captionParts = lines.map((line, idx) => {
const y = box.y + box.h + 1 + (idx === 0 ? 8 : 8 + idx * 8);
const fontSize = idx === 0 ? 8 : 7;
const opacity = idx === 0 ? 1 : 0.72;
return `<text x="${centerX}" y="${y}" text-anchor="middle" font-family="Segoe UI, system-ui, sans-serif" font-size="${fontSize}" font-weight="${idx === 0 ? 600 : 400}" fill="${xmlEscape(theme.labelColor)}" opacity="${opacity}">${xmlEscape(line)}</text>`;
});
return [
`<g id="node-${xmlEscape(node.id)}" class="topo-export-node">`,
icon,
...captionParts,
`</g>`,
].join("");
}
function renderEdge(
edge: Edge,
centers: Map<string, { x: number; y: number }>,
theme: TopologyVectorSvgTheme,
): string {
const a = centers.get(edge.source);
const b = centers.get(edge.target);
if (!a || !b) return "";
const data = (edge.data || {}) as LinkEdgeData;
const index = Number(data.parallelIndex || 0);
const count = Math.max(1, Number(data.parallelCount || 1));
const offset = (index - (count - 1) / 2) * 10;
const dx = b.x - a.x;
const dy = b.y - a.y;
const len = Math.hypot(dx, dy) || 1;
const ox = (-dy / len) * offset;
const oy = (dx / len) * offset;
const sx = a.x + ox;
const sy = a.y + oy;
const tx = b.x + ox;
const ty = b.y + oy;
const visual = edgeVisual(edge);
const dash = visual.strokeDasharray
? ` stroke-dasharray="${xmlEscape(visual.strokeDasharray)}"`
: "";
const [path, labelX, labelY] = getStraightPath({ sourceX: sx, sourceY: sy, targetX: tx, targetY: ty });
const label = String(edge.label || "").trim();
const labelMarkup = label
? `<text x="${labelX}" y="${labelY}" text-anchor="middle" dominant-baseline="middle" font-family="ui-monospace, SFMono-Regular, Consolas, monospace" font-size="7" fill="${xmlEscape(theme.edgeLabelColor)}">${xmlEscape(label)}</text>`
: "";
return [
`<g id="edge-${xmlEscape(edge.id)}" class="topo-export-edge">`,
`<path d="${xmlEscape(path)}" fill="none" stroke="${xmlEscape(visual.stroke)}" stroke-width="${visual.strokeWidth}" stroke-linecap="round"${dash}/>`,
labelMarkup,
`</g>`,
].join("");
}
/** Build a vector SVG using the same PNG icons + vendor tint as the canvas. */
export async function buildTopologyVectorSvg(
nodes: Node<NeNodeData>[],
displayEdges: Edge[],
theme: TopologyVectorSvgTheme,
title?: string,
): Promise<string> {
const icons = await prepareIconAssets(nodes, theme);
const centers = new Map(nodes.map((n) => [n.id, nodeHandleCenter(n)] as const));
const bounds = computeGraphBounds(nodes, displayEdges, centers, theme);
const pad = 48;
const minX = bounds.minX - pad;
const minY = bounds.minY - pad;
const width = bounds.maxX - bounds.minX + pad * 2;
const height = bounds.maxY - bounds.minY + pad * 2;
const edgeMarkup = displayEdges.map((e) => renderEdge(e, centers, theme)).join("");
const nodeMarkup = nodes.map((n) => renderNode(n, theme, icons)).join("");
const titleMarkup = title ? `<title>${xmlEscape(title)}</title>` : "";
return [
'<?xml version="1.0" encoding="UTF-8"?>',
`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="${minX} ${minY} ${width} ${height}" width="${Math.round(width)}" height="${Math.round(height)}">`,
titleMarkup,
`<desc>netx topology vector export</desc>`,
`<g id="edges">${edgeMarkup}</g>`,
`<g id="nodes">${nodeMarkup}</g>`,
`</svg>`,
].join("\n");
}
export function buildExportGraph(
view: TopologyViewItem,
nodes: Node<NeNodeData>[],
edges: Edge[],
serverGraph?: TopologyViewGraph | null,
): TopologyViewGraph {
const serverNodeMap = new Map(
(serverGraph?.nodes || []).map((n) => [n.fabric_node_id, n] as const),
);
const serverEdgeMap = new Map((serverGraph?.edges || []).map((e) => [e.id, e] as const));
const exportNodes: TopologyViewNodeItem[] = nodes.map((n) => {
const pos = nodeApiPosition(n);
const server = serverNodeMap.get(n.id);
return {
fabric_node_id: n.id,
managed_ne_id: n.data.managed_ne_id || server?.managed_ne_id || "",
ume_ne_id: n.data.ume_ne_id || server?.ume_ne_id || "",
label: n.data.label || server?.label || "",
x: pos.x,
y: pos.y,
locked: server?.locked || false,
name: server?.name || n.data.label || "",
ip: n.data.ne_ip || server?.ip || "",
vendor: n.data.vendor || server?.vendor || "",
device_type: server?.device_type || (isRegionNode(n) ? "region" : ""),
connect_status: n.data.connect_status || server?.connect_status || "",
managed_source: n.data.managed_source || server?.managed_source,
kind: n.data.kind || server?.kind,
folder_id: n.data.folder_id || server?.folder_id,
view_id: n.data.view_id || server?.view_id,
node_count: n.data.node_count ?? server?.node_count,
};
});
const physicalEdges = edges.filter((e) => !isAggregateEdgeId(String(e.id)));
const exportEdges = physicalEdges.map((e) => {
const data = (e.data || {}) as LinkEdgeData;
const server = serverEdgeMap.get(e.id);
return {
id: e.id,
a_node_id: e.source,
b_node_id: e.target,
a_port: data.source_port || server?.a_port || "",
b_port: data.target_port || server?.b_port || "",
source: data.source || server?.source || "manual",
status: server?.status || "active",
layer: server?.layer || "physical",
stroke_color: data.stroke_color || server?.stroke_color,
stroke_width: data.stroke_width || server?.stroke_width,
line_style: data.line_style || server?.line_style,
discovered_at: data.discovered_at ?? server?.discovered_at ?? null,
display_label: data.display_label || server?.display_label,
};
});
return {
view,
nodes: exportNodes,
edges: exportEdges,
truncated: serverGraph?.truncated,
truncate_reason: serverGraph?.truncate_reason,
outside_peers: serverGraph?.outside_peers,
world_transform: serverGraph?.world_transform,
scatter: serverGraph?.scatter,
};
}
export function topologyGraphToXml(graph: TopologyViewGraph): string {
const view = graph.view;
const lines: string[] = [
'<?xml version="1.0" encoding="UTF-8"?>',
`<topology xmlns="urn:netx:topology:export" version="1"${xmlAttr("exported-at", new Date().toISOString())}>`,
" <view",
`${xmlAttr("id", view.id)}${xmlAttr("name", view.name)}${xmlAttr("kind", view.kind)}${xmlAttr("folder_id", view.folder_id)}${xmlAttr("remark", view.remark || "")} />`,
` <nodes count="${graph.nodes.length}">`,
];
for (const n of graph.nodes) {
lines.push(
` <node${xmlAttr("id", n.fabric_node_id)}${xmlAttr("x", n.x)}${xmlAttr("y", n.y)}${xmlAttr("label", n.label)}${xmlAttr("name", n.name)}${xmlAttr("ip", n.ip)}${xmlAttr("vendor", n.vendor)}${xmlAttr("kind", n.kind)}${xmlAttr("managed_ne_id", n.managed_ne_id)}${xmlAttr("ume_ne_id", n.ume_ne_id)}${xmlAttr("folder_id", n.folder_id)}${xmlAttr("view_id", n.view_id)} />`,
);
}
lines.push(" </nodes>");
lines.push(` <edges count="${graph.edges.length}">`);
for (const e of graph.edges) {
lines.push(
` <edge${xmlAttr("id", e.id)}${xmlAttr("a_node_id", e.a_node_id)}${xmlAttr("b_node_id", e.b_node_id)}${xmlAttr("a_port", e.a_port)}${xmlAttr("b_port", e.b_port)}${xmlAttr("source", e.source)}${xmlAttr("status", e.status)}${xmlAttr("layer", e.layer)}${xmlAttr("display_label", e.display_label || "")} />`,
);
}
lines.push(" </edges>");
lines.push("</topology>");
return lines.join("\n");
}
export async function exportTopologySvg(
nodes: Node<NeNodeData>[],
displayEdges: Edge[],
filenameBase: string,
theme: TopologyVectorSvgTheme,
title?: string,
): Promise<void> {
const svg = await buildTopologyVectorSvg(nodes, displayEdges, theme, title);
downloadText(`${sanitizeFilename(filenameBase)}.svg`, svg, "image/svg+xml;charset=utf-8");
}
export function exportTopologyXml(graph: TopologyViewGraph, filenameBase: string): void {
const xml = topologyGraphToXml(graph);
downloadText(`${sanitizeFilename(filenameBase)}.xml`, xml, "application/xml;charset=utf-8");
}

135
web/src/pages/topology/graphFlow.ts Normal file
View file

@ -0,0 +1,135 @@
import type { Edge, Node, Position } from "@xyflow/react";
import type { TopologyViewEdgeItem, TopologyViewGraph, TopologyViewNodeItem } from "../../types";
import type { NeNodeData } from "./TopologyReactFlowView";
import { formatPortPairLabel } from "./linkDisplay";
import type { EdgeDefaults, EdgeStyleData } from "./edgeStyle";
import { withEdgeVisual } from "./edgeStyle";
import {
TOPO_NODE_H,
TOPO_NODE_W,
TOPO_REGION_HANDLE_X,
TOPO_REGION_HANDLE_Y,
TOPO_REGION_ICON_H,
TOPO_HANDLE_X,
TOPO_HANDLE_Y,
neApiPosition,
neFlowPosition,
regionApiPosition,
regionFlowPosition,
} from "./topoGeometry";
export function graphToFlow(
nodes: TopologyViewNodeItem[],
edges: TopologyViewEdgeItem[],
defaults: EdgeDefaults,
) {
const rfNodes: Node<NeNodeData>[] = nodes.map((n) => {
const isRegion =
n.kind === "region" || n.device_type === "region" || String(n.fabric_node_id || "").startsWith("region:");
const apiX = Number(n.x) || 0;
const apiY = Number(n.y) || 0;
const position = isRegion ? regionFlowPosition(apiX, apiY) : neFlowPosition(apiX, apiY);
const hx = isRegion ? TOPO_REGION_HANDLE_X : TOPO_HANDLE_X;
const hy = isRegion ? TOPO_REGION_HANDLE_Y : TOPO_HANDLE_Y;
return {
id: n.fabric_node_id,
type: "neNode",
position,
width: TOPO_NODE_W,
height: isRegion ? TOPO_REGION_ICON_H : TOPO_NODE_H,
handles: [
{ type: "target", position: "left" as Position, x: hx, y: hy },
{ type: "source", position: "right" as Position, x: hx, y: hy },
],
data: {
label: n.label || n.name || n.ip || n.fabric_node_id,
managed_ne_id: n.managed_ne_id || "",
ume_ne_id: n.ume_ne_id || "",
ne_ip: n.ip || "",
vendor: n.vendor || "",
connect_status: n.connect_status || "",
managed_source: n.managed_source || "",
kind: (n.kind as NeNodeData["kind"]) || (isRegion ? "region" : "ne"),
folder_id: n.folder_id || "",
view_id: n.view_id || "",
node_count: n.node_count || 0,
},
};
});
const rfEdges: Edge[] = edges.map((e) => {
const src = e.status === "stale" || e.status === "missing" ? "stale" : e.source || "manual";
const label = formatPortPairLabel(e.a_port || "", e.b_port || "", e.display_label || "");
const data: EdgeStyleData = {
source: src,
source_port: e.a_port || "",
target_port: e.b_port || "",
stroke_color: e.stroke_color || "",
stroke_width: Number(e.stroke_width || 0),
line_style: e.line_style || "",
discovered_at: e.discovered_at ?? null,
display_label: e.display_label || "",
};
return withEdgeVisual(
{
id: e.id,
source: e.a_node_id,
target: e.b_node_id,
type: "straight",
label: label || undefined,
animated: false,
data,
},
defaults,
);
});
return { rfNodes, rfEdges };
}
export function flowToPositions(nodes: Node<NeNodeData>[]) {
return nodes.map((n) => {
const isRegion = n.data.kind === "region" || String(n.id || "").startsWith("region:");
const pos = isRegion
? regionApiPosition(n.position.x, n.position.y)
: neApiPosition(n.position.x, n.position.y);
return {
fabric_node_id: n.id,
x: pos.x,
y: pos.y,
label: n.data.label || "",
};
});
}
export function graphFingerprint(graph: TopologyViewGraph): string {
const nodes = [...graph.nodes]
.map(
(n) =>
`${n.fabric_node_id}:${Math.round(Number(n.x) || 0)}:${Math.round(Number(n.y) || 0)}:${n.label || n.name || ""}`,
)
.sort()
.join("|");
const edges = [...graph.edges]
.map((e) => `${e.id}:${e.a_node_id}:${e.b_node_id}:${e.a_port || ""}:${e.b_port || ""}:${e.status || ""}`)
.sort()
.join("|");
return `${nodes}#${edges}#${graph.outside_peers?.length || 0}#${graph.world_transform?.lod || ""}#${graph.scatter?.length || 0}#${graph.world_transform?.total || 0}`;
}
export function applyViewGraph(
graph: TopologyViewGraph,
defaults: EdgeDefaults,
setNodes: (ns: Node<NeNodeData>[]) => void,
setEdges: (es: Edge[]) => void,
localPositions?: Map<string, { x: number; y: number }>,
) {
const { rfNodes, rfEdges } = graphToFlow(graph.nodes, graph.edges, defaults);
const merged = localPositions?.size
? rfNodes.map((n) => {
const p = localPositions.get(n.id);
return p ? { ...n, position: { ...p } } : n;
})
: rfNodes;
setNodes(merged);
setEdges(rfEdges);
return { rfNodes: merged, rfEdges };
}

560
web/src/pages/topology/hooks/useTopologyCanvas.ts Normal file
View file

@ -0,0 +1,560 @@
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useQuery, type QueryClient } from "@tanstack/react-query";
import type { Edge, Node, ReactFlowInstance } from "@xyflow/react";
import { fetchTopologyGraph } from "../../../services/api";
import { queryKeys } from "../../../constants/queryKeys";
import type { TopologyTreeViewItem, TopologyViewGraph, TopologyWorldTransform } from "../../../types";
import {
FIT_VIEW_OPTS,
WORLD_LOCATE_HALF,
WORLD_LOCATE_ZOOM,
WORLD_MAP_ENABLED,
} from "../constants";
import type { EdgeDefaults, EdgeStyleData } from "../edgeStyle";
import { withEdgeVisual } from "../edgeStyle";
import { graphFingerprint, graphToFlow } from "../graphFlow";
import {
buildLinkDisplayEdges,
type LinkMember,
} from "../linkDisplay";
import type { NeNodeData } from "../TopologyReactFlowView";
import { TOPO_HANDLE_X, TOPO_HANDLE_Y } from "../topoGeometry";
import type { ToolMode } from "../toolMode";
import {
displayViewName,
isWorldFlatViewName,
worldDisplayBounds,
worldVisualLodFromZoom,
} from "../treeUtils";
import { mergeFlatWorldGraph } from "../worldGraph";
import type { HistorySnap } from "../pageTypes";
export type UseTopologyCanvasOptions = {
mapId: string;
treeFlatMap: boolean;
liveSync: boolean;
canvasMode: boolean;
activeView: TopologyTreeViewItem | null;
nodes: Node<NeNodeData>[];
edges: Edge[];
setNodes: React.Dispatch<React.SetStateAction<Node<NeNodeData>[]>>;
setEdges: React.Dispatch<React.SetStateAction<Edge[]>>;
edgeDefaults: EdgeDefaults;
toolMode: ToolMode;
hideIp: boolean;
hideVendor: boolean;
hidePorts: boolean;
showPlaceholderBadge: boolean;
expandPhysicalLinks: boolean;
scaleBundleWidth: boolean;
edgeFlow: boolean;
selectedEdgeId: string | null;
setSelectedEdgeId: React.Dispatch<React.SetStateAction<string | null>>;
setSearchHitIds: React.Dispatch<React.SetStateAction<string[]>>;
searchHitTimerRef: React.MutableRefObject<number | null>;
queryClient: QueryClient;
dirtyRef: React.MutableRefObject<boolean>;
historyLockRef: React.MutableRefObject<boolean>;
historyRef: React.MutableRefObject<HistorySnap[]>;
redoRef: React.MutableRefObject<HistorySnap[]>;
pendingEdgeDeletesRef: React.MutableRefObject<Set<string>>;
pendingEdgeCreatesRef: React.MutableRefObject<Set<string>>;
clearDirty: () => void;
bumpHistory: () => void;
showError: (msg: string) => void;
t: (key: string) => string;
};
export function useTopologyCanvas(opts: UseTopologyCanvasOptions) {
const {
mapId,
treeFlatMap,
liveSync,
canvasMode,
activeView,
nodes,
edges,
setNodes,
setEdges,
edgeDefaults,
toolMode,
hideIp,
hideVendor,
hidePorts,
showPlaceholderBadge,
expandPhysicalLinks,
scaleBundleWidth,
edgeFlow,
selectedEdgeId,
setSelectedEdgeId,
setSearchHitIds,
searchHitTimerRef,
queryClient,
dirtyRef,
historyLockRef,
historyRef,
redoRef,
pendingEdgeDeletesRef,
pendingEdgeCreatesRef,
clearDirty,
bumpHistory,
showError,
t,
} = opts;
const rfRef = useRef<ReactFlowInstance<Node<NeNodeData>, Edge> | null>(null);
const canvasRef = useRef<HTMLDivElement | null>(null);
const appliedMapIdRef = useRef("");
const appliedGraphFpRef = useRef("");
const pendingFitRef = useRef(false);
const nodesRef = useRef<Node<NeNodeData>[]>([]);
const [canvasZoom, setCanvasZoom] = useState(1);
const worldTransformRef = useRef<TopologyWorldTransform | null>(null);
const flatLodFetchGenRef = useRef(0);
const flatLodTimerRef = useRef<number | null>(null);
const isWorldFlatCanvasRef = useRef(false);
const mapIdRef = useRef(mapId);
nodesRef.current = nodes;
const graphQuery = useQuery({
queryKey: queryKeys.topologyGraph(mapId),
queryFn: () =>
fetchTopologyGraph(
mapId,
WORLD_MAP_ENABLED && treeFlatMap ? { lod: "overview" } : undefined,
),
enabled: Boolean(mapId) && (WORLD_MAP_ENABLED || !treeFlatMap),
staleTime: liveSync ? 0 : 30_000,
refetchOnWindowFocus: liveSync && !treeFlatMap,
refetchInterval: liveSync && mapId && !treeFlatMap ? 3000 : false,
refetchIntervalInBackground: false,
});
const isWorldFlatCanvas =
WORLD_MAP_ENABLED &&
(treeFlatMap ||
isWorldFlatViewName(graphQuery.data?.view?.name) ||
Boolean(graphQuery.data?.view?.filter?.world_flat));
isWorldFlatCanvasRef.current = isWorldFlatCanvas;
mapIdRef.current = mapId;
const worldVisualLod = isWorldFlatCanvas ? worldVisualLodFromZoom(canvasZoom) : "full";
const displayOpts = useMemo(
() => ({
hideIp,
hideVendor,
hidePorts,
connectMode: toolMode === "connect",
showPlaceholderBadge,
worldVisualLod,
}),
[hideIp, hideVendor, hidePorts, toolMode, showPlaceholderBadge, worldVisualLod],
);
const displayEdges = useMemo(() => {
if (isWorldFlatCanvas && worldVisualLod !== "full") return [];
const built = buildLinkDisplayEdges(edges, expandPhysicalLinks, hidePorts, scaleBundleWidth).map((e) =>
withEdgeVisual(e, edgeDefaults),
);
return built.map((e) => {
const d = (e.data || {}) as EdgeStyleData;
const selected =
e.id === selectedEdgeId ||
Boolean(d.members?.some((m: LinkMember) => m.id === selectedEdgeId));
return {
...e,
selected,
label: e.label ? String(e.label) : "",
animated: edgeFlow,
};
});
}, [
edges,
expandPhysicalLinks,
hidePorts,
scaleBundleWidth,
edgeFlow,
edgeDefaults,
selectedEdgeId,
isWorldFlatCanvas,
worldVisualLod,
]);
useEffect(() => {
if (graphQuery.data?.world_transform) {
worldTransformRef.current = graphQuery.data.world_transform;
}
}, [graphQuery.data?.world_transform]);
const refreshFlatViewport = useCallback(async () => {
if (!WORLD_MAP_ENABLED || !mapId || !isWorldFlatCanvas || dirtyRef.current) return;
const inst = rfRef.current;
if (!inst) return;
const zoom = inst.getZoom();
setCanvasZoom(zoom);
const gen = ++flatLodFetchGenRef.current;
const commit = (g: TopologyViewGraph, centerX: number, centerY: number) => {
if (g.world_transform) worldTransformRef.current = g.world_transform;
queryClient.setQueryData(queryKeys.topologyGraph(mapId), (prev: TopologyViewGraph | undefined) =>
mergeFlatWorldGraph(prev, g, { centerX, centerY }),
);
};
try {
if (zoom < 0.12) {
const prev = queryClient.getQueryData<TopologyViewGraph>(queryKeys.topologyGraph(mapId));
if (!prev?.scatter?.length) {
const g = await fetchTopologyGraph(mapId, { lod: "overview" });
if (gen !== flatLodFetchGenRef.current || dirtyRef.current) return;
const bounds = worldDisplayBounds(g.world_transform);
const cx = bounds ? bounds.x + bounds.width / 2 : 0;
const cy = bounds ? bounds.y + bounds.height / 2 : 0;
commit(g, cx, cy);
} else if (prev.nodes.length > 0) {
commit(
{
...prev,
nodes: [],
edges: [],
scatter: prev.scatter,
world_transform: prev.world_transform
? { ...prev.world_transform, lod: "overview" }
: prev.world_transform,
},
0,
0,
);
}
return;
}
const pane = canvasRef.current?.getBoundingClientRect();
const w = pane?.width || 1200;
const h = pane?.height || 800;
const vp = inst.getViewport();
const z = Math.max(vp.zoom || 0.01, 0.01);
const min_x = -vp.x / z;
const min_y = -vp.y / z;
const max_x = (w - vp.x) / z;
const max_y = (h - vp.y) / z;
const g = await fetchTopologyGraph(mapId, {
lod: "detail",
min_x,
max_x,
min_y,
max_y,
});
if (gen !== flatLodFetchGenRef.current || dirtyRef.current) return;
commit(g, (min_x + max_x) / 2, (min_y + max_y) / 2);
} catch {
/* keep last good sample */
}
}, [mapId, isWorldFlatCanvas, queryClient, dirtyRef]);
const scheduleFlatViewportRefresh = useCallback(() => {
if (!WORLD_MAP_ENABLED || !isWorldFlatCanvas) return;
if (flatLodTimerRef.current) window.clearTimeout(flatLodTimerRef.current);
flatLodTimerRef.current = window.setTimeout(() => {
flatLodTimerRef.current = null;
void refreshFlatViewport();
}, 200);
}, [isWorldFlatCanvas, refreshFlatViewport]);
const fitCanvas = useCallback(() => {
const inst = rfRef.current;
if (!inst) return;
const bounds = isWorldFlatCanvas
? worldDisplayBounds(worldTransformRef.current || graphQuery.data?.world_transform)
: null;
if (bounds) inst.fitBounds(bounds, { padding: 0.12, duration: 0 });
else inst.fitView({ ...FIT_VIEW_OPTS });
setCanvasZoom(inst.getZoom());
}, [isWorldFlatCanvas, graphQuery.data?.world_transform]);
useEffect(() => {
return () => {
if (flatLodTimerRef.current) window.clearTimeout(flatLodTimerRef.current);
};
}, []);
useEffect(() => {
if (!canvasMode) return;
void import("../TopologyReactFlowView");
}, [canvasMode]);
useEffect(() => {
appliedMapIdRef.current = "";
appliedGraphFpRef.current = "";
}, [mapId]);
useEffect(() => {
if (!canvasMode) return;
if (!mapId || !graphQuery.data) return;
const entering = appliedMapIdRef.current !== mapId;
if (!entering && dirtyRef.current) return;
const fp = graphFingerprint(graphQuery.data);
if (!entering && fp === appliedGraphFpRef.current) return;
const selectedIds = entering
? new Set<string>()
: new Set(nodesRef.current.filter((n) => n.selected).map((n) => n.id));
const { rfNodes, rfEdges } = graphToFlow(graphQuery.data.nodes, graphQuery.data.edges, edgeDefaults);
const nextNodes =
selectedIds.size > 0
? rfNodes.map((n) => (selectedIds.has(n.id) ? { ...n, selected: true } : n))
: rfNodes;
historyLockRef.current = true;
setNodes(nextNodes);
setEdges(rfEdges);
appliedGraphFpRef.current = fp;
if (entering) {
appliedMapIdRef.current = mapId;
historyRef.current = [];
redoRef.current = [];
pendingEdgeDeletesRef.current = new Set();
pendingEdgeCreatesRef.current = new Set();
clearDirty();
bumpHistory();
const hasScatter = (graphQuery.data.scatter?.length || 0) > 0;
const hasWorld = Boolean(worldDisplayBounds(graphQuery.data.world_transform));
pendingFitRef.current = nextNodes.length > 0 || hasScatter || hasWorld;
}
historyLockRef.current = false;
}, [
canvasMode,
mapId,
graphQuery.data,
edgeDefaults,
setNodes,
setEdges,
clearDirty,
bumpHistory,
dirtyRef,
historyLockRef,
historyRef,
redoRef,
pendingEdgeDeletesRef,
pendingEdgeCreatesRef,
]);
useEffect(() => {
if (!pendingFitRef.current) return;
const wt = graphQuery.data?.world_transform;
const bounds = isWorldFlatCanvas ? worldDisplayBounds(wt) : null;
const canFitNodes = nodes.length > 0;
if (!bounds && !canFitNodes) return;
let cancelled = false;
let tries = 0;
const run = () => {
if (cancelled) return;
const inst = rfRef.current;
if (!inst) {
if (tries++ < 40) window.setTimeout(run, 40);
return;
}
pendingFitRef.current = false;
if (bounds) {
inst.fitBounds(bounds, { padding: 0.12, duration: 0 });
} else {
inst.fitView({ ...FIT_VIEW_OPTS, duration: 0 });
}
setCanvasZoom(inst.getZoom());
};
const timer = window.setTimeout(run, 0);
return () => {
cancelled = true;
window.clearTimeout(timer);
};
}, [nodes, mapId, isWorldFlatCanvas, graphQuery.data?.world_transform]);
useEffect(() => {
setEdges((eds) => eds.map((e) => withEdgeVisual(e, edgeDefaults)));
}, [edgeDefaults, setEdges]);
const focusNode = useCallback(
(nodeId: string, additive: boolean) => {
setSelectedEdgeId(null);
setNodes((ns) =>
ns.map((n) => {
if (additive) {
if (n.id === nodeId) return { ...n, selected: !n.selected };
return n;
}
return { ...n, selected: n.id === nodeId };
}),
);
setEdges((es) => es.map((e) => ({ ...e, selected: false })));
},
[setNodes, setEdges, setSelectedEdgeId],
);
const focusWorldAround = useCallback(
async (nodeId: string, displayX: number, displayY: number) => {
const viewId = mapIdRef.current;
if (!viewId || !isWorldFlatCanvasRef.current || dirtyRef.current) return;
if (flatLodTimerRef.current) {
window.clearTimeout(flatLodTimerRef.current);
flatLodTimerRef.current = null;
}
const gen = ++flatLodFetchGenRef.current;
const inst = rfRef.current;
if (inst) {
setCanvasZoom(WORLD_LOCATE_ZOOM);
inst.setCenter(displayX, displayY, { zoom: WORLD_LOCATE_ZOOM, duration: 200 });
}
const half = WORLD_LOCATE_HALF;
try {
const g = await fetchTopologyGraph(viewId, {
lod: "detail",
min_x: displayX - half,
max_x: displayX + half,
min_y: displayY - half,
max_y: displayY + half,
});
if (gen !== flatLodFetchGenRef.current || dirtyRef.current) return;
if (g.world_transform) worldTransformRef.current = g.world_transform;
queryClient.setQueryData(queryKeys.topologyGraph(viewId), (prev: TopologyViewGraph | undefined) =>
mergeFlatWorldGraph(prev, g, { centerX: displayX, centerY: displayY }),
);
} catch {
/* keep last sample */
}
if (gen !== flatLodFetchGenRef.current) return;
window.requestAnimationFrame(() => {
if (flatLodFetchGenRef.current !== gen) return;
rfRef.current?.setCenter(displayX, displayY, { zoom: WORLD_LOCATE_ZOOM, duration: 0 });
setCanvasZoom(WORLD_LOCATE_ZOOM);
focusNode(nodeId, false);
setSearchHitIds([nodeId]);
if (searchHitTimerRef.current) window.clearTimeout(searchHitTimerRef.current);
searchHitTimerRef.current = window.setTimeout(() => {
setSearchHitIds((cur) => (cur.length === 1 && cur[0] === nodeId ? [] : cur));
searchHitTimerRef.current = null;
}, 8000);
});
},
[queryClient, focusNode, dirtyRef, setSearchHitIds, searchHitTimerRef],
);
const locateNode = useCallback(
(nodeId: string, opts?: { worldX?: number; worldY?: number }) => {
const onCanvas = nodesRef.current.find((n) => n.id === nodeId);
const wt = worldTransformRef.current;
const originX = Number(wt?.origin_x) || 0;
const originY = Number(wt?.origin_y) || 0;
const scale = Math.max(Number(wt?.scale) || 1, 1e-9);
let displayX: number;
let displayY: number;
if (onCanvas) {
displayX = onCanvas.position.x + TOPO_HANDLE_X;
displayY = onCanvas.position.y + TOPO_HANDLE_Y;
} else if (opts?.worldX != null && opts?.worldY != null) {
displayX = (Number(opts.worldX) - originX) * scale;
displayY = (Number(opts.worldY) - originY) * scale;
} else {
showError(t("topology.locateNotOnCanvas"));
return;
}
focusNode(nodeId, false);
setSearchHitIds([nodeId]);
if (searchHitTimerRef.current) window.clearTimeout(searchHitTimerRef.current);
searchHitTimerRef.current = window.setTimeout(() => {
setSearchHitIds((cur) => (cur.length === 1 && cur[0] === nodeId ? [] : cur));
searchHitTimerRef.current = null;
}, 8000);
if (isWorldFlatCanvasRef.current) {
void focusWorldAround(nodeId, displayX, displayY);
return;
}
window.setTimeout(() => {
rfRef.current?.fitView({
nodes: [{ id: nodeId }],
padding: 0.45,
duration: 280,
includeHiddenNodes: true,
});
}, 30);
},
[focusNode, focusWorldAround, showError, t, setSearchHitIds, searchHitTimerRef],
);
const graphTruncated = Boolean(graphQuery.data?.truncated);
const truncateReason = String(graphQuery.data?.truncate_reason || "").trim();
const worldScatter = graphQuery.data?.scatter || [];
const worldTotal = Number(graphQuery.data?.world_transform?.total || 0);
const worldDockMe = Number(graphQuery.data?.world_transform?.dock_me_count || 0);
const showWorldScatter =
isWorldFlatCanvas && worldVisualLod !== "full" && worldScatter.length > 0;
const canvasGraphLoading = Boolean(mapId) && (graphQuery.isPending || !graphQuery.data);
const canvasGraphEmpty =
Boolean(mapId) &&
graphQuery.isSuccess &&
!graphQuery.isFetching &&
(graphQuery.data?.nodes?.length ?? 0) === 0 &&
worldScatter.length === 0 &&
nodes.length === 0 &&
worldTotal === 0;
const worldNeedsApply = isWorldFlatCanvas && canvasGraphEmpty && worldDockMe > 0;
const canvasGraphRefreshing =
Boolean(mapId) && liveSync && graphQuery.isFetching && Boolean(graphQuery.data) && !canvasGraphLoading;
const truncateBannerText = useMemo(() => {
if (!graphTruncated) return "";
if (isWorldFlatViewName(activeView?.name) || Boolean(graphQuery.data?.view?.filter?.world_flat)) {
return "";
}
if (truncateReason === "membership_cap") return t("topology.truncatedMembership");
if (truncateReason === "membership_frozen") return t("topology.truncatedFrozen");
if (truncateReason === "too_many_view_nodes") return t("topology.truncatedNodes");
if (truncateReason === "too_many_edges") return t("topology.truncatedEdges");
return t("topology.truncatedGeneric");
}, [graphTruncated, truncateReason, activeView?.name, graphQuery.data?.view?.filter?.world_flat, t]);
const activeLeafName = useMemo(() => {
if (!mapId) return "";
if (activeView?.name) return displayViewName(activeView.name, t);
return displayViewName(graphQuery.data?.view?.name, t);
}, [mapId, activeView, graphQuery.data?.view?.name, t]);
return {
rfRef,
canvasRef,
nodesRef,
appliedMapIdRef,
pendingFitRef,
isWorldFlatCanvasRef,
mapIdRef,
worldTransformRef,
graphQuery,
isWorldFlatCanvas,
canvasZoom,
setCanvasZoom,
worldVisualLod,
displayOpts,
displayEdges,
refreshFlatViewport,
scheduleFlatViewportRefresh,
fitCanvas,
focusNode,
locateNode,
graphTruncated,
truncateReason,
worldScatter,
worldTotal,
worldDockMe,
showWorldScatter,
canvasGraphLoading,
canvasGraphEmpty,
worldNeedsApply,
canvasGraphRefreshing,
truncateBannerText,
activeLeafName,
};
}

390
web/src/pages/topology/hooks/useTopologyDiscover.ts Normal file
View file

@ -0,0 +1,390 @@
import { useCallback, useMemo, useRef, useState } from "react";
import type { QueryClient } from "@tanstack/react-query";
import type { Edge, Node } from "@xyflow/react";
import { queryKeys } from "../../../constants/queryKeys";
import {
addTopologyViewNodes,
createFabricManualEdge,
deleteFabricEdges,
fetchLldpDiscoverJob,
fetchTopologyGraph,
patchTopologyPositions,
projectTopologyNeighbors,
removeTopologyViewNodes,
startLldpDiscover,
stopLldpCollectJob,
} from "../../../services/api";
import type {
TopologyDiscoverJob,
TopologyDiscoverNeResult,
TopologyDiscoverOut,
TopologyViewGraph,
} from "../../../types";
import type { DiscoverProgress, DiscoverSummary } from "../TopologyDiscoverPanel";
import type { EdgeDefaults, EdgeStyleData } from "../edgeStyle";
import { flowToPositions, graphToFlow } from "../graphFlow";
import { discoverResultKind, isLocalPendingEdgeId } from "../idUtils";
import { layoutGraph } from "../layoutGraph";
import type { NeNodeData } from "../TopologyReactFlowView";
export type UseTopologyDiscoverOptions = {
mapId: string;
nodes: Node<NeNodeData>[];
edges: Edge[];
graphNodes: TopologyViewGraph["nodes"] | undefined;
edgeDefaults: EdgeDefaults;
autoLayoutAfterDiscover: boolean;
discoverAutoAddUnmatched: boolean;
discoverProjectNeighbors: boolean;
queryClient: QueryClient;
setNodes: React.Dispatch<React.SetStateAction<Node<NeNodeData>[]>>;
setEdges: React.Dispatch<React.SetStateAction<Edge[]>>;
dirtyRef: React.MutableRefObject<boolean>;
pendingEdgeDeletesRef: React.MutableRefObject<Set<string>>;
pendingEdgeCreatesRef: React.MutableRefObject<Set<string>>;
historyLockRef: React.MutableRefObject<boolean>;
appliedMapIdRef: React.MutableRefObject<string>;
markDirty: () => void;
clearDirty: () => void;
showOk: (msg: string) => void;
showError: (msg: string) => void;
t: (key: string) => string;
};
export function useTopologyDiscover(opts: UseTopologyDiscoverOptions) {
const {
mapId,
nodes,
edges,
graphNodes,
edgeDefaults,
autoLayoutAfterDiscover,
discoverAutoAddUnmatched,
discoverProjectNeighbors,
queryClient,
setNodes,
setEdges,
dirtyRef,
pendingEdgeDeletesRef,
pendingEdgeCreatesRef,
historyLockRef,
appliedMapIdRef,
markDirty,
clearDirty,
showOk,
showError,
t,
} = opts;
const [discoverOpen, setDiscoverOpen] = useState(false);
const [discovering, setDiscovering] = useState(false);
const [discoverReport, setDiscoverReport] = useState<TopologyDiscoverOut | null>(null);
const [discoverLiveResults, setDiscoverLiveResults] = useState<TopologyDiscoverNeResult[]>([]);
const [discoverProgress, setDiscoverProgress] = useState<DiscoverProgress>({
index: 0,
total: 0,
neName: "",
neIp: "",
edgesAdded: 0,
edgesUpdated: 0,
});
const [discoverError, setDiscoverError] = useState("");
const [discoverJobId, setDiscoverJobId] = useState("");
const discoverAbortRef = useRef(false);
const flushDirtyCanvas = useCallback(async () => {
if (!mapId || !dirtyRef.current) return;
const createIds = [...pendingEdgeCreatesRef.current];
for (const id of createIds) {
const e = edges.find((x) => x.id === id);
if (!e) continue;
const d = (e.data || {}) as EdgeStyleData;
await createFabricManualEdge({
a_node_id: e.source,
b_node_id: e.target,
a_port: String(d.source_port || ""),
b_port: String(d.target_port || ""),
});
}
pendingEdgeCreatesRef.current.clear();
const pendingEdges = [...pendingEdgeDeletesRef.current].filter((id) => !isLocalPendingEdgeId(id));
if (pendingEdges.length) {
await deleteFabricEdges(pendingEdges);
}
pendingEdgeDeletesRef.current.clear();
const serverIds = (graphNodes || []).map((n) => n.fabric_node_id).filter(Boolean);
const localIds = nodes.map((n) => n.id);
const localSet = new Set(localIds);
const serverSet = new Set(serverIds);
const toAdd = localIds.filter((id) => !serverSet.has(id));
const toRemove = serverIds.filter((id) => !localSet.has(id));
if (toAdd.length) {
await addTopologyViewNodes(mapId, { fabric_node_ids: toAdd });
}
if (toRemove.length) {
await removeTopologyViewNodes(mapId, toRemove);
}
await patchTopologyPositions(mapId, flowToPositions(nodes));
clearDirty();
}, [
mapId,
edges,
graphNodes,
nodes,
dirtyRef,
pendingEdgeCreatesRef,
pendingEdgeDeletesRef,
clearDirty,
]);
const runDiscover = useCallback(
async (neIds?: string[]) => {
if (!mapId || discovering) return;
const filterIds = (neIds || []).map((x) => String(x || "").trim()).filter(Boolean);
if (!filterIds.length) {
showError(t("topology.discoverOneNeedNe"));
return;
}
setDiscoverOpen(true);
setDiscovering(true);
setDiscoverReport(null);
setDiscoverLiveResults([]);
setDiscoverError("");
setDiscoverJobId("");
discoverAbortRef.current = false;
const scannable = nodes.filter((n) => Boolean(n.data.managed_ne_id || n.data.ume_ne_id));
const scoped = scannable.filter(
(n) =>
filterIds.includes(String(n.data.managed_ne_id || "")) ||
filterIds.includes(String(n.data.ume_ne_id || "")),
);
setDiscoverProgress({
index: 0,
total: scoped.length,
neName: "",
neIp: "",
edgesAdded: 0,
edgesUpdated: 0,
});
try {
await flushDirtyCanvas();
if (!scoped.length) {
throw new Error(t("topology.discoverOneNeedNe"));
}
const jobStart = await startLldpDiscover({
scope: "ne_ids",
ne_ids: filterIds,
concurrency: 4,
auto_add_unmatched: discoverAutoAddUnmatched,
trigger_mode: "topology",
});
setDiscoverJobId(jobStart.id);
let job: TopologyDiscoverJob = jobStart;
let cancelled = false;
for (let i = 0; i < 600; i++) {
if (discoverAbortRef.current) {
cancelled = true;
break;
}
await new Promise((r) => window.setTimeout(r, 500));
if (discoverAbortRef.current) {
cancelled = true;
break;
}
job = await fetchLldpDiscoverJob(jobStart.id, { page: 1, pageSize: 5 });
setDiscoverProgress((p) => ({
...p,
index: job.done,
total: job.total || p.total,
edgesAdded: job.edges_added,
edgesUpdated: job.edges_updated,
neName: job.items?.[job.items.length - 1]?.ne_name || p.neName,
neIp: job.items?.[job.items.length - 1]?.ne_ip || p.neIp,
}));
setDiscoverLiveResults((job.items || []) as TopologyDiscoverNeResult[]);
if (
job.status === "done" ||
job.status === "failed" ||
job.status === "cancelled" ||
job.status === "stopped"
) {
if (job.status === "cancelled" || job.status === "stopped") cancelled = true;
break;
}
}
if (cancelled || discoverAbortRef.current) {
setDiscoverError(t("topology.discoverCancelled"));
setDiscoverReport({
map_id: mapId,
protocol: "lldp",
job_id: job.id,
scanned: job.done,
edges_added: job.edges_added,
edges_updated: job.edges_updated,
edges_stale: job.edges_missing ?? job.edges_stale,
results: (job.items || []) as TopologyDiscoverNeResult[],
graph: null,
});
return;
}
if (job.status === "failed") {
throw new Error(job.error || "discover_failed");
}
try {
job = await fetchLldpDiscoverJob(jobStart.id, { page: 1, pageSize: 100 });
} catch {
/* keep last polled job */
}
const baseGraph = await fetchTopologyGraph(mapId);
const projected = discoverProjectNeighbors
? await projectTopologyNeighbors(mapId, {
seed_fabric_node_ids: scoped.map((n) => n.id),
dry_run: true,
})
: baseGraph;
queryClient.setQueryData(queryKeys.topologyGraph(mapId), baseGraph);
if (discoverProjectNeighbors && projected.truncate_reason === "membership_frozen") {
showError(t("topology.truncatedFrozen"));
}
appliedMapIdRef.current = mapId;
let { rfNodes, rfEdges } = graphToFlow(projected.nodes, projected.edges, edgeDefaults);
const localPos = new Map(nodes.map((n) => [n.id, n.position]));
const serverNodeIds = new Set((baseGraph.nodes || []).map((n) => n.fabric_node_id));
rfNodes = rfNodes.map((n) => {
const p = localPos.get(n.id);
return p ? { ...n, position: { ...p } } : n;
});
let didAutoLayout = false;
if (autoLayoutAfterDiscover && rfNodes.length > 1) {
rfNodes = await layoutGraph(rfNodes, rfEdges, "hierarchical-tb");
didAutoLayout = true;
}
historyLockRef.current = true;
setNodes(rfNodes);
setEdges(rfEdges);
historyLockRef.current = false;
const localOnly = rfNodes.some((n) => !serverNodeIds.has(n.id));
if (localOnly || didAutoLayout) {
markDirty();
} else {
clearDirty();
}
const out: TopologyDiscoverOut = {
map_id: mapId,
protocol: "lldp",
job_id: job.id,
scanned: job.done,
edges_added: job.edges_added,
edges_updated: job.edges_updated,
edges_stale: job.edges_missing ?? job.edges_stale,
results: (job.items || []) as TopologyDiscoverNeResult[],
graph: projected,
};
setDiscoverReport(out);
await queryClient.invalidateQueries({ queryKey: queryKeys.topologyMaps });
await queryClient.invalidateQueries({ queryKey: queryKeys.fabricSummary });
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 (discoverAbortRef.current) {
setDiscoverError(t("topology.discoverCancelled"));
} else {
setDiscoverError(String(err));
showError(t("topology.discoverFail").replace("{{detail}}", String(err)));
}
} finally {
setDiscovering(false);
}
},
[
mapId,
discovering,
nodes,
queryClient,
setNodes,
setEdges,
showOk,
showError,
t,
autoLayoutAfterDiscover,
discoverAutoAddUnmatched,
discoverProjectNeighbors,
edgeDefaults,
clearDirty,
markDirty,
flushDirtyCanvas,
historyLockRef,
appliedMapIdRef,
],
);
const cancelDiscover = useCallback(async () => {
discoverAbortRef.current = true;
const jobId = discoverJobId;
if (jobId) {
try {
await stopLldpCollectJob(jobId);
} catch {
/* best-effort */
}
}
}, [discoverJobId]);
const discoverResults = discoverReport?.results?.length
? discoverReport.results
: discoverLiveResults;
const discoverCounts = useMemo(() => {
let ok = 0;
let warn = 0;
let fail = 0;
for (const r of discoverResults) {
const k = discoverResultKind(r);
if (k === "fail") fail += 1;
else if (k === "warn") warn += 1;
else ok += 1;
}
return { ok, warn, fail, issues: warn + fail };
}, [discoverResults]);
const discoverSummary: DiscoverSummary = discoverReport
? {
scanned: discoverReport.scanned,
added: discoverReport.edges_added,
updated: discoverReport.edges_updated,
missing: discoverReport.edges_stale || 0,
failed: discoverCounts.fail,
}
: {
scanned: discoverLiveResults.length,
added: discoverProgress.edgesAdded,
updated: discoverProgress.edgesUpdated,
missing: 0,
failed: discoverCounts.fail,
};
const discoverPct =
discovering && discoverProgress.total > 0
? Math.min(100, Math.round((discoverProgress.index / discoverProgress.total) * 100))
: discoverReport
? 100
: 0;
return {
discoverOpen,
setDiscoverOpen,
discovering,
discoverReport,
discoverProgress,
discoverError,
discoverResults,
discoverSummary,
discoverPct,
runDiscover,
cancelDiscover,
};
}

108
web/src/pages/topology/hooks/useTopologyHistory.ts Normal file
View file

@ -0,0 +1,108 @@
import { useCallback, useRef, useState } from "react";
import type { Edge, Node } from "@xyflow/react";
import { UNDO_MAX } from "../constants";
import type { HistorySnap } from "../pageTypes";
import type { NeNodeData } from "../TopologyReactFlowView";
export function useTopologyHistory(
nodes: Node<NeNodeData>[],
edges: Edge[],
setNodes: React.Dispatch<React.SetStateAction<Node<NeNodeData>[]>>,
setEdges: React.Dispatch<React.SetStateAction<Edge[]>>,
t: (key: string) => string,
) {
const [dirty, setDirty] = useState(false);
const [historyTick, setHistoryTick] = useState(0);
const dirtyRef = useRef(false);
const historyRef = useRef<HistorySnap[]>([]);
const redoRef = useRef<HistorySnap[]>([]);
const historyLockRef = useRef(false);
const pendingEdgeDeletesRef = useRef<Set<string>>(new Set());
const pendingEdgeCreatesRef = useRef<Set<string>>(new Set());
const canUndo = historyTick >= 0 && historyRef.current.length > 0;
const canRedo = historyTick >= 0 && redoRef.current.length > 0;
const markDirty = useCallback(() => {
dirtyRef.current = true;
setDirty(true);
}, []);
const clearDirty = useCallback(() => {
dirtyRef.current = false;
setDirty(false);
}, []);
const bumpHistory = useCallback(() => {
setHistoryTick((n) => n + 1);
}, []);
const confirmDiscardIfDirty = useCallback(() => {
if (!dirtyRef.current) return true;
return window.confirm(t("topology.unsavedConfirm"));
}, [t]);
const snapshot = useCallback(
(): HistorySnap => ({
nodes: nodes.map((n) => ({ ...n, position: { ...n.position }, data: { ...n.data } })),
edges: edges.map((e) => ({ ...e })),
pendingEdgeDeletes: [...pendingEdgeDeletesRef.current],
pendingEdgeCreates: [...pendingEdgeCreatesRef.current],
}),
[nodes, edges],
);
const pushHistory = useCallback(() => {
if (historyLockRef.current) return;
historyRef.current = [...historyRef.current.slice(-(UNDO_MAX - 1)), snapshot()];
redoRef.current = [];
bumpHistory();
}, [snapshot, bumpHistory]);
const undo = useCallback(() => {
const prev = historyRef.current.pop();
if (!prev) return;
redoRef.current.push(snapshot());
historyLockRef.current = true;
setNodes(prev.nodes);
setEdges(prev.edges);
pendingEdgeDeletesRef.current = new Set(prev.pendingEdgeDeletes);
pendingEdgeCreatesRef.current = new Set(prev.pendingEdgeCreates || []);
markDirty();
bumpHistory();
historyLockRef.current = false;
}, [snapshot, setNodes, setEdges, markDirty, bumpHistory]);
const redo = useCallback(() => {
const next = redoRef.current.pop();
if (!next) return;
historyRef.current.push(snapshot());
historyLockRef.current = true;
setNodes(next.nodes);
setEdges(next.edges);
pendingEdgeDeletesRef.current = new Set(next.pendingEdgeDeletes);
pendingEdgeCreatesRef.current = new Set(next.pendingEdgeCreates || []);
markDirty();
bumpHistory();
historyLockRef.current = false;
}, [snapshot, setNodes, setEdges, markDirty, bumpHistory]);
return {
dirty,
canUndo,
canRedo,
dirtyRef,
historyRef,
redoRef,
historyLockRef,
pendingEdgeDeletesRef,
pendingEdgeCreatesRef,
markDirty,
clearDirty,
bumpHistory,
confirmDiscardIfDirty,
pushHistory,
undo,
redo,
};
}

670
web/src/pages/topology/hooks/useTopologyTreeNav.ts Normal file
View file

@ -0,0 +1,670 @@
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useMutation, useQuery, type QueryClient } from "@tanstack/react-query";
import type { Edge, Node } from "@xyflow/react";
import type { SetURLSearchParams } from "react-router-dom";
import { queryKeys } from "../../../constants/queryKeys";
import {
createTopologyFolder,
deleteTopologyFolder,
deleteTopologyMap,
fetchTopologyTree,
fetchTopologyWorld,
searchFabricNodes,
updateTopologyFolder,
updateTopologyMap,
} from "../../../services/api";
import type { TopologyTreeFolderItem, TopologyTreeViewItem } from "../../../types";
import { LAST_LEAF_KEY, TREE_EXPAND_KEY, WORLD_MAP_ENABLED } from "../constants";
import type { CtxMenu } from "../pageTypes";
import {
findFolderInTree,
findViewInRegion,
folderPathFolders,
folderPathIds,
isRegionCanvasFolder,
isUmeWorldContainer,
isWorldDrillFolder,
isWorldFlatViewName,
regionDisplayName,
} from "../treeUtils";
import type { NeNodeData } from "../TopologyReactFlowView";
export type UseTopologyTreeNavOptions = {
liveSync: boolean;
searchParams: URLSearchParams;
setSearchParams: SetURLSearchParams;
locale: string;
queryClient: QueryClient;
confirmDiscardIfDirty: () => boolean;
clearDirty: () => void;
showOk: (msg: string) => void;
showError: (msg: string) => void;
t: (key: string) => string;
setNodes: React.Dispatch<React.SetStateAction<Node<NeNodeData>[]>>;
setEdges: React.Dispatch<React.SetStateAction<Edge[]>>;
setCtxMenu: React.Dispatch<React.SetStateAction<CtxMenu | null>>;
activeViewName?: string;
};
export function useTopologyTreeNav(opts: UseTopologyTreeNavOptions) {
const {
liveSync,
searchParams,
setSearchParams,
locale,
queryClient,
confirmDiscardIfDirty,
clearDirty,
showOk,
showError,
t,
setNodes,
setEdges,
setCtxMenu,
activeViewName,
} = opts;
const [mapId, setMapId] = useState("");
const [worldFocusFolderId, setWorldFocusFolderId] = useState("");
const [worldViewId, setWorldViewId] = useState("");
const [selectedFolderId, setSelectedFolderId] = useState("");
const [hotBrowseKey, setHotBrowseKey] = useState("");
const [pendingHighlightNe, setPendingHighlightNe] = useState("");
const [expandedIds, setExpandedIds] = useState<Record<string, boolean>>(() => {
try {
const raw = localStorage.getItem(TREE_EXPAND_KEY);
return raw ? (JSON.parse(raw) as Record<string, boolean>) : {};
} catch {
return {};
}
});
const [treeNeQuery, setTreeNeQuery] = useState("");
const [debouncedTreeNeQuery, setDebouncedTreeNeQuery] = useState("");
const [treeSearchOpen, setTreeSearchOpen] = useState(false);
const treeSearchRef = useRef<HTMLDivElement | null>(null);
const [newRootDialog, setNewRootDialog] = useState<{ name: string } | null>(null);
useEffect(() => {
const timer = window.setTimeout(() => setDebouncedTreeNeQuery(treeNeQuery.trim()), 200);
return () => window.clearTimeout(timer);
}, [treeNeQuery]);
const treeQuery = useQuery({
queryKey: queryKeys.topologyTree,
queryFn: fetchTopologyTree,
staleTime: liveSync ? 0 : 30_000,
refetchOnWindowFocus: liveSync,
refetchInterval: liveSync ? 5000 : false,
refetchIntervalInBackground: false,
});
const treeFlatMap = useMemo(() => {
if (!mapId) return false;
const kids = treeQuery.data?.root?.children || [];
return isWorldFlatViewName(findViewInRegion(kids, mapId)?.view?.name);
}, [mapId, treeQuery.data?.root?.children]);
const treeNeSearchQuery = useQuery({
queryKey: queryKeys.fabricNodeSearch(debouncedTreeNeQuery, 1),
queryFn: () => searchFabricNodes({ q: debouncedTreeNeQuery, page: 1, pageSize: 30 }),
enabled: debouncedTreeNeQuery.length >= 1,
});
const treeRoot = treeQuery.data?.root || null;
const regions = useMemo(() => treeRoot?.children || [], [treeRoot]);
const treeLoading = treeQuery.isPending && !treeQuery.data;
const treeFailed = treeQuery.isError && !treeQuery.data;
const rootFolderId = String(treeRoot?.id || "").trim();
const canvasModeLocal = Boolean(mapId);
useEffect(() => {
if (!treeRoot || !regions.length) return;
if (mapId) {
const hit = findViewInRegion(regions, mapId);
if (hit && selectedFolderId !== hit.region.id) {
setSelectedFolderId(hit.region.id);
setExpandedIds((prev) => ({ ...prev, [hit.region.id]: true }));
}
return;
}
if (selectedFolderId && !regions.some((r) => r.id === selectedFolderId)) {
setSelectedFolderId("");
}
}, [mapId, selectedFolderId, treeRoot, regions]);
const activeRegion = useMemo(() => {
if (!selectedFolderId) return null;
return findFolderInTree(regions, selectedFolderId);
}, [regions, selectedFolderId]);
const activeView = useMemo(() => {
if (!mapId) return null;
return findViewInRegion(regions, mapId)?.view || null;
}, [mapId, regions]);
const browseEntries = useMemo((): TopologyTreeViewItem[] => {
if (
!activeRegion ||
isRegionCanvasFolder(activeRegion, rootFolderId) ||
isUmeWorldContainer(activeRegion)
) {
return [];
}
return activeRegion.views || [];
}, [activeRegion, rootFolderId]);
const hexBrowseRegion = useMemo(() => {
if (!activeRegion) return null;
if (isUmeWorldContainer(activeRegion)) return activeRegion;
if (isRegionCanvasFolder(activeRegion, rootFolderId)) return null;
return activeRegion;
}, [activeRegion, rootFolderId]);
const umeWorldHexModules = useMemo(() => {
if (!activeRegion || !isUmeWorldContainer(activeRegion)) return null;
const drill = (activeRegion.children || []).find((c) => isWorldDrillFolder(c)) || null;
const flatView = WORLD_MAP_ENABLED
? (activeRegion.views || []).find((v) => isWorldFlatViewName(v.name)) || null
: null;
return { drill, flatView };
}, [activeRegion]);
useEffect(() => {
if (!WORLD_MAP_ENABLED) {
setWorldViewId("");
return;
}
let cancelled = false;
fetchTopologyWorld()
.then((w) => {
if (cancelled) return;
setWorldViewId(w.view_id);
})
.catch(() => {
/* world not seeded yet */
});
return () => {
cancelled = true;
};
}, []);
useEffect(() => {
try {
localStorage.setItem(TREE_EXPAND_KEY, JSON.stringify(expandedIds));
} catch {
/* ignore */
}
}, [expandedIds]);
useEffect(() => {
try {
if (mapId) localStorage.setItem(LAST_LEAF_KEY, mapId);
else localStorage.removeItem(LAST_LEAF_KEY);
} catch {
/* ignore */
}
}, [mapId]);
useEffect(() => {
if (WORLD_MAP_ENABLED || !mapId || !treeFlatMap) return;
const container = regions.find(
(r) => r.external_ref === "ume:world" || r.name === "UME World",
);
setWorldFocusFolderId("");
if (container) {
setSelectedFolderId(container.id);
setExpandedIds((p) => ({ ...p, [container.id]: true }));
}
setMapId("");
clearDirty();
}, [mapId, treeFlatMap, regions, clearDirty]);
useEffect(() => {
const viewId = String(searchParams.get("view") || "").trim();
const neId = String(searchParams.get("ne") || "").trim();
if (!viewId || !regions.length) return;
const hit = findViewInRegion(regions, viewId);
if (!hit) return;
setSelectedFolderId(hit.region.id);
setExpandedIds((p) => ({ ...p, [hit.region.id]: true }));
setMapId(viewId);
if (neId) setPendingHighlightNe(neId);
setSearchParams({}, { replace: true });
}, [regions, searchParams, setSearchParams]);
useEffect(() => {
if (!mapId && !selectedFolderId) return;
const root = document.querySelector(".topo-region-list");
if (!root) return;
const hit =
root.querySelector("li.is-active") ||
root.querySelector(".topo-region-list__block.is-branch-active");
if (hit && "scrollIntoView" in hit) {
(hit as HTMLElement).scrollIntoView({ block: "nearest", behavior: "smooth" });
}
}, [mapId, selectedFolderId, expandedIds]);
useEffect(() => {
if (!treeSearchOpen) return;
const onDoc = (e: MouseEvent) => {
const el = treeSearchRef.current;
if (el && e.target instanceof Element && !el.contains(e.target)) {
setTreeSearchOpen(false);
}
};
document.addEventListener("mousedown", onDoc);
return () => document.removeEventListener("mousedown", onDoc);
}, [treeSearchOpen]);
const expandFolderPath = useCallback(
(folderId: string) => {
const path = folderPathIds(regions, folderId);
if (!path.length) return;
setExpandedIds((p) => {
const next = { ...p };
for (const id of path) next[id] = true;
return next;
});
},
[regions],
);
const primaryViewOfFolder = useCallback((folder: TopologyTreeFolderItem | null | undefined) => {
if (!folder) return null;
const views = folder.views || [];
if (isWorldDrillFolder(folder)) {
return views.find((v) => v.name === "World") || views[0] || null;
}
if (folder.external_ref === "ume:world" || folder.name === "UME World") {
const drill = (folder.children || []).find((c) => isWorldDrillFolder(c));
if (drill) {
const dv = drill.views || [];
return dv.find((v) => v.name === "World") || dv[0] || null;
}
return views.find((v) => !isWorldFlatViewName(v.name)) || null;
}
const physical = views.find((v) => String(v.kind) === "physical") || null;
return physical || views[0] || null;
}, []);
const goUmeWorldNav = useCallback(() => {
if (!confirmDiscardIfDirty()) return;
const container = regions.find(
(r) => r.external_ref === "ume:world" || r.name === "UME World",
);
if (!container) return;
setWorldFocusFolderId("");
setSelectedFolderId(container.id);
setExpandedIds((p) => ({ ...p, [container.id]: true }));
setMapId("");
clearDirty();
}, [confirmDiscardIfDirty, clearDirty, regions]);
const goRegion = useCallback(
(folderId: string) => {
if (!confirmDiscardIfDirty()) return;
setSelectedFolderId(folderId);
expandFolderPath(folderId);
const folder = findFolderInTree(regions, folderId);
if (isRegionCanvasFolder(folder, String(treeRoot?.id || ""))) {
setWorldFocusFolderId("");
const view = primaryViewOfFolder(folder);
if (view) {
setMapId(view.id);
clearDirty();
return;
}
}
setMapId("");
setWorldFocusFolderId("");
clearDirty();
setNodes([]);
setEdges([]);
},
[
confirmDiscardIfDirty,
clearDirty,
setNodes,
setEdges,
regions,
primaryViewOfFolder,
expandFolderPath,
treeRoot?.id,
],
);
const goRoot = useCallback(() => {
if (!confirmDiscardIfDirty()) return;
setSelectedFolderId("");
setWorldFocusFolderId("");
setMapId("");
clearDirty();
setNodes([]);
setEdges([]);
}, [confirmDiscardIfDirty, clearDirty, setNodes, setEdges]);
const goCanvas = useCallback(
(viewId: string, folderId?: string) => {
if (!confirmDiscardIfDirty()) return;
const hit = findViewInRegion(regions, viewId);
if (!WORLD_MAP_ENABLED && isWorldFlatViewName(hit?.view?.name)) {
showError(t("topology.worldMapOffline"));
return;
}
const regionId = folderId || hit?.region.id || selectedFolderId;
if (regionId) {
setSelectedFolderId(regionId);
expandFolderPath(regionId);
}
setWorldFocusFolderId("");
setMapId(viewId);
},
[confirmDiscardIfDirty, regions, selectedFolderId, expandFolderPath, showError, t],
);
const goBackBrowse = useCallback(() => {
if (!confirmDiscardIfDirty()) return;
const folder = findFolderInTree(regions, selectedFolderId);
const parentId = String(folder?.parent_id || "").trim();
const parent = parentId ? findFolderInTree(regions, parentId) : null;
if (parent) {
setSelectedFolderId(parent.id);
expandFolderPath(parent.id);
if (isRegionCanvasFolder(parent, String(treeRoot?.id || ""))) {
setWorldFocusFolderId("");
const view = primaryViewOfFolder(parent);
if (view) {
setMapId(view.id);
clearDirty();
return;
}
}
setWorldFocusFolderId("");
setMapId("");
clearDirty();
setNodes([]);
setEdges([]);
return;
}
setSelectedFolderId("");
setWorldFocusFolderId("");
setMapId("");
clearDirty();
setNodes([]);
setEdges([]);
}, [
confirmDiscardIfDirty,
clearDirty,
setNodes,
setEdges,
regions,
selectedFolderId,
treeRoot?.id,
expandFolderPath,
primaryViewOfFolder,
]);
const renameMapMut = useMutation({
mutationFn: ({ id, name }: { id: string; name: string }) => updateTopologyMap(id, { name }),
onSuccess: async () => {
await queryClient.invalidateQueries({ queryKey: queryKeys.topologyTree });
await queryClient.invalidateQueries({ queryKey: queryKeys.topologyMaps });
showOk(t("topology.renamed"));
},
onError: (err) => showError(String(err)),
});
const promptRenameMap = useCallback(
(id: string, currentName: string) => {
const next = window.prompt(t("topology.renamePrompt"), currentName);
if (next == null) return;
const name = next.trim();
if (!name || name === currentName) return;
renameMapMut.mutate({ id, name });
},
[renameMapMut, t],
);
const createRegionMut = useMutation({
mutationFn: (input: { name: string; parent_id?: string }) => {
const parentId = String(input.parent_id || "").trim();
return createTopologyFolder(
parentId
? { name: input.name, kind: "region", parent_id: parentId, locale }
: { name: input.name, kind: "region", locale },
);
},
onSuccess: async (folder, input) => {
setNewRootDialog(null);
await queryClient.invalidateQueries({ queryKey: queryKeys.topologyTree });
const tree = await fetchTopologyTree();
const regionsList = tree.root?.children || [];
const hit = findFolderInTree(regionsList, folder.id);
const parent = String(input.parent_id || folder.parent_id || hit?.parent_id || "").trim();
const rootId = String(tree.root?.id || "").trim();
const isNested = Boolean(parent && parent !== rootId);
setWorldFocusFolderId("");
setExpandedIds((prev) => {
const next = { ...prev, [folder.id]: true };
if (parent) next[parent] = true;
return next;
});
if (isNested) {
setSelectedFolderId(parent);
expandFolderPath(parent);
const parentHit = findFolderInTree(regionsList, parent);
const parentView =
primaryViewOfFolder(parentHit) ||
(parentHit?.views || []).find((v) => String(v.kind) === "physical") ||
(parentHit?.views || [])[0];
const stayViewId = mapId || parentView?.id || "";
if (stayViewId) {
setMapId(stayViewId);
await queryClient.invalidateQueries({
queryKey: queryKeys.topologyGraph(stayViewId),
});
}
} else {
setSelectedFolderId(folder.id);
setMapId("");
}
showOk(t("topology.regionCreated"));
},
onError: (err) => showError(String(err)),
});
const renameRegionMut = useMutation({
mutationFn: ({ id, name }: { id: string; name: string }) => updateTopologyFolder(id, { name }),
onSuccess: async () => {
await queryClient.invalidateQueries({ queryKey: queryKeys.topologyTree });
showOk(t("topology.regionRenamed"));
},
onError: (err) => showError(String(err)),
});
const promptRenameRegion = useCallback(
(id: string, currentName: string) => {
const next = window.prompt(t("topology.renameRegionPrompt"), currentName);
if (next == null) return;
const name = next.trim();
if (!name || name === currentName) return;
renameRegionMut.mutate({ id, name });
},
[renameRegionMut, t],
);
const deleteMapMut = useMutation({
mutationFn: (id: string) => deleteTopologyMap(id),
onSuccess: async (_out, id) => {
await queryClient.invalidateQueries({ queryKey: queryKeys.topologyTree });
await queryClient.invalidateQueries({ queryKey: queryKeys.topologyMaps });
if (mapId === id) {
clearDirty();
setMapId("");
setNodes([]);
setEdges([]);
}
},
onError: (err) => showError(String(err)),
});
const deleteFolderMut = useMutation({
mutationFn: (id: string) => deleteTopologyFolder(id, false),
onSuccess: async (_out, id) => {
await queryClient.invalidateQueries({ queryKey: queryKeys.topologyTree });
if (selectedFolderId === id) {
setSelectedFolderId("");
setMapId("");
}
showOk(t("topology.regionDeleted"));
},
onError: (err) => showError(String(err)),
});
const promptNewRegion = useCallback(() => {
setNewRootDialog({ name: t("topology.newRegionName") });
}, [t]);
const submitNewRoot = useCallback(() => {
const name = String(newRootDialog?.name || "").trim();
if (!name) {
showError(t("topology.newRegionPrompt"));
return;
}
createRegionMut.mutate({ name });
}, [newRootDialog, createRegionMut, showError, t]);
const promptNewSubRegion = useCallback(() => {
const viewName = activeView?.name || activeViewName;
if (isWorldFlatViewName(viewName)) {
showError(t("topology.subRegionNotOnFlat"));
return;
}
let parentId = selectedFolderId;
if (!parentId && worldViewId && mapId === worldViewId) {
const container = regions.find(
(r) => r.external_ref === "ume:world" || r.name === "UME World",
);
const drill = (container?.children || []).find((c) => isWorldDrillFolder(c));
parentId = drill?.id || container?.id || "";
}
if (!parentId) {
showError(t("topology.subRegionNeedParent"));
return;
}
const name = window.prompt(t("topology.newSubRegionPrompt"), t("topology.newSubRegionName"));
if (!name?.trim()) return;
createRegionMut.mutate({ name: name.trim(), parent_id: parentId });
setCtxMenu(null);
}, [
activeView?.name,
activeViewName,
selectedFolderId,
worldViewId,
mapId,
regions,
createRegionMut,
t,
showError,
setCtxMenu,
]);
const onTreeToggleExpand = useCallback((folderId: string, nextOpen: boolean) => {
setExpandedIds((p) => ({ ...p, [folderId]: nextOpen }));
}, []);
const onTreeHotBrowseKey = useCallback((key: string) => {
setHotBrowseKey(key);
}, []);
const onTreeClearHotBrowseKey = useCallback((key: string) => {
setHotBrowseKey((k) => (k === key ? "" : k));
}, []);
const onTreeDeleteFolder = useCallback(
(folderId: string) => {
deleteFolderMut.mutate(folderId);
},
[deleteFolderMut],
);
const onTreeDeleteMap = useCallback(
(viewId: string) => {
deleteMapMut.mutate(viewId);
},
[deleteMapMut],
);
const breadcrumbFolders = useMemo(
() => folderPathFolders(regions, selectedFolderId),
[regions, selectedFolderId],
);
const titleText = useMemo(() => {
if (activeRegion) return regionDisplayName(activeRegion, t);
return t("topology.rootName");
}, [activeRegion, t]);
return {
mapId,
setMapId,
worldFocusFolderId,
setWorldFocusFolderId,
worldViewId,
selectedFolderId,
setSelectedFolderId,
hotBrowseKey,
setHotBrowseKey,
expandedIds,
setExpandedIds,
treeNeQuery,
setTreeNeQuery,
debouncedTreeNeQuery,
setDebouncedTreeNeQuery,
treeSearchOpen,
setTreeSearchOpen,
treeSearchRef,
newRootDialog,
setNewRootDialog,
treeQuery,
treeFlatMap,
treeNeSearchQuery,
treeRoot,
regions,
treeLoading,
treeFailed,
rootFolderId,
canvasMode: canvasModeLocal,
activeRegion,
activeView,
browseEntries,
hexBrowseRegion,
umeWorldHexModules,
expandFolderPath,
primaryViewOfFolder,
goUmeWorldNav,
goRegion,
goRoot,
goCanvas,
goBackBrowse,
renameMapMut,
promptRenameMap,
createRegionMut,
renameRegionMut,
promptRenameRegion,
deleteMapMut,
deleteFolderMut,
promptNewRegion,
submitNewRoot,
promptNewSubRegion,
onTreeToggleExpand,
onTreeHotBrowseKey,
onTreeClearHotBrowseKey,
onTreeDeleteFolder,
onTreeDeleteMap,
breadcrumbFolders,
titleText,
pendingHighlightNe,
setPendingHighlightNe,
};
}

23
web/src/pages/topology/idUtils.ts Normal file
View file

@ -0,0 +1,23 @@
import type { TopologyDiscoverNeResult } from "../../types";
export function newId(): string {
if (typeof crypto !== "undefined" && crypto.randomUUID) {
return crypto.randomUUID().replace(/-/g, "");
}
return `${Date.now().toString(16)}${Math.random().toString(16).slice(2, 10)}`;
}
export function newLocalEdgeId(): string {
return `local:${newId()}`;
}
export function isLocalPendingEdgeId(id: string): boolean {
return String(id || "").startsWith("local:");
}
export function discoverResultKind(r: TopologyDiscoverNeResult): "ok" | "warn" | "fail" {
if (!r.ok) return "fail";
const unmatchedCount = r.unmatched_count ?? (r.unmatched?.length || 0);
if (r.parser_stub || unmatchedCount > 0) return "warn";
return "ok";
}

29
web/src/pages/topology/pageTypes.ts Normal file
View file

@ -0,0 +1,29 @@
import type { Edge, Node } from "@xyflow/react";
import type { NeNodeData } from "./TopologyReactFlowView";
export type HistorySnap = {
nodes: Node<NeNodeData>[];
edges: Edge[];
pendingEdgeDeletes: string[];
pendingEdgeCreates: string[];
};
export type PaletteSource = "managed" | "ume";
export type PaletteItem = {
key: string;
source: PaletteSource;
managed_ne_id: string;
ume_ne_id: string;
name: string;
ip: string;
vendor: string;
meta: string;
connect_status: string;
};
export type CtxMenu =
| { kind: "node"; id: string; x: number; y: number }
| { kind: "edge"; id: string; x: number; y: number }
| { kind: "selection"; x: number; y: number }
| { kind: "pane"; x: number; y: number; flowX: number; flowY: number };

40
web/src/pages/topology/searchUtils.ts Normal file
View file

@ -0,0 +1,40 @@
import type { Node } from "@xyflow/react";
import type { NeNodeData } from "./TopologyReactFlowView";
export function normalizeSearchText(s: string): string {
return String(s || "")
.toLowerCase()
.replace(/[\s_\-./]+/g, "");
}
/** Case-insensitive substring + loose subsequence (e.g. r1 → router-1). */
export function fuzzyIncludes(haystack: string, needle: string): boolean {
const h = normalizeSearchText(haystack);
const n = normalizeSearchText(needle);
if (!n) return true;
if (!h) return false;
if (h.includes(n)) return true;
let i = 0;
for (const ch of h) {
if (ch === n[i]) i += 1;
if (i >= n.length) return true;
}
return false;
}
export function nodeMatchesQuery(n: Node<NeNodeData>, query: string): boolean {
const tokens = String(query || "")
.trim()
.toLowerCase()
.split(/\s+/)
.filter(Boolean);
if (!tokens.length) return false;
const bits = [n.data.label, n.data.ne_ip, n.data.vendor, n.data.managed_ne_id, n.data.ume_ne_id];
return tokens.every((tok) => bits.some((b) => fuzzyIncludes(String(b || ""), tok)));
}
export function isPlaceholderSource(source: string | undefined, neIp: string): boolean {
const src = String(source || "").trim().toLowerCase();
if (src === "lldp" || src === "topology") return true;
return !String(neIp || "").trim() && Boolean(src);
}

35
web/src/pages/topology/sidebarLayout.ts Normal file
View file

@ -0,0 +1,35 @@
import {
SIDEBAR_WIDTH_DEFAULT,
SIDEBAR_WIDTH_KEY,
SIDEBAR_WIDTH_MAX,
SIDEBAR_WIDTH_MIN,
} from "./constants";
export function loadSidebarWidth(): number {
try {
const n = Number(localStorage.getItem(SIDEBAR_WIDTH_KEY));
if (Number.isFinite(n) && n >= SIDEBAR_WIDTH_MIN) {
return Math.min(Math.round(n), SIDEBAR_WIDTH_MAX);
}
} catch {
/* ignore */
}
return SIDEBAR_WIDTH_DEFAULT;
}
export function saveSidebarWidth(width: number): void {
try {
localStorage.setItem(SIDEBAR_WIDTH_KEY, String(Math.round(width)));
} catch {
/* ignore */
}
}
export function clampSidebarWidth(width: number, pageWidth?: number): number {
const maxByPage =
pageWidth && pageWidth > 0
? Math.max(SIDEBAR_WIDTH_MIN, Math.floor(pageWidth * 0.55))
: SIDEBAR_WIDTH_MAX;
const maxW = Math.min(SIDEBAR_WIDTH_MAX, maxByPage);
return Math.max(SIDEBAR_WIDTH_MIN, Math.min(maxW, Math.round(width)));
}

49
web/src/pages/topology/topoGeometry.ts Normal file
View file

@ -0,0 +1,49 @@
/** Fixed box for onlyRenderVisibleElements (xyflow skips off-screen mount when sized + handles set). */
export const TOPO_NODE_W = 80;
export const TOPO_NODE_H = 25;
export const TOPO_ICON = 25;
/** region-building.png is 195×133 — keep aspect so icon center == handle. */
export const TOPO_REGION_ICON_H = Math.round((TOPO_ICON * 133) / 195);
export const TOPO_HANDLE_X = TOPO_NODE_W / 2;
export const TOPO_HANDLE_Y = TOPO_ICON / 2;
export const TOPO_REGION_HANDLE_X = TOPO_NODE_W / 2;
export const TOPO_REGION_HANDLE_Y = TOPO_REGION_ICON_H / 2;
/** API x/y is icon center; RF position is top-left of the node box. */
export function iconFlowPosition(
apiX: number,
apiY: number,
handleX: number,
handleY: number,
): { x: number; y: number } {
return { x: apiX - handleX, y: apiY - handleY };
}
export function iconApiPosition(
flowX: number,
flowY: number,
handleX: number,
handleY: number,
): { x: number; y: number } {
return { x: flowX + handleX, y: flowY + handleY };
}
export function regionFlowPosition(apiX: number, apiY: number): { x: number; y: number } {
return iconFlowPosition(apiX, apiY, TOPO_REGION_HANDLE_X, TOPO_REGION_HANDLE_Y);
}
export function regionApiPosition(flowX: number, flowY: number): { x: number; y: number } {
return iconApiPosition(flowX, flowY, TOPO_REGION_HANDLE_X, TOPO_REGION_HANDLE_Y);
}
export function neFlowPosition(apiX: number, apiY: number): { x: number; y: number } {
return iconFlowPosition(apiX, apiY, TOPO_HANDLE_X, TOPO_HANDLE_Y);
}
export function neApiPosition(flowX: number, flowY: number): { x: number; y: number } {
return iconApiPosition(flowX, flowY, TOPO_HANDLE_X, TOPO_HANDLE_Y);
}
export function isRegionFabricId(id: string): boolean {
return String(id || "").startsWith("region:");
}

120
web/src/pages/topology/topologyIcons.tsx Normal file
View file

@ -0,0 +1,120 @@
export function ChevronIcon({ open }: { open: boolean }) {
return (
<svg
viewBox="0 0 24 24"
width="12"
height="12"
aria-hidden="true"
className="topo-svg-icon"
style={{ transform: open ? "rotate(90deg)" : "rotate(0deg)", transition: "transform 0.12s ease" }}
>
<path
fill="none"
stroke="currentColor"
strokeWidth="2.2"
strokeLinecap="round"
strokeLinejoin="round"
d="M9 6l6 6-6 6"
/>
</svg>
);
}
export function SidebarFoldIcon({ expand }: { expand?: boolean }) {
return (
<svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" className="topo-svg-icon">
<path
d={expand ? "M9 6l6 6-6 6" : "M15 6l-6 6 6 6"}
fill="none"
stroke="currentColor"
strokeWidth="2.2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}
export function PencilIcon() {
return (
<svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" className="topo-svg-icon">
<path
fill="currentColor"
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
/>
</svg>
);
}
export function PlusIcon() {
return (
<svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" className="topo-svg-icon">
<path
fill="none"
stroke="currentColor"
strokeWidth="2.2"
strokeLinecap="round"
d="M12 5v14M5 12h14"
/>
</svg>
);
}
export function CloseIcon() {
return (
<svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" className="topo-svg-icon">
<path
fill="none"
stroke="currentColor"
strokeWidth="2.2"
strokeLinecap="round"
d="M6 6l12 12M18 6L6 18"
/>
</svg>
);
}
export function RegionGlyph({ size = 16 }: { size?: number }) {
return (
<svg viewBox="0 0 24 24" width={size} height={size} aria-hidden="true" className="topo-tree__glyph-svg">
<path
d="M4 8.5L12 4l8 4.5v7L12 20l-8-4.5v-7z"
fill="none"
stroke="currentColor"
strokeWidth="1.8"
strokeLinejoin="round"
/>
<path d="M12 4v16M4 8.5l8 4.5 8-4.5" fill="none" stroke="currentColor" strokeWidth="1.5" opacity="0.7" />
</svg>
);
}
export function LayerGlyph({ role, size = 16 }: { role?: string; size?: number }) {
const r = String(role || "core").toLowerCase();
if (r === "aggregation") {
return (
<svg viewBox="0 0 24 24" width={size} height={size} aria-hidden="true" className="topo-tree__glyph-svg">
<rect x="4" y="5" width="16" height="4" rx="1.5" fill="currentColor" opacity="0.9" />
<rect x="6" y="11" width="12" height="3.5" rx="1.2" fill="currentColor" opacity="0.65" />
<rect x="8" y="16.5" width="8" height="3" rx="1" fill="currentColor" opacity="0.45" />
</svg>
);
}
if (r === "access") {
return (
<svg viewBox="0 0 24 24" width={size} height={size} aria-hidden="true" className="topo-tree__glyph-svg">
<circle cx="7" cy="12" r="2.4" fill="currentColor" />
<circle cx="17" cy="7" r="2.2" fill="currentColor" opacity="0.8" />
<circle cx="17" cy="17" r="2.2" fill="currentColor" opacity="0.8" />
<path d="M9.4 12H14.5M14.5 12L16 8.4M14.5 12L16 15.6" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" />
</svg>
);
}
return (
<svg viewBox="0 0 24 24" width={size} height={size} aria-hidden="true" className="topo-tree__glyph-svg">
<rect x="7" y="3.5" width="10" height="17" rx="2" fill="none" stroke="currentColor" strokeWidth="1.8" />
<circle cx="12" cy="8" r="2.2" fill="currentColor" />
<path d="M9 13.5h6M9 16.5h6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
</svg>
);
}

227
web/src/pages/topology/treeUtils.ts Normal file
View file

@ -0,0 +1,227 @@
import type { CSSProperties } from "react";
import type { TopologyTreeFolderItem, TopologyTreeViewItem, TopologyWorldTransform } from "../../types";
import { WORLD_MAP_ENABLED } from "./constants";
export { WORLD_MAP_ENABLED };
export function findViewInRegion(
regions: TopologyTreeFolderItem[],
viewId: string,
): { region: TopologyTreeFolderItem; view: TopologyTreeViewItem } | null {
for (const region of regions) {
const view = (region.views || []).find((v) => v.id === viewId);
if (view) return { region, view };
const nested = findViewInRegion(region.children || [], viewId);
if (nested) return nested;
}
return null;
}
export function findFolderInTree(
folders: TopologyTreeFolderItem[],
folderId: string,
): TopologyTreeFolderItem | null {
for (const folder of folders) {
if (folder.id === folderId) return folder;
const nested = findFolderInTree(folder.children || [], folderId);
if (nested) return nested;
}
return null;
}
export function indexFoldersById(
folders: TopologyTreeFolderItem[],
acc: Map<string, TopologyTreeFolderItem> = new Map(),
): Map<string, TopologyTreeFolderItem> {
for (const folder of folders) {
acc.set(folder.id, folder);
indexFoldersById(folder.children || [], acc);
}
return acc;
}
export function folderPathIds(folders: TopologyTreeFolderItem[], folderId: string): string[] {
const byId = indexFoldersById(folders);
const path: string[] = [];
let cur: string | undefined = folderId;
const seen = new Set<string>();
while (cur && !seen.has(cur)) {
seen.add(cur);
path.push(cur);
const folder = byId.get(cur);
const parent = String(folder?.parent_id || "").trim();
if (!folder || !parent || !byId.has(parent)) break;
cur = parent;
}
return path;
}
export function folderPathFolders(
folders: TopologyTreeFolderItem[],
folderId: string,
): TopologyTreeFolderItem[] {
if (!folderId) return [];
const byId = indexFoldersById(folders);
return folderPathIds(folders, folderId)
.map((id) => byId.get(id))
.filter((f): f is TopologyTreeFolderItem => Boolean(f))
.reverse();
}
export function isUmeWorldContainer(folder: TopologyTreeFolderItem | null | undefined): boolean {
if (!folder) return false;
const ext = String(folder.external_ref || "").trim();
return ext === "ume:world" || folder.name === "UME World";
}
export function isUmeWorldNavFolder(folder: TopologyTreeFolderItem | null | undefined): boolean {
if (!folder) return false;
const ext = String(folder.external_ref || "").trim();
if (isUmeWorldContainer(folder) || ext === "ume:world:drill") return true;
return Boolean(ext);
}
export function isWorldDrillFolder(folder: TopologyTreeFolderItem | null | undefined): boolean {
if (!folder) return false;
const ext = String(folder.external_ref || "").trim();
return ext === "ume:world:drill" || (folder.name === "World" && Boolean(folder.is_system));
}
export function isWorldFlatViewName(name: string | undefined | null): boolean {
const n = String(name || "").trim();
return n === "世界地图" || n === "完整世界地图" || n === "World map";
}
export function isManualRootMapName(name: string | undefined | null): boolean {
const n = String(name || "").trim();
return n === "根图" || n === "Root map";
}
export function displayViewName(name: string | undefined | null, t: (key: string) => string): string {
if (isWorldFlatViewName(name)) return t("topology.worldMapName");
if (isManualRootMapName(name)) return t("topology.rootMapName");
return String(name || "").trim();
}
export function isUmeStructuralFolder(folder: TopologyTreeFolderItem | null | undefined): boolean {
if (!folder) return false;
if (isUmeWorldContainer(folder) || isWorldDrillFolder(folder)) return true;
const ext = String(folder.external_ref || "").trim();
return ext === "ume:world" || ext === "ume:world:drill";
}
export function isManualRootMapFolder(folder: TopologyTreeFolderItem | null | undefined): boolean {
if (!folder || isUmeStructuralFolder(folder)) return false;
return Boolean(folder.is_system) && !String(folder.external_ref || "").trim();
}
export function isUmeSyncedSubRegion(folder: TopologyTreeFolderItem | null | undefined): boolean {
if (!folder || isUmeStructuralFolder(folder)) return false;
return Boolean(String(folder.external_ref || "").trim());
}
export function worldVisualLodFromZoom(zoom: number): "dot" | "pin" | "full" {
if (zoom < 0.04) return "dot";
if (zoom < 0.12) return "pin";
return "full";
}
export function worldDisplayBounds(wt: TopologyWorldTransform | null | undefined): {
x: number;
y: number;
width: number;
height: number;
} | null {
if (!wt) return null;
const scale = Number(wt.scale) || 1;
const width = Math.max(1, (Number(wt.full_max_x) - Number(wt.full_min_x)) * scale);
const height = Math.max(1, (Number(wt.full_max_y) - Number(wt.full_min_y)) * scale);
if (!Number.isFinite(width) || !Number.isFinite(height)) return null;
return { x: 0, y: 0, width, height };
}
export function isRegionCanvasFolder(
folder: TopologyTreeFolderItem | null | undefined,
rootId?: string,
): boolean {
if (!folder) return false;
if (isUmeWorldContainer(folder)) return false;
const rid = String(rootId || "").trim();
const parent = String(folder.parent_id || "").trim();
if (rid && parent === rid) return false;
return true;
}
export function regionDisplayName(
region: TopologyTreeFolderItem | null | undefined,
t?: (key: string) => string,
): string {
if (!region) return "";
const raw = String(region.name || "").trim();
if (t && isManualRootMapName(raw)) return t("topology.rootMapName");
return raw;
}
export function folderNeCount(folder: TopologyTreeFolderItem | null | undefined): number {
if (!folder) return 0;
return Math.max(0, Math.floor(Number(folder.ne_count) || 0));
}
export function formatNeCount(count: number): string {
const n = Math.max(0, Math.floor(Number(count) || 0));
return `${n}N`;
}
export function canvasBgLuminance(bg: string): number {
const hex = String(bg || "").replace("#", "").trim();
if (hex.length !== 6) return 0.1;
const r = parseInt(hex.slice(0, 2), 16);
const g = parseInt(hex.slice(2, 4), 16);
const b = parseInt(hex.slice(4, 6), 16);
if (![r, g, b].every((n) => Number.isFinite(n))) return 0.1;
return (0.299 * r + 0.587 * g + 0.114 * b) / 255;
}
export function canvasFloatChromeVars(bg: string): CSSProperties {
const light = canvasBgLuminance(bg) > 0.55;
if (light) {
return {
"--topo-float-bg": "rgba(255, 255, 255, 0.92)",
"--topo-float-border": "rgba(15, 23, 42, 0.08)",
"--topo-float-shadow": "0 8px 24px rgba(15, 23, 42, 0.12)",
"--topo-float-fg": "#0f172a",
"--topo-float-muted": "#64748b",
"--topo-float-btn-bg": "transparent",
"--topo-float-btn-border": "transparent",
"--topo-float-btn-hover": "rgba(15, 23, 42, 0.06)",
"--topo-float-active-bg": "rgba(37, 99, 235, 0.16)",
"--topo-float-active-fg": "#1d4ed8",
"--topo-float-active-border": "#3b82f6",
"--topo-float-control-bg": "transparent",
"--topo-float-control-hover": "rgba(15, 23, 42, 0.06)",
"--topo-float-control-fill": "#334155",
"--topo-float-input-bg": "#ffffff",
"--topo-float-input-fg": "#0f172a",
"--topo-float-input-border": "rgba(15, 23, 42, 0.16)",
} as CSSProperties;
}
return {
"--topo-float-bg": "rgba(15, 23, 42, 0.92)",
"--topo-float-border": "rgba(148, 163, 184, 0.18)",
"--topo-float-shadow": "0 8px 24px rgba(0, 0, 0, 0.35)",
"--topo-float-fg": "#e2e8f0",
"--topo-float-muted": "#94a3b8",
"--topo-float-btn-bg": "transparent",
"--topo-float-btn-border": "transparent",
"--topo-float-btn-hover": "rgba(30, 41, 59, 0.9)",
"--topo-float-active-bg": "rgba(37, 99, 235, 0.28)",
"--topo-float-active-fg": "#93c5fd",
"--topo-float-active-border": "#3b82f6",
"--topo-float-control-bg": "transparent",
"--topo-float-control-hover": "rgba(30, 41, 59, 0.9)",
"--topo-float-control-fill": "#cbd5e1",
"--topo-float-input-bg": "#0b1220",
"--topo-float-input-fg": "#e2e8f0",
"--topo-float-input-border": "rgba(148, 163, 184, 0.28)",
} as CSSProperties;
}

35
web/src/pages/topology/vendorTone.ts Normal file
View file

@ -0,0 +1,35 @@
import type { NeNodeData } from "./TopologyReactFlowView";
import { VENDOR_TONE_KEYS, type VendorColors, type VendorToneKey } from "./displayPrefs";
export type { VendorToneKey, VendorColors };
export function nodeIconTone(
vendor: string,
managedNeId: string,
umeNeId = "",
): VendorToneKey {
const hasManaged = Boolean(String(managedNeId || "").trim());
const hasUme = Boolean(String(umeNeId || "").trim());
if (!hasManaged && !hasUme) return "gray";
const v = String(vendor || "").trim().toLowerCase();
if (!v || v === "other" || v === "unknown" || v === "generic") {
return hasUme ? "zte" : "gray";
}
if (v.includes("cisco")) return "cisco";
if (v.includes("huawei")) return "huawei";
if (v.includes("zte")) return "zte";
if (v.includes("juniper")) return "juniper";
if (v.includes("nokia") || v.includes("alcatel")) return "nokia";
if (v.includes("ericsson")) return "ericsson";
if (v.includes("h3c") || v.includes("comware")) return "h3c";
if (v.includes("ruijie") || v.includes("锐捷")) return "ruijie";
if (v.includes("mikrotik")) return "mikrotik";
return hasUme ? "zte" : "gray";
}
export function vendorColorForNode(data: NeNodeData, colors: VendorColors): string {
if (data.kind === "region") return "#38bdf8";
return colors[nodeIconTone(data.vendor, data.managed_ne_id, data.ume_ne_id)] || colors.gray;
}
export { VENDOR_TONE_KEYS };

73
web/src/pages/topology/worldGraph.ts Normal file
View file

@ -0,0 +1,73 @@
import type {
TopologyViewEdgeItem,
TopologyViewGraph,
TopologyViewNodeItem,
} from "../../types";
import { WORLD_FLAT_ACCUM_CAP } from "./constants";
/** Merge newly fetched flat LOD into the existing cache so visited areas stay. */
export function mergeFlatWorldGraph(
prev: TopologyViewGraph | undefined,
next: TopologyViewGraph,
opts?: { centerX?: number; centerY?: number },
): TopologyViewGraph {
const scatter = next.scatter?.length ? next.scatter : prev?.scatter;
if (!prev?.nodes?.length) {
return scatter?.length && !next.scatter?.length ? { ...next, scatter } : next;
}
if (!next?.nodes?.length) {
return {
...prev,
view: next.view || prev.view,
nodes: [],
edges: [],
scatter: scatter || [],
world_transform: next.world_transform ?? prev.world_transform,
truncated: Boolean(next.truncated || prev.truncated),
truncate_reason: next.truncate_reason || prev.truncate_reason || "",
outside_peers: next.outside_peers?.length ? next.outside_peers : prev.outside_peers,
};
}
const nodeMap = new Map<string, TopologyViewNodeItem>();
for (const n of prev.nodes) nodeMap.set(String(n.fabric_node_id), n);
for (const n of next.nodes) nodeMap.set(String(n.fabric_node_id), n);
const edgeMap = new Map<string, TopologyViewEdgeItem>();
for (const e of prev.edges || []) edgeMap.set(String(e.id), e);
for (const e of next.edges || []) edgeMap.set(String(e.id), e);
let nodes = [...nodeMap.values()];
const cx = opts?.centerX;
const cy = opts?.centerY;
if (nodes.length > WORLD_FLAT_ACCUM_CAP && cx != null && cy != null) {
const prefer = new Set(next.nodes.map((n) => String(n.fabric_node_id)));
const kept = next.nodes.slice();
const extras = nodes
.filter((n) => !prefer.has(String(n.fabric_node_id)))
.sort((a, b) => {
const da = (Number(a.x) - cx) ** 2 + (Number(a.y) - cy) ** 2;
const db = (Number(b.x) - cx) ** 2 + (Number(b.y) - cy) ** 2;
return da - db;
});
const room = Math.max(0, WORLD_FLAT_ACCUM_CAP - kept.length);
nodes = kept.concat(extras.slice(0, room));
}
const idSet = new Set(nodes.map((n) => String(n.fabric_node_id)));
const edges = [...edgeMap.values()].filter(
(e) => idSet.has(String(e.a_node_id)) && idSet.has(String(e.b_node_id)),
);
return {
...next,
view: next.view || prev.view,
nodes,
edges,
world_transform: next.world_transform ?? prev.world_transform,
scatter: scatter || [],
truncated: Boolean(prev.truncated || next.truncated),
truncate_reason: next.truncate_reason || prev.truncate_reason || "",
outside_peers: next.outside_peers?.length ? next.outside_peers : prev.outside_peers,
};
}