Infinispan Playground

A web-based visualization tool for Infinispan clusters, showcasing key distribution across nodes and caches.

Overview

The Infinispan Playground provides an interactive topology view of Infinispan clusters, displaying:

• Clusters: Grouped in fence zones with dashed borders
• Nodes: Large circles representing cluster members
• Caches: Medium circles connected to nodes (color-coded by type)
• Keys: Small circles around caches (red for primary, gray for backup)

Features

• Visual Topology: Topology view with D3.js
• Interactive Highlighting: Hover over caches or keys to highlight related elements across clusters
• Zoom & Pan: Navigate large topologies with smooth zoom and pan controls
• Cache Types: Visual distinction between Local, Replication, and Distribution caches
• Key Distribution: See primary and backup key placement at a glance
• Responsive: Dynamic label visibility based on zoom level

Architecture

Backend (Quarkus + Infinispan)

• Port: 8080
• Main Endpoint: GET /clusters - Returns JSON representation of all clusters
• Technology: Java 25, Quarkus 3.32.1, Infinispan 16.1.0

Frontend (React + TypeScript + D3.js)

• Port: 5173 (development)
• Technology: Vite, React 18, TypeScript, D3.js v7

Getting Started

Prerequisites

• Java 25
• Maven 3.8+
• Node.js 18+
• npm 9+

Running the Backend

1. Start the Quarkus backend:

./mvnw quarkus:dev

The backend will be available at http://localhost:8080

2. Initialize the playground with sample data:

# Use the provided HTTP file or curl
curl -X POST http://localhost:8080/clusters/example

Or use the frontend page and click the "Create Example Cluster" button.

Running the Frontend

1. Navigate to the frontend directory:

cd frontend

2. Install dependencies (first time only):

npm install

3. Start the development server:

npm run dev

The frontend will be available at http://localhost:5173

Usage

Interacting with the Visualization

1. Zoom & Pan:

   • Scroll to zoom in/out
   • Click and drag to pan around the canvas
   • Zoom range: 0.1x to 4x

2. Highlighting Caches:

   • Hover over any cache to highlight all caches with the same name across clusters
   • Useful for understanding the topology of distributed caches

3. Highlighting Keys:

   • Hover over any key to:
     • Highlight its parent cache
     • Highlight all keys with the same value across all caches and clusters

4. Understanding Colors:

   • Green circles: Local caches (data only on this node)
   • Orange circles: Replication caches (data replicated to all nodes)
   • Yellow circles: Distribution caches (data distributed across subset of nodes)
   • Red dots: Primary keys (coordinates write operations)
   • Gray dots: Backup keys (stores replicas)
   • Green dots: Local cache keys

License

This project was created as a demonstration of Infinispan cluster visualization.

Contributing

Feel free to submit issues and enhancement requests!

AI Acknowledgments

The frontend was entirely created with Bob.