NeXt is an ODL Web interface for visualizing the network and communication within the network. It is an open graphical tool that displays physical or virtual network elements such as traffic, tunnel paths, and groups and their properties. In addition, it can build a hierarchical topology, such as displaying overlay networks at the bottom. It can build ODL applications with Dlux.
NeXt has been greatly contributed by Cisco, and you can find many enhancements of NeXt in Cisco DevNet.
I have a little free time and want to use it Cisco's NeXt UI Toolkit , this is a JavaScript library that provides the ability to generate networks The function of topology diagram.
Once we download and unzip the library from Cisco's website, we will have four folders: css, doc, fonts, and js. From here we can start building the chart.
Alternatively, you can install the toolkit through NPM; npm install next-ui.
HTML template
All we need is a simple HTML page, which loads JS and CSS library files, provides a div page for chart placement, and then loads our topology data (it is just a JS object) and generates a network diagram using the app.js script and topology data of the library.
index.html
<!DOCTYPE html>
<head>
<link rel="stylesheet" href=css/next.css>
<script src="js/next.js"></script>
</head>
<body>
<div id="topology-container"></div>
<script src="topology.js"></script>
<script src="app.js"></script>
</body>
</html>Topology data
We need to provide two arrays, one for list nodes (our network devices) and the other for links between nodes.
Node array
Each device in the node array is an object with some common properties. Each node is identified by the unique attribute id used to create the link.
Then, we need to provide x and y as the coordinates in which the device will sit in the figure. Next is the name device.
The device_ The type attribute is a custom attribute, that is, it is not in the NeXt UI API, but it is used to define the icon that the node should have in app.js. Can be in Cisco official demo page A list of icons was found on the.
Finally, we can choose to provide an attribute to define the color of the nodes in the graph.
Linked array
The link array also consists of objects, each of which is a link between two devices. These linked objects only need source, target and optional color attributes.
topology.js
const topologyData = {
nodes: [
// ISPs
{id: 0, x: 400, y: -100, name: "ISP1", device_type: "cloud", color: "grey"},
{id: 1, x: 600, y: -100, name: "ISP2", device_type: "cloud", color: "grey"},
// Routers
{id: 2, x: 400, y: 0, name: "Edge1", device_type: "router", color: "red"},
{id: 3, x: 600, y: 0, name: "Edge2", device_type: "router", color: "red"},
// Switches
{id: 4, x: 400, y: 100, name: "Switch1", device_type: "switch"},
{id: 5, x: 600, y: 100, name: "Switch2", device_type: "switch"},
// Servers
{id: 6, x: 200, y: 200, name: "ESX1", device_type: "server"},
{id: 7, x: 400, y: 200, name: "ESX2", device_type: "server"},
{id: 8, x: 600, y: 200, name: "ESX3", device_type: "server"},
{id: 9, x: 800, y: 200, name: "ESX4", device_type: "server"},
// SAN
{id: 10, x: 500, y: 300, name: "SAN", device_type: "server"}
],
links: [
// WAN to routers
{source: 0, target: 2, color: "green"},
{source: 1, target: 3},
// Routers to switches
{source: 2, target: 4, color: "green"},
{source: 2, target: 5},
{source: 3, target: 4},
{source: 3, target: 5},
// Switches to Switches
{source: 4, target: 5},
{source: 4, target: 5},
// Servers to Switches
{source: 6, target: 4, color: "green"},
{source: 6, target: 5, color: "red"},
{source: 7, target: 4, color: "green"},
{source: 7, target: 5, color: "red"},
{source: 8, target: 4, color: "green"},
{source: 8, target: 5, color: "red"},
{source: 9, target: 4, color: "green"},
{source: 9, target: 5, color: "red"},
// SAN to Switches
{source: 10, target: 4, color: "red"},
{source: 10, target: 4, color: "red"},
{source: 10, target: 5, color: "red"},
{source: 10, target: 5, color: "red"}
]
};JS application
Finally, we need to write some JavaScript to integrate them. Most of the following code is taken from Cisco tutorial files with some modifications.
app.js
(function (nx) {
// instantiate next app
const app = new nx.ui.Application();
// configuration object
const topologyConfig = {
// configuration for nodes
width: window.innerWidth,
height: window.innerHeight,
nodeConfig: {
label: "model.name",
iconType: "model.device_type",
color: "model.color",
},
// configuration for links
linkConfig: {
linkType: "straight",
color: "model.color"
},
// if true, the nodes' icons are shown, a dot is shown instead
showIcon: true,
};
// instantiate Topology class
const topology = new nx.graphic.Topology(topologyConfig);
// load topology data from app/data.js
topology.data(topologyData);
// bind the topology object to the app
topology.attach(app);
// app must run inside a specific container. In our case this is the one with id="topology-container"
app.container(document.getElementById("topology-container"));
})(nx);result
The above three files give us the following network diagram.
file
Can be in here API documentation found.