From ce461897427f65b7488f81783f1172d787455e2f Mon Sep 17 00:00:00 2001 From: swsiyu Date: Sat, 26 Dec 2015 12:01:59 +0800 Subject: [PATCH] Modify nemo-ui Change-Id: I453a17a137fd710a0ee2081402f7f632d38e6e56 Signed-off-by: swsiyu --- .../src/main/resources/nemo/css/nemo_main.css | 14 + .../resources/nemo/css/nemo_user_main.css | 15 +- .../src/main/resources/nemo/css/register.css | 9 +- .../main/resources/nemo/images/phyHos_t.png | Bin 0 -> 324 bytes .../main/resources/nemo/images/phyHost.png | Bin 0 -> 332 bytes .../src/main/resources/nemo/js/Nemo_Main.js | 16 + .../src/main/resources/nemo/js/intentTopo.js | 67 +- .../main/resources/nemo/js/jquery.cookie.js | 114 +++ .../src/main/resources/nemo/js/phyNetwork.js | 168 ++++ nemo-ui/src/main/resources/nemo/js/svg.xml | 35 + .../src/main/resources/nemo/js/vnMapping.js | 7 +- .../nemo/module/test/bod_userJson.js | 805 ++++++++++++++++++ nemo-ui/src/main/resources/nemo/nemo.tpl.html | 23 +- nemo-ui/src/main/resources/nemo/register.html | 53 +- 14 files changed, 1289 insertions(+), 37 deletions(-) create mode 100644 nemo-ui/src/main/resources/nemo/images/phyHos_t.png create mode 100644 nemo-ui/src/main/resources/nemo/images/phyHost.png create mode 100644 nemo-ui/src/main/resources/nemo/js/jquery.cookie.js create mode 100644 nemo-ui/src/main/resources/nemo/js/svg.xml diff --git a/nemo-ui/src/main/resources/nemo/css/nemo_main.css b/nemo-ui/src/main/resources/nemo/css/nemo_main.css index 2b49f69..49ccef4 100644 --- a/nemo-ui/src/main/resources/nemo/css/nemo_main.css +++ b/nemo-ui/src/main/resources/nemo/css/nemo_main.css @@ -26,6 +26,20 @@ span.key .header p{ float: left; } +.header span{ + color:#000 !important; + text-shadow:0 0 0 #fff; + text-decoration: underline; + /*text-decoration-color:green;*/ + /*border-bottom:1px solid green;*/ + font-weight: normal; + font-size: 18px; + line-height: 30px; + display: inline-block; + margin-left: 20px; + cursor: pointer; + font-family:'cursive','-webkit-pictograp',sans-serif,Verdana; +} #selectUser{ width: 290px; height: 30px; diff --git a/nemo-ui/src/main/resources/nemo/css/nemo_user_main.css b/nemo-ui/src/main/resources/nemo/css/nemo_user_main.css index 13493f4..429965d 100644 --- a/nemo-ui/src/main/resources/nemo/css/nemo_user_main.css +++ b/nemo-ui/src/main/resources/nemo/css/nemo_user_main.css @@ -84,7 +84,7 @@ svg{ } /*tab ui li*/ .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { - border: 1px solid #fbd850; + /*border: 1px solid #fbd850;*/ background: #fff url("../images/ui-bg_glass_65_ffffff_1x400.png") 50% 50% repeat-x; font-weight: bold; color: #eb8f00; @@ -100,6 +100,19 @@ svg{ background: #eee url("../images/ui-bg_highlight-soft_100_eeeeee_1x100.png") 50% top repeat-x; color: #333; } +.ui-tabs .ui-tabs-nav li { + background: #fff; + /*opacity: 0.9;*/ +} +.ui-tabs .ui-tabs-nav li a{ + color:gray !important; +} +li.ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active { + background: #eee; +} +li.ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active a{ + color:#eb8f00 !important; +} /*jquery ui tab css end*/ div#pageContent { height: 1000px; diff --git a/nemo-ui/src/main/resources/nemo/css/register.css b/nemo-ui/src/main/resources/nemo/css/register.css index 23d76f3..85f7858 100644 --- a/nemo-ui/src/main/resources/nemo/css/register.css +++ b/nemo-ui/src/main/resources/nemo/css/register.css @@ -8,8 +8,11 @@ body font-family: verdana,Geneva,Arial,sans-serif; } #logPage{ -min-width: 1140px; -/*border:2px solid red; */ + min-width: 1140px; + width: 1140px; + height: 566px; + /* border: 2px solid red; */ + background-color: #aaa; } .nemo_info{ background-color: #ddd; @@ -99,7 +102,7 @@ table tr td { width: 160px; height: 25px; - background-color: #ccc !important; + background-color: #fff !important; font-size: 18px; color: black; font-family:Verdana,Arial; diff --git a/nemo-ui/src/main/resources/nemo/images/phyHos_t.png b/nemo-ui/src/main/resources/nemo/images/phyHos_t.png new file mode 100644 index 0000000000000000000000000000000000000000..7efc820ee8531ba26faa26fa3c59b42177508aab GIT binary patch literal 324 zcmeAS@N?(olHy`uVBq!ia0vp^${@_a1|;QfZjJ;}jKx9jPD~C5YL5arEa{HEjtmSN z`?>!lvI6;>1s;*b3=BdgAk26#O}+vsC|TkfQ4*Y=R#Ki=l*-_nnOu}#4CE>Jr=?{k zr`EqUEd(ms;_2cT65;-Kh9O^zf`F@iRKNrY{{^x#ecBZw{*KG#cv*~hpEb*KGCey# z<<-whn`IK4bEB>Mn9o^mxwatidu?)T_za2U&-aq&rC*6M-IO5XzGTY2#A&GqO?uuC8t-L!;iGT(PSVOby^8Zs z=`jiB%-&yfZKnh&=x&$no#s5T!lvI6;>1s;*b3=BdgAk26#O}+vsC|TkfQ4*Y=R#Ki=l*-_nnOu}#4CE>Jr=?{k zr`EqUEd(ms_3IeYCn;snHa`Ip-o4^$0S7pE(;o`Mnmr9$?<9Xi= zHXJ!E{!H!9`NxLshPSubE){7JxbXV!_ukA|3D-(%r==dW=v%RM-@W4!%+F&?^EfQ$f9lDc#Ojv+r&1&*UHs*d{(@)jMWF@8QAu}nhU3>rb(^J*!m;T!Rzev2x@DcN! Xk`5cmbB7iJ{lVbr>gTe~DWM4fDtm*T literal 0 HcmV?d00001 diff --git a/nemo-ui/src/main/resources/nemo/js/Nemo_Main.js b/nemo-ui/src/main/resources/nemo/js/Nemo_Main.js index 8cb7645..2a0c49b 100644 --- a/nemo-ui/src/main/resources/nemo/js/Nemo_Main.js +++ b/nemo-ui/src/main/resources/nemo/js/Nemo_Main.js @@ -1,4 +1,20 @@ /// + function setCookie(name,value,Days) +{ + if(!Days) Days = 3; + var exp = new Date(); + exp.setTime(exp.getTime() + Days*24*60*60*1000); + document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString()+';path=/'; +} +function getCookie(name) +{ + var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); + + if(arr=document.cookie.match(reg)) + return unescape(arr[2]); + else + return null; +} jQuery.noConflict(); jQuery(document).ready(function ($) { //localStorage.clear(); diff --git a/nemo-ui/src/main/resources/nemo/js/intentTopo.js b/nemo-ui/src/main/resources/nemo/js/intentTopo.js index 480f700..306b09e 100644 --- a/nemo-ui/src/main/resources/nemo/js/intentTopo.js +++ b/nemo-ui/src/main/resources/nemo/js/intentTopo.js @@ -26,12 +26,12 @@ function getIntentInfos(){ if(!Datas){ Datas=userinfo; } - IntentInfos=Datas; + // IntentInfos=Datas; //return virtualDatas; } getIntentInfos(); - +//getIntentDatas(); function getIntentInfoById(user_id,Data){ //console.log(1); if(!Data) Data=IntentInfos; @@ -172,6 +172,8 @@ getIntentInfos(); } function flow_get_end_name(src_ip, dest_ip) { + // console.log(src_ip); + // console.log(dest_ip); var host_name = ['', '']; if (typeof(phy_host_ip[src_ip]) != "undefined") host_name[0] = phy_host_ip[src_ip]; @@ -202,6 +204,8 @@ getIntentInfos(); function flow_get_group(src_ip, dest_ip) { var src_host_name = flow_get_end_name(src_ip, dest_ip)[0]; var dest_host_name = flow_get_end_name(src_ip, dest_ip)[1]; + console.log(src_host_name); + console.log(dest_host_name); var group_node = ['', '']; for (var i = 0; i < jQuery("#service_svg2 g").length; i++) { host_list = jQuery("#service_svg2 g:eq(" + i + ")").attr("sub").split(","); @@ -227,6 +231,8 @@ getIntentInfos(); function draw_flow_data(src_ip, dest_ip, flow_name) { var src_group = flow_get_group(src_ip, dest_ip)[0]; var dest_group = flow_get_group(src_ip, dest_ip)[1]; + console.log(src_group); + console.log(dest_group); //get flow count var flow_count_temp = 0; while (1) { @@ -345,6 +351,10 @@ getIntentInfos(); } function draw_connection_data(conn_name, node_name_1, node_name_2, bandwidth) { + // console.log(conn_name); + // console.log(node_name_1); + // console.log(node_name_2); + // console.log(bandwidth); if (conn_name != null && typeof(conn_name) != "undefined") jQuery("#" + conn_name).remove(); try { @@ -352,6 +362,10 @@ getIntentInfos(); var node_cy_1 = jQuery("#" + node_name_1 + "_group").attr("cy"); var node_cx_2 = jQuery("#" + node_name_2 + "_group").attr("cx"); var node_cy_2 = jQuery("#" + node_name_2 + "_group").attr("cy"); + // console.log(node_cx_1); + // console.log(node_cy_1); + // console.log(node_cx_2); + // console.log(node_cy_2); //var g = document.createElementNS('http://www.w3.org/2000/svg', 'g'); var path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); var path_main = jQuery(path).attr({ @@ -443,7 +457,7 @@ getIntentInfos(); "stroke-width": 0.8 }); - jQuery(text1).text(node_type); + jQuery(text1).text(node_name); var text2 = document.createElementNS('http://www.w3.org/2000/svg', 'text'); var text2_main = jQuery(text2).attr({ id: node_name + "_title2", @@ -452,7 +466,7 @@ getIntentInfos(); fill: " ", 'text-anchor': 'middle' }); - jQuery(text2).text(node_name); + jQuery(text2).text(node_type); var g_main = jQuery(g).append(inCircle1_main); jQuery(g).append(text1_main); jQuery(g).append(text2_main); @@ -504,7 +518,7 @@ getIntentInfos(); "stroke": "black", "stroke-width": 0.8 }); - jQuery(text1).text(node_type); + jQuery(text1).text(node_name); var text2 = document.createElementNS('http://www.w3.org/2000/svg', 'text'); var text2_main = jQuery(text2).attr({ id: node_name + "_title2", @@ -513,7 +527,7 @@ getIntentInfos(); fill: "black", 'text-anchor': 'middle' }); - jQuery(text2).text(node_name); + jQuery(text2).text(node_type); var text3 = document.createElementNS('http://www.w3.org/2000/svg', 'text'); var text3_main = jQuery(text3).attr({ id: node_list[0] + '_text', @@ -530,9 +544,10 @@ getIntentInfos(); jQuery(g).append(text3_main); jQuery(g).attr("id", node_name); jQuery(g).attr("type", node_type); - jQuery(g).attr("sub", node_list[0]); + jQuery(g).attr("sub", node_name,node_list[0]); if (node_type.indexOf("chain") > -1) jQuery(g).attr("flow", 0); + if(ip) jQuery(g).attr("ip-prefix", ip); jQuery('#service_svg2').append(g_main); } else if (node_number == 2) { var g = document.createElementNS('http://www.w3.org/2000/svg', 'g'); @@ -578,7 +593,7 @@ getIntentInfos(); "stroke": "black", "stroke-width": 0.8 }); - jQuery(text1).text(node_type); + jQuery(text1).text(node_name); var text2 = document.createElementNS('http://www.w3.org/2000/svg', 'text'); var text2_main = jQuery(text2).attr({ id: node_name + "_title2", @@ -587,7 +602,7 @@ getIntentInfos(); fill: "black", 'text-anchor': 'middle' }); - jQuery(text2).text(node_name); + jQuery(text2).text(node_type); var text3 = document.createElementNS('http://www.w3.org/2000/svg', 'text'); var text3_main = jQuery(text3).attr({ id: node_list[0] + "_text", @@ -615,13 +630,13 @@ getIntentInfos(); jQuery(g).append(text4_main); jQuery(g).attr("id", node_name); jQuery(g).attr("type", node_type); - jQuery(g).attr("sub", node_list[0] + "," + node_list[1]); + jQuery(g).attr("sub", node_name,node_list[0] + "," + node_list[1]); if (node_type.indexOf("chain") > -1) jQuery(g).attr("flow", 0); + if(ip) jQuery(g).attr("ip-prefix", ip); jQuery('#service_svg2').append(g); } else if (node_number == 3) { - var g = document.createElementNS('http://www.w3.org/2000/svg', 'g'); var g = document.createElementNS('http://www.w3.org/2000/svg', 'g'); var circle_main = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); var inCircle1_main = jQuery(circle_main).attr({ @@ -676,7 +691,7 @@ getIntentInfos(); "stroke": "black", "stroke-width": 0.8 }); - jQuery(text1).text(node_type); + jQuery(text1).text(node_name); var text2 = document.createElementNS('http://www.w3.org/2000/svg', 'text'); var text2_main = jQuery(text2).attr({ id: node_name + "_title2", @@ -685,7 +700,7 @@ getIntentInfos(); fill: "black", 'text-anchor': 'middle' }); - jQuery(text2).text(node_name); + jQuery(text2).text(node_type); var text3 = document.createElementNS('http://www.w3.org/2000/svg', 'text'); var text3_main = jQuery(text3).attr({ id: node_list[0] + '_text', @@ -724,7 +739,7 @@ getIntentInfos(); jQuery(g).append(text5_main); jQuery(g).attr("id", node_name); jQuery(g).attr("type", node_type); - jQuery(g).attr("sub", node_list[0] + "," + node_list[1] + "," + node_list[2]); + jQuery(g).attr("sub", node_name,node_list[0] + "," + node_list[1] + "," + node_list[2]); if (node_type.indexOf("chain") > -1) jQuery(g).attr("flow", 0); jQuery('#service_svg2').append(g); @@ -804,7 +819,16 @@ getIntentInfos(); sub_list[sub_count] = host_list[user_json_data["node"][lgroup_cursor]["sub-node"][sub_cursor]["node-id"]]; sub_count++; } - draw_group_data(user_json_data["node"][lgroup_cursor]["node-name"], sub_list.length, sub_list, user_json_data["node"][lgroup_cursor]["node-type"], ""); + var ip=''; + var myProperty=user_json_data["node"][lgroup_cursor]['property']; + if(myProperty){ + for(var item in myProperty){ + if(myProperty[item]['property-name']=='ip-prefix'){ + ip=myProperty[item]['property-values']['string-value'][0]['value']; + } + } + } + draw_group_data(user_json_data["node"][lgroup_cursor]["node-name"], sub_list.length, sub_list, user_json_data["node"][lgroup_cursor]["node-type"], ip); redraw_node_possition_data(); node_list[user_json_data["node"][lgroup_cursor]["node-id"]] = user_json_data["node"][lgroup_cursor]["node-name"]; } @@ -846,7 +870,7 @@ getIntentInfos(); for (var conn_cursor in user_json_data["connection"]) { var start_name = node_list[user_json_data["connection"][conn_cursor]["end-node"][0]["node-id"]]; var end_name = node_list[user_json_data["connection"][conn_cursor]["end-node"][1]["node-id"]]; - var bandwidth + var bandwidth; if (user_json_data["connection"][conn_cursor]["property"] != null) bandwidth = user_json_data["connection"][conn_cursor]["property"][0]["property-values"]["int-value"][0]["value"]; else @@ -875,6 +899,8 @@ getIntentInfos(); //operation if (user_data["operations"] != null) { for (var operation_cursor in user_data["operations"]["operation"]) { + var myTarget=user_data["operations"]["operation"][operation_cursor]["action"][0]['action-name']; + if(myTarget!='go-through') continue; var flow_name = flow_list[user_data["operations"]["operation"][operation_cursor]["target-object"]]; var chain_name = node_list[user_data["operations"]["operation"][operation_cursor]["action"][0]["parameter-values"]["string-value"][0]["value"]]; var node_start = jQuery("#" + flow_name).attr("node_start"); @@ -908,9 +934,6 @@ getIntentInfos(); lead_policy(node_start, chain_name, parseInt(jQuery("#" + flow_name).attr("count")), jQuery("#" + flow_name).attr("stroke"), flow_name + "_1", chain_name, node_start, node_end) lead_policy(chain_name, node_end, parseInt(jQuery("#" + flow_name).attr("count")), jQuery("#" + flow_name).attr("stroke"), flow_name + "_2", chain_name, node_start, node_end) jQuery("#" + flow_name).remove(); - - - } } @@ -1030,7 +1053,10 @@ getIntentInfos(); if (match && match.length > 0) { nemo_str += " Match "; for (var k in match) { + if(match[k]["match-item-value"]['string-value']) nemo_str += match[k]['match-item-name'] + ':"' + match[k]["match-item-value"]['string-value'] + '",'; + else if(match[k]["match-item-value"]['int-value']) + nemo_str += match[k]['match-item-name'] + ':' + match[k]["match-item-value"]['int-value'] + ','; } nemo_str = nemo_str.substring(0, nemo_str.length - 1); } @@ -1057,7 +1083,10 @@ getIntentInfos(); if (action && action.length > 0) { nemo_str += " Action " for (var k in action) { + if(action[k]['action-name']=='go-through') nemo_str += action[k]['action-name'] + ":" + nodes[action[k]['parameter-values']["string-value"][0]['value']] + ','; + if(action[k]['action-name']=='deny') + nemo_str+= action[k]['action-name']+','; } nemo_str = nemo_str.substring(0, nemo_str.length - 1); } diff --git a/nemo-ui/src/main/resources/nemo/js/jquery.cookie.js b/nemo-ui/src/main/resources/nemo/js/jquery.cookie.js new file mode 100644 index 0000000..8218817 --- /dev/null +++ b/nemo-ui/src/main/resources/nemo/js/jquery.cookie.js @@ -0,0 +1,114 @@ +/*! + * jQuery Cookie Plugin v1.4.1 + * https://github.com/carhartl/jquery-cookie + * + * Copyright 2006, 2014 Klaus Hartl + * Released under the MIT license + */ +(function (factory) { + if (typeof define === 'function' && define.amd) { + // AMD (Register as an anonymous module) + define(['jquery'], factory); + } else if (typeof exports === 'object') { + // Node/CommonJS + module.exports = factory(require('jquery')); + } else { + // Browser globals + factory(jQuery); + } +}(function ($) { + + var pluses = /\+/g; + + function encode(s) { + return config.raw ? s : encodeURIComponent(s); + } + + function decode(s) { + return config.raw ? s : decodeURIComponent(s); + } + + function stringifyCookieValue(value) { + return encode(config.json ? JSON.stringify(value) : String(value)); + } + + function parseCookieValue(s) { + if (s.indexOf('"') === 0) { + // This is a quoted cookie as according to RFC2068, unescape... + s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\'); + } + + try { + // Replace server-side written pluses with spaces. + // If we can't decode the cookie, ignore it, it's unusable. + // If we can't parse the cookie, ignore it, it's unusable. + s = decodeURIComponent(s.replace(pluses, ' ')); + return config.json ? JSON.parse(s) : s; + } catch(e) {} + } + + function read(s, converter) { + var value = config.raw ? s : parseCookieValue(s); + return $.isFunction(converter) ? converter(value) : value; + } + + var config = $.cookie = function (key, value, options) { + + // Write + + if (arguments.length > 1 && !$.isFunction(value)) { + options = $.extend({}, config.defaults, options); + + if (typeof options.expires === 'number') { + var days = options.expires, t = options.expires = new Date(); + t.setMilliseconds(t.getMilliseconds() + days * 864e+5); + } + + return (document.cookie = [ + encode(key), '=', stringifyCookieValue(value), + options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE + options.path ? '; path=' + options.path : '', + options.domain ? '; domain=' + options.domain : '', + options.secure ? '; secure' : '' + ].join('')); + } + + // Read + + var result = key ? undefined : {}, + // To prevent the for loop in the first place assign an empty array + // in case there are no cookies at all. Also prevents odd result when + // calling $.cookie(). + cookies = document.cookie ? document.cookie.split('; ') : [], + i = 0, + l = cookies.length; + + for (; i < l; i++) { + var parts = cookies[i].split('='), + name = decode(parts.shift()), + cookie = parts.join('='); + + if (key === name) { + // If second argument (value) is a function it's a converter... + result = read(cookie, value); + break; + } + + // Prevent storing a cookie that we couldn't decode. + if (!key && (cookie = read(cookie)) !== undefined) { + result[name] = cookie; + } + } + + return result; + }; + + config.defaults = {}; + + $.removeCookie = function (key, options) { + // Must not alter options, thus extending a fresh object... + $.cookie(key, '', $.extend({}, options, { expires: -1 })); + return !$.cookie(key); + }; + +})); diff --git a/nemo-ui/src/main/resources/nemo/js/phyNetwork.js b/nemo-ui/src/main/resources/nemo/js/phyNetwork.js index d2961f0..da12a7b 100644 --- a/nemo-ui/src/main/resources/nemo/js/phyNetwork.js +++ b/nemo-ui/src/main/resources/nemo/js/phyNetwork.js @@ -54,6 +54,174 @@ if(!physicalData) return; if(!physicalData) return; } getPhysicalData(); + +function createPhysicalTopo(Data){ + nodes_phy.clear(); + edges_phy.clear(); + if(!Data) Data=physicalData; + if(!Data) return; + var physicalHost=Data['physical-network']['physical-hosts']; + var physicalNode=Data['physical-network']['physical-nodes']['physical-node']; + var physicalLink=Data['physical-network']['physical-links']; + var myHost=[];//host_id----->[vis_node_id,connected node_id,host_name] + var myHostPort=[];//host_id----->host_port_id + var myNode=[];//node_id----->[vis_node_id,node_type] + var externalNode=[];//external_port_id----->[vis_node_id,node_id] + var myLink=[];//null + if(physicalHost){ + physicalHost=physicalHost['physical-host']; + for(var i in physicalHost){ + myHost[physicalHost[i]['host-id']]=[+i+1,physicalHost[i]['node-id'],physicalHost[i]['host-name']]; + myHostPort[physicalHost[i]['host-id']]=physicalHost[i]['port-id']; + nodes_phy.add({ + id: +i+1, + label: physicalHost[i]["host-name"], + image: "src/app/nemo/images/phyHost.png", + shape: 'image', + fontSize: 15 + }); + } + } + console.log(myHost); + if(physicalNode){ + var nodeslen=nodes_phy.get().length; + for(var i in physicalNode){ + myNode[physicalNode[i]['node-id']]=[nodeslen+1,physicalNode[i]['node-type'],'']; + nodes_phy.add({ + id: ++nodeslen, + label: physicalNode[i]["node-type"]+physicalNode[i]["node-id"].split(":")[1], + group: physicalNode[i]["node-type"], + }); + var physicalPort=physicalNode[i]['physical-port']; + if(physicalPort){ + for(var item in physicalPort){ + if(physicalPort[item]['port-type']=='external') + { + var flag=true; + for(var hostPort in myHostPort){ + if(physicalPort[item]['port-id']==myHostPort[hostPort]) + flag=false; + } + if(flag) + externalNode[physicalPort[item]['port-id']]=[physicalNode[i]['node-id']]; + } + } + } + } + } + console.log(myNode); + console.log(externalNode); + + var externalnodecount=0; + for(var x in externalNode){externalnodecount++;} + if(externalnodecount>0){ + var nodeslen=nodes_phy.get().length; + for(var i in externalNode){ + externalNode[i]=[nodeslen+1,externalNode[i][0]]; + nodes_phy.add({ + id: ++nodeslen, + label: '', + image: "src/app/nemo/images/ext-group.png", + shape: 'image', + }); + } + console.log(externalNode); + var edgeslen=edges_phy.get().length; + for(var i in externalNode){ + edges_phy.add({ + id: ++edgeslen, + from:externalNode[i][0], + to:myNode[externalNode[i][1]][0], + length:150, + width: 1 + }); + } + } + if(physicalLink){ + physicalLink=physicalLink['physical-link']; + var edgeslen=edges_phy.get().length; + for(var i in physicalLink){ + // myLink[] + edges_phy.add({ + id:++edgeslen, + from:myNode[physicalLink[i]['src-node-id']][0], + to:myNode[physicalLink[i]['dest-node-id']][0], + length:150, + width: 2 + }); + } + } + + var hostcount=0; + for(var x in physicalHost){hostcount++;} + if(hostcount>0){ + var edgeslen=edges_phy.get().length; + console.log(edgeslen); + for(var i in myHost){ + // myLink[] + edges_phy.add({ + id:++edgeslen, + from:myHost[i][0], + to:myNode[myHost[i][1]][0], + length:150, + width: 1 + }); + } + } + +var data = { + nodes: nodes_phy, + edges: edges_phy + }; + +var options_phy = { + /* physics: { + repulsion: { + centralGravity: 0, + springLength: 200,//弹簧长度 + springConstant: 0,//弹簧常数 + nodeDistance: 0, + damping: 0 //阻尼，减幅，衰减 + }}, */ + smoothCurves: false, + stabilize: false, + nodes: { + // default for all nodes + shape: 'dot', + fontSize:16, + radius:23, + fixed:true + }, + edges:{ + // length:200, + width: 1 + }, + groups:{ + switch:{ + color: { + border: 'black', + background: '#B0E2FF', + } + }, + + router:{ + color: { + border: 'black', + background: '#7FFF00', + } + + } + } + + }; + console.log(jQuery('#phy_graph').width()); + jQuery('#phy_graph').width(800).height(500); + console.log(jQuery('#phy_graph').width()); + var container = document.getElementById('phy_graph'); + if(!container) return; + var graph = new vis.Graph(container, data, options_phy); +} + function analy_topo(topo_data) { phy_hosts = []; diff --git a/nemo-ui/src/main/resources/nemo/js/svg.xml b/nemo-ui/src/main/resources/nemo/js/svg.xml new file mode 100644 index 0000000..b005ac8 --- /dev/null +++ b/nemo-ui/src/main/resources/nemo/js/svg.xml @@ -0,0 +1,35 @@ + + + + + + + text + + + + + + l2-group + dmz1_n2 + vm2 + server1 + + + + + chain-group + dmz1_n1 + dmz1_fw1 + + + + ext-group + interior + + + + ext-group + internet + + \ No newline at end of file diff --git a/nemo-ui/src/main/resources/nemo/js/vnMapping.js b/nemo-ui/src/main/resources/nemo/js/vnMapping.js index 059e549..fb20300 100644 --- a/nemo-ui/src/main/resources/nemo/js/vnMapping.js +++ b/nemo-ui/src/main/resources/nemo/js/vnMapping.js @@ -106,7 +106,9 @@ var createMappingTables = { } console.log(virtualnodes); jQuery("#" + id).find('tr:gt(1)').empty(); - if (!virtual_nodes) return; + var count=0; + for(var x in virtual_nodes){count++;} + if(count==0) return; for (var i in virtualnodes) { var $tr = '' + virtual_nodes[i][1] + '' + virtualnodes[i] + '' jQuery("#" + id).append($tr); @@ -132,6 +134,9 @@ var createMappingTables = { var paths = createMappingTables.getPaths(virtuallinks, vn_pnData, physicalData, PathId); //physical-path-id----->[Physical Nodes passed by Path](count=0,1,2,3...) console.log(PathId); console.log(paths); + var count=0; + for(var x in virtual_nodes){count++;} + if(count==0) return; for (var i in virtuallinks) { var $tr = '' + virtual_nodes[virtuallinks[i][0]][1] + '-' + virtual_nodes[virtuallinks[i][1]][1] + '' + virtual_nodes[virtuallinks[i][0]][1] + '' + virtual_nodes[virtuallinks[i][1]][1] + '' + PathId[i] + '' var pathsNode = '' diff --git a/nemo-ui/src/main/resources/nemo/module/test/bod_userJson.js b/nemo-ui/src/main/resources/nemo/module/test/bod_userJson.js index a97bf5b..294b000 100644 --- a/nemo-ui/src/main/resources/nemo/module/test/bod_userJson.js +++ b/nemo-ui/src/main/resources/nemo/module/test/bod_userJson.js @@ -297,6 +297,811 @@ var userinfo ={ } } //console.log(userinfo); +userinfo={ + "users": { + "user": [ + { + "user-id": "14ce424a-3e50-4a2a-ad5c-b29845158c8b", + "user-role": "tenant", + "user-password": "abc", + "user-name": "user2", + "objects": { + "node": [ + { + "node-id": "22282cca-9a13-4d0c-a67e-a933ebb0b0ae", + "node-name": "server1", + "node-type": "host" + }, + { + "node-id": "9d6f5343-f38e-4101-ab60-309e6322ace3", + "property": [ + { + "property-name": "location", + "property-values": { + "string-value": [ + { + "value": "openflow:1:1", + "order": 0 + } + ] + } + }, + { + "property-name": "operating-mode", + "property-values": { + "string-value": [ + { + "value": "layer3", + "order": 0 + } + ] + } + } + ], + "node-type": "fw", + "node-name": "dmz1_fw1" + }, + { + "node-id": "ae83ca1d-43ef-4d02-a48b-6c250bb084bd", + "property": [ + { + "property-name": "ip-prefix", + "property-values": { + "string-value": [ + { + "value": "192.168.13.0/24", + "order": 0 + } + ] + } + }, + { + "property-name": "ac-info-network", + "property-values": { + "string-value": [ + { + "value": "layer3", + "order": 0 + } + ] + } + }, + { + "property-name": "ac-info-protocol", + "property-values": { + "string-value": [ + { + "value": "static", + "order": 0 + } + ] + } + }, + { + "property-name": "location", + "property-values": { + "string-value": [ + { + "value": "openflow:4:2", + "order": 0 + } + ] + } + } + ], + "node-type": "ext-group", + "node-name": "interior" + }, + { + "node-id": "7dc2233e-f8a2-416c-902a-95cff42b398a", + "property": [ + { + "property-name": "location", + "property-values": { + "string-value": [ + { + "value": "openflow:3", + "order": 0 + } + ] + } + }, + { + "property-name": "ip-prefix", + "property-values": { + "string-value": [ + { + "value": "192.168.12.0/24", + "order": 0 + } + ] + } + }, + { + "property-name": "gateway-ip", + "property-values": { + "string-value": [ + { + "value": "192.168.12.1", + "order": 0 + } + ] + } + } + ], + "node-type": "l2-group", + "node-name": "dmz1_n2", + "sub-node": [ + { + "node-id": "6c787caa-156a-49ed-8546-547bdccf283c", + "order": 0 + }, + { + "node-id": "22282cca-9a13-4d0c-a67e-a933ebb0b0ae", + "order": 1 + } + ] + }, + { + "node-id": "c3afb4f5-ffb4-4413-bad9-020babc67ed8", + "property": [ + { + "property-name": "ip-prefix", + "property-values": { + "string-value": [ + { + "value": "172.168.1.0/24", + "order": 0 + } + ] + } + }, + { + "property-name": "ac-info-network", + "property-values": { + "string-value": [ + { + "value": "layer3", + "order": 0 + } + ] + } + }, + { + "property-name": "ac-info-protocol", + "property-values": { + "string-value": [ + { + "value": "static", + "order": 0 + } + ] + } + }, + { + "property-name": "location", + "property-values": { + "string-value": [ + { + "value": "openflow:3:4", + "order": 0 + } + ] + } + } + ], + "node-type": "ext-group", + "node-name": "internet" + }, + { + "node-id": "6c787caa-156a-49ed-8546-547bdccf283c", + "node-name": "vm2", + "node-type": "host" + }, + { + "node-id": "0dc22c0a-8ff0-448f-afc3-86fa22976242", + "node-type": "chain-group", + "node-name": "dmz1_n1", + "sub-node": [ + { + "node-id": "9d6f5343-f38e-4101-ab60-309e6322ace3", + "order": 0 + } + ] + } + ], + "connection": [ + { + "connection-id": "94709024-6675-4a9a-b098-07e14d18633f", + "end-node": [ + { + "node-id": "c3afb4f5-ffb4-4413-bad9-020babc67ed8", + "order": 0 + }, + { + "node-id": "0dc22c0a-8ff0-448f-afc3-86fa22976242", + "order": 0 + } + ], + "connection-type": "p2p", + "connection-name": "c1" + }, + { + "connection-id": "a88b037d-0aa0-4a50-8076-225449c8f036", + "end-node": [ + { + "node-id": "0dc22c0a-8ff0-448f-afc3-86fa22976242", + "order": 0 + }, + { + "node-id": "7dc2233e-f8a2-416c-902a-95cff42b398a", + "order": 1 + } + ], + "connection-type": "p2p", + "connection-name": "dmz1_c1" + }, + { + "connection-id": "06c60ef9-f16d-4368-9697-aa6b1cf1340a", + "end-node": [ + { + "node-id": "ae83ca1d-43ef-4d02-a48b-6c250bb084bd", + "order": 0 + }, + { + "node-id": "7dc2233e-f8a2-416c-902a-95cff42b398a", + "order": 0 + } + ], + "connection-type": "p2p", + "connection-name": "c2" + } + ], + "flow": [ + { + "flow-id": "613648ce-1059-4d06-b25a-0d54193c6586", + "match-item": [ + { + "match-item-name": "dst-port", + "match-item-value": { + "int-value": 80 + } + }, + { + "match-item-name": "dst-ip", + "match-item-value": { + "string-value": "192.168.12.0/24" + } + }, + { + "match-item-name": "src-ip", + "match-item-value": { + "string-value": "172.168.1.0/24" + } + } + ], + "flow-name": "dmz1_f1" + } + ] + }, + "operations": { + "operation": [ + { + "operation-id": "315b1a21-f5b3-4298-868f-6b08729d2622", + "priority": 0, + "action": [ + { + "action-name": "deny", + "order": 0 + } + ], + "target-object": "613648ce-1059-4d06-b25a-0d54193c6586", + "operation-name": "dmz1.o1" + } + ] + }, + "template-instances": { + "template-instance": [ + { + "template-instance-id": "e630091d-f336-4a3a-a699-fe3a4fe7c6e2", + "template-parameter": [ + { + "parameter-name": "subnodes-n2", + "parameter-values": { + "string-value": [ + { + "value": "vm2", + "order": 0 + }, + { + "value": "server1", + "order": 1 + } + ] + } + }, + { + "parameter-name": "location-fw", + "parameter-values": { + "string-value": [ + { + "value": "openflow:1:1", + "order": 0 + } + ] + } + }, + { + "parameter-name": "ipprefix", + "parameter-values": { + "string-value": [ + { + "value": "192.168.12.0/24", + "order": 0 + } + ] + } + }, + { + "parameter-name": "location-n2", + "parameter-values": { + "string-value": [ + { + "value": "openflow:3", + "order": 0 + } + ] + } + }, + { + "parameter-name": "gatewayip", + "parameter-values": { + "string-value": [ + { + "value": "192.168.12.1", + "order": 0 + } + ] + } + }, + { + "parameter-name": "srcip", + "parameter-values": { + "string-value": [ + { + "value": "172.168.1.0/24", + "order": 0 + } + ] + } + } + ], + "template-name": "dmz", + "template-instance-name": "dmz1" + } + ] + } + }, + { + "user-id": "af4fc2be-e3f4-4388-a8ef-3aabae872f2b", + "user-role": "admin", + "user-password": "abcd", + "user-name": "admin", + "template-definitions": { + "template-definition": [ + { + "template-name": "dmz", + "abstract-intents": { + "abstract-objects": { + "abstract-connection": [ + { + "connection-id": "86f56efc-db49-4d7c-853c-6e7db169f56c", + "end-node": [ + { + "node-id": "fc096b0b-95cb-4f12-af28-b700a1228191", + "order": 0 + }, + { + "node-id": "9cfda02c-ba8b-41c2-9b36-b7144390fcc3", + "order": 1 + } + ], + "connection-type": "p2p", + "connection-name": "c1" + } + ], + "abstract-node": [ + { + "node-id": "f011ae1d-bb3e-42e0-9fa1-f6fa3641f02d", + "property": [ + { + "property-name": "location", + "property-values": { + "string-value": [ + { + "value": "location-fw", + "order": 0 + } + ] + } + }, + { + "property-name": "operating-mode", + "property-values": { + "string-value": [ + { + "value": "layer3", + "order": 0 + } + ] + } + } + ], + "node-type": "fw", + "node-name": "fw1" + }, + { + "node-id": "9cfda02c-ba8b-41c2-9b36-b7144390fcc3", + "property": [ + { + "property-name": "ip-prefix", + "property-values": { + "string-value": [ + { + "value": "ipprefix", + "order": 0 + } + ] + } + }, + { + "property-name": "gateway-ip", + "property-values": { + "string-value": [ + { + "value": "gatewayip", + "order": 0 + } + ] + } + }, + { + "property-name": "location", + "property-values": { + "string-value": [ + { + "value": "location-n2", + "order": 0 + } + ] + } + }, + { + "property-name": "sub-nodes", + "property-values": { + "string-value": [ + { + "value": "subnodes-n2", + "order": 0 + } + ] + } + } + ], + "node-type": "l2-group", + "node-name": "n2" + }, + { + "node-id": "fc096b0b-95cb-4f12-af28-b700a1228191", + "node-type": "chain-group", + "node-name": "n1", + "sub-node": [ + { + "node-id": "f011ae1d-bb3e-42e0-9fa1-f6fa3641f02d", + "order": 0 + } + ] + } + ], + "abstract-flow": [ + { + "flow-id": "815c0bee-b04e-4c56-9bb8-b743d72ba66f", + "match-item": [ + { + "match-item-name": "dst-port", + "match-item-value": { + "int-value": 80 + } + }, + { + "match-item-name": "dst-ip", + "match-item-value": { + "string-value": "ipprefix" + } + }, + { + "match-item-name": "src-ip", + "match-item-value": { + "string-value": "srcip" + } + } + ], + "flow-name": "f1" + } + ] + }, + "abstract-operations": { + "abstract-operation": [ + { + "operation-id": "769c52f5-1c75-4c21-b270-15fa259de39b", + "priority": 0, + "action": [ + { + "action-name": "deny", + "order": 0 + } + ], + "target-object": "815c0bee-b04e-4c56-9bb8-b743d72ba66f", + "operation-name": "o1" + } + ] + } + }, + "template-parameter": [ + { + "parameter-name": "subnodes-n2", + "parameter-value-type": "string" + }, + { + "parameter-name": "location-fw", + "parameter-value-type": "string" + }, + { + "parameter-name": "ipprefix", + "parameter-value-type": "string" + }, + { + "parameter-name": "location-n2", + "parameter-value-type": "string" + }, + { + "parameter-name": "gatewayip", + "parameter-value-type": "string" + }, + { + "parameter-name": "srcip", + "parameter-value-type": "string" + } + ] + } + ] + } + } + ] + } + } +var physicalJson2={ + "physical-network": { + "physical-hosts": { + "physical-host": [ + { + "host-id": "22282cca-9a13-4d0c-a67e-a933ebb0b0ae", + "node-id": "openflow:2", + "host-name": "video-server2", + "mac-address": "08:00:27:a0:a9:b3", + "port-id": "openflow:2:2", + "ip-addresses": { + "ip-address": [ + "192.168.12.4" + ] + } + }, + { + "host-id": "7b796915-adf4-4356-b5ca-de005ac410c1", + "node-id": "openflow:1", + "host-name": "video-server1", + "mac-address": "00:00:00:00:00:03", + "port-id": "openflow:1:1", + "ip-addresses": { + "ip-address": [ + "192.168.11.2" + ] + } + }, + { + "host-id": "6c787caa-156a-49ed-8546-547bdccf283c", + "node-id": "openflow:2", + "host-name": "vm2", + "mac-address": "00:00:00:00:00:02", + "port-id": "openflow:2:1", + "ip-addresses": { + "ip-address": [ + "192.168.12.3" + ] + } + }, + { + "host-id": "1eaf9a67-a171-42a8-9282-71cf702f61dd", + "node-id": "openflow:1", + "host-name": "vm1", + "mac-address": "00:00:00:00:00:01", + "port-id": "openflow:1:2", + "ip-addresses": { + "ip-address": [ + "192.168.12.2" + ] + } + } + ] + }, + "physical-nodes": { + "physical-node": [ + { + "node-id": "openflow:3", + "attribute": [ + { + "attribute-name": "location", + "attribute-value": { + "string-value": "openflow:3" + } + } + ], + "node-type": "router" + }, + { + "node-id": "openflow:4", + "attribute": [ + { + "attribute-name": "location", + "attribute-value": { + "string-value": "openflow:4" + } + } + ], + "node-type": "router" + }, + { + "node-id": "openflow:1", + "attribute": [ + { + "attribute-name": "location", + "attribute-value": { + "string-value": "openflow:1" + } + } + ], + "node-type": "switch", + "physical-port": [ + { + "port-id": "openflow:1:1", + "attribute": [ + { + "attribute-name": "location", + "attribute-value": { + "string-value": "openflow:1:1" + } + } + ], + "port-type": "external", + "mac-address": "56:21:6B:B3:3E:1A", + "bandwidth": 10240 + }, + { + "port-id": "openflow:1:2", + "attribute": [ + { + "attribute-name": "location", + "attribute-value": { + "string-value": "openflow:1:2" + } + } + ], + "port-type": "external", + "mac-address": "FE:2C:6E:85:F0:E1", + "bandwidth": 10240 + }, + { + "port-id": "openflow:1:3", + "attribute": [ + { + "attribute-name": "location", + "attribute-value": { + "string-value": "openflow:1:3" + } + } + ], + "port-type": "internal", + "mac-address": "B2:78:02:9F:FA:2C", + "bandwidth": 10240 + } + ] + }, + { + "node-id": "openflow:2", + "attribute": [ + { + "attribute-name": "location", + "attribute-value": { + "string-value": "openflow:2" + } + } + ], + "node-type": "switch", + "physical-port": [ + { + "port-id": "openflow:2:3", + "attribute": [ + { + "attribute-name": "location", + "attribute-value": { + "string-value": "openflow:2:3" + } + } + ], + "port-type": "internal", + "mac-address": "52:B8:9B:40:CF:43", + "bandwidth": 10240 + }, + { + "port-id": "openflow:2:2", + "attribute": [ + { + "attribute-name": "location", + "attribute-value": { + "string-value": "openflow:2:2" + } + } + ], + "port-type": "external", + "mac-address": "00:0C:29:98:7E:13", + "bandwidth": 10240 + }, + { + "port-id": "openflow:2:1", + "attribute": [ + { + "attribute-name": "location", + "attribute-value": { + "string-value": "openflow:2:1" + } + } + ], + "port-type": "external", + "mac-address": "52:A7:95:B0:0F:FE", + "bandwidth": 10240 + } + ] + } + ] + }, + "physical-links": { + "physical-link": [ + { + "link-id": "openflow:3:3", + "loss-rate": 1, + "delay": 1, + "src-port-id": "openflow:3:3", + "dest-node-id": "openflow:4", + "metric": 1, + "dest-port-id": "openflow:4:1", + "bandwidth": 10240, + "src-node-id": "openflow:3" + }, + { + "link-id": "openflow:1:3", + "loss-rate": 1, + "delay": 1, + "src-port-id": "openflow:1:3", + "dest-node-id": "openflow:3", + "metric": 1, + "dest-port-id": "openflow:3:1", + "bandwidth": 10240, + "src-node-id": "openflow:1" + } + ] + } + } +} var physicalJson={ "physical-network": { "physical-hosts": { diff --git a/nemo-ui/src/main/resources/nemo/nemo.tpl.html b/nemo-ui/src/main/resources/nemo/nemo.tpl.html index 289ae24..40350c2 100644 --- a/nemo-ui/src/main/resources/nemo/nemo.tpl.html +++ b/nemo-ui/src/main/resources/nemo/nemo.tpl.html @@ -9,11 +9,11 @@ - + - + - + @@ -57,10 +57,11 @@ $(".tabs ul li[aria-controls='PhyNet']").click(function(){ + createPhysicalTopo(); analy_topo(physicalData); - create_physical_topo(); - creataPhysicalTables.createPhyicalNodeTable('phyNodeTab',null) - creataPhysicalTables.createPhyicalLinkTable('phyLinkTab',null) + // create_physical_topo(); + creataPhysicalTables.createPhyicalNodeTable('phyNodeTab',null) + creataPhysicalTables.createPhyicalLinkTable('phyLinkTab',null) }); $(".tabs ul li[aria-controls='PhyNet']").click(); @@ -157,12 +158,20 @@ }); + $('#logout').click(function(){ + // alert(1); + setCookie('nemo_userpwd','',-1); + $("#pageContent").empty(); + $("#pageContent").load('src/app/nemo/register.html'); + // alert(2); + }); + });
-

Hello Admin!

+

Hello Admin!

Logout

Tenant: