diff --git a/backend/app/api/endpoints/network_diagrams.py b/backend/app/api/endpoints/network_diagrams.py index 93c9c29e..ff5ebfcd 100644 --- a/backend/app/api/endpoints/network_diagrams.py +++ b/backend/app/api/endpoints/network_diagrams.py @@ -130,6 +130,11 @@ async def create_diagram( db: Annotated[AsyncSession, Depends(get_db)], current_user: Annotated[User, Depends(get_current_active_user)], ) -> NetworkDiagramResponse: + if current_user.team_id is None: + raise HTTPException( + status_code=422, + detail="Network Diagrams require a team account. Assign your account to a team first.", + ) diagram = NetworkDiagram( team_id=current_user.team_id, name=data.name, diff --git a/backend/app/schemas/network_diagram.py b/backend/app/schemas/network_diagram.py index 3adc6360..da69c3fc 100644 --- a/backend/app/schemas/network_diagram.py +++ b/backend/app/schemas/network_diagram.py @@ -38,6 +38,7 @@ class DiagramEdge(BaseModel): connectionType: str = "ethernet" speed: str | None = None notes: str | None = None + routing: str | None = None class NetworkDiagramCreate(BaseModel): diff --git a/frontend/src/components/network/edges/ConnectionEdge.tsx b/frontend/src/components/network/edges/ConnectionEdge.tsx index 2d79b120..e6c30b6f 100644 --- a/frontend/src/components/network/edges/ConnectionEdge.tsx +++ b/frontend/src/components/network/edges/ConnectionEdge.tsx @@ -1,8 +1,9 @@ import { memo } from 'react' -import { BaseEdge, EdgeLabelRenderer, getStraightPath, type EdgeProps } from '@xyflow/react' +import { BaseEdge, EdgeLabelRenderer, getStraightPath, getBezierPath, getSmoothStepPath, type EdgeProps } from '@xyflow/react' interface ConnectionEdgeData { connectionType?: string + routing?: string | null speed?: string | null notes?: string | null [key: string]: unknown @@ -19,17 +20,26 @@ const CONNECTION_STYLES: Record diff --git a/frontend/src/components/network/panels/PropertiesPanel.tsx b/frontend/src/components/network/panels/PropertiesPanel.tsx index 12ac1f8d..a03de5ee 100644 --- a/frontend/src/components/network/panels/PropertiesPanel.tsx +++ b/frontend/src/components/network/panels/PropertiesPanel.tsx @@ -1,5 +1,5 @@ import { useCallback } from 'react' -import { Trash2 } from 'lucide-react' +import { Trash2, Minus, Spline, GitBranch } from 'lucide-react' import { cn } from '@/lib/utils' import type { DeviceProperties, DiagramEdge } from '@/types' import type { Node, Edge } from '@xyflow/react' @@ -139,6 +139,35 @@ export function PropertiesPanel({ mono /> +
+ Line Style +
+ {([ + { value: null, icon: Minus, label: 'Straight' }, + { value: 'curved', icon: Spline, label: 'Curved' }, + { value: 'step', icon: GitBranch, label: 'Step' }, + ] as const).map(({ value, icon: Icon, label }) => { + const routing = (edgeData.routing as string | null | undefined) ?? null + const active = routing === value + return ( + + ) + })} +
+
Show Traffic