fix: cluster status badge
This commit is contained in:
208
public/debug-cluster.html
Normal file
208
public/debug-cluster.html
Normal file
@@ -0,0 +1,208 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Debug Cluster</title>
|
||||
<style>
|
||||
body { font-family: Arial, sans-serif; margin: 20px; background: #f5f5f5; }
|
||||
.debug-section { margin: 20px 0; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
|
||||
.status { padding: 10px; margin: 10px 0; border-radius: 4px; }
|
||||
.status.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
|
||||
.status.error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
|
||||
.status.info { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
|
||||
button { padding: 10px 20px; margin: 5px; border: none; border-radius: 4px; background: #007bff; color: white; cursor: pointer; }
|
||||
button:hover { background: #0056b3; }
|
||||
.log { background: #f8f9fa; padding: 10px; border-radius: 4px; font-family: monospace; font-size: 12px; max-height: 300px; overflow-y: auto; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>🐛 Debug Cluster Functionality</h1>
|
||||
|
||||
<div class="debug-section">
|
||||
<h3>1. API Client Test</h3>
|
||||
<button onclick="testApiClient()">Test API Client</button>
|
||||
<div id="api-client-result"></div>
|
||||
</div>
|
||||
|
||||
<div class="debug-section">
|
||||
<h3>2. View Model Test</h3>
|
||||
<button onclick="testViewModel()">Test View Model</button>
|
||||
<div id="viewmodel-result"></div>
|
||||
</div>
|
||||
|
||||
<div class="debug-section">
|
||||
<h3>3. Component Test</h3>
|
||||
<button onclick="testComponents()">Test Components</button>
|
||||
<div id="component-result"></div>
|
||||
</div>
|
||||
|
||||
<div class="debug-section">
|
||||
<h3>4. Console Log</h3>
|
||||
<div id="console-log" class="log"></div>
|
||||
<button onclick="clearLog()">Clear Log</button>
|
||||
</div>
|
||||
|
||||
<script src="framework.js"></script>
|
||||
<script src="api-client.js"></script>
|
||||
<script src="view-models.js"></script>
|
||||
<script src="components.js"></script>
|
||||
|
||||
<script>
|
||||
// Capture console logs
|
||||
const originalLog = console.log;
|
||||
const originalError = console.error;
|
||||
const originalWarn = console.warn;
|
||||
|
||||
function addToLog(level, ...args) {
|
||||
const logDiv = document.getElementById('console-log');
|
||||
const timestamp = new Date().toLocaleTimeString();
|
||||
const message = args.map(arg => typeof arg === 'object' ? JSON.stringify(arg, null, 2) : String(arg)).join(' ');
|
||||
logDiv.innerHTML += `[${timestamp}] ${level}: ${message}\n`;
|
||||
logDiv.scrollTop = logDiv.scrollHeight;
|
||||
}
|
||||
|
||||
console.log = function(...args) {
|
||||
originalLog.apply(console, args);
|
||||
addToLog('LOG', ...args);
|
||||
};
|
||||
|
||||
console.error = function(...args) {
|
||||
originalError.apply(console, args);
|
||||
addToLog('ERROR', ...args);
|
||||
};
|
||||
|
||||
console.warn = function(...args) {
|
||||
originalWarn.apply(console, args);
|
||||
addToLog('WARN', ...args);
|
||||
};
|
||||
|
||||
function clearLog() {
|
||||
document.getElementById('console-log').innerHTML = '';
|
||||
}
|
||||
|
||||
async function testApiClient() {
|
||||
const resultDiv = document.getElementById('api-client-result');
|
||||
resultDiv.innerHTML = '<div class="status info">Testing API Client...</div>';
|
||||
|
||||
try {
|
||||
console.log('Testing API Client...');
|
||||
|
||||
// Test discovery info
|
||||
const discoveryInfo = await window.apiClient.getDiscoveryInfo();
|
||||
console.log('Discovery Info:', discoveryInfo);
|
||||
|
||||
// Test cluster members
|
||||
const clusterMembers = await window.apiClient.getClusterMembers();
|
||||
console.log('Cluster Members:', clusterMembers);
|
||||
|
||||
resultDiv.innerHTML = `
|
||||
<div class="status success">
|
||||
<strong>API Client Test Passed!</strong><br>
|
||||
Discovery: ${discoveryInfo.totalNodes} nodes, Primary: ${discoveryInfo.primaryNode || 'None'}<br>
|
||||
Members: ${clusterMembers.members ? clusterMembers.members.length : 0} members
|
||||
</div>
|
||||
`;
|
||||
|
||||
} catch (error) {
|
||||
console.error('API Client Test Failed:', error);
|
||||
resultDiv.innerHTML = `<div class="status error">API Client Test Failed: ${error.message}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
async function testViewModel() {
|
||||
const resultDiv = document.getElementById('viewmodel-result');
|
||||
resultDiv.innerHTML = '<div class="status info">Testing View Model...</div>';
|
||||
|
||||
try {
|
||||
console.log('Testing View Model...');
|
||||
|
||||
const clusterViewModel = new ClusterViewModel();
|
||||
console.log('ClusterViewModel created:', clusterViewModel);
|
||||
|
||||
// Wait for initial data
|
||||
await new Promise(resolve => setTimeout(resolve, 200));
|
||||
|
||||
const totalNodes = clusterViewModel.get('totalNodes');
|
||||
const primaryNode = clusterViewModel.get('primaryNode');
|
||||
const clientInitialized = clusterViewModel.get('clientInitialized');
|
||||
|
||||
console.log('ViewModel data:', { totalNodes, primaryNode, clientInitialized });
|
||||
|
||||
resultDiv.innerHTML = `
|
||||
<div class="status success">
|
||||
<strong>View Model Test Passed!</strong><br>
|
||||
Total Nodes: ${totalNodes}<br>
|
||||
Primary Node: ${primaryNode || 'None'}<br>
|
||||
Client Initialized: ${clientInitialized}
|
||||
</div>
|
||||
`;
|
||||
|
||||
} catch (error) {
|
||||
console.error('View Model Test Failed:', error);
|
||||
resultDiv.innerHTML = `<div class="status error">View Model Test Failed: ${error.message}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
async function testComponents() {
|
||||
const resultDiv = document.getElementById('component-result');
|
||||
resultDiv.innerHTML = '<div class="status info">Testing Components...</div>';
|
||||
|
||||
try {
|
||||
console.log('Testing Components...');
|
||||
|
||||
const eventBus = new EventBus();
|
||||
const clusterViewModel = new ClusterViewModel();
|
||||
|
||||
// Test cluster status component
|
||||
const statusContainer = document.createElement('div');
|
||||
statusContainer.className = 'cluster-status';
|
||||
statusContainer.innerHTML = '🚀 Cluster Online';
|
||||
document.body.appendChild(statusContainer);
|
||||
|
||||
const clusterStatusComponent = new ClusterStatusComponent(
|
||||
statusContainer,
|
||||
clusterViewModel,
|
||||
eventBus
|
||||
);
|
||||
|
||||
clusterStatusComponent.initialize();
|
||||
console.log('Cluster Status Component initialized');
|
||||
|
||||
// Wait for data
|
||||
await new Promise(resolve => setTimeout(resolve, 300));
|
||||
|
||||
const statusText = statusContainer.innerHTML;
|
||||
const statusClasses = Array.from(statusContainer.classList);
|
||||
|
||||
console.log('Status Component Result:', { statusText, statusClasses });
|
||||
|
||||
resultDiv.innerHTML = `
|
||||
<div class="status success">
|
||||
<strong>Component Test Passed!</strong><br>
|
||||
Status Text: ${statusText}<br>
|
||||
Status Classes: ${statusClasses.join(', ')}
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Clean up
|
||||
document.body.removeChild(statusContainer);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Component Test Failed:', error);
|
||||
resultDiv.innerHTML = `<div class="status error">Component Test Failed: ${error.message}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-run tests on page load
|
||||
window.addEventListener('load', () => {
|
||||
setTimeout(() => {
|
||||
console.log('Page loaded, starting auto-tests...');
|
||||
testApiClient();
|
||||
setTimeout(testViewModel, 1000);
|
||||
setTimeout(testComponents, 2000);
|
||||
}, 500);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user