1381 lines
49 KiB
JavaScript
1381 lines
49 KiB
JavaScript
// View Models for SPORE UI Components
|
|
|
|
// Cluster View Model
|
|
class ClusterViewModel extends ViewModel {
|
|
constructor() {
|
|
super();
|
|
this.setMultiple({
|
|
members: [],
|
|
primaryNode: null,
|
|
totalNodes: 0,
|
|
clientInitialized: false,
|
|
isLoading: false,
|
|
error: null,
|
|
expandedCards: new Map(),
|
|
activeTabs: new Map(), // Store active tab for each node
|
|
lastUpdateTime: null,
|
|
onlineNodes: 0
|
|
});
|
|
|
|
// Initialize cluster status after a short delay to allow components to subscribe
|
|
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
|
|
async updateClusterMembers() {
|
|
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');
|
|
const currentActiveTabs = this.get('activeTabs');
|
|
|
|
this.set('isLoading', true);
|
|
this.set('error', null);
|
|
|
|
logger.debug('ClusterViewModel: Fetching cluster members...');
|
|
const response = await window.apiClient.getClusterMembers();
|
|
logger.debug('ClusterViewModel: Got response:', response);
|
|
|
|
const members = response.members || [];
|
|
const onlineNodes = Array.isArray(members)
|
|
? members.filter(m => m && m.status && m.status.toUpperCase() === 'ACTIVE').length
|
|
: 0;
|
|
|
|
// Use batch update
|
|
this.batchUpdate({
|
|
members: members,
|
|
lastUpdateTime: new Date().toISOString(),
|
|
onlineNodes: onlineNodes
|
|
});
|
|
|
|
// Restore expanded cards and active tabs
|
|
this.set('expandedCards', currentExpandedCards);
|
|
this.set('activeTabs', currentActiveTabs);
|
|
|
|
// Update primary node display
|
|
logger.debug('ClusterViewModel: Updating primary node display...');
|
|
await this.updatePrimaryNodeDisplay();
|
|
|
|
} catch (error) {
|
|
console.error('ClusterViewModel: Failed to fetch cluster members:', error);
|
|
this.set('error', error.message);
|
|
} finally {
|
|
this.set('isLoading', false);
|
|
logger.debug('ClusterViewModel: updateClusterMembers completed');
|
|
}
|
|
}
|
|
|
|
// Update primary node display
|
|
async updatePrimaryNodeDisplay() {
|
|
try {
|
|
const discoveryInfo = await window.apiClient.getDiscoveryInfo();
|
|
|
|
// Use batch update
|
|
const updates = {};
|
|
|
|
if (discoveryInfo.primaryNode) {
|
|
updates.primaryNode = discoveryInfo.primaryNode;
|
|
updates.clientInitialized = discoveryInfo.clientInitialized;
|
|
updates.totalNodes = discoveryInfo.totalNodes;
|
|
} else if (discoveryInfo.totalNodes > 0) {
|
|
updates.primaryNode = discoveryInfo.nodes[0]?.ip;
|
|
updates.clientInitialized = false;
|
|
updates.totalNodes = discoveryInfo.totalNodes;
|
|
} else {
|
|
updates.primaryNode = null;
|
|
updates.clientInitialized = false;
|
|
updates.totalNodes = 0;
|
|
}
|
|
|
|
this.batchUpdate(updates);
|
|
|
|
} catch (error) {
|
|
console.error('Failed to fetch discovery info:', error);
|
|
this.set('error', error.message);
|
|
}
|
|
}
|
|
|
|
// Select random primary node
|
|
async selectRandomPrimaryNode() {
|
|
try {
|
|
const result = await window.apiClient.selectRandomPrimaryNode();
|
|
|
|
if (result.success) {
|
|
// Update the display after a short delay
|
|
setTimeout(() => {
|
|
this.updatePrimaryNodeDisplay();
|
|
}, 1500);
|
|
|
|
return result;
|
|
} else {
|
|
throw new Error(result.message || 'Random selection failed');
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to select random primary node:', error);
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
// Store expanded card state
|
|
storeExpandedCard(memberIp, content) {
|
|
const expandedCards = this.get('expandedCards');
|
|
expandedCards.set(memberIp, content);
|
|
this.set('expandedCards', expandedCards);
|
|
|
|
// Also store in UI state for persistence
|
|
this.setUIState(`expanded_${memberIp}`, content);
|
|
}
|
|
|
|
// Get expanded card state
|
|
getExpandedCard(memberIp) {
|
|
const expandedCards = this.get('expandedCards');
|
|
return expandedCards.get(memberIp);
|
|
}
|
|
|
|
// Clear expanded card state
|
|
clearExpandedCard(memberIp) {
|
|
const expandedCards = this.get('expandedCards');
|
|
expandedCards.delete(memberIp);
|
|
this.set('expandedCards', expandedCards);
|
|
|
|
// Also clear from UI state
|
|
this.clearUIState(`expanded_${memberIp}`);
|
|
}
|
|
|
|
// Store active tab for a specific node
|
|
storeActiveTab(memberIp, tabName) {
|
|
const activeTabs = this.get('activeTabs');
|
|
activeTabs.set(memberIp, tabName);
|
|
this.set('activeTabs', activeTabs);
|
|
|
|
// Also store in UI state for persistence
|
|
this.setUIState(`activeTab_${memberIp}`, tabName);
|
|
}
|
|
|
|
// Get active tab for a specific node
|
|
getActiveTab(memberIp) {
|
|
const activeTabs = this.get('activeTabs');
|
|
return activeTabs.get(memberIp) || 'status'; // Default to 'status' tab
|
|
}
|
|
|
|
// Check if data has actually changed to avoid unnecessary updates
|
|
hasDataChanged(newData, dataType) {
|
|
const currentData = this.get(dataType);
|
|
|
|
if (Array.isArray(newData) && Array.isArray(currentData)) {
|
|
if (newData.length !== currentData.length) return true;
|
|
|
|
// Compare each member's key properties
|
|
return newData.some((newMember, index) => {
|
|
const currentMember = currentData[index];
|
|
return !currentMember ||
|
|
newMember.ip !== currentMember.ip ||
|
|
newMember.status !== currentMember.status ||
|
|
newMember.latency !== currentMember.latency;
|
|
});
|
|
}
|
|
|
|
return newData !== currentData;
|
|
}
|
|
|
|
// Smart update that only updates changed data
|
|
async smartUpdate() {
|
|
try {
|
|
logger.debug('ClusterViewModel: Performing smart update...');
|
|
|
|
// Fetch new data
|
|
const response = await window.apiClient.getClusterMembers();
|
|
const newMembers = response.members || [];
|
|
|
|
// Check if members data has actually changed
|
|
if (this.hasDataChanged(newMembers, 'members')) {
|
|
logger.debug('ClusterViewModel: Members data changed, updating...');
|
|
await this.updateClusterMembers();
|
|
} else {
|
|
logger.debug('ClusterViewModel: Members data unchanged, skipping update');
|
|
// Still update primary node display as it might have changed
|
|
await this.updatePrimaryNodeDisplay();
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('ClusterViewModel: Smart update failed:', error);
|
|
this.set('error', error.message);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Node Details View Model
|
|
class NodeDetailsViewModel extends ViewModel {
|
|
constructor() {
|
|
super();
|
|
this.setMultiple({
|
|
nodeStatus: null,
|
|
tasks: [],
|
|
isLoading: false,
|
|
error: null,
|
|
activeTab: 'status',
|
|
nodeIp: null,
|
|
endpoints: null,
|
|
tasksSummary: null,
|
|
monitoringResources: null
|
|
});
|
|
}
|
|
|
|
// Load node details
|
|
async loadNodeDetails(ip) {
|
|
try {
|
|
// Store current UI state
|
|
const currentActiveTab = this.get('activeTab');
|
|
|
|
this.set('isLoading', true);
|
|
this.set('error', null);
|
|
this.set('nodeIp', ip);
|
|
|
|
const nodeStatus = await window.apiClient.getNodeStatus(ip);
|
|
|
|
// Use batch update
|
|
this.batchUpdate({
|
|
nodeStatus: nodeStatus
|
|
});
|
|
|
|
// Restore active tab
|
|
this.set('activeTab', currentActiveTab);
|
|
|
|
// Load tasks data
|
|
await this.loadTasksData();
|
|
|
|
// Load endpoints data
|
|
await this.loadEndpointsData();
|
|
|
|
// Load monitoring resources data
|
|
await this.loadMonitoringResources();
|
|
|
|
} catch (error) {
|
|
console.error('Failed to load node details:', error);
|
|
this.set('error', error.message);
|
|
} finally {
|
|
this.set('isLoading', false);
|
|
}
|
|
}
|
|
|
|
// Load tasks data
|
|
async loadTasksData() {
|
|
try {
|
|
const ip = this.get('nodeIp');
|
|
const response = await window.apiClient.getTasksStatus(ip);
|
|
this.set('tasks', (response && Array.isArray(response.tasks)) ? response.tasks : []);
|
|
this.set('tasksSummary', response && response.summary ? response.summary : null);
|
|
} catch (error) {
|
|
console.error('Failed to load tasks:', error);
|
|
this.set('tasks', []);
|
|
this.set('tasksSummary', null);
|
|
}
|
|
}
|
|
|
|
// Load endpoints data
|
|
async loadEndpointsData() {
|
|
try {
|
|
const ip = this.get('nodeIp');
|
|
const response = await window.apiClient.getEndpoints(ip);
|
|
// Handle both real API (wrapped in endpoints) and mock API (direct array)
|
|
const endpointsData = (response && response.endpoints) ? response : { endpoints: response };
|
|
this.set('endpoints', endpointsData || null);
|
|
} catch (error) {
|
|
console.error('Failed to load endpoints:', error);
|
|
this.set('endpoints', null);
|
|
}
|
|
}
|
|
|
|
// Load monitoring resources data
|
|
async loadMonitoringResources() {
|
|
try {
|
|
const ip = this.get('nodeIp');
|
|
const response = await window.apiClient.getMonitoringResources(ip);
|
|
// Handle both real API (wrapped in data) and mock API (direct response)
|
|
const monitoringData = (response && response.data) ? response.data : response;
|
|
this.set('monitoringResources', monitoringData);
|
|
} catch (error) {
|
|
console.error('Failed to load monitoring resources:', error);
|
|
this.set('monitoringResources', null);
|
|
}
|
|
}
|
|
|
|
// Invoke an endpoint against this node
|
|
async callEndpoint(method, uri, params) {
|
|
const ip = this.get('nodeIp');
|
|
return window.apiClient.callEndpoint({ ip, method, uri, params });
|
|
}
|
|
|
|
// Set active tab with state persistence
|
|
setActiveTab(tabName) {
|
|
logger.debug('NodeDetailsViewModel: Setting activeTab to:', tabName);
|
|
this.set('activeTab', tabName);
|
|
|
|
// Store in UI state for persistence
|
|
this.setUIState('activeTab', tabName);
|
|
}
|
|
|
|
// Upload firmware
|
|
async uploadFirmware(file, nodeIp) {
|
|
try {
|
|
const result = await window.apiClient.uploadFirmware(file, nodeIp);
|
|
return result;
|
|
} catch (error) {
|
|
console.error('Firmware upload failed:', error);
|
|
throw error;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Firmware View Model
|
|
class FirmwareViewModel extends ViewModel {
|
|
constructor() {
|
|
super();
|
|
this.setMultiple({
|
|
selectedFile: null,
|
|
targetType: 'all',
|
|
specificNode: null,
|
|
availableNodes: [],
|
|
uploadProgress: null,
|
|
uploadResults: [],
|
|
isUploading: false,
|
|
selectedLabels: [],
|
|
availableLabels: []
|
|
});
|
|
}
|
|
|
|
// Set selected file
|
|
setSelectedFile(file) {
|
|
this.set('selectedFile', file);
|
|
}
|
|
|
|
// Set target type
|
|
setTargetType(type) {
|
|
this.set('targetType', type);
|
|
// Clear any previously selected labels when switching options
|
|
const currentLabels = this.get('selectedLabels') || [];
|
|
if (currentLabels.length > 0) {
|
|
this.set('selectedLabels', []);
|
|
}
|
|
}
|
|
|
|
// Set specific node
|
|
setSpecificNode(nodeIp) {
|
|
this.set('specificNode', nodeIp);
|
|
}
|
|
|
|
// Update available nodes
|
|
updateAvailableNodes(nodes) {
|
|
this.set('availableNodes', nodes);
|
|
// Compute availableLabels as unique key=value pairs from nodes' labels
|
|
try {
|
|
const labelSet = new Set();
|
|
(nodes || []).forEach(n => {
|
|
const labels = n && n.labels ? n.labels : {};
|
|
Object.entries(labels).forEach(([k, v]) => {
|
|
labelSet.add(`${k}=${v}`);
|
|
});
|
|
});
|
|
const availableLabels = Array.from(labelSet).sort((a, b) => a.localeCompare(b));
|
|
this.set('availableLabels', availableLabels);
|
|
// Prune selected labels that are no longer available
|
|
const selected = this.get('selectedLabels') || [];
|
|
const pruned = selected.filter(x => availableLabels.includes(x));
|
|
if (pruned.length !== selected.length) {
|
|
this.set('selectedLabels', pruned);
|
|
}
|
|
} catch (_) {
|
|
this.set('availableLabels', []);
|
|
this.set('selectedLabels', []);
|
|
}
|
|
}
|
|
|
|
// Start upload
|
|
startUpload() {
|
|
this.set('isUploading', true);
|
|
this.set('uploadProgress', {
|
|
current: 0,
|
|
total: 0,
|
|
status: 'Preparing...'
|
|
});
|
|
this.set('uploadResults', []);
|
|
}
|
|
|
|
// Update upload progress
|
|
updateUploadProgress(current, total, status) {
|
|
this.set('uploadProgress', {
|
|
current,
|
|
total,
|
|
status
|
|
});
|
|
}
|
|
|
|
// Add upload result
|
|
addUploadResult(result) {
|
|
const results = this.get('uploadResults');
|
|
results.push(result);
|
|
this.set('uploadResults', results);
|
|
}
|
|
|
|
// Complete upload
|
|
completeUpload() {
|
|
this.set('isUploading', false);
|
|
}
|
|
|
|
// Reset upload state
|
|
resetUploadState() {
|
|
this.set('selectedFile', null);
|
|
this.set('uploadProgress', null);
|
|
this.set('uploadResults', []);
|
|
this.set('isUploading', false);
|
|
}
|
|
|
|
// Set selected labels
|
|
setSelectedLabels(labels) {
|
|
this.set('selectedLabels', Array.isArray(labels) ? labels : []);
|
|
}
|
|
|
|
// Return nodes matching ALL selected label pairs
|
|
getAffectedNodesByLabels() {
|
|
const selected = this.get('selectedLabels') || [];
|
|
if (!selected.length) return [];
|
|
const selectedPairs = selected.map(s => {
|
|
const idx = String(s).indexOf('=');
|
|
return idx > -1 ? { key: s.slice(0, idx), value: s.slice(idx + 1) } : null;
|
|
}).filter(Boolean);
|
|
const nodes = this.get('availableNodes') || [];
|
|
return nodes.filter(n => {
|
|
const labels = n && n.labels ? n.labels : {};
|
|
return selectedPairs.every(p => String(labels[p.key]) === String(p.value));
|
|
});
|
|
}
|
|
|
|
// Check if deploy button should be enabled
|
|
isDeployEnabled() {
|
|
const hasFile = this.get('selectedFile') !== null;
|
|
const availableNodes = this.get('availableNodes');
|
|
const hasAvailableNodes = availableNodes && availableNodes.length > 0;
|
|
|
|
let isValidTarget = false;
|
|
if (this.get('targetType') === 'all') {
|
|
isValidTarget = hasAvailableNodes;
|
|
} else if (this.get('targetType') === 'specific') {
|
|
isValidTarget = hasAvailableNodes && this.get('specificNode');
|
|
} else if (this.get('targetType') === 'labels') {
|
|
const affected = this.getAffectedNodesByLabels();
|
|
isValidTarget = hasAvailableNodes && (this.get('selectedLabels') || []).length > 0 && affected.length > 0;
|
|
}
|
|
|
|
return hasFile && isValidTarget && !this.get('isUploading');
|
|
}
|
|
}
|
|
|
|
// Navigation View Model
|
|
class NavigationViewModel extends ViewModel {
|
|
constructor() {
|
|
super();
|
|
this.setMultiple({
|
|
activeView: 'cluster',
|
|
views: ['cluster', 'topology', 'firmware', 'monitoring']
|
|
});
|
|
}
|
|
|
|
// Set active view
|
|
setActiveView(viewName) {
|
|
this.set('activeView', viewName);
|
|
}
|
|
|
|
// Get active view
|
|
getActiveView() {
|
|
return this.get('activeView');
|
|
}
|
|
}
|
|
|
|
// Topology View Model for network topology visualization
|
|
class TopologyViewModel extends ViewModel {
|
|
constructor() {
|
|
super();
|
|
this.setMultiple({
|
|
nodes: [],
|
|
links: [],
|
|
isLoading: false,
|
|
error: null,
|
|
lastUpdateTime: null,
|
|
selectedNode: null,
|
|
topologyMode: 'mesh', // 'mesh' or 'star'
|
|
starCenterNode: null // IP of the center node in star mode
|
|
});
|
|
}
|
|
|
|
// Set up WebSocket event listeners for real-time topology updates
|
|
setupWebSocketListeners() {
|
|
if (!window.wsClient) {
|
|
logger.warn('TopologyViewModel: WebSocket client not available');
|
|
return;
|
|
}
|
|
|
|
// Listen for cluster updates
|
|
window.wsClient.on('clusterUpdate', (data) => {
|
|
logger.debug('TopologyViewModel: Received WebSocket cluster update:', data);
|
|
|
|
// Update topology from WebSocket data
|
|
if (data.members && Array.isArray(data.members)) {
|
|
logger.debug(`TopologyViewModel: Updating topology with ${data.members.length} members, primary: ${data.primaryNode}`);
|
|
|
|
// Build enhanced graph data from updated members with primary node info
|
|
this.buildEnhancedGraphData(data.members, data.primaryNode).then(({ nodes, links }) => {
|
|
this.batchUpdate({
|
|
nodes: nodes,
|
|
links: links,
|
|
primaryNode: data.primaryNode,
|
|
lastUpdateTime: data.timestamp || new Date().toISOString()
|
|
});
|
|
}).catch(error => {
|
|
logger.error('TopologyViewModel: Failed to build graph data from websocket update:', error);
|
|
});
|
|
} else {
|
|
logger.warn('TopologyViewModel: Received cluster update but no valid members array:', data);
|
|
}
|
|
});
|
|
|
|
// Listen for node discovery events
|
|
window.wsClient.on('nodeDiscovery', (data) => {
|
|
logger.debug('TopologyViewModel: Received WebSocket node discovery event:', data);
|
|
|
|
// Trigger animation for 'discovered' or 'active' actions (node is alive)
|
|
// Skip animation for 'stale' or 'inactive' actions
|
|
if (data.action === 'discovered' || data.action === 'active') {
|
|
// Emit discovery animation event
|
|
this.set('discoveryEvent', {
|
|
nodeIp: data.nodeIp,
|
|
timestamp: data.timestamp || new Date().toISOString(),
|
|
action: data.action
|
|
});
|
|
}
|
|
});
|
|
|
|
// Listen for connection status changes
|
|
window.wsClient.on('connected', () => {
|
|
logger.debug('TopologyViewModel: WebSocket connected');
|
|
// Connection restored - the server will send a clusterUpdate event shortly
|
|
// No need to make an API call, just wait for the websocket data
|
|
});
|
|
|
|
window.wsClient.on('disconnected', () => {
|
|
logger.debug('TopologyViewModel: WebSocket disconnected');
|
|
});
|
|
}
|
|
|
|
// Update network topology data
|
|
// NOTE: This method makes an API call and should only be used for initial load
|
|
// All subsequent updates should come from websocket events (clusterUpdate)
|
|
async updateNetworkTopology() {
|
|
try {
|
|
logger.debug('TopologyViewModel: updateNetworkTopology called (API call)');
|
|
|
|
this.set('isLoading', true);
|
|
this.set('error', null);
|
|
|
|
// Get cluster members from the primary node
|
|
const response = await window.apiClient.getClusterMembers();
|
|
logger.debug('TopologyViewModel: Got cluster members response:', response);
|
|
|
|
// Get discovery info to find the primary node
|
|
const discoveryInfo = await window.apiClient.getDiscoveryInfo();
|
|
logger.debug('TopologyViewModel: Got discovery info:', discoveryInfo);
|
|
|
|
const members = response.members || [];
|
|
const primaryNode = discoveryInfo.primaryNode || null;
|
|
|
|
logger.debug(`TopologyViewModel: Building graph with ${members.length} members, primary: ${primaryNode}`);
|
|
|
|
// Build enhanced graph data with actual node connections
|
|
const { nodes, links } = await this.buildEnhancedGraphData(members, primaryNode);
|
|
|
|
logger.debug(`TopologyViewModel: Built graph with ${nodes.length} nodes and ${links.length} links`);
|
|
|
|
this.batchUpdate({
|
|
nodes: nodes,
|
|
links: links,
|
|
primaryNode: primaryNode,
|
|
lastUpdateTime: new Date().toISOString()
|
|
});
|
|
|
|
} catch (error) {
|
|
console.error('TopologyViewModel: Failed to fetch network topology:', error);
|
|
this.set('error', error.message);
|
|
} finally {
|
|
this.set('isLoading', false);
|
|
logger.debug('TopologyViewModel: updateNetworkTopology completed');
|
|
}
|
|
}
|
|
|
|
// Build enhanced graph data with actual node connections
|
|
// Creates either a mesh topology (all nodes connected) or star topology (center node to all others)
|
|
async buildEnhancedGraphData(members, primaryNode) {
|
|
const nodes = [];
|
|
const links = [];
|
|
|
|
// Get existing nodes to preserve their positions
|
|
const existingNodes = this.get('nodes') || [];
|
|
const existingNodeMap = new Map(existingNodes.map(n => [n.id, n]));
|
|
|
|
// Create nodes from members
|
|
members.forEach((member, index) => {
|
|
if (member && member.ip) {
|
|
const existingNode = existingNodeMap.get(member.ip);
|
|
const isPrimary = member.ip === primaryNode;
|
|
|
|
nodes.push({
|
|
id: member.ip,
|
|
hostname: member.hostname || member.ip,
|
|
ip: member.ip,
|
|
status: member.status || 'UNKNOWN',
|
|
latency: member.latency || 0,
|
|
isPrimary: isPrimary,
|
|
// Preserve both legacy 'resources' and preferred 'labels'
|
|
labels: (member.labels && typeof member.labels === 'object') ? member.labels : (member.resources || {}),
|
|
resources: member.resources || {},
|
|
// Preserve existing position if node already exists, otherwise assign random position
|
|
x: existingNode ? existingNode.x : Math.random() * 1200 + 100,
|
|
y: existingNode ? existingNode.y : Math.random() * 800 + 100,
|
|
// Preserve velocity if it exists (for D3 simulation)
|
|
vx: existingNode ? existingNode.vx : undefined,
|
|
vy: existingNode ? existingNode.vy : undefined,
|
|
// Preserve fixed position if it was dragged
|
|
fx: existingNode ? existingNode.fx : undefined,
|
|
fy: existingNode ? existingNode.fy : undefined
|
|
});
|
|
}
|
|
});
|
|
|
|
// Build links based on topology mode
|
|
const topologyMode = this.get('topologyMode') || 'mesh';
|
|
|
|
if (topologyMode === 'mesh') {
|
|
// Full mesh - connect all nodes to all other nodes
|
|
logger.debug('TopologyViewModel: Creating full mesh topology');
|
|
for (let i = 0; i < nodes.length; i++) {
|
|
for (let j = i + 1; j < nodes.length; j++) {
|
|
const sourceNode = nodes[i];
|
|
const targetNode = nodes[j];
|
|
|
|
links.push({
|
|
source: sourceNode.id,
|
|
target: targetNode.id,
|
|
latency: this.estimateLatency(sourceNode, targetNode),
|
|
sourceNode: sourceNode,
|
|
targetNode: targetNode,
|
|
bidirectional: true
|
|
});
|
|
}
|
|
}
|
|
logger.debug(`TopologyViewModel: Created ${links.length} links in mesh topology`);
|
|
} else if (topologyMode === 'star') {
|
|
// Star topology - center node connects to all others
|
|
const centerNode = this.get('starCenterNode') || primaryNode;
|
|
|
|
if (centerNode) {
|
|
logger.debug(`TopologyViewModel: Creating star topology with center ${centerNode}`);
|
|
nodes.forEach(node => {
|
|
if (node.ip !== centerNode) {
|
|
const member = members.find(m => m.ip === node.ip);
|
|
const latency = member?.latency || this.estimateLatency(node, { ip: centerNode });
|
|
|
|
links.push({
|
|
source: centerNode,
|
|
target: node.id,
|
|
latency: latency,
|
|
sourceNode: nodes.find(n => n.ip === centerNode),
|
|
targetNode: node,
|
|
bidirectional: false
|
|
});
|
|
}
|
|
});
|
|
logger.debug(`TopologyViewModel: Created ${links.length} links from center node`);
|
|
} else {
|
|
logger.warn('TopologyViewModel: No center node specified for star topology');
|
|
}
|
|
}
|
|
|
|
return { nodes, links };
|
|
}
|
|
|
|
// Estimate latency between two nodes
|
|
estimateLatency(sourceNode, targetNode) {
|
|
// Simple estimation - in a real implementation, you'd get actual measurements
|
|
const baseLatency = 5; // Base latency in ms
|
|
const randomVariation = Math.random() * 10; // Random variation
|
|
return Math.round(baseLatency + randomVariation);
|
|
}
|
|
|
|
// Select a node in the graph
|
|
selectNode(nodeId) {
|
|
this.set('selectedNode', nodeId);
|
|
}
|
|
|
|
// Clear node selection
|
|
clearSelection() {
|
|
this.set('selectedNode', null);
|
|
}
|
|
|
|
// Switch to a specific node as the new primary
|
|
async switchToPrimaryNode(nodeIp) {
|
|
try {
|
|
logger.debug(`TopologyViewModel: Switching primary node to ${nodeIp}`);
|
|
const result = await window.apiClient.setPrimaryNode(nodeIp);
|
|
|
|
if (result.success) {
|
|
logger.info(`TopologyViewModel: Successfully switched primary to ${nodeIp}`);
|
|
|
|
// Update topology after a short delay to allow backend to update
|
|
setTimeout(async () => {
|
|
logger.debug('TopologyViewModel: Refreshing topology after primary switch...');
|
|
await this.updateNetworkTopology();
|
|
}, 1000);
|
|
|
|
return result;
|
|
} else {
|
|
throw new Error(result.message || 'Failed to switch primary node');
|
|
}
|
|
} catch (error) {
|
|
logger.error('TopologyViewModel: Failed to switch primary node:', error);
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
// Toggle topology mode or set star mode with specific center node
|
|
async setTopologyMode(mode, centerNodeIp = null) {
|
|
logger.debug(`TopologyViewModel: Setting topology mode to ${mode}`, centerNodeIp ? `with center ${centerNodeIp}` : '');
|
|
|
|
this.setMultiple({
|
|
topologyMode: mode,
|
|
starCenterNode: centerNodeIp
|
|
});
|
|
|
|
// Rebuild the graph with new topology
|
|
await this.updateNetworkTopology();
|
|
}
|
|
|
|
// Toggle between mesh and star modes
|
|
async toggleTopologyMode(nodeIp) {
|
|
const currentMode = this.get('topologyMode');
|
|
const currentCenter = this.get('starCenterNode');
|
|
|
|
if (currentMode === 'mesh') {
|
|
// Switch to star mode with this node as center
|
|
await this.setTopologyMode('star', nodeIp);
|
|
} else if (currentMode === 'star' && currentCenter === nodeIp) {
|
|
// Clicking same center node - switch back to mesh
|
|
await this.setTopologyMode('mesh', null);
|
|
} else {
|
|
// Clicking different node - change star center
|
|
await this.setTopologyMode('star', nodeIp);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Monitoring View Model for cluster resource monitoring
|
|
class MonitoringViewModel extends ViewModel {
|
|
constructor() {
|
|
super();
|
|
this.setMultiple({
|
|
clusterMembers: [],
|
|
nodeResources: new Map(), // Map of node IP -> resource data
|
|
clusterSummary: {
|
|
totalCpu: 0,
|
|
totalMemory: 0,
|
|
totalStorage: 0,
|
|
totalNodes: 0,
|
|
availableCpu: 0,
|
|
availableMemory: 0,
|
|
availableStorage: 0
|
|
},
|
|
isLoading: false,
|
|
lastUpdated: null,
|
|
error: null
|
|
});
|
|
}
|
|
|
|
// Load cluster members and their resource data
|
|
async loadClusterData() {
|
|
this.set('isLoading', true);
|
|
this.set('error', null);
|
|
|
|
try {
|
|
// Get cluster members
|
|
const response = await window.apiClient.getClusterMembers();
|
|
// Extract members array from response object
|
|
const members = response.members || [];
|
|
this.set('clusterMembers', members);
|
|
|
|
// Load resource data for each node
|
|
await this.loadNodeResources(members);
|
|
|
|
// Calculate cluster summary
|
|
this.calculateClusterSummary();
|
|
|
|
this.set('lastUpdated', new Date());
|
|
} catch (error) {
|
|
console.error('Failed to load cluster monitoring data:', error);
|
|
this.set('error', error.message || 'Failed to load monitoring data');
|
|
} finally {
|
|
this.set('isLoading', false);
|
|
}
|
|
}
|
|
|
|
// Load resource data for all nodes
|
|
async loadNodeResources(members) {
|
|
const nodeResources = new Map();
|
|
|
|
// Process nodes in parallel
|
|
const resourcePromises = members.map(async (member) => {
|
|
try {
|
|
const resources = await window.apiClient.getMonitoringResources(member.ip);
|
|
// Handle both real API (wrapped in data) and mock API (direct response)
|
|
const resourceData = (resources && resources.data) ? resources.data : resources;
|
|
nodeResources.set(member.ip, {
|
|
...member,
|
|
resources: resourceData,
|
|
hasResources: true,
|
|
resourceSource: 'monitoring'
|
|
});
|
|
} catch (error) {
|
|
console.warn(`Failed to load monitoring resources for node ${member.ip}:`, error);
|
|
// Fall back to basic resource data from cluster members API
|
|
const basicResources = member.resources ? this.convertBasicResources(member.resources) : null;
|
|
nodeResources.set(member.ip, {
|
|
...member,
|
|
resources: basicResources,
|
|
basic: member.resources, // Preserve original basic data
|
|
hasResources: !!basicResources,
|
|
resourceSource: basicResources ? 'basic' : 'none',
|
|
error: basicResources ? null : error.message
|
|
});
|
|
}
|
|
});
|
|
|
|
await Promise.all(resourcePromises);
|
|
this.set('nodeResources', nodeResources);
|
|
}
|
|
|
|
// Convert basic resource data from cluster members API to monitoring format
|
|
convertBasicResources(basicResources) {
|
|
// Convert ESP32 basic resources to monitoring format
|
|
const freeHeap = basicResources.freeHeap || 0;
|
|
const flashSize = basicResources.flashChipSize || 0;
|
|
const cpuFreq = basicResources.cpuFreqMHz || 80;
|
|
|
|
// Estimate total heap (ESP32 typically has ~300KB heap)
|
|
const estimatedTotalHeap = 300 * 1024; // 300KB in bytes
|
|
const usedHeap = estimatedTotalHeap - freeHeap;
|
|
|
|
return {
|
|
cpu: {
|
|
total: cpuFreq, // Total CPU frequency in MHz
|
|
available: cpuFreq * 0.8, // Estimate 80% available
|
|
used: cpuFreq * 0.2
|
|
},
|
|
memory: {
|
|
total: estimatedTotalHeap,
|
|
available: freeHeap,
|
|
used: usedHeap
|
|
},
|
|
storage: {
|
|
total: flashSize,
|
|
available: flashSize * 0.5, // Estimate 50% available
|
|
used: flashSize * 0.5
|
|
},
|
|
// Include original basic resources for reference
|
|
basic: basicResources
|
|
};
|
|
}
|
|
|
|
// Calculate cluster resource summary
|
|
calculateClusterSummary() {
|
|
const nodeResources = this.get('nodeResources');
|
|
const members = this.get('clusterMembers');
|
|
|
|
let totalCpu = 0;
|
|
let totalMemory = 0;
|
|
let totalStorage = 0;
|
|
let availableCpu = 0;
|
|
let availableMemory = 0;
|
|
let availableStorage = 0;
|
|
let totalNodes = 0;
|
|
|
|
for (const [ip, nodeData] of nodeResources) {
|
|
if (nodeData.hasResources && nodeData.resources) {
|
|
totalNodes++;
|
|
|
|
// Extract resource data (handle both monitoring API and basic data formats)
|
|
const resources = nodeData.resources;
|
|
|
|
// CPU resources
|
|
if (resources.cpu) {
|
|
const cpuFreqMHz = nodeData.basic?.cpuFreqMHz || 80; // Get CPU frequency from basic resources
|
|
if (nodeData.resourceSource === 'monitoring') {
|
|
// Real monitoring API format
|
|
totalCpu += cpuFreqMHz; // Total CPU frequency in MHz
|
|
availableCpu += cpuFreqMHz * (100 - (resources.cpu.average_usage || 0)) / 100; // Available frequency
|
|
} else {
|
|
// Basic data format
|
|
totalCpu += cpuFreqMHz; // Total CPU frequency in MHz
|
|
availableCpu += cpuFreqMHz * (resources.cpu.available || 0.8); // Available frequency
|
|
}
|
|
}
|
|
|
|
// Memory resources
|
|
if (resources.memory) {
|
|
if (nodeData.resourceSource === 'monitoring') {
|
|
// Real monitoring API format
|
|
totalMemory += resources.memory.total_heap || 0;
|
|
availableMemory += resources.memory.free_heap || 0;
|
|
} else {
|
|
// Basic data format
|
|
totalMemory += resources.memory.total || 0;
|
|
availableMemory += resources.memory.available || 0;
|
|
}
|
|
}
|
|
|
|
// Storage resources
|
|
if (resources.filesystem || resources.storage) {
|
|
const storage = resources.filesystem || resources.storage;
|
|
if (nodeData.resourceSource === 'monitoring') {
|
|
// Real monitoring API format
|
|
totalStorage += storage.total_bytes || 0;
|
|
availableStorage += storage.free_bytes || 0;
|
|
} else {
|
|
// Basic data format
|
|
totalStorage += storage.total || 0;
|
|
availableStorage += storage.available || 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
this.set('clusterSummary', {
|
|
totalCpu,
|
|
totalMemory,
|
|
totalStorage,
|
|
totalNodes,
|
|
availableCpu,
|
|
availableMemory,
|
|
availableStorage
|
|
});
|
|
}
|
|
|
|
// Get resource utilization percentage
|
|
getResourceUtilization(resourceType) {
|
|
const summary = this.get('clusterSummary');
|
|
const total = summary[`total${resourceType}`];
|
|
const available = summary[`available${resourceType}`];
|
|
|
|
if (total === 0) return 0;
|
|
return Math.round(((total - available) / total) * 100);
|
|
}
|
|
|
|
// Get formatted resource value
|
|
formatResourceValue(value, type) {
|
|
if (type === 'memory' || type === 'storage') {
|
|
// Convert bytes to human readable format
|
|
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
|
|
let size = value;
|
|
let unitIndex = 0;
|
|
|
|
while (size >= 1024 && unitIndex < units.length - 1) {
|
|
size /= 1024;
|
|
unitIndex++;
|
|
}
|
|
|
|
return `${size.toFixed(1)} ${units[unitIndex]}`;
|
|
} else if (type === 'cpu') {
|
|
// CPU is typically in cores or percentage
|
|
return `${value} cores`;
|
|
}
|
|
|
|
return value.toString();
|
|
}
|
|
|
|
// Refresh monitoring data
|
|
async refresh() {
|
|
await this.loadClusterData();
|
|
}
|
|
}
|
|
|
|
// Cluster Firmware Upload View Model
|
|
class ClusterFirmwareViewModel extends ViewModel {
|
|
constructor() {
|
|
super();
|
|
this.setMultiple({
|
|
selectedFile: null,
|
|
targetNodes: [],
|
|
uploadProgress: null,
|
|
uploadResults: [],
|
|
isUploading: false
|
|
});
|
|
}
|
|
|
|
// Set selected file
|
|
setSelectedFile(file) {
|
|
this.set('selectedFile', file);
|
|
}
|
|
|
|
// Set target nodes (filtered from cluster view)
|
|
setTargetNodes(nodes) {
|
|
this.set('targetNodes', nodes);
|
|
}
|
|
|
|
// Start upload
|
|
startUpload() {
|
|
this.set('isUploading', true);
|
|
this.set('uploadProgress', {
|
|
current: 0,
|
|
total: 0,
|
|
status: 'Preparing...'
|
|
});
|
|
this.set('uploadResults', []);
|
|
}
|
|
|
|
// Update upload progress
|
|
updateUploadProgress(current, total, status) {
|
|
this.set('uploadProgress', {
|
|
current,
|
|
total,
|
|
status
|
|
});
|
|
}
|
|
|
|
// Add upload result
|
|
addUploadResult(result) {
|
|
const results = this.get('uploadResults');
|
|
results.push(result);
|
|
this.set('uploadResults', results);
|
|
}
|
|
|
|
// Complete upload
|
|
completeUpload() {
|
|
this.set('isUploading', false);
|
|
}
|
|
|
|
// Reset upload state
|
|
resetUploadState() {
|
|
this.set('selectedFile', null);
|
|
this.set('uploadProgress', null);
|
|
this.set('uploadResults', []);
|
|
this.set('isUploading', false);
|
|
}
|
|
|
|
// Check if deploy is enabled
|
|
isDeployEnabled() {
|
|
const file = this.get('selectedFile');
|
|
const targetNodes = this.get('targetNodes');
|
|
const isUploading = this.get('isUploading');
|
|
|
|
return file && targetNodes && targetNodes.length > 0 && !isUploading;
|
|
}
|
|
}
|
|
|
|
// WiFi Configuration View Model
|
|
class WiFiConfigViewModel extends ViewModel {
|
|
constructor() {
|
|
super();
|
|
this.set('targetNodes', []);
|
|
this.set('ssid', '');
|
|
this.set('password', '');
|
|
this.set('isConfiguring', false);
|
|
this.set('configProgress', null);
|
|
this.set('configResults', []);
|
|
}
|
|
|
|
// Set target nodes (filtered from cluster view)
|
|
setTargetNodes(nodes) {
|
|
this.set('targetNodes', nodes);
|
|
}
|
|
|
|
// Set WiFi credentials
|
|
setCredentials(ssid, password) {
|
|
this.set('ssid', ssid);
|
|
this.set('password', password);
|
|
}
|
|
|
|
// Start configuration
|
|
startConfiguration() {
|
|
this.set('isConfiguring', true);
|
|
this.set('configProgress', {
|
|
current: 0,
|
|
total: 0,
|
|
status: 'Preparing...'
|
|
});
|
|
this.set('configResults', []);
|
|
}
|
|
|
|
// Update configuration progress
|
|
updateConfigProgress(current, total, status) {
|
|
this.set('configProgress', {
|
|
current,
|
|
total,
|
|
status
|
|
});
|
|
}
|
|
|
|
// Add configuration result
|
|
addConfigResult(result) {
|
|
const results = this.get('configResults');
|
|
results.push(result);
|
|
this.set('configResults', results);
|
|
}
|
|
|
|
// Complete configuration
|
|
completeConfiguration() {
|
|
this.set('isConfiguring', false);
|
|
this.set('configProgress', null);
|
|
}
|
|
|
|
// Reset configuration state
|
|
resetConfiguration() {
|
|
this.set('ssid', '');
|
|
this.set('password', '');
|
|
this.set('configProgress', null);
|
|
this.set('configResults', []);
|
|
this.set('isConfiguring', false);
|
|
}
|
|
|
|
// Check if apply is enabled
|
|
isApplyEnabled() {
|
|
const ssid = this.get('ssid');
|
|
const password = this.get('password');
|
|
const targetNodes = this.get('targetNodes');
|
|
const isConfiguring = this.get('isConfiguring');
|
|
|
|
return ssid && password && targetNodes && targetNodes.length > 0 && !isConfiguring;
|
|
}
|
|
}
|
|
|
|
window.WiFiConfigViewModel = WiFiConfigViewModel;
|
|
|
|
// Events View Model for websocket event visualization
|
|
class EventViewModel extends ViewModel {
|
|
constructor() {
|
|
super();
|
|
this.setMultiple({
|
|
events: new Map(), // Map of topic -> { parts: [], count: number, lastSeen: timestamp }
|
|
isLoading: false,
|
|
error: null,
|
|
lastUpdateTime: null
|
|
});
|
|
|
|
// Set up WebSocket listeners for real-time updates
|
|
this.setupWebSocketListeners();
|
|
}
|
|
|
|
// Set up WebSocket event listeners
|
|
setupWebSocketListeners() {
|
|
if (!window.wsClient) {
|
|
// Retry after a short delay to allow wsClient to initialize
|
|
setTimeout(() => this.setupWebSocketListeners(), 1000);
|
|
return;
|
|
}
|
|
|
|
// Listen for all websocket messages
|
|
window.wsClient.on('message', (data) => {
|
|
const topic = data.topic || data.type;
|
|
|
|
if (topic) {
|
|
this.addTopic(topic, data);
|
|
}
|
|
});
|
|
|
|
// Listen for connection status changes
|
|
window.wsClient.on('connected', () => {
|
|
logger.info('EventViewModel: WebSocket connected');
|
|
});
|
|
|
|
window.wsClient.on('disconnected', () => {
|
|
logger.debug('EventViewModel: WebSocket disconnected');
|
|
});
|
|
}
|
|
|
|
// Add a topic (parsed by "/" separator)
|
|
addTopic(topic, data = null) {
|
|
// Get current events as a new Map to ensure change detection
|
|
const events = new Map(this.get('events'));
|
|
|
|
// Handle nested events from cluster/event
|
|
let fullTopic = topic;
|
|
if (topic === 'cluster/event' && data && data.data) {
|
|
try {
|
|
const parsedData = typeof data.data === 'string' ? JSON.parse(data.data) : data.data;
|
|
if (parsedData && parsedData.event) {
|
|
// Create nested topic chain: cluster/event/api/neopattern
|
|
fullTopic = `${topic}/${parsedData.event}`;
|
|
}
|
|
} catch (e) {
|
|
// If parsing fails, just use the original topic
|
|
}
|
|
}
|
|
|
|
const parts = fullTopic.split('/').filter(p => p);
|
|
|
|
if (events.has(fullTopic)) {
|
|
// Update existing event - create new object to ensure change detection
|
|
const existing = events.get(fullTopic);
|
|
events.set(fullTopic, {
|
|
topic: existing.topic,
|
|
parts: existing.parts,
|
|
count: existing.count + 1,
|
|
firstSeen: existing.firstSeen,
|
|
lastSeen: new Date().toISOString(),
|
|
lastData: data
|
|
});
|
|
} else {
|
|
// Create new event entry
|
|
events.set(fullTopic, {
|
|
topic: fullTopic,
|
|
parts: parts,
|
|
count: 1,
|
|
firstSeen: new Date().toISOString(),
|
|
lastSeen: new Date().toISOString(),
|
|
lastData: data
|
|
});
|
|
}
|
|
|
|
// Use set to trigger change notification
|
|
this.set('events', events);
|
|
this.set('lastUpdateTime', new Date().toISOString());
|
|
}
|
|
|
|
// Get all topic parts (unique segments after splitting by "/")
|
|
getTopicParts() {
|
|
const events = this.get('events');
|
|
const allParts = new Set();
|
|
|
|
for (const [topic, data] of events) {
|
|
data.parts.forEach(part => allParts.add(part));
|
|
}
|
|
|
|
return Array.from(allParts).map(part => {
|
|
// Count how many events contain this part
|
|
let count = 0;
|
|
for (const [topic, data] of events) {
|
|
if (data.parts.includes(part)) {
|
|
count += data.count;
|
|
}
|
|
}
|
|
|
|
return { part, count };
|
|
});
|
|
}
|
|
|
|
// Clear all events
|
|
clearTopics() {
|
|
this.set('events', new Map());
|
|
this.set('lastUpdateTime', new Date().toISOString());
|
|
}
|
|
|
|
// Get connections between topic parts (for graph edges)
|
|
getTopicConnections() {
|
|
const topics = this.get('topics');
|
|
const connections = [];
|
|
|
|
for (const [topic, data] of topics) {
|
|
const parts = data.parts;
|
|
// Create connections between adjacent parts
|
|
for (let i = 0; i < parts.length - 1; i++) {
|
|
connections.push({
|
|
source: parts[i],
|
|
target: parts[i + 1],
|
|
topic: topic,
|
|
count: data.count
|
|
});
|
|
}
|
|
}
|
|
|
|
return connections;
|
|
}
|
|
}
|
|
|
|
window.EventViewModel = EventViewModel;
|