diff --git a/public/scripts/components.js b/public/scripts/components.js index 449a5c1..dea26ac 100644 --- a/public/scripts/components.js +++ b/public/scripts/components.js @@ -75,7 +75,7 @@ class PrimaryNodeComponent extends Component { }, 1500); } catch (error) { - console.error('Failed to select random primary node:', error); + logger.error('Failed to select random primary node:', error); this.setText('#primary-node-ip', '❌ Selection Failed'); this.setClass('#primary-node-ip', 'error', true); this.setClass('#primary-node-ip', 'selecting', false); @@ -106,7 +106,7 @@ class ClusterMembersComponent extends Component { // Ensure initial render happens even if no data setTimeout(() => { if (this.isMounted && !this.renderInProgress) { - console.log('ClusterMembersComponent: Performing initial render check'); + logger.debug('ClusterMembersComponent: Performing initial render check'); this.render(); } }, 200); @@ -131,7 +131,7 @@ class ClusterMembersComponent extends Component { this.loadingTimeout = setTimeout(() => { const isLoading = this.viewModel.get('isLoading'); if (isLoading) { - console.warn('ClusterMembersComponent: Loading timeout reached, forcing render check'); + logger.warn('ClusterMembersComponent: Loading timeout reached, forcing render check'); this.forceRenderCheck(); } }, 10000); // 10 second timeout @@ -295,7 +295,7 @@ class ClusterMembersComponent extends Component { // Update members partially to preserve UI state updateMembersPartially(newMembers, previousMembers) { - console.log('ClusterMembersComponent: Performing partial update to preserve UI state'); + logger.debug('ClusterMembersComponent: Performing partial update to preserve UI state'); // Build previous map by IP for stable diffs const prevByIp = new Map((previousMembers || []).map(m => [m.ip, m])); @@ -344,7 +344,7 @@ class ClusterMembersComponent extends Component { render() { if (this.renderInProgress) { - console.log('ClusterMembersComponent: Render already in progress, skipping'); + logger.debug('ClusterMembersComponent: Render already in progress, skipping'); return; } @@ -356,35 +356,35 @@ class ClusterMembersComponent extends Component { this.renderInProgress = true; try { - console.log('ClusterMembersComponent: render() called'); - console.log('ClusterMembersComponent: Container element:', this.container); - console.log('ClusterMembersComponent: Is mounted:', this.isMounted); + logger.debug('ClusterMembersComponent: render() called'); + logger.debug('ClusterMembersComponent: Container element:', this.container); + logger.debug('ClusterMembersComponent: Is mounted:', this.isMounted); const members = this.viewModel.get('members'); const isLoading = this.viewModel.get('isLoading'); const error = this.viewModel.get('error'); - console.log('ClusterMembersComponent: render data:', { members, isLoading, error }); + logger.debug('ClusterMembersComponent: render data:', { members, isLoading, error }); if (isLoading) { - console.log('ClusterMembersComponent: Showing loading state'); + logger.debug('ClusterMembersComponent: Showing loading state'); this.showLoadingState(); return; } if (error) { - console.log('ClusterMembersComponent: Showing error state'); + logger.debug('ClusterMembersComponent: Showing error state'); this.showErrorState(error); return; } if (!members || members.length === 0) { - console.log('ClusterMembersComponent: Showing empty state'); + logger.debug('ClusterMembersComponent: Showing empty state'); this.showEmptyState(); return; } - console.log('ClusterMembersComponent: Rendering members:', members); + logger.debug('ClusterMembersComponent: Rendering members:', members); this.renderMembers(members); } finally { @@ -543,7 +543,7 @@ class ClusterMembersComponent extends Component { } } catch (error) { - console.error('Failed to expand card:', error); + logger.error('Failed to expand card:', error); memberDetails.innerHTML = `
Error loading node details:
@@ -600,7 +600,7 @@ class ClusterMembersComponent extends Component { const expandedCards = this.viewModel.get('expandedCards'); const activeTabs = this.viewModel.get('activeTabs'); - console.log('ClusterMembersComponent: Debug State:', { + logger.debug('ClusterMembersComponent: Debug State:', { isMounted: this.isMounted, container: this.container, members: members, @@ -617,7 +617,7 @@ class ClusterMembersComponent extends Component { // Manual refresh method that bypasses potential state conflicts async manualRefresh() { - console.log('ClusterMembersComponent: Manual refresh called'); + logger.debug('ClusterMembersComponent: Manual refresh called'); try { // Clear any existing loading state @@ -627,9 +627,9 @@ class ClusterMembersComponent extends Component { // Force a fresh data load await this.viewModel.updateClusterMembers(); - console.log('ClusterMembersComponent: Manual refresh completed'); + logger.debug('ClusterMembersComponent: Manual refresh completed'); } catch (error) { - console.error('ClusterMembersComponent: Manual refresh failed:', error); + logger.error('ClusterMembersComponent: Manual refresh failed:', error); this.showErrorState(error.message); } } @@ -656,12 +656,12 @@ class ClusterMembersComponent extends Component { this.cleanupEventListeners(); this.cleanupViewModelListeners(); - console.log(`${this.constructor.name} unmounted`); + logger.debug(`${this.constructor.name} unmounted`); } // Override pause method to handle timeouts and operations onPause() { - console.log('ClusterMembersComponent: Pausing...'); + logger.debug('ClusterMembersComponent: Pausing...'); // Clear any pending timeouts if (this.loadingTimeout) { @@ -680,7 +680,7 @@ class ClusterMembersComponent extends Component { // Override resume method to restore functionality onResume() { - console.log('ClusterMembersComponent: Resuming...'); + logger.debug('ClusterMembersComponent: Resuming...'); this.isPaused = false; @@ -700,7 +700,7 @@ class ClusterMembersComponent extends Component { // If we were loading and it completed while paused, handle the completion if (!isLoading && members && members.length > 0) { - console.log('ClusterMembersComponent: Handling pending loading completion after resume'); + logger.debug('ClusterMembersComponent: Handling pending loading completion after resume'); this.handleLoadingCompletion(); } } @@ -799,7 +799,7 @@ class NodeDetailsComponent extends Component { renderNodeDetails(nodeStatus, tasks, capabilities) { // Use persisted active tab from the view model, default to 'status' const activeTab = (this.viewModel && typeof this.viewModel.get === 'function' && this.viewModel.get('activeTab')) || 'status'; - console.log('NodeDetailsComponent: Rendering with activeTab:', activeTab); + logger.debug('NodeDetailsComponent: Rendering with activeTab:', activeTab); const html = `
@@ -1215,10 +1215,10 @@ class NodeDetailsComponent extends Component {
`; - console.log('Firmware upload successful:', result); + logger.debug('Firmware upload successful:', result); } catch (error) { - console.error('Firmware upload failed:', error); + logger.error('Firmware upload failed:', error); // Show error uploadStatus.innerHTML = ` @@ -1286,7 +1286,7 @@ class FirmwareComponent extends Component { this.addEventListener(specificNodeSelect, 'change', this._boundNodeSelectHandler); logger.debug('FirmwareComponent: Event listener added to specificNodeSelect'); } else { - console.warn('FirmwareComponent: specificNodeSelect element not found during setupEventListeners'); + logger.warn('FirmwareComponent: specificNodeSelect element not found during setupEventListeners'); } // Setup label select change handler (single-select add-to-chips) @@ -1362,7 +1362,7 @@ class FirmwareComponent extends Component { this.populateLabelSelect(); this.updateAffectedNodesPreview(); } catch (e) { - console.warn('FirmwareComponent: Initialization after mount failed:', e); + logger.warn('FirmwareComponent: Initialization after mount failed:', e); } logger.debug('FirmwareComponent: Mounted successfully'); @@ -1385,10 +1385,10 @@ class FirmwareComponent extends Component { handleNodeSelect(event) { const nodeIp = event.target.value; - console.log('FirmwareComponent: handleNodeSelect called with nodeIp:', nodeIp); - console.log('Event:', event); - console.log('Event target:', event.target); - console.log('Event target value:', event.target.value); + logger.debug('FirmwareComponent: handleNodeSelect called with nodeIp:', nodeIp); + logger.debug('Event:', event); + logger.debug('Event target:', event.target); + logger.debug('Event target value:', event.target.value); this.viewModel.setSpecificNode(nodeIp); @@ -1426,7 +1426,7 @@ class FirmwareComponent extends Component { this.viewModel.resetUploadState(); } catch (error) { - console.error('Firmware deployment failed:', error); + logger.error('Firmware deployment failed:', error); alert(`Deployment failed: ${error.message}`); } finally { this.viewModel.completeUpload(); @@ -1457,7 +1457,7 @@ class FirmwareComponent extends Component { this.displayUploadResults(results); } catch (error) { - console.error('Failed to upload firmware to all nodes:', error); + logger.error('Failed to upload firmware to all nodes:', error); throw error; } } @@ -1484,7 +1484,7 @@ class FirmwareComponent extends Component { this.displayUploadResults([result]); } catch (error) { - console.error(`Failed to upload firmware to node ${nodeIp}:`, error); + logger.error(`Failed to upload firmware to node ${nodeIp}:`, error); // Update progress to show failure this.updateNodeProgress(1, 1, nodeIp, 'Failed'); @@ -1524,7 +1524,7 @@ class FirmwareComponent extends Component { // Display results this.displayUploadResults(results); } catch (error) { - console.error('Failed to upload firmware to label-filtered nodes:', error); + logger.error('Failed to upload firmware to label-filtered nodes:', error); throw error; } } @@ -1552,7 +1552,7 @@ class FirmwareComponent extends Component { this.updateOverallProgress(successfulUploads, totalNodes); } catch (error) { - console.error(`Failed to upload to node ${nodeIp}:`, error); + logger.error(`Failed to upload to node ${nodeIp}:`, error); const errorResult = { nodeIp: nodeIp, hostname: node.hostname || nodeIp, @@ -1783,12 +1783,12 @@ class FirmwareComponent extends Component { populateNodeSelect() { const select = this.findElement('#specific-node-select'); if (!select) { - console.warn('FirmwareComponent: populateNodeSelect - select element not found'); + logger.warn('FirmwareComponent: populateNodeSelect - select element not found'); return; } if (select.tagName !== 'SELECT') { - console.warn('FirmwareComponent: populateNodeSelect - element is not a SELECT:', select.tagName); + logger.warn('FirmwareComponent: populateNodeSelect - element is not a SELECT:', select.tagName); return; } @@ -1838,7 +1838,7 @@ class FirmwareComponent extends Component { select.removeEventListener('change', this._boundNodeSelectHandler); select.addEventListener('change', this._boundNodeSelectHandler); - console.log('FirmwareComponent: Node select event listener ensured'); + logger.debug('FirmwareComponent: Node select event listener ensured'); } updateUploadProgress() { @@ -1942,18 +1942,18 @@ class ClusterViewComponent extends Component { constructor(container, viewModel, eventBus) { super(container, viewModel, eventBus); - console.log('ClusterViewComponent: Constructor called'); - console.log('ClusterViewComponent: Container:', container); - console.log('ClusterViewComponent: Container ID:', container?.id); + logger.debug('ClusterViewComponent: Constructor called'); + logger.debug('ClusterViewComponent: Container:', container); + logger.debug('ClusterViewComponent: Container ID:', container?.id); // Find elements for sub-components const primaryNodeContainer = this.findElement('.primary-node-info'); const clusterMembersContainer = this.findElement('#cluster-members-container'); - console.log('ClusterViewComponent: Primary node container:', primaryNodeContainer); - console.log('ClusterViewComponent: Cluster members container:', clusterMembersContainer); - console.log('ClusterViewComponent: Cluster members container ID:', clusterMembersContainer?.id); - console.log('ClusterViewComponent: Cluster members container innerHTML:', clusterMembersContainer?.innerHTML); + logger.debug('ClusterViewComponent: Primary node container:', primaryNodeContainer); + logger.debug('ClusterViewComponent: Cluster members container:', clusterMembersContainer); + logger.debug('ClusterViewComponent: Cluster members container ID:', clusterMembersContainer?.id); + logger.debug('ClusterViewComponent: Cluster members container innerHTML:', clusterMembersContainer?.innerHTML); // Create sub-components this.primaryNodeComponent = new PrimaryNodeComponent( @@ -1968,17 +1968,17 @@ class ClusterViewComponent extends Component { eventBus ); - console.log('ClusterViewComponent: Sub-components created'); + logger.debug('ClusterViewComponent: Sub-components created'); // Track if we've already loaded data to prevent unnecessary reloads this.dataLoaded = false; } mount() { - console.log('ClusterViewComponent: Mounting...'); + logger.debug('ClusterViewComponent: Mounting...'); super.mount(); - console.log('ClusterViewComponent: Mounting sub-components...'); + logger.debug('ClusterViewComponent: Mounting sub-components...'); // Mount sub-components this.primaryNodeComponent.mount(); this.clusterMembersComponent.mount(); @@ -1991,51 +1991,51 @@ class ClusterViewComponent extends Component { const shouldLoadData = !this.dataLoaded || !members || members.length === 0; if (shouldLoadData) { - console.log('ClusterViewComponent: Starting initial data load...'); + logger.debug('ClusterViewComponent: Starting initial data load...'); // Initial data load - ensure it happens after mounting setTimeout(() => { this.viewModel.updateClusterMembers().then(() => { this.dataLoaded = true; }).catch(error => { - console.error('ClusterViewComponent: Failed to load initial data:', error); + logger.error('ClusterViewComponent: Failed to load initial data:', error); }); }, 100); } else { - console.log('ClusterViewComponent: Data already loaded, skipping initial load'); + logger.debug('ClusterViewComponent: Data already loaded, skipping initial load'); } // Set up periodic updates // this.setupPeriodicUpdates(); // Disabled automatic refresh - console.log('ClusterViewComponent: Mounted successfully'); + logger.debug('ClusterViewComponent: Mounted successfully'); } setupRefreshButton() { - console.log('ClusterViewComponent: Setting up refresh button...'); + logger.debug('ClusterViewComponent: Setting up refresh button...'); const refreshBtn = this.findElement('.refresh-btn'); - console.log('ClusterViewComponent: Found refresh button:', !!refreshBtn, refreshBtn); + logger.debug('ClusterViewComponent: Found refresh button:', !!refreshBtn, refreshBtn); if (refreshBtn) { - console.log('ClusterViewComponent: Adding click event listener to refresh button'); + logger.debug('ClusterViewComponent: Adding click event listener to refresh button'); this.addEventListener(refreshBtn, 'click', this.handleRefresh.bind(this)); - console.log('ClusterViewComponent: Event listener added successfully'); + logger.debug('ClusterViewComponent: Event listener added successfully'); } else { - console.error('ClusterViewComponent: Refresh button not found!'); - console.log('ClusterViewComponent: Container HTML:', this.container.innerHTML); - console.log('ClusterViewComponent: All buttons in container:', this.container.querySelectorAll('button')); + logger.error('ClusterViewComponent: Refresh button not found!'); + logger.debug('ClusterViewComponent: Container HTML:', this.container.innerHTML); + logger.debug('ClusterViewComponent: All buttons in container:', this.container.querySelectorAll('button')); } } async handleRefresh() { - console.log('ClusterViewComponent: Refresh button clicked, performing full refresh...'); + logger.debug('ClusterViewComponent: Refresh button clicked, performing full refresh...'); // Get the refresh button and show loading state const refreshBtn = this.findElement('.refresh-btn'); - console.log('ClusterViewComponent: Found refresh button for loading state:', !!refreshBtn); + logger.debug('ClusterViewComponent: Found refresh button for loading state:', !!refreshBtn); if (refreshBtn) { const originalText = refreshBtn.innerHTML; - console.log('ClusterViewComponent: Original button text:', originalText); + logger.debug('ClusterViewComponent: Original button text:', originalText); refreshBtn.innerHTML = ` @@ -2047,29 +2047,29 @@ class ClusterViewComponent extends Component { refreshBtn.disabled = true; try { - console.log('ClusterViewComponent: Starting cluster members update...'); + logger.debug('ClusterViewComponent: Starting cluster members update...'); // Always perform a full refresh when user clicks refresh button await this.viewModel.updateClusterMembers(); - console.log('ClusterViewComponent: Cluster members update completed successfully'); + logger.debug('ClusterViewComponent: Cluster members update completed successfully'); } catch (error) { - console.error('ClusterViewComponent: Error during refresh:', error); + logger.error('ClusterViewComponent: Error during refresh:', error); // Show error state if (this.clusterMembersComponent && this.clusterMembersComponent.showErrorState) { this.clusterMembersComponent.showErrorState(error.message || 'Refresh failed'); } } finally { - console.log('ClusterViewComponent: Restoring button state...'); + logger.debug('ClusterViewComponent: Restoring button state...'); // Restore button state refreshBtn.innerHTML = originalText; refreshBtn.disabled = false; } } else { - console.warn('ClusterViewComponent: Refresh button not found, using fallback refresh'); + logger.warn('ClusterViewComponent: Refresh button not found, using fallback refresh'); // Fallback if button not found try { await this.viewModel.updateClusterMembers(); } catch (error) { - console.error('ClusterViewComponent: Fallback refresh failed:', error); + logger.error('ClusterViewComponent: Fallback refresh failed:', error); if (this.clusterMembersComponent && this.clusterMembersComponent.showErrorState) { this.clusterMembersComponent.showErrorState(error.message || 'Refresh failed'); } @@ -2078,7 +2078,7 @@ class ClusterViewComponent extends Component { } unmount() { - console.log('ClusterViewComponent: Unmounting...'); + logger.debug('ClusterViewComponent: Unmounting...'); // Unmount sub-components if (this.primaryNodeComponent) { @@ -2094,12 +2094,12 @@ class ClusterViewComponent extends Component { } super.unmount(); - console.log('ClusterViewComponent: Unmounted'); + logger.debug('ClusterViewComponent: Unmounted'); } // Override pause method to handle sub-components onPause() { - console.log('ClusterViewComponent: Pausing...'); + logger.debug('ClusterViewComponent: Pausing...'); // Pause sub-components if (this.primaryNodeComponent && this.primaryNodeComponent.isMounted) { @@ -2118,7 +2118,7 @@ class ClusterViewComponent extends Component { // Override resume method to handle sub-components onResume() { - console.log('ClusterViewComponent: Resuming...'); + logger.debug('ClusterViewComponent: Resuming...'); // Resume sub-components if (this.primaryNodeComponent && this.primaryNodeComponent.isMounted) { @@ -2151,11 +2151,11 @@ class FirmwareViewComponent extends Component { constructor(container, viewModel, eventBus) { super(container, viewModel, eventBus); - console.log('FirmwareViewComponent: Constructor called'); - console.log('FirmwareViewComponent: Container:', container); + logger.debug('FirmwareViewComponent: Constructor called'); + logger.debug('FirmwareViewComponent: Container:', container); const firmwareContainer = this.findElement('#firmware-container'); - console.log('FirmwareViewComponent: Firmware container found:', !!firmwareContainer); + logger.debug('FirmwareViewComponent: Firmware container found:', !!firmwareContainer); this.firmwareComponent = new FirmwareComponent( firmwareContainer, @@ -2163,13 +2163,13 @@ class FirmwareViewComponent extends Component { eventBus ); - console.log('FirmwareViewComponent: FirmwareComponent created'); + logger.debug('FirmwareViewComponent: FirmwareComponent created'); } mount() { super.mount(); - console.log('FirmwareViewComponent: Mounting...'); + logger.debug('FirmwareViewComponent: Mounting...'); // Mount sub-component this.firmwareComponent.mount(); @@ -2177,7 +2177,7 @@ class FirmwareViewComponent extends Component { // Update available nodes this.updateAvailableNodes(); - console.log('FirmwareViewComponent: Mounted successfully'); + logger.debug('FirmwareViewComponent: Mounted successfully'); } unmount() { @@ -2191,7 +2191,7 @@ class FirmwareViewComponent extends Component { // Override pause method to handle sub-components onPause() { - console.log('FirmwareViewComponent: Pausing...'); + logger.debug('FirmwareViewComponent: Pausing...'); // Pause sub-component if (this.firmwareComponent && this.firmwareComponent.isMounted) { @@ -2201,7 +2201,7 @@ class FirmwareViewComponent extends Component { // Override resume method to handle sub-components onResume() { - console.log('FirmwareViewComponent: Resuming...'); + logger.debug('FirmwareViewComponent: Resuming...'); // Resume sub-component if (this.firmwareComponent && this.firmwareComponent.isMounted) { @@ -2217,14 +2217,14 @@ class FirmwareViewComponent extends Component { async updateAvailableNodes() { try { - console.log('FirmwareViewComponent: updateAvailableNodes called'); + logger.debug('FirmwareViewComponent: updateAvailableNodes called'); const response = await window.apiClient.getClusterMembers(); const nodes = response.members || []; - console.log('FirmwareViewComponent: Got nodes:', nodes); + logger.debug('FirmwareViewComponent: Got nodes:', nodes); this.viewModel.updateAvailableNodes(nodes); - console.log('FirmwareViewComponent: Available nodes updated in view model'); + logger.debug('FirmwareViewComponent: Available nodes updated in view model'); } catch (error) { - console.error('Failed to update available nodes:', error); + logger.error('Failed to update available nodes:', error); } } } @@ -2341,7 +2341,7 @@ class TopologyGraphComponent extends Component { // Complete mount after initialization this.completeMount(); }).catch(error => { - console.error('TopologyGraphComponent: Initialization failed during mount:', error); + logger.error('TopologyGraphComponent: Initialization failed during mount:', error); // Still complete mount to prevent blocking this.completeMount(); }); @@ -2352,38 +2352,38 @@ class TopologyGraphComponent extends Component { } completeMount() { - console.log('TopologyGraphComponent: completeMount called'); + logger.debug('TopologyGraphComponent: completeMount called'); this.isMounted = true; - console.log('TopologyGraphComponent: Setting up event listeners...'); + logger.debug('TopologyGraphComponent: Setting up event listeners...'); this.setupEventListeners(); - console.log('TopologyGraphComponent: Setting up view model listeners...'); + logger.debug('TopologyGraphComponent: Setting up view model listeners...'); this.setupViewModelListeners(); - console.log('TopologyGraphComponent: Calling render...'); + logger.debug('TopologyGraphComponent: Calling render...'); this.render(); - console.log('TopologyGraphComponent: Mounted successfully'); + logger.debug('TopologyGraphComponent: Mounted successfully'); } setupEventListeners() { - console.log('TopologyGraphComponent: setupEventListeners called'); - console.log('TopologyGraphComponent: Container:', this.container); - console.log('TopologyGraphComponent: Container ID:', this.container?.id); + logger.debug('TopologyGraphComponent: setupEventListeners called'); + logger.debug('TopologyGraphComponent: Container:', this.container); + logger.debug('TopologyGraphComponent: Container ID:', this.container?.id); // Add resize listener to update dimensions when window is resized this.resizeHandler = this.handleResize.bind(this); window.addEventListener('resize', this.resizeHandler); // Refresh button removed from HTML, so no need to set up event listeners - console.log('TopologyGraphComponent: No event listeners needed (refresh button removed)'); + logger.debug('TopologyGraphComponent: No event listeners needed (refresh button removed)'); } setupViewModelListeners() { - console.log('TopologyGraphComponent: setupViewModelListeners called'); - console.log('TopologyGraphComponent: isInitialized =', this.isInitialized); + logger.debug('TopologyGraphComponent: setupViewModelListeners called'); + logger.debug('TopologyGraphComponent: isInitialized =', this.isInitialized); if (this.isInitialized) { // Component is already initialized, set up subscriptions immediately - console.log('TopologyGraphComponent: Setting up property subscriptions immediately'); + logger.debug('TopologyGraphComponent: Setting up property subscriptions immediately'); this.subscribeToProperty('nodes', this.renderGraph.bind(this)); this.subscribeToProperty('links', this.renderGraph.bind(this)); this.subscribeToProperty('isLoading', this.handleLoadingState.bind(this)); @@ -2391,7 +2391,7 @@ class TopologyGraphComponent extends Component { this.subscribeToProperty('selectedNode', this.updateSelection.bind(this)); } else { // Component not yet initialized, store for later - console.log('TopologyGraphComponent: Component not initialized, storing pending subscriptions'); + logger.debug('TopologyGraphComponent: Component not initialized, storing pending subscriptions'); this._pendingSubscriptions = [ ['nodes', this.renderGraph.bind(this)], ['links', this.renderGraph.bind(this)], @@ -2403,7 +2403,7 @@ class TopologyGraphComponent extends Component { } async initialize() { - console.log('TopologyGraphComponent: Initializing...'); + logger.debug('TopologyGraphComponent: Initializing...'); // Wait for DOM to be ready if (document.readyState === 'loading') { @@ -2433,7 +2433,7 @@ class TopologyGraphComponent extends Component { setupSVG() { const container = this.findElement('#topology-graph-container'); if (!container) { - console.error('TopologyGraphComponent: Graph container not found'); + logger.error('TopologyGraphComponent: Graph container not found'); return; } @@ -2468,13 +2468,13 @@ class TopologyGraphComponent extends Component { // Apply initial zoom to show the graph more zoomed in mainGroup.attr('transform', 'scale(1.4) translate(-200, -150)'); // Better centered positioning - console.log('TopologyGraphComponent: SVG setup completed'); + logger.debug('TopologyGraphComponent: SVG setup completed'); } // Ensure component is initialized async ensureInitialized() { if (!this.isInitialized) { - console.log('TopologyGraphComponent: Ensuring initialization...'); + logger.debug('TopologyGraphComponent: Ensuring initialization...'); await this.initialize(); } return this.isInitialized; @@ -2484,12 +2484,12 @@ class TopologyGraphComponent extends Component { try { // Check if component is initialized if (!this.isInitialized) { - console.log('TopologyGraphComponent: Component not yet initialized, ensuring initialization...'); + logger.debug('TopologyGraphComponent: Component not yet initialized, ensuring initialization...'); this.ensureInitialized().then(() => { // Re-render after initialization this.renderGraph(); }).catch(error => { - console.error('TopologyGraphComponent: Failed to initialize:', error); + logger.error('TopologyGraphComponent: Failed to initialize:', error); }); return; } @@ -2499,7 +2499,7 @@ class TopologyGraphComponent extends Component { // Check if SVG is initialized if (!this.svg) { - console.log('TopologyGraphComponent: SVG not initialized yet, setting up SVG first'); + logger.debug('TopologyGraphComponent: SVG not initialized yet, setting up SVG first'); this.setupSVG(); } @@ -2508,12 +2508,12 @@ class TopologyGraphComponent extends Component { return; } - console.log('TopologyGraphComponent: Rendering graph with', nodes.length, 'nodes and', links.length, 'links'); + logger.debug('TopologyGraphComponent: Rendering graph with', nodes.length, 'nodes and', links.length, 'links'); // Get the main SVG group (the one created in setupSVG) let svgGroup = this.svg.select('g'); if (!svgGroup || svgGroup.empty()) { - console.log('TopologyGraphComponent: Creating new SVG group'); + logger.debug('TopologyGraphComponent: Creating new SVG group'); svgGroup = this.svg.append('g'); // Apply initial zoom to show the graph more zoomed in svgGroup.attr('transform', 'scale(1.4) translate(-200, -150)'); // Better centered positioning @@ -2668,7 +2668,7 @@ class TopologyGraphComponent extends Component { // Add legend this.addLegend(svgGroup); } catch (error) { - console.error('Failed to render graph:', error); + logger.error('Failed to render graph:', error); } } @@ -2835,25 +2835,25 @@ class TopologyGraphComponent extends Component { } handleRefresh() { - console.log('TopologyGraphComponent: handleRefresh called'); + logger.debug('TopologyGraphComponent: handleRefresh called'); if (!this.isInitialized) { - console.log('TopologyGraphComponent: Component not yet initialized, ensuring initialization...'); + logger.debug('TopologyGraphComponent: Component not yet initialized, ensuring initialization...'); this.ensureInitialized().then(() => { // Refresh after initialization this.viewModel.updateNetworkTopology(); }).catch(error => { - console.error('TopologyGraphComponent: Failed to initialize for refresh:', error); + logger.error('TopologyGraphComponent: Failed to initialize for refresh:', error); }); return; } - console.log('TopologyGraphComponent: Calling updateNetworkTopology...'); + logger.debug('TopologyGraphComponent: Calling updateNetworkTopology...'); this.viewModel.updateNetworkTopology(); } handleLoadingState(isLoading) { - console.log('TopologyGraphComponent: handleLoadingState called with:', isLoading); + logger.debug('TopologyGraphComponent: handleLoadingState called with:', isLoading); const container = this.findElement('#topology-graph-container'); if (isLoading) { @@ -2922,18 +2922,18 @@ class TopologyGraphComponent extends Component { // Override render method to display the graph render() { - console.log('TopologyGraphComponent: render called'); + logger.debug('TopologyGraphComponent: render called'); if (!this.isInitialized) { - console.log('TopologyGraphComponent: Not initialized yet, skipping render'); + logger.debug('TopologyGraphComponent: Not initialized yet, skipping render'); return; } const nodes = this.viewModel.get('nodes'); const links = this.viewModel.get('links'); if (nodes && nodes.length > 0) { - console.log('TopologyGraphComponent: Rendering graph with data'); + logger.debug('TopologyGraphComponent: Rendering graph with data'); this.renderGraph(); } else { - console.log('TopologyGraphComponent: No data available, showing loading state'); + logger.debug('TopologyGraphComponent: No data available, showing loading state'); this.handleLoadingState(true); } } @@ -3113,7 +3113,7 @@ class MemberCardOverlayComponent extends Component { card.classList.add('expanded'); } catch (error) { - console.error('Failed to expand member card:', error); + logger.error('Failed to expand member card:', error); // Still show the UI even if details fail to load card.classList.add('expanded'); const details = card.querySelector('.member-details');