118 lines
3.6 KiB
Markdown
118 lines
3.6 KiB
Markdown
# 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
|
|
|
|
### Topology
|
|
|
|
### Events
|
|
|
|
|
|
### Monitoring
|
|
|
|
### Firmware
|
|
|
|
|
|
## 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
|