updated network diagrams

zuplo · Dec 27, 2024 · 4923f95 · 4923f95
1 parent 73c311b
commit 4923f95
Show file tree

Hide file tree

Showing 5 changed files with 234 additions and 188 deletions.
diff --git a/src/diagrams/CustomerIngressWithManagedDedicated.tsx b/src/diagrams/CustomerIngressWithManagedDedicated.tsx
@@ -1,119 +1,59 @@
 import { Position } from "@xyflow/react";
+import React from "react";
 import Diagram, { DiagramNode, Edge } from "./common/Diagram.js";
+import { createIngressEdgressEdge } from "./edges.js";
+import {
+  createBackend,
+  createClient,
+  createCustomNode,
+  createVpcGroupNode,
+  createZuploApiNode,
+} from "./nodes.js";
 
-import React from "react";
 type _react = typeof React;
 
+const clientNode = createClient({ position: { x: 10, y: 90 } });
+const backendNode = createBackend({
+  position: { x: 200, y: 150 },
+  ingress: Position.Right,
+});
+const zuploApiNode = createZuploApiNode({
+  position: { x: 425, y: 90 },
+  ingress: Position.Left,
+  egress: Position.Bottom,
+});
+const wafNode = createCustomNode({
+  position: { x: 210, y: 90 },
+  label: "WAF",
+  ingress: Position.Left,
+  egress: Position.Right,
+});
+const zuploVpcNode = createVpcGroupNode({
+  position: { x: 400, y: 40 },
+  label: "Zuplo VPC",
+  width: 180,
+  height: 100,
+});
+const customerVpcNode = createVpcGroupNode({
+  position: { x: 150, y: 40 },
+  label: "Customer VPC",
+  width: 180,
+  height: 160,
+});
+
 const initialNodes: DiagramNode[] = [
-  {
-    id: "end-user",
-    type: "custom",
-    position: { x: 10, y: 90 },
-    data: {
-      label: "End User",
-      handles: [
-        {
-          id: "egress",
-          type: "source",
-          position: Position.Right,
-        },
-      ],
-    },
-  },
-  {
-    id: "waf",
-    type: "custom",
-    position: { x: 210, y: 90 },
-    data: {
-      label: "WAF",
-      handles: [
-        {
-          id: "ingress",
-          type: "target",
-          position: Position.Left,
-        },
-        {
-          id: "egress",
-          type: "source",
-          position: Position.Right,
-        },
-      ],
-    },
-  },
-  {
-    id: "backend",
-    type: "custom",
-    position: { x: 200, y: 150 },
-    data: {
-      label: "Backend",
-      handles: [
-        {
-          id: "ingress",
-          type: "target",
-          position: Position.Right,
-        },
-      ],
-    },
-  },
-  {
-    id: "zuplo-api",
-    type: "zuplo",
-    position: { x: 425, y: 90 },
-    style: { zIndex: 20 },
-    data: {
-      label: "Hello",
-      handles: [
-        {
-          id: "ingress",
-          type: "target",
-          position: Position.Left,
-        },
-        {
-          id: "egress",
-          type: "source",
-          position: Position.Bottom,
-        },
-      ],
-    },
-  },
-  {
-    id: "4",
-    data: { label: "Zuplo VPC" },
-    position: { x: 400, y: 50 },
-    style: { width: 180, height: 100, zIndex: -1 },
-    type: "labeled-group",
-  },
-  {
-    id: "5",
-    data: { label: "Customer VPC" },
-    position: { x: 150, y: 50 },
-    style: { width: 180, height: 150, zIndex: -1 },
-    type: "labeled-group",
-  },
+  clientNode,
+  wafNode,
+  backendNode,
+  zuploApiNode,
+  zuploVpcNode,
+  customerVpcNode,
 ];
 
 const initialEdges: Edge[] = [
-  {
-    id: "user-to-waf",
-    source: "end-user",
-    target: "waf",
-    targetHandle: "ingress",
-    sourceHandle: "egress",
-  },
-  {
-    id: "zuplo-to-backend",
-    source: "zuplo-api",
-    target: "backend",
-    targetHandle: "ingress",
-    sourceHandle: "egress",
-  },
-  {
-    id: "waf-to-zuplo",
-    source: "waf",
-    target: "zuplo-api",
-    targetHandle: "ingress",
-    sourceHandle: "egress",
-  },
+  createIngressEdgressEdge({ egress: clientNode, ingress: wafNode }),
+  createIngressEdgressEdge({ egress: wafNode, ingress: zuploApiNode }),
+  createIngressEdgressEdge({ egress: zuploApiNode, ingress: backendNode }),
 ];
 
 export default function ZuploIngressWithManagedDedicated() {

diff --git a/src/diagrams/ZuploIngressWithManagedDedicated.tsx b/src/diagrams/ZuploIngressWithManagedDedicated.tsx
@@ -1,92 +1,50 @@
-import { Position } from "@xyflow/react";
 import Diagram, { DiagramNode, Edge } from "./common/Diagram.js";
 
+import { Position } from "@xyflow/react";
 import React from "react";
+import { createIngressEdgressEdge } from "./edges.js";
+import {
+  createBackend,
+  createClient,
+  createVpcGroupNode,
+  createZuploApiNode,
+} from "./nodes.js";
 type _react = typeof React;
 
+const clientNode = createClient({ position: { x: 10, y: 90 } });
+const backendNode = createBackend({
+  position: { x: 450, y: 90 },
+  ingress: Position.Left,
+});
+const zuploApiNode = createZuploApiNode({
+  position: { x: 170, y: 90 },
+  ingress: Position.Left,
+  egress: Position.Right,
+});
+const zuploVpcNode = createVpcGroupNode({
+  position: { x: 150, y: 40 },
+  label: "Zuplo VPC",
+  width: 180,
+  height: 100,
+});
+const customerVpcNode = createVpcGroupNode({
+  position: { x: 400, y: 40 },
+  label: "Customer VPC",
+  width: 180,
+  height: 100,
+});
+
 const initialNodes: DiagramNode[] = [
-  {
-    id: "end-user",
-    type: "custom",
-    position: { x: 10, y: 90 },
-    data: {
-      label: "End User",
-      handles: [
-        {
-          id: "egress",
-          type: "source",
-          position: Position.Right,
-        },
-      ],
-    },
-  },
-  {
-    id: "backend",
-    type: "custom",
-    position: { x: 450, y: 90 },
-    data: {
-      label: "Backend",
-      handles: [
-        {
-          id: "ingress",
-          type: "target",
-          position: Position.Left,
-        },
-      ],
-    },
-  },
-  {
-    id: "zuplo-api",
-    type: "zuplo",
-    position: { x: 170, y: 90 },
-    style: { zIndex: 20 },
-    data: {
-      label: "Hello",
-      handles: [
-        {
-          id: "ingress",
-          type: "target",
-          position: Position.Left,
-        },
-        {
-          id: "egress",
-          type: "source",
-          position: Position.Right,
-        },
-      ],
-    },
-  },
-  {
-    id: "4",
-    data: { label: "Zuplo VPC" },
-    position: { x: 150, y: 50 },
-    style: { width: 180, height: 100, zIndex: -1 },
-    type: "labeled-group",
-  },
-  {
-    id: "5",
-    data: { label: "Customer VPC" },
-    position: { x: 400, y: 50 },
-    style: { width: 180, height: 100, zIndex: -1 },
-    type: "labeled-group",
-  },
+  clientNode,
+  backendNode,
+  zuploApiNode,
+  zuploVpcNode,
+  customerVpcNode,
 ];
 
 const initialEdges: Edge[] = [
-  {
-    id: "user-to-zuplo",
-    source: "end-user",
-    target: "zuplo-api",
-    targetHandle: "ingress",
-    sourceHandle: "egress",
-  },
-  {
-    id: "zuplo-to-backend",
-    source: "zuplo-api",
-    target: "backend",
-    targetHandle: "ingress",
-    sourceHandle: "egress",
-  },
+  createIngressEdgressEdge({ egress: clientNode, ingress: zuploApiNode }),
+  createIngressEdgressEdge({ egress: zuploApiNode, ingress: backendNode }),
 ];
 
 export default function ZuploIngressWithManagedDedicated() {

diff --git a/src/diagrams/common/Diagram.tsx b/src/diagrams/common/Diagram.tsx
@@ -42,6 +42,7 @@ const defaultEdgeOptions = {
     type: MarkerType.ArrowClosed,
     color: "#b1b1b7",
   },
+  reconnectable: false,
   pathOptions: { offset: 5 },
 };
 
@@ -85,7 +86,7 @@ function DiagramInner({
             borderWidth: "1px",
           }}
         >
-          <Controls showInteractive={true} />
+          <Controls showInteractive={false} />
           <Background color="#ccc" variant={BackgroundVariant.Dots} gap={10} />
         </ReactFlow>
       </div>

diff --git a/src/diagrams/edges.ts b/src/diagrams/edges.ts
@@ -0,0 +1,15 @@
+import { DiagramNode, Edge } from "./common/Diagram.js";
+
+export const createIngressEdgressEdge = ({
+  egress,
+  ingress,
+}: {
+  egress: DiagramNode;
+  ingress: DiagramNode;
+}): Edge => ({
+  id: `edge-${egress.id}-${ingress.id}`,
+  source: egress.id,
+  target: ingress.id,
+  targetHandle: "ingress",
+  sourceHandle: "egress",
+});