feat: add topology view
This commit is contained in:
296
public/test-members-debug.html
Normal file
296
public/test-members-debug.html
Normal file
@@ -0,0 +1,296 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user