width:923px !important;\r
line-height: 10px;\r
}\r
-#physicalTables{\r
-\r
+#mappingTable{\r
+ width: 850px;\r
+ margin: 0px auto;\r
}\r
.group table{\r
border-collapse:collapse;\r
- margin: 10px auto;\r
+ /*margin: 10px auto;*/\r
border-spacing:0;\r
/* border-left:1px solid #888;\r
border-top:1px solid #888;*/\r
background:#efefef;\r
- width: 100%;\r
- margin-bottom: 20px;\r
+ /*width: 100%;*/\r
+ width: 820px;\r
+ margin-bottom: 2px;\r
+ table-layout: fixed;\r
}\r
.group caption{\r
font-size: 18px;\r
}\r
.group table th{\r
border:1px solid black; \r
+ padding:2px 0px;\r
font-weight: bold;\r
background-color: #ccc;\r
- \r
}\r
.group table th,.group table td{\r
- padding:2px 5px;\r
text-align: center;\r
+ font-size: 15px;\r
+}\r
+table#virNodeTab,table#virLinkTab{\r
+ table-layout: fixed;\r
+}\r
+table#virNodeTab td,table#virLinkTab td{\r
+ white-space: nowrap;\r
+ overflow: hidden;\r
+ text-overflow:ellipsis;\r
+}\r
+table.tableHead{\r
+ margin-bottom: 5px !important;\r
+}\r
+div.tableBodyContainer{\r
+ height: 200px;\r
+ width: 835px;\r
+ overflow: auto;\r
+ margin-bottom: 20px;\r
+}\r
+div.nodetableBodyContainer{\r
+ height: 150px;\r
+ overflow: auto;\r
+ margin-bottom: 20px;\r
}\r
\r
div#pageContent {\r
- height: 1020px;\r
+ /*height: 1020px;*/\r
}\r
\r
body {\r
body{\r
/*width:1200px;*/\r
height: 1000px;\r
- background-color: rgb(57,57,57);\r
+ /*background-color: rgb(65, 64, 66);*/\r
color: black;\r
font-size: 18px;\r
}\r
/*background:-moz-linear-gradient(left,#eee, #aaa);*/\r
/*background:-webkit-gradient(linear, 20% 0%, 100% 0%, color-stop(0.3,#aaa),color-stop(0.5,#bbb),color-stop(1,#444444));*/\r
}\r
+.header p{\r
+ float: left;\r
+}\r
+.header span{\r
+ color:#000 !important;\r
+ text-shadow:0 0 0 #fff;\r
+ text-decoration: underline;\r
+ /*text-decoration-color:green;*/\r
+ /*border-bottom:1px solid green;*/\r
+ font-weight: normal;\r
+ font-size: 18px;\r
+ line-height: 30px;\r
+ display: inline-block;\r
+ margin-left: 20px;\r
+ cursor: pointer;\r
+ font-family:'cursive','-webkit-pictograp',sans-serif,Verdana;\r
+}\r
.group{\r
width:1000px;\r
- height: 700px;\r
+ /*height: 700px;*/\r
margin: 0px auto;\r
background: #ccc;\r
/*border: 2px solid yellow;*/\r
/*margin-left: 5px;*/\r
}\r
#nemo_str_show span.keyWords{\r
- color:red;\r
+ color:deeppink;\r
}\r
\r
/*jquery ui tab css start*/\r
}\r
.ui-widget-header {\r
border: 1px solid #ccc;\r
- background: #ccc url("../images/ui-bg_gloss-wave_35_f6a828_500x100.png") 50% 50% repeat-x;\r
+ background: #aaa url("../images/ui-bg_gloss-wave_35_f6a828_500x100.png") 50% 50% repeat-x;\r
+ background:#aaa;\r
color: #fff;\r
font-weight: bold;\r
}\r
}\r
/*jquery ui tab css end*/\r
div#pageContent {\r
- height: 1000px;\r
+ /*height: 1000px;*/\r
}
\ No newline at end of file
if(!Datas){\r
Datas=userinfo;\r
}\r
- // IntentInfos=Datas;\r
+ IntentInfos=Datas;\r
//return virtualDatas;\r
}\r
\r
}\r
\r
function getIntentInfoByName(user_name,Data){\r
- //console.log(1);\r
+ console.log(Data);\r
if(typeof(Data)=='string'){\r
var user_json = JSON.parse(Data);\r
}\r
\r
\r
//get Radio\r
- var cir_r = parseInt(jQuery("#" + src_group + " circle:eq(0)").attr("r"));\r
+ var cir_r = parseInt(jQuery("[id='" + src_group + "'] circle:eq(0)").attr("r"));\r
\r
\r
//get circle cx cy\r
- src_cx = parseInt(jQuery("#" + src_group + " circle:eq(0)").attr("cx"));\r
- src_cy = parseInt(jQuery("#" + src_group + " circle:eq(0)").attr("cy"));\r
- dest_cx = parseInt(jQuery("#" + dest_group + " circle:eq(0)").attr("cx"));\r
- dest_cy = parseInt(jQuery("#" + dest_group + " circle:eq(0)").attr("cy"));\r
+ src_cx = parseInt(jQuery("[id='" + src_group + "'] circle:eq(0)").attr("cx"));\r
+ src_cy = parseInt(jQuery("[id='" + src_group + "'] circle:eq(0)").attr("cy"));\r
+ dest_cx = parseInt(jQuery("[id='" + dest_group + "'] circle:eq(0)").attr("cx"));\r
+ dest_cy = parseInt(jQuery("[id='" + dest_group + "'] circle:eq(0)").attr("cy"));\r
console.log(src_cx + " " + src_cy + " " + dest_cx + " " + dest_cy);\r
\r
//calculate deg\r
if (conn_name != null && typeof(conn_name) != "undefined")\r
jQuery("#" + conn_name).remove();\r
try {\r
- var node_cx_1 = jQuery("#" + node_name_1 + "_group").attr("cx");\r
- var node_cy_1 = jQuery("#" + node_name_1 + "_group").attr("cy");\r
- var node_cx_2 = jQuery("#" + node_name_2 + "_group").attr("cx");\r
- var node_cy_2 = jQuery("#" + node_name_2 + "_group").attr("cy");\r
+ var node_cx_1 = jQuery("[id='" + node_name_1 + "_group']").attr("cx");\r
+ var node_cy_1 = jQuery("[id='" + node_name_1 + "_group']").attr("cy");\r
+ var node_cx_2 = jQuery("[id='" + node_name_2 + "_group']").attr("cx");\r
+ var node_cy_2 = jQuery("[id='" + node_name_2 + "_group']").attr("cy");\r
// console.log(node_cx_1);\r
// console.log(node_cy_1);\r
// console.log(node_cx_2);\r
if(myTarget!='go-through') continue;\r
var flow_name = flow_list[user_data["operations"]["operation"][operation_cursor]["target-object"]];\r
var chain_name = node_list[user_data["operations"]["operation"][operation_cursor]["action"][0]["parameter-values"]["string-value"][0]["value"]];\r
- var node_start = jQuery("#" + flow_name).attr("node_start");\r
- var node_end = jQuery("#" + flow_name).attr("node_end");\r
+ var node_start = jQuery("[id='" + flow_name+"']").attr("node_start");\r
+ var node_end = jQuery("[id='" + flow_name+"']").attr("node_end");\r
var c1_flag = 0;\r
var c2_flag = 0;\r
for (var i = 0; i < jQuery("#service_svg2 path").length; i++) {\r
physicalnodes[Mynode[i]['node-id']].push([interPort,exterPort]);
}
console.log(physicalnodes);
- jQuery("#"+id).find('tr:gt(1)').empty();
+ jQuery("#"+id).find('tr:gt(0)').empty();
for(var item in physicalnodes){
var $tr='<tr><td>'+item+'</td><td>'+physicalnodes[item][0]+'</td>'
$tr+='<td>'+physicalnodes[item][1][0]+'</td><td>'+physicalnodes[item][1][1]+'</td>'
}
console.log(physaicallinks);
- jQuery("#"+id).find('tr:gt(1)').empty();
+ jQuery("#"+id).find('tr:gt(0)').empty();
for(var item in physaicallinks){
var $tr='<tr><td>'+item+'</td><td>'+physaicallinks[item][0]+'</td>'
$tr+='<td>'+physaicallinks[item][1]+'</td><td>'+physaicallinks[item][2]+'</td>';
<text id="internet_title1" x="762.1320343559643" y="229.8679656440358" fill="black" text-anchor="middle" stroke="black" stroke-width="0.8">ext-group</text>\r
<text id="internet_title2" x="762.1320343559643" y="247.8679656440358" fill=" " text-anchor="middle">internet</text>\r
</g>\r
+</svg>\r
+\r
+<svg id="service_svg2" width="800" height="560" viewBox="100 40 900 780">\r
+ <path id="c2" node_start="interior" node_end="dmz1.n2" type="connection" d="M762.1320343559642 662.1320343559643 Lundefined undefined" stroke="black" stroke-width="1" fill="black"></path>\r
+ <path id="dmz1_c1" node_start="dmz1_n1" node_end="dmz1.n2" type="connection" d="M337.86796564403573 662.1320343559643 Lundefined undefined" stroke="black" stroke-width="1" fill="black"></path>\r
+ <path id="c1" node_start="internet" node_end="dmz1_n1" type="connection" d="M762.1320343559643 237.8679656440358 L337.86796564403573 662.1320343559643" stroke="black" stroke-width="1" fill="black"></path>\r
+ <defs>\r
+ <marker id="idArrow2" viewBox="0 0 20 20" refX="0" refY="10" markerUnits="strokeWidth" markerWidth="6" markerHeight="15" orient="auto"><path d="M 0 0 L 20 10 L0 20 z" fill="purple" stroke="black"></path> </marker> \r
+ <marker id="idtext2" viewBox="0 0 120 50" refX="0" refY="0" markerUnits="strokeWidth" markerWidth="20" markerHeight="20" orient="auto"><text style="font-family:sans-serif; font-size:14pt;" x="20" y="20">text</text></marker>\r
+ </defs>\r
+ <g id="dmz1.n2" type="l2-group" sub="dmz1.n2" ip-prefix="192.168.12.0/24">\r
+ <circle id="dmz1.n2_group" cx="337.86796564403573" cy="237.86796564403573" r="90" stroke="black" stroke-width="3" fill="white"></circle>\r
+ <rect id="vm2" x="282.86796564403573" y="212.86796564403573" width="110" height="34" stroke="black" stroke-width="1" fill="white"></rect>\r
+ <rect id="server1" x="282.86796564403573" y="255.86796564403573" width="110" height="34" stroke="black" stroke-width="1" fill="white"></rect>\r
+ <text id="dmz1.n2_title1" x="337.86796564403573" y="189.86796564403573" fill="black" text-anchor="middle" stroke="black" stroke-width="0.8">dmz1.n2</text>\r
+ <text id="dmz1.n2_title2" x="337.86796564403573" y="206.86796564403573" fill="black" text-anchor="middle">l2-group</text>\r
+ <text id="vm2_text" x="337.86796564403573" y="232.86796564403573" fill="black" text-anchor="middle">vm2</text>\r
+ <text id="server1_text" x="337.86796564403573" y="277.86796564403573" fill="black" text-anchor="middle">server1</text>\r
+ </g>\r
+ <g id="dmz1_n1" type="chain-group" sub="dmz1_n1" flow="0">\r
+ <circle id="dmz1_n1_group" cx="337.86796564403573" cy="662.1320343559643" r="90" stroke="black" stroke-width="3" fill="white"></circle>\r
+ <rect id="dmz1.fw1" x="280.86796564403573" y="637.1320343559643" width="114" height="50" stroke="black" stroke-width="1" fill="white"></rect>\r
+ <text id="dmz1_n1_title1" x="337.86796564403573" y="614.1320343559643" fill="black" text-anchor="middle" stroke="black" stroke-width="0.8">dmz1_n1</text>\r
+ <text id="dmz1_n1_title2" x="337.86796564403573" y="632.1320343559643" fill="black" text-anchor="middle">chain-group</text>\r
+ <text id="dmz1.fw1_text" x="337.86796564403573" y="662.1320343559643" fill="black" text-anchor="middle">dmz1.fw1</text>\r
+ </g>\r
+ <g id="interior" type="ext-group" sub="interior" ip-prefix="192.168.13.0/24">\r
+ <circle id="interior_group" cx="762.1320343559642" cy="662.1320343559643" r="90" stroke="black" stroke-width="3" fill="white"></circle>\r
+ <text id="interior_title1" x="762.1320343559642" y="654.1320343559643" fill="black" text-anchor="middle" stroke="black" stroke-width="0.8">interior</text>\r
+ <text id="interior_title2" x="762.1320343559642" y="672.1320343559643" fill=" " text-anchor="middle">ext-group</text>\r
+ </g>\r
+ <g id="internet" type="ext-group" sub="internet" ip-prefix="172.168.1.0/24">\r
+ <circle id="internet_group" cx="762.1320343559643" cy="237.8679656440358" r="90" stroke="black" stroke-width="3" fill="white"></circle>\r
+ <text id="internet_title1" x="762.1320343559643" y="229.8679656440358" fill="black" text-anchor="middle" stroke="black" stroke-width="0.8">internet</text>\r
+ <text id="internet_title2" x="762.1320343559643" y="247.8679656440358" fill=" " text-anchor="middle">ext-group</text>\r
+ </g>\r
</svg>
\ No newline at end of file
alert("No Virtual Data");
},
error:function(data){
- alert("Get Virtual Data Error!");
+ // alert("Get Virtual Data Error!");
+ console.log("Get Virtual Data Error!");
}
});
return virData;
// console.log(VirtualDatas);
//return virtualDatas;
}
-
+//getVirtualDatas();
function getVirtualInfoById(user_id,Data){
if(!Data) Data=VirtualDatas;
if(!Data) return;
for(var item in virtualnodes){
// if(virtualnodes[item][1]!='external-node'){}
- var $tr='<tr><td>'+virtualnodes[item].virtual_node_id+'</td><td>'+virtualnodes[item].virtual_node_name+'</td>'
+ var $tr='<tr><td title='+virtualnodes[item].virtual_node_id+'>'+virtualnodes[item].virtual_node_id+'</td><td>'+virtualnodes[item].virtual_node_name+'</td>'
$tr+='<td>'+'virtual '+virtualnodes[item].virtual_node_name.substring(1,virtualnodes[item].virtual_node_name.length-1)+'</td>'
$tr+='<td>'+virtualnodes[item].internal_port_number+'</td><td>'+virtualnodes[item].external_port_number+'</td>'
$tr+='</tr>'
console.log(virtuallinks);
jQuery("#"+id).find('tr:gt(1)').empty();
for(var item in virtuallinks){
- var $tr='<tr><td>'+item+'</td><td>'+virtual_nodes[virtuallinks[item][0]][1]+'-'+virtual_nodes[virtuallinks[item][1]][1]+'</td>'
+ var $tr='<tr><td title='+item+'>'+item+'</td><td>'+virtual_nodes[virtuallinks[item][0]][1]+'-'+virtual_nodes[virtuallinks[item][1]][1]+'</td>'
$tr+='<td>'+virtual_nodes[virtuallinks[item][0]][1]+'<td>'+virtual_nodes[virtuallinks[item][1]][1]+'</td>';
$tr+='<td>'+virtuallinks[item][3]+'kbps'+'</td><td>'+virtuallinks[item][4]+'ms'+'</td>';
$tr+='</tr>'
function getMappingDatas() {\r
var Datas = getMappingResults();\r
if (!Datas) {\r
- Datas = MappingResults;\r
+ Datas = VnMappingJson;\r
}\r
MappingResults = Datas;\r
//return virtualDatas;\r
}\r
\r
getMappingResults();\r
-\r
+//getMappingDatas();\r
function getMappingResultById(user_id, Data) {\r
if (!Data) Data = MappingResults;\r
if (!Data) return;\r
virtualnodes[Mynode[i]['node-id']] = Mynode[i]['physical-resource-requirement'][0]['attribute-value']['string-value'];\r
}\r
console.log(virtualnodes);\r
- jQuery("#" + id).find('tr:gt(1)').empty();\r
+ // jQuery("#" + id).find('tr:gt(0)').empty();\r
var count=0;\r
for(var x in virtual_nodes){count++;}\r
if(count==0) return;\r
for(var x in virtual_nodes){count++;}\r
if(count==0) return;\r
for (var i in virtuallinks) {\r
- var $tr = '<tr><td>' + virtual_nodes[virtuallinks[i][0]][1] + '-' + virtual_nodes[virtuallinks[i][1]][1] + '</td><td>' + virtual_nodes[virtuallinks[i][0]][1] + '</td><td>' + virtual_nodes[virtuallinks[i][1]][1] + '</td><td>' + PathId[i] + '</td>'\r
+ var $tr = '<tr><td>' + virtual_nodes[virtuallinks[i][0]][1] + '-' + virtual_nodes[virtuallinks[i][1]][1] + '</td><td>' + virtual_nodes[virtuallinks[i][0]][1] + '</td><td>' + virtual_nodes[virtuallinks[i][1]][1] + '</td><td title='+PathId[i]+'>' + PathId[i].substring(0,14)+'...' + '</td>'\r
var pathsNode = ''\r
for (var nodesPath in paths[PathId[i]]) {\r
pathsNode += paths[PathId[i]][nodesPath] + '-';\r
}\r
console.log(PathId);\r
var Paths = [];\r
- var sourcePaths = physicalData['physical-network']['physical-paths']['physical-path'];\r
+ var sourcePaths = physicalData['physical-network']['physical-paths'];\r
+ if(!sourcePaths) return Paths;\r
+\r
+ sourcePaths = physicalData['physical-network']['physical-paths']['physical-path'];\r
// console.log(sourcePaths);\r
for (var path in PathId) {\r
for (var sp in sourcePaths) {\r
}\r
],\r
"node-type": "fw",\r
- "node-name": "dmz1_fw1"\r
+ "node-name": "dmz1.fw1"\r
},\r
{\r
"node-id": "ae83ca1d-43ef-4d02-a48b-6c250bb084bd",\r
}\r
],\r
"node-type": "l2-group",\r
- "node-name": "dmz1_n2",\r
+ "node-name": "dmz1.n2",\r
"sub-node": [\r
{\r
"node-id": "6c787caa-156a-49ed-8546-547bdccf283c",\r
{\r
"node-id": "0dc22c0a-8ff0-448f-afc3-86fa22976242",\r
"node-type": "chain-group",\r
- "node-name": "dmz1_n1",\r
+ "node-name": "dmz1.n1",\r
"sub-node": [\r
{\r
"node-id": "9d6f5343-f38e-4101-ab60-309e6322ace3",\r
}\r
],\r
"connection-type": "p2p",\r
- "connection-name": "dmz1_c1"\r
+ "connection-name": "dmz1.c1"\r
},\r
{\r
"connection-id": "06c60ef9-f16d-4368-9697-aa6b1cf1340a",\r
}\r
}\r
],\r
- "flow-name": "dmz1_f1"\r
+ "flow-name": "dmz1.f1"\r
}\r
]\r
},\r
// SFC\r
//userId='af4fc2be-e3f4-4388-a8ef-3aabae872f2b';\r
//Bod\r
- //userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b'\r
+ //var userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b'\r
//if(userId=='0') userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b';\r
$('#service_svg2').empty();\r
$("#nemo_str_show").empty();\r
// var virtualData=getVirtualJson();\r
var userId=$("#selectUser option:selected").val();\r
jQuery('#vir_graph').empty();\r
- jQuery("#virNodeTab").find('tr:gt(1)').empty();\r
- jQuery("#virLinkTab").find('tr:gt(1)').empty();\r
+ jQuery("#virNodeTab").find('tr:gt(0)').empty();\r
+ jQuery("#virLinkTab").find('tr:gt(0)').empty();\r
// SFC\r
//userId='af4fc2be-e3f4-4388-a8ef-3aabae872f2b';\r
//Bod\r
// $(".tabs ul li[aria-controls='Mapping']").click();\r
$(".tabs ul li[aria-controls='Mapping']").click(function(){\r
var userId=$("#selectUser option:selected").val();\r
- //if(userId=='0') userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b';\r
- jQuery("#mapVirNodeTab").find('tr:gt(1)').empty();\r
- jQuery("#mapVirLinkTab").find('tr:gt(1)').empty();\r
+ userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b';\r
+ jQuery("#mapVirNodeTab").find('tr:gt(0)').empty();\r
+ jQuery("#mapVirLinkTab").find('tr:gt(0)').empty();\r
if(!physicalData||!PnMappingResults||!VirtualDatas) return;\r
var virtualData = getVirtualInfoById(userId);\r
if(!virtualData) return;\r
if(!getPnMappingResultById(userId)) return;\r
// console.log(createMappingTables);\r
+ console.log(virtualData);\r
createMappingTables.createVirtualNodeTable('mapVirNodeTab',virtualData);\r
// console.log(linkArray);\r
createMappingTables.createVirtualLinkTable('mapVirLinkTab',virtualData,getPnMappingResultById(userId),physicalData);\r
//Bod\r
//userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b'\r
\r
- //if(userId=='0') userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b';\r
- if(!intent_info) return;\r
+ if(!IntentInfos) return;\r
var user_data = getIntentInfoById(userId);\r
if(!user_data) return;\r
+ \r
analyjson_topo(user_data);\r
parseNemoLan(user_data);\r
- //set keyWords style\r
+ \r
+ //set keyWords style\r
$("#nemo_str_show p").each(function(){\r
var $res=$(this);\r
keyWords.forEach(function(item,index,array){\r
});\r
\r
$('#logout').click(function(){\r
- // alert(1);\r
setCookie('nemo_userpwd','',-1);\r
$("#pageContent").empty();\r
$("#pageContent").load('src/app/nemo/register.html');\r
- // alert(2);\r
});\r
\r
});\r
<div id='PhyNet'>\r
<div id="phy_graph"></div>\r
<div id='physicalTables'>\r
- <table id="phyNodeTab" border='1'>\r
- <caption>Physical Node</caption>\r
- <tr>\r
+ <table class='tableHead'>\r
+ <caption>Physical Node</caption>\r
+ <colgroup>\r
+ <col style="width: 25%;"/>\r
+ <col style="width: 25%;" />\r
+ <col style="width: 25%;"/>\r
+ <col style="width: 25%;" />\r
+ </colgroup>\r
+ <tr>\r
<th>Physical Node ID</th><th>Physical Node Type</th>\r
<th>Internal Physical Port Number</th><th>External Physical Port Number</th>\r
</tr>\r
- </table>\r
+ </table>\r
\r
- <table id="phyLinkTab" border='1'>\r
- <caption>Physical Link</caption>\r
- <tr>\r
+ <div class='tableBodyContainer'>\r
+ <table id="phyNodeTab" border='1'>\r
+ <colgroup>\r
+ <col style="width: 25%;"/>\r
+ <col style="width: 25%;" />\r
+ <col style="width: 25%;"/>\r
+ <col style="width: 25%;" />\r
+ </colgroup>\r
+ </table>\r
+ </div>\r
+\r
+ <table class='tableHead'>\r
+ <caption>Physical Link</caption>\r
+ <colgroup>\r
+ <col style="width: 30%;"/>\r
+ <col style="width: 20%;" />\r
+ <col style="width: 20%;"/>\r
+ <col style="width: 10%;" />\r
+ <col style="width: 10%;" />\r
+ <col style="width: 10%;" />\r
+ </colgroup>\r
+ <tr>\r
<th>Physical Link ID</th><th>Source Physical Node</th>\r
- <th>Destination Physical Node</th><th>Metric</th>\r
- <th>Bandwidth</th> <th>Delay</th>\r
- </tr>\r
- </table>\r
+ <th>Destination Physical Node</th><th>Metric</th>\r
+ <th>Bandwidth</th><th>Delay</th>\r
+ </tr>\r
+ </table>\r
+ \r
+ <div class='tableBodyContainer'>\r
+ <table id="phyLinkTab" border='1'> \r
+ <colgroup>\r
+ <col style="width: 30%;"/>\r
+ <col style="width: 20%;" />\r
+ <col style="width: 20%;"/>\r
+ <col style="width: 10%;" />\r
+ <col style="width: 10%;" />\r
+ <col style="width: 10%;" />\r
+ </colgroup>\r
+ </table>\r
+ </div>\r
+ \r
</div>\r
</div>\r
\r
<div id="VirNet">\r
<div id="vir_graph"></div>\r
<div id='virtualTables'>\r
- <table id="virNodeTab" border='1'>\r
+\r
+ <table class='tableHead' border='1'>\r
<caption>Virtual Node</caption>\r
+ <colgroup>\r
+ <col style="width: 20%;"/>\r
+ <col style="width: 20%;" />\r
+ <col style="width: 20%;"/>\r
+ <col style="width: 20%;" />\r
+ <col style="width: 20%;"/>\r
+ </colgroup>\r
<tr>\r
<th>Virtual Node ID</th><th>Virtual Node Name</th>\r
<th>Virtual Node Type</th>\r
</tr>\r
</table>\r
\r
- <table id="virLinkTab" border='1'>\r
+ <div class='tableBodyContainer'>\r
+ <table id="virNodeTab" border='1'>\r
+ <colgroup>\r
+ <col style="width: 20%;"/>\r
+ <col style="width: 20%;" />\r
+ <col style="width: 20%;"/>\r
+ <col style="width: 20%;" />\r
+ <col style="width: 20%;"/>\r
+ </colgroup>\r
+ </table>\r
+ </div>\r
+ \r
+ <table class='tableHead' border='1'>\r
<caption>Virtual Link</caption>\r
+ <colgroup>\r
+ <col style="width: 20%;" />\r
+ <col style="width: 20%;"/>\r
+ <col style="width: 20%;" />\r
+ <col style="width: 20%;"/>\r
+ <col style="width: 10%;" />\r
+ <col style="width: 10%;"/>\r
+ </colgroup>\r
<tr>\r
<th>Virtual Link ID</th><th>Virtual Link Name</th>\r
<th>Source Virtual Node</th>\r
<th>Bandwidth</th> <th>Delay</th>\r
</tr>\r
</table>\r
+ \r
+\r
+ <div class='tableBodyContainer'>\r
+ <table id="virLinkTab" border='1'>\r
+ <colgroup>\r
+ <col style="width: 20%;" />\r
+ <col style="width: 20%;"/>\r
+ <col style="width: 20%;" />\r
+ <col style="width: 20%;"/>\r
+ <col style="width: 10%;" />\r
+ <col style="width: 10%;"/>\r
+ </colgroup>\r
+ </table>\r
+ </div>\r
</div>\r
</div>\r
<div id="Mapping">\r
- <table id="mapVirNodeTab" border='1'>\r
+ \r
+ <div id='mappingTable'>\r
+ <table class='tableHead' border='1'>\r
<caption>Virtual Node Mapping Table</caption>\r
+ <colgroup>\r
+ <col style="width: 50%;" />\r
+ <col style="width: 50%;"/>\r
+ </colgroup>\r
<tr><th>Virtual Node</th><th>Physical Node</th></tr>\r
</table>\r
+ \r
+ <div class='tableBodyContainer'>\r
+ <table id="mapVirNodeTab" border='1'>\r
+ <colgroup>\r
+ <col style="width: 50%;" />\r
+ <col style="width: 50%;"/>\r
+ </colgroup>\r
+ </table>\r
+ </div> \r
\r
- <table id="mapVirLinkTab" border='1'>\r
+ <table class='tableHead' border='1'>\r
<caption>Virtual Link Mapping Table</caption>\r
+ <colgroup>\r
+ <col style="width: 20%;">\r
+ <col style="width: 15%;">\r
+ <col style="width: 15%;">\r
+ <col style="width: 20%;">\r
+ <col style="width: 30%;">\r
+ </colgroup> \r
<tr>\r
<th>Virtual Link</th><th>Source Virtual Node</th>\r
<th>Destination Virtual Node</th><th>Physical Path</th>\r
<th>Physical Nodes passed by Path</th>\r
</tr>\r
</table>\r
+ \r
+ <div class='tableBodyContainer'>\r
+ <table id="mapVirLinkTab" border='1'>\r
+ <colgroup>\r
+ <col style="width: 20%;">\r
+ <col style="width: 15%;">\r
+ <col style="width: 15%;">\r
+ <col style="width: 20%;">\r
+ <col style="width: 30%;">\r
+ </colgroup>\r
+ </table>\r
+ </div>\r
+ </div>\r
</div>\r
</div>\r
\r
<link href="src/app/nemo/css/nemo_user_main.css" rel="stylesheet" />\r
\r
<!-- // <script src="src/app/nemo/module/migrate.js"></script> -->\r
+ <!-- // <script src="src/app/nemo/module/migrate_js.js"></script> -->\r
\r
<script src="src/app/nemo/module/keyWords.js"></script>\r
- <!-- // <script src="src/app/nemo/module/bod_userJson.js"></script> -->\r
+ <!-- // <script src="src/app/nemo/module/test/bod_userJson.js"></script> -->\r
+ <!-- // <script src="src/app/nemo/module/test/servicechain_userJson.js"></script> -->\r
<script src="src/app/nemo/js/Nemo_Main.js"></script>\r
<script src="src/app/nemo/js/Nemo_Annouce_vis.js"></script>\r
<script src="src/app/nemo/js/phyNetwork.js"></script>\r
var user_str = localStorage.getItem("nemo_userInfo");\r
console.log(user_str);\r
jQuery(document).ready(function ($) {\r
+ \r
+ (function(){\r
if(user_str){\r
user_str=JSON.parse(user_str);\r
var userName=user_str.userName;\r
//get topo data\r
+ if(!userName) return true;\r
$('.header p').html($('.header p').html().replace('xxx',userName));\r
var user_data=getIntentInfoByName(userName,IntentInfos);\r
- analyjson_topo(user_data);\r
- parseNemoLan(user_data);\r
+ // var user_data=getIntentInfoByName(userName,userinfo);\r
+ console.log(user_data);\r
+ analyjson_topo(user_data);\r
+ parseNemoLan(user_data);\r
\r
//set keyWords style\r
- $("#nemo_str_show p").each(function(){\r
- var $res=$(this);\r
- keyWords.forEach(function(item,index,array){\r
- // console.log(item);\r
- $res.html($res.html().replace(item,"<span class='keyWords'>"+item+"</span>"));\r
- });\r
- });\r
+ $("#nemo_str_show p").each(function(){\r
+ var $res=$(this);\r
+ keyWords.forEach(function(item,index,array){\r
+ // console.log(item);\r
+ $res.html($res.html().replace(item,"<span class='keyWords'>"+item+"</span>"));\r
+ });\r
+ });\r
+ } \r
+ }());\r
+\r
+ $('#user_logout').click(function(){\r
+ // console.log(1);\r
+ // alert(1);\r
+ setCookie('nemo_userpwd','',-1);\r
+ $("#pageContent").empty();\r
+ $("#pageContent").load('src/app/nemo/register.html');\r
+ // alert(2);\r
+ }); \r
\r
- } \r
+ \r
});\r
</script>\r
</head>\r
<body>\r
- <div class="header"><p>Hello xxx!</p></div>\r
+ <div class="header"><p>Hello xxx!</p><span id='user_logout'>Logout</span></div>\r
\r
<div class="group">\r
<div class="up">\r
});\r
return user_data;\r
}\r
+ function userLogin(userName,userPassword){\r
+ jQuery.ajax({\r
+ url: "/restconf/config/nemo-intent:users/",\r
+ type: "GET",\r
+ async: false,\r
+ dataType: "json",\r
+ success: function(data) {\r
+ console.log(data);\r
+ //data=JSON.stringify(data);\r
+ var name_data_list=data["users"]["user"];\r
+ for (var i in name_data_list) {\r
+ if (name_data_list[i]["user-name"] == userName) {\r
+ if (name_data_list[i]["user-password"]==userPassword)\r
+ {\r
+ userInfoStorage.userName=userName;\r
+ localStorage.setItem("nemo_userInfo",JSON.stringify(userInfoStorage));\r
+ setCookie('nemo_username',userName);\r
+ setCookie('nemo_userpwd',userPassword);\r
+ $("#pageContent").empty();\r
+ $("#pageContent").load('src/app/nemo/nemo.tpl.user.html');\r
+ return;\r
+ }\r
+ else{\r
+ alert("User's password is wrong!");\r
+ return;\r
+ }\r
+ }\r
+ }\r
+ alert("There is no user named "+userName);\r
+ },\r
+ error: function(data) {console.log(data);}\r
+ });\r
+ }\r
+ //use cookie remember the last username and password ,and use them login\r
(function(){\r
var cook_username=getCookie('nemo_username');\r
var cook_userpwd=getCookie('nemo_userpwd');\r
$("#pageContent").empty();\r
$("#pageContent").load('src/app/nemo/nemo.tpl.html');\r
}\r
+ else{\r
+ userPassword(cook_username,cook_userpwd);\r
+ }\r
}());\r
$("#usename").focus();\r
//add enter evevt\r
$("#pageContent").load('src/app/nemo/nemo.tpl.html');\r
}\r
else{\r
- jQuery.ajax({\r
- url: "/restconf/config/nemo-intent:users/",\r
- type: "GET",\r
- async: false,\r
- dataType: "json",\r
- success: function(data) {\r
- console.log(data);\r
- //data=JSON.stringify(data);\r
- var name_data_list=data["users"]["user"];\r
- for (var i in name_data_list) {\r
- if (name_data_list[i]["user-name"] == userName) {\r
- if (name_data_list[i]["user-password"]==userPassword)\r
- {\r
- userInfoStorage.userName=userName;\r
- localStorage.setItem("nemo_userInfo",JSON.stringify(userInfoStorage));\r
- // setCookie('username',userName);\r
- // setCookie('username',userPassword);\r
- $("#pageContent").empty();\r
- $("#pageContent").load('src/app/nemo/nemo.tpl.user.html');\r
- return;\r
- }\r
- else{\r
- alert("User's password is wrong!");\r
- return;\r
- }\r
- }\r
- }\r
- alert("There is no user named "+userName);\r
- },\r
- error: function(data) {console.log(data);}\r
- });\r
+ userLogin(userName,userPassword);\r
}\r
});\r
\r