cisco NeXt UI를 사용하여 토폴로지를 그려 보았습니다.
15236 단어 시스코자바스크립트topology네트워크Visualization
다운로드
먼저 필요한 패키지를 아래에서 다운로드합니다.
htps : //에서 ゔぇぺぺr. 시코. 이 m/해/네 Xt/
크기는 1.2M으로 매우 작습니다.
다운로드 후 압축을 풀면 dest라는 폴더가 나타납니다.
~/Downloads$ ls
NeXt_trial.zip
~/Downloads$ unzip NeXt_trial.zip
（略）
~/Downloads$ ls
dest NeXt_trial.zip
실제로 그려 보자.
NeXt UI를 사용하여 그리는 것은 매우 간단합니다.
여기에서는 아래의 Learn 세션에 있는 Create a Topology를 참고하고 있습니다.
먼저 적절한 폴더를 만들고 위에서 확장한 dest를 복사합니다.
~$ mkdir nextui-test
~$ cd nextui-test/
~/nextui-test$ mkdir next
~/nextui-test$ mv ~/Downloads/dest next/
~/nextui-test$ ls
next
~/nextui-test$
그런 다음 같은 폴더에 다음과 같은 index.html을 만듭니다.
~/nextui-test$ cat index.html
<html>
<head>
<link rel="stylesheet" href="next/dest/css/next.css">
<script src="next/dest/js/next.js"></script>
<script src="Data.js"></script>
<script src="Shell.js"></script>
</head>
<body>
Cisco NeXt UI
</body>
</html>
~/nextui-test$
같은 폴더에 Hello.js와 Shell.js를 다음과 같이 만듭니다 (위의 DevNet의 복사본입니다).
~/nextui-test$ cat Data.js
var topologyData = {
nodes: [
{"id": 0, "x": 410, "y": 100, "name": "12K-1"},
{"id": 1, "x": 410, "y": 280, "name": "12K-2"},
{"id": 2, "x": 660, "y": 280, "name": "Of-9k-03"},
{"id": 3, "x": 660, "y": 100, "name": "Of-9k-02"},
{"id": 4, "x": 180, "y": 190, "name": "Of-9k-01"}
],
links: [
{"source": 0, "target": 1},
{"source": 1, "target": 2},
{"source": 1, "target": 3},
{"source": 4, "target": 1},
{"source": 2, "target": 3},
{"source": 2, "target": 0},
{"source": 3, "target": 0},
{"source": 3, "target": 0},
{"source": 3, "target": 0},
{"source": 0, "target": 4},
{"source": 0, "target": 4},
{"source": 0, "target": 3}
]
};
~/nextui-test$
~/nextui-test$ cat Shell.js
(function (nx) {
/**
* define application
*/
var Shell = nx.define(nx.ui.Application, {
methods: {
start: function () {
//your application main entry
// initialize a topology
var topo = new nx.graphic.Topology({
// set the topology view's with and height
width: 580,
height: 580,
// node config
nodeConfig: {
// label display name from of node's model, could change to 'model.id' to show id
label: 'model.name'
},
// link config
linkConfig: {
// multiple link type is curve, could change to 'parallel' to use parallel link
linkType: 'curve'
},
// show node's icon, could change to false to show dot
showIcon: true
});
//set data to topology
topo.data(topologyData);
//attach topology to document
topo.attach(this);
}
}
});
/**
* create application instance
*/
var shell = new Shell();
/**
* invoke start method
*/
shell.start();
})(nx);
~/nextui-test$
필요한 작업은 이상으로 완료됩니다.
최종 파일 구조는 다음과 같습니다.
nextui-test/
├── Data.js
├── index.html
├── next
│ └── dest
└── Shell.js
브라우저에서 보자.
방금 설명한 index.html을 브라우저에서 열면 다음과 같이 네트워크 토폴로지가 그려져 있는지 확인할 수 있습니다.
매우 간단합니다!
Reference
이 문제에 관하여(cisco NeXt UI를 사용하여 토폴로지를 그려 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hiroactivity/items/9cc047baa9e277e949d3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
