107 lines
No EOL
3.7 KiB
JavaScript
107 lines
No EOL
3.7 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
const form = document.getElementById('bgprtv-form');
|
|
if (!form) {
|
|
return;
|
|
}
|
|
|
|
const ipAddressInput = document.getElementById('bgprtv-ip-address');
|
|
const loader = document.getElementById('bgprtv-loader');
|
|
const errorMessageContainer = document.getElementById('bgprtv-error-message');
|
|
const networkContainer = document.getElementById('bgprtv-mynetwork');
|
|
|
|
const graphUrl = networkContainer.dataset.graphUrl;
|
|
|
|
if (!graphUrl) {
|
|
errorMessageContainer.textContent = 'Configuration Error: The graph URL is missing. Ensure the network container div in your HTML has a "data-graph-url" attribute pointing to the correct API endpoint.';
|
|
errorMessageContainer.style.display = 'block';
|
|
const submitButton = form.querySelector('input[type="submit"]');
|
|
if (submitButton) {
|
|
submitButton.disabled = true;
|
|
}
|
|
return;
|
|
}
|
|
|
|
form.addEventListener('submit', function(event) {
|
|
event.preventDefault();
|
|
|
|
const ipAddress = ipAddressInput.value;
|
|
|
|
loader.style.display = 'block';
|
|
errorMessageContainer.style.display = 'none';
|
|
errorMessageContainer.textContent = '';
|
|
|
|
const visContent = networkContainer.querySelector('.vis-network');
|
|
if (visContent) {
|
|
visContent.remove();
|
|
}
|
|
|
|
fetch(graphUrl, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ ip_address: ipAddress })
|
|
})
|
|
.then(response => {
|
|
return response.json().then(data => {
|
|
if (!response.ok && data.error) {
|
|
throw new Error(data.error);
|
|
}
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
return data;
|
|
});
|
|
})
|
|
.then(data => {
|
|
loader.style.display = 'none';
|
|
if (data.nodes && data.nodes.length > 0) {
|
|
drawGraph(data);
|
|
} else {
|
|
errorMessageContainer.textContent = data.error || 'Could not parse any valid AS paths from the API response.';
|
|
errorMessageContainer.style.display = 'block';
|
|
}
|
|
})
|
|
.catch(error => {
|
|
loader.style.display = 'none';
|
|
errorMessageContainer.textContent = error.message;
|
|
errorMessageContainer.style.display = 'block';
|
|
console.error('Error:', error);
|
|
});
|
|
});
|
|
|
|
function drawGraph(data) {
|
|
const nodes = new vis.DataSet(data.nodes);
|
|
const edges = new vis.DataSet(data.edges);
|
|
const graphData = { nodes: nodes, edges: edges };
|
|
|
|
const options = {
|
|
layout: { hierarchical: false },
|
|
edges: {
|
|
arrows: { to: { enabled: true, scaleFactor: 0.7 } },
|
|
smooth: {
|
|
enabled: true,
|
|
type: "cubicBezier",
|
|
forceDirection: "horizontal",
|
|
roundness: 0.85
|
|
}
|
|
},
|
|
nodes: {
|
|
shape: 'box',
|
|
margin: 15,
|
|
font: {
|
|
size: 14,
|
|
color: '#343a40',
|
|
multi: 'html',
|
|
align: 'left'
|
|
},
|
|
borderWidth: 2
|
|
},
|
|
physics: { enabled: false },
|
|
interaction: {
|
|
dragNodes: true,
|
|
dragView: true,
|
|
zoomView: true
|
|
}
|
|
};
|
|
new vis.Network(networkContainer, graphData, options);
|
|
}
|
|
}); |