296 lines
11 KiB
HTML
296 lines
11 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 Members Component</title>
|
|
<script src="https://d3js.org/d3.v7.min.js"></script>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; margin: 20px; }
|
|
.container { max-width: 800px; margin: 0 auto; }
|
|
.test-section { margin: 20px 0; padding: 20px; border: 1px solid #ddd; }
|
|
button { padding: 10px 20px; margin: 5px; background: #007bff; color: white; border: none; cursor: pointer; }
|
|
button:hover { background: #0056b3; }
|
|
#graph-container { width: 600px; height: 400px; border: 1px solid #ccc; margin: 20px 0; }
|
|
.status { padding: 10px; margin: 10px 0; border-radius: 4px; }
|
|
.success { background: #d4edda; color: #155724; }
|
|
.error { background: #f8d7da; color: #721c24; }
|
|
.info { background: #d1ecf1; color: #0c5460; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>🐛 Debug Members Component</h1>
|
|
|
|
<div class="test-section">
|
|
<h3>Component Test</h3>
|
|
<p>Testing if the TopologyGraphComponent can be created and initialized.</p>
|
|
<button onclick="testComponentCreation()">Test Component Creation</button>
|
|
<button onclick="testInitialization()">Test Initialization</button>
|
|
<button onclick="testMount()">Test Mount</button>
|
|
<button onclick="clearTest()">Clear Test</button>
|
|
<div id="status"></div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h3>Graph Container</h3>
|
|
<div id="graph-container">
|
|
<div style="text-align: center; padding: 50px; color: #666;">
|
|
Graph will appear here after testing
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let testComponent = null;
|
|
|
|
function showStatus(message, type = 'info') {
|
|
const statusDiv = document.getElementById('status');
|
|
statusDiv.innerHTML = `<div class="status ${type}">${message}</div>`;
|
|
}
|
|
|
|
// Mock base Component class
|
|
class MockComponent {
|
|
constructor(container, viewModel, eventBus) {
|
|
this.container = container;
|
|
this.viewModel = viewModel;
|
|
this.eventBus = eventBus;
|
|
this.isMounted = false;
|
|
this.isInitialized = false;
|
|
}
|
|
|
|
async initialize() {
|
|
console.log('MockComponent: initialize called');
|
|
this.isInitialized = true;
|
|
}
|
|
|
|
mount() {
|
|
console.log('MockComponent: mount called');
|
|
this.isMounted = true;
|
|
}
|
|
|
|
setupEventListeners() {
|
|
console.log('MockComponent: setupEventListeners called');
|
|
}
|
|
|
|
setupViewModelListeners() {
|
|
console.log('MockComponent: setupViewModelListeners called');
|
|
}
|
|
|
|
render() {
|
|
console.log('MockComponent: render called');
|
|
}
|
|
}
|
|
|
|
// Mock ViewModel
|
|
class MockViewModel {
|
|
constructor() {
|
|
this._data = {
|
|
nodes: [],
|
|
links: [],
|
|
isLoading: false,
|
|
error: null
|
|
};
|
|
}
|
|
|
|
get(property) {
|
|
return this._data[property];
|
|
}
|
|
|
|
set(property, value) {
|
|
this._data[property] = value;
|
|
}
|
|
|
|
subscribe(property, callback) {
|
|
console.log(`MockViewModel: Subscribing to ${property}`);
|
|
}
|
|
|
|
async updateNetworkTopology() {
|
|
console.log('MockViewModel: updateNetworkTopology called');
|
|
// Simulate some data
|
|
this.set('nodes', [
|
|
{ id: '1', hostname: 'Test Node 1', ip: '192.168.1.1', status: 'ACTIVE' },
|
|
{ id: '2', hostname: 'Test Node 2', ip: '192.168.1.2', status: 'ACTIVE' }
|
|
]);
|
|
this.set('links', [
|
|
{ source: '1', target: '2', latency: 5 }
|
|
]);
|
|
}
|
|
}
|
|
|
|
// Test TopologyGraphComponent (simplified version)
|
|
class TestTopologyGraphComponent extends MockComponent {
|
|
constructor(container, viewModel, eventBus) {
|
|
super(container, viewModel, eventBus);
|
|
console.log('TestTopologyGraphComponent: Constructor called');
|
|
this.svg = null;
|
|
this.simulation = null;
|
|
this.zoom = null;
|
|
this.width = 600;
|
|
this.height = 400;
|
|
this.isInitialized = false;
|
|
}
|
|
|
|
// Override mount to ensure proper initialization
|
|
mount() {
|
|
if (this.isMounted) return;
|
|
|
|
console.log('TestTopologyGraphComponent: Starting mount...');
|
|
|
|
// Call initialize if not already done
|
|
if (!this.isInitialized) {
|
|
console.log('TestTopologyGraphComponent: Initializing during mount...');
|
|
this.initialize().then(() => {
|
|
// Complete mount after initialization
|
|
this.completeMount();
|
|
}).catch(error => {
|
|
console.error('TestTopologyGraphComponent: Initialization failed during mount:', error);
|
|
// Still complete mount to prevent blocking
|
|
this.completeMount();
|
|
});
|
|
} else {
|
|
this.completeMount();
|
|
}
|
|
}
|
|
|
|
completeMount() {
|
|
this.isMounted = true;
|
|
this.setupEventListeners();
|
|
this.setupViewModelListeners();
|
|
this.render();
|
|
|
|
console.log('TestTopologyGraphComponent: Mounted successfully');
|
|
}
|
|
|
|
async initialize() {
|
|
console.log('TestTopologyGraphComponent: Initializing...');
|
|
await super.initialize();
|
|
|
|
// Set up the SVG container
|
|
this.setupSVG();
|
|
|
|
// Mark as initialized
|
|
this.isInitialized = true;
|
|
|
|
console.log('TestTopologyGraphComponent: Initialization completed');
|
|
}
|
|
|
|
setupSVG() {
|
|
const container = document.getElementById('graph-container');
|
|
if (!container) {
|
|
console.error('TestTopologyGraphComponent: Graph container not found');
|
|
return;
|
|
}
|
|
|
|
// Clear existing content
|
|
container.innerHTML = '';
|
|
|
|
// Create SVG element
|
|
this.svg = d3.select(container)
|
|
.append('svg')
|
|
.attr('width', this.width)
|
|
.attr('height', this.height)
|
|
.style('border', '1px solid #ddd')
|
|
.style('background', '#f9f9f9');
|
|
|
|
this.svg.append('g');
|
|
|
|
console.log('TestTopologyGraphComponent: SVG setup completed');
|
|
}
|
|
|
|
render() {
|
|
console.log('TestTopologyGraphComponent: render called');
|
|
// Simple render for testing
|
|
if (this.svg) {
|
|
const svgGroup = this.svg.select('g');
|
|
svgGroup.append('text')
|
|
.attr('x', 300)
|
|
.attr('y', 200)
|
|
.attr('text-anchor', 'middle')
|
|
.attr('font-size', '16px')
|
|
.text('Component Rendered Successfully!');
|
|
}
|
|
}
|
|
}
|
|
|
|
function testComponentCreation() {
|
|
try {
|
|
showStatus('🔄 Testing component creation...', 'info');
|
|
|
|
const mockViewModel = new MockViewModel();
|
|
const mockEventBus = {};
|
|
|
|
testComponent = new TestTopologyGraphComponent(
|
|
document.getElementById('graph-container'),
|
|
mockViewModel,
|
|
mockEventBus
|
|
);
|
|
|
|
showStatus('✅ Component created successfully', 'success');
|
|
console.log('Component created:', testComponent);
|
|
|
|
} catch (error) {
|
|
console.error('Component creation failed:', error);
|
|
showStatus(`❌ Component creation failed: ${error.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
function testInitialization() {
|
|
if (!testComponent) {
|
|
showStatus('❌ No component created. Run component creation test first.', 'error');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
showStatus('🔄 Testing initialization...', 'info');
|
|
|
|
testComponent.initialize().then(() => {
|
|
showStatus('✅ Component initialized successfully', 'success');
|
|
}).catch(error => {
|
|
console.error('Initialization failed:', error);
|
|
showStatus(`❌ Initialization failed: ${error.message}`, 'error');
|
|
});
|
|
|
|
} catch (error) {
|
|
console.error('Initialization test failed:', error);
|
|
showStatus(`❌ Initialization test failed: ${error.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
function testMount() {
|
|
if (!testComponent) {
|
|
showStatus('❌ No component created. Run component creation test first.', 'error');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
showStatus('🔄 Testing mount...', 'info');
|
|
|
|
testComponent.mount();
|
|
|
|
showStatus('✅ Component mounted successfully', 'success');
|
|
|
|
} catch (error) {
|
|
console.error('Mount test failed:', error);
|
|
showStatus(`❌ Mount test failed: ${error.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
function clearTest() {
|
|
if (testComponent) {
|
|
testComponent = null;
|
|
}
|
|
document.getElementById('graph-container').innerHTML =
|
|
'<div style="text-align: center; padding: 50px; color: #666;">Graph will appear here after testing</div>';
|
|
document.getElementById('status').innerHTML = '';
|
|
showStatus('🧹 Test cleared', 'info');
|
|
}
|
|
|
|
// Auto-test on load
|
|
window.addEventListener('load', () => {
|
|
showStatus('🚀 Debug page loaded. Click "Test Component Creation" to begin.', 'info');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |