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

Monitoring

Firmware

Getting Started

Prerequisites

Install dependencies: npm install
Start spore-gateway: ./spore-gateway (in the spore-gateway directory)
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

# Check if spore-gateway is running
curl http://localhost:3001/api/health

# Verify gateway health
# Should return gateway health status

WebSocket connection issues

# Check WebSocket endpoint
curl http://localhost:3001/api/test/websocket

# Verify gateway WebSocket server is running

No cluster data

# Check gateway discovery status
curl http://localhost:3001/api/discovery/nodes

# Verify SPORE nodes are sending heartbeat messages

Architecture Benefits

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