nikita
@@ -10,10 +10,11 @@ import {
|
||||
FaChevronDown,
|
||||
FaProjectDiagram,
|
||||
FaTrash,
|
||||
FaArrowLeft,
|
||||
} from "react-icons/fa";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useAgentStore } from "@/app/providers/layout/store/agent.store";
|
||||
import { useAuthStore } from "@/modules/auth/store/useAuthStore";
|
||||
import { Graph, type GraphData } from "@/modules/graph";
|
||||
|
||||
interface SidebarProps {
|
||||
isOpen?: boolean;
|
||||
@@ -24,13 +25,13 @@ export const Sidebar: React.FC<SidebarProps> = ({
|
||||
isOpen = true,
|
||||
onToggle,
|
||||
}) => {
|
||||
const navigate = useNavigate();
|
||||
const { agents, isLoading, error, fetchAgents, removeAgent } =
|
||||
useAgentStore();
|
||||
const { token } = useAuthStore();
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [showTokenModal, setShowTokenModal] = useState(false);
|
||||
const [showGraphs, setShowGraphs] = useState(false);
|
||||
const [expandedAgents, setExpandedAgents] = useState<Set<string>>(
|
||||
new Set(agents.map((a) => a.name)),
|
||||
);
|
||||
@@ -54,6 +55,40 @@ export const Sidebar: React.FC<SidebarProps> = ({
|
||||
);
|
||||
}, [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 = () => {
|
||||
if (token) {
|
||||
navigator.clipboard.writeText(token);
|
||||
@@ -87,10 +122,12 @@ export const Sidebar: React.FC<SidebarProps> = ({
|
||||
/>
|
||||
|
||||
<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"
|
||||
}`}
|
||||
style={{
|
||||
width: showGraphs ? "500px" : "288px",
|
||||
height: "100vh",
|
||||
backgroundColor: "var(--card-bg)",
|
||||
borderRight: "1px solid var(--border)",
|
||||
}}
|
||||
@@ -127,220 +164,237 @@ export const Sidebar: React.FC<SidebarProps> = ({
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Поиск */}
|
||||
<div className="px-3 py-2">
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
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={{
|
||||
backgroundColor: "var(--input-bg)",
|
||||
borderColor: "var(--border)",
|
||||
color: "var(--text-primary)",
|
||||
}}
|
||||
onFocus={(e) => {
|
||||
e.currentTarget.style.borderColor = "var(--border-focus)";
|
||||
e.currentTarget.style.boxShadow = `0 0 0 3px var(--border-focus)30`;
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
e.currentTarget.style.borderColor = "var(--border)";
|
||||
e.currentTarget.style.boxShadow = "none";
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Список агентов */}
|
||||
<div className="flex-1 overflow-y-auto px-2 py-2">
|
||||
{isLoading && agents.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-12">
|
||||
<FaSpinner
|
||||
className="animate-spin mb-3"
|
||||
style={{ color: "var(--accent)", fontSize: "20px" }}
|
||||
{/* Контент — либо список агентов, либо графы */}
|
||||
{showGraphs ? (
|
||||
<div className="flex-1 overflow-hidden relative">
|
||||
<Graph initialData={graphData} />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Поиск */}
|
||||
<div className="px-3 py-2">
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
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={{
|
||||
backgroundColor: "var(--input-bg)",
|
||||
borderColor: "var(--border)",
|
||||
color: "var(--text-primary)",
|
||||
}}
|
||||
onFocus={(e) => {
|
||||
e.currentTarget.style.borderColor = "var(--border-focus)";
|
||||
e.currentTarget.style.boxShadow = `0 0 0 3px var(--border-focus)30`;
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
e.currentTarget.style.borderColor = "var(--border)";
|
||||
e.currentTarget.style.boxShadow = "none";
|
||||
}}
|
||||
/>
|
||||
<p className="text-xs" style={{ color: "var(--text-secondary)" }}>
|
||||
Загрузка агентов...
|
||||
</p>
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="text-center py-8">
|
||||
<div
|
||||
className="text-xs mb-2"
|
||||
style={{ color: "var(--error-text)" }}
|
||||
>
|
||||
{error}
|
||||
</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)",
|
||||
}}
|
||||
|
||||
{/* Список агентов */}
|
||||
<div className="flex-1 overflow-y-auto px-2 py-2">
|
||||
{isLoading && agents.length === 0 ? (
|
||||
<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)" }}
|
||||
>
|
||||
{/* 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>
|
||||
)}
|
||||
Загрузка агентов...
|
||||
</p>
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="text-center py-8">
|
||||
<div
|
||||
className="text-xs mb-2"
|
||||
style={{ color: "var(--error-text)" }}
|
||||
>
|
||||
{error}
|
||||
</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>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Footer с кнопками */}
|
||||
<div
|
||||
@@ -350,25 +404,46 @@ export const Sidebar: React.FC<SidebarProps> = ({
|
||||
backgroundColor: "var(--card-bg)",
|
||||
}}
|
||||
>
|
||||
{/* Кнопка Графы */}
|
||||
<button
|
||||
onClick={() => navigate("/graphs")}
|
||||
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>
|
||||
{showGraphs ? (
|
||||
/* Кнопка назад к агентам */
|
||||
<button
|
||||
onClick={() => setShowGraphs(false)}
|
||||
className="flex-1 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)";
|
||||
}}
|
||||
>
|
||||
<FaArrowLeft size={10} />К агентам
|
||||
</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
|
||||
onClick={() => setShowTokenModal(true)}
|
||||
className="flex-1 flex items-center justify-center gap-1.5 px-2 py-1.5 text-xs rounded transition-colors"
|
||||
|
||||
Reference in New Issue
Block a user