192 lines
7.8 KiB
HTML
192 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Test Refresh Button</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<style>
|
|
body { font-family: Arial, sans-serif; margin: 20px; background: #1a1a1a; color: white; }
|
|
.test-section { margin: 20px 0; padding: 20px; border: 1px solid #333; border-radius: 8px; }
|
|
.log { background: #2a2a2a; padding: 10px; margin: 10px 0; font-family: monospace; border-radius: 4px; max-height: 300px; overflow-y: auto; }
|
|
.test-button { background: #4a90e2; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; margin: 5px; }
|
|
.test-button:hover { background: #357abd; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🔍 Test Refresh Button Functionality</h1>
|
|
|
|
<div class="test-section">
|
|
<h3>Test Controls</h3>
|
|
<button class="test-button" onclick="testRefreshButton()">🧪 Test Refresh Button</button>
|
|
<button class="test-button" onclick="testAPICall()">📡 Test API Call</button>
|
|
<button class="test-button" onclick="testComponent()">🧩 Test Component</button>
|
|
<button class="test-button" onclick="clearLog()">🧹 Clear Log</button>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h3>Cluster View (Simplified)</h3>
|
|
<div id="cluster-view" class="cluster-container">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<button class="refresh-btn" id="refresh-cluster-btn">
|
|
<svg class="refresh-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<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>
|
|
Refresh
|
|
</button>
|
|
</div>
|
|
|
|
<div id="cluster-members-container">
|
|
<div class="loading">Loading cluster members...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<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}] ${type.toUpperCase()}: ${message}`;
|
|
debugLog.push(logEntry);
|
|
|
|
const logElement = document.getElementById('debug-log');
|
|
if (logElement) {
|
|
logElement.innerHTML = debugLog.map(entry => `<div>${entry}</div>`).join('');
|
|
logElement.scrollTop = logElement.scrollHeight;
|
|
}
|
|
|
|
console.log(logEntry);
|
|
}
|
|
|
|
function clearLog() {
|
|
debugLog = [];
|
|
document.getElementById('debug-log').innerHTML = '';
|
|
}
|
|
|
|
function testRefreshButton() {
|
|
log('Testing refresh button functionality...');
|
|
|
|
const refreshBtn = document.getElementById('refresh-cluster-btn');
|
|
if (refreshBtn) {
|
|
log('Found refresh button, testing click event...');
|
|
|
|
// Test if the button is clickable
|
|
refreshBtn.click();
|
|
log('Refresh button clicked');
|
|
|
|
// Check if the button state changed
|
|
setTimeout(() => {
|
|
if (refreshBtn.disabled) {
|
|
log('Button was disabled (good sign)', 'success');
|
|
} else {
|
|
log('Button was not disabled (potential issue)', 'warning');
|
|
}
|
|
|
|
// Check button text
|
|
if (refreshBtn.innerHTML.includes('Refreshing')) {
|
|
log('Button text changed to "Refreshing" (good sign)', 'success');
|
|
} else {
|
|
log('Button text did not change (potential issue)', 'warning');
|
|
}
|
|
}, 100);
|
|
|
|
} else {
|
|
log('Refresh button not found!', 'error');
|
|
}
|
|
}
|
|
|
|
function testAPICall() {
|
|
log('Testing API call to cluster members endpoint...');
|
|
|
|
fetch('http://localhost:3001/api/cluster/members')
|
|
.then(response => {
|
|
log(`API response status: ${response.status}`, 'info');
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
log(`API response data: ${JSON.stringify(data, null, 2)}`, 'success');
|
|
})
|
|
.catch(error => {
|
|
log(`API call failed: ${error.message}`, 'error');
|
|
});
|
|
}
|
|
|
|
function testComponent() {
|
|
log('Testing component initialization...');
|
|
|
|
try {
|
|
// Create a simple test component
|
|
const container = document.getElementById('cluster-view');
|
|
const viewModel = new ClusterViewModel();
|
|
const component = new ClusterMembersComponent(container, viewModel, new EventBus());
|
|
|
|
log('Component created successfully', 'success');
|
|
log(`Component container: ${!!component.container}`, 'info');
|
|
log(`Component viewModel: ${!!component.viewModel}`, 'info');
|
|
|
|
// Test mounting
|
|
component.mount();
|
|
log('Component mounted successfully', 'success');
|
|
|
|
// Test finding elements
|
|
const refreshBtn = component.findElement('.refresh-btn');
|
|
log(`Found refresh button: ${!!refreshBtn}`, 'info');
|
|
|
|
// Test event listener setup
|
|
component.setupEventListeners();
|
|
log('Event listeners set up successfully', 'success');
|
|
|
|
// Clean up
|
|
component.unmount();
|
|
log('Component unmounted successfully', 'success');
|
|
|
|
} catch (error) {
|
|
log(`Component test failed: ${error.message}`, 'error');
|
|
console.error('Component test error:', error);
|
|
}
|
|
}
|
|
|
|
// Initialize when page loads
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
log('Page loaded, ready for testing');
|
|
|
|
// Test if the refresh button exists
|
|
const refreshBtn = document.getElementById('refresh-cluster-btn');
|
|
if (refreshBtn) {
|
|
log('Refresh button found on page load', 'success');
|
|
} else {
|
|
log('Refresh button NOT found on page load', 'error');
|
|
}
|
|
});
|
|
|
|
// Global error handler
|
|
window.addEventListener('error', function(event) {
|
|
log(`Global error: ${event.error}`, 'error');
|
|
});
|
|
|
|
// Global unhandled promise rejection handler
|
|
window.addEventListener('unhandledrejection', function(event) {
|
|
log(`Unhandled promise rejection: ${event.reason}`, 'error');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |