diff options
Diffstat (limited to 'umc-iui/src/main/resources/webroot/umc-topo')
50 files changed, 1577 insertions, 0 deletions
diff --git a/umc-iui/src/main/resources/webroot/umc-topo/css/main.css b/umc-iui/src/main/resources/webroot/umc-topo/css/main.css new file mode 100644 index 00000000..4475f86d --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/css/main.css @@ -0,0 +1,161 @@ +@CHARSET "UTF-8";
+
+.popupContent {
+ position: absolute;
+ visibility: hidden;
+ overflow: hidden;
+ background-color: #F9F9F9;
+ padding: 0px;
+ border: 1px solid #cccccc;
+ -moz-border-radius: 10px;
+ -webkit-box-shadow: 0 0 10px #ccc;
+ box-shadow: 0 0 10px #ccc;
+ margin: 20px auto;
+ background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
+ background-image: -webkit-gradient(linear, left top, bottom, from(#ffffff),
+ to(#f2f2f2) );
+ z-index: 50;
+}
+
+.dialogTab {
+ width: 100%;
+ height: auto;
+}
+
+.menu {
+ /* visibility: hidden; */
+ font-family: arial, sans-serif;
+ margin: 0;
+ z-index: 50;
+}
+/* remove the bullets and set the margin and padding to zero for the unordered list */
+.menu ul {
+ padding: 0;
+ margin: 0;
+ list-style-type: none;
+}
+/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
+.menu ul li {
+ position: relative;
+}
+/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
+.menu ul li a {
+ display: block;
+ text-align: center;
+ text-decoration: none;
+ width: 104px;
+ height: 30px;
+ color: #000;
+ border: 1px solid #fff;
+ border-width: 1px 1px 0 0;
+ background: #65BBF9;
+ line-height: 30px;
+ font-size: 11px;
+}
+/* make the dropdown ul invisible */
+.menu ul li ul {
+ display: none;
+}
+
+/* specific to non IE browsers */
+/* set the background and foreground color of the main menu li on hover */
+.menu ul li:hover a {
+ /* color: #fff; */
+ background: #65BBF9;
+}
+/* make the sub menu ul visible and position it beneath the main menu list item */
+.menu ul li:hover ul {
+ display: block;
+ position: absolute;
+ top: 0px;
+ left: 104px;
+ width: 105px;
+}
+/* style the background and foreground color of the submenu links */
+.menu ul li:hover ul li a {
+ display: block;
+ background: #faeec7;
+ color: #000;
+}
+/* style the background and forground colors of the links on hover */
+.menu ul li:hover ul li a:hover {
+ background: #dfc184;
+ color: #000;
+}
+
+li {
+ list-style-type: none;
+}
+
+#NS {
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ position: absolute;
+}
+
+#VIM {
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ position: absolute;
+}
+
+.sigma-edge {
+ stroke: #14191C;
+}
+
+.sigma-node {
+ fill: green;
+ stroke: #14191C;
+ stroke-width: 2px;
+}
+
+.infoDialog {
+ font-family: arial, sans-serif;
+ margin: 0;
+ z-index: 50;
+ width: auto;
+ height: auto;
+ position: absolute;
+ background-color: #F9F9F9;
+ padding: 0px;
+ border: 1px solid #cccccc;
+}
+
+.infoDialog table{
+ display: table;
+ border-collapse: collapse;
+ border-spacing: 0px!important;
+ border-color: grey;
+ border: 1px solid #cccccc;
+}
+
+.infoDialog table td{
+ border: 1px solid #cccccc;
+ padding: 0px;
+}
+
+/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
+.infoDialog table tr td a {
+ display: block;
+ text-align: center;
+ text-decoration: none;
+ width: auto;
+ height: 30px;
+ color: #000;
+ border: 1px solid #fff;
+ border-width: 0px 0px 0 0;
+ background: #65BBF9;
+ line-height: 30px;
+ font-size: 11px;
+}
+
+/* specific to non IE browsers */
+/* set the background and foreground color of the main menu li on hover */
+.infoDialog table tr td:hover a {
+ /* color: #fff; */
+ /* background: #35A7F9; */
+}
\ No newline at end of file diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/NS.png b/umc-iui/src/main/resources/webroot/umc-topo/images/NS.png Binary files differnew file mode 100644 index 00000000..a0798361 --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/NS.png diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/NS1.png b/umc-iui/src/main/resources/webroot/umc-topo/images/NS1.png Binary files differnew file mode 100644 index 00000000..c83f615c --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/NS1.png diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/VDU.png b/umc-iui/src/main/resources/webroot/umc-topo/images/VDU.png Binary files differnew file mode 100644 index 00000000..94511271 --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/VDU.png diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/VDU1.png b/umc-iui/src/main/resources/webroot/umc-topo/images/VDU1.png Binary files differnew file mode 100644 index 00000000..1332f43c --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/VDU1.png diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/VNF.png b/umc-iui/src/main/resources/webroot/umc-topo/images/VNF.png Binary files differnew file mode 100644 index 00000000..b326297d --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/VNF.png diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/VNF1.png b/umc-iui/src/main/resources/webroot/umc-topo/images/VNF1.png Binary files differnew file mode 100644 index 00000000..cb3f33ce --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/VNF1.png diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/VNFC.png b/umc-iui/src/main/resources/webroot/umc-topo/images/VNFC.png Binary files differnew file mode 100644 index 00000000..4781a0b6 --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/VNFC.png diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/VNFC1 .png b/umc-iui/src/main/resources/webroot/umc-topo/images/VNFC1 .png Binary files differnew file mode 100644 index 00000000..ee5b2ce0 --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/VNFC1 .png diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/off/Bridge.gif b/umc-iui/src/main/resources/webroot/umc-topo/images/off/Bridge.gif Binary files differnew file mode 100644 index 00000000..6b320f43 --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/off/Bridge.gif diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/off/Computer.gif b/umc-iui/src/main/resources/webroot/umc-topo/images/off/Computer.gif Binary files differnew file mode 100644 index 00000000..a2cf7b5a --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/off/Computer.gif diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/off/Hub.gif b/umc-iui/src/main/resources/webroot/umc-topo/images/off/Hub.gif Binary files differnew file mode 100644 index 00000000..0b0bc599 --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/off/Hub.gif diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/off/InternetServer.gif b/umc-iui/src/main/resources/webroot/umc-topo/images/off/InternetServer.gif Binary files differnew file mode 100644 index 00000000..2a72fc30 --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/off/InternetServer.gif diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/off/MiniComputer.gif b/umc-iui/src/main/resources/webroot/umc-topo/images/off/MiniComputer.gif Binary files differnew file mode 100644 index 00000000..b92c1054 --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/off/MiniComputer.gif diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/off/Multiplexer.gif b/umc-iui/src/main/resources/webroot/umc-topo/images/off/Multiplexer.gif Binary files differnew file mode 100644 index 00000000..3229cd52 --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/off/Multiplexer.gif diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/off/Router.gif b/umc-iui/src/main/resources/webroot/umc-topo/images/off/Router.gif Binary files differnew file mode 100644 index 00000000..c7909258 --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/off/Router.gif diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/off/Server.gif b/umc-iui/src/main/resources/webroot/umc-topo/images/off/Server.gif Binary files differnew file mode 100644 index 00000000..eba1b081 --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/off/Server.gif diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/off/Switch.gif b/umc-iui/src/main/resources/webroot/umc-topo/images/off/Switch.gif Binary files differnew file mode 100644 index 00000000..1dcfdb6c --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/off/Switch.gif diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/off/TerminalServer.gif b/umc-iui/src/main/resources/webroot/umc-topo/images/off/TerminalServer.gif Binary files differnew file mode 100644 index 00000000..dd5d3deb --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/off/TerminalServer.gif diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/off/vim.png b/umc-iui/src/main/resources/webroot/umc-topo/images/off/vim.png Binary files differnew file mode 100644 index 00000000..e71d8082 --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/off/vim.png diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/on/Bridge.gif b/umc-iui/src/main/resources/webroot/umc-topo/images/on/Bridge.gif Binary files differnew file mode 100644 index 00000000..37e9aab3 --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/on/Bridge.gif diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/on/BridgeMinus.gif b/umc-iui/src/main/resources/webroot/umc-topo/images/on/BridgeMinus.gif Binary files differnew file mode 100644 index 00000000..4e6f29fe --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/on/BridgeMinus.gif diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/on/BridgePlus.gif b/umc-iui/src/main/resources/webroot/umc-topo/images/on/BridgePlus.gif Binary files differnew file mode 100644 index 00000000..5d5b995a --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/on/BridgePlus.gif diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/on/Computer.png b/umc-iui/src/main/resources/webroot/umc-topo/images/on/Computer.png Binary files differnew file mode 100644 index 00000000..615ba5e2 --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/on/Computer.png diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/on/ComputerMinusbak.gif b/umc-iui/src/main/resources/webroot/umc-topo/images/on/ComputerMinusbak.gif Binary files differnew file mode 100644 index 00000000..709ab58a --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/on/ComputerMinusbak.gif diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/on/ComputerPlusbak.gif b/umc-iui/src/main/resources/webroot/umc-topo/images/on/ComputerPlusbak.gif Binary files differnew file mode 100644 index 00000000..c6468837 --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/on/ComputerPlusbak.gif diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/on/Computerbak.gif b/umc-iui/src/main/resources/webroot/umc-topo/images/on/Computerbak.gif Binary files differnew file mode 100644 index 00000000..f90b0512 --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/on/Computerbak.gif diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/on/Hub.gif b/umc-iui/src/main/resources/webroot/umc-topo/images/on/Hub.gif Binary files differnew file mode 100644 index 00000000..bc856db6 --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/on/Hub.gif diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/on/HubPlus.gif b/umc-iui/src/main/resources/webroot/umc-topo/images/on/HubPlus.gif Binary files differnew file mode 100644 index 00000000..84dfb231 --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/on/HubPlus.gif diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/on/InternetServer.gif b/umc-iui/src/main/resources/webroot/umc-topo/images/on/InternetServer.gif Binary files differnew file mode 100644 index 00000000..1fbf5e60 --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/on/InternetServer.gif diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/on/MiniComputer.gif b/umc-iui/src/main/resources/webroot/umc-topo/images/on/MiniComputer.gif Binary files differnew file mode 100644 index 00000000..7b94af1e --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/on/MiniComputer.gif diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/on/Multiplexer.gif b/umc-iui/src/main/resources/webroot/umc-topo/images/on/Multiplexer.gif Binary files differnew file mode 100644 index 00000000..3786cffc --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/on/Multiplexer.gif diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/on/Router.gif b/umc-iui/src/main/resources/webroot/umc-topo/images/on/Router.gif Binary files differnew file mode 100644 index 00000000..10024363 --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/on/Router.gif diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/on/Server.gif b/umc-iui/src/main/resources/webroot/umc-topo/images/on/Server.gif Binary files differnew file mode 100644 index 00000000..8bcec384 --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/on/Server.gif diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/on/Switch.gif b/umc-iui/src/main/resources/webroot/umc-topo/images/on/Switch.gif Binary files differnew file mode 100644 index 00000000..4630cb95 --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/on/Switch.gif diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/on/TerminalServer.gif b/umc-iui/src/main/resources/webroot/umc-topo/images/on/TerminalServer.gif Binary files differnew file mode 100644 index 00000000..233f2bec --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/on/TerminalServer.gif diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/on/hostMinus.png b/umc-iui/src/main/resources/webroot/umc-topo/images/on/hostMinus.png Binary files differnew file mode 100644 index 00000000..a66ada2c --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/on/hostMinus.png diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/on/hostPlus.png b/umc-iui/src/main/resources/webroot/umc-topo/images/on/hostPlus.png Binary files differnew file mode 100644 index 00000000..01be1df8 --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/on/hostPlus.png diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/on/vdu.png b/umc-iui/src/main/resources/webroot/umc-topo/images/on/vdu.png Binary files differnew file mode 100644 index 00000000..88c3e737 --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/on/vdu.png diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/on/vimMinus.png b/umc-iui/src/main/resources/webroot/umc-topo/images/on/vimMinus.png Binary files differnew file mode 100644 index 00000000..5a08daad --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/on/vimMinus.png diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/on/vimMinusbak.png b/umc-iui/src/main/resources/webroot/umc-topo/images/on/vimMinusbak.png Binary files differnew file mode 100644 index 00000000..136e6498 --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/on/vimMinusbak.png diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/on/vimPlus.png b/umc-iui/src/main/resources/webroot/umc-topo/images/on/vimPlus.png Binary files differnew file mode 100644 index 00000000..61da475f --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/on/vimPlus.png diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/on/vimPlusbak.png b/umc-iui/src/main/resources/webroot/umc-topo/images/on/vimPlusbak.png Binary files differnew file mode 100644 index 00000000..4a36c30c --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/on/vimPlusbak.png diff --git a/umc-iui/src/main/resources/webroot/umc-topo/images/vim.png b/umc-iui/src/main/resources/webroot/umc-topo/images/vim.png Binary files differnew file mode 100644 index 00000000..322fd515 --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/images/vim.png diff --git a/umc-iui/src/main/resources/webroot/umc-topo/js/physicalTopology.js b/umc-iui/src/main/resources/webroot/umc-topo/js/physicalTopology.js new file mode 100644 index 00000000..7ff7d54a --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/js/physicalTopology.js @@ -0,0 +1,356 @@ +
+// definition node image resource
+var imgPlus =
+[
+
+ './images/on/vdu.png', // VDU
+ './images/on/hostPlus.png', // HOST
+ './images/on/vimPlus.png' //VIM
+],
+imgMinus =
+[
+ './images/on/vdu.png', // VDU
+ './images/on/hostMinus.png', // HOST
+ './images/on/vimMinus.png' //VIM
+];
+
+
+// definition node data global variable
+var VIMData, HOSTData, VDUData;
+
+// link count
+var edgeID = 0;
+
+function jumpToService()
+{
+ //window.navigate("html/serviceTopology.html");
+ self.location='./serviceTopology.html';
+}
+
+
+// ready
+$(document).ready(function()
+{
+ // definition resource interface url
+ var vimUrl = "../../api/roc/v1/resource/vims";
+ var hostUrl = "../../api/roc/v1/resource/hosts";
+ var vduUrl = "../../api/roc/v1/resource/vdus";
+
+ $.ajaxSettings.async = false; // set ajax get json was synchronization
+
+ // get vim
+ $.ajax({
+ "type": 'get',
+ "url": vimUrl,
+ "dataType": "json",
+ "success": function (resp) {
+ if(resp.operationResult == "SUCCESS")
+ {
+ VIMData = resp;
+ }
+ else{
+ }
+ },
+ error: function(XMLHttpRequest, textStatus, errorThrown) {
+ }
+
+ });
+
+ // get host
+ $.ajax({
+ "type": 'get',
+ "url": hostUrl,
+ "dataType": "json",
+ "success": function (resp) {
+ if(resp.operationResult == "SUCCESS")
+ {
+ HOSTData = resp;
+ }
+ else{
+ }
+ },
+ error: function(XMLHttpRequest, textStatus, errorThrown) {
+ }
+
+ });
+
+ // get vdu
+ $.ajax({
+ "type": 'get',
+ "url": vduUrl,
+ "dataType": "json",
+ "success": function (resp) {
+ if(resp.operationResult == "SUCCESS")
+ {
+ VDUData = resp;
+ }
+ else{
+ }
+ },
+ error: function(XMLHttpRequest, textStatus, errorThrown) {
+ }
+
+ });
+
+
+ /*$.getJSON('../data/ns.json', function(data){
+ NSData = data;
+ });
+
+ $.getJSON('../data/vnfc.json', function(data){
+ VNFCData = data;
+ });
+
+ $.getJSON('../data/vdu.json', function(data){
+ VDUData = data;
+ });
+
+ $.getJSON('../data/vnf.json', function(data){
+ VNFData = data;
+ });
+
+ $.getJSON('../data/host.json', function(data){
+ HOSTData = data;
+ });*/
+
+ var Topo = new oTopo();
+ var settings=
+ {
+ minNodeSize : 30,
+ maxNodeSize : 60,
+ minEdgeSize: 2,
+ maxEdgeSize: 6,
+ nodesPowRatio: 1,
+ edgesPowRatio: 1,
+ doubleClickZoomingRatio : 0,
+ mouseZoomDuration : 1000,
+ };
+ Topo.canvas('VIM', settings);
+
+ // set the nodes can be drag and drop
+ Topo.setDrag(true);
+
+ // Disable the right mouse button for browser
+ Topo.noright(document.body);
+
+ // custom parameter
+ var custData = new Array();
+ var VIMSize = VIMData.data.length;
+
+ if(0 < VIMSize)
+ {
+ for ( var i = 0; i < VIMSize; i++)
+ {
+ custData.image = imgPlus[2];
+ Topo.addNode(creatNodeByJSON("VIM", VIMData.data[i], custData, i + 1));
+ }
+ }
+
+
+ // When a node is clicked, we check for each node
+ // if it is a neighbor of the clicked one. If not,
+ // we set its color as grey, and else, it takes its
+ // original color.
+ // We do the same for the edges, and we only keep
+ // edges that have both extremities colored.
+ Topo.mouseBind('doubleClickNode', function(e)
+ {
+ var n = e.data.node;
+ var custdata = new Array();
+
+ if ('VIM' == n.nodeType)
+ {
+ if(false == n.clickOpen)
+ {
+ // get hostNode count
+ var HOSTSize = HOSTData.data.length;
+
+ if(0 < HOSTSize)
+ {
+ for ( var i = 0; i < HOSTSize; i++)
+ {
+ // created host node
+ if (n.id == HOSTData.data[i].vimId)
+ {
+ custdata.x = i;
+ custdata.y = n.y + 0.5;
+
+ var VDUSize = VDUData.data.length;
+ if(0 < VDUSize)
+ {
+ var puls = false;
+ for ( var j = 0; j < VDUSize; j++)
+ {
+ // Whether contains VDU node
+ if(HOSTData.data[i].oid == VDUData.data[j].hostId)
+ {
+ puls = true;
+ }
+ }
+
+ if(puls)
+ {
+ custdata.image = imgPlus[1];
+ }
+ else
+ {
+ custdata.image = undefined;
+ }
+ }
+
+ Topo.addNode(creatNodeByJSON("HOST", HOSTData.data[i], custdata, i + 1));
+ n.childrens.push(HOSTData.data[i].oid);
+ n.image.url = imgMinus[2];
+
+ // created link
+ Topo.addLink(creatEdge(n.id,HOSTData.data[i].oid));
+ }
+ }
+ }
+
+ n.clickOpen = true;
+ }
+ else
+ {
+ // delete children node
+ var childSize = n.childrens.length;
+ for ( var i = 0; i < childSize; i++)
+ {
+ delNode(n.childrens[i]);
+ }
+
+ // reset link count
+ edgeID = 0;
+
+ if (0 < childSize)
+ {
+ n.image.url = imgPlus[2];
+ }
+ n.clickOpen = false;
+ }
+ }
+
+
+ if ('HOST' == n.nodeType)
+ {
+ if(false == n.clickOpen)
+ {
+ var VDUSize = VDUData.data.length;
+ if(0 < VDUSize)
+ {
+ for ( var i = 0; i < VDUSize; i++)
+ {
+ // created vdu node
+ if(n.id == VDUData.data[i].hostId)
+ {
+ custdata.x = i;
+ custdata.y = n.y + 1;
+ custdata.image = imgPlus[0];
+ Topo.addNode(creatNodeByJSON("VDU", VDUData.data[i], custdata, i + 1));
+ n.childrens.push(VDUData.data[i].oid);
+ n.image.url = imgMinus[1];
+
+ // created link
+ Topo.addLink(creatEdge(n.id,VDUData.data[i].oid));
+ }
+ }
+ }
+
+ n.clickOpen = true;
+ }
+ else
+ {
+ // delete VNFC node
+ var childSize = n.childrens.length;
+ for ( var i = 0; i < childSize; i++)
+ {
+ delNode(n.childrens[i]);
+ }
+
+ if(0 < childSize)
+ {
+ n.image.url = imgPlus[1];
+ }
+ n.clickOpen = false;
+ }
+ }
+
+ // Since the data has been modified, we need to
+ // call the refresh method to make the colors
+ // update effective.
+ Topo.refresh();
+ });
+
+
+
+ // Binding the event of mouse rightClickNode
+ Topo.mouseBind('rightClickNode', function(e)
+ {
+ /*if('VIM' == e.data.node.nodeType)
+ {
+ var menu = '<ul>';
+ menu += '<li><a style="cursor:pointer;" onclick="jumpToService();">业务拓扑</a></li>';
+ menu += '</ul>';
+ infoDialogAddview(menu,'menu');
+ infoDialogshow();
+ return;
+ }*/
+ });
+
+
+ // Binding the event of mouse overNode
+ Topo.mouseBind('overNode', function(e)
+ {
+ infoDialogAddview(createNodeinfo(e.data.node));
+ infoDialogshow();
+ });
+
+ // Binding the event of mouse outNode
+ Topo.mouseBind('outNode', function(e)
+ {
+ //e.data.node.borderColor = "";
+ //Topo.refresh();
+ infoDialoghide();
+ });
+
+ // When the stage is clicked, we just color each
+ // node and edge with its original color.
+ Topo.mouseBind('clickStage', function(e)
+ {
+ // Same as in the previous event:
+ Topo.refresh();
+
+ // close infoDialog
+ infoDialoghide();
+ });
+
+ Topo.refresh();
+
+ /**
+ * <Delete the specified node>
+ * @param type
+ * @param id
+ * @see []
+ */
+ function delNode(nodeId)
+ {
+ Topo.allNodes().forEach(function(n)
+ {
+ if (nodeId == n.id)
+ {
+ var chlidSize = n.childrens.length;
+ if (0 < chlidSize)
+ {
+ for ( var i = 0; i < chlidSize; i++)
+ {
+ delNode(n.childrens[i]);
+ }
+ }
+ Topo.dropNode(n.id);
+ }
+
+ });
+ }
+
+});
+
diff --git a/umc-iui/src/main/resources/webroot/umc-topo/js/serviceTopology.js b/umc-iui/src/main/resources/webroot/umc-topo/js/serviceTopology.js new file mode 100644 index 00000000..0aca8681 --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/js/serviceTopology.js @@ -0,0 +1,503 @@ +// generate a random graph
+var images = [
+ './images/NS.png',
+ './images/NS1.png',
+ './images/VNF.png',
+ './images/VNF1.png',
+ './images/VDU.png',
+ './images/VDU1.png',
+ './images/VNFC.png',
+ './images/VNFC1.png'
+];
+
+// definition node data global variable
+var NSData , VNFCData, VDUData, VNFData;
+
+// all link count
+var edgeID = 0;
+
+// ready
+$(document).ready(function()
+{
+ // definition resource interface url
+ var nsUrl = "../../api/roc/v1/resource/nsrs";
+ var vnfUrl = "../../api/roc/v1/resource/vnfs";
+ var vduUrl = "../../api/roc/v1/resource/vdus";
+ var vnfcUrl = "../../api/roc/v1/resource/vnfcs";
+
+ // get JSON data
+ $.ajaxSettings.async = false; // set ajax get json was synchronization
+
+ // get ns
+ $.ajax({
+ "type": 'get',
+ "url": nsUrl,
+ "dataType": "json",
+ "success": function (resp) {
+ if(resp.operationResult == "SUCCESS")
+ {
+ NSData = resp;
+ }
+ else{
+ }
+ },
+ error: function(XMLHttpRequest, textStatus, errorThrown) {
+ }
+
+ });
+
+ // get vnf
+ $.ajax({
+ "type": 'get',
+ "url": vnfUrl,
+ "dataType": "json",
+ "success": function (resp) {
+ if(resp.operationResult == "SUCCESS")
+ {
+ VNFData = resp;
+ }
+ else{
+ }
+ },
+ error: function(XMLHttpRequest, textStatus, errorThrown) {
+ }
+
+ });
+
+ // get vdu
+ $.ajax({
+ "type": 'get',
+ "url": vduUrl,
+ "dataType": "json",
+ "success": function (resp) {
+ if(resp.operationResult == "SUCCESS")
+ {
+ VDUData = resp;
+ }
+ else{
+ }
+ },
+ error: function(XMLHttpRequest, textStatus, errorThrown) {
+ }
+
+ });
+
+ // get vnfc
+ $.ajax({
+ "type": 'get',
+ "url": vnfcUrl,
+ "dataType": "json",
+ "success": function (resp) {
+ if(resp.operationResult == "SUCCESS")
+ {
+ VNFCData = resp;
+ }
+ else{
+ }
+ },
+ error: function(XMLHttpRequest, textStatus, errorThrown) {
+ }
+
+ });
+
+
+ /*$.getJSON('../data/ns.json', function(data){
+ NSData = data;
+ });
+
+ $.getJSON('../data/vnfc.json', function(data){
+ VNFCData = data;
+ });
+
+ $.getJSON('../data/vdu.json', function(data){
+ VDUData = data;
+ });
+
+ $.getJSON('../data/vnf.json', function(data){
+ VNFData = data;
+ });
+
+ $.getJSON('../data/host.json', function(data){
+ HOSTData = data;
+ });*/
+
+
+ var Topo = new oTopo();
+ var settings=
+ {
+ minNodeSize : 30,
+ maxNodeSize : 40,
+ minEdgeSize: 1,
+ maxEdgeSize: 1,
+ doubleClickZoomingRatio : 0,
+ mouseZoomDuration : 1000,
+ };
+ Topo.canvas('NS', settings);
+
+ // set the nodes can be drag and drop
+ Topo.setDrag(true);
+
+ // Disable the right mouse button for browser
+ Topo.noright(document.body);
+
+
+ // created NS node
+ var NSSize = NSData.data.length;
+ var VNFSize = VNFData.data.length;
+ var vnfNum = 0;
+ if(0 < NSSize)
+ {
+ for ( var i = 0; i < NSSize; i++)
+ {
+ var userPara = new Array();
+ userPara.x = 0;
+ userPara.y = 1;
+
+ for (var j = 0; j < VNFSize; j++) {
+ var relation = VNFData.data[j].relations;
+
+ for (var k = 0; k < relation.length; k++) {
+ if('belongTo' == relation[k].relationType && NSData.data[i].oid == relation[k].relatedId)
+ {
+ vnfNum ++;
+ }
+ }
+
+ }
+ if(0 < vnfNum)
+ {
+ userPara.image = images[1];
+ }
+ else
+ {
+ userPara.image = images[0];
+ }
+ Topo.addNode(creatNodeByJSON("NS", NSData.data[i], userPara, i + 1));
+ }
+ }
+ else
+ {
+ var VDUSize = VDUData.data.length;
+ var vduNum = 0;
+ for ( var i = 0; i < VNFSize; i++)
+ {
+ var userPara = new Array();
+ userPara.x = 0;
+ userPara.y = 1;
+
+ for (var j = 0; j < VDUSize; j++) {
+ var relation = VDUData.data[j].relations;
+
+ for (var k = 0; k < relation.length; k++) {
+ if('belongTo' == relation[k].relationType && VNFData.data[i].oid == relation[k].relatedId)
+ {
+ vduNum ++;
+ }
+ }
+
+ }
+ if(0 < vduNum)
+ {
+ userPara.image = images[3];
+ }
+ else
+ {
+ userPara.image = images[2];
+ }
+ Topo.addNode(creatNodeByJSON("VNF", VNFData.data[i], userPara, i + 1));
+ }
+ }
+
+
+ // When a node is clicked, we check for each node
+ // if it is a neighbor of the clicked one. If not,
+ // we set its color as grey, and else, it takes its
+ // original color.
+ // We do the same for the edges, and we only keep
+ // edges that have both extremities colored.
+ Topo.mouseBind('doubleClickNode', function(e)
+ {
+ var n = e.data.node;
+ var userPara = new Array();
+
+ if ('NS' == n.nodeType)
+ {
+ if(false == n.clickOpen)
+ {
+ // created VNF node
+ var VNFSize = VNFData.data.length;
+
+ if(0 < VNFSize)
+ {
+ for (var i = 0; i < VNFSize; i++)
+ {
+ var relation = VNFData.data[i].relations;
+
+ for (var j = 0; j < relation.length; j++) {
+ if('belongTo' == relation[j].relationType && n.oid == relation[j].relatedId)
+ {
+ userPara.x = i;
+ userPara.y = n.y+0.5;
+
+ // get vdu node count
+ var vduNum = VDUData.data.length;
+ var puls = false;
+ for ( var k = 0; k < vduNum; k++)
+ {
+ var vduRelation = VDUData.data[k].relations;
+ for (var l = 0; l < vduRelation.length; l++) {
+ if('belongTo' == vduRelation[l].relationType && VNFData.data[i].oid == vduRelation[l].relatedId)
+ {
+ puls = true;
+ }
+ }
+ }
+
+ if(puls)
+ {
+ userPara.image = images[3];
+ }
+ else
+ {
+ userPara.image = images[2];
+ }
+
+ Topo.addNode(creatNodeByJSON("VNF", VNFData.data[i], userPara, i + 1));
+ n.childrens.push(VNFData.data[i].vnfd);
+
+ // add link
+ Topo.addLink(creatEdge(n.id,VNFData.data[i].vnfd));
+ }
+ }
+ }
+ }
+
+ n.image.url = images[0];
+ n.clickOpen = true;
+ }
+ else
+ {
+ // deleted children nodes
+ var childSize = n.childrens.length;
+ for ( var i = 0; i < childSize; i++)
+ {
+ delNode(n.childrens[i]);
+ }
+
+ edgeID = 0;
+ if (0 < childSize) {
+ n.image.url = images[1];
+ }
+
+ n.clickOpen = false;
+ }
+ }
+
+ if('VNF' == n.nodeType)
+ {
+ if(false == n.clickOpen)
+ {
+ // created VDU node
+ var VDUSize = VDUData.data.length;
+
+ if(0 < VDUSize)
+ {
+ for (var i = 0; i < VDUSize; i++)
+ {
+ var relation = VDUData.data[i].relations;
+
+ for (var j = 0; j < relation.length; j++) {
+ if('belongTo' == relation[j].relationType && n.oid == relation[j].relatedId)
+ {
+ userPara.x = i;
+ userPara.y = n.y+0.5;
+
+ // get vnfc node count
+ var vnfcNum = VNFCData.data.length;
+ var puls = false;
+ for ( var k = 0; k < vnfcNum; k++)
+ {
+ var vnfcRelation = VNFCData.data[k].relations;
+ for (var l = 0; l < vnfcRelation.length; l++) {
+ if('deployedOn' == vnfcRelation[l].relationType && VDUData.data[i].oid == vnfcRelation[l].relatedId)
+ {
+ puls = true;
+ }
+ }
+ }
+
+ if(puls)
+ {
+ userPara.image = images[5];
+ }
+ else
+ {
+ userPara.image = images[4];
+ }
+
+ Topo.addNode(creatNodeByJSON("VDU", VDUData.data[i], userPara, i + 1));
+ n.childrens.push(VDUData.data[i].oid);
+
+ // add link
+ Topo.addLink(creatEdge(n.id,VDUData.data[i].oid));
+ }
+ }
+ }
+ }
+
+ n.image.url = images[2];
+ n.clickOpen = true;
+ }
+ else
+ {
+ // delete children node
+ var childSize = n.childrens.length;
+ for ( var i = 0; i < childSize; i++)
+ {
+ delNode(n.childrens[i]);
+ }
+
+ if (0 < childSize) {
+ n.image.url = images[3];
+ }
+
+ n.clickOpen = false;
+ }
+ }
+
+
+ if('VDU' == n.nodeType)
+ {
+ if(false == n.clickOpen)
+ {
+ // created VNFC node
+ var VNFCSize = VNFCData.data.length;
+ if(0 < VNFCSize)
+ {
+ for ( var i = 0; i < VNFCSize; i++)
+ {
+ var relation = VNFCData.data[i].relations;
+ for (var j = 0; j < relation.length; j++) {
+ if('deployedOn' == relation[j].relationType && n.oid == relation[j].relatedId)
+ {
+ userPara.x = i;
+ userPara.y = n.y+0.5;
+ userPara.image = images[6];
+
+ Topo.addNode(creatNodeByJSON("VNFC", VNFCData.data[i], userPara, i + 1));
+ n.childrens.push(VNFCData.data[i].oid);
+
+ // add link
+ Topo.addLink(creatEdge(n.id,VNFCData.data[i].oid));
+ }
+ }
+ }
+ }
+
+ n.image.url = images[4];
+ n.clickOpen = true;
+ }
+ else
+ {
+ // deleted children node
+ var childSize = n.childrens.length;
+ for ( var i = 0; i < childSize; i++)
+ {
+ delNode(n.childrens[i]);
+ }
+
+ if (0 < childSize) {
+ n.image.url = images[5];
+ }
+
+ n.clickOpen = false;
+ }
+ }
+
+
+ if('VNFC' == n.nodeType)
+ {
+ return;
+ if(false == n.clickOpen)
+ {
+ var VDUSize = VDUData.data.length;
+ //console.log("VDUSize:"+VDUSize);
+ if(0 < VDUSize)
+ {
+ for ( var i = 0; i < VDUSize; i++)
+ {
+ Topo.addNode(creatNodeByJSON("VDU", VDUData.data[i], i + 1));
+ n.childrens.push(VDUData.data[i].oid);
+
+ Topo.addLink(creatEdge(n.id,VDUData.data[i].oid));
+ }
+ }
+
+ n.clickOpen = true;
+ }
+ else
+ {
+ for ( var i = 0; i < n.childrens.length; i++)
+ {
+ delNode(n.childrens[i]);
+ }
+
+ n.clickOpen = false;
+ }
+ }
+
+ Topo.refresh();
+ });
+
+ // Binding the event of mouse overNode
+ Topo.mouseBind('overNode', function(e) {
+ infoDialogAddview(createNodeinfo(e.data.node));
+ infoDialogshow();
+ });
+
+ // Binding the event of mouse outNode
+ Topo.mouseBind('outNode', function(e) {
+ infoDialoghide();
+ });
+
+ // When the stage is clicked, we just color each
+ // node and edge with its original color.
+ Topo.mouseBind('clickStage', function(e)
+ {
+ // Same as in the previous event:
+ Topo.refresh();
+
+ // close infoDialog
+ infoDialoghide();
+ });
+
+ Topo.refresh();
+
+
+ /**
+ * <Delete the specified node>
+ * @param type
+ * @param id
+ * @see []
+ */
+ function delNode(nodeId)
+ {
+ Topo.allNodes().forEach(function(n)
+ {
+ if (nodeId == n.id)
+ {
+ var chlidSize = n.childrens.length;
+ if (0 < chlidSize)
+ {
+ for ( var i = 0; i < chlidSize; i++)
+ {
+ delNode(n.childrens[i]);
+ }
+ }
+ Topo.dropNode(n.id);
+ }
+
+ });
+ }
+});
+
diff --git a/umc-iui/src/main/resources/webroot/umc-topo/js/topoDialog.js b/umc-iui/src/main/resources/webroot/umc-topo/js/topoDialog.js new file mode 100644 index 00000000..2de252f1 --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/js/topoDialog.js @@ -0,0 +1,165 @@ +/**
+ * created node info dialog
+ */
+function createDiv()
+{
+ var Div=$('<div></div>'); // created parent DIV
+ return Div;
+}
+
+// dialog div object
+var infoDialog;
+
+var infoDialogAddview = function(node,dialogClass)
+{
+ infoDialog = createDiv();
+ //set div property
+ infoDialog.attr('id','infodialog');
+ infoDialog.css('display','none');
+ infoDialog.addClass((undefined == dialogClass)?'infoDialog':dialogClass); // add CSS style
+ infoDialog.css({'left':window.event.clientX + 2 + "px",'top':window.event.clientY + 2 + "px"});
+ infoDialog.css('position','absolute');// must set this property，
+ infoDialog.css('width','auto');
+ infoDialog.css('height','auto');
+
+ // add a new node
+ infoDialog.append(node);
+};
+
+// display dialog
+var infoDialogshow = function()
+{
+ // if the dialog display,remove it
+ if ( $("#infodialog").length > 0 ) {
+ infoDialoghide();
+ }
+
+ $(document.body).append(infoDialog);
+
+/* var wHeight = window.document.body.offsetHeight;
+ var wWidth = window.document.body.offsetWidth;
+
+ var top = infoDialog.css('left');
+ var left = infoDialog.css('left');
+ var dHeight = infoDialog.height();
+ var dWidth = infoDialog.width();
+
+ console.log("infoDialogshow wHeight:"+wHeight+",wWidth:"+wWidth);
+ console.log("infoDialog top:"+top+",left:"+left);
+ console.log("infoDialog Height:"+dHeight+",Width:"+dWidth);*/
+
+ infoDialog.css('display','');
+
+ // binding mouse leave event
+ $("#infodialog").mouseleave(function(){
+ //$(this).remove();
+ });
+};
+
+
+// remove info dialog
+var infoDialoghide = function()
+{
+ $("#infodialog").remove();
+};
+
+/**
+ * <display node info >
+ * @param node
+ * @returns
+ * @see []
+ */
+var createNodeinfo = function(node)
+{
+ var nsInfoHTMLStr = "";
+
+ nsInfoHTMLStr += '<table style="width: 350px">';
+
+
+ if('NS' == node.nodeType)
+ {
+ nsInfoHTMLStr += '<tr><td style="width: 21%"><a>nsd</a></td><td><a>'+node.nsd+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>status</a></td><td><a>'+node.status+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>name</a></td><td><a>'+node.name+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>vendor</a></td><td><a>'+node.vendor+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>version</a></td><td><a>'+node.version+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>type</a></td><td><a>'+node.nstype+'</a></td></tr>';
+ }
+ else if('VNFC' == node.nodeType)
+ {
+ nsInfoHTMLStr += '<tr><td style="width: 21%"><a>name</a></td><td><a>'+node.name+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>ipAddress</a></td><td><a>'+node.ipAddress+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>vendor</a></td><td><a>'+node.vendor+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>version</a></td><td><a>'+node.version+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>type</a></td><td><a>'+node.vnfctype+'</a></td></tr>';
+ }
+ else if('VDU' == node.nodeType)
+ {
+ nsInfoHTMLStr += '<tr><td style="width: 21%"><a>vduImage</a></td><td><a>'+node.vduImage+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>mocName</a></td><td><a>'+node.mocName+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>name</a></td><td><a>'+node.name+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>ipAddress</a></td><td><a>'+node.ipAddress+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>vendor</a></td><td><a>'+node.vendor+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>version</a></td><td><a>'+node.version+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>type</a></td><td><a>'+node.vdutype+'</a></td></tr>';
+ }
+ else if('VNF' == node.nodeType)
+ {
+ nsInfoHTMLStr += '<tr><td style="width: 21%"><a>status</a></td><td><a>'+node.status+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>name</a></td><td><a>'+node.name+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>ipAddress</a></td><td><a>'+node.ipAddress+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>vendor</a></td><td><a>'+node.vendor+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>version</a></td><td><a>'+node.version+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>type</a></td><td><a>'+node.vnftype+'</a></td></tr>';
+ }
+ else if('HOST' == node.nodeType)
+ {
+ nsInfoHTMLStr += '<tr><td style="width: 21%"><a>mocName</a></td><td><a>'+node.mocName+'</a></td></tr>';
+ /*nsInfoHTMLStr += '<tr><td><a>protocol</a></td><td><a>'+node.protocol+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>port</a></td><td><a>'+node.port+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>cpuNum</a></td><td><a>'+node.cpuNum+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>cpuRate</a></td><td><a>'+node.cpuRate+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>memorySize</a></td><td><a>'+node.memorySize+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>storageSize</a></td><td><a>'+node.storageSize+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>moc</a></td><td><a>'+node.moc+'</a></td></tr>';*/
+ nsInfoHTMLStr += '<tr><td><a>name</a></td><td><a>'+node.name+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>ipAddress</a></td><td><a>'+node.ipAddress+'</a></td></tr>';
+ }
+ else if('VIM' == node.nodeType)
+ {
+ nsInfoHTMLStr += '<tr><td style="width: 21%"><a>user</a></td><td><a>'+node.user+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>url</a></td><td><a>'+node.url+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>status</a></td><td><a>'+node.status+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>userName</a></td><td><a>'+node.userName+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>checkTime</a></td><td><a>'+node.checkTime+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>name</a></td><td><a>'+node.name+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>ipAddress</a></td><td><a>'+node.ipAddress+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>vendor</a></td><td><a>'+node.vendor+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>type</a></td><td><a>'+node.vimtype+'</a></td></tr>';
+ }
+
+ nsInfoHTMLStr += '</table>';
+
+ return nsInfoHTMLStr;
+};
+
+var createServiceNodeinfo = function(node)
+{
+ var nsInfoHTMLStr = "";
+ nsInfoHTMLStr += '<table style="width: 250px">';
+ nsInfoHTMLStr += '<tr><td style="width: 21%"><a>Name</a></td><td><a>'+node.mocName+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>status</a></td><td><a>'+node.status+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>vendor</a></td><td><a>'+node.vendor+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>version</a></td><td><a>'+node.version+'</a></td></tr>';
+ nsInfoHTMLStr += '<tr><td><a>ipAddress</a></td><td><a>'+node.ipAddress+'</a></td></tr>';
+ nsInfoHTMLStr += '</table>';
+
+ return nsInfoHTMLStr;
+};
+
+
+// ready
+$(document).ready(function()
+{
+
+});
diff --git a/umc-iui/src/main/resources/webroot/umc-topo/js/topoTool.js b/umc-iui/src/main/resources/webroot/umc-topo/js/topoTool.js new file mode 100644 index 00000000..7b22cb5c --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/js/topoTool.js @@ -0,0 +1,344 @@ +/**openo tools**/
+// generate a random graph
+var imgOn =
+[
+ // node image resource
+ './images/on/InternetServer.gif', //NS
+ './images/on/Multiplexer.gif', // VNFC
+ './images/on/Hub.gif', // VDU
+ './images/on/Bridge.gif', // VNF
+ './images/on/Computer.png', // HOST
+ './images/on/vim.png' //VIM
+], imgOff =
+[
+ // node image resource
+ './images/off/InternetServer.gif', //NS
+ './images/off/Multiplexer.gif', // VNFC
+ './images/off/Hub.gif', // VDU
+ './images/off/Bridge.gif', // VNF
+ './images/off/Computer.gif', // HOST
+ './images/off/vim.png' //VIM
+], colors =
+[
+ // node background color
+ '#617db4',
+ '#668f3c',
+ '#c6583e',
+ '#b956af'
+],
+step = 0;
+
+
+/**
+ * <Data generated topology node based on rest interface >
+ * @param nodeType node type
+ * @param jsonData json from rest
+ * @param customPara user data
+ * @param index node index
+ * @see []
+ */
+function creatNodeByJSON(nodeType,jsonData,customPara,index)
+{
+ var node = {};
+
+ console.log("creatNodeByJSON nodeType:"+nodeType);
+ console.log("creatNodeByJSON customPara:"+customPara.length);
+ console.log("creatNodeByJSON customPara:"+customPara.image);
+
+ // created node
+ if('NS' == nodeType)
+ {
+ // Generate a random graph, going through the different shapes
+ node =
+ {
+ id : jsonData.nsd,
+ label : jsonData.name,
+ // note the ShapeLibrary.enumerate() returns the names of all
+ // supported renderers
+ type : "square",
+ x : (undefined != customPara.x)?customPara.x:jsonData.positionX,//1*index,
+ y : (undefined != customPara.y)?customPara.y:jsonData.positionY,//1,
+ size : (undefined != customPara.size)?customPara.size:8,
+ color : (undefined != customPara.color)?customPara.color:"transparent",
+
+ // custom parameter
+ nodeType: nodeType,
+ nsd: jsonData.nsd,
+ autoScalePolicy: jsonData.autoScalePolicy,
+ monitoringParameter: jsonData.monitoringParameter,
+ flavour: jsonData.flavour,
+ status: jsonData.status,
+ customPara: jsonData.customPara,
+ oid: jsonData.oid,
+ moc: jsonData.moc,
+ mocName: jsonData.mocName,
+ name: jsonData.name,
+ vendor: jsonData.vendor,
+ version: jsonData.version,
+ nstype: jsonData.type,
+ relations: jsonData.relations,
+ clickOpen: false,
+ childrens: []
+ };
+
+ node.image =
+ {
+ url : (undefined != customPara.image)?customPara.image:imgOn[0],
+ // scale/clip are ratio values applied on top of 'size'
+ scale : 1,
+ clip : 0,
+ };
+ }
+ else if('VNFC' == nodeType)
+ {
+ // Generate a random graph, going through the different shapes
+ node =
+ {
+ id : jsonData.oid,
+ label : jsonData.name,
+ // note the ShapeLibrary.enumerate() returns the names of all
+ // supported renderers
+ type : "square",
+ x : (undefined != customPara.x)?customPara.x:jsonData.positionX,//1*index,
+ y : (undefined != customPara.y)?customPara.y:jsonData.positionY,//2,
+ size : (undefined != customPara.size)?customPara.size:8,
+ color : (undefined != customPara.color)?customPara.color:"transparent",
+
+ // custom parameter
+ nodeType: nodeType,
+ vduId: jsonData.vduId,
+ vnfId: jsonData.vnfId,
+ status: "active",
+ createTime: jsonData.createTime,
+ oid: jsonData.oid,
+ moc: jsonData.moc,
+ name: jsonData.name,
+ ipAddress: jsonData.ipAddress,
+ vendor: jsonData.vendor,
+ version: jsonData.version,
+ vnfctype: jsonData.type,
+ relations: jsonData.relations,
+ clickOpen: false,
+ childrens: []
+ };
+
+ node.image =
+ {
+ url : (undefined != customPara.image)?customPara.image:imgOn[1],
+ // scale/clip are ratio values applied on top of 'size'
+ scale : 1,
+ clip : 0,
+ };
+ }
+ else if('VDU' == nodeType)
+ {
+ // Generate a random graph, going through the different shapes
+ node =
+ {
+ id : jsonData.oid,
+ label : jsonData.name,
+ // note the ShapeLibrary.enumerate() returns the names of all
+ // supported renderers
+ type : "square",
+ x : (undefined != customPara.x)?customPara.x:jsonData.positionX,//1*index,
+ y : (undefined != customPara.y)?customPara.y:jsonData.positionY,//3,
+ size : (undefined != customPara.size)?customPara.size:8,
+ color : (undefined != customPara.color)?customPara.color:"transparent",
+
+ // custom parameter
+ nodeType: nodeType,
+ vduImage: jsonData.vduImage,
+ vnfId: jsonData.vnfId,
+ vimId: jsonData.vimId,
+ hostId: jsonData.hostId,
+ createTime: jsonData.createTime,
+ customPara: jsonData.customPara,
+ status: "active",//jsonData.status,
+ lanInfo: jsonData.lanInfo,
+ flavourId: jsonData.flavourId,
+ floatIpInfo: jsonData.floatIpInfo,
+ oid: jsonData.oid,
+ moc: jsonData.moc,
+ mocName: jsonData.mocName,
+ name: jsonData.name,
+ ipAddress: jsonData.ipAddress,
+ vendor: jsonData.vendor,
+ version: jsonData.version,
+ vdutype: jsonData.type,
+ relations: jsonData.relations,
+ clickOpen: false,
+ childrens: []
+ };
+
+ node.image =
+ {
+ url : (undefined != customPara.image)?customPara.image:imgOn[2],
+ // scale/clip are ratio values applied on top of 'size'
+ scale : 1,
+ clip : 0,
+ };
+ }
+ else if('VNF' == nodeType)
+ {
+ // Generate a random graph, going through the different shapes
+ node =
+ {
+ id : jsonData.vnfd,
+ label : jsonData.name,
+ // note the ShapeLibrary.enumerate() returns the names of all
+ // supported renderers
+ type : "square",
+ x : (undefined != customPara.x)?customPara.x:jsonData.positionX,//1*index,
+ y : (undefined != customPara.y)?customPara.y:jsonData.positionY,//4,
+ size : (undefined != customPara.size)?customPara.size:8,
+ color : (undefined != customPara.color)?customPara.color:"transparent",
+
+ // custom parameter
+ nodeType: nodeType,
+ vnfd: jsonData.vnfd,
+ autoScalePolicy: jsonData.autoScalePolicy,
+ flavourId: jsonData.flavourId,
+ localization: jsonData.localization,
+ monitoringParameter: jsonData.monitoringParameter,
+ status: jsonData.status,
+ customPara: jsonData.customPara,
+ createTime: jsonData.createTime,
+ vimId: jsonData.vimId,
+ oid: jsonData.oid,
+ moc: jsonData.moc,
+ name: jsonData.name,
+ ipAddress: jsonData.ipAddress,
+ vendor: jsonData.vendor,
+ version: jsonData.version,
+ vnftype: jsonData.type,
+ relations: jsonData.relations,
+ clickOpen: false,
+ childrens: []
+ };
+
+ node.image =
+ {
+ url : (undefined != customPara.image)?customPara.image:imgOn[3],
+ // scale/clip are ratio values applied on top of 'size'
+ scale : 1,
+ clip : 0,
+ };
+ }
+ else if('HOST' == nodeType)
+ {
+ // Generate a random graph, going through the different shapes
+ node =
+ {
+ id : jsonData.oid,
+ label : jsonData.name,
+ // note the ShapeLibrary.enumerate() returns the names of all
+ // supported renderers
+ type : "square",
+ x : (undefined != customPara.x)?customPara.x:jsonData.positionX,//1*index,
+ y : (undefined != customPara.y)?customPara.y:jsonData.positionY,//2,
+ size : (undefined != customPara.size)?customPara.size:8,
+ color : (undefined != customPara.color)?customPara.color:"transparent",
+
+ // custom parameter
+ nodeType: nodeType,
+ vimId: jsonData.vimId,
+ port: jsonData.port,
+ customPara: jsonData.customPara,
+ cpuNum: jsonData.cpuNum,
+ memorySize: jsonData.memorySize,
+ storageSize: jsonData.storageSize,
+ status: "active",//jsonData.status,
+ oid: jsonData.oid,
+ moc: jsonData.moc,
+ mocName: jsonData.mocName,
+ name: jsonData.name,
+ ipAddress: jsonData.ipAddress,
+ relations: jsonData.relations,
+ clickOpen: false,
+ childrens: []
+ };
+
+ node.image =
+ {
+ url : (undefined != customPara.image)?customPara.image:imgOn[4],
+ // scale/clip are ratio values applied on top of 'size'
+ scale : 1,
+ clip : 0,
+ };
+ }
+ else if('VIM' == nodeType)
+ {
+ // Generate a random graph, going through the different shapes
+ node =
+ {
+ id : jsonData.oid,
+ label : jsonData.name,
+ // note the ShapeLibrary.enumerate() returns the names of all
+ // supported renderers
+ type : "square",
+ x : (undefined != customPara.x)?customPara.x:1*index,
+ y : (undefined != customPara.y)?customPara.y:1,
+ size : (undefined != customPara.size)?customPara.size:8,
+ color : (undefined != customPara.color)?customPara.color:"transparent",
+
+ // custom parameter
+ nodeType: nodeType,
+ user: jsonData.user,
+ url: jsonData.url,
+ hostName: jsonData.hostName,
+ status: jsonData.status,
+ errorInfo: jsonData.errorInfo,
+ userName: jsonData.userName,
+ password: jsonData.password,
+ checkTime: jsonData.checkTime,
+ createTime: jsonData.createTime,
+ oid: jsonData.oid,
+ moc: jsonData.moc,
+ mocName: jsonData.mocName,
+ name: jsonData.name,
+ ipAddress: jsonData.ipAddress,
+ vendor: jsonData.vendor,
+ vimtype: jsonData.type,
+ relations: jsonData.relations,
+ clickOpen: false,
+ childrens: []
+ };
+
+ node.image =
+ {
+ url : (undefined != customPara.image)?customPara.image:imgOn[5],
+ // scale/clip are ratio values applied on top of 'size'
+ scale : 1,
+ clip : 0,
+ };
+ }
+ //console.log(node.id);
+ //console.log(node.label);
+ //console.log(node.image);
+
+ return node;
+}
+
+
+/**
+ * <Data generated link based on rest interface>
+ * @param noteSource
+ * @param noteTarget
+ * @see []
+ */
+function creatEdge(noteSource,noteTarget)
+{
+ //console.log("creatEdge noteSource:"+noteSource+",noteTarget:"+noteTarget);
+ var edge=
+ {
+ id : 'RT' + Math.random(),
+ source : noteSource,
+ target : noteTarget,
+ size : 1,
+ color: '#1C86EE'
+ };
+
+ edgeID ++;
+
+ return edge;
+}
diff --git a/umc-iui/src/main/resources/webroot/umc-topo/physicalTopology.html b/umc-iui/src/main/resources/webroot/umc-topo/physicalTopology.html new file mode 100644 index 00000000..1a1eb4e6 --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/physicalTopology.html @@ -0,0 +1,24 @@ +<!DOCTYPE html>
+<html>
+<head>
+<title>openotopo</title>
+
+<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
+<meta http-equiv="description" content="this is my page">
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+<link rel="stylesheet" type="text/css" href="./css/main.css">
+<script type="text/javascript" src="../component/thirdparty/jquery/jquery-2.1.3.min.js"></script>
+<script type="text/javascript" src="../component/openotopo/openotopo.min.js"></script>
+<script type="text/javascript" src="./js/topoTool.js"></script>
+<script type="text/javascript" src="./js/topoDialog.js"></script>
+<script type="text/javascript" src="./js/physicalTopology.js"></script>
+
+
+</head>
+<body>
+ <div id="container">
+ <div id="VIM"></div>
+ </div>
+</body>
+</html>
diff --git a/umc-iui/src/main/resources/webroot/umc-topo/serviceTopology.html b/umc-iui/src/main/resources/webroot/umc-topo/serviceTopology.html new file mode 100644 index 00000000..ffffc2f9 --- /dev/null +++ b/umc-iui/src/main/resources/webroot/umc-topo/serviceTopology.html @@ -0,0 +1,24 @@ +<!DOCTYPE html>
+<html>
+<head>
+<title>openotopo</title>
+
+<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
+<meta http-equiv="description" content="this is my page">
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+<link rel="stylesheet" type="text/css" href="./css/main.css">
+<script type="text/javascript" src="../component/thirdparty/jquery/jquery-2.1.3.min.js"></script>
+<script type="text/javascript" src="../component/openotopo/openotopo.min.js"></script>
+<script type="text/javascript" src="./js/topoTool.js"></script>
+<script type="text/javascript" src="./js/topoDialog.js"></script>
+<script type="text/javascript" src="./js/serviceTopology.js"></script>
+
+
+</head>
+<body>
+ <div id="container">
+ <div id="NS"></div>
+ </div>
+</body>
+</html>
|
