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);
} 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 = `
<div class="error">
<strong>Error loading node details:</strong><br>
@@ -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 = `
<div class="tabs-container">
@@ -1215,10 +1215,10 @@ class NodeDetailsComponent extends Component {
</div>
`;
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 = `
<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;
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');