SPORE UI

A modern web interface for monitoring and managing SPORE embedded systems.

Features

🌐 Cluster Monitoring: Real-time view of all cluster members
📊 Node Details: Expandable cards with detailed system information
🚀 Modern UI: Beautiful glassmorphism design with smooth animations
📱 Responsive: Works on all devices and screen sizes

Project Structure

spore-ui/
├── index.js                 # Express.js backend server
├── api/
│   └── openapi.yaml        # API specification
├── src/
│   └── client/             # SPORE API client library
│       ├── index.js        # Main client class
│       ├── package.json    # Client package info
│       ├── README.md       # Client documentation
│       └── example.js      # Usage examples
├── public/                 # Frontend files
│   ├── index.html         # Main HTML page
│   ├── styles.css         # All CSS styles
│   ├── script.js          # All JavaScript functionality
│   └── README.md          # Frontend documentation
└── README.md              # This file

Getting Started

Install dependencies: npm install
Start the server: npm start
Open in browser: http://localhost:3001

API Endpoints

/ - Main UI page
/api/cluster/members - Get cluster member information
/api/tasks/status - Get task status
/api/node/status - Get system status
/api/node/status/:ip - Get status from specific node

Technologies Used

Backend: Express.js, Node.js
Frontend: Vanilla JavaScript, CSS3, HTML5
API: SPORE Embedded System API
Design: Glassmorphism, CSS Grid, Flexbox

TODO

UDP Auto Discovery

The backend now includes automatic UDP discovery for SPORE nodes on the network. This eliminates the need for hardcoded IP addresses.

How It Works

UDP Server: The backend listens on port 4210 for UDP messages
Discovery Message: Nodes send CLUSTER_DISCOVERY messages to broadcast address 255.255.255.255:4210
Auto Configuration: When a discovery message is received, the source IP is automatically used to configure the SporeApiClient
Dynamic Updates: The system automatically switches to the most recently seen node as the primary connection

Discovery Endpoints

GET /api/discovery/nodes - View all discovered nodes and current status
POST /api/discovery/refresh - Manually trigger discovery refresh
POST /api/discovery/primary/:ip - Manually set a specific node as primary
POST /api/discovery/random-primary - Randomly select a new primary node
GET /api/health - Health check including discovery status

Testing Discovery

Use the included test script to send discovery messages:

# Send to broadcast address
npm run test-discovery broadcast

# Send to specific IP
npm run test-discovery 192.168.1.100

# Send multiple messages
npm run test-discovery broadcast 5

# Test random primary node selection
npm run test-random-selection

Frontend Features

The frontend now includes:

Primary Node Display: Shows the current primary node IP in the cluster header
Random Selection: Click the 🎲 button to randomly select a new primary node
Real-time Updates: Primary node display updates automatically every 10 seconds
Visual Status Indicators: Different colors and icons show node status
Manual Refresh: Users can manually trigger discovery updates

Node Behavior

Nodes should send CLUSTER_DISCOVERY messages periodically (recommended: every 30-60 seconds)
The backend automatically cleans up stale nodes (not seen for 5+ minutes)
The most recently seen node becomes the primary connection
All API endpoints automatically use the discovered node IPs

Configuration

UDP Discovery Port: 4210 (configurable via UDP_PORT constant)
Discovery Message: CLUSTER_DISCOVERY (configurable via DISCOVERY_MESSAGE constant)
Stale Node Timeout: 5 minutes (configurable in cleanupStaleNodes() function)
Health Check Interval: 5 seconds (configurable in setInterval)

4.1 KiB Raw Blame History