117 lines
4.1 KiB
Markdown
117 lines
4.1 KiB
Markdown
# 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
|
|
- `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:
|
|
|
|
```bash
|
|
# 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`) |