Code Review / nemo.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | review | tree
raw | inline | side by side
Modify nemo-ui(add table scrollBar)
[nemo.git] / nemo-ui / src / main / resources / nemo / nemo.tpl.html
diff --git a/nemo-ui/src/main/resources/nemo/nemo.tpl.html b/nemo-ui/src/main/resources/nemo/nemo.tpl.html
index 40350c285b731cd3f1d9efc5c64342bd0156cdbf..0d3da448806d8a81fca2032f0dc9e68ef00d346a 100644 (file)
--- a/nemo-ui/src/main/resources/nemo/nemo.tpl.html
+++ b/nemo-ui/src/main/resources/nemo/nemo.tpl.html
@@ -6,7 +6,7 @@
     <link href="src/app/nemo/css/nemo_user_main.css" rel="stylesheet" />\r
     <link href="src/app/nemo/css/nemo_main.css" rel="stylesheet" />\r
 \r
-     <!-- // <script src="src/app/nemo/module/migrate_js.js"></script> -->\r
+    <!-- // <script src="src/app/nemo/module/migrate_js.js"></script> -->\r
     <script src="src/app/nemo/js/Nemo_Main.js"></script>\r
     <script src="src/app/nemo/module/keyWords.js"></script>\r
     <script src="src/app/nemo/module/migrate.js"></script>\r
@@ -72,15 +72,15 @@
             console.log(userId);\r
 \r
             // SFC\r
-            //userId='af4fc2be-e3f4-4388-a8ef-3aabae872f2b';\r
+            // userId='af4fc2be-e3f4-4388-a8ef-3aabae872f2b';\r
             //Bod\r
-            //userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b'\r
-             //if(userId=='0') userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b';\r
+            // var userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b'\r
+             // if(userId=='0') userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b';\r
             $('#service_svg2').empty();\r
             $("#nemo_str_show").empty();\r
             console.log(userId);\r
             if(!IntentInfos) return;\r
-            var user_data = getIntentInfoById(userId);\r
+            var user_data = getIntentInfoById(userId,userinfo);\r
             if(!user_data) return;\r
 \r
             analyjson_topo(user_data);\r
@@ -98,18 +98,18 @@
            // var virtualData=getVirtualJson();\r
             var userId=$("#selectUser option:selected").val();\r
             jQuery('#vir_graph').empty();\r
-            jQuery("#virNodeTab").find('tr:gt(1)').empty();\r
-            jQuery("#virLinkTab").find('tr:gt(1)').empty();\r
+            jQuery("#virNodeTab").find('tr').remove();\r
+            jQuery("#virLinkTab").find('tr').remove();\r
             // SFC\r
             //userId='af4fc2be-e3f4-4388-a8ef-3aabae872f2b';\r
             //Bod\r
             //userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b'\r
 \r
-            //if(userId=='0') userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b';\r
+            // if(userId=='0') userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b';\r
             // virtualData=virtualJson;\r
 \r
-            if(!IntentInfos||!MappingResults||!VirtualDatas) return;\r
-            if(!getVirtualInfoById(userId)||!getIntentInfoById(userId)||!getMappingResultById(userId)) return;\r
+             if(!IntentInfos||!MappingResults||!VirtualDatas) return;\r
+             if(!getVirtualInfoById(userId)||!getIntentInfoById(userId)||!getMappingResultById(userId)) return;\r
             create_virtual_topo(getVirtualInfoById(userId),getIntentInfoById(userId),getMappingResultById(userId));\r
             creataVirtualTables.createVirtualNodeTable('virNodeTab',getVirtualInfoById(userId));\r
             creataVirtualTables.createVirtualLinkTable('virLinkTab',getVirtualInfoById(userId));\r
@@ -117,14 +117,15 @@
          // $(".tabs ul li[aria-controls='Mapping']").click();\r
         $(".tabs ul li[aria-controls='Mapping']").click(function(){\r
             var userId=$("#selectUser option:selected").val();\r
-            //if(userId=='0') userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b';\r
-            jQuery("#mapVirNodeTab").find('tr:gt(1)').empty();\r
-            jQuery("#mapVirLinkTab").find('tr:gt(1)').empty();\r
-            if(!physicalData||!PnMappingResults||!VirtualDatas) return;\r
+            // userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b';\r
+            jQuery("#mapVirNodeTab").find('tr').remove();\r
+            jQuery("#mapVirLinkTab").find('tr').remove();\r
+             if(!physicalData||!PnMappingResults||!VirtualDatas) return;\r
             var virtualData = getVirtualInfoById(userId);\r
-            if(!virtualData) return;\r
-            if(!getPnMappingResultById(userId)) return;\r
+             if(!virtualData) return;\r
+             if(!getPnMappingResultById(userId)) return;\r
             // console.log(createMappingTables);\r
+            console.log(virtualData);\r
               createMappingTables.createVirtualNodeTable('mapVirNodeTab',virtualData);\r
             // console.log(linkArray);\r
               createMappingTables.createVirtualLinkTable('mapVirLinkTab',virtualData,getPnMappingResultById(userId),physicalData);\r
@@ -141,13 +142,14 @@
             //Bod\r
             //userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b'\r
 \r
-            //if(userId=='0') userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b';\r
-            if(!intent_info) return;\r
+            if(!IntentInfos) return;\r
             var user_data = getIntentInfoById(userId);\r
             if(!user_data) return;\r
+            \r
             analyjson_topo(user_data);\r
             parseNemoLan(user_data);\r
-        //set keyWords style\r
+            \r
+            //set keyWords style\r
            $("#nemo_str_show p").each(function(){\r
             var $res=$(this);\r
             keyWords.forEach(function(item,index,array){\r
@@ -159,11 +161,9 @@
     });\r
 \r
        $('#logout').click(function(){\r
-        // alert(1);\r
         setCookie('nemo_userpwd','',-1);\r
         $("#pageContent").empty();\r
         $("#pageContent").load('src/app/nemo/register.html');\r
-        // alert(2);\r
        });\r
 \r
         });\r
@@ -190,29 +190,68 @@
                 <div id='PhyNet'>\r
                     <div id="phy_graph"></div>\r
                     <div id='physicalTables'>\r
-                         <table id="phyNodeTab" border='1'>\r
-                    <caption>Physical Node</caption>\r
-                       <tr>\r
+                      <table class='tableHead'>\r
+                        <caption>Physical Node</caption>\r
+                         <colgroup>\r
+                         <col style="width: 25%;"/>\r
+                         <col style="width: 25%;" />\r
+                         <col style="width: 25%;"/>\r
+                         <col style="width: 25%;" />\r
+                         </colgroup>\r
+                        <tr>\r
                         <th>Physical Node ID</th><th>Physical Node Type</th>\r
                         <th>Internal Physical Port Number</th><th>External Physical Port Number</th>\r
                         </tr>\r
-                   </table>\r
+                      </table>\r
 \r
-                    <table id="phyLinkTab" border='1'>\r
-                    <caption>Physical Link</caption>\r
-                       <tr>\r
+                      <div class='tableBodyContainer'>\r
+                         <table id="phyNodeTab" border='1'>\r
+                         <colgroup>\r
+                         <col style="width: 25%;"/>\r
+                         <col style="width: 25%;" />\r
+                         <col style="width: 25%;"/>\r
+                         <col style="width: 25%;" />\r
+                         </colgroup>\r
+                         </table>\r
+                      </div>\r
+\r
+                        <table class='tableHead'>\r
+                        <caption>Physical Link</caption>\r
+                         <colgroup>\r
+                         <col style="width: 30%;"/>\r
+                         <col style="width: 20%;" />\r
+                         <col style="width: 20%;"/>\r
+                         <col style="width: 10%;" />\r
+                         <col style="width: 10%;" />\r
+                         <col style="width: 10%;" />\r
+                         </colgroup>\r
+                        <tr>\r
                         <th>Physical Link ID</th><th>Source Physical Node</th>\r
-                       <th>Destination Physical Node</th><th>Metric</th>\r
-                       <th>Bandwidth</th> <th>Delay</th>\r
-                       </tr>\r
-                   </table>\r
+                        <th>Destination Physical Node</th><th>Metric</th>\r
+                        <th>Bandwidth</th><th>Delay</th>\r
+                        </tr>\r
+                     </table>\r
+                    \r
+                    <div class='tableBodyContainer'>\r
+                    <table id="phyLinkTab" border='1'>                    \r
+                       <colgroup>\r
+                         <col style="width: 30%;"/>\r
+                         <col style="width: 20%;" />\r
+                         <col style="width: 20%;"/>\r
+                         <col style="width: 10%;" />\r
+                         <col style="width: 10%;" />\r
+                         <col style="width: 10%;" />\r
+                         </colgroup>\r
+                    </table>\r
+                    </div>\r
+                    \r
                     </div>\r
                 </div>\r
 \r
                 <div id="intent_info">\r
                      <div id="intent_topo">\r
                     \r
-                    <svg id="service_svg2"  width="800" height="560"  viewBox="100 40 900 780">\r
+                    <svg id="service_svg2"  width="800" height="560"  viewBox="100 20 900 780">\r
                     <defs>\r
                     <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
                     <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
@@ -231,8 +270,16 @@
                <div id="VirNet">\r
                 <div id="vir_graph"></div>\r
                 <div id='virtualTables'>\r
-                         <table id="virNodeTab" border='1'>\r
+\r
+                   <table class='tableHead' border='1'>\r
                     <caption>Virtual Node</caption>\r
+                    <colgroup>\r
+                    <col style="width: 20%;"/>\r
+                    <col style="width: 20%;" />\r
+                    <col style="width: 20%;"/>\r
+                    <col style="width: 20%;" />\r
+                    <col style="width: 20%;"/>\r
+                    </colgroup>\r
                        <tr>\r
                         <th>Virtual Node ID</th><th>Virtual Node Name</th>\r
                         <th>Virtual Node Type</th>\r
@@ -240,8 +287,28 @@
                         </tr>\r
                    </table>\r
 \r
-                    <table id="virLinkTab" border='1'>\r
+                    <div class='tableBodyContainer'>\r
+                    <table id="virNodeTab" border='1'>\r
+                    <colgroup>\r
+                    <col style="width: 20%;"/>\r
+                    <col style="width: 20%;" />\r
+                    <col style="width: 20%;"/>\r
+                    <col style="width: 20%;" />\r
+                    <col style="width: 20%;"/>\r
+                    </colgroup>\r
+                   </table>\r
+                    </div>\r
+               \r
+                   <table class='tableHead' border='1'>\r
                     <caption>Virtual Link</caption>\r
+                    <colgroup>\r
+                    <col style="width: 20%;" />\r
+                    <col style="width: 20%;"/>\r
+                    <col style="width: 20%;" />\r
+                    <col style="width: 20%;"/>\r
+                    <col style="width: 10%;" />\r
+                    <col style="width: 10%;"/>\r
+                    </colgroup>\r
                        <tr>\r
                         <th>Virtual Link ID</th><th>Virtual Link Name</th>\r
                         <th>Source Virtual Node</th>\r
@@ -250,22 +317,71 @@
                        <th>Bandwidth</th> <th>Delay</th>\r
                        </tr>\r
                    </table>\r
+               \r
+\r
+                    <div class='tableBodyContainer'>\r
+                    <table id="virLinkTab" border='1'>\r
+                      <colgroup>\r
+                    <col style="width: 20%;" />\r
+                    <col style="width: 20%;"/>\r
+                    <col style="width: 20%;" />\r
+                    <col style="width: 20%;"/>\r
+                    <col style="width: 10%;" />\r
+                    <col style="width: 10%;"/>\r
+                    </colgroup>\r
+                   </table>\r
+                   </div>\r
                     </div>\r
                </div>\r
                <div id="Mapping">\r
-                   <table id="mapVirNodeTab" border='1'>\r
+                    \r
+                    <div id='mappingTable'>\r
+                   <table class='tableHead' border='1'>\r
                     <caption>Virtual Node Mapping Table</caption>\r
+                    <colgroup>\r
+                    <col style="width: 50%;" />\r
+                    <col style="width: 50%;"/>\r
+                    </colgroup>\r
                        <tr><th>Virtual Node</th><th>Physical Node</th></tr>\r
                    </table>\r
+                    \r
+                   <div class='tableBodyContainer'>\r
+                   <table id="mapVirNodeTab" border='1'>\r
+                    <colgroup>\r
+                    <col style="width: 50%;" />\r
+                    <col style="width: 50%;"/>\r
+                    </colgroup>\r
+                   </table>\r
+                    </div> \r
 \r
-                    <table id="mapVirLinkTab" border='1'>\r
+                     <table class='tableHead' border='1'>\r
                     <caption>Virtual Link Mapping Table</caption>\r
+                    <colgroup>\r
+                    <col style="width: 20%;">\r
+                    <col style="width: 15%;">\r
+                    <col style="width: 15%;">\r
+                    <col style="width: 20%;">\r
+                    <col style="width: 30%;">\r
+                    </colgroup>                     \r
                        <tr>\r
                         <th>Virtual Link</th><th>Source Virtual Node</th>\r
                        <th>Destination Virtual Node</th><th>Physical Path</th>\r
                        <th>Physical Nodes passed by Path</th>\r
                        </tr>\r
                    </table>\r
+                    \r
+                    <div class='tableBodyContainer'>\r
+                    <table id="mapVirLinkTab" border='1'>\r
+                    <colgroup>\r
+                    <col style="width: 20%;">\r
+                    <col style="width: 15%;">\r
+                    <col style="width: 15%;">\r
+                    <col style="width: 20%;">\r
+                    <col style="width: 30%;">\r
+                    </colgroup>\r
+                   </table>\r
+                   </div>\r
+                  </div>\r
                </div>\r
         </div>\r
 \r
NEMO: A Language Style NBI