1 <html xmlns="http://www.w3.org/1999/xhtml">
\r
3 <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
\r
4 <title>nemo-ui-en</title>
\r
5 <link href="src/app/nemo/css/jquery-ui.min.css" rel="stylesheet" />
\r
6 <link href="src/app/nemo/css/nemo_user_main.css" rel="stylesheet" />
\r
7 <link href="src/app/nemo/css/nemo_main.css" rel="stylesheet" />
\r
9 <!-- // <script src="src/app/nemo/module/migrate_js.js"></script> -->
\r
10 <script src="src/app/nemo/js/Nemo_Main.js"></script>
\r
11 <script src="src/app/nemo/module/keyWords.js"></script>
\r
12 <script src="src/app/nemo/module/migrate.js"></script>
\r
14 <!-- // <script src="src/app/nemo/module/test/servicechain_userJson.js"></script> -->
\r
16 <!-- // <script src="src/app/nemo/module/test/bod_userJson.js"></script> -->
\r
18 <script src="src/app/nemo/js/Nemo_Annouce_vis.js"></script>
\r
19 <script src="src/app/nemo/js/phyNetwork.js"></script>
\r
20 <script src="src/app/nemo/js/intentTopo.js"></script>
\r
21 <script src="src/app/nemo/js/vnMapping.js"></script>
\r
22 <script src="src/app/nemo/js/virNetwork.js"></script>
\r
28 return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
\r
30 return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
\r
33 jQuery(document).ready(function ($) {
\r
34 var userNames=['--default--'];
\r
36 url: "/restconf/config/nemo-intent:users/",
\r
40 success: function(data) {
\r
43 var data_list=data["users"]["user"];
\r
44 for (var item in data_list) {
\r
45 userNames[data_list[item]['user-id']]=data_list[item]['user-name'];
\r
48 error: function(data) {
\r
52 //add useruame to select
\r
53 $("#selectUser select").empty();
\r
54 for(var item in userNames){
\r
55 $("#selectUser select").append('<option value="'+item+'">'+userNames[item]+'</option>');
\r
59 $(".tabs ul li[aria-controls='PhyNet']").click(function(){
\r
60 createPhysicalTopo();
\r
61 analy_topo(physicalData);
\r
62 // create_physical_topo();
\r
63 creataPhysicalTables.createPhyicalNodeTable('phyNodeTab',null)
\r
64 creataPhysicalTables.createPhyicalLinkTable('phyLinkTab',null)
\r
67 $(".tabs ul li[aria-controls='PhyNet']").click();
\r
69 $(".tabs ul li[aria-controls='intent_info']").click(function(){
\r
70 //alert('intent_topo');
\r
71 var userId=$("#selectUser option:selected").val();
\r
72 console.log(userId);
\r
75 // userId='af4fc2be-e3f4-4388-a8ef-3aabae872f2b';
\r
77 // var userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b'
\r
78 // if(userId=='0') userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b';
\r
79 $('#service_svg2').empty();
\r
80 $("#nemo_str_show").empty();
\r
81 console.log(userId);
\r
82 if(!IntentInfos) return;
\r
83 var user_data = getIntentInfoById(userId,userinfo);
\r
84 if(!user_data) return;
\r
86 analyjson_topo(user_data);
\r
87 parseNemoLan(user_data);
\r
88 //set keyWords style
\r
89 $("#nemo_str_show p").each(function(){
\r
91 keyWords.forEach(function(item,index,array){
\r
92 $res.html($res.html().replace(item,"<span class='keyWords'>"+item+"</span>"));
\r
97 $(".tabs ul li[aria-controls='VirNet']").click(function(){
\r
98 // var virtualData=getVirtualJson();
\r
99 var userId=$("#selectUser option:selected").val();
\r
100 jQuery('#vir_graph').empty();
\r
101 jQuery("#virNodeTab").find('tr').remove();
\r
102 jQuery("#virLinkTab").find('tr').remove();
\r
104 //userId='af4fc2be-e3f4-4388-a8ef-3aabae872f2b';
\r
106 //userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b'
\r
108 // if(userId=='0') userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b';
\r
109 // virtualData=virtualJson;
\r
111 if(!IntentInfos||!MappingResults||!VirtualDatas) return;
\r
112 if(!getVirtualInfoById(userId)||!getIntentInfoById(userId)||!getMappingResultById(userId)) return;
\r
113 create_virtual_topo(getVirtualInfoById(userId),getIntentInfoById(userId),getMappingResultById(userId));
\r
114 creataVirtualTables.createVirtualNodeTable('virNodeTab',getVirtualInfoById(userId));
\r
115 creataVirtualTables.createVirtualLinkTable('virLinkTab',getVirtualInfoById(userId));
\r
117 // $(".tabs ul li[aria-controls='Mapping']").click();
\r
118 $(".tabs ul li[aria-controls='Mapping']").click(function(){
\r
119 var userId=$("#selectUser option:selected").val();
\r
120 // userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b';
\r
121 jQuery("#mapVirNodeTab").find('tr').remove();
\r
122 jQuery("#mapVirLinkTab").find('tr').remove();
\r
123 if(!physicalData||!PnMappingResults||!VirtualDatas) return;
\r
124 var virtualData = getVirtualInfoById(userId);
\r
125 if(!virtualData) return;
\r
126 if(!getPnMappingResultById(userId)) return;
\r
127 // console.log(createMappingTables);
\r
128 console.log(virtualData);
\r
129 createMappingTables.createVirtualNodeTable('mapVirNodeTab',virtualData);
\r
130 // console.log(linkArray);
\r
131 createMappingTables.createVirtualLinkTable('mapVirLinkTab',virtualData,getPnMappingResultById(userId),physicalData);
\r
132 // getPaths(linkArray,getPnMappingResultById(userId,PnMappingJson),physicalJson);
\r
135 $('#selectUser input[type=button]').click(function(){
\r
136 // $(".tabs ul li[aria-controls='intent_info']").trigger('click');
\r
137 $('a[href="#intent_info"]').click();
\r
138 var userId=$("#selectUser option:selected").val();
\r
141 //userId='af4fc2be-e3f4-4388-a8ef-3aabae872f2b';
\r
143 //userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b'
\r
145 if(!IntentInfos) return;
\r
146 var user_data = getIntentInfoById(userId);
\r
147 if(!user_data) return;
\r
149 analyjson_topo(user_data);
\r
150 parseNemoLan(user_data);
\r
152 //set keyWords style
\r
153 $("#nemo_str_show p").each(function(){
\r
155 keyWords.forEach(function(item,index,array){
\r
156 // console.log(item);
\r
157 $res.html($res.html().replace(item,"<span class='keyWords'>"+item+"</span>"));
\r
163 $('#logout').click(function(){
\r
164 setCookie('nemo_userpwd','',-1);
\r
165 $("#pageContent").empty();
\r
166 $("#pageContent").load('src/app/nemo/register.html');
\r
173 <div class="header">
\r
174 <p>Hello Admin!</p><span id='logout'>Logout</span>
\r
175 <div id='selectUser'>
\r
177 <select value="intentUser">
\r
179 <input type="button" class='btn_' value='Query'/></div>
\r
182 <div class="group">
\r
185 <li><a href="#PhyNet">Physical Network</a></li>
\r
186 <li><a href="#intent_info">NEMO Intent</a></li>
\r
187 <li><a href="#VirNet">Virtual Network</a></li>
\r
188 <li><a href="#Mapping">VN-PN Mapping</a></li>
\r
191 <div id="phy_graph"></div>
\r
192 <div id='physicalTables'>
\r
193 <table class='tableHead'>
\r
194 <caption>Physical Node</caption>
\r
196 <col style="width: 25%;"/>
\r
197 <col style="width: 25%;" />
\r
198 <col style="width: 25%;"/>
\r
199 <col style="width: 25%;" />
\r
202 <th>Physical Node ID</th><th>Physical Node Type</th>
\r
203 <th>Internal Physical Port Number</th><th>External Physical Port Number</th>
\r
207 <div class='tableBodyContainer'>
\r
208 <table id="phyNodeTab" border='1'>
\r
210 <col style="width: 25%;"/>
\r
211 <col style="width: 25%;" />
\r
212 <col style="width: 25%;"/>
\r
213 <col style="width: 25%;" />
\r
218 <table class='tableHead'>
\r
219 <caption>Physical Link</caption>
\r
221 <col style="width: 30%;"/>
\r
222 <col style="width: 20%;" />
\r
223 <col style="width: 20%;"/>
\r
224 <col style="width: 10%;" />
\r
225 <col style="width: 10%;" />
\r
226 <col style="width: 10%;" />
\r
229 <th>Physical Link ID</th><th>Source Physical Node</th>
\r
230 <th>Destination Physical Node</th><th>Metric</th>
\r
231 <th>Bandwidth</th><th>Delay</th>
\r
235 <div class='tableBodyContainer'>
\r
236 <table id="phyLinkTab" border='1'>
\r
238 <col style="width: 30%;"/>
\r
239 <col style="width: 20%;" />
\r
240 <col style="width: 20%;"/>
\r
241 <col style="width: 10%;" />
\r
242 <col style="width: 10%;" />
\r
243 <col style="width: 10%;" />
\r
251 <div id="intent_info">
\r
252 <div id="intent_topo">
\r
254 <svg id="service_svg2" width="800" height="560" viewBox="100 20 900 780">
\r
256 <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"/> </marker>
\r
257 <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
264 <li><a href="#nemo_str_show">NEMO Language</a></li>
\r
266 <div id="nemo_str_show"></div>
\r
271 <div id="vir_graph"></div>
\r
272 <div id='virtualTables'>
\r
274 <table class='tableHead' border='1'>
\r
275 <caption>Virtual Node</caption>
\r
277 <col style="width: 20%;"/>
\r
278 <col style="width: 20%;" />
\r
279 <col style="width: 20%;"/>
\r
280 <col style="width: 20%;" />
\r
281 <col style="width: 20%;"/>
\r
284 <th>Virtual Node ID</th><th>Virtual Node Name</th>
\r
285 <th>Virtual Node Type</th>
\r
286 <th>Internal Virtual Port Number</th><th>External Virtual Port Number</th>
\r
290 <div class='tableBodyContainer'>
\r
291 <table id="virNodeTab" border='1'>
\r
293 <col style="width: 20%;"/>
\r
294 <col style="width: 20%;" />
\r
295 <col style="width: 20%;"/>
\r
296 <col style="width: 20%;" />
\r
297 <col style="width: 20%;"/>
\r
302 <table class='tableHead' border='1'>
\r
303 <caption>Virtual Link</caption>
\r
305 <col style="width: 20%;" />
\r
306 <col style="width: 20%;"/>
\r
307 <col style="width: 20%;" />
\r
308 <col style="width: 20%;"/>
\r
309 <col style="width: 10%;" />
\r
310 <col style="width: 10%;"/>
\r
313 <th>Virtual Link ID</th><th>Virtual Link Name</th>
\r
314 <th>Source Virtual Node</th>
\r
315 <th>Destination Virtual Node</th>
\r
316 <!-- <th>Metric</th> -->
\r
317 <th>Bandwidth</th> <th>Delay</th>
\r
322 <div class='tableBodyContainer'>
\r
323 <table id="virLinkTab" border='1'>
\r
325 <col style="width: 20%;" />
\r
326 <col style="width: 20%;"/>
\r
327 <col style="width: 20%;" />
\r
328 <col style="width: 20%;"/>
\r
329 <col style="width: 10%;" />
\r
330 <col style="width: 10%;"/>
\r
338 <div id='mappingTable'>
\r
339 <table class='tableHead' border='1'>
\r
340 <caption>Virtual Node Mapping Table</caption>
\r
342 <col style="width: 50%;" />
\r
343 <col style="width: 50%;"/>
\r
345 <tr><th>Virtual Node</th><th>Physical Node</th></tr>
\r
348 <div class='tableBodyContainer'>
\r
349 <table id="mapVirNodeTab" border='1'>
\r
351 <col style="width: 50%;" />
\r
352 <col style="width: 50%;"/>
\r
357 <table class='tableHead' border='1'>
\r
358 <caption>Virtual Link Mapping Table</caption>
\r
360 <col style="width: 20%;">
\r
361 <col style="width: 15%;">
\r
362 <col style="width: 15%;">
\r
363 <col style="width: 20%;">
\r
364 <col style="width: 30%;">
\r
367 <th>Virtual Link</th><th>Source Virtual Node</th>
\r
368 <th>Destination Virtual Node</th><th>Physical Path</th>
\r
369 <th>Physical Nodes passed by Path</th>
\r
373 <div class='tableBodyContainer'>
\r
374 <table id="mapVirLinkTab" border='1'>
\r
376 <col style="width: 20%;">
\r
377 <col style="width: 15%;">
\r
378 <col style="width: 15%;">
\r
379 <col style="width: 20%;">
\r
380 <col style="width: 30%;">
\r
389 <!-- dialog start -->
\r
390 <div id="dialog" title="info" style='display:none;'>
\r
392 <!-- Create By LiuTong , 2015-12-06 -->
\r
395 <!-- dialog end -->
\r