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              createPhysicalTopo();\r
  61              analy_topo(physicalData);\r
  62              // create_physical_topo();\r
  63               creataPhysicalTables.createPhyicalNodeTable('phyNodeTab',null)\r
  64               creataPhysicalTables.createPhyicalLinkTable('phyLinkTab',null)\r
  65         });\r
  66 \r
  67         $(".tabs ul li[aria-controls='PhyNet']").click();\r
  68 \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
  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             $('#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);\r
  84             if(!user_data) return;\r
  85 \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 virtualData=getVirtualJson();\r
  99             var userId=$("#selectUser option:selected").val();\r
 100             jQuery('#vir_graph').empty();\r
 101             jQuery("#virNodeTab").find('tr:gt(0)').empty();\r
 102             jQuery("#virLinkTab").find('tr:gt(0)').empty();\r
 103             // SFC\r
 104             //userId='af4fc2be-e3f4-4388-a8ef-3aabae872f2b';\r
 105             //Bod\r
 106             //userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b'\r
 107 \r
 108             //if(userId=='0') userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b';\r
 109             // virtualData=virtualJson;\r
 110 \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
 116         });\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:gt(0)').empty();\r
 122             jQuery("#mapVirLinkTab").find('tr:gt(0)').empty();\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
 133         });\r
 134 \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
 139             \r
 140             // SFC\r
 141             //userId='af4fc2be-e3f4-4388-a8ef-3aabae872f2b';\r
 142             //Bod\r
 143             //userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b'\r
 144 \r
 145             if(!IntentInfos) return;\r
 146             var user_data = getIntentInfoById(userId);\r
 147             if(!user_data) return;\r
 148             \r
 149             analyjson_topo(user_data);\r
 150             parseNemoLan(user_data);\r
 151             \r
 152             //set keyWords style\r
 153            $("#nemo_str_show p").each(function(){\r
 154             var $res=$(this);\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
 158             });\r
 159         });\r
 160 \r
 161     });\r
 162 \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
 167        });\r
 168 \r
 169         });\r
 170     </script>\r
 171 </head>\r
 172 <body>\r
 173       <div class="header">\r
 174         <p>Hello Admin!</p><span id='logout'>Logout</span>\r
 175         <div id='selectUser'>\r
 176             <p>Tenant:</p>\r
 177             <select value="intentUser">\r
 178             </select>\r
 179             <input type="button" class='btn_' value='Query'/></div>\r
 180       </div>\r
 181 \r
 182         <div class="group">\r
 183                 <div class="tabs">\r
 184                     <ul>\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
 189                     </ul>\r
 190                 <div id='PhyNet'>\r
 191                     <div id="phy_graph"></div>\r
 192                     <div id='physicalTables'>\r
 193                       <table class='tableHead'>\r
 194                         <caption>Physical Node</caption>\r
 195                          <colgroup>\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
 200                          </colgroup>\r
 201                         <tr>\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
 204                         </tr>\r
 205                       </table>\r
 206 \r
 207                       <div class='tableBodyContainer'>\r
 208                          <table id="phyNodeTab" border='1'>\r
 209                          <colgroup>\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
 214                          </colgroup>\r
 215                          </table>\r
 216                       </div>\r
 217 \r
 218                         <table class='tableHead'>\r
 219                         <caption>Physical Link</caption>\r
 220                          <colgroup>\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
 227                          </colgroup>\r
 228                         <tr>\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
 232                         </tr>\r
 233                      </table>\r
 234                     \r
 235                     <div class='tableBodyContainer'>\r
 236                     <table id="phyLinkTab" border='1'>                    \r
 237                        <colgroup>\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
 244                          </colgroup>\r
 245                     </table>\r
 246                     </div>\r
 247                     \r
 248                     </div>\r
 249                 </div>\r
 250 \r
 251                 <div id="intent_info">\r
 252                      <div id="intent_topo">\r
 253                     \r
 254                     <svg id="service_svg2"  width="800" height="560"  viewBox="100 40 900 780">\r
 255                     <defs>\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
 258                     </defs>\r
 259                     </svg>\r
 260                    </div>\r
 261                     \r
 262                    <div class="tabs">\r
 263                     <ul>\r
 264                         <li><a href="#nemo_str_show">NEMO Language</a></li>\r
 265                     </ul>\r
 266                     <div id="nemo_str_show"></div>\r
 267                    </div>\r
 268                </div>\r
 269 \r
 270                <div id="VirNet">\r
 271                 <div id="vir_graph"></div>\r
 272                 <div id='virtualTables'>\r
 273 \r
 274                    <table class='tableHead' border='1'>\r
 275                     <caption>Virtual Node</caption>\r
 276                     <colgroup>\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
 282                     </colgroup>\r
 283                        <tr>\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
 287                         </tr>\r
 288                    </table>\r
 289 \r
 290                     <div class='tableBodyContainer'>\r
 291                     <table id="virNodeTab" border='1'>\r
 292                     <colgroup>\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
 298                     </colgroup>\r
 299                    </table>\r
 300                     </div>\r
 301                \r
 302                    <table class='tableHead' border='1'>\r
 303                     <caption>Virtual Link</caption>\r
 304                     <colgroup>\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
 311                     </colgroup>\r
 312                        <tr>\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
 318                        </tr>\r
 319                    </table>\r
 320                \r
 321 \r
 322                     <div class='tableBodyContainer'>\r
 323                     <table id="virLinkTab" border='1'>\r
 324                       <colgroup>\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
 331                     </colgroup>\r
 332                    </table>\r
 333                    </div>\r
 334                     </div>\r
 335                </div>\r
 336                <div id="Mapping">\r
 337                     \r
 338                     <div id='mappingTable'>\r
 339                    <table class='tableHead' border='1'>\r
 340                     <caption>Virtual Node Mapping Table</caption>\r
 341                     <colgroup>\r
 342                     <col style="width: 50%;" />\r
 343                     <col style="width: 50%;"/>\r
 344                     </colgroup>\r
 345                        <tr><th>Virtual Node</th><th>Physical Node</th></tr>\r
 346                    </table>\r
 347                     \r
 348                    <div class='tableBodyContainer'>\r
 349                    <table id="mapVirNodeTab" border='1'>\r
 350                     <colgroup>\r
 351                     <col style="width: 50%;" />\r
 352                     <col style="width: 50%;"/>\r
 353                     </colgroup>\r
 354                    </table>\r
 355                     </div> \r
 356 \r
 357                      <table class='tableHead' border='1'>\r
 358                     <caption>Virtual Link Mapping Table</caption>\r
 359                     <colgroup>\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
 365                     </colgroup>                     \r
 366                        <tr>\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
 370                        </tr>\r
 371                    </table>\r
 372                     \r
 373                     <div class='tableBodyContainer'>\r
 374                     <table id="mapVirLinkTab" border='1'>\r
 375                     <colgroup>\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
 381                     </colgroup>\r
 382                    </table>\r
 383                    </div>\r
 384                   </div>\r
 385                </div>\r
 386         </div>\r
 387 \r
 388 \r
 389         <!-- dialog start -->\r
 390         <div id="dialog" title="info" style='display:none;'>\r
 391             <p>\r
 392             <!-- Create By LiuTong , 2015-12-06   -->\r
 393             </p>\r
 394         </div>\r
 395         <!-- dialog end -->\r
 396 </body>\r
 397 </html>\r