# 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

![UI](./assets/ui.png)

## 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:

```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
```

### 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`)