# SPORE UI Frontend

Frontend web interface for monitoring and managing SPORE embedded systems. Now works in conjunction with the SPORE Gateway backend service.

## Architecture

This frontend server works together with the **SPORE Gateway** (spore-gateway) backend service:

- **spore-ui**: Serves the static frontend files and provides the user interface
- **spore-gateway**: Handles UDP node discovery, API endpoints, and WebSocket connections

## Features

- **🌐 Cluster Monitoring**: Real-time view of all cluster members via spore-gateway
- **📊 Node Details**: Detailed system information including running tasks and available endpoints
- **🚀 OTA**: Clusterwide over-the-air firmware updates
- **📱 Responsive**: Works on all devices and screen sizes
- **🖥️ Terminal**: Terminal for interacting with a node's WebSocket
- **🔗 Gateway Integration**: Seamlessly connects to spore-gateway for all backend functionality

## Screenshots
### Cluster
![UI](./assets/cluster.png)
### Topology
![UI](./assets/topology.png)
### Events
![UI](./assets/events.png)
![UI](./assets/events-messages.png)
### Monitoring
![UI](./assets/monitoring.png)
### Firmware
![UI](./assets/firmware.png)

## Getting Started

### Prerequisites
1. **Install dependencies**: `npm install`
2. **Start spore-gateway**: `./spore-gateway` (in the spore-gateway directory)
3. **Start frontend server**: `npm start`

### Access
- **Frontend UI**: `http://localhost:3000`
- **API Backend**: spore-gateway runs on port 3001
- **WebSocket**: Connects to spore-gateway on port 3001

## API Integration

The frontend automatically connects to the spore-gateway for:

- **Cluster Discovery**: `/api/discovery/*` endpoints
- **Node Management**: `/api/node/*` endpoints
- **Task Monitoring**: `/api/tasks/*` endpoints
- **Real-time Updates**: WebSocket connections via `/ws`

## Technologies Used

- **Backend Integration**: Express.js server connecting to spore-gateway
- **Frontend**: Vanilla JavaScript, CSS3, HTML5
- **Framework**: Custom component-based architecture
- **API**: SPORE Embedded System API via spore-gateway
- **Design**: Glassmorphism, CSS Grid, Flexbox

## Development

### File Structure
```
spore-ui/
├── public/           # Static frontend files
│   ├── index.html   # Main HTML page
│   ├── scripts/     # JavaScript components
│   └── styles/      # CSS stylesheets
├── index.js         # Simple static file server
└── package.json     # Node.js dependencies
```

### Key Changes
- **Simplified Backend**: Now only serves static files
- **Gateway Integration**: All API calls go through spore-gateway
- **WebSocket Proxy**: Real-time updates via spore-gateway
- **UDP Discovery**: Handled by spore-gateway service

## Troubleshooting

### Common Issues

**Frontend not connecting to gateway**
```bash
# Check if spore-gateway is running
curl http://localhost:3001/api/health

# Verify gateway health
# Should return gateway health status
```

**WebSocket connection issues**
```bash
# Check WebSocket endpoint
curl http://localhost:3001/api/test/websocket

# Verify gateway WebSocket server is running
```

**No cluster data**
```bash
# Check gateway discovery status
curl http://localhost:3001/api/discovery/nodes

# Verify SPORE nodes are sending heartbeat messages
```

## Architecture Benefits

1. **Separation of Concerns**: Frontend handles UI, gateway handles backend logic
2. **Scalability**: Gateway can handle multiple frontend instances
3. **Maintainability**: Clear separation between presentation and business logic
4. **Performance**: Gateway can optimize API calls and caching
5. **Reliability**: Gateway provides failover and health monitoring