208 lines
8.7 KiB
HTML
208 lines
8.7 KiB
HTML
<!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> |