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

1. Install dependencies: npm install
2. Start the server: npm start
3. 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

1. UDP Server: The backend listens on port 4210 for UDP messages
2. Discovery Message: Nodes send CLUSTER_DISCOVERY messages to broadcast address 255.255.255.255:4210
3. Auto Configuration: When a discovery message is received, the source IP is automatically used to configure the SporeApiClient
4. 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
• 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

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)