refactor(components): split components.js into separate files and add loader; app waits for components before init

2025-08-31 14:00:33 +02:00
parent 83d252f3cc
commit cc7fa0fa00
11 changed files with 3124 additions and 2 deletions
--- a/public/scripts/components/ClusterStatusComponent.js
+++ b/public/scripts/components/ClusterStatusComponent.js
@@ -0,0 +1,50 @@
+// Cluster Status Component for header badge
+class ClusterStatusComponent extends Component {
+    constructor(container, viewModel, eventBus) {
+        super(container, viewModel, eventBus);
+    }
+
+    setupViewModelListeners() {
+        // Subscribe to properties that affect cluster status
+        this.subscribeToProperty('totalNodes', this.render.bind(this));
+        this.subscribeToProperty('clientInitialized', this.render.bind(this));
+        this.subscribeToProperty('error', this.render.bind(this));
+    }
+
+    render() {
+        const totalNodes = this.viewModel.get('totalNodes');
+        const clientInitialized = this.viewModel.get('clientInitialized');
+        const error = this.viewModel.get('error');
+
+        let statusText, statusIcon, statusClass;
+
+        if (error) {
+            statusText = 'Cluster Error';
+            statusIcon = '❌';
+            statusClass = 'cluster-status-error';
+        } else if (totalNodes === 0) {
+            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 cluster status badge using the container passed to this component
+        if (this.container) {
+            this.container.innerHTML = `${statusIcon} ${statusText}`;
+            
+            // Remove all existing status classes
+            this.container.classList.remove('cluster-status-online', 'cluster-status-offline', 'cluster-status-connecting', 'cluster-status-error');
+            
+            // Add the appropriate status class
+            this.container.classList.add(statusClass);
+        }
+    }
+}