External/CoreControl
1
0
Fork 0
mirror of https://github.com/crocofied/CoreControl.git synced 2025-12-17 23:47:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Network Chart Styling Update

Browse Source
This commit is contained in:
headlessdev 2025-04-14 21:48:09 +02:00
parent 36beeb8a2c
commit e844712c29
1 changed files with 62 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
app/api/flowchart/route.ts
View File

@ -10,6 +10,9 @@ interface Node {
}; };
position: { x: number; y: number }; position: { x: number; y: number };
style: React.CSSProperties; style: React.CSSProperties;
draggable?: boolean;
selectable?: boolean;
zIndex?: number;
} }
interface Edge { interface Edge {
@ -38,10 +41,13 @@ interface Application {
const NODE_WIDTH = 220; const NODE_WIDTH = 220;
const NODE_HEIGHT = 60; const NODE_HEIGHT = 60;
const APP_NODE_WIDTH = 160;
const APP_NODE_HEIGHT = 40;
const HORIZONTAL_SPACING = 280; const HORIZONTAL_SPACING = 280;
const VERTICAL_SPACING = 80; const VERTICAL_SPACING = 60;
const START_Y = 120; const START_Y = 120;
const ROOT_NODE_WIDTH = 300; const ROOT_NODE_WIDTH = 300;
const CONTAINER_PADDING = 40;
export async function GET() { export async function GET() {
try { try {
@ -54,11 +60,12 @@ export async function GET() {
}) as Promise<Application[]>, }) as Promise<Application[]>,
]); ]);
// Root Node
const rootNode: Node = { const rootNode: Node = {
id: "root", id: "root",
type: "infrastructure", type: "infrastructure",
data: { label: "My Infrastructure" }, data: { label: "My Infrastructure" },
position: { x: 0, y: 20 }, position: { x: 0, y: 0 },
style: { style: {
background: "#ffffff", background: "#ffffff",
color: "#0f0f0f", color: "#0f0f0f",
@ -72,6 +79,7 @@ export async function GET() {
}, },
}; };
// Server Nodes
const serverNodes: Node[] = servers.map((server, index) => { const serverNodes: Node[] = servers.map((server, index) => {
const xPos = const xPos =
index * HORIZONTAL_SPACING - index * HORIZONTAL_SPACING -
@ -100,11 +108,12 @@ export async function GET() {
}; };
}); });
// Application Nodes
const appNodes: Node[] = []; const appNodes: Node[] = [];
servers.forEach((server) => { servers.forEach((server) => {
const serverX = const serverNode = serverNodes.find((n) => n.id === `server-${server.id}`);
serverNodes.find((n) => n.id === `server-${server.id}`)?.position.x || 0; const serverX = serverNode?.position.x || 0;
const serverY = START_Y; const xOffset = (NODE_WIDTH - APP_NODE_WIDTH) / 2;
applications applications
.filter((app) => app.serverId === server.id) .filter((app) => app.serverId === server.id)
@ -117,25 +126,26 @@ export async function GET() {
...app, ...app,
}, },
position: { position: {
x: serverX, x: serverX + xOffset,
y: serverY + NODE_HEIGHT + 40 + appIndex * VERTICAL_SPACING, y: START_Y + NODE_HEIGHT + 30 + appIndex * VERTICAL_SPACING,
}, },
style: { style: {
background: "#ffffff", background: "#f5f5f5",
color: "#0f0f0f", color: "#0f0f0f",
border: "2px solid #e6e4e1", border: "2px solid #e6e4e1",
borderRadius: "4px", borderRadius: "4px",
padding: "8px", padding: "6px",
width: NODE_WIDTH, width: APP_NODE_WIDTH,
height: NODE_HEIGHT, height: APP_NODE_HEIGHT,
fontSize: "0.9rem", fontSize: "0.8rem",
lineHeight: "1.2", lineHeight: "1.1",
whiteSpace: "pre-wrap", whiteSpace: "pre-wrap",
}, },
}); });
}); });
}); });
// Connections
const connections: Edge[] = [ const connections: Edge[] = [
...servers.map((server) => ({ ...servers.map((server) => ({
id: `conn-root-${server.id}`, id: `conn-root-${server.id}`,
@ -159,8 +169,46 @@ export async function GET() {
})), })),
]; ];
// Container Box
const allNodes = [rootNode, ...serverNodes, ...appNodes];
let minX = Infinity;
let maxX = -Infinity;
let minY = Infinity;
let maxY = -Infinity;
allNodes.forEach((node) => {
const width = parseInt(node.style.width?.toString() || "0", 10);
const height = parseInt(node.style.height?.toString() || "0", 10);
minX = Math.min(minX, node.position.x);
maxX = Math.max(maxX, node.position.x + width);
minY = Math.min(minY, node.position.y);
maxY = Math.max(maxY, node.position.y + height);
});
const containerNode: Node = {
id: 'container',
type: 'container',
data: { label: '' },
position: {
x: minX - CONTAINER_PADDING,
y: minY - CONTAINER_PADDING
},
style: {
width: maxX - minX + 2 * CONTAINER_PADDING,
height: maxY - minY + 2 * CONTAINER_PADDING,
background: 'transparent',
border: '2px dashed #e2e8f0',
borderRadius: '8px',
zIndex: 0,
},
draggable: false,
selectable: false,
zIndex: -1,
};
return NextResponse.json({ return NextResponse.json({
nodes: [rootNode, ...serverNodes, ...appNodes], nodes: [containerNode, ...allNodes],
edges: connections, edges: connections,
}); });
} catch (error: unknown) { } catch (error: unknown) {