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=['myuser1','myuser2','myuser3'];\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              analy_topo(physicalData);\r
  61              create_physical_topo();\r
  62         });\r
  63         \r
  64         $(".tabs ul li[aria-controls='PhyNet']").click();\r
  65 \r
  66         $(".tabs ul li[aria-controls='intent_info']").click(function(){\r
  67             //alert('intent_topo');\r
  68             var userId=$("#selectUser option:selected").val();\r
  69             console.log(userId);\r
  70 \r
  71             // SFC\r
  72             //userId='af4fc2be-e3f4-4388-a8ef-3aabae872f2b';\r
  73             //Bod\r
  74             //userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b'\r
  75              //if(userId=='0') userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b';\r
  76             console.log(userId);\r
  77             var user_data = getIntentInfoById(userId);\r
  78           // console.log(JSON.stringify(user_data));\r
  79             analyjson_topo(user_data);\r
  80             parseNemoLan(user_data);\r
  81         //set keyWords style\r
  82         $("#nemo_str_show p").each(function(){\r
  83             var $res=$(this);\r
  84             keyWords.forEach(function(item,index,array){\r
  85                 // console.log(item);\r
  86                 $res.html($res.html().replace(item,"<span class='keyWords'>"+item+"</span>"));\r
  87             });\r
  88         });\r
  89     });\r
  90 \r
  91         $(".tabs ul li[aria-controls='VirNet']").click(function(){\r
  92             // alert('VirNet');\r
  93            // var virtualData=getVirtualJson();\r
  94             var userId=$("#selectUser option:selected").val();\r
  95 \r
  96             // SFC\r
  97             //userId='af4fc2be-e3f4-4388-a8ef-3aabae872f2b';\r
  98             //Bod\r
  99             //userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b'\r
 100 \r
 101              //if(userId=='0') userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b';\r
 102             console.log(userId);\r
 103             // virtualData=virtualJson;\r
 104             create_virtual_topo(getVirtualInfoById(userId),getIntentInfoById(userId),getMappingResultById(userId));\r
 105         });\r
 106         $(".tabs ul li[aria-controls='Mapping']").click(function(){\r
 107             // alert('Mapping');\r
 108         });\r
 109 \r
 110          // $(".tabs ul li[aria-controls='intent_info']").click();\r
 111 \r
 112         $('#selectUser input[type=button]').click(function(){\r
 113             // $(".tabs ul li[aria-controls='intent_info']").trigger('click');\r
 114             $('a[href="#intent_info"]').click();\r
 115             var userId=$("#selectUser option:selected").val();\r
 116             \r
 117             // SFC\r
 118             //userId='af4fc2be-e3f4-4388-a8ef-3aabae872f2b';\r
 119             //Bod\r
 120             //userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b'\r
 121 \r
 122             //if(userId=='0') userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b';\r
 123             var user_data = getIntentInfoById(userId);\r
 124           // console.log(JSON.stringify(user_data));\r
 125             analyjson_topo(user_data);\r
 126             parseNemoLan(user_data);\r
 127         //set keyWords style\r
 128            $("#nemo_str_show p").each(function(){\r
 129             var $res=$(this);\r
 130             keyWords.forEach(function(item,index,array){\r
 131                 // console.log(item);\r
 132                 $res.html($res.html().replace(item,"<span class='keyWords'>"+item+"</span>"));\r
 133             });\r
 134             // console.log($res.html());\r
 135         });\r
 136 \r
 137             // alert(userName);\r
 138     });\r
 139         });\r
 140     </script>\r
 141 </head>\r
 142 <body>\r
 143       <div class="header">\r
 144         <p>Hello Admin!</p>\r
 145         <div id='selectUser'>\r
 146             <p>Tenant:</p>\r
 147             <select value="intentUser">\r
 148             </select>\r
 149             <input type="button" class='btn_' value='Query'/></div>\r
 150       </div>\r
 151 \r
 152         <div class="group">\r
 153                 <div class="tabs">\r
 154                     <ul>\r
 155                         <li><a href="#PhyNet">Physical Network</a></li>\r
 156                         <li><a href="#intent_info">NEMO Intent</a></li>\r
 157                         <li><a href="#VirNet">Virtual Network</a></li>\r
 158                         <li><a href="#Mapping">VN-PN Mapping</a></li>\r
 159                     </ul>\r
 160                 <div id='PhyNet'>\r
 161                     <div id="phy_graph"></div>\r
 162                 </div>\r
 163 \r
 164                 <div id="intent_info">\r
 165                      <div id="intent_topo">\r
 166                     <svg id="service_svg"  width="800" height="560"  viewBox="100 40 900 780" style='display:none'>\r
 167                     <defs>\r
 168                     <marker id="idArrow" 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
 169                     <marker id="idtext" 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
 170                     </defs>\r
 171                     </svg>\r
 172 \r
 173                     <svg id="service_svg2"  width="800" height="560"  viewBox="100 40 900 780">\r
 174                     <defs>\r
 175                     <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
 176                     <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
 177                     </defs>\r
 178                     </svg>\r
 179                    </div>\r
 180                     \r
 181                    <div class="tabs">\r
 182                     <ul>\r
 183                         <li><a href="#nemo_str_show">NEMO Language</a></li>\r
 184                     </ul>\r
 185                     <div id="nemo_str_show"></div>\r
 186                    </div>\r
 187                </div>\r
 188 \r
 189                <div id="VirNet"><div id="vir_graph"></div></div>\r
 190                <div id="Mapping"></div>\r
 191         </div>\r
 192 \r
 193 \r
 194         <!-- dialog start -->\r
 195         <div id="dialog" title="info" style='display:none;'>\r
 196             <p>\r
 197             <!-- Create By LiuTong , 2015-12-06   -->\r
 198             </p>\r
 199         </div>\r
 200         <!-- dialog end -->\r
 201 </body>\r
 202 </html>\r