feat: live updates
This commit is contained in:
370
index.js
370
index.js
@@ -4,6 +4,7 @@ const fs = require('fs');
|
||||
const dgram = require('dgram');
|
||||
const SporeApiClient = require('./src/client');
|
||||
const cors = require('cors');
|
||||
const WebSocket = require('ws');
|
||||
|
||||
const app = express();
|
||||
const PORT = process.env.PORT || 3001;
|
||||
@@ -31,6 +32,7 @@ app.use(cors({
|
||||
// UDP discovery configuration
|
||||
const UDP_PORT = 4210;
|
||||
const DISCOVERY_MESSAGE = 'CLUSTER_DISCOVERY';
|
||||
const STALE_THRESHOLD_SECONDS = 3; // 3 seconds for faster detection
|
||||
|
||||
// Initialize UDP server for auto discovery
|
||||
const udpServer = dgram.createSocket('udp4');
|
||||
@@ -55,19 +57,25 @@ udpServer.on('message', (msg, rinfo) => {
|
||||
const sourceIp = rinfo.address;
|
||||
const sourcePort = rinfo.port;
|
||||
|
||||
//console.log(`UDP message received from ${sourceIp}:${sourcePort}: "${message}"`);
|
||||
// Only log non-discovery messages to reduce noise
|
||||
if (message !== DISCOVERY_MESSAGE) {
|
||||
console.log(`📨 UDP message received from ${sourceIp}:${sourcePort}: "${message}"`);
|
||||
}
|
||||
|
||||
if (message === DISCOVERY_MESSAGE) {
|
||||
//console.log(`Received CLUSTER_DISCOVERY from ${sourceIp}:${sourcePort}`);
|
||||
|
||||
// Store the discovered node
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
const nodeInfo = {
|
||||
ip: sourceIp,
|
||||
port: sourcePort,
|
||||
discoveredAt: new Date(),
|
||||
lastSeen: new Date()
|
||||
status: 'active', // New nodes from discovery are active
|
||||
discoveredAt: now,
|
||||
lastSeen: now
|
||||
};
|
||||
|
||||
const isNewNode = !discoveredNodes.has(sourceIp);
|
||||
discoveredNodes.set(sourceIp, nodeInfo);
|
||||
|
||||
// Set as primary node if this is the first one or if we don't have one
|
||||
@@ -80,9 +88,75 @@ udpServer.on('message', (msg, rinfo) => {
|
||||
}
|
||||
|
||||
// Update last seen timestamp
|
||||
discoveredNodes.get(sourceIp).lastSeen = new Date();
|
||||
discoveredNodes.get(sourceIp).lastSeen = Math.floor(Date.now() / 1000);
|
||||
|
||||
//console.log(`Node ${sourceIp} added/updated. Total discovered nodes: ${discoveredNodes.size}`);
|
||||
// Broadcast discovery event if this is a new node
|
||||
if (isNewNode) {
|
||||
console.log(`🆕 NEW NODE DISCOVERED: ${sourceIp}:${sourcePort} via CLUSTER_DISCOVERY. Total nodes: ${discoveredNodes.size}`);
|
||||
broadcastNodeDiscovery(sourceIp, 'discovered');
|
||||
// Broadcast cluster update after a short delay to allow member data to be fetched
|
||||
setTimeout(() => broadcastMemberListChange('new discovery'), 1000);
|
||||
}
|
||||
} else if (message.startsWith('CLUSTER_HEARTBEAT:')) {
|
||||
// Handle heartbeat messages that also update member list
|
||||
const hostname = message.substring('CLUSTER_HEARTBEAT:'.length);
|
||||
// Update or create node entry from heartbeat
|
||||
const existingNode = discoveredNodes.get(sourceIp);
|
||||
const now = Math.floor(Date.now() / 1000); // Use Unix timestamp for consistency
|
||||
|
||||
if (existingNode) {
|
||||
// Update existing node
|
||||
const wasStale = existingNode.status === 'inactive';
|
||||
const oldHostname = existingNode.hostname;
|
||||
|
||||
existingNode.lastSeen = now;
|
||||
existingNode.hostname = hostname;
|
||||
existingNode.status = 'active'; // Mark as active when heartbeat received
|
||||
|
||||
console.log(`💓 Heartbeat from ${sourceIp}:${sourcePort} (${hostname}). Total nodes: ${discoveredNodes.size}`);
|
||||
|
||||
// Check if hostname changed
|
||||
const hostnameChanged = oldHostname !== hostname;
|
||||
if (hostnameChanged) {
|
||||
console.log(`🔄 Hostname updated for ${sourceIp}: "${oldHostname}" -> "${hostname}"`);
|
||||
}
|
||||
|
||||
// ALWAYS broadcast every heartbeat for immediate UI updates
|
||||
// This ensures the UI gets real-time updates without delay
|
||||
const reason = wasStale ? 'node became active' :
|
||||
hostnameChanged ? 'hostname update' :
|
||||
'active heartbeat';
|
||||
|
||||
console.log(`📡 Broadcasting heartbeat update: ${reason}`);
|
||||
broadcastMemberListChange(reason);
|
||||
} else {
|
||||
// Create new node entry from heartbeat - NEW NODE DISCOVERED
|
||||
const nodeInfo = {
|
||||
ip: sourceIp,
|
||||
port: sourcePort,
|
||||
hostname: hostname,
|
||||
status: 'active', // New nodes from heartbeat are active
|
||||
discoveredAt: now,
|
||||
lastSeen: now
|
||||
};
|
||||
discoveredNodes.set(sourceIp, nodeInfo);
|
||||
|
||||
console.log(`🆕 NEW NODE DISCOVERED: ${sourceIp}:${sourcePort} (${hostname}) via heartbeat. Total nodes: ${discoveredNodes.size}`);
|
||||
|
||||
// Set as primary node if this is the first one or if we don't have one
|
||||
if (!primaryNodeIp) {
|
||||
primaryNodeIp = sourceIp;
|
||||
console.log(`Set primary node to ${sourceIp} (from heartbeat)`);
|
||||
|
||||
// Immediately try to initialize the client
|
||||
updateSporeClient();
|
||||
}
|
||||
|
||||
// Broadcast discovery event for new node from heartbeat
|
||||
broadcastNodeDiscovery(sourceIp, 'discovered');
|
||||
// Broadcast cluster update after a short delay to allow member data to be fetched
|
||||
setTimeout(() => broadcastMemberListChange('new heartbeat discovery'), 1000);
|
||||
}
|
||||
} else if (!message.startsWith('RAW:')) {
|
||||
console.log(`Received unknown message from ${sourceIp}:${sourcePort}: "${message}"`);
|
||||
}
|
||||
@@ -121,25 +195,48 @@ function initializeSporeClient(nodeIp) {
|
||||
}
|
||||
}
|
||||
|
||||
// Function to clean up stale discovered nodes (nodes not seen in the last 5 minutes)
|
||||
function cleanupStaleNodes() {
|
||||
const now = new Date();
|
||||
const staleThreshold = 5 * 60 * 1000; // 5 minutes in milliseconds
|
||||
// Function to mark stale nodes as inactive (instead of removing them)
|
||||
function markStaleNodes() {
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
|
||||
let nodesMarkedStale = false;
|
||||
|
||||
for (const [ip, node] of discoveredNodes.entries()) {
|
||||
if (now - node.lastSeen > staleThreshold) {
|
||||
console.log(`Removing stale node: ${ip} (last seen: ${node.lastSeen.toISOString()})`);
|
||||
discoveredNodes.delete(ip);
|
||||
const timeSinceLastSeen = now - node.lastSeen;
|
||||
|
||||
// If this was our primary node, clear it
|
||||
if (timeSinceLastSeen > STALE_THRESHOLD_SECONDS && node.status !== 'inactive') {
|
||||
console.log(`💀 NODE MARKED INACTIVE: ${ip} (${node.hostname || 'Unknown'}) - last seen ${timeSinceLastSeen}s ago (threshold: ${STALE_THRESHOLD_SECONDS}s)`);
|
||||
node.status = 'inactive';
|
||||
nodesMarkedStale = true;
|
||||
|
||||
// Broadcast stale node event immediately
|
||||
console.log(`📡 Broadcasting stale node event for ${ip}`);
|
||||
broadcastNodeDiscovery(ip, 'stale');
|
||||
|
||||
// If this was our primary node, clear it and select a new one
|
||||
if (primaryNodeIp === ip) {
|
||||
primaryNodeIp = null;
|
||||
console.log('Primary node became stale, clearing primary node selection');
|
||||
console.log('🚫 PRIMARY NODE BECAME STALE: Clearing primary node selection');
|
||||
|
||||
// Automatically select a new primary node from remaining healthy nodes
|
||||
const newPrimary = selectBestPrimaryNode();
|
||||
if (newPrimary) {
|
||||
console.log(`✅ NEW PRIMARY NODE SELECTED: ${newPrimary} (auto-selected after stale cleanup)`);
|
||||
// Update the SPORE client to use the new primary node
|
||||
updateSporeClient();
|
||||
} else {
|
||||
console.log('⚠️ No healthy nodes available for primary selection');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Broadcast cluster update if any nodes were marked stale
|
||||
if (nodesMarkedStale) {
|
||||
broadcastMemberListChange('nodes marked stale');
|
||||
}
|
||||
}
|
||||
|
||||
// Function to select the best primary node
|
||||
function selectBestPrimaryNode() {
|
||||
if (discoveredNodes.size === 0) {
|
||||
@@ -165,6 +262,7 @@ function selectBestPrimaryNode() {
|
||||
if (bestNode && bestNode !== primaryNodeIp) {
|
||||
primaryNodeIp = bestNode;
|
||||
console.log(`Selected new primary node: ${bestNode}`);
|
||||
broadcastMemberListChange('primary node change');
|
||||
}
|
||||
|
||||
return bestNode;
|
||||
@@ -191,6 +289,7 @@ function selectRandomPrimaryNode() {
|
||||
// Update primary node
|
||||
primaryNodeIp = randomNode;
|
||||
console.log(`Randomly selected new primary node: ${randomNode}`);
|
||||
broadcastMemberListChange('random primary node selection');
|
||||
|
||||
return randomNode;
|
||||
}
|
||||
@@ -234,6 +333,7 @@ async function performWithFailover(operation) {
|
||||
primaryNodeIp = ip;
|
||||
sporeClient = client;
|
||||
console.log(`Failover: switched primary node to ${ip}`);
|
||||
broadcastMemberListChange('failover primary node switch');
|
||||
}
|
||||
return result;
|
||||
} catch (err) {
|
||||
@@ -248,11 +348,11 @@ async function performWithFailover(operation) {
|
||||
|
||||
// Set up periodic tasks
|
||||
setInterval(() => {
|
||||
cleanupStaleNodes();
|
||||
markStaleNodes();
|
||||
if (!sporeClient || !primaryNodeIp || !discoveredNodes.has(primaryNodeIp)) {
|
||||
updateSporeClient();
|
||||
}
|
||||
}, 5000); // Check every 5 seconds
|
||||
}, 2000); // Check every 2 seconds for faster stale detection
|
||||
|
||||
// Serve static files from public directory
|
||||
app.use(express.static(path.join(__dirname, 'public')));
|
||||
@@ -266,8 +366,8 @@ app.get('/', (req, res) => {
|
||||
app.get('/api/discovery/nodes', (req, res) => {
|
||||
const nodes = Array.from(discoveredNodes.values()).map(node => ({
|
||||
...node,
|
||||
discoveredAt: node.discoveredAt.toISOString(),
|
||||
lastSeen: node.lastSeen.toISOString(),
|
||||
discoveredAt: new Date(node.discoveredAt * 1000).toISOString(),
|
||||
lastSeen: new Date(node.lastSeen * 1000).toISOString(),
|
||||
isPrimary: node.ip === primaryNodeIp
|
||||
}));
|
||||
|
||||
@@ -288,12 +388,15 @@ app.get('/api/discovery/nodes', (req, res) => {
|
||||
// API endpoint to manually trigger discovery refresh
|
||||
app.post('/api/discovery/refresh', (req, res) => {
|
||||
try {
|
||||
// Clean up stale nodes
|
||||
cleanupStaleNodes();
|
||||
// Mark stale nodes as inactive
|
||||
markStaleNodes();
|
||||
|
||||
// Try to update the client
|
||||
updateSporeClient();
|
||||
|
||||
// Broadcast cluster update via WebSocket
|
||||
broadcastMemberListChange('manual refresh');
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
message: 'Discovery refresh completed',
|
||||
@@ -310,6 +413,27 @@ app.post('/api/discovery/refresh', (req, res) => {
|
||||
}
|
||||
});
|
||||
|
||||
// API endpoint to test WebSocket broadcasting
|
||||
app.post('/api/test/websocket', (req, res) => {
|
||||
try {
|
||||
console.log('🧪 Manual WebSocket test triggered');
|
||||
broadcastMemberListChange('manual test');
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
message: 'WebSocket test broadcast sent',
|
||||
websocketClients: wsClients.size,
|
||||
totalNodes: discoveredNodes.size
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error during WebSocket test:', error);
|
||||
res.status(500).json({
|
||||
error: 'WebSocket test failed',
|
||||
message: error.message
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// API endpoint to randomly select a new primary node
|
||||
app.post('/api/discovery/random-primary', (req, res) => {
|
||||
try {
|
||||
@@ -367,6 +491,7 @@ app.post('/api/discovery/primary/:ip', (req, res) => {
|
||||
|
||||
primaryNodeIp = requestedIp;
|
||||
updateSporeClient();
|
||||
broadcastMemberListChange('manual primary node setting');
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
@@ -721,11 +846,216 @@ app.get('/api/health', (req, res) => {
|
||||
|
||||
|
||||
|
||||
// WebSocket server setup - will be initialized after HTTP server
|
||||
let wss = null;
|
||||
const wsClients = new Set();
|
||||
|
||||
// Function to broadcast cluster updates to all connected WebSocket clients
|
||||
function broadcastClusterUpdate() {
|
||||
if (wsClients.size === 0 || !wss) return;
|
||||
|
||||
const startTime = Date.now();
|
||||
console.log(`📡 [${new Date().toISOString()}] Starting cluster update broadcast to ${wsClients.size} clients`);
|
||||
|
||||
// Get cluster members asynchronously
|
||||
getCurrentClusterMembers().then(members => {
|
||||
const clusterData = {
|
||||
type: 'cluster_update',
|
||||
members: members,
|
||||
primaryNode: primaryNodeIp,
|
||||
totalNodes: discoveredNodes.size,
|
||||
timestamp: new Date().toISOString()
|
||||
};
|
||||
|
||||
const message = JSON.stringify(clusterData);
|
||||
const broadcastTime = Date.now() - startTime;
|
||||
console.log(`📡 [${new Date().toISOString()}] Broadcasting cluster update to ${wsClients.size} WebSocket clients (took ${broadcastTime}ms)`);
|
||||
console.log(`📊 Cluster data: ${members.length} members, primary: ${primaryNodeIp || 'none'}`);
|
||||
|
||||
wsClients.forEach((client) => {
|
||||
if (client.readyState === WebSocket.OPEN) {
|
||||
client.send(message);
|
||||
}
|
||||
});
|
||||
}).catch(error => {
|
||||
console.error('Error broadcasting cluster update:', error);
|
||||
});
|
||||
}
|
||||
|
||||
// Function to broadcast node discovery events
|
||||
function broadcastNodeDiscovery(nodeIp, action) {
|
||||
if (wsClients.size === 0 || !wss) return;
|
||||
|
||||
const eventData = {
|
||||
type: 'node_discovery',
|
||||
action: action, // 'discovered' or 'stale'
|
||||
nodeIp: nodeIp,
|
||||
timestamp: new Date().toISOString()
|
||||
};
|
||||
|
||||
const message = JSON.stringify(eventData);
|
||||
wsClients.forEach((client) => {
|
||||
if (client.readyState === WebSocket.OPEN) {
|
||||
client.send(message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Helper function to broadcast member list changes
|
||||
function broadcastMemberListChange(reason = 'update') {
|
||||
const timestamp = new Date().toISOString();
|
||||
console.log(`🔄 [${timestamp}] Member list changed (${reason}), broadcasting update`);
|
||||
broadcastClusterUpdate();
|
||||
}
|
||||
|
||||
// Helper function to get current cluster members (async version)
|
||||
async function getCurrentClusterMembers() {
|
||||
try {
|
||||
if (discoveredNodes.size === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
// Fetch real cluster data from SPORE nodes for accurate information
|
||||
console.log(`📡 Fetching real cluster data from ${discoveredNodes.size} nodes for WebSocket broadcast`);
|
||||
const clusterResponse = await performWithFailover((client) => client.getClusterStatus());
|
||||
const apiMembers = clusterResponse.members || [];
|
||||
|
||||
// Update our local discoveredNodes with fresh information from the API
|
||||
let updatedNodes = false;
|
||||
apiMembers.forEach(apiMember => {
|
||||
const localNode = discoveredNodes.get(apiMember.ip);
|
||||
if (localNode) {
|
||||
// Update local node with fresh API data
|
||||
const needsUpdate =
|
||||
localNode.hostname !== apiMember.hostname ||
|
||||
localNode.status !== apiMember.status ||
|
||||
localNode.latency !== apiMember.latency ||
|
||||
JSON.stringify(localNode.labels) !== JSON.stringify(apiMember.labels);
|
||||
|
||||
if (needsUpdate) {
|
||||
console.log(`🔄 Updating local node ${apiMember.ip} with fresh API data`);
|
||||
localNode.hostname = apiMember.hostname;
|
||||
localNode.status = apiMember.status;
|
||||
localNode.latency = apiMember.latency;
|
||||
localNode.labels = apiMember.labels || {};
|
||||
localNode.lastSeen = Math.floor(Date.now() / 1000);
|
||||
updatedNodes = true;
|
||||
}
|
||||
} else {
|
||||
// New node discovered via API - shouldn't happen but handle it
|
||||
console.log(`🆕 New node discovered via API: ${apiMember.ip}`);
|
||||
discoveredNodes.set(apiMember.ip, {
|
||||
ip: apiMember.ip,
|
||||
hostname: apiMember.hostname,
|
||||
status: apiMember.status,
|
||||
latency: apiMember.latency,
|
||||
labels: apiMember.labels || {},
|
||||
discoveredAt: new Date(),
|
||||
lastSeen: Math.floor(Date.now() / 1000)
|
||||
});
|
||||
updatedNodes = true;
|
||||
}
|
||||
});
|
||||
|
||||
// If we updated any nodes, broadcast the changes
|
||||
if (updatedNodes) {
|
||||
console.log(`📡 Local node data updated, triggering immediate broadcast`);
|
||||
// Note: We don't call broadcastMemberListChange here because we're already in the middle of a broadcast
|
||||
// The calling function will handle the broadcast
|
||||
}
|
||||
|
||||
// Enhance API data with our local status information
|
||||
const enhancedMembers = apiMembers.map(apiMember => {
|
||||
const localNode = discoveredNodes.get(apiMember.ip);
|
||||
if (localNode) {
|
||||
// Use our local status (which may be 'inactive' if the node became stale)
|
||||
return {
|
||||
...apiMember,
|
||||
status: localNode.status || apiMember.status,
|
||||
hostname: localNode.hostname || apiMember.hostname,
|
||||
lastSeen: localNode.lastSeen || apiMember.lastSeen,
|
||||
labels: localNode.labels || apiMember.labels || {},
|
||||
resources: localNode.resources || apiMember.resources || {}
|
||||
};
|
||||
}
|
||||
return apiMember;
|
||||
});
|
||||
|
||||
console.log(`📊 Returning ${enhancedMembers.length} enhanced cluster members via WebSocket`);
|
||||
return enhancedMembers;
|
||||
} catch (error) {
|
||||
console.error('Error getting cluster members for WebSocket:', error);
|
||||
|
||||
// Fallback to local data if API fails
|
||||
console.log('⚠️ API failed, falling back to local discoveredNodes data');
|
||||
const fallbackMembers = Array.from(discoveredNodes.values()).map(node => ({
|
||||
ip: node.ip,
|
||||
hostname: node.hostname || 'Unknown Device',
|
||||
status: node.status || 'active', // Use stored status (may be 'inactive')
|
||||
latency: node.latency || 0,
|
||||
lastSeen: node.lastSeen || Math.floor(Date.now() / 1000),
|
||||
labels: node.labels || {},
|
||||
resources: node.resources || {}
|
||||
}));
|
||||
|
||||
console.log(`📊 Fallback: Returning ${fallbackMembers.length} local cluster members`);
|
||||
return fallbackMembers;
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize WebSocket server after HTTP server is created
|
||||
function initializeWebSocketServer(httpServer) {
|
||||
wss = new WebSocket.Server({ server: httpServer });
|
||||
|
||||
// WebSocket connection handler
|
||||
wss.on('connection', (ws) => {
|
||||
console.log('WebSocket client connected');
|
||||
wsClients.add(ws);
|
||||
|
||||
// Send current cluster state to newly connected client
|
||||
if (discoveredNodes.size > 0) {
|
||||
// Get cluster members asynchronously without blocking
|
||||
getCurrentClusterMembers().then(members => {
|
||||
const clusterData = {
|
||||
type: 'cluster_update',
|
||||
members: members,
|
||||
primaryNode: primaryNodeIp,
|
||||
totalNodes: discoveredNodes.size,
|
||||
timestamp: new Date().toISOString()
|
||||
};
|
||||
console.log(`🔌 Sending initial cluster state to new WebSocket client: ${members.length} members`);
|
||||
ws.send(JSON.stringify(clusterData));
|
||||
}).catch(error => {
|
||||
console.error('Error sending initial cluster state:', error);
|
||||
});
|
||||
}
|
||||
|
||||
// Handle client disconnection
|
||||
ws.on('close', () => {
|
||||
console.log('WebSocket client disconnected');
|
||||
wsClients.delete(ws);
|
||||
});
|
||||
|
||||
// Handle WebSocket errors
|
||||
ws.on('error', (error) => {
|
||||
console.error('WebSocket error:', error);
|
||||
wsClients.delete(ws);
|
||||
});
|
||||
});
|
||||
|
||||
console.log('WebSocket server initialized');
|
||||
}
|
||||
|
||||
// Start the server
|
||||
const server = app.listen(PORT, '0.0.0.0', () => {
|
||||
console.log(`Server is running on http://0.0.0.0:${PORT}`);
|
||||
console.log(`Accessible from: http://YOUR_COMPUTER_IP:${PORT}`);
|
||||
console.log(`UDP discovery server listening on port ${UDP_PORT}`);
|
||||
|
||||
// Initialize WebSocket server after HTTP server is running
|
||||
initializeWebSocketServer(server);
|
||||
console.log('WebSocket server ready for real-time updates');
|
||||
|
||||
console.log('Waiting for CLUSTER_DISCOVERY messages from SPORE nodes...');
|
||||
});
|
||||
|
||||
|
||||
24
package-lock.json
generated
24
package-lock.json
generated
@@ -11,7 +11,8 @@
|
||||
"dependencies": {
|
||||
"cors": "^2.8.5",
|
||||
"express": "^5.1.0",
|
||||
"express-fileupload": "^1.4.3"
|
||||
"express-fileupload": "^1.4.3",
|
||||
"ws": "^8.18.3"
|
||||
}
|
||||
},
|
||||
"node_modules/accepts": {
|
||||
@@ -875,6 +876,27 @@
|
||||
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
|
||||
"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/ws": {
|
||||
"version": "8.18.3",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
|
||||
"integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"bufferutil": "^4.0.1",
|
||||
"utf-8-validate": ">=5.0.2"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"bufferutil": {
|
||||
"optional": true
|
||||
},
|
||||
"utf-8-validate": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -31,6 +31,7 @@
|
||||
"dependencies": {
|
||||
"cors": "^2.8.5",
|
||||
"express": "^5.1.0",
|
||||
"express-fileupload": "^1.4.3"
|
||||
"express-fileupload": "^1.4.3",
|
||||
"ws": "^8.18.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -124,3 +124,165 @@ class ApiClient {
|
||||
|
||||
// Global API client instance
|
||||
window.apiClient = new ApiClient();
|
||||
|
||||
// WebSocket Client for real-time updates
|
||||
class WebSocketClient {
|
||||
constructor() {
|
||||
this.ws = null;
|
||||
this.reconnectAttempts = 0;
|
||||
this.maxReconnectAttempts = 5;
|
||||
this.reconnectDelay = 1000; // Start with 1 second
|
||||
this.listeners = new Map();
|
||||
this.isConnected = false;
|
||||
|
||||
// Auto-detect WebSocket URL based on current location
|
||||
const currentHost = window.location.hostname;
|
||||
const currentPort = window.location.port;
|
||||
|
||||
// Use ws:// for HTTP and wss:// for HTTPS
|
||||
const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
|
||||
if (currentHost === 'localhost' || currentHost === '127.0.0.1') {
|
||||
this.wsUrl = `${wsProtocol}//localhost:3001`;
|
||||
} else {
|
||||
this.wsUrl = `${wsProtocol}//${currentHost}:3001`;
|
||||
}
|
||||
|
||||
logger.debug('WebSocket Client initialized with URL:', this.wsUrl);
|
||||
this.connect();
|
||||
}
|
||||
|
||||
connect() {
|
||||
try {
|
||||
this.ws = new WebSocket(this.wsUrl);
|
||||
this.setupEventListeners();
|
||||
} catch (error) {
|
||||
logger.error('Failed to create WebSocket connection:', error);
|
||||
this.scheduleReconnect();
|
||||
}
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
this.ws.onopen = () => {
|
||||
logger.debug('WebSocket connected');
|
||||
this.isConnected = true;
|
||||
this.reconnectAttempts = 0;
|
||||
this.reconnectDelay = 1000;
|
||||
|
||||
// Notify listeners of connection
|
||||
this.emit('connected');
|
||||
};
|
||||
|
||||
this.ws.onmessage = (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
logger.debug('WebSocket message received:', data);
|
||||
logger.debug('WebSocket message type:', data.type);
|
||||
this.emit('message', data);
|
||||
this.handleMessage(data);
|
||||
} catch (error) {
|
||||
logger.error('Failed to parse WebSocket message:', error);
|
||||
}
|
||||
};
|
||||
|
||||
this.ws.onclose = (event) => {
|
||||
logger.debug('WebSocket disconnected:', event.code, event.reason);
|
||||
this.isConnected = false;
|
||||
this.emit('disconnected');
|
||||
|
||||
if (event.code !== 1000) { // Not a normal closure
|
||||
this.scheduleReconnect();
|
||||
}
|
||||
};
|
||||
|
||||
this.ws.onerror = (error) => {
|
||||
logger.error('WebSocket error:', error);
|
||||
this.emit('error', error);
|
||||
};
|
||||
}
|
||||
|
||||
handleMessage(data) {
|
||||
switch (data.type) {
|
||||
case 'cluster_update':
|
||||
this.emit('clusterUpdate', data);
|
||||
break;
|
||||
case 'node_discovery':
|
||||
this.emit('nodeDiscovery', data);
|
||||
break;
|
||||
default:
|
||||
logger.debug('Unknown WebSocket message type:', data.type);
|
||||
}
|
||||
}
|
||||
|
||||
scheduleReconnect() {
|
||||
if (this.reconnectAttempts >= this.maxReconnectAttempts) {
|
||||
logger.error('Max reconnection attempts reached');
|
||||
this.emit('maxReconnectAttemptsReached');
|
||||
return;
|
||||
}
|
||||
|
||||
this.reconnectAttempts++;
|
||||
const delay = this.reconnectDelay * Math.pow(2, this.reconnectAttempts - 1); // Exponential backoff
|
||||
|
||||
logger.debug(`Scheduling WebSocket reconnect attempt ${this.reconnectAttempts}/${this.maxReconnectAttempts} in ${delay}ms`);
|
||||
|
||||
setTimeout(() => {
|
||||
this.connect();
|
||||
}, delay);
|
||||
}
|
||||
|
||||
on(event, callback) {
|
||||
if (!this.listeners.has(event)) {
|
||||
this.listeners.set(event, []);
|
||||
}
|
||||
this.listeners.get(event).push(callback);
|
||||
}
|
||||
|
||||
off(event, callback) {
|
||||
if (this.listeners.has(event)) {
|
||||
const callbacks = this.listeners.get(event);
|
||||
const index = callbacks.indexOf(callback);
|
||||
if (index > -1) {
|
||||
callbacks.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
emit(event, ...args) {
|
||||
if (this.listeners.has(event)) {
|
||||
this.listeners.get(event).forEach(callback => {
|
||||
try {
|
||||
callback(...args);
|
||||
} catch (error) {
|
||||
logger.error('Error in WebSocket event listener:', error);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
send(data) {
|
||||
if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
||||
this.ws.send(JSON.stringify(data));
|
||||
} else {
|
||||
logger.warn('WebSocket not connected, cannot send data');
|
||||
}
|
||||
}
|
||||
|
||||
disconnect() {
|
||||
if (this.ws) {
|
||||
this.ws.close(1000, 'Client disconnect');
|
||||
}
|
||||
}
|
||||
|
||||
getConnectionStatus() {
|
||||
return {
|
||||
connected: this.isConnected,
|
||||
reconnectAttempts: this.reconnectAttempts,
|
||||
maxReconnectAttempts: this.maxReconnectAttempts,
|
||||
url: this.wsUrl
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Global WebSocket client instance
|
||||
window.wsClient = new WebSocketClient();
|
||||
@@ -301,8 +301,17 @@ class ClusterMembersComponent extends Component {
|
||||
// Update status
|
||||
const statusElement = card.querySelector('.member-status');
|
||||
if (statusElement) {
|
||||
const statusClass = (member.status && member.status.toUpperCase() === 'ACTIVE') ? 'status-online' : 'status-offline';
|
||||
const statusIcon = (member.status && member.status.toUpperCase() === 'ACTIVE') ? window.icon('dotGreen', { width: 12, height: 12 }) : window.icon('dotRed', { width: 12, height: 12 });
|
||||
let statusClass, statusIcon;
|
||||
if (member.status && member.status.toUpperCase() === 'ACTIVE') {
|
||||
statusClass = 'status-online';
|
||||
statusIcon = window.icon('dotGreen', { width: 12, height: 12 });
|
||||
} else if (member.status && member.status.toUpperCase() === 'INACTIVE') {
|
||||
statusClass = 'status-dead';
|
||||
statusIcon = window.icon('dotRed', { width: 12, height: 12 });
|
||||
} else {
|
||||
statusClass = 'status-offline';
|
||||
statusIcon = window.icon('dotRed', { width: 12, height: 12 });
|
||||
}
|
||||
|
||||
statusElement.className = `member-status ${statusClass}`;
|
||||
statusElement.innerHTML = `${statusIcon}`;
|
||||
@@ -405,8 +414,17 @@ class ClusterMembersComponent extends Component {
|
||||
logger.debug('ClusterMembersComponent: renderMembers() called with', members.length, 'members');
|
||||
|
||||
const membersHTML = members.map(member => {
|
||||
const statusClass = (member.status && member.status.toUpperCase() === 'ACTIVE') ? 'status-online' : 'status-offline';
|
||||
const statusIcon = (member.status && member.status.toUpperCase() === 'ACTIVE') ? window.icon('dotGreen', { width: 12, height: 12 }) : window.icon('dotRed', { width: 12, height: 12 });
|
||||
let statusClass, statusIcon;
|
||||
if (member.status && member.status.toUpperCase() === 'ACTIVE') {
|
||||
statusClass = 'status-online';
|
||||
statusIcon = window.icon('dotGreen', { width: 12, height: 12 });
|
||||
} else if (member.status && member.status.toUpperCase() === 'INACTIVE') {
|
||||
statusClass = 'status-dead';
|
||||
statusIcon = window.icon('dotRed', { width: 12, height: 12 });
|
||||
} else {
|
||||
statusClass = 'status-offline';
|
||||
statusIcon = window.icon('dotRed', { width: 12, height: 12 });
|
||||
}
|
||||
|
||||
logger.debug('ClusterMembersComponent: Rendering member:', member);
|
||||
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
class ClusterStatusComponent extends Component {
|
||||
constructor(container, viewModel, eventBus) {
|
||||
super(container, viewModel, eventBus);
|
||||
this.wsConnected = false;
|
||||
this.wsReconnectAttempts = 0;
|
||||
}
|
||||
|
||||
setupViewModelListeners() {
|
||||
@@ -9,6 +11,37 @@ class ClusterStatusComponent extends Component {
|
||||
this.subscribeToProperty('totalNodes', this.render.bind(this));
|
||||
this.subscribeToProperty('clientInitialized', this.render.bind(this));
|
||||
this.subscribeToProperty('error', this.render.bind(this));
|
||||
|
||||
// Set up WebSocket status listeners
|
||||
this.setupWebSocketListeners();
|
||||
}
|
||||
|
||||
setupWebSocketListeners() {
|
||||
if (!window.wsClient) return;
|
||||
|
||||
window.wsClient.on('connected', () => {
|
||||
this.wsConnected = true;
|
||||
this.wsReconnectAttempts = 0;
|
||||
this.render();
|
||||
});
|
||||
|
||||
window.wsClient.on('disconnected', () => {
|
||||
this.wsConnected = false;
|
||||
this.render();
|
||||
});
|
||||
|
||||
window.wsClient.on('maxReconnectAttemptsReached', () => {
|
||||
this.wsConnected = false;
|
||||
this.wsReconnectAttempts = window.wsClient ? window.wsClient.reconnectAttempts : 0;
|
||||
this.render();
|
||||
});
|
||||
|
||||
// Initialize current WebSocket status
|
||||
if (window.wsClient) {
|
||||
const status = window.wsClient.getConnectionStatus();
|
||||
this.wsConnected = status.connected;
|
||||
this.wsReconnectAttempts = status.reconnectAttempts;
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
@@ -17,6 +50,20 @@ class ClusterStatusComponent extends Component {
|
||||
const error = this.viewModel.get('error');
|
||||
|
||||
let statusText, statusIcon, statusClass;
|
||||
let wsStatusText = '';
|
||||
let wsStatusIcon = '';
|
||||
|
||||
// Determine WebSocket status
|
||||
if (this.wsConnected) {
|
||||
wsStatusIcon = window.icon('dotGreen', { width: 10, height: 10 });
|
||||
wsStatusText = 'Live';
|
||||
} else if (this.wsReconnectAttempts > 0) {
|
||||
wsStatusIcon = window.icon('dotYellow', { width: 10, height: 10 });
|
||||
wsStatusText = 'Reconnecting';
|
||||
} else {
|
||||
wsStatusIcon = window.icon('dotRed', { width: 10, height: 10 });
|
||||
wsStatusText = 'Offline';
|
||||
}
|
||||
|
||||
if (error) {
|
||||
statusText = 'Cluster Error';
|
||||
@@ -38,13 +85,29 @@ class ClusterStatusComponent extends Component {
|
||||
|
||||
// Update the cluster status badge using the container passed to this component
|
||||
if (this.container) {
|
||||
this.container.innerHTML = `${statusIcon} ${statusText}`;
|
||||
// Create HTML with both cluster and WebSocket status on a single compact line
|
||||
this.container.innerHTML = `
|
||||
<div class="cluster-status-compact">
|
||||
<span class="cluster-status-main">${statusIcon} ${statusText}</span>
|
||||
<span class="websocket-status" title="WebSocket Connection: ${wsStatusText}">${wsStatusIcon} ${wsStatusText}</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Remove all existing status classes
|
||||
this.container.classList.remove('cluster-status-online', 'cluster-status-offline', 'cluster-status-connecting', 'cluster-status-error');
|
||||
|
||||
// Add the appropriate status class
|
||||
this.container.classList.add(statusClass);
|
||||
|
||||
// Add WebSocket connection class
|
||||
this.container.classList.remove('ws-connected', 'ws-disconnected', 'ws-reconnecting');
|
||||
if (this.wsConnected) {
|
||||
this.container.classList.add('ws-connected');
|
||||
} else if (this.wsReconnectAttempts > 0) {
|
||||
this.container.classList.add('ws-reconnecting');
|
||||
} else {
|
||||
this.container.classList.add('ws-disconnected');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -21,6 +21,74 @@ class ClusterViewModel extends ViewModel {
|
||||
setTimeout(() => {
|
||||
this.updatePrimaryNodeDisplay();
|
||||
}, 100);
|
||||
|
||||
// Set up WebSocket listeners for real-time updates
|
||||
this.setupWebSocketListeners();
|
||||
}
|
||||
|
||||
// Set up WebSocket event listeners
|
||||
setupWebSocketListeners() {
|
||||
if (!window.wsClient) {
|
||||
logger.warn('WebSocket client not available');
|
||||
return;
|
||||
}
|
||||
|
||||
// Listen for cluster updates
|
||||
window.wsClient.on('clusterUpdate', (data) => {
|
||||
logger.debug('ClusterViewModel: Received WebSocket cluster update:', data);
|
||||
|
||||
// Update members from WebSocket data
|
||||
if (data.members && Array.isArray(data.members)) {
|
||||
const onlineNodes = data.members.filter(m => m && m.status && m.status.toUpperCase() === 'ACTIVE').length;
|
||||
|
||||
logger.debug(`ClusterViewModel: Updating members from ${this.get('members')?.length || 0} to ${data.members.length} members`);
|
||||
|
||||
this.batchUpdate({
|
||||
members: data.members,
|
||||
lastUpdateTime: data.timestamp || new Date().toISOString(),
|
||||
onlineNodes: onlineNodes
|
||||
});
|
||||
|
||||
// Update primary node display if it changed
|
||||
if (data.primaryNode !== this.get('primaryNode')) {
|
||||
logger.debug(`ClusterViewModel: Primary node changed from ${this.get('primaryNode')} to ${data.primaryNode}`);
|
||||
this.set('primaryNode', data.primaryNode);
|
||||
this.set('totalNodes', data.totalNodes || 0);
|
||||
}
|
||||
} else {
|
||||
logger.warn('ClusterViewModel: Received cluster update but no valid members array:', data);
|
||||
}
|
||||
});
|
||||
|
||||
// Listen for node discovery events
|
||||
window.wsClient.on('nodeDiscovery', (data) => {
|
||||
logger.debug('ClusterViewModel: Received WebSocket node discovery event:', data);
|
||||
|
||||
if (data.action === 'discovered') {
|
||||
// A new node was discovered - trigger a cluster update
|
||||
setTimeout(() => {
|
||||
this.updateClusterMembers();
|
||||
}, 500);
|
||||
} else if (data.action === 'stale') {
|
||||
// A node became stale - trigger a cluster update
|
||||
setTimeout(() => {
|
||||
this.updateClusterMembers();
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
|
||||
// Listen for connection status changes
|
||||
window.wsClient.on('connected', () => {
|
||||
logger.debug('ClusterViewModel: WebSocket connected');
|
||||
// Optionally trigger an immediate update when connection is restored
|
||||
setTimeout(() => {
|
||||
this.updateClusterMembers();
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
window.wsClient.on('disconnected', () => {
|
||||
logger.debug('ClusterViewModel: WebSocket disconnected');
|
||||
});
|
||||
}
|
||||
|
||||
// Update cluster members
|
||||
@@ -28,6 +96,17 @@ class ClusterViewModel extends ViewModel {
|
||||
try {
|
||||
logger.debug('ClusterViewModel: updateClusterMembers called');
|
||||
|
||||
// Check if we have recent WebSocket data (within last 30 seconds)
|
||||
const lastUpdateTime = this.get('lastUpdateTime');
|
||||
const now = new Date();
|
||||
const websocketDataAge = lastUpdateTime ? (now - new Date(lastUpdateTime)) : Infinity;
|
||||
|
||||
// If WebSocket data is recent, skip REST API call to avoid conflicts
|
||||
if (websocketDataAge < 30000 && this.get('members').length > 0) {
|
||||
logger.debug('ClusterViewModel: Using recent WebSocket data, skipping REST API call');
|
||||
return;
|
||||
}
|
||||
|
||||
// Store current UI state before update
|
||||
const currentUIState = this.getAllUIState();
|
||||
const currentExpandedCards = this.get('expandedCards');
|
||||
|
||||
@@ -1386,6 +1386,31 @@ p {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Compact Cluster Status Layout */
|
||||
.cluster-status-compact {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.cluster-status-compact .cluster-status-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.cluster-status-compact .websocket-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.8;
|
||||
padding-left: 0.75rem;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* Cluster Status States */
|
||||
.cluster-status-online {
|
||||
background: linear-gradient(135deg, rgba(0, 255, 0, 0.15) 0%, rgba(0, 255, 0, 0.08) 100%);
|
||||
|
||||
@@ -175,6 +175,42 @@
|
||||
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);
|
||||
}
|
||||
|
||||
/* Cluster Status with WebSocket Indicator */
|
||||
.cluster-status {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
align-items: flex-start;
|
||||
min-width: fit-content;
|
||||
}
|
||||
|
||||
.cluster-status-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.websocket-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* WebSocket connection status classes */
|
||||
.ws-connected .websocket-status {
|
||||
color: var(--accent-success);
|
||||
}
|
||||
|
||||
.ws-disconnected .websocket-status {
|
||||
color: var(--accent-error);
|
||||
}
|
||||
|
||||
.ws-reconnecting .websocket-status {
|
||||
color: var(--accent-warning);
|
||||
}
|
||||
|
||||
[data-theme="light"] .cluster-status {
|
||||
background: linear-gradient(135deg, rgba(5, 150, 105, 0.15) 0%, rgba(5, 150, 105, 0.08) 100%);
|
||||
backdrop-filter: blur(15px);
|
||||
@@ -183,6 +219,18 @@
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
[data-theme="light"] .ws-connected .websocket-status {
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
[data-theme="light"] .ws-disconnected .websocket-status {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
[data-theme="light"] .ws-reconnecting .websocket-status {
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-switcher {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(20px);
|
||||
@@ -416,6 +464,31 @@
|
||||
border: 1px solid rgba(220, 38, 38, 0.3);
|
||||
}
|
||||
|
||||
/* Status classes for dark theme (default) */
|
||||
.status-online {
|
||||
background: rgba(74, 222, 128, 0.15);
|
||||
color: var(--accent-success);
|
||||
border: 1px solid rgba(74, 222, 128, 0.3);
|
||||
}
|
||||
|
||||
.status-offline {
|
||||
background: rgba(248, 113, 113, 0.15);
|
||||
color: var(--accent-error);
|
||||
border: 1px solid rgba(248, 113, 113, 0.3);
|
||||
}
|
||||
|
||||
.status-dead {
|
||||
background: rgba(251, 146, 60, 0.15);
|
||||
color: #fb923c;
|
||||
border: 1px solid rgba(251, 146, 60, 0.3);
|
||||
}
|
||||
|
||||
[data-theme="light"] .status-dead {
|
||||
background: rgba(139, 69, 19, 0.15);
|
||||
color: #8b4513;
|
||||
border: 1px solid rgba(139, 69, 19, 0.3);
|
||||
}
|
||||
|
||||
[data-theme="light"] .status-inactive {
|
||||
background: rgba(245, 158, 11, 0.15);
|
||||
color: #f59e0b;
|
||||
|
||||
Reference in New Issue
Block a user