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

feature/refactoring #3

Merged
master merged 18 commits from feature/refactoring into main 2025-09-02 13:26:13 +02:00
Conversation 0 Commits 18 Files Changed 21 +64 -64
1 changed files with 64 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4ee209ef78 - Show all commits

128
public/scripts/components.js
View File

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