使用 NeXt UI JavaScript 库创建网络拓扑图_nextui

作者：IT小白 | 2024-02-21 01:53:35

踩

nextui

NeXt 是一个 OpenDaylight Web 界面，用于可视化网络和该网络内的通信。它是一个开放的图形工具，可以显示物理或虚拟网络元素，例如流量、隧道路径和组及其属性。此外，它还可以构建分层拓扑，例如，在底层显示覆盖网络。它可以与 Dlux 一起构建 ODL 应用程序。

NeXt 由 Cisco 做出了重大贡献，您可以在 Cisco DevNet 中找到 NeXt 的许多增强功能。

我有一点空闲时间，想使用Cisco 的 NeXt UI Toolkit，这是一个 JavaScript 库，它提供生成网络拓扑图的功能。

一旦我们下载并解压从思科的网站上的图书馆，我们将有4个文件夹：css，doc，fonts，和js。从这里我们可以开始构建图表。

或者，可以通过 npm 安装工具包；npm install next-ui.

HTML模板

我们所需要的只是一个简单的 HTML 页面，它加载 JS 和 CSS 库文件，提供一个div供图表放置的页面，然后加载我们的拓扑数据（它只是一个 JS 对象）和使用该库的 app.js 脚本和拓扑数据生成网络图。

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>

拓扑数据

我们需要提供两个数组，一个用于列表节点（我们的网络设备），另一个用于节点之间的链接。

节点数组

节点数组中的每个设备都是一个具有一些共同属性的对象。每个节点都由id用于创建链接的唯一属性标识。

然后，我们需要提供x，并y为其中的设备将在图中坐坐标。接下来是name设备的。

该device_type属性是一个自定义属性，即它不在 NeXt UI API 中，但它用于我们app.js定义节点应具有的图标。可以在Cisco 官方演示页面上找到图标列表。

最后，我们可以选择提供一个属性来定义图中节点的颜色。

链接数组

链接数组也由对象组成，每个对象都是两个设备之间的链接。这些链接对象只需要source，target以及可选，color属性。

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应用

最后，我们需要编写一些 JavaScript 来将它们整合在一起，下面的大部分代码取自 Cisco 教程文件，并进行了一些修改。

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);

结果

以上三个文件给了我们下面的网络图。

文档

可以在此处找到 API 文档。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/121464

使用 ​ NeXt UI JavaScript 库​创建网络拓扑图_nextui