0216a2d2fe
- Fixed:
- UI design elemets
- UI and button colors
- JSON export
- recent activity is default again
- Removed:
- Online/Offline UI labels
- left-click menu on hosts
- Added:
- small pulsing dot inside the hosts to indicate online status like in the left bar
1073 lines
43 KiB
TypeScript
1073 lines
43 KiB
TypeScript
import React, { useEffect, useState, useRef, useCallback, useMemo } from 'react';
|
|
import CytoscapeComponent from 'react-cytoscapejs';
|
|
import cytoscape from 'cytoscape';
|
|
import { getSSHHosts, getNetworkTopology, saveNetworkTopology, type NetworkTopologyData, type SSHHostWithStatus } from '@/ui/main-axios';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import {
|
|
Plus, Trash2, Move3D, ZoomIn, ZoomOut, RotateCw, Loader2, AlertCircle,
|
|
Download, Upload, Link2, FolderPlus, Edit, FolderInput, FolderMinus, Settings2, ExternalLink, Terminal
|
|
} from 'lucide-react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useTabs } from '@/ui/desktop/navigation/tabs/TabContext';
|
|
import { useSidebar } from '@/components/ui/sidebar';
|
|
import { Separator } from '@/components/ui/separator';
|
|
|
|
// --- Helper for edge routing ---
|
|
const getEndpoints = (edge: cytoscape.EdgeSingular): { sourceEndpoint: string; targetEndpoint: string } => {
|
|
const sourcePos = edge.source().position();
|
|
const targetPos = edge.target().position();
|
|
const dx = targetPos.x - sourcePos.x;
|
|
const dy = targetPos.y - sourcePos.y;
|
|
|
|
let sourceEndpoint: string;
|
|
let targetEndpoint: string;
|
|
|
|
if (Math.abs(dx) > Math.abs(dy)) {
|
|
sourceEndpoint = dx > 0 ? 'right' : 'left';
|
|
targetEndpoint = dx > 0 ? 'left' : 'right';
|
|
} else {
|
|
sourceEndpoint = dy > 0 ? 'bottom' : 'top';
|
|
targetEndpoint = dy > 0 ? 'top' : 'bottom';
|
|
}
|
|
return { sourceEndpoint, targetEndpoint };
|
|
};
|
|
|
|
// --- Types ---
|
|
interface HostMap {
|
|
[key: string]: SSHHostWithStatus;
|
|
}
|
|
|
|
interface ContextMenuState {
|
|
visible: boolean;
|
|
x: number;
|
|
y: number;
|
|
targetId: string;
|
|
type: 'node' | 'group' | 'edge' | null;
|
|
}
|
|
|
|
interface NetworkGraphViewProps {
|
|
isTopbarOpen?: boolean;
|
|
rightSidebarOpen?: boolean;
|
|
rightSidebarWidth?: number;
|
|
isStandalone?: boolean;
|
|
}
|
|
|
|
const NetworkGraphView: React.FC<NetworkGraphViewProps> = ({
|
|
isTopbarOpen = true,
|
|
rightSidebarOpen = false,
|
|
rightSidebarWidth = 400,
|
|
isStandalone = false
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
const { addTab } = useTabs();
|
|
|
|
let sidebarState: "expanded" | "collapsed" = "expanded";
|
|
try {
|
|
const sidebar = useSidebar();
|
|
sidebarState = sidebar.state;
|
|
} catch (error) {
|
|
// Not in SidebarProvider context (e.g., during authentication)
|
|
}
|
|
|
|
// --- State ---
|
|
const [elements, setElements] = useState<any[]>([]);
|
|
const [hosts, setHosts] = useState<SSHHostWithStatus[]>([]);
|
|
const [hostMap, setHostMap] = useState<HostMap>({});
|
|
|
|
// Refs
|
|
const hostMapRef = useRef<HostMap>({});
|
|
|
|
// UI State
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
|
|
const [selectedEdgeId, setSelectedEdgeId] = useState<string | null>(null);
|
|
|
|
// Dialog State
|
|
const [showAddNodeDialog, setShowAddNodeDialog] = useState(false);
|
|
const [showAddEdgeDialog, setShowAddEdgeDialog] = useState(false);
|
|
const [showAddGroupDialog, setShowAddGroupDialog] = useState(false);
|
|
const [showEditGroupDialog, setShowEditGroupDialog] = useState(false);
|
|
const [showNodeDetail, setShowNodeDetail] = useState(false);
|
|
const [showMoveNodeDialog, setShowMoveNodeDialog] = useState(false);
|
|
|
|
// Form State
|
|
const [selectedHostForAddNode, setSelectedHostForAddNode] = useState<string>('');
|
|
const [selectedGroupForAddNode, setSelectedGroupForAddNode] = useState<string>('ROOT');
|
|
const [newGroupName, setNewGroupName] = useState('');
|
|
const [newGroupColor, setNewGroupColor] = useState('#3b82f6'); // Default Blue
|
|
const [editingGroupId, setEditingGroupId] = useState<string | null>(null);
|
|
const [selectedGroupForMove, setSelectedGroupForMove] = useState<string>('ROOT');
|
|
const [selectedHostForEdge, setSelectedHostForEdge] = useState<string>('');
|
|
const [targetHostForEdge, setTargetHostForEdge] = useState<string>('');
|
|
const [selectedNodeForDetail, setSelectedNodeForDetail] = useState<SSHHostWithStatus | null>(null);
|
|
|
|
// Context Menu State
|
|
const [contextMenu, setContextMenu] = useState<ContextMenuState>({
|
|
visible: false, x: 0, y: 0, targetId: '', type: null
|
|
});
|
|
|
|
// System Refs
|
|
const cyRef = useRef<cytoscape.Core | null>(null);
|
|
const statusCheckIntervalRef = useRef<NodeJS.Timeout | null>(null);
|
|
const saveTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
|
const contextMenuRef = useRef<HTMLDivElement>(null);
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
// Sync refs
|
|
useEffect(() => { hostMapRef.current = hostMap; }, [hostMap]);
|
|
|
|
// --- Pulsing Dot Overlay for Online Nodes Only ---
|
|
useEffect(() => {
|
|
if (!cyRef.current) return;
|
|
|
|
const canvas = document.createElement('canvas');
|
|
const container = cyRef.current.container();
|
|
if (!container) return;
|
|
|
|
canvas.style.position = 'absolute';
|
|
canvas.style.top = '0';
|
|
canvas.style.left = '0';
|
|
canvas.style.pointerEvents = 'none';
|
|
canvas.style.zIndex = '999';
|
|
container.appendChild(canvas);
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
if (!ctx) return;
|
|
|
|
let animationFrame: number;
|
|
let startTime = Date.now();
|
|
|
|
const animate = () => {
|
|
if (!cyRef.current || !ctx) return;
|
|
|
|
const canvasWidth = cyRef.current.width();
|
|
const canvasHeight = cyRef.current.height();
|
|
canvas.width = canvasWidth;
|
|
canvas.height = canvasHeight;
|
|
|
|
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
|
|
|
|
const elapsed = Date.now() - startTime;
|
|
const cycle = (elapsed % 2000) / 2000;
|
|
const zoom = cyRef.current.zoom();
|
|
|
|
// Scale pulse radius with zoom
|
|
const baseRadius = 4;
|
|
const pulseAmount = 3;
|
|
const pulseRadius = (baseRadius + Math.sin(cycle * Math.PI * 2) * pulseAmount) * zoom;
|
|
const pulseOpacity = 0.6 - Math.sin(cycle * Math.PI * 2) * 0.4;
|
|
|
|
// Draw pulsing green dot for ONLINE nodes only
|
|
cyRef.current.nodes('[status="online"]').forEach(node => {
|
|
if (node.isParent()) return;
|
|
|
|
// Use renderedPosition which accounts for zoom and pan
|
|
const pos = node.renderedPosition();
|
|
// Node dimensions at current zoom
|
|
const nodeWidth = 180 * zoom;
|
|
const nodeHeight = 90 * zoom;
|
|
|
|
// Position dot at top-right corner (same relative position as SVG)
|
|
const dotX = pos.x + (nodeWidth / 2) - (10 * zoom);
|
|
const dotY = pos.y - (nodeHeight / 2) + (10 * zoom);
|
|
|
|
// Draw pulsing ring
|
|
ctx.beginPath();
|
|
ctx.arc(dotX, dotY, pulseRadius, 0, Math.PI * 2);
|
|
ctx.fillStyle = `rgba(16, 185, 129, ${pulseOpacity})`;
|
|
ctx.fill();
|
|
|
|
// Draw solid center dot
|
|
ctx.beginPath();
|
|
ctx.arc(dotX, dotY, baseRadius * zoom, 0, Math.PI * 2);
|
|
ctx.fillStyle = '#10b981';
|
|
ctx.fill();
|
|
});
|
|
|
|
// Draw static red dot for OFFLINE nodes (no pulsing)
|
|
cyRef.current.nodes('[status="offline"]').forEach(node => {
|
|
if (node.isParent()) return;
|
|
|
|
const pos = node.renderedPosition();
|
|
const nodeWidth = 180 * zoom;
|
|
const nodeHeight = 90 * zoom;
|
|
|
|
const dotX = pos.x + (nodeWidth / 2) - (10 * zoom);
|
|
const dotY = pos.y - (nodeHeight / 2) + (10 * zoom);
|
|
|
|
// Draw solid red dot (no animation)
|
|
ctx.beginPath();
|
|
ctx.arc(dotX, dotY, 4 * zoom, 0, Math.PI * 2);
|
|
ctx.fillStyle = '#ef4444';
|
|
ctx.fill();
|
|
});
|
|
|
|
animationFrame = requestAnimationFrame(animate);
|
|
};
|
|
|
|
animate();
|
|
|
|
return () => {
|
|
if (animationFrame) cancelAnimationFrame(animationFrame);
|
|
if (container && canvas.parentNode === container) {
|
|
container.removeChild(canvas);
|
|
}
|
|
};
|
|
}, [elements]);
|
|
|
|
// --- Initialization ---
|
|
|
|
useEffect(() => {
|
|
loadData();
|
|
const interval = setInterval(updateHostStatuses, 30000);
|
|
statusCheckIntervalRef.current = interval;
|
|
|
|
const handleClickOutside = (e: MouseEvent) => {
|
|
if (contextMenuRef.current && !contextMenuRef.current.contains(e.target as Node)) {
|
|
setContextMenu(prev => prev.visible ? { ...prev, visible: false } : prev);
|
|
}
|
|
};
|
|
document.addEventListener('mousedown', handleClickOutside, true);
|
|
|
|
return () => {
|
|
if (statusCheckIntervalRef.current) clearInterval(statusCheckIntervalRef.current);
|
|
document.removeEventListener('mousedown', handleClickOutside, true);
|
|
};
|
|
}, []);
|
|
|
|
const loadData = async () => {
|
|
try {
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
const hostsData = await getSSHHosts();
|
|
const hostsArray = Array.isArray(hostsData) ? hostsData : [];
|
|
setHosts(hostsArray);
|
|
|
|
const newHostMap: HostMap = {};
|
|
hostsArray.forEach(host => { newHostMap[String(host.id)] = host; });
|
|
setHostMap(newHostMap);
|
|
|
|
let nodes: any[] = [];
|
|
let edges: any[] = [];
|
|
|
|
try {
|
|
const topologyData = await getNetworkTopology();
|
|
if (topologyData && topologyData.nodes && Array.isArray(topologyData.nodes)) {
|
|
nodes = topologyData.nodes.map((node: any) => {
|
|
const host = newHostMap[node.data.id];
|
|
return {
|
|
data: {
|
|
id: node.data.id,
|
|
label: host?.name || node.data.label || 'Unknown',
|
|
ip: host ? `${host.ip}:${host.port}` : (node.data.ip || ''),
|
|
status: host?.status || 'unknown',
|
|
tags: host?.tags || [],
|
|
parent: node.data.parent,
|
|
color: node.data.color
|
|
},
|
|
position: node.position || { x: 0, y: 0 }
|
|
};
|
|
});
|
|
edges = topologyData.edges || [];
|
|
}
|
|
} catch (topologyError) {
|
|
console.warn('Starting with empty topology');
|
|
}
|
|
|
|
setElements([...nodes, ...edges]);
|
|
} catch (err) {
|
|
console.error('Failed to load topology:', err);
|
|
setError('Failed to load data');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const updateHostStatuses = useCallback(async () => {
|
|
if (!cyRef.current) return;
|
|
try {
|
|
const updatedHosts = await getSSHHosts();
|
|
const updatedHostMap: HostMap = {};
|
|
updatedHosts.forEach(host => { updatedHostMap[String(host.id)] = host; });
|
|
|
|
cyRef.current.nodes().forEach(node => {
|
|
if (node.isParent()) return;
|
|
const hostId = node.data('id');
|
|
const updatedHost = updatedHostMap[hostId];
|
|
if (updatedHost) {
|
|
node.data('status', updatedHost.status);
|
|
node.data('tags', updatedHost.tags || []);
|
|
}
|
|
});
|
|
setHostMap(updatedHostMap);
|
|
} catch (err) {
|
|
console.error('Status update failed:', err);
|
|
}
|
|
}, []);
|
|
|
|
const debouncedSave = useCallback(() => {
|
|
if (saveTimeoutRef.current) clearTimeout(saveTimeoutRef.current);
|
|
saveTimeoutRef.current = setTimeout(() => {
|
|
saveCurrentLayout();
|
|
}, 1000);
|
|
}, []);
|
|
|
|
const saveCurrentLayout = async () => {
|
|
if (!cyRef.current) return;
|
|
try {
|
|
const nodes = cyRef.current.nodes().map(node => ({
|
|
data: {
|
|
id: node.data('id'),
|
|
label: node.data('label'),
|
|
ip: node.data('ip'),
|
|
status: node.data('status'),
|
|
tags: node.data('tags') || [],
|
|
parent: node.data('parent'),
|
|
color: node.data('color')
|
|
},
|
|
position: node.position()
|
|
}));
|
|
|
|
const edges = cyRef.current.edges().map(edge => ({
|
|
data: {
|
|
id: edge.data('id'),
|
|
source: edge.data('source'),
|
|
target: edge.data('target')
|
|
}
|
|
}));
|
|
|
|
await saveNetworkTopology({ nodes, edges });
|
|
} catch (err) {
|
|
console.error('Save failed:', err);
|
|
}
|
|
};
|
|
|
|
// --- Initial Layout ---
|
|
useEffect(() => {
|
|
if (!cyRef.current || loading || elements.length === 0) return;
|
|
const hasPositions = elements.some((el: any) => el.position && (el.position.x !== 0 || el.position.y !== 0));
|
|
|
|
if (!hasPositions) {
|
|
cyRef.current.layout({
|
|
name: 'cose',
|
|
animate: false,
|
|
randomize: true,
|
|
componentSpacing: 100,
|
|
nodeOverlap: 20
|
|
}).run();
|
|
} else {
|
|
cyRef.current.fit();
|
|
}
|
|
}, [loading]);
|
|
|
|
// --- Cytoscape Config ---
|
|
|
|
const handleNodeInit = useCallback((cy: cytoscape.Core) => {
|
|
cyRef.current = cy;
|
|
cy.style()
|
|
|
|
/* ===========================
|
|
* NODE STYLE (Hosts)
|
|
* ===========================
|
|
*/
|
|
.selector('node')
|
|
.style({
|
|
'label': '',
|
|
'width': '180px',
|
|
'height': '90px',
|
|
'shape': 'round-rectangle',
|
|
'border-width': '0px',
|
|
'background-opacity': 0,
|
|
|
|
'background-image': function(ele) {
|
|
const host = ele.data();
|
|
const name = host.label || '';
|
|
const ip = host.ip || '';
|
|
const tags = host.tags || [];
|
|
const isOnline = host.status === 'online';
|
|
const isOffline = host.status === 'offline';
|
|
const statusColor =
|
|
isOnline ? '#10b981' :
|
|
isOffline ? '#ef4444' : '#64748b';
|
|
|
|
const tagsHtml = tags.map(t => `
|
|
<span style="
|
|
background-color:#f97316;
|
|
color:#ffffff;
|
|
padding:2px 8px;
|
|
border-radius:9999px;
|
|
font-size:9px;
|
|
font-weight:700;
|
|
margin:0 2px;
|
|
display:inline-block;
|
|
box-shadow:0 1px 2px rgba(0,0,0,0.3);
|
|
">${t}</span>`).join('');
|
|
|
|
// Changed rx from 8 to 6 to match Dashboard's rounded-md (0.375rem = 6px)
|
|
// Status indicator dot drawn on canvas overlay (see useEffect for pulsing animation)
|
|
const svg = `
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="180" height="90" viewBox="0 0 180 90">
|
|
<defs>
|
|
<filter id="shadow-${ele.id()}" x="-10%" y="-10%" width="120%" height="120%">
|
|
<feDropShadow dx="0" dy="3" stdDeviation="3" flood-color="#000000" flood-opacity="0.25"/>
|
|
</filter>
|
|
</defs>
|
|
<rect x="3" y="3" width="174" height="84" rx="6"
|
|
fill="#09090b" stroke="${statusColor}" stroke-width="2" filter="url(#shadow-${ele.id()})"/>
|
|
<foreignObject x="8" y="8" width="164" height="74">
|
|
<div xmlns="http://www.w3.org/1999/xhtml"
|
|
style="color:#f1f5f9;text-align:center;font-family:sans-serif;
|
|
height:100%;display:flex;flex-direction:column;justify-content:center;
|
|
align-items:center;line-height:1.2;">
|
|
<div style="font-weight:700;font-size:14px;margin-bottom:2px;
|
|
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;">${name}</div>
|
|
<div style="font-weight:600;font-size:11px;color:#94a3b8;margin-bottom:6px;
|
|
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;">${ip}</div>
|
|
<div style="display:flex;flex-wrap:wrap;justify-content:center;align-items:center;">
|
|
${tagsHtml}
|
|
</div>
|
|
</div>
|
|
</foreignObject>
|
|
</svg>
|
|
`;
|
|
return 'data:image/svg+xml;utf8,' + encodeURIComponent(svg);
|
|
},
|
|
|
|
'background-fit': 'contain'
|
|
})
|
|
|
|
/* ===========================
|
|
* PARENT GROUP STYLE
|
|
* ===========================
|
|
*/
|
|
.selector('node:parent')
|
|
.style({
|
|
'background-image': 'none',
|
|
'background-color': ele => ele.data('color') || '#1e3a8a',
|
|
'background-opacity': 0.05,
|
|
'border-color': ele => ele.data('color') || '#3b82f6',
|
|
'border-width': '2px',
|
|
'border-style': 'dashed',
|
|
'label': 'data(label)',
|
|
'text-valign': 'top',
|
|
'text-halign': 'center',
|
|
'text-margin-y': -20,
|
|
'color': '#94a3b8',
|
|
'font-size': '16px',
|
|
'font-weight': 'bold',
|
|
'shape': 'round-rectangle',
|
|
'padding': '10px'
|
|
})
|
|
|
|
/* ===========================
|
|
* EDGE STYLE (Improved Bezier)
|
|
* ===========================
|
|
*/
|
|
.selector('edge')
|
|
.style({
|
|
'width': '2px',
|
|
'line-color': '#373739',
|
|
|
|
// Keep curves but make them smoother and cleaner
|
|
'curve-style': 'round-taxi',
|
|
|
|
// Ensure edges connect at the border, not the center
|
|
'source-endpoint': 'outside-to-node',
|
|
'target-endpoint': 'outside-to-node',
|
|
|
|
// Smoother curvature
|
|
'control-point-step-size': 10,
|
|
'control-point-distances': [40, -40],
|
|
'control-point-weights': [0.2, 0.8],
|
|
|
|
// No arrowheads for now
|
|
'target-arrow-shape': 'none'
|
|
})
|
|
|
|
/* ===========================
|
|
* INTERACTION STYLES
|
|
* ===========================
|
|
*/
|
|
.selector('edge:selected')
|
|
.style({
|
|
'line-color': '#3b82f6',
|
|
'width': '3px'
|
|
})
|
|
|
|
.selector('node:selected')
|
|
.style({
|
|
'overlay-color': '#3b82f6',
|
|
'overlay-opacity': 0.05,
|
|
'overlay-padding': '5px'
|
|
});
|
|
// --- EVENTS ---
|
|
|
|
cy.on('tap', 'node', (evt) => {
|
|
const node = evt.target;
|
|
setContextMenu(prev => prev.visible ? { ...prev, visible: false } : prev);
|
|
setSelectedEdgeId(null);
|
|
setSelectedNodeId(node.id());
|
|
// Dialog only opens from right-click context menu, not left-click
|
|
});
|
|
|
|
cy.on('tap', 'edge', (evt) => {
|
|
evt.stopPropagation();
|
|
setSelectedEdgeId(evt.target.id());
|
|
setSelectedNodeId(null);
|
|
});
|
|
|
|
cy.on('tap', (evt) => {
|
|
if (evt.target === cy) {
|
|
setContextMenu(prev => prev.visible ? { ...prev, visible: false } : prev);
|
|
setSelectedNodeId(null);
|
|
setSelectedEdgeId(null);
|
|
}
|
|
});
|
|
|
|
// Right Click -> Context Menu
|
|
cy.on('cxttap', 'node', (evt) => {
|
|
evt.preventDefault();
|
|
evt.stopPropagation();
|
|
const node = evt.target;
|
|
|
|
const x = evt.originalEvent.clientX;
|
|
const y = evt.originalEvent.clientY;
|
|
|
|
setContextMenu({
|
|
visible: true,
|
|
x,
|
|
y,
|
|
targetId: node.id(),
|
|
type: node.isParent() ? 'group' : 'node'
|
|
});
|
|
});
|
|
|
|
cy.on('zoom pan', () => {
|
|
setContextMenu(prev => prev.visible ? { ...prev, visible: false } : prev);
|
|
});
|
|
|
|
cy.on('free', 'node', () => debouncedSave());
|
|
|
|
cy.on('boxselect', 'node', () => {
|
|
const selected = cy.$('node:selected');
|
|
if (selected.length === 1) setSelectedNodeId(selected[0].id());
|
|
});
|
|
|
|
}, [debouncedSave]);
|
|
|
|
// --- Handlers ---
|
|
|
|
const handleContextAction = (action: string) => {
|
|
setContextMenu(prev => ({ ...prev, visible: false }));
|
|
const targetId = contextMenu.targetId;
|
|
if (!cyRef.current) return;
|
|
|
|
if (action === 'details') {
|
|
const host = hostMap[targetId];
|
|
if (host) {
|
|
setSelectedNodeForDetail(host);
|
|
setShowNodeDetail(true);
|
|
}
|
|
} else if (action === 'connect') {
|
|
const host = hostMap[targetId];
|
|
if (host) {
|
|
const title = host.name?.trim()
|
|
? host.name
|
|
: `${host.username}@${host.ip}:${host.port}`;
|
|
addTab({ type: 'terminal', title, hostConfig: host });
|
|
}
|
|
|
|
} else if (action === 'move') {
|
|
setSelectedNodeId(targetId);
|
|
const node = cyRef.current.$id(targetId);
|
|
const parentId = node.data('parent');
|
|
setSelectedGroupForMove(parentId || 'ROOT');
|
|
setShowMoveNodeDialog(true);
|
|
} else if (action === 'removeFromGroup') {
|
|
const node = cyRef.current.$id(targetId);
|
|
node.move({ parent: null });
|
|
debouncedSave();
|
|
} else if (action === 'editGroup') {
|
|
const node = cyRef.current.$id(targetId);
|
|
setEditingGroupId(targetId);
|
|
setNewGroupName(node.data('label'));
|
|
setNewGroupColor(node.data('color') || '#3b82f6');
|
|
setShowEditGroupDialog(true);
|
|
} else if (action === 'addHostToGroup') {
|
|
setSelectedGroupForAddNode(targetId);
|
|
setSelectedHostForAddNode('');
|
|
setShowAddNodeDialog(true);
|
|
} else if (action === 'delete') {
|
|
cyRef.current.$id(targetId).remove();
|
|
debouncedSave();
|
|
}
|
|
};
|
|
|
|
const handleAddNode = () => {
|
|
setSelectedHostForAddNode('');
|
|
setSelectedGroupForAddNode('ROOT');
|
|
setShowAddNodeDialog(true);
|
|
};
|
|
|
|
const handleConfirmAddNode = async () => {
|
|
if (!cyRef.current || !selectedHostForAddNode) return;
|
|
try {
|
|
if (cyRef.current.$id(selectedHostForAddNode).length > 0) {
|
|
setError('Host is already in the topology');
|
|
return;
|
|
}
|
|
const host = hostMap[selectedHostForAddNode];
|
|
const parent = selectedGroupForAddNode === 'ROOT' ? undefined : selectedGroupForAddNode;
|
|
|
|
const newNode = {
|
|
data: {
|
|
id: selectedHostForAddNode,
|
|
label: host.name || `${host.ip}`,
|
|
ip: `${host.ip}:${host.port}`,
|
|
status: host.status,
|
|
tags: host.tags || [],
|
|
parent: parent
|
|
},
|
|
position: { x: 100 + Math.random() * 50, y: 100 + Math.random() * 50 }
|
|
};
|
|
cyRef.current.add(newNode);
|
|
await saveCurrentLayout();
|
|
setShowAddNodeDialog(false);
|
|
} catch (err) { setError('Failed to add node'); }
|
|
};
|
|
|
|
const handleAddGroup = async () => {
|
|
if (!cyRef.current || !newGroupName) return;
|
|
const groupId = `group-${Date.now()}`;
|
|
cyRef.current.add({
|
|
data: { id: groupId, label: newGroupName, color: newGroupColor }
|
|
});
|
|
await saveCurrentLayout();
|
|
setShowAddGroupDialog(false);
|
|
setNewGroupName('');
|
|
};
|
|
|
|
const handleUpdateGroup = async () => {
|
|
if (!cyRef.current || !editingGroupId || !newGroupName) return;
|
|
const group = cyRef.current.$id(editingGroupId);
|
|
group.data('label', newGroupName);
|
|
group.data('color', newGroupColor);
|
|
await saveCurrentLayout();
|
|
setShowEditGroupDialog(false);
|
|
setEditingGroupId(null);
|
|
};
|
|
|
|
const handleMoveNodeToGroup = async () => {
|
|
if (!cyRef.current || !selectedNodeId) return;
|
|
const node = cyRef.current.$id(selectedNodeId);
|
|
const parent = selectedGroupForMove === 'ROOT' ? null : selectedGroupForMove;
|
|
node.move({ parent: parent });
|
|
await saveCurrentLayout();
|
|
setShowMoveNodeDialog(false);
|
|
};
|
|
|
|
const handleAddEdge = async () => {
|
|
if (!cyRef.current || !selectedHostForEdge || !targetHostForEdge) return;
|
|
if (selectedHostForEdge === targetHostForEdge) return setError('Source and target must be different');
|
|
|
|
const edgeId = `${selectedHostForEdge}-${targetHostForEdge}`;
|
|
if (cyRef.current.$id(edgeId).length > 0) return setError('Connection exists');
|
|
|
|
cyRef.current.add({
|
|
data: { id: edgeId, source: selectedHostForEdge, target: targetHostForEdge }
|
|
});
|
|
await saveCurrentLayout();
|
|
setShowAddEdgeDialog(false);
|
|
};
|
|
|
|
const handleRemoveSelected = () => {
|
|
if (!cyRef.current) return;
|
|
|
|
if (selectedNodeId) {
|
|
cyRef.current.$id(selectedNodeId).remove();
|
|
setSelectedNodeId(null);
|
|
} else if (selectedEdgeId) {
|
|
cyRef.current.$id(selectedEdgeId).remove();
|
|
setSelectedEdgeId(null);
|
|
}
|
|
|
|
debouncedSave();
|
|
};
|
|
|
|
// --- Helper Memos ---
|
|
|
|
// Logic to detect groups directly from Elements state
|
|
const availableGroups = useMemo(() => {
|
|
// A group is a node with ID but no IP (since hosts have IPs) and is not an edge
|
|
return elements.filter(el =>
|
|
!el.data.source && !el.data.target && !el.data.ip && el.data.id
|
|
).map(el => ({ id: el.data.id, label: el.data.label }));
|
|
}, [elements]);
|
|
|
|
const availableNodesForConnection = useMemo(() => {
|
|
return elements.filter(el => (!el.data.source && !el.data.target)).map(el => ({
|
|
id: el.data.id,
|
|
label: el.data.label
|
|
}));
|
|
}, [elements]);
|
|
|
|
const availableHostsForAdd = useMemo(() => {
|
|
if (!cyRef.current) return hosts;
|
|
const existingIds = new Set(elements.map(e => e.data.id));
|
|
return hosts.filter(h => !existingIds.has(String(h.id)));
|
|
}, [hosts, elements]);
|
|
|
|
// --- Render ---
|
|
|
|
// Calculate margins for standalone mode (like Admin Settings and User Profile)
|
|
const topMarginPx = isStandalone ? (isTopbarOpen ? 74 : 26) : 0;
|
|
const leftMarginPx = isStandalone ? (sidebarState === "collapsed" ? 26 : 8) : 0;
|
|
const bottomMarginPx = isStandalone ? 8 : 0;
|
|
const wrapperStyle: React.CSSProperties = isStandalone ? {
|
|
marginLeft: leftMarginPx,
|
|
marginRight: rightSidebarOpen
|
|
? `calc(var(--right-sidebar-width, ${rightSidebarWidth}px) + 8px)`
|
|
: 17,
|
|
marginTop: topMarginPx,
|
|
marginBottom: bottomMarginPx,
|
|
height: `calc(100vh - ${topMarginPx + bottomMarginPx}px)`,
|
|
transition:
|
|
"margin-left 200ms linear, margin-right 200ms linear, margin-top 200ms linear",
|
|
} : {};
|
|
|
|
const content = (
|
|
<div className="w-full flex flex-col" style={{ height: '100%' }}>
|
|
{error && (
|
|
<div className="absolute top-16 right-4 z-50 flex items-center gap-2 p-3 text-red-100 text-sm rounded shadow-lg animate-in slide-in-from-top-2" style={{backgroundColor: 'rgba(127, 29, 29, 0.9)', border: '1px solid rgb(185, 28, 28)'}}>
|
|
<AlertCircle className="w-4 h-4 shrink-0" />
|
|
<span>{error}</span>
|
|
<button onClick={() => setError(null)} className="ml-2 hover:text-white">✕</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* --- Toolbar --- */}
|
|
<div className={`shrink-0 ${isStandalone ? 'mb-4' : 'p-2 mb-2 rounded-lg border-2 border-dark-border bg-dark-bg'}`}>
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex items-center rounded-md border p-0.5 bg-dark-bg-button border-dark-border">
|
|
<Button variant="ghost" size="sm" onClick={handleAddNode} title="Add Host" className="h-8 w-8 p-0 rounded text-white hover:bg-dark-hover">
|
|
<Plus className="w-4 h-4" />
|
|
</Button>
|
|
<Button variant="ghost" size="sm" onClick={() => { setNewGroupName(''); setNewGroupColor('#3b82f6'); setShowAddGroupDialog(true); }} title="Add Group" className="h-8 w-8 p-0 rounded text-white hover:bg-dark-hover">
|
|
<FolderPlus className="w-4 h-4" />
|
|
</Button>
|
|
<Button variant="ghost" size="sm" onClick={() => setShowAddEdgeDialog(true)} title="Add Link" className="h-8 w-8 p-0 rounded text-white hover:bg-dark-hover">
|
|
<Link2 className="w-4 h-4" />
|
|
</Button>
|
|
<Button variant="ghost" size="sm" onClick={handleRemoveSelected} disabled={!selectedNodeId && !selectedEdgeId} title="Delete Selected" className="h-8 w-8 p-0 rounded text-red-400 hover:text-red-300 hover:bg-dark-hover disabled:opacity-30">
|
|
<Trash2 className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="flex items-center rounded-md border p-0.5 bg-dark-bg-button border-dark-border">
|
|
<Button variant="ghost" size="sm" onClick={() => cyRef.current?.layout({name: 'cose', animate: true}).run()} title="Auto Layout" className="h-8 w-8 p-0 rounded text-white hover:bg-dark-hover">
|
|
<Move3D className="w-4 h-4" />
|
|
</Button>
|
|
<Button variant="ghost" size="sm" onClick={() => cyRef.current?.zoom(cyRef.current.zoom() * 1.2)} title="Zoom In" className="h-8 w-8 p-0 rounded text-white hover:bg-dark-hover">
|
|
<ZoomIn className="w-4 h-4" />
|
|
</Button>
|
|
<Button variant="ghost" size="sm" onClick={() => cyRef.current?.zoom(cyRef.current.zoom() / 1.2)} title="Zoom Out" className="h-8 w-8 p-0 rounded text-white hover:bg-dark-hover">
|
|
<ZoomOut className="w-4 h-4" />
|
|
</Button>
|
|
<Button variant="ghost" size="sm" onClick={() => cyRef.current?.fit()} title="Reset View" className="h-8 w-8 p-0 rounded text-white hover:bg-dark-hover">
|
|
<RotateCw className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="flex items-center rounded-md border p-0.5 bg-dark-bg-button border-dark-border">
|
|
<Button variant="ghost" size="sm" onClick={() => {
|
|
if (!cyRef.current) return;
|
|
const json = JSON.stringify(cyRef.current.json().elements, null, 2);
|
|
const blob = new Blob([json], {type: 'application/json'});
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a'); a.href = url; a.download = 'network.json'; a.click();
|
|
}} title="Export JSON" className="h-8 w-8 p-0 rounded text-white hover:bg-dark-hover">
|
|
<Download className="w-4 h-4" />
|
|
</Button>
|
|
<Button variant="ghost" size="sm" onClick={() => fileInputRef.current?.click()} title="Import JSON" className="h-8 w-8 p-0 rounded text-white hover:bg-dark-hover">
|
|
<Upload className="w-4 h-4" />
|
|
</Button>
|
|
<input ref={fileInputRef} type="file" accept=".json" onChange={(e) => {
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
const reader = new FileReader();
|
|
reader.onload = (evt) => {
|
|
try {
|
|
const json = JSON.parse(evt.target?.result as string);
|
|
saveNetworkTopology({nodes: json.nodes, edges: json.edges}).then(() => loadData());
|
|
} catch(err) { setError("Invalid File"); }
|
|
};
|
|
reader.readAsText(file);
|
|
}} className="hidden" />
|
|
</div>
|
|
|
|
<div className="flex items-center rounded-md border p-0.5 bg-dark-bg-button border-dark-border">
|
|
<Button variant="ghost" size="sm" onClick={() => {
|
|
addTab({ type: 'network_graph', title: 'Network Graph' });
|
|
}} title="Open in new tab" className="h-8 w-8 p-0 rounded text-white hover:bg-dark-hover">
|
|
<ExternalLink className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* --- Graph Area --- */}
|
|
<div className="flex-1 overflow-hidden relative rounded-lg border-2 border-dark-border bg-dark-bg-darkest">
|
|
{loading && (
|
|
<div className="absolute inset-0 flex items-center justify-center bg-black/50 z-20">
|
|
<Loader2 className="w-8 h-8 animate-spin text-blue-500" />
|
|
</div>
|
|
)}
|
|
|
|
{/* Context Menu - Fixed Position with High Z-Index */}
|
|
{contextMenu.visible && (
|
|
<div
|
|
ref={contextMenuRef}
|
|
className="fixed z-[100] min-w-[180px] rounded-md shadow-2xl p-1 flex flex-col gap-0.5 animate-in fade-in zoom-in-95 duration-100 bg-dark-bg-panel border border-dark-border text-dark-border-light"
|
|
style={{ top: contextMenu.y, left: contextMenu.x }}
|
|
>
|
|
{contextMenu.type === 'node' && (
|
|
<>
|
|
<button onClick={() => handleContextAction('connect')} className="flex items-center gap-2 px-3 py-2 text-xs font-medium rounded text-left w-full transition-colors text-white hover:bg-dark-hover">
|
|
<Terminal className="w-3.5 h-3.5 text-green-400" /> Connect to Host
|
|
</button>
|
|
<button onClick={() => handleContextAction('details')} className="flex items-center gap-2 px-3 py-2 text-xs font-medium rounded text-left w-full transition-colors text-white hover:bg-dark-hover">
|
|
<Settings2 className="w-3.5 h-3.5 text-blue-400" /> Host Details
|
|
</button>
|
|
<button onClick={() => handleContextAction('move')} className="flex items-center gap-2 px-3 py-2 text-xs font-medium rounded text-left w-full transition-colors text-white hover:bg-dark-hover">
|
|
<FolderInput className="w-3.5 h-3.5 text-yellow-400" /> Move to Group...
|
|
</button>
|
|
{cyRef.current?.$id(contextMenu.targetId).parent().length ? (
|
|
<button onClick={() => handleContextAction('removeFromGroup')} className="flex items-center gap-2 px-3 py-2 text-xs font-medium rounded text-left w-full transition-colors text-white hover:bg-dark-hover">
|
|
<FolderMinus className="w-3.5 h-3.5 text-orange-400" /> Remove from Group
|
|
</button>
|
|
) : null}
|
|
</>
|
|
)}
|
|
|
|
{contextMenu.type === 'group' && (
|
|
<>
|
|
<button onClick={() => handleContextAction('addHostToGroup')} className="flex items-center gap-2 px-3 py-2 text-xs font-medium rounded text-left w-full transition-colors text-white hover:bg-dark-hover">
|
|
<FolderPlus className="w-3.5 h-3.5 text-green-400" /> Add Host Here
|
|
</button>
|
|
<button onClick={() => handleContextAction('editGroup')} className="flex items-center gap-2 px-3 py-2 text-xs font-medium rounded text-left w-full transition-colors text-white hover:bg-dark-hover">
|
|
<Edit className="w-3.5 h-3.5 text-blue-400" /> Edit Group
|
|
</button>
|
|
</>
|
|
)}
|
|
|
|
<div className="h-px my-1 bg-dark-border-medium" />
|
|
<button onClick={() => handleContextAction('delete')} className="flex items-center gap-2 px-3 py-2 text-xs font-medium rounded text-red-400 hover:text-red-300 text-left w-full transition-colors hover:bg-red-950/30">
|
|
<Trash2 className="w-3.5 h-3.5" /> Delete
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
<CytoscapeComponent
|
|
elements={elements}
|
|
style={{ width: '100%', height: '100%' }}
|
|
layout={{ name: 'preset' }}
|
|
cy={handleNodeInit}
|
|
wheelSensitivity={0.1}
|
|
minZoom={0.2}
|
|
maxZoom={3}
|
|
/>
|
|
</div>
|
|
|
|
{/* --- Dialogs --- */}
|
|
|
|
<Dialog open={showAddNodeDialog} onOpenChange={setShowAddNodeDialog}>
|
|
<DialogContent className="text-slate-200 bg-dark-bg-panel border-dark-border">
|
|
<DialogHeader><DialogTitle>Add Host</DialogTitle></DialogHeader>
|
|
<div className="grid gap-4 py-4">
|
|
<div className="grid gap-2">
|
|
<Label>Select Host</Label>
|
|
<Select value={selectedHostForAddNode} onValueChange={setSelectedHostForAddNode}>
|
|
<SelectTrigger className="bg-dark-bg-input border-dark-border"><SelectValue placeholder="Choose a host..." /></SelectTrigger>
|
|
<SelectContent className="bg-dark-bg-panel border-dark-border text-slate-200">
|
|
{availableHostsForAdd.length > 0 ? availableHostsForAdd.map(h => (
|
|
<SelectItem key={h.id} value={String(h.id)}>{h.name || h.ip}</SelectItem>
|
|
)) : <SelectItem value="NONE" disabled>No available hosts</SelectItem>}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label>Parent Group</Label>
|
|
<Select value={selectedGroupForAddNode} onValueChange={setSelectedGroupForAddNode}>
|
|
<SelectTrigger className="bg-dark-bg-input border-dark-border"><SelectValue placeholder="No Group (Root)" /></SelectTrigger>
|
|
<SelectContent className="bg-dark-bg-panel border-dark-border text-slate-200">
|
|
<SelectItem value="ROOT">No Group</SelectItem>
|
|
{availableGroups.map(g => (
|
|
<SelectItem key={g.id} value={g.id}>{g.label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setShowAddNodeDialog(false)} className="border-dark-border hover:bg-dark-hover hover:text-slate-200">Cancel</Button>
|
|
<Button onClick={handleConfirmAddNode} disabled={!selectedHostForAddNode} className="bg-blue-600 hover:bg-blue-700 text-white">Add</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<Dialog open={showAddGroupDialog || showEditGroupDialog} onOpenChange={(open) => {
|
|
if(!open) { setShowAddGroupDialog(false); setShowEditGroupDialog(false); }
|
|
}}>
|
|
<DialogContent className="text-slate-200 bg-dark-bg-panel border-dark-border">
|
|
<DialogHeader>
|
|
<DialogTitle>{showEditGroupDialog ? 'Edit Group' : 'Create Group'}</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="grid gap-4 py-4">
|
|
<div className="grid gap-2">
|
|
<Label>Group Name</Label>
|
|
<Input value={newGroupName} onChange={(e) => setNewGroupName(e.target.value)} placeholder="e.g. Cluster A" className="bg-dark-bg-input border-dark-border" />
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label>Color</Label>
|
|
<div className="flex gap-2 items-center p-2 rounded border bg-dark-bg-input border-dark-border">
|
|
<input
|
|
type="color"
|
|
value={newGroupColor}
|
|
onChange={(e) => setNewGroupColor(e.target.value)}
|
|
className="w-8 h-8 p-0 border-0 rounded cursor-pointer bg-transparent"
|
|
/>
|
|
<span className="text-sm text-muted-foreground uppercase">{newGroupColor}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => { setShowAddGroupDialog(false); setShowEditGroupDialog(false); }} className="border-dark-border bg-dark-bg-button hover:bg-dark-hover">Cancel</Button>
|
|
<Button onClick={showEditGroupDialog ? handleUpdateGroup : handleAddGroup} disabled={!newGroupName} className="bg-blue-600 hover:bg-blue-700 text-white">
|
|
{showEditGroupDialog ? 'Update' : 'Create'}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<Dialog open={showMoveNodeDialog} onOpenChange={setShowMoveNodeDialog}>
|
|
<DialogContent className="text-slate-200 bg-dark-bg-panel border-dark-border">
|
|
<DialogHeader><DialogTitle>Move to Group</DialogTitle></DialogHeader>
|
|
<div className="grid gap-4 py-4">
|
|
<div className="grid gap-2">
|
|
<Label>Select Group</Label>
|
|
<Select value={selectedGroupForMove} onValueChange={setSelectedGroupForMove}>
|
|
<SelectTrigger className="bg-dark-bg-input border-dark-border"><SelectValue placeholder="Select group..." /></SelectTrigger>
|
|
<SelectContent className="bg-dark-bg-panel border-dark-border text-slate-200">
|
|
<SelectItem value="ROOT">(No Group)</SelectItem>
|
|
{availableGroups.map(g => (
|
|
<SelectItem key={g.id} value={g.id} disabled={g.id === selectedNodeId}>{g.label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setShowMoveNodeDialog(false)} className="border-dark-border bg-dark-bg-button hover:bg-dark-hover">Cancel</Button>
|
|
<Button onClick={handleMoveNodeToGroup} className="bg-blue-600 hover:bg-blue-700 text-white">Move</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<Dialog open={showAddEdgeDialog} onOpenChange={setShowAddEdgeDialog}>
|
|
<DialogContent className="text-slate-200 bg-dark-bg-panel border-dark-border">
|
|
<DialogHeader><DialogTitle>Add Connection</DialogTitle></DialogHeader>
|
|
<div className="grid gap-4 py-4">
|
|
<div className="grid gap-2">
|
|
<Label>Source</Label>
|
|
<Select value={selectedHostForEdge} onValueChange={setSelectedHostForEdge}>
|
|
<SelectTrigger className="bg-dark-bg-input border-dark-border"><SelectValue placeholder="Select Source..." /></SelectTrigger>
|
|
<SelectContent className="bg-dark-bg-panel border-dark-border text-slate-200">
|
|
{availableNodesForConnection.map(el => (
|
|
<SelectItem key={el.id} value={el.id}>{el.label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label>Target</Label>
|
|
<Select value={targetHostForEdge} onValueChange={setTargetHostForEdge}>
|
|
<SelectTrigger className="bg-dark-bg-input border-dark-border"><SelectValue placeholder="Select Target..." /></SelectTrigger>
|
|
<SelectContent className="bg-dark-bg-panel border-dark-border text-slate-200">
|
|
{availableNodesForConnection.map(el => (
|
|
<SelectItem key={el.id} value={el.id}>{el.label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setShowAddEdgeDialog(false)} className="border-dark-border bg-dark-bg-button hover:bg-dark-hover">Cancel</Button>
|
|
<Button onClick={handleAddEdge} className="bg-blue-600 hover:bg-blue-700 text-white">Connect</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<Dialog open={showNodeDetail} onOpenChange={setShowNodeDetail}>
|
|
<DialogContent className="text-slate-200 bg-dark-bg-panel border-dark-border">
|
|
<DialogHeader><DialogTitle>Host Details</DialogTitle></DialogHeader>
|
|
{selectedNodeForDetail && (
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-2 gap-2 text-sm">
|
|
<span className="font-semibold text-dark-border-light">Name:</span> <span>{selectedNodeForDetail.name}</span>
|
|
<span className="font-semibold text-dark-border-light">IP:</span> <span>{selectedNodeForDetail.ip}</span>
|
|
<span className="font-semibold text-dark-border-light">Status:</span>
|
|
<span className={selectedNodeForDetail.status === 'online' ? 'text-green-500' : 'text-red-500'}>
|
|
{selectedNodeForDetail.status}
|
|
</span>
|
|
<span className="font-semibold text-dark-border-light">ID:</span> <span className="text-xs text-dark-border-medium">{selectedNodeForDetail.id}</span>
|
|
</div>
|
|
{selectedNodeForDetail.tags && selectedNodeForDetail.tags.length > 0 && (
|
|
<div className="flex gap-1 flex-wrap">
|
|
{selectedNodeForDetail.tags.map(t => (
|
|
<Badge key={t} variant="outline" className="text-xs border-dark-border-medium text-dark-border-light">{t}</Badge>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setShowNodeDetail(false)} className="border-dark-border bg-dark-bg-button hover:bg-dark-hover">Close</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
|
|
// Wrap in standalone container if needed
|
|
if (isStandalone) {
|
|
return (
|
|
<div
|
|
style={wrapperStyle}
|
|
className="bg-dark-bg text-white rounded-lg border-2 border-dark-border overflow-hidden"
|
|
>
|
|
<div className="h-full w-full flex flex-col">
|
|
<div className="flex items-center justify-between px-3 pt-2 pb-2">
|
|
<h1 className="font-bold text-lg">Network Graph</h1>
|
|
</div>
|
|
<Separator className="p-0.25 w-full" />
|
|
<div className="px-6 py-4 overflow-auto flex-1">
|
|
{content}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return content;
|
|
};
|
|
|
|
export { NetworkGraphView };
|
|
export default NetworkGraphView;
|