Skip to content

Instantly share code, notes, and snippets.

@codeout codeout/batfish.html

Last active Feb 2, 2019
Embed
What would you like to do?
Batfish network visualization with inet-henge
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<script src="https://inet-henge.herokuapp.com/js/cola.min.js"></script>
<script src="https://inet-henge.herokuapp.com/js/inet-henge.js"></script>
<style>
.path-label {
font-size: 7px;
}
</style>
</head>
<body>
<div id="diagram"></div>
</body>
<script>
const batfishToInethenge = (data) => {
const nodes = new Set();
data.forEach((i) => {
nodes.add(i.node1);
nodes.add(i.node2);
});
const links = data.map((i) => ({
source: i.node1, target: i.node2,
meta: {
interface: {source: i.node1interface, target: i.node2interface},
}
}));
return {
nodes: Array.from(nodes).map((i) => ({
name: i, icon: 'https://inet-henge.herokuapp.com/images/router.png'
})),
links: links,
};
};
// Tweak distance
const distance = (force) => force.jaccardLinkLengths(100, 0.2);
(async () => {
const response = await fetch('http://localhost:9996/v2/networks/example_network/snapshots/example_snapshot/topology', {
headers: {'X-Batfish-Version': '0.36.0'},
});
new Diagram(
'#diagram',
batfishToInethenge(await response.json()),
{pop: /^as\d+/, distance: distance}
).init('interface');
})();
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.