50 lines
2.1 KiB
JavaScript
50 lines
2.1 KiB
JavaScript
// 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);
|
|
}
|
|
}
|
|
}
|