Crossview - Crossplane Dashboard

A modern React-based dashboard for managing and monitoring Crossplane resources in Kubernetes. Visualize, search, and manage your infrastructure-as-code with ease.

• Real-Time Resource Watching: Monitor any Kubernetes resource in real-time with event-driven updates using Kubernetes Informers
• Multi-Cluster Support: Manage and switch between multiple Kubernetes contexts seamlessly
• Resource Visualization: Browse and visualize Crossplane resources (providers, XRDs, compositions, claims, etc.)
• Resource Details: View comprehensive resource information including status conditions, metadata, events, and relationships
• Modern UI: Built with React and Chakra UI with dark mode support
• High Performance: Backend built with Go and Gin framework for optimal performance
• WebSocket Support: Real-time updates via WebSocket connections
• SSO Integration: Support for OIDC and SAML authentication

• Node.js 20+ (for frontend development)
• Go 1.24+ (for backend server)
• PostgreSQL database (port 8920 by default, or set via DB_PORT env var)
• Kubernetes config file at ~/.kube/config (or set KUBECONFIG env var)

npm install

Copy the example config file and update with your settings:

cp config/config.yaml.example config/config.yaml

Edit config/config.yaml with your database credentials:

• Database port: 8920 (or your port)
• Database password: password (or your password)

Alternatively, use environment variables (they take precedence):

export DB_HOST=localhost
export DB_PORT=8920
export DB_NAME=crossview
export DB_USER=postgres
export DB_PASSWORD=password

Run Frontend and Backend separately:

Terminal 1 - Frontend:

npm install
npm run dev

Terminal 2 - Backend (Go server):

cd crossview-go-server
go run main.go app:serve

The app will be available at http://localhost:5173 (frontend proxies /api requests to backend at http://localhost:3001)

Build for production:

npm run build

This creates a dist/ folder with the compiled frontend.

To run in production mode:

1. Build the frontend:

npm run build

2. Run the Go server (it will serve the frontend from the dist/ folder):

cd crossview-go-server
go run main.go app:serve

The app will be available at http://localhost:3001 (both frontend and API)

The backend API is built with Go using the Gin framework and runs on port 3001. It provides the following endpoints:

• GET /api/health - Health check and connection status
• GET /api/contexts - List available Kubernetes contexts
• GET /api/contexts/current - Get current Kubernetes context
• POST /api/contexts/current - Set Kubernetes context
• GET /api/resources?apiVersion=&kind=&namespace=&context= - List resources
• GET /api/resource?apiVersion=&kind=&name=&namespace=&context= - Get single resource
• GET /api/events?kind=&name=&namespace=&context= - Get resource events
• GET /api/managed?context= - List managed resources
• GET /api/watch - WebSocket endpoint for real-time resource watching
• POST /api/auth/login - User login
• POST /api/auth/logout - User logout
• GET /api/auth/check - Check authentication status

The backend uses the Go Kubernetes client with Informers for efficient, event-driven resource monitoring:

When running in a Kubernetes pod:

• Automatically uses service account token (no config file needed)
• Accesses the same cluster the pod is running in
• Uses /var/run/secrets/kubernetes.io/serviceaccount/

When running locally:

• ~/.kube/config (default)
• KUBECONFIG environment variable

See Kubernetes Deployment Guide for deployment examples.

Crossview can be deployed using Helm, which simplifies Kubernetes deployment and management.

helm repo add crossview https://corpobit.github.io/crossview
helm repo update

helm install crossview crossview/crossview \
  --namespace crossview \
  --create-namespace \
  --set secrets.dbPassword=your-db-password \
  --set secrets.sessionSecret=$(openssl rand -base64 32)

For more details, see:

• Helm Deployment Guide - Complete Helm deployment guide
• Helm Chart Reference - All available chart options

docker build -t crossview:latest .

Environment variables take precedence over config files:

docker run -p 3001:3001 \
  -e DB_HOST=host.docker.internal \
  -e DB_PORT=8920 \
  -e DB_NAME=crossview \
  -e DB_USER=postgres \
  -e DB_PASSWORD=password \
  -e KUBECONFIG=/app/.kube/config \
  -e SESSION_SECRET=your-secret-key-here \
  -v ~/.kube/config:/app/.kube/config:ro \
  crossview:latest

Mount your config file as a volume:

docker run -p 3001:3001 \
  -v $(pwd)/config/config.yaml:/app/config/config.yaml:ro \
  -e KUBECONFIG=/app/.kube/config \
  -v ~/.kube/config:/app/.kube/config:ro \
  crossview:latest

Create a docker-compose.yml:

services:
  crossview:
    build: .
    ports:
      - "3001:3001"
    environment:
      - DB_HOST=postgres
      - DB_PORT=5432
      - DB_NAME=crossview
      - DB_USER=postgres
      - DB_PASSWORD=password
      - KUBECONFIG=/app/.kube/config
      - SESSION_SECRET=your-secret-key-here
    volumes:
      - ./config/config.yaml:/app/config/config.yaml:ro
      - ~/.kube/config:/app/.kube/config:ro
    depends_on:
      - postgres

  postgres:
    image: postgres:latest
    environment:
      - POSTGRES_DB=crossview
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=password
    ports:
      - "8920:5432"
    volumes:
      - postgres_data:/var/lib/postgresql

volumes:
  postgres_data:

Then run:

docker-compose up

The application loads configuration in this order (highest to lowest priority):

1. Environment variables (e.g., DB_HOST, DB_PORT, DB_PASSWORD)
2. Config file (config/config.yaml - mounted or included in image)
3. Default values (fallback)

• DB_HOST - Database host (use host.docker.internal for local DB, or service name in Docker Compose)
• DB_PORT - Database port (default: 5432)
• DB_NAME - Database name
• DB_USER - Database user
• DB_PASSWORD - Database password
• KUBECONFIG or KUBE_CONFIG_PATH - Path to Kubernetes config file inside container
• SESSION_SECRET - Secret for session encryption (optional, has default)

• Getting Started Guide - Quick start and first steps
• Features & Capabilities - What Crossview can do

• Helm Deployment - Deploy using Helm (recommended)
• Kubernetes Deployment - Deploy using Kubernetes manifests
• Helm Chart Reference - Complete Helm chart options

• Configuration Guide - Configure Crossview for your environment
• SSO Setup - Configure Single Sign-On (OIDC/SAML)
• SSO Protocols - Understanding OIDC and SAML

• Troubleshooting - Common issues and solutions
• Kubernetes Manifests - Reference for Kubernetes manifests
• Keycloak Setup - Keycloak integration guide

• React - UI library
• Vite - Build tool and dev server
• Chakra UI - Component library
• React Router - Routing
• WebSocket - Real-time updates

• Go - Programming language
• Gin - Web framework
• Kubernetes client-go - Kubernetes API client
• Kubernetes Informers - Event-driven resource watching
• PostgreSQL - Database (via GORM)

Contributions are welcome! Here are some guidelines to help you get started:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Make your changes
4. Commit your changes (git commit -m 'Add some amazing feature')
5. Push to the branch (git push origin feature/amazing-feature)
6. Open a Pull Request

• Follow the existing code style and architecture patterns
• Keep functions focused and maintainable
• Add comments for complex logic
• Ensure your code passes linting (npm run lint)

• Keep PRs focused on a single feature or fix
• Include a clear description of what the PR does
• Test your changes before submitting
• Make sure all existing tests pass

• Use the GitHub issue tracker
• Provide clear steps to reproduce bugs
• Include relevant environment details (OS, Node version, etc.)

Feel free to open an issue for questions or discussions about the project.

This project is open source and available under the Apache License 2.0.