nikita
@@ -0,0 +1,54 @@
|
||||
import { useMemo } from "react";
|
||||
import { Graph, type GraphData, type GraphNode, type GraphLink } from "@/modules/graph";
|
||||
import { useAgentStore } from "@/app/providers/layout/store/agent.store";
|
||||
|
||||
const buildGraphFromAgents = (): GraphData => {
|
||||
const agents = useAgentStore.getState().agents;
|
||||
const nodes: GraphNode[] = [];
|
||||
const links: GraphLink[] = [];
|
||||
|
||||
agents.forEach((agent) => {
|
||||
// Агент как узел
|
||||
nodes.push({
|
||||
id: agent.name,
|
||||
name: agent.name,
|
||||
type: "agent",
|
||||
val: 8,
|
||||
description: `Агент: ${agent.name}`,
|
||||
});
|
||||
|
||||
// Сервисы агента как узлы + связи
|
||||
agent.services.forEach((service) => {
|
||||
const serviceId = `${agent.name}-${service.name}`;
|
||||
nodes.push({
|
||||
id: serviceId,
|
||||
name: service.name,
|
||||
type: "service",
|
||||
val: 12,
|
||||
description: `Сервис: ${service.name} (${service.status})`,
|
||||
});
|
||||
|
||||
links.push({
|
||||
source: agent.name,
|
||||
target: serviceId,
|
||||
type: "hosts",
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
return { nodes, links };
|
||||
};
|
||||
|
||||
export const GraphsPage = () => {
|
||||
const agents = useAgentStore((s) => s.agents);
|
||||
|
||||
const graphData: GraphData = useMemo(() => {
|
||||
return buildGraphFromAgents();
|
||||
}, [agents]);
|
||||
|
||||
return (
|
||||
<div className="h-full">
|
||||
<Graph initialData={graphData} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,534 +0,0 @@
|
||||
import React, { useRef, useState, useEffect } from "react";
|
||||
import ForceGraph2D from "react-force-graph-2d";
|
||||
import {
|
||||
FiDownload,
|
||||
FiZoomIn,
|
||||
FiZoomOut,
|
||||
FiMove,
|
||||
FiCpu,
|
||||
FiServer,
|
||||
FiPlus,
|
||||
FiTrash2,
|
||||
FiLink,
|
||||
FiMinusCircle,
|
||||
} from "react-icons/fi";
|
||||
|
||||
interface GraphNode {
|
||||
id: string;
|
||||
name: string;
|
||||
type: "agent" | "service";
|
||||
val?: number;
|
||||
description?: string;
|
||||
x?: number;
|
||||
y?: number;
|
||||
}
|
||||
|
||||
interface GraphLink {
|
||||
source: string;
|
||||
target: string;
|
||||
type?: string;
|
||||
}
|
||||
|
||||
export interface GraphData {
|
||||
nodes: GraphNode[];
|
||||
links: GraphLink[];
|
||||
}
|
||||
|
||||
interface CustomGraphProps {
|
||||
data: GraphData;
|
||||
onExport?: () => void;
|
||||
onDataChange?: (newData: GraphData) => void;
|
||||
}
|
||||
|
||||
export const Test2Page: React.FC<CustomGraphProps> = ({
|
||||
data: initialData,
|
||||
onExport,
|
||||
onDataChange,
|
||||
}) => {
|
||||
const fgRef = useRef<any>(null);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [data, setData] = useState<GraphData>(initialData);
|
||||
const [highlightNodes, setHighlightNodes] = useState<Set<string>>(new Set());
|
||||
const [highlightLinks, setHighlightLinks] = useState<Set<any>>(new Set());
|
||||
const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
|
||||
const [isLinkMode, setIsLinkMode] = useState(false);
|
||||
const [selectedNode, setSelectedNode] = useState<GraphNode | null>(null);
|
||||
const [contextMenu, setContextMenu] = useState<{
|
||||
x: number;
|
||||
y: number;
|
||||
node: GraphNode | null;
|
||||
link: GraphLink | null;
|
||||
} | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (initialData) setData(initialData);
|
||||
}, [initialData]);
|
||||
|
||||
// Отслеживаем размеры контейнера через ResizeObserver
|
||||
useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
|
||||
const updateDimensions = () => {
|
||||
setDimensions({
|
||||
width: container.clientWidth,
|
||||
height: container.clientHeight || window.innerHeight - 160,
|
||||
});
|
||||
};
|
||||
|
||||
updateDimensions();
|
||||
|
||||
const observer = new ResizeObserver(updateDimensions);
|
||||
observer.observe(container);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
// Функция для подсветки связанных элементов
|
||||
const handleNodeHover = (node: GraphNode | null) => {
|
||||
const newHighlightNodes = new Set<string>();
|
||||
const newHighlightLinks = new Set<any>();
|
||||
|
||||
if (node) {
|
||||
newHighlightNodes.add(node.id);
|
||||
data.links.forEach((link) => {
|
||||
if (link.source === node.id || link.target === node.id) {
|
||||
newHighlightLinks.add(link);
|
||||
newHighlightNodes.add(link.source as string);
|
||||
newHighlightNodes.add(link.target as string);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setHighlightNodes(newHighlightNodes);
|
||||
setHighlightLinks(newHighlightLinks);
|
||||
};
|
||||
|
||||
// Обработчик клика по узлу для создания связей
|
||||
const handleNodeClick = (node: GraphNode) => {
|
||||
if (isLinkMode) {
|
||||
if (selectedNode === null) {
|
||||
setSelectedNode(node);
|
||||
} else if (selectedNode.id !== node.id) {
|
||||
const newLink: GraphLink = {
|
||||
source: selectedNode.id,
|
||||
target: node.id,
|
||||
type: "custom",
|
||||
};
|
||||
|
||||
const linkExists = data.links.some(
|
||||
(link) =>
|
||||
(link.source === selectedNode.id && link.target === node.id) ||
|
||||
(link.source === node.id && link.target === selectedNode.id),
|
||||
);
|
||||
|
||||
if (!linkExists) {
|
||||
const newData = {
|
||||
nodes: [...data.nodes],
|
||||
links: [...data.links, newLink],
|
||||
};
|
||||
setData(newData);
|
||||
onDataChange?.(newData);
|
||||
}
|
||||
setSelectedNode(null);
|
||||
setIsLinkMode(false);
|
||||
} else {
|
||||
setSelectedNode(null);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// УДАЛЕНИЕ СВЯЗИ
|
||||
const handleDeleteLink = (linkToDelete: GraphLink) => {
|
||||
const filteredLinks = data.links.filter((link) => link !== linkToDelete);
|
||||
const newData = {
|
||||
nodes: [...data.nodes],
|
||||
links: filteredLinks,
|
||||
};
|
||||
setData(newData);
|
||||
onDataChange?.(newData);
|
||||
setContextMenu(null);
|
||||
};
|
||||
|
||||
// УДАЛЕНИЕ УЗЛА
|
||||
const handleDeleteNode = (nodeToDelete: GraphNode) => {
|
||||
const filteredNodes = data.nodes.filter(
|
||||
(node) => node.id !== nodeToDelete.id,
|
||||
);
|
||||
const filteredLinks = data.links.filter(
|
||||
(link) =>
|
||||
link.source !== nodeToDelete.id && link.target !== nodeToDelete.id,
|
||||
);
|
||||
const newData = {
|
||||
nodes: filteredNodes,
|
||||
links: filteredLinks,
|
||||
};
|
||||
setData(newData);
|
||||
onDataChange?.(newData);
|
||||
setContextMenu(null);
|
||||
};
|
||||
|
||||
// Добавление нового узла
|
||||
const handleAddNode = () => {
|
||||
const newNodeName = prompt(
|
||||
"Введите имя узла:",
|
||||
`Node ${data.nodes.length + 1}`,
|
||||
);
|
||||
if (newNodeName) {
|
||||
const isService = window.confirm(
|
||||
"Выберите тип: OK - Сервис, Отмена - Агент",
|
||||
);
|
||||
const newNode: GraphNode = {
|
||||
id: `node-${Date.now()}`,
|
||||
name: newNodeName,
|
||||
type: isService ? "service" : "agent",
|
||||
val: isService ? 12 : 8,
|
||||
description: "Новый узел",
|
||||
};
|
||||
|
||||
const newData = {
|
||||
nodes: [...data.nodes, newNode],
|
||||
links: [...data.links],
|
||||
};
|
||||
setData(newData);
|
||||
onDataChange?.(newData);
|
||||
}
|
||||
};
|
||||
|
||||
// Открытие контекстного меню
|
||||
const openContextMenu = (
|
||||
e: React.MouseEvent,
|
||||
node?: GraphNode,
|
||||
link?: GraphLink,
|
||||
) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
if (node) {
|
||||
setContextMenu({ x: e.clientX, y: e.clientY, node, link: null });
|
||||
} else if (link) {
|
||||
setContextMenu({ x: e.clientX, y: e.clientY, node: null, link });
|
||||
}
|
||||
};
|
||||
|
||||
// Закрыть контекстное меню
|
||||
useEffect(() => {
|
||||
const handleClickOutside = () => setContextMenu(null);
|
||||
document.addEventListener("click", handleClickOutside);
|
||||
return () => document.removeEventListener("click", handleClickOutside);
|
||||
}, []);
|
||||
|
||||
// Функция для определения цвета узла
|
||||
const getNodeColor = (node: GraphNode) => {
|
||||
if (highlightNodes.has(node.id)) return "#fbbf24";
|
||||
if (selectedNode?.id === node.id && isLinkMode) return "#f97316";
|
||||
|
||||
switch (node.type) {
|
||||
case "service":
|
||||
return "#3b82f6";
|
||||
case "agent":
|
||||
return "#8b5cf6";
|
||||
default:
|
||||
return "#6b7280";
|
||||
}
|
||||
};
|
||||
|
||||
// Функция для размера узла
|
||||
const getNodeSize = (node: GraphNode) => {
|
||||
switch (node.type) {
|
||||
case "service":
|
||||
return 3;
|
||||
case "agent":
|
||||
return 3;
|
||||
default:
|
||||
return 5;
|
||||
}
|
||||
};
|
||||
|
||||
// Кастомный рендер узла
|
||||
const renderNode = (
|
||||
node: GraphNode,
|
||||
ctx: CanvasRenderingContext2D,
|
||||
globalScale: number,
|
||||
) => {
|
||||
const size = getNodeSize(node);
|
||||
const color = getNodeColor(node);
|
||||
|
||||
if (!node.x || !node.y) return;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(node.x, node.y, size, 0, 2 * Math.PI);
|
||||
ctx.fillStyle = color;
|
||||
ctx.fill();
|
||||
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.font = `${size}px "Segoe UI Emoji", "Apple Color Emoji", sans-serif`;
|
||||
ctx.textAlign = "center";
|
||||
ctx.textBaseline = "middle";
|
||||
|
||||
if (node.type === "service") {
|
||||
ctx.fillText("S", node.x, node.y);
|
||||
} else if (node.type === "agent") {
|
||||
ctx.fillText("A", node.x, node.y);
|
||||
}
|
||||
|
||||
if (globalScale > 0.5) {
|
||||
ctx.fillStyle = "#e5e7eb";
|
||||
ctx.font = `${Math.min(12, 12 / globalScale)}px "Arial", sans-serif`;
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillText(node.name, node.x, node.y + size + 8);
|
||||
}
|
||||
};
|
||||
|
||||
const handleExport = () => {
|
||||
if (onExport) {
|
||||
onExport();
|
||||
} else {
|
||||
const dataStr = JSON.stringify(data, null, 2);
|
||||
const blob = new Blob([dataStr], { type: "application/json" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.download = "graph-data.json";
|
||||
link.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
};
|
||||
|
||||
const handleZoomIn = () => {
|
||||
if (fgRef.current) {
|
||||
const currentZoom = fgRef.current.zoom();
|
||||
fgRef.current.zoom(currentZoom * 1.2);
|
||||
}
|
||||
};
|
||||
|
||||
const handleZoomOut = () => {
|
||||
if (fgRef.current) {
|
||||
const currentZoom = fgRef.current.zoom();
|
||||
fgRef.current.zoom(currentZoom / 1.2);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFit = () => {
|
||||
if (fgRef.current) {
|
||||
fgRef.current.zoomToFit(400);
|
||||
}
|
||||
};
|
||||
|
||||
if (!data || data.nodes.length === 0) {
|
||||
return (
|
||||
<div className="bg-gray-900 rounded-xl shadow-lg p-6">
|
||||
<div className="flex items-center justify-center h-96">
|
||||
<div className="text-center">
|
||||
<p className="text-gray-400 mb-4">Нет данных для отображения</p>
|
||||
<button
|
||||
onClick={handleAddNode}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-lg transition-colors text-white mx-auto"
|
||||
>
|
||||
<FiPlus /> Добавить первый узел
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-gray-900 rounded-xl shadow-lg p-6">
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="graph-container border border-gray-800 rounded-lg overflow-hidden relative"
|
||||
style={{
|
||||
height: "calc(100vh - 200px)",
|
||||
position: "relative",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<ForceGraph2D
|
||||
ref={fgRef}
|
||||
graphData={data}
|
||||
width={dimensions.width}
|
||||
height={dimensions.height}
|
||||
nodeCanvasObject={renderNode}
|
||||
nodeLabel={(node: GraphNode) => {
|
||||
return `${node.name}\n${node.description || ""}\n${node.type === "service" ? "Сервис" : "Агент"}\nПКМ для удаления`;
|
||||
}}
|
||||
linkLabel={(link: GraphLink) => {
|
||||
// ВОЗВРАЩАЕМ СТРОКУ
|
||||
const sourceName =
|
||||
data.nodes.find((n) => n.id === link.source)?.name || link.source;
|
||||
const targetName =
|
||||
data.nodes.find((n) => n.id === link.target)?.name || link.target;
|
||||
return `Связь: ${sourceName} → ${targetName}\nПКМ для удаления`;
|
||||
}}
|
||||
linkColor={(link: any) => {
|
||||
return highlightLinks.has(link) ? "#fbbf24" : "#4b5563";
|
||||
}}
|
||||
linkWidth={(link: any) => (highlightLinks.has(link) ? 3 : 1.5)}
|
||||
linkDirectionalParticles={0}
|
||||
onNodeClick={handleNodeClick}
|
||||
onNodeRightClick={(node, event) =>
|
||||
openContextMenu(event as any, node, undefined)
|
||||
}
|
||||
onLinkRightClick={(link, event) =>
|
||||
openContextMenu(event as any, undefined, link)
|
||||
}
|
||||
onNodeHover={handleNodeHover}
|
||||
cooldownTicks={50}
|
||||
cooldownTime={2000}
|
||||
d3AlphaDecay={0.03}
|
||||
d3VelocityDecay={0.4}
|
||||
warmupTicks={50}
|
||||
onEngineStop={() => {
|
||||
if (fgRef.current) {
|
||||
setTimeout(() => {
|
||||
if (fgRef.current) {
|
||||
fgRef.current.zoomToFit(400);
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
{contextMenu && (
|
||||
<div
|
||||
className="fixed bg-gray-800 rounded-lg shadow-lg border border-gray-700 py-1 z-50"
|
||||
style={{ top: contextMenu.y, left: contextMenu.x }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{contextMenu.node && (
|
||||
<>
|
||||
<div className="px-3 py-1 text-xs text-gray-400 border-b border-gray-700">
|
||||
{contextMenu.node.name}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsLinkMode(true);
|
||||
setSelectedNode(contextMenu.node);
|
||||
setContextMenu(null);
|
||||
}}
|
||||
className="w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 flex items-center gap-2"
|
||||
>
|
||||
<FiLink size={14} /> Создать связь
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeleteNode(contextMenu.node!)}
|
||||
className="w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-gray-700 flex items-center gap-2"
|
||||
>
|
||||
<FiTrash2 size={14} /> Удалить узел
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{contextMenu.link && (
|
||||
<>
|
||||
<div className="px-3 py-1 text-xs text-gray-400 border-b border-gray-700">
|
||||
Связь:{" "}
|
||||
{typeof contextMenu.link.source === "string"
|
||||
? contextMenu.link.source
|
||||
: (contextMenu.link.source as any).name ||
|
||||
(contextMenu.link.source as any).id}{" "}
|
||||
→{" "}
|
||||
{typeof contextMenu.link.target === "string"
|
||||
? contextMenu.link.target
|
||||
: (contextMenu.link.target as any).name ||
|
||||
(contextMenu.link.target as any).id}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleDeleteLink(contextMenu.link!)}
|
||||
className="w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-gray-700 flex items-center gap-2"
|
||||
>
|
||||
<FiMinusCircle size={14} /> Удалить связь
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLinkMode && (
|
||||
<div className="absolute bottom-4 left-4 bg-green-600 text-white px-3 py-1 rounded-lg text-sm flex items-center gap-2">
|
||||
<FiLink /> Режим создания связей: кликните на два узла для
|
||||
соединения
|
||||
{selectedNode && (
|
||||
<span className="ml-2">Выбран: {selectedNode.name}</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 text-sm text-gray-500 flex justify-between items-center">
|
||||
<div className="flex gap-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<FiServer className="text-gray-400" />
|
||||
<span>
|
||||
Сервисы: {data.nodes.filter((n) => n.type === "service").length}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<FiCpu className="text-gray-400" />
|
||||
<span>
|
||||
Агенты: {data.nodes.filter((n) => n.type === "agent").length}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 bg-gray-500 rounded-sm"></div>
|
||||
<span>Связи: {data.links.length}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsLinkMode(!isLinkMode);
|
||||
setSelectedNode(null);
|
||||
}}
|
||||
className={`flex items-center gap-2 px-3 py-2 rounded-lg transition-colors ${
|
||||
isLinkMode
|
||||
? "bg-green-600 hover:bg-green-700 text-white"
|
||||
: "bg-gray-800 hover:bg-gray-700 text-gray-300"
|
||||
}`}
|
||||
>
|
||||
<FiLink />
|
||||
<span className="text-sm">
|
||||
{isLinkMode ? "Создание связи..." : "Добавить связь"}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleAddNode}
|
||||
className="flex items-center gap-2 px-3 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
|
||||
>
|
||||
<FiPlus />
|
||||
<span className="text-sm">Узел</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleZoomIn}
|
||||
className="p-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
|
||||
>
|
||||
<FiZoomIn />
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleZoomOut}
|
||||
className="p-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
|
||||
>
|
||||
<FiZoomOut />
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleFit}
|
||||
className="p-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
|
||||
>
|
||||
<FiMove />
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleExport}
|
||||
className="flex items-center gap-2 px-3 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
|
||||
>
|
||||
<FiDownload />
|
||||
<span className="text-sm">Экспорт</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user