Modify nemo-ui(add table scrollBar)
[nemo.git] / nemo-ui / src / main / resources / nemo / nemo.tpl.html
index 69be44dbe293ef1b606d1d862203f23378c71122..0d3da448806d8a81fca2032f0dc9e68ef00d346a 100644 (file)
@@ -1,53 +1,28 @@
 <html xmlns="http://www.w3.org/1999/xhtml">\r
 <head>\r
     <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />\r
-    <title>nemo-ui-cn</title>\r
+    <title>nemo-ui-en</title>\r
     <link href="src/app/nemo/css/jquery-ui.min.css" rel="stylesheet" />\r
+    <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
-    <link rel="stylesheet" href="src/app/nemo/css/SI.css">\r
-    <link rel="stylesheet" href="src/app/nemo/css/NE.css">\r
-    <link href="src/app/nemo/css/SP.css" rel="stylesheet" />\r
-    <link rel="stylesheet" href="src/app/nemo/css/RR.css">\r
-    <link rel="stylesheet" href="src/app/nemo/css/AQ.css">\r
-\r
-    <script src="js/jquery-1.11.3.min.js"></script>\r
-    <script src="js/jquery-ui.min.js"></script>\r
 \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
+    <!-- SFC -->\r
+     <!-- // <script src="src/app/nemo/module/test/servicechain_userJson.js"></script>  -->\r
+    <!-- Bod -->\r
+    <!-- // <script src="src/app/nemo/module/test/bod_userJson.js"></script>  -->\r
 \r
-    <script src="src/app/nemo/js/vis.js"></script>\r
-    <script src="src/app/nemo/js/jquery.shCircleLoader-min.js"></script>\r
     <script src="src/app/nemo/js/Nemo_Annouce_vis.js"></script>\r
-    <script src="src/app/nemo/js/Nemo_Main.js"></script>\r
-    <script src="src/app/nemo/js/Service_Instance.js"></script>\r
-       <script src="src/app/nemo/js/analyjson.js"></script>\r
-    <script src="src/app/nemo/js/Network_Entity.js"></script>\r
-    <script src="src/app/nemo/js/Service_Policy.js"></script>\r
-    <script type="text/javascript" src="src/app/nemo/js/submit.js" charset="utf-8"></script>\r
-    <script src="src/app/nemo/js/scrollrun.js"></script>\r
-    <script src="src/app/nemo/js/EI_tranjson.js"></script>\r
-    <script src="src/app/nemo/js/topo_data.js"></script>\r
+    <script src="src/app/nemo/js/phyNetwork.js"></script>\r
+    <script src="src/app/nemo/js/intentTopo.js"></script>\r
+    <script src="src/app/nemo/js/vnMapping.js"></script>\r
+    <script src="src/app/nemo/js/virNetwork.js"></script>\r
 \r
     <script>\r
-\r
-      var hostname = document.location.hostname;\r
-               var user_id = 1;\r
-               var user_password = 2;\r
-               var user_name = 3;\r
-               var user_role = 4;\r
-        var service_select = "";\r
-        var json_data, json_str;\r
-        nodes.add({\r
-            id: 100000,\r
-            group: 'null',\r
-            x: 700,\r
-            y: 400 \r
-        });\r
-               var user_str = localStorage.getItem("useinfo").split(",");\r
-               user_id = user_str[0];\r
-               user_name = user_str[1];\r
-               user_password = user_str[2];\r
-               user_role = user_str[3];\r
-\r
+   \r
         function guid() {\r
             function S4() {\r
                 return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);\r
             return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());\r
         }\r
 \r
-\r
         jQuery(document).ready(function ($) {\r
-            //$('#loader').shCircleLoader();\r
+        var userNames=['--default--'];\r
+        jQuery.ajax({\r
+            url: "/restconf/config/nemo-intent:users/",\r
+            type: "GET",\r
+            async: false,\r
+            dataType: "json",\r
+            success: function(data) {\r
+                console.log(data);\r
+            userNames=[];\r
+            var data_list=data["users"]["user"];\r
+            for (var item in data_list) {\r
+            userNames[data_list[item]['user-id']]=data_list[item]['user-name'];           \r
+            }\r
+            },\r
+            error: function(data) {\r
+                console.log(data);\r
+            }\r
+        });\r
+        //add useruame to select \r
+        $("#selectUser select").empty();\r
+        for(var item in userNames){\r
+            $("#selectUser select").append('<option value="'+item+'">'+userNames[item]+'</option>');\r
+        }\r
         \r
-            $(".id_").each(function () { $(this).val(guid()).attr("disabled", "true") });\r
 \r
+        $(".tabs ul li[aria-controls='PhyNet']").click(function(){\r
+             createPhysicalTopo();\r
+             analy_topo(physicalData);\r
+             // create_physical_topo();\r
+              creataPhysicalTables.createPhyicalNodeTable('phyNodeTab',null)\r
+              creataPhysicalTables.createPhyicalLinkTable('phyLinkTab',null)\r
         });\r
-    </script>\r
-</head>\r
-<body>\r
-    <div class="group">\r
-\r
-        <div class="group_left">\r
-            <div class="title tt">\r
-                <h2>Service Configuration</h2>\r
-            </div>\r
-\r
-            <div class="btn_group">\r
-                <button class="btn_item" id="ser_init" >Service Instance</button>\r
-\r
-                <button class="btn_item" id="nemo-business-model">Service Modeling</button>\r
-\r
-                <button class="btn_item" id="net_ent_init">Network Entity</button>\r
-\r
-                <button class="btn_item" id="ser_poc_init">Service Policy</button>\r
-\r
-                <button class="btn_item" id="advance_query" style="display: none;">Advance Query</button>\r
-\r
-                <button class="btn_item">Resource Mapping Info</button>\r
-\r
-            </div>\r
-\r
-            <div class="btn_item_show" id="ser_inst_show">\r
-                <div class="Si_group">\r
-\r
-                    <div class="close_item_show">\r
-                        <img src="src/app/nemo/images/shut.png" />\r
-                    </div>\r
-                    <div class="h3_style">\r
-                        <h3>Service Instance</h3>\r
-                    </div>\r
-                    <p>Service Instance List:</p>\r
-                    <div class="select_btn">\r
-                        <select class="select_item">\r
-                        </select>\r
-                        <div class="btn_group_less">\r
-                            <input type="button" id="SI_Add" class="btn_ btn_SI" value="Add" />\r
-                            <input type="button" id="SI_Edit" class="btn_ btn_SI" value="Edit" />\r
-                            <input type="button" id="SI_Delete" class="btn_ btn_SI" value="Delete" />\r
-                        </div>\r
-                    </div>\r
-                    <div id="Add_show">\r
-                        <img class="close_group" src="src/app/nemo/images/shut.png" alt="close" />\r
-                        <span class="second_title">Service Name:</span><input class="text_item name_text" type="text" />\r
-                        <span class="second_title">Service Description:</span>\r
-                        <input class="text_item desc_text" type="text" />\r
-\r
-                        <input type="button" id="SI_Save" class="btn_ save_group" value="Save" />\r
-                    </div>\r
-\r
-                </div>\r
-            </div>\r
-\r
-            <div class="btn_item_show"></div>\r
-\r
-            <div class="btn_item_show">\r
-\r
-                <div class="close_item_show">\r
-                    <img src="src/app/nemo/images/shut.png" />\r
-                </div>\r
-\r
-                <div class="NE_up">\r
-                    <div class="up_group1" id="up_service_name">\r
-                        <div class="h3_style">\r
-                            <h3>Network Entity</h3>\r
-                        </div>\r
-                        <span class="second_title NE_serviceName">Service Name:</span>\r
-                        <select id="sel_1"></select>\r
-                    </div>\r
-                    <div class="up_group1 up_group1_2">\r
-                        <span class="second_title">Entity Instance List:</span>\r
-                        <select id="sel_2"></select>\r
-                    </div>\r
-                    <input type="button" id="NE_Edit" name="name" class="btn_" value="Edit" />\r
-                    <input type="button" id="NE_Delete" name="name" class="btn_" value="Delete" />\r
-                    <div id="up_down">\r
-                        <span class="second_title">Entity Type:</span>\r
-                        <select id="entity_type">\r
-                            <option value="node">node</option>\r
-                            <option value="connection">connection</option>\r
-                            <option value="flow">flow</option>\r
-                        </select>\r
-                        <input type="button" name="name" id="add_entity" class="btn_" value="Add" />\r
-                    </div>\r
-\r
-                </div>\r
-\r
-                <div class="NE_Add_show NE_node_show NE_close_item">\r
-\r
-                    <img class="NE_close_show" src="src/app/nemo/images/shut.png" alt="close" />\r
-                    <div class="NE_middle">\r
-                        <table>\r
-                            <tr>\r
-                                <td><span class="second_title">Node ID:</span> </td>\r
-                            </tr>\r
-                            <tr>\r
-                                <td>\r
-                                    <input class="id_" id="node_id" type="text" name="name" value="" /></td>\r
-                            </tr>\r
-\r
-                            <tr>\r
-                                <td><span class="second_title">Node Type:</span></td>\r
-                            </tr>\r
-                            <tr>\r
-                                <td>\r
-                                    <select id="sel_show">                                        \r
-                                        <option value="l2-group">l2-group</option>\r
-                                        <option value="l3-group">l3-group</option>\r
-                                        <option value="ext-group">ext-group</option>\r
-                                        <option value="chain-group">chain-group</option>\r
-                                        <option value="fw">firewall</option>\r
-                                        <option value="lb">loadbalance</option>\r
-                                        <option value="cache">cache</option>\r
-                                    </select>\r
-                                </td>\r
-                            </tr>\r
-                            <tr>\r
-                                <td><span class="second_title">Node Name:</span><img class="alert_" id="node_icon" src="src/app/nemo/images/alert.png" /></td>\r
-                            </tr>\r
-                            <tr>\r
-                                <td>\r
-                                    <input type="text" id="node_name" name="name" value="" />\r
-                                </td>\r
-                            </tr>\r
-                        </table>\r
-                    </div>\r
-\r
-                    <div class="NE_down">\r
-                       \r
-                        <div id="l2-group_type" class="node_type_group node_type_group_group">\r
-                            <table class="select_table">\r
-                                <tr>\r
-                                    <td class="second_title">sub-node</td>\r
-                                </tr>\r
-                                <tr>\r
-                                    <td>\r
-                                        <select id="l2_addhost" class="txt2">\r
-                                         \r
-                                        </select>\r
-                                        <input class="btn_ add_node" id="l2_ok" type="button" name="name" value="Add" />\r
-                                    </td>\r
-                                </tr>                                                                                                                  \r
-                                <tr>\r
-                                    <td>\r
-                                        <div id="l2_delgroup" class="delgroup">\r
-                                            <table id="l2_select_table"></table>\r
-                                        </div>                                                               \r
-                                    </td>\r
-                                </tr>\r
-                            </table>\r
-                            <div class="big_second_title">\r
-                                <span>Property</span>\r
-                            </div>\r
-                            <table>\r
-                                <tr>\r
-                                    <td class="second_title">ip-prefix:\r
-                                        <!--img class="alert_" id="" src="#" /--></td>\r
-                                </tr>\r
-                                <tr>\r
-                                    <td>\r
-                                        <input type="text" class="txt" id="l2-group_ip-prefix" value=""/></td>\r
-                                </tr>\r
-                                <tr>\r
-                                    <td class="second_title">gateway-ip:</td>\r
-                                </tr>\r
-                                <tr>\r
-                                    <td>\r
-                                        <input type="text" class="txt" id="l2-group_gateway-ip" value="" />\r
-                                    </td>\r
-                                </tr>\r
-                                <tr>\r
-                                    <td class="second_title">location:</td>\r
-                                </tr>\r
-                                <tr>\r
-                                    <td>\r
-                                        <input type="text" class="txt" id="l2-group_location" value="" />\r
-                                    </td>\r
-                                </tr>\r
-                            </table>\r
-                        </div>\r
-\r
-                        <div id="l3-group_type" class="node_type_group node_type_group_group">\r
-                            <table class="select_table">\r
-                                <tr>\r
-                                    <td class="second_title">sub-node</td>\r
-                                </tr>\r
-                                <tr>\r
-                                    <td>\r
-                                        <select id="l3_addhost" class="txt2">                                        \r
-                                        </select>\r
-                                        <input class="btn_ add_node" id="l3_ok" type="button" name="name" value="Add" />\r
-                                    </td>\r
-                                </tr>                                                                                                                  \r
-                                <tr>\r
-                                    <td>\r
-                                        <div id="l3_delgroup" class="delgroup">\r
-                                              <table id="l3_select_table"></table>\r
-                                        </div>                                                               \r
-                                    </td>\r
-                                </tr>\r
-                            </table>\r
-\r
-                            <div class="big_second_title">\r
-                                <span>Property</span>\r
-                            </div>\r
-                            <table>\r
-                                <tr>\r
-                                    <td class="second_title">ip-prefix:\r
-                                        <!--img class="alert_" id="" src="#" /--></td>\r
-                                </tr>\r
-                                <tr>\r
-                                    <td>\r
-                                        <input type="text" class="txt" id="l3-group_ip-prefix" value=""/></td>\r
-                                </tr>\r
-                   \r
-                            </table>\r
-                        </div>\r
-\r
-                        <div id="ext-group_type" class="node_type_group">                                                                                                                  \r
-\r
-                            <div class="big_second_title">\r
-                                <span>Property</span>\r
-                            </div>\r
-                            <table>\r
-                                <tr>\r
-                                    <td class="second_title">location:\r
-                                        <!--img class="alert_" id="" src="#" /--></td>\r
-                                </tr>\r
-                                <tr>\r
-                                    <td>\r
-                                        <input type="text" class="txt" id="ext-group_location" value=""/></td>\r
-                                </tr>\r
-                                <tr>\r
-                                    <td class="second_title">ac-info-network:</td>\r
-                                </tr>\r
-                                <tr>\r
-                                    <td>\r
-                                        <input type="text" class="txt" id="ext-group_ac-info-network" value=""/>\r
-                                    </td>\r
-                                </tr>\r
-                                <tr>\r
-                                    <td class="second_title">ac-info-protocol:</td>\r
-                                </tr>\r
-                                <tr>\r
-                                    <td>\r
-                                        <input type="text" class="txt" id="ext-group_ac-info-protocol" value=""/>\r
-                                    </td>\r
-                                </tr>\r
-                                <tr>\r
-                                    <td class="second_title">ip-prefix:</td>\r
-                                </tr>\r
-                                <tr>\r
-                                    <td>\r
-                                        <input type="text" class="txt" id="ext-group_ip-prefix" value=""/>\r
-                                    </td>\r
-                                </tr>\r
-                            </table>\r
-                        </div>\r
-                        <div id="chain-group_type" class="node_type_group node_type_group_group">\r
-                               <table class="select_table">\r
-                                <tr>\r
-                                    <td class="second_title">Vas Node:</td>\r
-                                </tr>\r
-                                <tr>\r
-                                    <td>\r
-                                        <select id="chain_addhost" class="txt2">  </select>\r
-                                        <input class="btn_ add_node" id="chain_ok" type="button" name="name" value="Add" />\r
-                                    </td>\r
-                                </tr>                                                                                                                  \r
-                                <tr>\r
-                                    <td>\r
-                                        <div id="chain_delgroup" class="delgroup">\r
-                                              <table id="chain_select_table"></table>\r
-                                        </div>                                                               \r
-                                    </td>\r
-                                </tr>\r
-                            </table>\r
-                        </div>\r
-                         <div id="fw_type" class="node_type_group">\r
-                            <div class="big_second_title">\r
-                                <span>Property</span>\r
-                            </div>\r
-                            <table>\r
-                                <tr>\r
-                                    <td class="second_title">location:\r
-                                        <!--img class="alert_" id="firewall_loc_icon" src="src/app/nemo/images/alert.png" /--></td>\r
-                                </tr>\r
-                                <tr>\r
-                                    <td>\r
-                                        <input type="text" class="txt" id="fw_location" value=""/></td>\r
-                                </tr>\r
-                                <tr>\r
-                                    <td class="second_title">operating-mode:</td>\r
-                                </tr>\r
-                                <tr>\r
-                                    <td>\r
-                                        <input type="text" class="txt" id="fw_operating-mode" value=""/>\r
-                                    </td>\r
-                                </tr>\r
-                            </table>\r
-                        </div>\r
-\r
-                        <div id="lb_type" class="node_type_group">\r
-                            <div class="big_second_title">\r
-                                <span>Property</span>\r
-                            </div>\r
-                            <table>\r
-                                <tr>\r
-                                    <td class="second_title">location:\r
-                                        <!--img class="alert_" id="Img1" src="#" /--></td>\r
-                                </tr>\r
-                                <tr>\r
-                                    <td>\r
-                                        <input type="text" class="txt" id="lb_location" value=""/></td>\r
-                                </tr>\r
-                                <tr>\r
-                                    <td class="second_title">operating-mode:</td>\r
-                                </tr>\r
-                                <tr>\r
-                                    <td>\r
-                                        <input type="text" class="txt" id="lb_operating-mode" value="" />\r
-                                    </td>\r
-                                </tr>\r
-                            </table>\r
-                        </div>\r
-                         <div id="cache_type" class="node_type_group">\r
-                            <div class="big_second_title">\r
-                                <span>Property</span>\r
-                            </div>\r
-                            <table>\r
-                                <tr>\r
-                                    <td class="second_title">location:\r
-                                        <!--img class="alert_" id="Img1" src="#" /--></td>\r
-                                </tr>\r
-                                <tr>\r
-                                    <td>\r
-                                        <input type="text" class="txt" id="cache_location" value=""/></td>\r
-                                </tr>\r
-                                <tr>\r
-                                    <td class="second_title">operating-mode:</td>\r
-                                </tr>\r
-                                <tr>\r
-                                    <td>\r
-                                        <input type="text" class="txt" id="cache_operating-mode" value="" />\r
-                                    </td>\r
-                                </tr>\r
-                            </table>\r
-                        </div>\r
-\r
-                        <input type="button" name="name" class="btn_ NE_save net_entity_save" id="node_save" value="Save" />\r
-\r
-                    </div>\r
-\r
-                </div>\r
-\r
-                <div class="NE_conn_show  NE_connection_show NE_close_item">\r
-                    <img class="NE_close_show" src="src/app/nemo/images/shut.png" alt="close" />\r
-                    <table>\r
-                        <tr>\r
-                            <td><span class="second_title">connection ID:</span></td>\r
-                        </tr>\r
-                        <tr>\r
-                            <td>\r
-                                <input class="id_ long" id="connection_id" type="text" name="name" value="" /></td>\r
-                        </tr>\r
-\r
-                        <tr>\r
-                            <td><span class="second_title">connection type:</span></td>\r
-                        </tr>\r
-                        <tr>\r
-                            <td>\r
-                                <select id="con_type">\r
-                                    <option value="p2p">p2p</option>\r
-                                    <option value="p2mp">p2mp</option>\r
-                                    <option value="mesh">mesh</option>\r
-                                    <!-- <option value="chain">chain</option> -->\r
-                                </select>\r
-                            </td>\r
-                        </tr>\r
-                        <tr>\r
-                            <td>\r
-                                <span class="second_title">connection name:</span><img class="alert_" id="connection_icon" src="src/app/nemo/images/alert.png" />\r
-                            </td>\r
-                        </tr>\r
-                        <tr>\r
-                            <td>\r
-                                <input class="long" id="connection_name" type="text" name="name" value="" />\r
-                            </td>\r
-                        </tr>\r
-                    </table>\r
-\r
-                    <div id="p2p_type" class="conn_type_group">\r
-                        <div class="big_second_title">\r
-                            <span>End Point:</span>\r
-                        </div>\r
-                        <table class="conn_node_group">\r
-                            <tr>\r
-                                <td>\r
-                                <select id="p2p_select" class="txt3"> </select>\r
-                                <input class="btn_ add_node" id="p2p_select_ok" type="button" name="name" value="Add One">\r
-                                <input class="btn_ add_node" id="p2p_select_ok2" type="button" name="name" value="Add The Other">\r
-                                </td>\r
-                           </tr>\r
-                            <tr>\r
-                                <td>\r
-                                <div id="p2p_node_group">\r
-                                    <table >\r
-                                        <tr>\r
-                                            <td colspan="2"><span  class="second_title">One End Point:</span></td>\r
-                                        </tr>\r
-                                        <tr>\r
-                                            <td width="60px"></td><td></td>\r
-                                        </tr>\r
-                                        <tr>\r
-                                            <td colspan="2"><span class="second_title">Other End Point:</span></td>\r
-                                        </tr>\r
-                                        <tr>\r
-                                            <td></td><td></td>\r
-                                        </tr>\r
-                                    </table>\r
-                                </div>\r
-                                    </td>\r
-                            </tr>\r
-                            <!--<tr>\r
-                                <td><span class="second_title">一端点名称:</span>\r
-                                    <select class="sel_1" id="p2p_node-name1">\r
-                                    </select>\r
-                                </td>\r
-                            </tr>\r
-                            <tr>\r
-                                <td><span class="second_title">另一端点名称:</span>\r
-                                    <select id="p2p_node-name2"></select>\r
-                                </td>\r
-                            </tr>-->\r
-                        </table>\r
-                    </div>\r
-\r
-                    <div id="p2mp_type" class="conn_type_group ">\r
-                        <div class="big_second_title">\r
-                            <span>End Point Information</span>\r
-                        </div>\r
-                        <table class="conn_node_group_p2mp">\r
-                        <!--    <tr>\r
-                                <td><span class="second_title">一端点名称:</span>\r
-                                </td>\r
-                            </tr>\r
-                            <tr>\r
-                                <td>\r
-                                    <select id="p2mp_node-name1">\r
-                                    </select>\r
-                                </td>\r
-                            </tr>\r
-                            <tr>\r
-                                <td><span class="second_title">另一端点名称:</span>\r
-                                    <div class="other_node_list" id="p2mp_node-name2">\r
-                                    </div>\r
-                                </td>\r
-                            </tr>-->\r
-                             <tr>\r
-                                <td>\r
-                                <select id="p2mp_select" class="txt3"> </select>\r
-                                <input class="btn_ add_node" id="p2mp_select_ok" type="button" name="name" value="Add One">\r
-                                <input class="btn_ add_node" id="p2mp_select_ok2" type="button" name="name" value="Add The Other">\r
-                                </td>\r
-                           </tr>\r
-                            <tr>\r
-                                <td>\r
-                                <div id="p2mp_node_group">\r
-                                    <table class="">\r
-                                        <tr>\r
-                                            <td colspan="2"><span  class="second_title">One End Point:</span></td>\r
-                                        </tr>\r
-                                        <tr>\r
-                                            <td width="60px"></td><td></td>\r
-                                        </tr>\r
-                                        <tr>\r
-                                            <td colspan="2"><span class="second_title">Other End Point:</span></td>\r
-                                        </tr>\r
-                                        <tr><td></td><td></td></tr>\r
-                                    </table>\r
-                                </div>\r
-                                    </td>\r
-                            </tr>\r
-                        </table>\r
-                    </div>\r
-                    <div id="mesh_type" class="conn_type_group">\r
-                         <div class="big_second_title">\r
-                            <span>End Point Information</span>\r
-                        </div>\r
-                        <table class="conn_node_group_mesh">\r
-                             <tr>\r
-                                <td>\r
-                                <select id="mesh_select" class="txt2"> </select>\r
-                                <input class="btn_ add_node" id="mesh_select_ok" type="button" name="name" value="Add">                             \r
-                                </td>\r
-                           </tr>\r
-                            <tr>\r
-                                <td>\r
-                                <div id="mesh_node_group">\r
-                                    <table class="">\r
-                                        <tr>\r
-                                            <td><span  class="second_title">End Point:</span></td><td></td>\r
-                                        </tr>\r
-                                        <tr>\r
-                                            <td></td><td></td>\r
-                                        </tr>\r
-                                    </table>\r
-                                </div>\r
-                                    </td>\r
-                            </tr>\r
-                        </table>\r
-                    </div>\r
-                     <div id="chain_type" class="conn_type_group">\r
-                        <div class="big_second_title">\r
-                            <span>业务链结点</span>\r
-                        </div>\r
-                        <table class="conn_node_group_chain">\r
-                             <tr>\r
-                                <td>\r
-                                <select id="chain_select" class="txt2"> </select>\r
-                                <input class="btn_ add_node" id="chain_select_ok" type="button" name="name" value="添加">                             \r
-                                </td>\r
-                           </tr>\r
-                            <tr>\r
-                                <td>\r
-                                <div id="chain_node_group">\r
-                                    <table class="">\r
-                                        <tr>\r
-                                            <td><span  class="second_title">端点名称:</span></td> <td></td>\r
-                                        </tr>\r
-                                        <tr>\r
-                                            <td></td> <td></td>\r
-                                        </tr>\r
-                                    </table>\r
-                                </div>\r
-                                    </td>\r
-                            </tr>\r
-                        </table>\r
-                    </div>\r
-                    <div class="property_type">\r
-                        <div class="big_second_title">\r
-                            <span>Property</span>\r
-                        </div>\r
-                        <table>\r
-                              \r
-                            <tr>\r
-                                <td><span class="second_title">bandwidth:</span><!--img class="alert_" id="bandwidth_icon" src="#" /--></td>\r
-                            </tr>\r
-                            <tr>\r
-                                <td>\r
-                                    <input id="bandwidth" class="txt" type="text" name="name" value="kb" /><span>kbps</span>\r
-                                </td>\r
-                            </tr>\r
-                            <tr style="display: none">\r
-                                <td><span class="second_title">时延</span></td>\r
-                            </tr>\r
-                            <tr style="display: none">\r
-                                <td>\r
-                                    <input id="latency" class="txt" type="text" name="name" value="" />\r
-                                </td>\r
-                            </tr>\r
-                            <tr style="display: none">\r
-                                <td><span class="second_title">抖动</span></td>\r
-                            </tr>\r
-                            <tr style="display: none">\r
-                                <td>\r
-                                    <input id="Jitter" class="txt" type="text" name="name" value="" />\r
-                                </td>\r
-                            </tr>\r
-                        </table>\r
-                    </div>\r
-\r
-                    <input type="button" name="name" id="connection_save" class="btn_ NE_con_save net_entity_save" value="Save" />\r
-                </div>\r
-\r
-                <div class="NE_flow_show NE_close_item">\r
-                    <img class="NE_close_show" id="NE_flow_close_icon" src="src/app/nemo/images/shut.png" alt="close" />\r
-                    <table>\r
-                        <tr>\r
-                            <td><span class="second_title">flow ID:</span></td>\r
-                        </tr>\r
-                        <tr>\r
-                            <td>\r
-                                <input id="flow_id" type="text" class="id_ long" name="name" value="" /></td>\r
-                        </tr>\r
-                        <tr>\r
-                            <td><span class="second_title">flow name:</span><img class="alert_" id="flow_icon" src="src/app/nemo/images/alert.png" /></td>\r
-                        </tr>\r
-                        <tr>\r
-                            <td>\r
-                                <input id="flow_name" class="long" type="text" name="name" value="" /></td>\r
-                        </tr>\r
-                    </table>\r
-                    <div class="big_second_title">\r
-                        <span>Flow match item</span>\r
-                    </div>\r
-                    <table>\r
-                        <tr>\r
-                            <td><span class="second_title">eth-type:</span></td>\r
-                        </tr>\r
-                        <tr>\r
-                            <td>\r
-                                <input type="text" class="long" id="eth_type"/>\r
-                            </td>\r
-                        </tr>\r
-\r
-                        <tr>\r
-                            <td><span class="second_title">src-mac:</span></td>\r
-                        </tr>\r
-                        <tr>\r
-                            <td>\r
-                                 <input type="text" class="long" id="src_mac"/>\r
-                            </td>\r
-                        </tr>\r
 \r
-                        <tr>\r
-                            <td><span class="second_title">dst-mac:</span><!--img class="alert_" id="src_ip_icon" src="#" /--></td>\r
-                        </tr>\r
-                        <tr>\r
-                            <td>\r
-                                <input id="dst_mac" class="long" type="text"  value="" />\r
-                            </td>\r
-                        </tr>\r
+        $(".tabs ul li[aria-controls='PhyNet']").click();\r
+\r
+        $(".tabs ul li[aria-controls='intent_info']").click(function(){\r
+            //alert('intent_topo');\r
+            var userId=$("#selectUser option:selected").val();\r
+            console.log(userId);\r
+\r
+            // SFC\r
+            // userId='af4fc2be-e3f4-4388-a8ef-3aabae872f2b';\r
+            //Bod\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,userinfo);\r
+            if(!user_data) return;\r
+\r
+            analyjson_topo(user_data);\r
+            parseNemoLan(user_data);\r
+        //set keyWords style\r
+        $("#nemo_str_show p").each(function(){\r
+            var $res=$(this);\r
+            keyWords.forEach(function(item,index,array){\r
+                $res.html($res.html().replace(item,"<span class='keyWords'>"+item+"</span>"));\r
+            });\r
+        });\r
+    });\r
+\r
+        $(".tabs ul li[aria-controls='VirNet']").click(function(){\r
+           // var virtualData=getVirtualJson();\r
+            var userId=$("#selectUser option:selected").val();\r
+            jQuery('#vir_graph').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
+            // virtualData=virtualJson;\r
+\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
+        });\r
+         // $(".tabs ul li[aria-controls='Mapping']").click();\r
+        $(".tabs ul li[aria-controls='Mapping']").click(function(){\r
+            var userId=$("#selectUser option:selected").val();\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
+            // 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
+            // getPaths(linkArray,getPnMappingResultById(userId,PnMappingJson),physicalJson);\r
+        });\r
 \r
-                         <tr>\r
-                            <td><span class="second_title">proto:</span><!--img class="alert_" id="protocol_icon" src="#" /--></td>\r
-                        </tr>\r
-                        <tr>\r
-                            <td>\r
-                                <input id="protocol" class="long" type="text" name="name" value=" " />\r
-                            </td>\r
-                        </tr>\r
+        $('#selectUser input[type=button]').click(function(){\r
+            // $(".tabs ul li[aria-controls='intent_info']").trigger('click');\r
+            $('a[href="#intent_info"]').click();\r
+            var userId=$("#selectUser option:selected").val();\r
+            \r
+            // SFC\r
+            //userId='af4fc2be-e3f4-4388-a8ef-3aabae872f2b';\r
+            //Bod\r
+            //userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b'\r
+\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
+            \r
+            //set keyWords style\r
+           $("#nemo_str_show p").each(function(){\r
+            var $res=$(this);\r
+            keyWords.forEach(function(item,index,array){\r
+                // console.log(item);\r
+                $res.html($res.html().replace(item,"<span class='keyWords'>"+item+"</span>"));\r
+            });\r
+        });\r
 \r
-                        <tr>\r
-                            <td><span class="second_title">src-ip:</span><!--img class="alert_" id="dest_ip_icon" src="#" /--></td>\r
-                        </tr>\r
-                        <tr>\r
-                            <td>\r
-                                <input id="src_ip" class="long" type="text" name="name" value="" />\r
-                            </td>\r
-                        </tr>\r
+    });\r
 \r
-                        <tr>\r
-                            <td><span class="second_title">dst-ip:</span><!--img class="alert_" id="dest_ip_icon" src="#" /--></td>\r
-                        </tr>\r
-                        <tr>\r
-                            <td>\r
-                                <input id="dst_ip" class="long" type="text" name="name" value=" " />\r
-                            </td>\r
-                        </tr>\r
+       $('#logout').click(function(){\r
+        setCookie('nemo_userpwd','',-1);\r
+        $("#pageContent").empty();\r
+        $("#pageContent").load('src/app/nemo/register.html');\r
+       });\r
 \r
-                        <tr>\r
-                            <td><span class="second_title">src-port:</span><!--img class="alert_" id="src_port_icon" src="#" /--></td>\r
-                        </tr>\r
-                        <tr>\r
-                            <td>\r
-                                <input id="src_port" class="long" type="text" name="name" value=" " />\r
-                            </td>\r
-                        </tr>\r
+        });\r
+    </script>\r
+</head>\r
+<body>\r
+      <div class="header">\r
+        <p>Hello Admin!</p><span id='logout'>Logout</span>\r
+        <div id='selectUser'>\r
+            <p>Tenant:</p>\r
+            <select value="intentUser">\r
+            </select>\r
+            <input type="button" class='btn_' value='Query'/></div>\r
+      </div>\r
 \r
+        <div class="group">\r
+                <div class="tabs">\r
+                    <ul>\r
+                        <li><a href="#PhyNet">Physical Network</a></li>\r
+                        <li><a href="#intent_info">NEMO Intent</a></li>\r
+                        <li><a href="#VirNet">Virtual Network</a></li>\r
+                        <li><a href="#Mapping">VN-PN Mapping</a></li>\r
+                    </ul>\r
+                <div id='PhyNet'>\r
+                    <div id="phy_graph"></div>\r
+                    <div id='physicalTables'>\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
-                            <td><span class="second_title">dst-port:</span><!--img class="alert_" id="dest_port_icon" src="#" /--></td>\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
+\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
-                            <td>\r
-                                <input id="dst_port" class="long" type="text" name="name" value=" " />\r
-                            </td>\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
-                                          \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
-                    <input type="button" name="name" id="flow_save" class="btn_ NE_flow_save net_entity_save" value="Save" />\r
-                </div>\r
-\r
-            </div>\r
-\r
-            <div class="btn_item_show">\r
-\r
-                <div class="close_item_show">\r
-                    <img src="src/app/nemo/images/shut.png" />\r
-                </div>\r
-\r
-                <div class="SP_up">\r
-                    <div class="h3_style">\r
-                        <h3>Service Policy</h3>\r
-                    </div>\r
-                    <span class="second_title OP_serviceName">Service Name:</span>\r
-                    <select class="select_item"></select>\r
-                    <span class="second_title">Operation Entity List:</span>\r
-                    <select id="policy_name_list"></select>\r
-                    <div class="SP_btn_group">\r
-                        <input id="policy_add" class="btn_" type="button" name="name" value="Add" />\r
-                        <input id="policy_edit" class="btn_" type="button" name="name" value="Edit" />\r
-                        <input id="policy_delete" class="btn_" type="button" name="name" value="Delete" />\r
-                    </div>\r
-                </div>\r
-\r
-\r
-\r
-                <div class="SP_add_show">\r
-                    <img id="SP_close_show" src="src/app/nemo/images/shut.png" />\r
-                    <div class="SP_down">\r
-                        <table>\r
-                            <tr>\r
-                                <td><span s class="second_title">Operation ID:</span></td>\r
-                            </tr>\r
-                            <tr>\r
-                                <td>\r
-                                    <input class="id_" id="policy_id" type="text" name="name" value="" />\r
-                                </td>\r
-                            </tr>\r
-                            <tr>\r
-                                <td><span class="second_title">Operation name:</span><img class="alert_" id="policy_name_icon" src="src/app/nemo/images/alert.png" /></td>\r
-                            </tr>\r
-                            <tr>\r
-                                <td>\r
-                                    <input id="policy_name" class="cle" type="text" name="name" value="" />\r
-                                </td>\r
-                            </tr>\r
-                              <tr>\r
-                                <td><span class="second_title">Priority:</span><!--img class="alert_" id="policy_priority_icon" src="src/app/nemo/images/alert.png" /--></td>\r
-                            </tr>\r
-                            <tr>\r
-                                <td>\r
-                                    <input id="policy_priority" class="cle" type="text" name="name" value="0" />\r
-                                </td>\r
-                            </tr>\r
-                            <tr>\r
-                                <td>\r
-                                    <span class="second_title">Action to Entity:</span>\r
-                                </td>\r
-                            </tr>\r
-                            <tr>\r
-                                <td>\r
-                                    <select id="apply_entity">\r
-                                    </select>\r
-                                </td>\r
-                            </tr>\r
-                        </table>\r
-                        <div class="big_second_title">\r
-                            <span>Condition:</span>\r
-                        </div>\r
-                        <table>\r
-                            <tr>\r
-                                <td>\r
-                                    <!--div class="Con_group">\r
-                                        <span class="second_title">开始时间:</span><img class="alert_" id="start_time_icon" src="src/app/nemo/images/alert.png"/>\r
-                                        <input id="StartTime" class="cle" type="time" name="name" value="" />\r
-                                        <span class="second_title">结束时间:</span><img class="alert_" id="end_time_icon" src="src/app/nemo/images/alert.png"/>\r
-                                        <input id="EndTime" class="cle" type="time" name="name" value="" />\r
-                                    </div-->\r
-                                    <select class="con_show">\r
-                                        <option value="time">time</option>\r
-                                   </select>\r
-                                    <select class="con_show" >\r
-                                        <option value="less-than">less-than</option>\r
-                                        <option value="not-less-than">not-less-than</option>\r
-                                        <option value="equal">equal</option>\r
-                                        <option value="not-equal">not-equal</option>\r
-                                        <option value="greater-than">greater-than</option>\r
-                                        <option value="not-greater-than">not-greater-than</option>\r
-                                        <option value="between">between</option>\r
-                                        <option value="preiodical">preiodical</option>\r
-                                   </select>\r
-                                    <input class="con_show" type="text" name="name" value=" " />\r
-                                    <!--<input type="button" class="btn_ con_show" name="name" value=" 确定" />-->\r
-                                </td>\r
-                            </tr>\r
-                            <tr>\r
-                                <td>\r
-                                    <span>relationship with prior:</span>\r
-                                    <select class="ext_con_1">\r
-                                        <option value="none">none</option>\r
-                                         <option value="and">and</option>\r
-                                         <option value="or">or</option>\r
-                                         <option value="not">not</option>\r
-                                    </select>\r
-                                    <!--<input type="button" class="btn_ ext_con_2" name="name" value=" 确定" />-->\r
-                                    </td></tr>\r
-                            <tr>\r
-                                <td>\r
-                                    <span>condition priority:</span>\r
-                                    <input class="ext_con_3" type="text" name="name" value="1" />\r
-                                    <!--<input type="button" class="btn_ ext_con_4" name="name" value=" 确定" />-->\r
-                                     <input type="button" class="btn_ con_button" name="name" value="confirm" />\r
-                                </td>\r
-                            </tr>\r
-                            <tr>\r
-                                <td>\r
-                                    Selected conditions:\r
-                                    <input type="button" name="name" class="btn_" id="con_clear" value="clear" />\r
-                                </td>  \r
-                            </tr>\r
-                             <tr>\r
-                                <td>\r
-                                    <div id="con_select"> </div>\r
-                                </td>  \r
-                            </tr>\r
-                        </table>\r
-                        <div class="big_second_title">\r
-                            <span>Action:</span>\r
-                        </div>\r
-                        <table>\r
-                            <tr>\r
-                                <td>\r
-                                    <select id="policy_action">\r
-                                        <option value="Deny">Deny</option>\r
-                                        <option value="Allow">Allow</option>\r
-                                        <option value="go-through">go-through</option>\r
-                                        <option value="qos-bandwidth">qos-bandwidth</option>\r
-                                    </select>\r
-                                </td>\r
-                            </tr>\r
-                        </table>\r
-                        <div class="big_second_title">\r
-                            <span>Constrain</span>\r
-                        </div>\r
-                        <table>\r
-                            <tr>\r
-                                <td>\r
-                                    <span class="third_title">&nbsp;Exclusive Node List:</span>\r
-\r
-                                    <div class="list_nodes">\r
-                                    </div>\r
-                                </td>\r
-                            </tr>\r
-                        </table>\r
-                        <div class="big_second_title">\r
-                            <span>Data:</span>\r
-                        </div>\r
-                        <table>\r
-                            <tr>\r
-                                <td>\r
-                                    <select id="policy_data">\r
-                                        \r
-                                    </select>\r
-                                    <!--input class="btn_ btn_edit" type="button" name="name" value="编 辑" /-->\r
-                                </td>\r
-                            </tr>\r
-                        </table>\r
-                    </div>\r
-\r
-                    <div class="SP_btn_save">\r
-                        <input class="btn_" id="sp_save" type="button" name="name" value="Save" />\r
                     </div>\r
-                </div>\r
-            </div>\r
-\r
-\r
-            <div class="btn_item_show">\r
-                <div class="close_item_show">\r
-                    <img src="src/app/nemo/images/shut.png" />\r
-                </div>\r
-                <div class="AQ_up">\r
-                    <div class="h3_style">\r
-                        <h3>Advance Query</h3>\r
+                    \r
                     </div>\r
                 </div>\r
-            </div>\r
-\r
-            <div class="btn_item_show">\r
-                <div class="close_item_show">\r
-                    <img src="src/app/nemo/images/shut.png" />\r
-                    <!--<div class="RR_top">\r
-                        <input type="file" name="fileField" class="file" id="json_select" size="28" onchange="document.getElementById('textfield').value=this.value" />\r
-                        <input type='text' name='textfield' id='textfield' class='txt' />\r
-                        <input type='button' class='btn_' value='选择文件' />\r
-                        <input type="button" name="submit" class="btn_" id="display_info" value="展示命令" />\r
-                    </div>-->\r
-                    <!--<div id="order"></div>-->\r
-\r
-                    <div class="RR_up">\r
-                    <div class="h3_style">\r
-                        <h3>Resource Mapping Info</h3>\r
-                     </div>\r
-                        <div class="que_group">\r
-                            <span></span>\r
-                            <input type="button" class="btn_" id="query_topo" value="Query Physical Topo" />\r
-                        </div>\r
-                   </div>\r
-\r
-                </div>\r
-            </div>\r
 \r
-            <div id="btn_local">\r
-                <input id="submit" class="btn_ btn_submit" type="button" value="Submit" /></div>\r
-        </div>\r
-\r
-        <div class="group_right">\r
-            <div class="up">\r
-                <div class="title">\r
-                    <h2>Service View</h2>\r
-                    <div id="right_top">\r
-                    <span>Username:</span>\r
-                    <input type="text" id="getUserName">\r
-                <input id="refresh" class='btn_' type="button" value="Refresh" onclick="analyjson_topo()">\r
-                    </div>\r
-                    <svg id="service_svg"  width="800" height="560"  viewBox="100 40 900 780" style='display:none'>\r
-                    <defs>\r
-                    <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
-                    <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
-                    </defs>\r
-                    </svg>\r
-\r
-                    <svg id="service_svg2"  width="800" height="560"  viewBox="100 40 900 780">\r
+                <div id="intent_info">\r
+                     <div id="intent_topo">\r
+                    \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
                     </defs>\r
                     </svg>\r
-                    <div id="graph"></div>\r
-                </div>\r
-\r
-            </div>\r
-\r
-            <div class="down">\r
-                <div id="tabs">\r
+                   </div>\r
+                    \r
+                   <div class="tabs">\r
                     <ul>\r
-                        <li><a href="#nemo_str_show">Service Modeling Language Description</a></li>\r
-                        <li><a href="#trans_info">History Infomation</a></li>\r
+                        <li><a href="#nemo_str_show">NEMO Language</a></li>\r
                     </ul>\r
-    \r
                     <div id="nemo_str_show"></div>\r
-                    <div id="trans_info"></div>\r
-                </div>\r
-            </div>\r
-\r
+                   </div>\r
+               </div>\r
+\r
+               <div id="VirNet">\r
+                <div id="vir_graph"></div>\r
+                <div id='virtualTables'>\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
+                        <th>Internal Virtual Port Number</th><th>External Virtual Port Number</th>\r
+                        </tr>\r
+                   </table>\r
+\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
+                       <th>Destination Virtual Node</th>\r
+                       <!-- <th>Metric</th> -->\r
+                       <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
+                    \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 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
-        <!-- dialog start -->\r
-        <div id="dialog" title="warning">\r
-            <p>\r
-                The service name is already existing,please input another name!\r
-            </p>\r
-        </div>\r
-        <div id="policy_dialog" title="warning">\r
-            <p>\r
-                The policy name is already existing,please input another name!\r
-            </p>\r
-        </div>\r
-        <div id="flow_dialog" title="warning">\r
-            <p>\r
-                'src_ip','dest_ip','src_port','dest_port','protocol','vlanid'这些选项不能为空\r
-            </p>\r
-        </div>\r
-        <div id="del_ser_dialog" title="warning">\r
-            <p>\r
-                The entities and policies that belong to this service will also be deleted,are you sure to continue?\r
-            </p>\r
-        </div>\r
 \r
-        <div id="ser_dialoge" title="warning">\r
-            <p>\r
-                 The service name is null,please input a name!\r
-            </p>\r
-        </div>\r
-        <div id="ety_dialog" title="warning">\r
+        <!-- dialog start -->\r
+        <div id="dialog" title="info" style='display:none;'>\r
             <p>\r
-                The entity instance name is already existing,please input another name!\r
+            <!-- Create By LiuTong , 2015-12-06   -->\r
             </p>\r
         </div>\r
-\r
-        <div id="adc_dialog" title="">\r
-            <h3>业 务 链 配 置</h3>\r
-            <p>结点实体列表:</p>\r
-            <select id="adc_node"></select>\r
-            <input id="add_node" class="btn_" type="button" name="name" value="添 加" />\r
-            <span>序号</span>\r
-            <select id="num">\r
-            </select>\r
-            <input id="delete_node" class="btn_" type="button" name="name" value="删 除" />\r
-            <div id="table_show">\r
-                <table id="table_tab" style="border: 2px">\r
-                    <tr>\r
-                        <th class="first_colum">序号</th>\r
-                        <th>结点ID</th>\r
-                    </tr>\r
-                    <tr>\r
-                        <td class="first_colum"></td>\r
-                        <td></td>\r
-                    </tr>\r
-                </table>\r
-            </div>\r
-        </div>\r
-\r
         <!-- dialog end -->\r
-\r
-        <!-- show_trans_status start-->\r
-        <div id='show_status' style="background: rgba(80,80,80,0.3); width: 220px; height: 50px; z-index: 999; position: absolute; top: 15px; right: 0; margin-top: 10px;">\r
-            <p style="font-size:15px">Transaction is running...</p>\r
-            <div id='loader' style='z-index: 999; margin-left: 100px;margin-top:10px'>\r
-            </div>\r
-        </div>\r
-        <!-- show_trans_status end-->\r
-    </div>\r
 </body>\r
 </html>\r