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 analy_topo(physicalData);
\r
61 create_physical_topo();
\r
62 creataPhysicalTables.createPhyicalNodeTable('phyNodeTab',null)
\r
63 creataPhysicalTables.createPhyicalLinkTable('phyLinkTab',null)
\r
66 $(".tabs ul li[aria-controls='PhyNet']").click();
\r
68 $(".tabs ul li[aria-controls='intent_info']").click(function(){
\r
69 //alert('intent_topo');
\r
70 var userId=$("#selectUser option:selected").val();
\r
71 console.log(userId);
\r
74 //userId='af4fc2be-e3f4-4388-a8ef-3aabae872f2b';
\r
76 //userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b'
\r
77 //if(userId=='0') userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b';
\r
78 $('#service_svg2').empty();
\r
79 $("#nemo_str_show").empty();
\r
80 console.log(userId);
\r
81 if(!IntentInfos) return;
\r
82 var user_data = getIntentInfoById(userId);
\r
83 if(!user_data) return;
\r
85 analyjson_topo(user_data);
\r
86 parseNemoLan(user_data);
\r
87 //set keyWords style
\r
88 $("#nemo_str_show p").each(function(){
\r
90 keyWords.forEach(function(item,index,array){
\r
91 $res.html($res.html().replace(item,"<span class='keyWords'>"+item+"</span>"));
\r
96 $(".tabs ul li[aria-controls='VirNet']").click(function(){
\r
97 // var virtualData=getVirtualJson();
\r
98 var userId=$("#selectUser option:selected").val();
\r
99 jQuery('#vir_graph').empty();
\r
100 jQuery("#virNodeTab").find('tr:gt(1)').empty();
\r
101 jQuery("#virLinkTab").find('tr:gt(1)').empty();
\r
103 //userId='af4fc2be-e3f4-4388-a8ef-3aabae872f2b';
\r
105 //userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b'
\r
107 //if(userId=='0') userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b';
\r
108 // virtualData=virtualJson;
\r
110 if(!IntentInfos||!MappingResults||!VirtualDatas) return;
\r
111 if(!getVirtualInfoById(userId)||!getIntentInfoById(userId)||!getMappingResultById(userId)) return;
\r
112 create_virtual_topo(getVirtualInfoById(userId),getIntentInfoById(userId),getMappingResultById(userId));
\r
113 creataVirtualTables.createVirtualNodeTable('virNodeTab',getVirtualInfoById(userId));
\r
114 creataVirtualTables.createVirtualLinkTable('virLinkTab',getVirtualInfoById(userId));
\r
116 // $(".tabs ul li[aria-controls='Mapping']").click();
\r
117 $(".tabs ul li[aria-controls='Mapping']").click(function(){
\r
118 var userId=$("#selectUser option:selected").val();
\r
119 //if(userId=='0') userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b';
\r
120 jQuery("#mapVirNodeTab").find('tr:gt(1)').empty();
\r
121 jQuery("#mapVirLinkTab").find('tr:gt(1)').empty();
\r
122 if(!physicalData||!PnMappingResults||!VirtualDatas) return;
\r
123 var virtualData = getVirtualInfoById(userId);
\r
124 if(!virtualData) return;
\r
125 if(!getPnMappingResultById(userId)) return;
\r
126 // console.log(createMappingTables);
\r
127 createMappingTables.createVirtualNodeTable('mapVirNodeTab',virtualData);
\r
128 // console.log(linkArray);
\r
129 createMappingTables.createVirtualLinkTable('mapVirLinkTab',virtualData,getPnMappingResultById(userId),physicalData);
\r
130 // getPaths(linkArray,getPnMappingResultById(userId,PnMappingJson),physicalJson);
\r
133 $('#selectUser input[type=button]').click(function(){
\r
134 // $(".tabs ul li[aria-controls='intent_info']").trigger('click');
\r
135 $('a[href="#intent_info"]').click();
\r
136 var userId=$("#selectUser option:selected").val();
\r
139 //userId='af4fc2be-e3f4-4388-a8ef-3aabae872f2b';
\r
141 //userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b'
\r
143 //if(userId=='0') userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b';
\r
144 if(!intent_info) return;
\r
145 var user_data = getIntentInfoById(userId);
\r
146 if(!user_data) return;
\r
147 analyjson_topo(user_data);
\r
148 parseNemoLan(user_data);
\r
149 //set keyWords style
\r
150 $("#nemo_str_show p").each(function(){
\r
152 keyWords.forEach(function(item,index,array){
\r
153 // console.log(item);
\r
154 $res.html($res.html().replace(item,"<span class='keyWords'>"+item+"</span>"));
\r
164 <div class="header">
\r
165 <p>Hello Admin!</p>
\r
166 <div id='selectUser'>
\r
168 <select value="intentUser">
\r
170 <input type="button" class='btn_' value='Query'/></div>
\r
173 <div class="group">
\r
176 <li><a href="#PhyNet">Physical Network</a></li>
\r
177 <li><a href="#intent_info">NEMO Intent</a></li>
\r
178 <li><a href="#VirNet">Virtual Network</a></li>
\r
179 <li><a href="#Mapping">VN-PN Mapping</a></li>
\r
182 <div id="phy_graph"></div>
\r
183 <div id='physicalTables'>
\r
184 <table id="phyNodeTab" border='1'>
\r
185 <caption>Physical Node</caption>
\r
187 <th>Physical Node ID</th><th>Physical Node Type</th>
\r
188 <th>Internal Physical Port Number</th><th>External Physical Port Number</th>
\r
192 <table id="phyLinkTab" border='1'>
\r
193 <caption>Physical Link</caption>
\r
195 <th>Physical Link ID</th><th>Source Physical Node</th>
\r
196 <th>Destination Physical Node</th><th>Metric</th>
\r
197 <th>Bandwidth</th> <th>Delay</th>
\r
203 <div id="intent_info">
\r
204 <div id="intent_topo">
\r
206 <svg id="service_svg2" width="800" height="560" viewBox="100 40 900 780">
\r
208 <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
209 <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
216 <li><a href="#nemo_str_show">NEMO Language</a></li>
\r
218 <div id="nemo_str_show"></div>
\r
223 <div id="vir_graph"></div>
\r
224 <div id='virtualTables'>
\r
225 <table id="virNodeTab" border='1'>
\r
226 <caption>Virtual Node</caption>
\r
228 <th>Virtual Node ID</th><th>Virtual Node Name</th>
\r
229 <th>Virtual Node Type</th>
\r
230 <th>Internal Virtual Port Number</th><th>External Virtual Port Number</th>
\r
234 <table id="virLinkTab" border='1'>
\r
235 <caption>Virtual Link</caption>
\r
237 <th>Virtual Link ID</th><th>Virtual Link Name</th>
\r
238 <th>Source Virtual Node</th>
\r
239 <th>Destination Virtual Node</th>
\r
240 <!-- <th>Metric</th> -->
\r
241 <th>Bandwidth</th> <th>Delay</th>
\r
247 <table id="mapVirNodeTab" border='1'>
\r
248 <caption>Virtual Node Mapping Table</caption>
\r
249 <tr><th>Virtual Node</th><th>Physical Node</th></tr>
\r
252 <table id="mapVirLinkTab" border='1'>
\r
253 <caption>Virtual Link Mapping Table</caption>
\r
255 <th>Virtual Link</th><th>Source Virtual Node</th>
\r
256 <th>Destination Virtual Node</th><th>Physical Path</th>
\r
257 <th>Physical Nodes passed by Path</th>
\r
264 <!-- dialog start -->
\r
265 <div id="dialog" title="info" style='display:none;'>
\r
267 <!-- Create By LiuTong , 2015-12-06 -->
\r
270 <!-- dialog end -->
\r