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

refactor(logging): replace remaining console.* with logger.* in components.js

Browse Source
This commit is contained in:
0x1d
2025-08-31 12:20:11 +02:00
parent 9dab498aa2
commit 948a8a1fab
1 changed files with 119 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

238
public/scripts/components.js
View File

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