nikita
@@ -10,10 +10,11 @@ import {
|
|||||||
FaChevronDown,
|
FaChevronDown,
|
||||||
FaProjectDiagram,
|
FaProjectDiagram,
|
||||||
FaTrash,
|
FaTrash,
|
||||||
|
FaArrowLeft,
|
||||||
} from "react-icons/fa";
|
} from "react-icons/fa";
|
||||||
import { useNavigate } from "react-router-dom";
|
|
||||||
import { useAgentStore } from "@/app/providers/layout/store/agent.store";
|
import { useAgentStore } from "@/app/providers/layout/store/agent.store";
|
||||||
import { useAuthStore } from "@/modules/auth/store/useAuthStore";
|
import { useAuthStore } from "@/modules/auth/store/useAuthStore";
|
||||||
|
import { Graph, type GraphData } from "@/modules/graph";
|
||||||
|
|
||||||
interface SidebarProps {
|
interface SidebarProps {
|
||||||
isOpen?: boolean;
|
isOpen?: boolean;
|
||||||
@@ -24,13 +25,13 @@ export const Sidebar: React.FC<SidebarProps> = ({
|
|||||||
isOpen = true,
|
isOpen = true,
|
||||||
onToggle,
|
onToggle,
|
||||||
}) => {
|
}) => {
|
||||||
const navigate = useNavigate();
|
|
||||||
const { agents, isLoading, error, fetchAgents, removeAgent } =
|
const { agents, isLoading, error, fetchAgents, removeAgent } =
|
||||||
useAgentStore();
|
useAgentStore();
|
||||||
const { token } = useAuthStore();
|
const { token } = useAuthStore();
|
||||||
const [searchQuery, setSearchQuery] = useState("");
|
const [searchQuery, setSearchQuery] = useState("");
|
||||||
const [copied, setCopied] = useState(false);
|
const [copied, setCopied] = useState(false);
|
||||||
const [showTokenModal, setShowTokenModal] = useState(false);
|
const [showTokenModal, setShowTokenModal] = useState(false);
|
||||||
|
const [showGraphs, setShowGraphs] = useState(false);
|
||||||
const [expandedAgents, setExpandedAgents] = useState<Set<string>>(
|
const [expandedAgents, setExpandedAgents] = useState<Set<string>>(
|
||||||
new Set(agents.map((a) => a.name)),
|
new Set(agents.map((a) => a.name)),
|
||||||
);
|
);
|
||||||
@@ -54,6 +55,40 @@ export const Sidebar: React.FC<SidebarProps> = ({
|
|||||||
);
|
);
|
||||||
}, [agents, searchQuery]);
|
}, [agents, searchQuery]);
|
||||||
|
|
||||||
|
const graphData: GraphData = useMemo(() => {
|
||||||
|
const nodes = [];
|
||||||
|
const links = [];
|
||||||
|
|
||||||
|
agents.forEach((agent) => {
|
||||||
|
nodes.push({
|
||||||
|
id: agent.name,
|
||||||
|
name: agent.name,
|
||||||
|
type: "agent" as const,
|
||||||
|
val: 8,
|
||||||
|
description: `Агент: ${agent.name}`,
|
||||||
|
});
|
||||||
|
|
||||||
|
agent.services.forEach((service) => {
|
||||||
|
const serviceId = `${agent.name}-${service.name}`;
|
||||||
|
nodes.push({
|
||||||
|
id: serviceId,
|
||||||
|
name: service.name,
|
||||||
|
type: "service" as const,
|
||||||
|
val: 12,
|
||||||
|
description: `Сервис: ${service.name} (${service.status})`,
|
||||||
|
});
|
||||||
|
|
||||||
|
links.push({
|
||||||
|
source: agent.name,
|
||||||
|
target: serviceId,
|
||||||
|
type: "hosts",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return { nodes, links };
|
||||||
|
}, [agents]);
|
||||||
|
|
||||||
const handleCopyToken = () => {
|
const handleCopyToken = () => {
|
||||||
if (token) {
|
if (token) {
|
||||||
navigator.clipboard.writeText(token);
|
navigator.clipboard.writeText(token);
|
||||||
@@ -87,10 +122,12 @@ export const Sidebar: React.FC<SidebarProps> = ({
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<aside
|
<aside
|
||||||
className={`fixed md:relative w-72 h-screen z-50 transition-transform duration-300 ease-in-out flex flex-col ${
|
className={`fixed md:relative z-50 transition-all duration-300 ease-in-out flex flex-col ${
|
||||||
isOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"
|
isOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"
|
||||||
}`}
|
}`}
|
||||||
style={{
|
style={{
|
||||||
|
width: showGraphs ? "500px" : "288px",
|
||||||
|
height: "100vh",
|
||||||
backgroundColor: "var(--card-bg)",
|
backgroundColor: "var(--card-bg)",
|
||||||
borderRight: "1px solid var(--border)",
|
borderRight: "1px solid var(--border)",
|
||||||
}}
|
}}
|
||||||
@@ -127,220 +164,237 @@ export const Sidebar: React.FC<SidebarProps> = ({
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Поиск */}
|
{/* Контент — либо список агентов, либо графы */}
|
||||||
<div className="px-3 py-2">
|
{showGraphs ? (
|
||||||
<input
|
<div className="flex-1 overflow-hidden relative">
|
||||||
type="text"
|
<Graph initialData={graphData} />
|
||||||
value={searchQuery}
|
</div>
|
||||||
onChange={(e) => setSearchQuery(e.target.value)}
|
) : (
|
||||||
placeholder="Поиск агентов..."
|
<>
|
||||||
className="w-full px-3 py-2 rounded-lg border text-sm focus:outline-none transition-all"
|
{/* Поиск */}
|
||||||
style={{
|
<div className="px-3 py-2">
|
||||||
backgroundColor: "var(--input-bg)",
|
<input
|
||||||
borderColor: "var(--border)",
|
type="text"
|
||||||
color: "var(--text-primary)",
|
value={searchQuery}
|
||||||
}}
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
onFocus={(e) => {
|
placeholder="Поиск агентов..."
|
||||||
e.currentTarget.style.borderColor = "var(--border-focus)";
|
className="w-full px-3 py-2 rounded-lg border text-sm focus:outline-none transition-all"
|
||||||
e.currentTarget.style.boxShadow = `0 0 0 3px var(--border-focus)30`;
|
style={{
|
||||||
}}
|
backgroundColor: "var(--input-bg)",
|
||||||
onBlur={(e) => {
|
borderColor: "var(--border)",
|
||||||
e.currentTarget.style.borderColor = "var(--border)";
|
color: "var(--text-primary)",
|
||||||
e.currentTarget.style.boxShadow = "none";
|
}}
|
||||||
}}
|
onFocus={(e) => {
|
||||||
/>
|
e.currentTarget.style.borderColor = "var(--border-focus)";
|
||||||
</div>
|
e.currentTarget.style.boxShadow = `0 0 0 3px var(--border-focus)30`;
|
||||||
|
}}
|
||||||
{/* Список агентов */}
|
onBlur={(e) => {
|
||||||
<div className="flex-1 overflow-y-auto px-2 py-2">
|
e.currentTarget.style.borderColor = "var(--border)";
|
||||||
{isLoading && agents.length === 0 ? (
|
e.currentTarget.style.boxShadow = "none";
|
||||||
<div className="flex flex-col items-center justify-center py-12">
|
}}
|
||||||
<FaSpinner
|
|
||||||
className="animate-spin mb-3"
|
|
||||||
style={{ color: "var(--accent)", fontSize: "20px" }}
|
|
||||||
/>
|
/>
|
||||||
<p className="text-xs" style={{ color: "var(--text-secondary)" }}>
|
|
||||||
Загрузка агентов...
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
) : error ? (
|
|
||||||
<div className="text-center py-8">
|
{/* Список агентов */}
|
||||||
<div
|
<div className="flex-1 overflow-y-auto px-2 py-2">
|
||||||
className="text-xs mb-2"
|
{isLoading && agents.length === 0 ? (
|
||||||
style={{ color: "var(--error-text)" }}
|
<div className="flex flex-col items-center justify-center py-12">
|
||||||
>
|
<FaSpinner
|
||||||
{error}
|
className="animate-spin mb-3"
|
||||||
</div>
|
style={{ color: "var(--accent)", fontSize: "20px" }}
|
||||||
<button
|
/>
|
||||||
onClick={fetchAgents}
|
<p
|
||||||
className="text-xs hover:underline"
|
className="text-xs"
|
||||||
style={{ color: "var(--accent)" }}
|
style={{ color: "var(--text-secondary)" }}
|
||||||
>
|
|
||||||
Попробовать снова
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
) : filteredAgents.length === 0 ? (
|
|
||||||
<div
|
|
||||||
className="text-center py-8"
|
|
||||||
style={{ color: "var(--text-muted)" }}
|
|
||||||
>
|
|
||||||
<FaMicrochip className="mx-auto mb-2 opacity-50" size={16} />
|
|
||||||
<p className="text-xs">
|
|
||||||
{searchQuery ? "Ничего не найдено" : "Нет агентов"}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="space-y-1">
|
|
||||||
{filteredAgents.map((agent) => {
|
|
||||||
const isExpanded = expandedAgents.has(agent.name);
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={agent.name}
|
|
||||||
className="rounded-lg border overflow-hidden transition-all group"
|
|
||||||
style={{
|
|
||||||
backgroundColor: "var(--bg-secondary)",
|
|
||||||
borderColor: "var(--border)",
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
{/* Agent header — кликабельный для сворачивания */}
|
Загрузка агентов...
|
||||||
<div
|
</p>
|
||||||
className="flex items-center gap-2 px-3 py-2 cursor-pointer hover:opacity-80 transition-opacity"
|
</div>
|
||||||
onClick={() => toggleAgent(agent.name)}
|
) : error ? (
|
||||||
>
|
<div className="text-center py-8">
|
||||||
<span style={{ color: "var(--text-muted)" }}>
|
<div
|
||||||
{isExpanded ? (
|
className="text-xs mb-2"
|
||||||
<FaChevronDown size={10} />
|
style={{ color: "var(--error-text)" }}
|
||||||
) : (
|
>
|
||||||
<FaChevronRight size={10} />
|
{error}
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
<FaMicrochip
|
|
||||||
size={12}
|
|
||||||
style={{ color: "var(--accent)" }}
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
className="text-sm font-medium flex-1 truncate"
|
|
||||||
style={{ color: "var(--text-primary)" }}
|
|
||||||
>
|
|
||||||
{agent.name}
|
|
||||||
</span>
|
|
||||||
{/* Статус-индикатор агента (сколько сервисов запущено) */}
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
{agent.services.filter((s) => s.status === "running")
|
|
||||||
.length > 0 && (
|
|
||||||
<span
|
|
||||||
className="w-2 h-2 rounded-full"
|
|
||||||
style={{ backgroundColor: "#4ade80" }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<span
|
|
||||||
className="text-[10px]"
|
|
||||||
style={{ color: "var(--text-muted)" }}
|
|
||||||
>
|
|
||||||
{
|
|
||||||
agent.services.filter((s) => s.status === "running")
|
|
||||||
.length
|
|
||||||
}
|
|
||||||
/{agent.services.length}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{/* Кнопка удаления — появляется при наведении */}
|
|
||||||
<button
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
if (
|
|
||||||
window.confirm(`Удалить агента "${agent.name}"?`)
|
|
||||||
) {
|
|
||||||
removeAgent(agent.name);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
className="opacity-0 group-hover:opacity-100 p-1 rounded transition-all flex-shrink-0"
|
|
||||||
style={{
|
|
||||||
color: "var(--text-muted)",
|
|
||||||
}}
|
|
||||||
onMouseEnter={(e) => {
|
|
||||||
e.currentTarget.style.color = "#f87171";
|
|
||||||
e.currentTarget.style.backgroundColor =
|
|
||||||
"rgba(248, 113, 113, 0.15)";
|
|
||||||
}}
|
|
||||||
onMouseLeave={(e) => {
|
|
||||||
e.currentTarget.style.color = "var(--text-muted)";
|
|
||||||
e.currentTarget.style.backgroundColor = "transparent";
|
|
||||||
}}
|
|
||||||
title="Удалить агента"
|
|
||||||
>
|
|
||||||
<FaTrash size={10} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Services list — сворачивается */}
|
|
||||||
{isExpanded && (
|
|
||||||
<div
|
|
||||||
className="px-3 pb-2"
|
|
||||||
style={{ paddingLeft: "24px" }}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="border-l-2 pl-3 space-y-1"
|
|
||||||
style={{ borderColor: "var(--border)" }}
|
|
||||||
>
|
|
||||||
{agent.services.map((service) => {
|
|
||||||
const isRunning = service.status === "running";
|
|
||||||
const isError = service.status === "error";
|
|
||||||
const isStopped =
|
|
||||||
service.status === "stopped" || !isRunning;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={service.name}
|
|
||||||
className="flex items-center justify-between py-1"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className="text-xs"
|
|
||||||
style={{ color: "var(--text-secondary)" }}
|
|
||||||
>
|
|
||||||
{service.name}
|
|
||||||
</span>
|
|
||||||
{/* Status indicator */}
|
|
||||||
<div className="flex items-center gap-1.5">
|
|
||||||
<span
|
|
||||||
className="w-1.5 h-1.5 rounded-full flex-shrink-0"
|
|
||||||
style={{
|
|
||||||
backgroundColor: isRunning
|
|
||||||
? "#4ade80"
|
|
||||||
: isError
|
|
||||||
? "#f87171"
|
|
||||||
: "#555",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
className="text-[10px] font-medium"
|
|
||||||
style={{
|
|
||||||
color: isRunning
|
|
||||||
? "#4ade80"
|
|
||||||
: isError
|
|
||||||
? "#f87171"
|
|
||||||
: "#777",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{isRunning
|
|
||||||
? "run"
|
|
||||||
: isError
|
|
||||||
? "err"
|
|
||||||
: "stop"}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
<button
|
||||||
})}
|
onClick={fetchAgents}
|
||||||
|
className="text-xs hover:underline"
|
||||||
|
style={{ color: "var(--accent)" }}
|
||||||
|
>
|
||||||
|
Попробовать снова
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : filteredAgents.length === 0 ? (
|
||||||
|
<div
|
||||||
|
className="text-center py-8"
|
||||||
|
style={{ color: "var(--text-muted)" }}
|
||||||
|
>
|
||||||
|
<FaMicrochip className="mx-auto mb-2 opacity-50" size={16} />
|
||||||
|
<p className="text-xs">
|
||||||
|
{searchQuery ? "Ничего не найдено" : "Нет агентов"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-1">
|
||||||
|
{filteredAgents.map((agent) => {
|
||||||
|
const isExpanded = expandedAgents.has(agent.name);
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={agent.name}
|
||||||
|
className="rounded-lg border overflow-hidden transition-all group"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--bg-secondary)",
|
||||||
|
borderColor: "var(--border)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Agent header — кликабельный для сворачивания */}
|
||||||
|
<div
|
||||||
|
className="flex items-center gap-2 px-3 py-2 cursor-pointer hover:opacity-80 transition-opacity"
|
||||||
|
onClick={() => toggleAgent(agent.name)}
|
||||||
|
>
|
||||||
|
<span style={{ color: "var(--text-muted)" }}>
|
||||||
|
{isExpanded ? (
|
||||||
|
<FaChevronDown size={10} />
|
||||||
|
) : (
|
||||||
|
<FaChevronRight size={10} />
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
<FaMicrochip
|
||||||
|
size={12}
|
||||||
|
style={{ color: "var(--accent)" }}
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
className="text-sm font-medium flex-1 truncate"
|
||||||
|
style={{ color: "var(--text-primary)" }}
|
||||||
|
>
|
||||||
|
{agent.name}
|
||||||
|
</span>
|
||||||
|
{/* Статус-индикатор агента (сколько сервисов запущено) */}
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
{agent.services.filter(
|
||||||
|
(s) => s.status === "running",
|
||||||
|
).length > 0 && (
|
||||||
|
<span
|
||||||
|
className="w-2 h-2 rounded-full"
|
||||||
|
style={{ backgroundColor: "#4ade80" }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<span
|
||||||
|
className="text-[10px]"
|
||||||
|
style={{ color: "var(--text-muted)" }}
|
||||||
|
>
|
||||||
|
{
|
||||||
|
agent.services.filter(
|
||||||
|
(s) => s.status === "running",
|
||||||
|
).length
|
||||||
|
}
|
||||||
|
/{agent.services.length}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{/* Кнопка удаления — появляется при наведении */}
|
||||||
|
<button
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
if (
|
||||||
|
window.confirm(
|
||||||
|
`Удалить агента "${agent.name}"?`,
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
removeAgent(agent.name);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className="opacity-0 group-hover:opacity-100 p-1 rounded transition-all flex-shrink-0"
|
||||||
|
style={{
|
||||||
|
color: "var(--text-muted)",
|
||||||
|
}}
|
||||||
|
onMouseEnter={(e) => {
|
||||||
|
e.currentTarget.style.color = "#f87171";
|
||||||
|
e.currentTarget.style.backgroundColor =
|
||||||
|
"rgba(248, 113, 113, 0.15)";
|
||||||
|
}}
|
||||||
|
onMouseLeave={(e) => {
|
||||||
|
e.currentTarget.style.color = "var(--text-muted)";
|
||||||
|
e.currentTarget.style.backgroundColor =
|
||||||
|
"transparent";
|
||||||
|
}}
|
||||||
|
title="Удалить агента"
|
||||||
|
>
|
||||||
|
<FaTrash size={10} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Services list — сворачивается */}
|
||||||
|
{isExpanded && (
|
||||||
|
<div
|
||||||
|
className="px-3 pb-2"
|
||||||
|
style={{ paddingLeft: "24px" }}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="border-l-2 pl-3 space-y-1"
|
||||||
|
style={{ borderColor: "var(--border)" }}
|
||||||
|
>
|
||||||
|
{agent.services.map((service) => {
|
||||||
|
const isRunning = service.status === "running";
|
||||||
|
const isError = service.status === "error";
|
||||||
|
const isStopped =
|
||||||
|
service.status === "stopped" || !isRunning;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={service.name}
|
||||||
|
className="flex items-center justify-between py-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className="text-xs"
|
||||||
|
style={{ color: "var(--text-secondary)" }}
|
||||||
|
>
|
||||||
|
{service.name}
|
||||||
|
</span>
|
||||||
|
{/* Status indicator */}
|
||||||
|
<div className="flex items-center gap-1.5">
|
||||||
|
<span
|
||||||
|
className="w-1.5 h-1.5 rounded-full flex-shrink-0"
|
||||||
|
style={{
|
||||||
|
backgroundColor: isRunning
|
||||||
|
? "#4ade80"
|
||||||
|
: isError
|
||||||
|
? "#f87171"
|
||||||
|
: "#555",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
className="text-[10px] font-medium"
|
||||||
|
style={{
|
||||||
|
color: isRunning
|
||||||
|
? "#4ade80"
|
||||||
|
: isError
|
||||||
|
? "#f87171"
|
||||||
|
: "#777",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{isRunning
|
||||||
|
? "run"
|
||||||
|
: isError
|
||||||
|
? "err"
|
||||||
|
: "stop"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
</>
|
||||||
</div>
|
)}
|
||||||
|
|
||||||
{/* Footer с кнопками */}
|
{/* Footer с кнопками */}
|
||||||
<div
|
<div
|
||||||
@@ -350,25 +404,46 @@ export const Sidebar: React.FC<SidebarProps> = ({
|
|||||||
backgroundColor: "var(--card-bg)",
|
backgroundColor: "var(--card-bg)",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* Кнопка Графы */}
|
{showGraphs ? (
|
||||||
<button
|
/* Кнопка назад к агентам */
|
||||||
onClick={() => navigate("/graphs")}
|
<button
|
||||||
className="flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs rounded transition-colors"
|
onClick={() => setShowGraphs(false)}
|
||||||
style={{
|
className="flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs rounded transition-colors"
|
||||||
backgroundColor: "var(--bg-secondary)",
|
style={{
|
||||||
color: "var(--text-secondary)",
|
backgroundColor: "var(--bg-secondary)",
|
||||||
border: "1px solid var(--border)",
|
color: "var(--text-secondary)",
|
||||||
}}
|
border: "1px solid var(--border)",
|
||||||
onMouseEnter={(e) => {
|
}}
|
||||||
e.currentTarget.style.backgroundColor = "var(--border)";
|
onMouseEnter={(e) => {
|
||||||
}}
|
e.currentTarget.style.backgroundColor = "var(--border)";
|
||||||
onMouseLeave={(e) => {
|
}}
|
||||||
e.currentTarget.style.backgroundColor = "var(--bg-secondary)";
|
onMouseLeave={(e) => {
|
||||||
}}
|
e.currentTarget.style.backgroundColor = "var(--bg-secondary)";
|
||||||
>
|
}}
|
||||||
<FaProjectDiagram size={10} />
|
>
|
||||||
Графы
|
<FaArrowLeft size={10} />К агентам
|
||||||
</button>
|
</button>
|
||||||
|
) : (
|
||||||
|
/* Кнопка Графы */
|
||||||
|
<button
|
||||||
|
onClick={() => setShowGraphs(true)}
|
||||||
|
className="flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs rounded transition-colors"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--bg-secondary)",
|
||||||
|
color: "var(--text-secondary)",
|
||||||
|
border: "1px solid var(--border)",
|
||||||
|
}}
|
||||||
|
onMouseEnter={(e) => {
|
||||||
|
e.currentTarget.style.backgroundColor = "var(--border)";
|
||||||
|
}}
|
||||||
|
onMouseLeave={(e) => {
|
||||||
|
e.currentTarget.style.backgroundColor = "var(--bg-secondary)";
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FaProjectDiagram size={10} />
|
||||||
|
Графы
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
<button
|
<button
|
||||||
onClick={() => setShowTokenModal(true)}
|
onClick={() => setShowTokenModal(true)}
|
||||||
className="flex-1 flex items-center justify-center gap-1.5 px-2 py-1.5 text-xs rounded transition-colors"
|
className="flex-1 flex items-center justify-center gap-1.5 px-2 py-1.5 text-xs rounded transition-colors"
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ import {
|
|||||||
GraphControls,
|
GraphControls,
|
||||||
GraphContextMenu,
|
GraphContextMenu,
|
||||||
GraphStatusBar,
|
GraphStatusBar,
|
||||||
|
GraphStats,
|
||||||
} from "./components";
|
} from "./components";
|
||||||
|
|
||||||
interface GraphProps {
|
interface GraphProps {
|
||||||
@@ -25,7 +26,6 @@ export const Graph: React.FC<GraphProps> = ({
|
|||||||
onDataChange,
|
onDataChange,
|
||||||
}) => {
|
}) => {
|
||||||
const fgRef = useRef<any>(null);
|
const fgRef = useRef<any>(null);
|
||||||
const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
|
|
||||||
const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
|
const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
|
||||||
|
|
||||||
const data = useGraphStore((s) => s.data);
|
const data = useGraphStore((s) => s.data);
|
||||||
@@ -38,25 +38,6 @@ export const Graph: React.FC<GraphProps> = ({
|
|||||||
if (initialData) setData(initialData);
|
if (initialData) setData(initialData);
|
||||||
}, [initialData, setData]);
|
}, [initialData, setData]);
|
||||||
|
|
||||||
// Отслеживаем размеры контейнера
|
|
||||||
useEffect(() => {
|
|
||||||
const container = fgRef.current?.parentElement;
|
|
||||||
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();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Закрыть контекстное меню по клику вне
|
// Закрыть контекстное меню по клику вне
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleClickOutside = () => setContextMenu(null);
|
const handleClickOutside = () => setContextMenu(null);
|
||||||
@@ -89,16 +70,14 @@ export const Graph: React.FC<GraphProps> = ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="bg-gray-900 rounded-xl shadow-lg p-6">
|
<div className="bg-gray-900 p-4 h-full flex flex-col">
|
||||||
<div
|
{/* Статистика сверху */}
|
||||||
className="border border-gray-800 rounded-lg overflow-hidden relative"
|
<GraphStats data={data} />
|
||||||
style={{
|
|
||||||
height: "calc(100vh - 200px)",
|
{/* Граф */}
|
||||||
position: "relative",
|
<div className="flex-1 border border-gray-800 rounded-lg overflow-hidden relative mt-2">
|
||||||
width: "100%",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<ForceGraph
|
<ForceGraph
|
||||||
|
ref={fgRef}
|
||||||
data={data}
|
data={data}
|
||||||
onNodeRightClick={handleNodeRightClick}
|
onNodeRightClick={handleNodeRightClick}
|
||||||
onLinkRightClick={handleLinkRightClick}
|
onLinkRightClick={handleLinkRightClick}
|
||||||
@@ -113,6 +92,7 @@ export const Graph: React.FC<GraphProps> = ({
|
|||||||
<GraphStatusBar isLinkMode={isLinkMode} selectedNode={selectedNode} />
|
<GraphStatusBar isLinkMode={isLinkMode} selectedNode={selectedNode} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Кнопки снизу */}
|
||||||
<GraphControls
|
<GraphControls
|
||||||
fgRef={fgRef}
|
fgRef={fgRef}
|
||||||
onExport={onExport}
|
onExport={onExport}
|
||||||
|
|||||||
@@ -1,4 +1,10 @@
|
|||||||
import React, { useRef, useEffect, useCallback } from "react";
|
import React, {
|
||||||
|
useRef,
|
||||||
|
useEffect,
|
||||||
|
useCallback,
|
||||||
|
useState,
|
||||||
|
forwardRef,
|
||||||
|
} from "react";
|
||||||
import ForceGraph2D from "react-force-graph-2d";
|
import ForceGraph2D from "react-force-graph-2d";
|
||||||
import type { GraphData, GraphNode, GraphLink } from "../types";
|
import type { GraphData, GraphNode, GraphLink } from "../types";
|
||||||
import { useGraphStore } from "../store/useGraphStore";
|
import { useGraphStore } from "../store/useGraphStore";
|
||||||
@@ -9,154 +15,175 @@ interface ForceGraphProps {
|
|||||||
onLinkRightClick: (link: GraphLink, event: MouseEvent) => void;
|
onLinkRightClick: (link: GraphLink, event: MouseEvent) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const ForceGraph: React.FC<ForceGraphProps> = ({
|
export const ForceGraph = forwardRef<any, ForceGraphProps>(
|
||||||
data,
|
({ data, onNodeRightClick, onLinkRightClick }, ref) => {
|
||||||
onNodeRightClick,
|
const containerRef = useRef<HTMLDivElement>(null);
|
||||||
onLinkRightClick,
|
const [dimensions, setDimensions] = useState({ width: 480, height: 600 });
|
||||||
}) => {
|
|
||||||
const fgRef = useRef<any>(null);
|
|
||||||
const containerRef = useRef<HTMLDivElement>(null);
|
|
||||||
|
|
||||||
const highlightNodes = useGraphStore((s) => s.highlightNodes);
|
const highlightNodes = useGraphStore((s) => s.highlightNodes);
|
||||||
const highlightLinks = useGraphStore((s) => s.highlightLinks);
|
const highlightLinks = useGraphStore((s) => s.highlightLinks);
|
||||||
const selectedNode = useGraphStore((s) => s.selectedNode);
|
const selectedNode = useGraphStore((s) => s.selectedNode);
|
||||||
const isLinkMode = useGraphStore((s) => s.isLinkMode);
|
const isLinkMode = useGraphStore((s) => s.isLinkMode);
|
||||||
|
|
||||||
const handleNodeClick = useCallback((node: GraphNode) => {
|
// ResizeObserver для корректного отслеживания размеров
|
||||||
const store = useGraphStore.getState();
|
useEffect(() => {
|
||||||
if (store.isLinkMode) {
|
const container = containerRef.current;
|
||||||
if (store.selectedNode === null) {
|
if (!container) return;
|
||||||
store.setSelectedNode(node);
|
|
||||||
} else if (store.selectedNode.id !== node.id) {
|
|
||||||
store.createLink(store.selectedNode.id, node.id);
|
|
||||||
store.setSelectedNode(null);
|
|
||||||
store.toggleLinkMode();
|
|
||||||
} else {
|
|
||||||
store.setSelectedNode(null);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleNodeHover = (node: GraphNode | null) => {
|
const updateDimensions = () => {
|
||||||
const newHighlightNodes = new Set<string>();
|
setDimensions({
|
||||||
const newHighlightLinks = new Set<GraphLink>();
|
width: container.clientWidth,
|
||||||
|
height: container.clientHeight,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
if (node) {
|
updateDimensions();
|
||||||
newHighlightNodes.add(node.id);
|
|
||||||
data.links.forEach((link) => {
|
const observer = new ResizeObserver(updateDimensions);
|
||||||
if (link.source === node.id || link.target === node.id) {
|
observer.observe(container);
|
||||||
newHighlightLinks.add(link);
|
return () => observer.disconnect();
|
||||||
newHighlightNodes.add(link.source as string);
|
}, []);
|
||||||
newHighlightNodes.add(link.target as string);
|
|
||||||
|
const handleNodeClick = useCallback((node: GraphNode) => {
|
||||||
|
const store = useGraphStore.getState();
|
||||||
|
if (store.isLinkMode) {
|
||||||
|
if (store.selectedNode === null) {
|
||||||
|
store.setSelectedNode(node);
|
||||||
|
} else if (store.selectedNode.id !== node.id) {
|
||||||
|
store.createLink(store.selectedNode.id, node.id);
|
||||||
|
store.setSelectedNode(null);
|
||||||
|
store.toggleLinkMode();
|
||||||
|
} else {
|
||||||
|
store.setSelectedNode(null);
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
}
|
}, []);
|
||||||
|
|
||||||
useGraphStore.getState().setHighlight(newHighlightNodes, newHighlightLinks);
|
const handleNodeHover = (node: GraphNode | null) => {
|
||||||
};
|
const newHighlightNodes = new Set<string>();
|
||||||
|
const newHighlightLinks = new Set<GraphLink>();
|
||||||
|
|
||||||
const getNodeColor = (node: GraphNode) => {
|
if (node) {
|
||||||
if (highlightNodes.has(node.id)) return "#fbbf24";
|
newHighlightNodes.add(node.id);
|
||||||
if (selectedNode?.id === node.id && isLinkMode) return "#f97316";
|
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);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
switch (node.type) {
|
useGraphStore
|
||||||
case "service":
|
.getState()
|
||||||
return "#3b82f6";
|
.setHighlight(newHighlightNodes, newHighlightLinks);
|
||||||
case "agent":
|
};
|
||||||
return "#8b5cf6";
|
|
||||||
default:
|
|
||||||
return "#6b7280";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getNodeSize = (node: GraphNode) => {
|
const getNodeColor = (node: GraphNode) => {
|
||||||
switch (node.type) {
|
if (highlightNodes.has(node.id)) return "#fbbf24";
|
||||||
case "service":
|
if (selectedNode?.id === node.id && isLinkMode) return "#f97316";
|
||||||
return 3;
|
|
||||||
case "agent":
|
|
||||||
return 3;
|
|
||||||
default:
|
|
||||||
return 5;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderNode = (
|
switch (node.type) {
|
||||||
node: GraphNode,
|
case "service":
|
||||||
ctx: CanvasRenderingContext2D,
|
return "#3b82f6";
|
||||||
globalScale: number,
|
case "agent":
|
||||||
) => {
|
return "#8b5cf6";
|
||||||
const size = getNodeSize(node);
|
default:
|
||||||
const color = getNodeColor(node);
|
return "#6b7280";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
if (!node.x || !node.y) return;
|
const getNodeSize = (node: GraphNode) => {
|
||||||
|
switch (node.type) {
|
||||||
|
case "service":
|
||||||
|
return 3;
|
||||||
|
case "agent":
|
||||||
|
return 3;
|
||||||
|
default:
|
||||||
|
return 5;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
ctx.beginPath();
|
const renderNode = (
|
||||||
ctx.arc(node.x, node.y, size, 0, 2 * Math.PI);
|
node: GraphNode,
|
||||||
ctx.fillStyle = color;
|
ctx: CanvasRenderingContext2D,
|
||||||
ctx.fill();
|
globalScale: number,
|
||||||
|
) => {
|
||||||
|
const size = getNodeSize(node);
|
||||||
|
const color = getNodeColor(node);
|
||||||
|
|
||||||
ctx.fillStyle = "#ffffff";
|
if (!node.x || !node.y) return;
|
||||||
ctx.font = `${size}px "Segoe UI Emoji", "Apple Color Emoji", sans-serif`;
|
|
||||||
ctx.textAlign = "center";
|
|
||||||
ctx.textBaseline = "middle";
|
|
||||||
|
|
||||||
if (node.type === "service") {
|
ctx.beginPath();
|
||||||
ctx.fillText("S", node.x, node.y);
|
ctx.arc(node.x, node.y, size, 0, 2 * Math.PI);
|
||||||
} else if (node.type === "agent") {
|
ctx.fillStyle = color;
|
||||||
ctx.fillText("A", node.x, node.y);
|
ctx.fill();
|
||||||
}
|
|
||||||
|
|
||||||
if (globalScale > 0.5) {
|
ctx.fillStyle = "#ffffff";
|
||||||
ctx.fillStyle = "#e5e7eb";
|
ctx.font = `${size}px "Segoe UI Emoji", "Apple Color Emoji", sans-serif`;
|
||||||
ctx.font = `${Math.min(12, 12 / globalScale)}px "Arial", sans-serif`;
|
|
||||||
ctx.textAlign = "center";
|
ctx.textAlign = "center";
|
||||||
ctx.fillText(node.name, node.x, node.y + size + 8);
|
ctx.textBaseline = "middle";
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Fit zoom on engine stop
|
if (node.type === "service") {
|
||||||
useEffect(() => {
|
ctx.fillText("S", node.x, node.y);
|
||||||
if (fgRef.current) {
|
} else if (node.type === "agent") {
|
||||||
const timer = setTimeout(() => {
|
ctx.fillText("A", node.x, node.y);
|
||||||
fgRef.current?.zoomToFit(400);
|
}
|
||||||
}, 100);
|
|
||||||
return () => clearTimeout(timer);
|
|
||||||
}
|
|
||||||
}, [data]);
|
|
||||||
|
|
||||||
return (
|
if (globalScale > 0.5) {
|
||||||
<div ref={containerRef} className="w-full h-full relative">
|
ctx.fillStyle = "#e5e7eb";
|
||||||
<ForceGraph2D
|
ctx.font = `${Math.min(12, 12 / globalScale)}px "Arial", sans-serif`;
|
||||||
ref={fgRef}
|
ctx.textAlign = "center";
|
||||||
graphData={data}
|
ctx.fillText(node.name, node.x, node.y + size + 8);
|
||||||
width={containerRef.current?.clientWidth}
|
}
|
||||||
height={containerRef.current?.clientHeight || 600}
|
};
|
||||||
nodeCanvasObject={renderNode}
|
|
||||||
nodeLabel={(node: GraphNode) => {
|
// Fit zoom on engine stop
|
||||||
return `${node.name}\n${node.description || ""}\n${node.type === "service" ? "Сервис" : "Агент"}\nПКМ для удаления`;
|
useEffect(() => {
|
||||||
}}
|
if (ref && typeof ref === "object" && ref.current) {
|
||||||
linkLabel={(link: GraphLink) => {
|
const timer = setTimeout(() => {
|
||||||
const sourceName =
|
ref.current?.zoomToFit(400);
|
||||||
data.nodes.find((n) => n.id === link.source)?.name || link.source;
|
}, 100);
|
||||||
const targetName =
|
return () => clearTimeout(timer);
|
||||||
data.nodes.find((n) => n.id === link.target)?.name || link.target;
|
}
|
||||||
return `Связь: ${sourceName} → ${targetName}\nПКМ для удаления`;
|
}, [data, ref]);
|
||||||
}}
|
|
||||||
linkColor={(link: any) => {
|
return (
|
||||||
return highlightLinks.has(link) ? "#fbbf24" : "#4b5563";
|
<div ref={containerRef} className="w-full h-full relative">
|
||||||
}}
|
<ForceGraph2D
|
||||||
linkWidth={(link: any) => (highlightLinks.has(link) ? 3 : 1.5)}
|
ref={ref}
|
||||||
linkDirectionalParticles={0}
|
graphData={data}
|
||||||
onNodeClick={handleNodeClick}
|
width={dimensions.width}
|
||||||
onNodeRightClick={onNodeRightClick}
|
height={dimensions.height}
|
||||||
onLinkRightClick={onLinkRightClick}
|
nodeCanvasObject={renderNode}
|
||||||
onNodeHover={handleNodeHover}
|
nodeLabel={(node: GraphNode) => {
|
||||||
cooldownTicks={50}
|
return `${node.name}\n${node.description || ""}\n${node.type === "service" ? "Сервис" : "Агент"}\nПКМ для удаления`;
|
||||||
cooldownTime={2000}
|
}}
|
||||||
d3AlphaDecay={0.03}
|
linkLabel={(link: GraphLink) => {
|
||||||
d3VelocityDecay={0.4}
|
const sourceName =
|
||||||
warmupTicks={50}
|
data.nodes.find((n) => n.id === link.source)?.name || link.source;
|
||||||
/>
|
const targetName =
|
||||||
</div>
|
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={onNodeRightClick}
|
||||||
|
onLinkRightClick={onLinkRightClick}
|
||||||
|
onNodeHover={handleNodeHover}
|
||||||
|
cooldownTicks={50}
|
||||||
|
cooldownTime={2000}
|
||||||
|
d3AlphaDecay={0.03}
|
||||||
|
d3VelocityDecay={0.4}
|
||||||
|
warmupTicks={50}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
ForceGraph.displayName = "ForceGraph";
|
||||||
|
|||||||
@@ -68,82 +68,54 @@ export const GraphControls: React.FC<GraphControlsProps> = ({
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center justify-between mt-4 text-sm text-gray-400">
|
<div className="flex items-center justify-end gap-2 mt-2">
|
||||||
<div className="flex gap-6">
|
{/* Режим создания связи */}
|
||||||
<div className="flex items-center gap-2">
|
<button
|
||||||
<span>
|
onClick={toggleLinkMode}
|
||||||
Сервисы: {data.nodes.filter((n) => n.type === "service").length}
|
className={`flex w-full items-center gap-2 px-3 py-2 rounded-lg transition-colors ${
|
||||||
</span>
|
isLinkMode
|
||||||
</div>
|
? "bg-green-600 hover:bg-green-700 text-white"
|
||||||
<div className="flex items-center gap-2">
|
: "bg-gray-800 hover:bg-gray-700 text-gray-300"
|
||||||
<span>
|
}`}
|
||||||
Агенты: {data.nodes.filter((n) => n.type === "agent").length}
|
>
|
||||||
</span>
|
<FiLink />
|
||||||
</div>
|
<span className="text-sm">
|
||||||
<div className="flex items-center gap-2">
|
{isLinkMode ? "Создание связи..." : "Добавить связь"}
|
||||||
<div className="w-3 h-3 bg-gray-500 rounded-sm"></div>
|
</span>
|
||||||
<span>Связи: {data.links.length}</span>
|
</button>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex gap-2">
|
{/* Зум + */}
|
||||||
{/* Режим создания связи */}
|
<button
|
||||||
<button
|
onClick={handleZoomIn}
|
||||||
onClick={toggleLinkMode}
|
className="p-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
|
||||||
className={`flex items-center gap-2 px-3 py-2 rounded-lg transition-colors ${
|
>
|
||||||
isLinkMode
|
<FiZoomIn />
|
||||||
? "bg-green-600 hover:bg-green-700 text-white"
|
</button>
|
||||||
: "bg-gray-800 hover:bg-gray-700 text-gray-300"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<FiLink />
|
|
||||||
<span className="text-sm">
|
|
||||||
{isLinkMode ? "Создание связи..." : "Добавить связь"}
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{/* Добавить узел */}
|
{/* Зум - */}
|
||||||
<button
|
<button
|
||||||
onClick={handleAddNode}
|
onClick={handleZoomOut}
|
||||||
className="flex items-center gap-2 px-3 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
|
className="p-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
|
||||||
>
|
>
|
||||||
<FiPlus />
|
<FiZoomOut />
|
||||||
<span className="text-sm">Узел</span>
|
</button>
|
||||||
</button>
|
|
||||||
|
|
||||||
{/* Зум + */}
|
{/* Fit */}
|
||||||
<button
|
<button
|
||||||
onClick={handleZoomIn}
|
onClick={handleFit}
|
||||||
className="p-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
|
className="p-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
|
||||||
>
|
>
|
||||||
<FiZoomIn />
|
<FiMove />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{/* Зум - */}
|
{/* Экспорт */}
|
||||||
<button
|
<button
|
||||||
onClick={handleZoomOut}
|
onClick={onExport || exportData}
|
||||||
className="p-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
|
className="flex items-center gap-2 px-3 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
|
||||||
>
|
>
|
||||||
<FiZoomOut />
|
<FiDownload />
|
||||||
</button>
|
<span className="text-sm">Экспорт</span>
|
||||||
|
</button>
|
||||||
{/* Fit */}
|
|
||||||
<button
|
|
||||||
onClick={handleFit}
|
|
||||||
className="p-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
|
|
||||||
>
|
|
||||||
<FiMove />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{/* Экспорт */}
|
|
||||||
<button
|
|
||||||
onClick={onExport || exportData}
|
|
||||||
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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -0,0 +1,23 @@
|
|||||||
|
import React from "react";
|
||||||
|
import type { GraphData } from "../types";
|
||||||
|
|
||||||
|
interface GraphStatsProps {
|
||||||
|
data: GraphData;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const GraphStats: React.FC<GraphStatsProps> = ({ data }) => {
|
||||||
|
return (
|
||||||
|
<div className="flex gap-4 text-xs text-gray-400">
|
||||||
|
<span>
|
||||||
|
Сервисы: {data.nodes.filter((n) => n.type === "service").length}
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
Агенты: {data.nodes.filter((n) => n.type === "agent").length}
|
||||||
|
</span>
|
||||||
|
<div className="flex items-center gap-1.5">
|
||||||
|
<div className="w-2 h-2 bg-gray-500 rounded-sm"></div>
|
||||||
|
<span>Связи: {data.links.length}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -2,3 +2,4 @@ export { ForceGraph } from "./ForceGraph";
|
|||||||
export { GraphControls } from "./GraphControls";
|
export { GraphControls } from "./GraphControls";
|
||||||
export { GraphContextMenu } from "./GraphContextMenu";
|
export { GraphContextMenu } from "./GraphContextMenu";
|
||||||
export { GraphStatusBar } from "./GraphStatusBar";
|
export { GraphStatusBar } from "./GraphStatusBar";
|
||||||
|
export { GraphStats } from "./GraphStats";
|
||||||
|
|||||||
Reference in New Issue
Block a user