mirror of
https://github.com/crocofied/CoreControl.git
synced 2025-12-29 16:14:43 +00:00
Network Flow Chart
This commit is contained in:
headlessdev
142
app/api/flowchart/route.ts
Normal file
142
app/api/flowchart/route.ts
Normal file
@@ -0,0 +1,142 @@
|
||||
import { NextResponse, NextRequest } from "next/server";
|
||||
import { PrismaClient } from "@/lib/generated/prisma";
|
||||
|
||||
const prisma = new PrismaClient();
|
||||
|
||||
const NODE_WIDTH = 220;
|
||||
const NODE_HEIGHT = 60;
|
||||
const HORIZONTAL_SPACING = 280;
|
||||
const VERTICAL_SPACING = 80;
|
||||
const START_Y = 120;
|
||||
const ROOT_NODE_WIDTH = 300;
|
||||
|
||||
export async function GET() {
|
||||
try {
|
||||
const [servers, applications] = await Promise.all([
|
||||
prisma.server.findMany({
|
||||
orderBy: { id: "asc" },
|
||||
}),
|
||||
prisma.application.findMany({
|
||||
orderBy: { serverId: "asc" },
|
||||
}),
|
||||
]);
|
||||
|
||||
const rootNode = {
|
||||
id: "root",
|
||||
type: "infrastructure",
|
||||
data: { label: "My Infrastructure" },
|
||||
position: { x: 0, y: 20 },
|
||||
style: {
|
||||
background: "#ffffff",
|
||||
color: "#0f0f0f",
|
||||
border: "2px solid #e6e4e1",
|
||||
borderRadius: "8px",
|
||||
padding: "16px",
|
||||
width: ROOT_NODE_WIDTH,
|
||||
height: NODE_HEIGHT,
|
||||
fontSize: "1.2rem",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
};
|
||||
|
||||
const serverNodes = servers.map((server, index) => {
|
||||
const xPos =
|
||||
index * HORIZONTAL_SPACING -
|
||||
((servers.length - 1) * HORIZONTAL_SPACING) / 2;
|
||||
|
||||
return {
|
||||
id: `server-${server.id}`,
|
||||
type: "server",
|
||||
data: {
|
||||
label: `${server.name}\n${server.ip}`,
|
||||
...server,
|
||||
},
|
||||
position: { x: xPos, y: START_Y },
|
||||
style: {
|
||||
background: "#ffffff",
|
||||
color: "#0f0f0f",
|
||||
border: "2px solid #e6e4e1",
|
||||
borderRadius: "4px",
|
||||
padding: "8px",
|
||||
width: NODE_WIDTH,
|
||||
height: NODE_HEIGHT,
|
||||
fontSize: "0.9rem",
|
||||
lineHeight: "1.2",
|
||||
whiteSpace: "pre-wrap",
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
const appNodes: any[] = [];
|
||||
servers.forEach((server) => {
|
||||
const serverX =
|
||||
serverNodes.find((n) => n.id === `server-${server.id}`)?.position.x ||
|
||||
0;
|
||||
const serverY = START_Y;
|
||||
|
||||
applications
|
||||
.filter((app) => app.serverId === server.id)
|
||||
.forEach((app, appIndex) => {
|
||||
appNodes.push({
|
||||
id: `app-${app.id}`,
|
||||
type: "application",
|
||||
data: {
|
||||
label: `${app.name}\n${app.localURL}`,
|
||||
...app,
|
||||
},
|
||||
position: {
|
||||
x: serverX,
|
||||
y: serverY + NODE_HEIGHT + 40 + appIndex * VERTICAL_SPACING,
|
||||
},
|
||||
style: {
|
||||
background: "#ffffff",
|
||||
color: "#0f0f0f",
|
||||
border: "2px solid #e6e4e1",
|
||||
borderRadius: "4px",
|
||||
padding: "8px",
|
||||
width: NODE_WIDTH,
|
||||
height: NODE_HEIGHT,
|
||||
fontSize: "0.9rem",
|
||||
lineHeight: "1.2",
|
||||
whiteSpace: "pre-wrap",
|
||||
},
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
const connections = [
|
||||
...servers.map((server) => ({
|
||||
id: `conn-root-${server.id}`,
|
||||
source: "root",
|
||||
target: `server-${server.id}`,
|
||||
type: "straight",
|
||||
style: {
|
||||
stroke: "#94a3b8",
|
||||
strokeWidth: 2,
|
||||
},
|
||||
})),
|
||||
...applications.map((app) => ({
|
||||
id: `conn-${app.serverId}-${app.id}`,
|
||||
source: `server-${app.serverId}`,
|
||||
target: `app-${app.id}`,
|
||||
type: "straight",
|
||||
style: {
|
||||
stroke: "#60a5fa",
|
||||
strokeWidth: 2,
|
||||
},
|
||||
})),
|
||||
];
|
||||
|
||||
return NextResponse.json({
|
||||
nodes: [rootNode, ...serverNodes, ...appNodes],
|
||||
edges: connections,
|
||||
});
|
||||
} catch (error: any) {
|
||||
return NextResponse.json(
|
||||
{
|
||||
error: `Error fetching flowchart: ${error.message}`,
|
||||
},
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
99
app/dashboard/network/Networks.tsx
Normal file
99
app/dashboard/network/Networks.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
import { AppSidebar } from "@/components/app-sidebar";
|
||||
import {
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
BreadcrumbLink,
|
||||
BreadcrumbList,
|
||||
BreadcrumbPage,
|
||||
BreadcrumbSeparator,
|
||||
} from "@/components/ui/breadcrumb";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import {
|
||||
SidebarInset,
|
||||
SidebarProvider,
|
||||
SidebarTrigger,
|
||||
} from "@/components/ui/sidebar";
|
||||
import { ReactFlow, Controls, Background } from "@xyflow/react";
|
||||
import "@xyflow/react/dist/style.css";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export default function Dashboard() {
|
||||
const [nodes, setNodes] = useState<any[]>([]);
|
||||
const [edges, setEdges] = useState<any[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchFlowData = async () => {
|
||||
try {
|
||||
const response = await fetch("/api/flowchart");
|
||||
const data = await response.json();
|
||||
|
||||
setNodes(data.nodes);
|
||||
setEdges(data.edges);
|
||||
} catch (error) {
|
||||
console.error("Error loading flowchart:", error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchFlowData();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<SidebarProvider>
|
||||
<AppSidebar />
|
||||
<SidebarInset className="flex flex-col h-screen">
|
||||
<header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
|
||||
<div className="flex items-center gap-2 px-4">
|
||||
<SidebarTrigger className="-ml-1 dark:text-white" />
|
||||
<Separator
|
||||
orientation="vertical"
|
||||
className="mr-2 h-4 dark:bg-slate-700"
|
||||
/>
|
||||
<Breadcrumb>
|
||||
<BreadcrumbList>
|
||||
<BreadcrumbItem className="hidden md:block">
|
||||
<BreadcrumbPage className="dark:text-slate-300">
|
||||
/
|
||||
</BreadcrumbPage>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbSeparator className="hidden md:block dark:text-slate-500" />
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbPage className="dark:text-slate-300">
|
||||
My Infrastructure
|
||||
</BreadcrumbPage>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbSeparator className="hidden md:block dark:text-slate-500" />
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbPage className="dark:text-slate-300">
|
||||
Network
|
||||
</BreadcrumbPage>
|
||||
</BreadcrumbItem>
|
||||
</BreadcrumbList>
|
||||
</Breadcrumb>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="flex-1 pl-4 pr-4">
|
||||
<div
|
||||
style={{ height: "100%" }}
|
||||
className="dark:bg-black rounded-lg"
|
||||
>
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
fitView
|
||||
fitViewOptions={{ padding: 0.2 }}
|
||||
connectionLineType="straight"
|
||||
className="dark:[&_.react-flow__edge-path]:stroke-slate-500"
|
||||
>
|
||||
<Background
|
||||
color="#64748b"
|
||||
gap={40}
|
||||
className="dark:opacity-20"
|
||||
/>
|
||||
</ReactFlow>
|
||||
</div>
|
||||
</div>
|
||||
</SidebarInset>
|
||||
</SidebarProvider>
|
||||
);
|
||||
}
|
||||
59
app/dashboard/network/page.tsx
Normal file
59
app/dashboard/network/page.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import Cookies from "js-cookie";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Networks from "./Networks"
|
||||
import axios from "axios";
|
||||
|
||||
export default function DashboardPage() {
|
||||
const router = useRouter();
|
||||
const [isAuthChecked, setIsAuthChecked] = useState(false);
|
||||
const [isValid, setIsValid] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const token = Cookies.get("token");
|
||||
if (!token) {
|
||||
router.push("/");
|
||||
} else {
|
||||
const checkToken = async () => {
|
||||
try {
|
||||
const response = await axios.post("/api/auth/validate", {
|
||||
token: token,
|
||||
});
|
||||
|
||||
if (response.status === 200) {
|
||||
setIsValid(true);
|
||||
}
|
||||
} catch (error: any) {
|
||||
Cookies.remove("token");
|
||||
router.push("/");
|
||||
}
|
||||
}
|
||||
checkToken();
|
||||
}
|
||||
setIsAuthChecked(true);
|
||||
}, [router]);
|
||||
|
||||
if (!isAuthChecked) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-screen">
|
||||
<div className='inline-block' role='status' aria-label='loading'>
|
||||
<svg className='w-6 h-6 stroke-white animate-spin ' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
|
||||
<g clip-path='url(#clip0_9023_61563)'>
|
||||
<path d='M14.6437 2.05426C11.9803 1.2966 9.01686 1.64245 6.50315 3.25548C1.85499 6.23817 0.504864 12.4242 3.48756 17.0724C6.47025 21.7205 12.6563 23.0706 17.3044 20.088C20.4971 18.0393 22.1338 14.4793 21.8792 10.9444' stroke='stroke-current' stroke-width='1.4' stroke-linecap='round' class='my-path'></path>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id='clip0_9023_61563'>
|
||||
<rect width='24' height='24' fill='white'></rect>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
<span className='sr-only'>Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return isValid ? <Networks /> : null;
|
||||
}
|
||||
Reference in New Issue
Block a user