Resource relationship and dependency graph

[DaviReisVieira]

Summary

Visualize relationships between AWS resources — e.g., Lambda → SQS triggers, EC2 → Security Groups, ECS → CloudWatch Logs — as an interactive graph.

Motivation

Understanding how resources connect is crucial for debugging. When a Lambda function fails, knowing it triggers from SQS and logs to CloudWatch helps developers trace the full flow. Currently each service is viewed in isolation.

Scope

In scope

• Relationship discovery: Automatically detect relationships from resource configurations:
  • Lambda → Event source mappings (SQS, Kinesis, DynamoDB Streams)
  • Lambda → Log groups (/aws/lambda/{function_name} convention)
  • SQS → Dead-letter queues (redrive policy)
  • SNS → Subscription targets (SQS, Lambda)
  • EventBridge → Rule targets (Lambda, SQS, SNS)
  • EC2 → Security groups, VPC, subnet
  • ECS → Task definitions, CloudWatch log groups
  • IAM Roles → Lambda functions, ECS task roles
• Graph view: Interactive node-graph visualization (nodes = resources, edges = relationships)
• Navigation: Click a node to open resource detail
• Filter: Toggle relationship types, filter by service
• Layout: Auto-layout with drag-to-reposition

Out of scope

• Real-time graph updates
• CloudFormation stack dependency parsing
• Cross-endpoint relationships
• Export graph as image

Implementation plan

Backend (backend/routes/graph.py — new file)

• GET /api/graph — Build and return the full resource relationship graph
• Implementation:
  1. Fetch all resources from SERVICE_REGISTRY (reuse stats endpoint data where cached)
  2. For services with custom routes, fetch relationship data (Lambda event sources, SQS redrive policies, SNS subscriptions, EC2 security groups, etc.)
  3. Build nodes and edges, return as JSON: {"nodes": [...], "edges": [...]}
• Cache for 10 seconds

Frontend (ui/src/pages/Graph.tsx — new file)

• Use reactflow library (MIT license, React-native, handles layout)
• Add "Resource Graph" to sidebar navigation in Layout.tsx
• Graph canvas with nodes (resource cards with icon + name) and edges (arrows with relationship label)
• Click node → navigate to resource detail
• Sidebar panel: relationship type toggles, service filter
• Auto-layout with dagre or elk.js
• Zoom and pan controls
• Add /graph route in App.tsx

Testing requirements

• Backend tests: Graph endpoint returns valid nodes/edges, Lambda→SQS relationships detected, SQS→DLQ relationships detected, EC2→SecurityGroup relationships, empty graph when no resources
• Frontend tests: Graph rendering with mock data, node click navigation, filter toggling
• Integration: Create Lambda with SQS trigger → fetch graph → verify Lambda→SQS edge exists
• populate_test_data.py: Ensure test data includes cross-service relationships

Acceptance criteria

• Graph page accessible from sidebar navigation
• Resources displayed as nodes with service icons
• Relationships shown as directed edges with labels
• Can click a node to navigate to resource detail
• Can filter by service or relationship type
• Graph auto-layouts without overlapping nodes
• Pan and zoom work smoothly
• Backend correctly detects Lambda→SQS, SQS→DLQ, EC2→SG relationships
• Backend tests cover relationship detection logic
• Graceful empty state when no relationships exist