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

refactor(logging): downgrade noisy component console.log to logger.debug across ClusterMembers, NodeDetails, Firmware, and Topology components

Browse Source
This commit is contained in:
0x1d
2025-08-31 12:06:06 +02:00
parent ab03cd772d
commit 4ee209ef78
1 changed files with 64 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
public/scripts/components.js
View File

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