// 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 = window.icon('error', { width: 12, height: 12 }); statusClass = 'cluster-status-error'; } else if (totalNodes === 0) { statusText = 'Cluster Offline'; statusIcon = window.icon('dotRed', { width: 12, height: 12 }); statusClass = 'cluster-status-offline'; } else if (clientInitialized) { statusText = 'Cluster Online'; statusIcon = window.icon('dotGreen', { width: 12, height: 12 }); statusClass = 'cluster-status-online'; } else { statusText = 'Cluster Connecting'; statusIcon = window.icon('dotYellow', { width: 12, height: 12 }); 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); } } }