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