iot/spore-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: auto-discovery

Browse Source
This commit is contained in:
0x1d
2025-08-25 12:05:51 +02:00
parent f72e4ba220
commit 5977a37d6c
8 changed files with 552 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
README.md
View File

@@ -71,6 +71,7 @@ The backend now includes automatic UDP discovery for SPORE nodes on the network.
- `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
@@ -86,8 +87,21 @@ 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)

72
index.js
View File

@@ -7,6 +7,10 @@ const SporeApiClient = require('./src/client');
const app = express();
const PORT = process.env.PORT || 3001;
// Middleware
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
// UDP discovery configuration
const UDP_PORT = 4210;
const DISCOVERY_MESSAGE = 'CLUSTER_DISCOVERY';
@@ -149,6 +153,31 @@ function selectBestPrimaryNode() {
return bestNode;
}
// Function to randomly select a primary node
function selectRandomPrimaryNode() {
if (discoveredNodes.size === 0) {
return null;
}
// Convert discovered nodes to array and filter out current primary
const availableNodes = Array.from(discoveredNodes.keys()).filter(ip => ip !== primaryNodeIp);
if (availableNodes.length === 0) {
// If no other nodes available, keep current primary
return primaryNodeIp;
}
// Randomly select from available nodes
const randomIndex = Math.floor(Math.random() * availableNodes.length);
const randomNode = availableNodes[randomIndex];
// Update primary node
primaryNodeIp = randomNode;
console.log(`Randomly selected new primary node: ${randomNode}`);
return randomNode;
}
// Initialize client when a node is discovered
function updateSporeClient() {
const nodeIp = selectBestPrimaryNode();
@@ -221,6 +250,49 @@ app.post('/api/discovery/refresh', (req, res) => {
}
});
// API endpoint to randomly select a new primary node
app.post('/api/discovery/random-primary', (req, res) => {
try {
if (discoveredNodes.size === 0) {
return res.status(404).json({
error: 'No nodes available',
message: 'No SPORE nodes have been discovered yet'
});
}
// Randomly select a new primary node
const randomNode = selectRandomPrimaryNode();
if (!randomNode) {
return res.status(500).json({
error: 'Selection failed',
message: 'Failed to select a random primary node'
});
}
// Update the client with the new primary node
updateSporeClient();
// Get current timestamp for the response
const timestamp = req.body && req.body.timestamp ? req.body.timestamp : new Date().toISOString();
res.json({
success: true,
message: `Randomly selected new primary node: ${randomNode}`,
primaryNode: primaryNodeIp,
totalNodes: discoveredNodes.size,
clientInitialized: !!sporeClient,
timestamp: timestamp
});
} catch (error) {
console.error('Error selecting random primary node:', error);
res.status(500).json({
error: 'Random selection failed',
message: error.message
});
}
});
// API endpoint to manually set primary node
app.post('/api/discovery/primary/:ip', (req, res) => {
try {

6
package.json
View File

@@ -7,8 +7,10 @@
"start": "node index.js",
"dev": "node index.js",
"client-example": "node src/client/example.js",
"test-discovery": "node test-discovery.js",
"demo-discovery": "node demo-discovery.js",
"test-discovery": "node test/test-discovery.js",
"demo-discovery": "node test/demo-discovery.js",
"demo-frontend": "node test/demo-frontend.js",
"test-random-selection": "node test/test-random-selection.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],

13
public/index.html
View File

@@ -21,7 +21,18 @@
<div id="cluster-view" class="view-content active">
<div class="cluster-section">
<div class="cluster-header">
<div class="cluster-header-left"></div>
<div class="cluster-header-left">
<div class="primary-node-info">
<span class="primary-node-label">Primary Node:</span>
<span class="primary-node-ip" id="primary-node-ip">Discovering...</span>
<button class="primary-node-refresh" onclick="selectRandomPrimaryNode()" title="🎲 Select random primary node">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
<path d="M1 4v6h6M23 20v-6h-6"/>
<path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"/>
</svg>
</button>
</div>
</div>
<button class="refresh-btn" onclick="refreshClusterMembers()">
<svg class="refresh-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M1 4v6h6M23 20v-6h-6"/>

129
public/script.js
View File

@@ -23,6 +23,48 @@ class FrontendApiClient {
}
}
async getDiscoveryInfo() {
try {
const response = await fetch('/api/discovery/nodes', {
method: 'GET',
headers: {
'Accept': 'application/json'
}
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
return await response.json();
} catch (error) {
throw new Error(`Request failed: ${error.message}`);
}
}
async selectRandomPrimaryNode() {
try {
const response = await fetch('/api/discovery/random-primary', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
timestamp: new Date().toISOString()
})
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
return await response.json();
} catch (error) {
throw new Error(`Request failed: ${error.message}`);
}
}
async getNodeStatus(ip) {
try {
// Create a proxy endpoint that forwards the request to the specific node
@@ -66,6 +108,83 @@ class FrontendApiClient {
// Global client instance
const client = new FrontendApiClient();
// Function to update primary node display
async function updatePrimaryNodeDisplay() {
const primaryNodeElement = document.getElementById('primary-node-ip');
if (!primaryNodeElement) return;
try {
// Set discovering state
primaryNodeElement.textContent = 'Discovering...';
primaryNodeElement.className = 'primary-node-ip discovering';
const discoveryInfo = await client.getDiscoveryInfo();
if (discoveryInfo.primaryNode) {
const status = discoveryInfo.clientInitialized ? '✅' : '⚠️';
const nodeCount = discoveryInfo.totalNodes > 1 ? ` (${discoveryInfo.totalNodes} nodes)` : '';
primaryNodeElement.textContent = `${status} ${discoveryInfo.primaryNode}${nodeCount}`;
primaryNodeElement.className = 'primary-node-ip';
} else if (discoveryInfo.totalNodes > 0) {
// If we have nodes but no primary, show the first one
const firstNode = discoveryInfo.nodes[0];
primaryNodeElement.textContent = `⚠️ ${firstNode.ip} (No Primary)`;
primaryNodeElement.className = 'primary-node-ip error';
} else {
primaryNodeElement.textContent = '🔍 No Nodes Found';
primaryNodeElement.className = 'primary-node-ip error';
}
} catch (error) {
console.error('Failed to fetch discovery info:', error);
primaryNodeElement.textContent = '❌ Discovery Failed';
primaryNodeElement.className = 'primary-node-ip error';
}
}
// Function to randomly select a new primary node
async function selectRandomPrimaryNode() {
const primaryNodeElement = document.getElementById('primary-node-ip');
if (!primaryNodeElement) return;
try {
// Store current primary node for reference
const currentText = primaryNodeElement.textContent;
const currentPrimary = currentText.includes('✅') || currentText.includes('⚠️') ?
currentText.split(' ')[1] : 'unknown';
// Set selecting state
primaryNodeElement.textContent = '🎲 Selecting...';
primaryNodeElement.className = 'primary-node-ip selecting';
// Call the random selection API
const result = await client.selectRandomPrimaryNode();
if (result.success) {
// Show success message briefly
primaryNodeElement.textContent = `🎯 ${result.primaryNode}`;
primaryNodeElement.className = 'primary-node-ip';
// Update the display after a short delay
setTimeout(() => {
updatePrimaryNodeDisplay();
}, 1500);
console.log(`Randomly selected new primary node: ${result.primaryNode}`);
} else {
throw new Error(result.message || 'Random selection failed');
}
} catch (error) {
console.error('Failed to select random primary node:', error);
primaryNodeElement.textContent = '❌ Selection Failed';
primaryNodeElement.className = 'primary-node-ip error';
// Revert to normal display after error
setTimeout(() => {
updatePrimaryNodeDisplay();
}, 2000);
}
}
// Function to refresh cluster members
async function refreshClusterMembers() {
const container = document.getElementById('cluster-members-container');
@@ -97,6 +216,9 @@ async function refreshClusterMembers() {
const response = await client.getClusterMembers();
console.log(response);
displayClusterMembers(response.members, expandedCards);
// Update primary node display after cluster refresh
await updatePrimaryNodeDisplay();
} catch (error) {
console.error('Failed to fetch cluster members:', error);
container.innerHTML = `
@@ -105,6 +227,9 @@ async function refreshClusterMembers() {
${error.message}
</div>
`;
// Still try to update primary node display even if cluster fails
await updatePrimaryNodeDisplay();
}
}
@@ -533,8 +658,12 @@ function displayClusterMembers(members, expandedCards = new Map()) {
// Load cluster members when page loads
document.addEventListener('DOMContentLoaded', function() {
refreshClusterMembers();
updatePrimaryNodeDisplay(); // Also update primary node display
setupNavigation();
setupFirmwareView();
// Set up periodic primary node updates (every 10 seconds)
setInterval(updatePrimaryNodeDisplay, 10000);
});
// Auto-refresh every 30 seconds

82
public/styles.css
View File

@@ -48,6 +48,88 @@ p {
/* Placeholder for future content if needed */
}
.primary-node-info {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}
.primary-node-label {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
}
.primary-node-ip {
font-size: 0.9rem;
color: #4ade80;
font-weight: 600;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
padding: 0.25rem 0.5rem;
background: rgba(74, 222, 128, 0.1);
border-radius: 4px;
border: 1px solid rgba(74, 222, 128, 0.2);
}
.primary-node-ip.discovering {
color: #fbbf24;
background: rgba(251, 191, 36, 0.1);
border-color: rgba(251, 191, 36, 0.2);
}
.primary-node-ip.error {
color: #f87171;
background: rgba(248, 113, 113, 0.1);
border-color: rgba(248, 113, 113, 0.2);
margin: 0;
padding: 0.25rem 0.5rem;
}
.primary-node-ip.selecting {
color: #8b5cf6;
background: rgba(139, 92, 246, 0.1);
border-color: rgba(139, 92, 246, 0.2);
animation: pulse 1.5s ease-in-out infinite alternate;
}
@keyframes pulse {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0.7;
transform: scale(1.05);
}
}
.primary-node-refresh {
background: none;
border: none;
color: rgba(255, 255, 255, 0.6);
cursor: pointer;
padding: 0.25rem;
border-radius: 4px;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.primary-node-refresh:hover {
color: rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.1);
}
.primary-node-refresh:active {
transform: scale(0.95);
}
.firmware-header {
display: flex;
justify-content: space-between;

102
test/demo-frontend.js Normal file
View File

@@ -0,0 +1,102 @@
#!/usr/bin/env node
/**
* Demo script for Frontend Discovery Integration
* Shows how the frontend displays primary node information
*/
const http = require('http');
const BASE_URL = 'http://localhost:3001';
function makeRequest(path, method = 'GET') {
return new Promise((resolve, reject) => {
const options = {
hostname: 'localhost',
port: 3001,
path: path,
method: method,
headers: {
'Content-Type': 'application/json'
}
};
const req = http.request(options, (res) => {
let data = '';
res.on('data', (chunk) => {
data += chunk;
});
res.on('end', () => {
try {
const jsonData = JSON.parse(data);
resolve({ status: res.statusCode, data: jsonData });
} catch (error) {
resolve({ status: res.statusCode, data: data });
}
});
});
req.on('error', (error) => {
reject(error);
});
req.end();
});
}
async function showFrontendIntegration() {
console.log('🚀 Frontend Discovery Integration Demo');
console.log('=====================================');
console.log('This demo shows how the frontend displays primary node information.');
console.log('Open http://localhost:3001 in your browser to see the UI.');
console.log('');
try {
// Check if backend is running
const healthResponse = await makeRequest('/api/health');
console.log('✅ Backend is running');
// Get discovery information
const discoveryResponse = await makeRequest('/api/discovery/nodes');
console.log('\n📡 Discovery Status:');
console.log(` Primary Node: ${discoveryResponse.data.primaryNode || 'None'}`);
console.log(` Total Nodes: ${discoveryResponse.data.totalNodes}`);
console.log(` Client Initialized: ${discoveryResponse.data.clientInitialized}`);
if (discoveryResponse.data.nodes.length > 0) {
console.log('\n🌐 Discovered Nodes:');
discoveryResponse.data.nodes.forEach((node, index) => {
console.log(` ${index + 1}. ${node.ip}:${node.port} (${node.isPrimary ? 'PRIMARY' : 'secondary'})`);
console.log(` Last Seen: ${node.lastSeen}`);
});
}
console.log('\n🎯 Frontend Display:');
console.log(' The frontend will show:');
if (discoveryResponse.data.primaryNode) {
const status = discoveryResponse.data.clientInitialized ? '✅' : '⚠️';
const nodeCount = discoveryResponse.data.totalNodes > 1 ? ` (${discoveryResponse.data.totalNodes} nodes)` : '';
console.log(` ${status} ${discoveryResponse.data.primaryNode}${nodeCount}`);
} else if (discoveryResponse.data.totalNodes > 0) {
const firstNode = discoveryResponse.data.nodes[0];
console.log(` ⚠️ ${firstNode.ip} (No Primary)`);
} else {
console.log(' 🔍 No Nodes Found');
}
console.log('\n💡 To test the frontend:');
console.log(' 1. Open http://localhost:3001 in your browser');
console.log(' 2. Look at the cluster header for primary node info');
console.log(' 3. Send discovery messages: npm run test-discovery broadcast');
console.log(' 4. Watch the primary node display update in real-time');
} catch (error) {
console.error('❌ Error:', error.message);
console.log('\n💡 Make sure the backend is running: npm start');
}
}
// Run the demo
showFrontendIntegration().catch(console.error);

137
test/test-random-selection.js Normal file
View File

@@ -0,0 +1,137 @@
#!/usr/bin/env node
/**
* Test script for Random Primary Node Selection
* Demonstrates how the random selection works
*/
const http = require('http');
const BASE_URL = 'http://localhost:3001';
function makeRequest(path, method = 'POST', body = null) {
return new Promise((resolve, reject) => {
const options = {
hostname: 'localhost',
port: 3001,
path: path,
method: method,
headers: {
'Content-Type': 'application/json'
}
};
const req = http.request(options, (res) => {
let data = '';
res.on('data', (chunk) => {
data += chunk;
});
res.on('end', () => {
try {
const jsonData = JSON.parse(data);
resolve({ status: res.statusCode, data: jsonData });
} catch (error) {
resolve({ status: res.statusCode, data: data });
}
});
});
req.on('error', (error) => {
reject(error);
});
if (body) {
req.write(JSON.stringify(body));
}
req.end();
});
}
async function testRandomSelection() {
console.log('🎲 Testing Random Primary Node Selection');
console.log('======================================');
console.log('');
try {
// First, check current discovery status
console.log('1. Checking current discovery status...');
const discoveryResponse = await makeRequest('/api/discovery/nodes', 'GET');
if (discoveryResponse.status !== 200) {
console.log('❌ Failed to get discovery status');
return;
}
const discovery = discoveryResponse.data;
console.log(` Current Primary: ${discovery.primaryNode || 'None'}`);
console.log(` Total Nodes: ${discovery.totalNodes}`);
console.log(` Client Initialized: ${discovery.clientInitialized}`);
if (discovery.nodes.length === 0) {
console.log('\n💡 No nodes discovered yet. Send some discovery messages first:');
console.log(' npm run test-discovery broadcast');
return;
}
console.log('\n2. Testing random primary node selection...');
// Store current primary for comparison
const currentPrimary = discovery.primaryNode;
const availableNodes = discovery.nodes.map(n => n.ip);
console.log(` Available nodes: ${availableNodes.join(', ')}`);
console.log(` Current primary: ${currentPrimary}`);
// Perform random selection
const randomResponse = await makeRequest('/api/discovery/random-primary', 'POST', {
timestamp: new Date().toISOString()
});
if (randomResponse.status === 200) {
const result = randomResponse.data;
console.log('\n✅ Random selection successful!');
console.log(` New Primary: ${result.primaryNode}`);
console.log(` Previous Primary: ${currentPrimary}`);
console.log(` Message: ${result.message}`);
console.log(` Total Nodes: ${result.totalNodes}`);
console.log(` Client Initialized: ${result.clientInitialized}`);
// Verify the change
if (result.primaryNode !== currentPrimary) {
console.log('\n🎯 Primary node successfully changed!');
} else {
console.log('\n⚠️ Primary node remained the same (only one node available)');
}
} else {
console.log('\n❌ Random selection failed:');
console.log(` Status: ${randomResponse.status}`);
console.log(` Error: ${randomResponse.data.error || 'Unknown error'}`);
}
// Show updated status
console.log('\n3. Checking updated discovery status...');
const updatedResponse = await makeRequest('/api/discovery/nodes', 'GET');
if (updatedResponse.status === 200) {
const updated = updatedResponse.data;
console.log(` Current Primary: ${updated.primaryNode}`);
console.log(` Client Base URL: ${updated.clientBaseUrl}`);
}
console.log('\n💡 To test in the frontend:');
console.log(' 1. Open http://localhost:3001 in your browser');
console.log(' 2. Look at the cluster header for primary node info');
console.log(' 3. Click the 🎲 button to randomly select a new primary node');
console.log(' 4. Watch the display change in real-time');
} catch (error) {
console.error('\n❌ Test failed:', error.message);
console.log('\n💡 Make sure the backend is running: npm start');
}
}
// Run the test
testRandomSelection().catch(console.error);