f40a27794f4fc76d9c959bae97c7c39dd20cf06b
[nemo.git] / nemo-ui / src / main / resources / nemo / nemo.tpl.html
1 <html xmlns="http://www.w3.org/1999/xhtml">\r
2 <head>\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
8 \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
13     <!-- SFC -->\r
14      <!-- // <script src="src/app/nemo/module/test/servicechain_userJson.js"></script>  -->\r
15     <!-- Bod -->\r
16     <!-- // <script src="src/app/nemo/module/test/bod_userJson.js"></script>  -->\r
17 \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
23 \r
24     <script>\r
25    \r
26         function guid() {\r
27             function S4() {\r
28                 return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);\r
29             }\r
30             return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());\r
31         }\r
32 \r
33         jQuery(document).ready(function ($) {\r
34         var userNames=['--default--'];\r
35         jQuery.ajax({\r
36             url: "/restconf/config/nemo-intent:users/",\r
37             type: "GET",\r
38             async: false,\r
39             dataType: "json",\r
40             success: function(data) {\r
41                 console.log(data);\r
42             userNames=[];\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
46             }\r
47             },\r
48             error: function(data) {\r
49                 console.log(data);\r
50             }\r
51         });\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
56         }\r
57         \r
58 \r
59         $(".tabs ul li[aria-controls='PhyNet']").click(function(){\r
60             if(!physicalData) return;\r
61              createPhysicalTopo();\r
62              analy_topo(physicalData);\r
63              // create_physical_topo();\r
64               creataPhysicalTables.createPhyicalNodeTable('phyNodeTab',null)\r
65               creataPhysicalTables.createPhyicalLinkTable('phyLinkTab',null)\r
66         });\r
67 \r
68         $(".tabs ul li[aria-controls='PhyNet']").click();\r
69 \r
70         $(".tabs ul li[aria-controls='intent_info']").click(function(){\r
71             var userId=$("#selectUser option:selected").val();\r
72             console.log(userId);\r
73 \r
74             // SFC\r
75             // userId='af4fc2be-e3f4-4388-a8ef-3aabae872f2b';\r
76             //Bod\r
77             // var userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b'\r
78             // if(userId=='0') userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b';\r
79 \r
80             $('#service_svg2').empty();\r
81             $("#nemo_str_show").empty();\r
82             if(!IntentInfos) return;\r
83             var user_data = getIntentInfoById(userId);\r
84             if(!user_data) return;\r
85             // var user_data=getIntentInfoByName("user2",userinfo);\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
90             var $res=$(this);\r
91             keyWords.forEach(function(item,index,array){\r
92                 $res.html($res.html().replace(item,"<span class='keyWords'>"+item+"</span>"));\r
93             });\r
94         });\r
95     });\r
96 \r
97         $(".tabs ul li[aria-controls='VirNet']").click(function(){\r
98             var userId=$("#selectUser option:selected").val();\r
99             jQuery('#vir_graph').empty();\r
100             jQuery("#virNodeTab").find('tr').remove();\r
101             jQuery("#virLinkTab").find('tr').remove();\r
102             // SFC\r
103             //userId='af4fc2be-e3f4-4388-a8ef-3aabae872f2b';\r
104             //Bod\r
105             //userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b'\r
106 \r
107             // if(userId=='0') userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b';\r
108             // virtualData=virtualJson;\r
109 \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
115         });\r
116 \r
117         $(".tabs ul li[aria-controls='Mapping']").click(function(){\r
118             var userId=$("#selectUser option:selected").val();\r
119             // userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b';\r
120             jQuery("#mapVirNodeTab").find('tr').remove();\r
121             jQuery("#mapVirLinkTab").find('tr').remove();\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             console.log(virtualData);\r
128               createMappingTables.createVirtualNodeTable('mapVirNodeTab',virtualData);\r
129             // console.log(linkArray);\r
130               createMappingTables.createVirtualLinkTable('mapVirLinkTab',virtualData,getPnMappingResultById(userId),physicalData);\r
131             // getPaths(linkArray,getPnMappingResultById(userId,PnMappingJson),physicalJson);\r
132         });\r
133 \r
134         $('#selectUser input[type=button]').click(function(){\r
135             $('a[href="#intent_info"]').click();\r
136 \r
137     });\r
138 \r
139        $('#logout').click(function(){\r
140         setCookie('nemo_userpwd','',-1);\r
141         $("#pageContent").empty();\r
142         $("#pageContent").load('src/app/nemo/register.html');\r
143        });\r
144 \r
145         });\r
146     </script>\r
147 </head>\r
148 <body>\r
149       <div class="header">\r
150         <p>Hello Admin!</p><span id='logout'>Logout</span>\r
151         <div id='selectUser'>\r
152             <p>Tenant:</p>\r
153             <select value="intentUser">\r
154             </select>\r
155             <input type="button" class='btn_' value='Query'/></div>\r
156       </div>\r
157 \r
158         <div class="group">\r
159                 <div class="tabs">\r
160                     <ul>\r
161                         <li><a href="#PhyNet">Physical Network</a></li>\r
162                         <li><a href="#intent_info">NEMO Intent</a></li>\r
163                         <li><a href="#VirNet">Virtual Network</a></li>\r
164                         <li><a href="#Mapping">VN-PN Mapping</a></li>\r
165                     </ul>\r
166                 <div id='PhyNet'>\r
167                     <div id="phy_graph"></div>\r
168                     <div id='physicalTables'>\r
169                       <table class='tableHead'>\r
170                         <caption>Physical Node</caption>\r
171                          <colgroup>\r
172                          <col style="width: 25%;"/>\r
173                          <col style="width: 25%;" />\r
174                          <col style="width: 25%;"/>\r
175                          <col style="width: 25%;" />\r
176                          </colgroup>\r
177                         <tr>\r
178                         <th>Physical Node ID</th><th>Physical Node Type</th>\r
179                         <th>Internal Physical Port Number</th><th>External Physical Port Number</th>\r
180                         </tr>\r
181                       </table>\r
182 \r
183                       <div class='tableBodyContainer'>\r
184                          <table id="phyNodeTab" border='1'>\r
185                          <colgroup>\r
186                          <col style="width: 25%;"/>\r
187                          <col style="width: 25%;" />\r
188                          <col style="width: 25%;"/>\r
189                          <col style="width: 25%;" />\r
190                          </colgroup>\r
191                          </table>\r
192                       </div>\r
193 \r
194                         <table class='tableHead'>\r
195                         <caption>Physical Link</caption>\r
196                          <colgroup>\r
197                          <col style="width: 30%;"/>\r
198                          <col style="width: 20%;" />\r
199                          <col style="width: 20%;"/>\r
200                          <col style="width: 10%;" />\r
201                          <col style="width: 10%;" />\r
202                          <col style="width: 10%;" />\r
203                          </colgroup>\r
204                         <tr>\r
205                         <th>Physical Link ID</th><th>Source Physical Node</th>\r
206                         <th>Destination Physical Node</th><th>Metric</th>\r
207                         <th>Bandwidth</th><th>Delay</th>\r
208                         </tr>\r
209                      </table>\r
210                     \r
211                     <div class='tableBodyContainer'>\r
212                     <table id="phyLinkTab" border='1'>                    \r
213                        <colgroup>\r
214                          <col style="width: 30%;"/>\r
215                          <col style="width: 20%;" />\r
216                          <col style="width: 20%;"/>\r
217                          <col style="width: 10%;" />\r
218                          <col style="width: 10%;" />\r
219                          <col style="width: 10%;" />\r
220                          </colgroup>\r
221                     </table>\r
222                     </div>\r
223                     \r
224                     </div>\r
225                 </div>\r
226 \r
227                 <div id="intent_info">\r
228                      <div id="intent_topo">\r
229                     \r
230                     <svg id="service_svg2"  width="800" height="560"  viewBox="100 40 900 780">\r
231                     <defs>\r
232                     <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
233                     <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
234                     </defs>\r
235                     </svg>\r
236                    </div>\r
237                     \r
238                    <div class="tabs">\r
239                     <ul>\r
240                         <li><a href="#nemo_str_show">NEMO Language</a></li>\r
241                     </ul>\r
242                     <div id="nemo_str_show"></div>\r
243                    </div>\r
244                </div>\r
245 \r
246                <div id="VirNet">\r
247                 <div id="vir_graph"></div>\r
248                 <div id='virtualTables'>\r
249 \r
250                    <table class='tableHead' border='1'>\r
251                     <caption>Virtual Node</caption>\r
252                     <colgroup>\r
253                     <col style="width: 20%;"/>\r
254                     <col style="width: 20%;" />\r
255                     <col style="width: 20%;"/>\r
256                     <col style="width: 20%;" />\r
257                     <col style="width: 20%;"/>\r
258                     </colgroup>\r
259                        <tr>\r
260                         <th>Virtual Node ID</th><th>Virtual Node Name</th>\r
261                         <th>Virtual Node Type</th>\r
262                         <th>Internal Virtual Port Number</th><th>External Virtual Port Number</th>\r
263                         </tr>\r
264                    </table>\r
265 \r
266                     <div class='tableBodyContainer'>\r
267                     <table id="virNodeTab" border='1'>\r
268                     <colgroup>\r
269                     <col style="width: 20%;"/>\r
270                     <col style="width: 20%;" />\r
271                     <col style="width: 20%;"/>\r
272                     <col style="width: 20%;" />\r
273                     <col style="width: 20%;"/>\r
274                     </colgroup>\r
275                    </table>\r
276                     </div>\r
277                \r
278                    <table class='tableHead' border='1'>\r
279                     <caption>Virtual Link</caption>\r
280                     <colgroup>\r
281                     <col style="width: 20%;" />\r
282                     <col style="width: 20%;"/>\r
283                     <col style="width: 20%;" />\r
284                     <col style="width: 20%;"/>\r
285                     <col style="width: 10%;" />\r
286                     <col style="width: 10%;"/>\r
287                     </colgroup>\r
288                        <tr>\r
289                         <th>Virtual Link ID</th><th>Virtual Link Name</th>\r
290                         <th>Source Virtual Node</th>\r
291                        <th>Destination Virtual Node</th>\r
292                        <!-- <th>Metric</th> -->\r
293                        <th>Bandwidth</th> <th>Delay</th>\r
294                        </tr>\r
295                    </table>\r
296                \r
297 \r
298                     <div class='tableBodyContainer'>\r
299                     <table id="virLinkTab" border='1'>\r
300                       <colgroup>\r
301                     <col style="width: 20%;" />\r
302                     <col style="width: 20%;"/>\r
303                     <col style="width: 20%;" />\r
304                     <col style="width: 20%;"/>\r
305                     <col style="width: 10%;" />\r
306                     <col style="width: 10%;"/>\r
307                     </colgroup>\r
308                    </table>\r
309                    </div>\r
310                     </div>\r
311                </div>\r
312                <div id="Mapping">\r
313                     \r
314                     <div id='mappingTable'>\r
315                    <table class='tableHead' border='1'>\r
316                     <caption>Virtual Node Mapping Table</caption>\r
317                     <colgroup>\r
318                     <col style="width: 50%;" />\r
319                     <col style="width: 50%;"/>\r
320                     </colgroup>\r
321                        <tr><th>Virtual Node</th><th>Physical Node</th></tr>\r
322                    </table>\r
323                     \r
324                    <div class='tableBodyContainer'>\r
325                    <table id="mapVirNodeTab" border='1'>\r
326                     <colgroup>\r
327                     <col style="width: 50%;" />\r
328                     <col style="width: 50%;"/>\r
329                     </colgroup>\r
330                    </table>\r
331                     </div> \r
332 \r
333                      <table class='tableHead' border='1'>\r
334                     <caption>Virtual Link Mapping Table</caption>\r
335                     <colgroup>\r
336                     <col style="width: 20%;">\r
337                     <col style="width: 15%;">\r
338                     <col style="width: 15%;">\r
339                     <col style="width: 20%;">\r
340                     <col style="width: 30%;">\r
341                     </colgroup>                     \r
342                        <tr>\r
343                         <th>Virtual Link</th><th>Source Virtual Node</th>\r
344                        <th>Destination Virtual Node</th><th>Physical Path</th>\r
345                        <th>Physical Nodes passed by Path</th>\r
346                        </tr>\r
347                    </table>\r
348                     \r
349                     <div class='tableBodyContainer'>\r
350                     <table id="mapVirLinkTab" border='1'>\r
351                     <colgroup>\r
352                     <col style="width: 20%;">\r
353                     <col style="width: 15%;">\r
354                     <col style="width: 15%;">\r
355                     <col style="width: 20%;">\r
356                     <col style="width: 30%;">\r
357                     </colgroup>\r
358                    </table>\r
359                    </div>\r
360                   </div>\r
361                </div>\r
362         </div>\r
363 \r
364 \r
365         <!-- dialog start -->\r
366         <div id="dialog" title="info" style='display:none;'>\r
367             <p>\r
368             <!-- Create By LiuTong , 2015-12-06   -->\r
369             </p>\r
370         </div>\r
371         <!-- dialog end -->\r
372 </body>\r
373 </html>\r