190 lines
7.7 KiB
HTML
190 lines
7.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 Load</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; margin: 20px; }
|
|
.debug-panel { background: #f0f0f0; padding: 15px; margin: 10px 0; border-radius: 5px; }
|
|
.debug-button { padding: 8px 16px; margin: 5px; background: #007bff; color: white; border: none; border-radius: 3px; cursor: pointer; }
|
|
.debug-button:hover { background: #0056b3; }
|
|
.log { background: #000; color: #0f0; padding: 10px; margin: 10px 0; border-radius: 3px; font-family: monospace; max-height: 300px; overflow-y: auto; }
|
|
.cluster-container { border: 1px solid #ccc; padding: 15px; margin: 10px 0; border-radius: 5px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🔍 Debug Cluster Load</h1>
|
|
|
|
<div class="debug-panel">
|
|
<h3>Debug Controls</h3>
|
|
<button class="debug-button" onclick="testContainerFind()">🔍 Test Container Find</button>
|
|
<button class="debug-button" onclick="testViewModel()">📊 Test ViewModel</button>
|
|
<button class="debug-button" onclick="testComponent()">🧩 Test Component</button>
|
|
<button class="debug-button" onclick="testAPICall()">📡 Test API Call</button>
|
|
<button class="debug-button" onclick="clearLog()">🧹 Clear Log</button>
|
|
</div>
|
|
|
|
<div class="debug-panel">
|
|
<h3>Container Elements</h3>
|
|
<div id="cluster-view" class="cluster-container">
|
|
<div class="primary-node-info">
|
|
<h4>Primary Node</h4>
|
|
<div id="primary-node-ip">🔍 Discovering...</div>
|
|
<button class="primary-node-refresh">🔄 Refresh</button>
|
|
</div>
|
|
|
|
<div id="cluster-members-container">
|
|
<h4>Cluster Members</h4>
|
|
<div class="loading">Loading cluster members...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="debug-panel">
|
|
<h3>Debug Log</h3>
|
|
<div id="debug-log" class="log"></div>
|
|
</div>
|
|
|
|
<!-- Include SPORE UI framework and components -->
|
|
<script src="framework.js"></script>
|
|
<script src="view-models.js"></script>
|
|
<script src="components.js"></script>
|
|
<script src="api-client.js"></script>
|
|
|
|
<script>
|
|
let debugLog = [];
|
|
|
|
function log(message, type = 'info') {
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
const logEntry = `[${timestamp}] ${message}`;
|
|
|
|
const logContainer = document.getElementById('debug-log');
|
|
logContainer.innerHTML += logEntry + '\n';
|
|
logContainer.scrollTop = logContainer.scrollHeight;
|
|
|
|
debugLog.push({ timestamp, message, type });
|
|
console.log(logEntry);
|
|
}
|
|
|
|
function clearLog() {
|
|
document.getElementById('debug-log').innerHTML = '';
|
|
debugLog = [];
|
|
}
|
|
|
|
// Test container finding
|
|
function testContainerFind() {
|
|
log('🔍 Testing container finding...');
|
|
|
|
const clusterView = document.getElementById('cluster-view');
|
|
const primaryNodeInfo = document.querySelector('.primary-node-info');
|
|
const clusterMembersContainer = document.getElementById('cluster-members-container');
|
|
|
|
log(`Cluster view found: ${!!clusterView} (ID: ${clusterView?.id})`);
|
|
log(`Primary node info found: ${!!primaryNodeInfo}`);
|
|
log(`Cluster members container found: ${!!clusterMembersContainer} (ID: ${clusterMembersContainer?.id})`);
|
|
log(`Cluster members container innerHTML: ${clusterMembersContainer?.innerHTML?.substring(0, 100)}...`);
|
|
}
|
|
|
|
// Test view model
|
|
function testViewModel() {
|
|
log('📊 Testing ViewModel...');
|
|
|
|
try {
|
|
const viewModel = new ClusterViewModel();
|
|
log('✅ ClusterViewModel created successfully');
|
|
|
|
log(`Initial members: ${viewModel.get('members')?.length || 0}`);
|
|
log(`Initial loading: ${viewModel.get('isLoading')}`);
|
|
log(`Initial error: ${viewModel.get('error')}`);
|
|
|
|
return viewModel;
|
|
} catch (error) {
|
|
log(`❌ ViewModel creation failed: ${error.message}`, 'error');
|
|
return null;
|
|
}
|
|
}
|
|
|
|
// Test component
|
|
function testComponent() {
|
|
log('🧩 Testing Component...');
|
|
|
|
try {
|
|
const viewModel = new ClusterViewModel();
|
|
const eventBus = new EventBus();
|
|
const container = document.getElementById('cluster-members-container');
|
|
|
|
log('✅ Dependencies created, creating ClusterMembersComponent...');
|
|
|
|
const component = new ClusterMembersComponent(container, viewModel, eventBus);
|
|
log('✅ ClusterMembersComponent created successfully');
|
|
|
|
log('Mounting component...');
|
|
component.mount();
|
|
log('✅ Component mounted');
|
|
|
|
return { component, viewModel, eventBus };
|
|
} catch (error) {
|
|
log(`❌ Component test failed: ${error.message}`, 'error');
|
|
return null;
|
|
}
|
|
}
|
|
|
|
// Test API call
|
|
async function testAPICall() {
|
|
log('📡 Testing API call...');
|
|
|
|
try {
|
|
if (!window.apiClient) {
|
|
log('❌ API client not available');
|
|
return;
|
|
}
|
|
|
|
log('Calling getClusterMembers...');
|
|
const response = await window.apiClient.getClusterMembers();
|
|
log(`✅ API call successful: ${response.members?.length || 0} members`);
|
|
|
|
if (response.members && response.members.length > 0) {
|
|
response.members.forEach(member => {
|
|
log(`📱 Member: ${member.hostname || member.ip} (${member.status})`);
|
|
});
|
|
}
|
|
|
|
} catch (error) {
|
|
log(`❌ API call failed: ${error.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
// Initialize debug interface
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
log('🚀 Debug interface initialized');
|
|
log('💡 Use the debug controls above to test different aspects of the cluster loading');
|
|
});
|
|
|
|
// Mock API client if not available
|
|
if (!window.apiClient) {
|
|
log('⚠️ Creating mock API client for testing');
|
|
window.apiClient = {
|
|
getClusterMembers: async () => {
|
|
log('📡 Mock API: getClusterMembers called');
|
|
return {
|
|
members: [
|
|
{ ip: '192.168.1.100', hostname: 'Node-1', status: 'active', latency: 15 },
|
|
{ ip: '192.168.1.101', hostname: 'Node-2', status: 'active', latency: 22 },
|
|
{ ip: '192.168.1.102', hostname: 'Node-3', status: 'offline', latency: null }
|
|
]
|
|
};
|
|
},
|
|
getDiscoveryInfo: async () => {
|
|
log('📡 Mock API: getDiscoveryInfo called');
|
|
return {
|
|
primaryNode: '192.168.1.100',
|
|
clientInitialized: true,
|
|
totalNodes: 3
|
|
};
|
|
}
|
|
};
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |