124 lines
4.7 KiB
HTML
124 lines
4.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 Framework</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; margin: 20px; }
|
|
.debug-section { margin: 20px 0; padding: 20px; border: 1px solid #ccc; }
|
|
.log { background: #f5f5f5; padding: 10px; margin: 10px 0; font-family: monospace; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Framework Debug</h1>
|
|
|
|
<div class="debug-section">
|
|
<h2>Console Log</h2>
|
|
<div id="console-log" class="log"></div>
|
|
<button onclick="clearLog()">Clear Log</button>
|
|
</div>
|
|
|
|
<div class="debug-section">
|
|
<h2>Test Cluster View</h2>
|
|
<div id="cluster-view">
|
|
<div class="cluster-section">
|
|
<div class="cluster-header">
|
|
<div class="cluster-header-left">
|
|
<div class="primary-node-info">
|
|
<span class="primary-node-label">Primary Node:</span>
|
|
<span class="primary-node-ip" id="primary-node-ip">Discovering...</span>
|
|
<button class="primary-node-refresh" title="🎲 Select random primary node">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
|
|
<path d="M1 4v6h6M23 20v-6h-6"/>
|
|
<path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<button class="refresh-btn">Refresh</button>
|
|
</div>
|
|
<div id="cluster-members-container">
|
|
<div class="loading">Loading cluster members...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button onclick="testClusterView()">Test Cluster View</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>
|
|
// Override console.log to capture output
|
|
const originalLog = console.log;
|
|
const originalError = console.error;
|
|
const logElement = document.getElementById('console-log');
|
|
|
|
function addToLog(message, type = 'log') {
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
const logEntry = document.createElement('div');
|
|
logEntry.style.color = type === 'error' ? 'red' : 'black';
|
|
logEntry.textContent = `[${timestamp}] ${message}`;
|
|
logElement.appendChild(logEntry);
|
|
logElement.scrollTop = logElement.scrollHeight;
|
|
}
|
|
|
|
console.log = function(...args) {
|
|
originalLog.apply(console, args);
|
|
addToLog(args.join(' '));
|
|
};
|
|
|
|
console.error = function(...args) {
|
|
originalError.apply(console, args);
|
|
addToLog(args.join(' '), 'error');
|
|
};
|
|
|
|
function clearLog() {
|
|
logElement.innerHTML = '';
|
|
}
|
|
|
|
// Test cluster view
|
|
function testClusterView() {
|
|
try {
|
|
console.log('Testing cluster view...');
|
|
|
|
// Create view model
|
|
const clusterVM = new ClusterViewModel();
|
|
console.log('ClusterViewModel created:', clusterVM);
|
|
|
|
// Create component
|
|
const container = document.getElementById('cluster-view');
|
|
const clusterComponent = new ClusterViewComponent(container, clusterVM, null);
|
|
console.log('ClusterViewComponent created:', clusterComponent);
|
|
|
|
// Mount component
|
|
clusterComponent.mount();
|
|
console.log('Component mounted');
|
|
|
|
// Test data loading
|
|
console.log('Testing data loading...');
|
|
clusterVM.updateClusterMembers();
|
|
|
|
} catch (error) {
|
|
console.error('Error testing cluster view:', error);
|
|
}
|
|
}
|
|
|
|
// Initialize framework
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
console.log('DOM loaded, initializing framework...');
|
|
|
|
if (window.app) {
|
|
console.log('Framework app found:', window.app);
|
|
window.app.init();
|
|
console.log('Framework initialized');
|
|
} else {
|
|
console.error('Framework app not found');
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |