feat: Add resource tree visualization for module resources

[Harsh-Daga]

This PR implements a hierarchical tree visualization for Kubernetes module resources.

Changes

New Features

• Tree View Toggle: Added "Tree View" button alongside existing "List View" button
• Hierarchical Graph Layout: Uses React Flow with Dagre layout algorithm to display resources in a tree structure
• Interactive Resource Nodes:
  • Click any resource to view detailed information in a drawer
  • Click pods to view pod-specific details
  • Color-coded borders (green=healthy, yellow=progressing, red=unhealthy)
  • Hover effects for better interactivity
• Resource Filtering: Filter view by resource kind (Deployment, Service, Pod, etc.)
• Legend/Help: Quick reference for status colors and usage instructions
• Complete Feature Parity: All list view features work in tree view:
  • View Manifest (with managed fields toggle)
  • Restart resources
  • Delete resources (with type-to-confirm safety)
  • Full resource details using existing component views

Technical Implementation

• Frontend-only changes - No backend modifications required
• React Flow library for graph visualization
• Dagre algorithm for hierarchical layout
• On-demand data fetching - Reuses existing API patterns from list view
• Optimized rendering - Prevents drawer flicker during auto-refresh cycles
• Immutable data handling - No mutation of resource objects

Files Modified

• cyclops-ui/package.json - Added React Flow dependencies
• cyclops-ui/src/components/k8s-resources/ResourceTree/ - New tree view component
  • ResourceTree.tsx - Main tree component
  • ResourceTree.css - Styling for tree and nodes
• cyclops-ui/src/components/shared/ModuleResourceDetails/ModuleResourceDetails.tsx - Added view mode toggle

Screenshots

Notes

• Backward Compatibility: List view remains the default view, tree view is opt-in
• No Breaking Changes: All existing functionality preserved
• Dependencies: Requires reactflow, dagre, and @types/dagre packages