Skip to content

Crossplane Resources Frontend Plugin#

npm latest version

Overview#

The Crossplane Resources frontend plugin enhances your Backstage instance with comprehensive visualization and management capabilities for Crossplane resources. It provides an intuitive interface for viewing and managing Crossplane claims, composite resources (XRs), and managed resources.

Features#

Resource Overview Card#

  • Quick status overview of Crossplane resources
  • Essential metadata display
  • Direct links to detailed views

Resource Table View#

  • Comprehensive list of all related Crossplane resources
  • Filtering and sorting capabilities
  • Quick access to YAML and events for each resource
  • Copy to clipboard and download YAML functionality

Resource Graph View#

  • Visual representation of resource relationships
  • Interactive graph navigation
  • Support for both v1 (claims) and v2 (XR) resources
  • Detailed resource information on node selection

Event Monitoring#

  • Real-time event tracking for resources
  • Chronological event history
  • Event filtering and sorting

Permission Integration#

  • Seamless integration with Backstage's permission framework
  • Granular access control for different features
  • Conditional rendering based on user permissions

Components#

The plugin provides several key components:

  • CrossplaneResourcesTableSelector: Main resource listing component
  • CrossplaneOverviewCardSelector: Summary card for quick insights
  • CrossplaneResourceGraphSelector: Interactive resource relationship graph

  • Permission-aware wrapper components:

    • IfCrossplaneOverviewAvailable
    • IfCrossplaneResourceGraphAvailable
    • IfCrossplaneResourcesListAvailable

Technical Details#

Dependencies#

  • Requires the Kubernetes Ingestor plugin for resource discovery
  • Optional integration with the Crossplane Permissions backend plugin
  • Compatible with Backstage's latest permission framework

Data Flow#

  1. Resources are discovered via the Kubernetes Ingestor
  2. Annotations are used to associate resources with components
  3. Permission checks are performed (if enabled)
  4. UI components render based on available data and permissions

Performance Considerations#

  • Efficient resource graph rendering
  • Optimized YAML handling
  • Responsive UI design for large resource sets