From 4ee209ef78bdd19e95dd51f38692f53831cff5b6 Mon Sep 17 00:00:00 2001 From: Patrick Balsiger Date: Sun, 31 Aug 2025 12:06:06 +0200 Subject: [PATCH] refactor(logging): downgrade noisy component console.log to logger.debug across ClusterMembers, NodeDetails, Firmware, and Topology components --- public/scripts/components.js | 128 +++++++++++++++++------------------ 1 file changed, 64 insertions(+), 64 deletions(-) diff --git a/public/scripts/components.js b/public/scripts/components.js index 11cb776..449a5c1 100644 --- a/public/scripts/components.js +++ b/public/scripts/components.js @@ -94,10 +94,10 @@ class ClusterMembersComponent extends Component { constructor(container, viewModel, eventBus) { super(container, viewModel, eventBus); - console.log('ClusterMembersComponent: Constructor called'); - console.log('ClusterMembersComponent: Container:', container); - console.log('ClusterMembersComponent: Container ID:', container?.id); - console.log('ClusterMembersComponent: Container innerHTML:', container?.innerHTML); + logger.debug('ClusterMembersComponent: Constructor called'); + logger.debug('ClusterMembersComponent: Container:', container); + logger.debug('ClusterMembersComponent: Container ID:', container?.id); + logger.debug('ClusterMembersComponent: Container innerHTML:', container?.innerHTML); // Track if we're in the middle of a render operation this.renderInProgress = false; @@ -113,17 +113,17 @@ class ClusterMembersComponent extends Component { } mount() { - console.log('ClusterMembersComponent: Starting mount...'); + logger.debug('ClusterMembersComponent: Starting mount...'); super.mount(); // Show loading state immediately when mounted - console.log('ClusterMembersComponent: Showing initial loading state'); + logger.debug('ClusterMembersComponent: Showing initial loading state'); this.showLoadingState(); // Set up loading timeout safeguard this.setupLoadingTimeout(); - console.log('ClusterMembersComponent: Mounted successfully'); + logger.debug('ClusterMembersComponent: Mounted successfully'); } // Setup loading timeout safeguard to prevent getting stuck in loading state @@ -139,12 +139,12 @@ class ClusterMembersComponent extends Component { // Force a render check when loading gets stuck forceRenderCheck() { - console.log('ClusterMembersComponent: Force render check called'); + logger.debug('ClusterMembersComponent: Force render check called'); const members = this.viewModel.get('members'); const error = this.viewModel.get('error'); const isLoading = this.viewModel.get('isLoading'); - console.log('ClusterMembersComponent: Force render check state:', { members, error, isLoading }); + logger.debug('ClusterMembersComponent: Force render check state:', { members, error, isLoading }); if (error) { this.showErrorState(error); @@ -156,67 +156,67 @@ class ClusterMembersComponent extends Component { } setupEventListeners() { - console.log('ClusterMembersComponent: Setting up event listeners...'); + logger.debug('ClusterMembersComponent: Setting up event listeners...'); // Note: Refresh button is now handled by ClusterViewComponent // since it's in the cluster header, not in the members container } setupViewModelListeners() { - console.log('ClusterMembersComponent: Setting up view model listeners...'); + logger.debug('ClusterMembersComponent: Setting up view model listeners...'); // Listen to cluster members changes with change detection this.subscribeToProperty('members', this.handleMembersUpdate.bind(this)); this.subscribeToProperty('isLoading', this.handleLoadingUpdate.bind(this)); this.subscribeToProperty('error', this.handleErrorUpdate.bind(this)); - console.log('ClusterMembersComponent: View model listeners set up'); + logger.debug('ClusterMembersComponent: View model listeners set up'); } // Handle members update with state preservation handleMembersUpdate(newMembers, previousMembers) { - console.log('ClusterMembersComponent: Members updated:', { newMembers, previousMembers }); + logger.debug('ClusterMembersComponent: Members updated:', { newMembers, previousMembers }); // Prevent multiple simultaneous renders if (this.renderInProgress) { - console.log('ClusterMembersComponent: Render already in progress, skipping update'); + logger.debug('ClusterMembersComponent: Render already in progress, skipping update'); return; } // Check if we're currently loading - if so, let the loading handler deal with it const isLoading = this.viewModel.get('isLoading'); if (isLoading) { - console.log('ClusterMembersComponent: Currently loading, skipping members update (will be handled by loading completion)'); + logger.debug('ClusterMembersComponent: Currently loading, skipping members update (will be handled by loading completion)'); return; } // On first load (no previous members), always render if (!previousMembers || !Array.isArray(previousMembers) || previousMembers.length === 0) { - console.log('ClusterMembersComponent: First load or no previous members, performing full render'); + logger.debug('ClusterMembersComponent: First load or no previous members, performing full render'); this.render(); return; } if (this.shouldPreserveState(newMembers, previousMembers)) { // Perform partial update to preserve UI state - console.log('ClusterMembersComponent: Preserving state, performing partial update'); + logger.debug('ClusterMembersComponent: Preserving state, performing partial update'); this.updateMembersPartially(newMembers, previousMembers); } else { // Full re-render if structure changed significantly - console.log('ClusterMembersComponent: Structure changed, performing full re-render'); + logger.debug('ClusterMembersComponent: Structure changed, performing full re-render'); this.render(); } } // Handle loading state update handleLoadingUpdate(isLoading) { - console.log('ClusterMembersComponent: Loading state changed:', isLoading); + logger.debug('ClusterMembersComponent: Loading state changed:', isLoading); if (isLoading) { - console.log('ClusterMembersComponent: Showing loading state'); + logger.debug('ClusterMembersComponent: Showing loading state'); this.renderLoading(`\n
\n
Loading cluster members...
\n
\n `); // Set up a loading completion check this.checkLoadingCompletion(); } else { - console.log('ClusterMembersComponent: Loading completed, checking if we need to render'); + logger.debug('ClusterMembersComponent: Loading completed, checking if we need to render'); // When loading completes, check if we have data to render this.handleLoadingCompletion(); } @@ -228,16 +228,16 @@ class ClusterMembersComponent extends Component { const error = this.viewModel.get('error'); const isLoading = this.viewModel.get('isLoading'); - console.log('ClusterMembersComponent: Handling loading completion:', { members, error, isLoading }); + logger.debug('ClusterMembersComponent: Handling loading completion:', { members, error, isLoading }); if (error) { - console.log('ClusterMembersComponent: Loading completed with error, showing error state'); + logger.debug('ClusterMembersComponent: Loading completed with error, showing error state'); this.showErrorState(error); } else if (members && members.length > 0) { - console.log('ClusterMembersComponent: Loading completed with data, rendering members'); + logger.debug('ClusterMembersComponent: Loading completed with data, rendering members'); this.renderMembers(members); } else if (!isLoading) { - console.log('ClusterMembersComponent: Loading completed but no data, showing empty state'); + logger.debug('ClusterMembersComponent: Loading completed but no data, showing empty state'); this.showEmptyState(); } } @@ -253,7 +253,7 @@ class ClusterMembersComponent extends Component { this.loadingCompletionCheck = setTimeout(() => { const isLoading = this.viewModel.get('isLoading'); if (!isLoading) { - console.log('ClusterMembersComponent: Loading completion check triggered'); + logger.debug('ClusterMembersComponent: Loading completion check triggered'); this.handleLoadingCompletion(); } }, 1000); // Check after 1 second @@ -394,7 +394,7 @@ class ClusterMembersComponent extends Component { // Show loading state showLoadingState() { - console.log('ClusterMembersComponent: showLoadingState() called'); + logger.debug('ClusterMembersComponent: showLoadingState() called'); this.renderLoading(`
Loading cluster members...
@@ -404,13 +404,13 @@ class ClusterMembersComponent extends Component { // Show error state showErrorState(error) { - console.log('ClusterMembersComponent: showErrorState() called with error:', error); + logger.debug('ClusterMembersComponent: showErrorState() called with error:', error); this.renderError(`Error loading cluster members: ${error}`); } // Show empty state showEmptyState() { - console.log('ClusterMembersComponent: showEmptyState() called'); + logger.debug('ClusterMembersComponent: showEmptyState() called'); this.renderEmpty(`
🌐
@@ -423,14 +423,14 @@ class ClusterMembersComponent extends Component { } renderMembers(members) { - console.log('ClusterMembersComponent: renderMembers() called with', members.length, 'members'); + logger.debug('ClusterMembersComponent: renderMembers() called with', members.length, 'members'); const membersHTML = members.map(member => { const statusClass = member.status === 'active' ? 'status-online' : 'status-offline'; const statusText = member.status === 'active' ? 'Online' : 'Offline'; const statusIcon = member.status === 'active' ? '🟢' : '🔴'; - console.log('ClusterMembersComponent: Rendering member:', member); + logger.debug('ClusterMembersComponent: Rendering member:', member); return `
@@ -470,9 +470,9 @@ class ClusterMembersComponent extends Component { `; }).join(''); - console.log('ClusterMembersComponent: Setting HTML, length:', membersHTML.length); + logger.debug('ClusterMembersComponent: Setting HTML, length:', membersHTML.length); this.setHTML('', membersHTML); - console.log('ClusterMembersComponent: HTML set, setting up member cards...'); + logger.debug('ClusterMembersComponent: HTML set, setting up member cards...'); this.setupMemberCards(members); } @@ -1134,7 +1134,7 @@ class NodeDetailsComponent extends Component { } setupTabs() { - console.log('NodeDetailsComponent: Setting up tabs'); + logger.debug('NodeDetailsComponent: Setting up tabs'); super.setupTabs(this.container, { onChange: (tab) => { // Persist active tab in the view model for restoration @@ -1148,7 +1148,7 @@ class NodeDetailsComponent extends Component { // Update active tab without full re-render updateActiveTab(newTab, previousTab = null) { this.setActiveTab(newTab); - console.log(`NodeDetailsComponent: Active tab updated to '${newTab}'`); + logger.debug(`NodeDetailsComponent: Active tab updated to '${newTab}'`); } setupFirmwareUpload() { @@ -1245,17 +1245,17 @@ class FirmwareComponent extends Component { constructor(container, viewModel, eventBus) { super(container, viewModel, eventBus); - console.log('FirmwareComponent: Constructor called'); - console.log('FirmwareComponent: Container:', container); - console.log('FirmwareComponent: Container ID:', container?.id); + logger.debug('FirmwareComponent: Constructor called'); + logger.debug('FirmwareComponent: Container:', container); + logger.debug('FirmwareComponent: Container ID:', container?.id); // Check if the dropdown exists in the container if (container) { const dropdown = container.querySelector('#specific-node-select'); - console.log('FirmwareComponent: Dropdown found in constructor:', !!dropdown); + logger.debug('FirmwareComponent: Dropdown found in constructor:', !!dropdown); if (dropdown) { - console.log('FirmwareComponent: Dropdown tagName:', dropdown.tagName); - console.log('FirmwareComponent: Dropdown id:', dropdown.id); + logger.debug('FirmwareComponent: Dropdown tagName:', dropdown.tagName); + logger.debug('FirmwareComponent: Dropdown id:', dropdown.id); } } } @@ -1275,16 +1275,16 @@ class FirmwareComponent extends Component { // Setup specific node select change handler const specificNodeSelect = this.findElement('#specific-node-select'); - console.log('FirmwareComponent: setupEventListeners - specificNodeSelect found:', !!specificNodeSelect); + logger.debug('FirmwareComponent: setupEventListeners - specificNodeSelect found:', !!specificNodeSelect); if (specificNodeSelect) { - console.log('FirmwareComponent: specificNodeSelect element:', specificNodeSelect); - console.log('FirmwareComponent: specificNodeSelect tagName:', specificNodeSelect.tagName); - console.log('FirmwareComponent: specificNodeSelect id:', specificNodeSelect.id); + logger.debug('FirmwareComponent: specificNodeSelect element:', specificNodeSelect); + logger.debug('FirmwareComponent: specificNodeSelect tagName:', specificNodeSelect.tagName); + logger.debug('FirmwareComponent: specificNodeSelect id:', specificNodeSelect.id); // Store the bound handler as an instance property this._boundNodeSelectHandler = this.handleNodeSelect.bind(this); this.addEventListener(specificNodeSelect, 'change', this._boundNodeSelectHandler); - console.log('FirmwareComponent: Event listener added to specificNodeSelect'); + logger.debug('FirmwareComponent: Event listener added to specificNodeSelect'); } else { console.warn('FirmwareComponent: specificNodeSelect element not found during setupEventListeners'); } @@ -1345,15 +1345,15 @@ class FirmwareComponent extends Component { mount() { super.mount(); - console.log('FirmwareComponent: Mounting...'); + logger.debug('FirmwareComponent: Mounting...'); // Check if the dropdown exists when mounted const dropdown = this.findElement('#specific-node-select'); - console.log('FirmwareComponent: Mount - dropdown found:', !!dropdown); + logger.debug('FirmwareComponent: Mount - dropdown found:', !!dropdown); if (dropdown) { - console.log('FirmwareComponent: Mount - dropdown tagName:', dropdown.tagName); - console.log('FirmwareComponent: Mount - dropdown id:', dropdown.id); - console.log('FirmwareComponent: Mount - dropdown innerHTML:', dropdown.innerHTML); + logger.debug('FirmwareComponent: Mount - dropdown tagName:', dropdown.tagName); + logger.debug('FirmwareComponent: Mount - dropdown id:', dropdown.id); + logger.debug('FirmwareComponent: Mount - dropdown innerHTML:', dropdown.innerHTML); } // Initialize target visibility and label list on first mount @@ -1365,7 +1365,7 @@ class FirmwareComponent extends Component { console.warn('FirmwareComponent: Initialization after mount failed:', e); } - console.log('FirmwareComponent: Mounted successfully'); + logger.debug('FirmwareComponent: Mounted successfully'); } render() { @@ -1751,7 +1751,7 @@ class FirmwareComponent extends Component { const specificNodeSelect = this.findElement('#specific-node-select'); const labelSelect = this.findElement('#label-select'); - console.log('FirmwareComponent: updateTargetVisibility called with targetType:', targetType); + logger.debug('FirmwareComponent: updateTargetVisibility called with targetType:', targetType); if (targetType === 'specific') { if (specificNodeSelect) { specificNodeSelect.style.display = 'inline-block'; } @@ -1792,9 +1792,9 @@ class FirmwareComponent extends Component { return; } - console.log('FirmwareComponent: populateNodeSelect called'); - console.log('FirmwareComponent: Select element:', select); - console.log('FirmwareComponent: Available nodes:', this.viewModel.get('availableNodes')); + logger.debug('FirmwareComponent: populateNodeSelect called'); + logger.debug('FirmwareComponent: Select element:', select); + logger.debug('FirmwareComponent: Available nodes:', this.viewModel.get('availableNodes')); // Clear existing options select.innerHTML = ''; @@ -1822,7 +1822,7 @@ class FirmwareComponent extends Component { // Ensure event listener is still bound after repopulating this.ensureNodeSelectListener(select); - console.log('FirmwareComponent: Node select populated with', availableNodes.length, 'nodes'); + logger.debug('FirmwareComponent: Node select populated with', availableNodes.length, 'nodes'); } // Ensure the node select change listener is properly bound @@ -2284,7 +2284,7 @@ class ClusterStatusComponent extends Component { class TopologyGraphComponent extends Component { constructor(container, viewModel, eventBus) { super(container, viewModel, eventBus); - console.log('TopologyGraphComponent: Constructor called'); + logger.debug('TopologyGraphComponent: Constructor called'); this.svg = null; this.simulation = null; this.zoom = null; @@ -2303,7 +2303,7 @@ class TopologyGraphComponent extends Component { this.width = Math.max(this.width, 800); this.height = Math.max(this.height, 600); - console.log('TopologyGraphComponent: Updated dimensions to', this.width, 'x', this.height); + logger.debug('TopologyGraphComponent: Updated dimensions to', this.width, 'x', this.height); } handleResize() { @@ -2330,14 +2330,14 @@ class TopologyGraphComponent extends Component { mount() { if (this.isMounted) return; - console.log('TopologyGraphComponent: Starting mount...'); - console.log('TopologyGraphComponent: isInitialized =', this.isInitialized); + logger.debug('TopologyGraphComponent: Starting mount...'); + logger.debug('TopologyGraphComponent: isInitialized =', this.isInitialized); // Call initialize if not already done if (!this.isInitialized) { - console.log('TopologyGraphComponent: Initializing during mount...'); + logger.debug('TopologyGraphComponent: Initializing during mount...'); this.initialize().then(() => { - console.log('TopologyGraphComponent: Initialization completed, calling completeMount...'); + logger.debug('TopologyGraphComponent: Initialization completed, calling completeMount...'); // Complete mount after initialization this.completeMount(); }).catch(error => { @@ -2346,7 +2346,7 @@ class TopologyGraphComponent extends Component { this.completeMount(); }); } else { - console.log('TopologyGraphComponent: Already initialized, calling completeMount directly...'); + logger.debug('TopologyGraphComponent: Already initialized, calling completeMount directly...'); this.completeMount(); } }