From c0aef5b8d514b6a33aefdfe04efa2ea7961de2e0 Mon Sep 17 00:00:00 2001
From: Patrick Balsiger <frupii@gmail.com>
Date: Sun, 31 Aug 2025 11:04:47 +0200
Subject: [PATCH] refactor(app): mount ClusterStatusComponent and remove
 duplicate cluster status logic from app.js

---
 public/scripts/app.js | 97 +------------------------------------------
 1 file changed, 2 insertions(+), 95 deletions(-)

diff --git a/public/scripts/app.js b/public/scripts/app.js
index 35f8dc7..8a07bc7 100644
--- a/public/scripts/app.js
+++ b/public/scripts/app.js
@@ -40,29 +40,20 @@ document.addEventListener('DOMContentLoaded', function() {
     app.registerRoute('firmware', FirmwareViewComponent, 'firmware-view', firmwareViewModel);
     console.log('App: Routes registered and components pre-initialized');
     
-    // Initialize cluster status component for header badge AFTER main components
-    // DISABLED - causes interference with main cluster functionality
-    /*
+    // Initialize cluster status component for header badge
     console.log('App: Initializing cluster status component...');
     const clusterStatusComponent = new ClusterStatusComponent(
         document.querySelector('.cluster-status'),
         clusterViewModel,
         app.eventBus
     );
-    clusterStatusComponent.initialize();
+    clusterStatusComponent.mount();
     console.log('App: Cluster status component initialized');
-    */
     
     // Set up navigation event listeners
     console.log('App: Setting up navigation...');
     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
     console.log('App: Navigating to default route...');
     app.navigateTo('cluster');
@@ -126,90 +117,6 @@ function setupPeriodicUpdates() {
     }, 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
 window.addEventListener('error', function(event) {
     console.error('Global error:', event.error);