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

refactor(app): mount ClusterStatusComponent and remove duplicate cluster status logic from app.js

Browse Source
This commit is contained in:
0x1d
2025-08-31 11:04:47 +02:00
parent d91eb4d5b6
commit c0aef5b8d5
1 changed files with 2 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
public/scripts/app.js
View File

@@ -40,29 +40,20 @@ document.addEventListener('DOMContentLoaded', function() {
app.registerRoute('firmware', FirmwareViewComponent, 'firmware-view', firmwareViewModel); app.registerRoute('firmware', FirmwareViewComponent, 'firmware-view', firmwareViewModel);
console.log('App: Routes registered and components pre-initialized'); console.log('App: Routes registered and components pre-initialized');
// Initialize cluster status component for header badge AFTER main components // Initialize cluster status component for header badge
// DISABLED - causes interference with main cluster functionality
/*
console.log('App: Initializing cluster status component...'); console.log('App: Initializing cluster status component...');
const clusterStatusComponent = new ClusterStatusComponent( const clusterStatusComponent = new ClusterStatusComponent(
document.querySelector('.cluster-status'), document.querySelector('.cluster-status'),
clusterViewModel, clusterViewModel,
app.eventBus app.eventBus
); );
clusterStatusComponent.initialize(); clusterStatusComponent.mount();
console.log('App: Cluster status component initialized'); console.log('App: Cluster status component initialized');
*/
// Set up navigation event listeners // Set up navigation event listeners
console.log('App: Setting up navigation...'); console.log('App: Setting up navigation...');
app.setupNavigation(); app.setupNavigation();
// Set up cluster status updates (simple approach without component interference)
setupClusterStatusUpdates(clusterViewModel);
// Set up periodic updates for cluster view with state preservation
// setupPeriodicUpdates(); // Disabled automatic refresh
// Now navigate to the default route // Now navigate to the default route
console.log('App: Navigating to default route...'); console.log('App: Navigating to default route...');
app.navigateTo('cluster'); app.navigateTo('cluster');
@@ -126,90 +117,6 @@ function setupPeriodicUpdates() {
}, 10000); }, 10000);
} }
// Set up cluster status updates (simple approach without component interference)
function setupClusterStatusUpdates(clusterViewModel) {
// Set initial "discovering" state immediately
updateClusterStatusBadge(undefined, undefined, undefined);
// Force a fresh fetch and keep showing "discovering" until we get real data
let hasReceivedRealData = false;
// Subscribe to view model changes to update cluster status
clusterViewModel.subscribe('totalNodes', (totalNodes) => {
if (hasReceivedRealData) {
updateClusterStatusBadge(totalNodes, clusterViewModel.get('clientInitialized'), clusterViewModel.get('error'));
}
});
clusterViewModel.subscribe('clientInitialized', (clientInitialized) => {
if (hasReceivedRealData) {
updateClusterStatusBadge(clusterViewModel.get('totalNodes'), clientInitialized, clusterViewModel.get('error'));
}
});
clusterViewModel.subscribe('error', (error) => {
if (hasReceivedRealData) {
updateClusterStatusBadge(clusterViewModel.get('totalNodes'), clusterViewModel.get('clientInitialized'), error);
}
});
// Force a fresh fetch and only update status after we get real data
setTimeout(async () => {
try {
console.log('Cluster Status: Forcing fresh fetch from backend...');
const discoveryInfo = await window.apiClient.getDiscoveryInfo();
console.log('Cluster Status: Got fresh data:', discoveryInfo);
// Now we have real data, mark it and update the status
hasReceivedRealData = true;
updateClusterStatusBadge(discoveryInfo.totalNodes, discoveryInfo.clientInitialized, null);
} catch (error) {
console.error('Cluster Status: Failed to fetch fresh data:', error);
hasReceivedRealData = true;
updateClusterStatusBadge(0, false, error.message);
}
}, 100); // Small delay to ensure view model is ready
}
function updateClusterStatusBadge(totalNodes, clientInitialized, error) {
const clusterStatusBadge = document.querySelector('.cluster-status');
if (!clusterStatusBadge) return;
let statusText, statusIcon, statusClass;
// Check if we're still in initial state (no real data yet)
const hasRealData = totalNodes !== undefined && clientInitialized !== undefined;
if (!hasRealData) {
statusText = 'Cluster Discovering...';
statusIcon = '🔍';
statusClass = 'cluster-status-discovering';
} else if (error || totalNodes === 0) {
// Show "Cluster Offline" for both errors and when no nodes are discovered
statusText = 'Cluster Offline';
statusIcon = '🔴';
statusClass = 'cluster-status-offline';
} else if (clientInitialized) {
statusText = 'Cluster Online';
statusIcon = '🟢';
statusClass = 'cluster-status-online';
} else {
statusText = 'Cluster Connecting';
statusIcon = '🟡';
statusClass = 'cluster-status-connecting';
}
// Update the badge
clusterStatusBadge.innerHTML = `${statusIcon} ${statusText}`;
// Remove all existing status classes
clusterStatusBadge.classList.remove('cluster-status-online', 'cluster-status-offline', 'cluster-status-connecting', 'cluster-status-error', 'cluster-status-discovering');
// Add the appropriate status class
clusterStatusBadge.classList.add(statusClass);
}
// Global error handler // Global error handler
window.addEventListener('error', function(event) { window.addEventListener('error', function(event) {
console.error('Global error:', event.error); console.error('Global error:', event.error);