feat: graph-page

frontend/src/pages/graphs.page.tsx

@@ -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>
+  );
+};