--- /dev/null
+\r
+<!-- /* Copyright 2016, Huawei Technologies Co., Ltd.\r
+ *\r
+ * Licensed under the Apache License, Version 2.0 (the "License");\r
+ * you may not use this file except in compliance with the License.\r
+ * You may obtain a copy of the License at\r
+ *\r
+ * http://www.apache.org/licenses/LICENSE-2.0\r
+ *\r
+ * Unless required by applicable law or agreed to in writing, software\r
+ * distributed under the License is distributed on an "AS IS" BASIS,\r
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+ * See the License for the specific language governing permissions and\r
+ * limitations under the License.\r
+ */\r
+ -->\r
+\r
+<!DOCTYPE html>\r
+\r
+<html>\r
+\r
+<head lang="en">\r
+ <meta charset="UTF-8">\r
+ <title></title>\r
+ <link href="css/bootstrap.min.css" rel="stylesheet" />\r
+ <link href="css/VMMain.css" rel="stylesheet" />\r
+ <link href="css/bootstrap-table.min.css" rel="stylesheet" />\r
+ <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>\r
+ <script type="text/javascript" src="js/bootstrap.min.js"></script>\r
+ <script type="text/javascript" src="js/brs.js"></script>\r
+ <script type="text/javascript" src="js/underlay.js"></script>\r
+ <script type="text/javascript" src="js/bootstrap-table.min.js"></script>\r
+ <style>\r
+ .fixed-table-container tbody td .th-inner,\r
+ .fixed-table-container thead th .th-inner {\r
+ line-height: 4px;\r
+ }\r
+ .fixed-table-pagination .pagination-info {\r
+ display: none !important;\r
+ }\r
+ .table tbody tr:hover td,\r
+ .table tbody tr.odd:hover td {\r
+ background-color: #e6fbe0 !important;\r
+ }\r
+ .delete-btn {\r
+ background: url(delete.png) no-repeat !important;\r
+ width: 16px;\r
+ height: 16px;\r
+ border: none;\r
+ }\r
+ table tr.openoTable_row_selected td {\r
+ background: #e8f8fe!important;\r
+ border-bottom: 1px solid #e8e8e8!important;\r
+ }\r
+ .container-fluid {\r
+ padding-left: 10px;\r
+ padding-right: 0px;\r
+ }\r
+ </style>\r
+ <script type="text/javascript">\r
+ $(document).ready(function() {\r
+ var jsondata = loadUnderlayData();\r
+ $('#tbl_overlay').bootstrapTable({\r
+ //Assigning data to table\r
+ data: jsondata\r
+ });\r
+ $('#underlayTpDataTable').bootstrapTable({\r
+ //Assigning data to table\r
+ data: {}\r
+ });\r
+ $('.table tbody tr').click(function() {\r
+ \r
+ $(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');\r
+ });\r
+\r
+ $('#sai').on('sort.bs.table', function () {\r
+ \r
+\r
+ }).on('click-row.bs.table', function () {\r
+ \r
+ \r
+ $('.table tbody tr').click(function() {\r
+ \r
+ $(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');\r
+ });\r
+ \r
+ });\r
+ });\r
+\r
+ function operateFormatter(value, row, index) {\r
+ return [\r
+ '<img class="siteDeleteImg" src="images/delete.png" href="javascript:void(0)" style="cursor: pointer" name="title" title="Delete" />'\r
+ ].join('');\r
+ }\r
+ window.operateEvents = {\r
+ 'click .siteDeleteImg': function(e, value, row, index) {\r
+ // TO DO ajex call for delete\r
+ console.log(value, row, index);\r
+ }\r
+ };\r
+ /* function nameFormatter(value, row) {\r
+ jsonForTP = row.json.data;\r
+ var name=JSON.stringify(row.json.data);\r
+ var temp = "<a class='underlayNameLink' onclick='getMethod(this)' name='"+ name + "' data-events='operateEventsU'>" + value + "</a>";\r
+ return temp;\r
+ }*/\r
+ function getMethod(obj) {\r
+ //Update the lower table here\r
+ $('#underlayTpDataTable').bootstrapTable(\r
+ //Assigning data to table\r
+ "append", JSON.parse(obj.name)\r
+ );\r
+ }\r
+ </script>\r
+\r
+</head>\r
+\r
+<body id="open_base_vpn_cotentBody" class="cotentBody ng-scope">\r
+ <div class="container-fluid ms-controller">\r
+ <h3>TP Details</h3>\r
+ <!-- <div class="row-fluid" data-name="table_zone">\r
+ <div id=''>\r
+ <div>\r
+ <div class="top">\r
+ <table class="table table-striped" id="tbl_overlay" data-pagination="true" data-page-size="5" data-pagination-first-text="First" data-pagination-pre-text="Previous" data-pagination-next-text="Next" data-pagination-last-text="Last">\r
+ <thead id="sunderlayTable_thead" class="openo-table-thead" style="background:#ECECEC">\r
+ <tr class="active">\r
+\r
+ <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayType" data-sortable="true">\r
+ <div class="openo-table-th-border"></div>\r
+ <div class="DataTables_sort_wrapper openo-ellipsis ">\r
+ <span id="underlayType_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">TP Name\r
+ </span>\r
+ </div>\r
+ </th>\r
+ <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayTenantName" data-sortable="true">\r
+ <div class="openo-table-th-border"></div>\r
+ <div class="DataTables_sort_wrapper openo-ellipsis ">\r
+ <span id="underlayTenantName_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">PE Name\r
+ </span>\r
+ </div>\r
+ </th>\r
+ <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayType" data-sortable="true">\r
+ <div class="openo-table-th-border"></div>\r
+ <div class="DataTables_sort_wrapper openo-ellipsis ">\r
+ <span id="underlayType_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">VLAN ID\r
+ </span>\r
+ </div>\r
+ </th>\r
+ <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayType" data-sortable="true">\r
+ <div class="openo-table-th-border"></div>\r
+ <div class="DataTables_sort_wrapper openo-ellipsis ">\r
+ <span id="underlayType_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Site CIDR\r
+ </span>\r
+ </div>\r
+ </th>\r
+ <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayType" data-sortable="true">\r
+ <div class="openo-table-th-border"></div>\r
+ <div class="DataTables_sort_wrapper openo-ellipsis ">\r
+ <span id="underlayType_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">IP\r
+ </span>\r
+ </div>\r
+ </th>\r
+\r
+ </tr>\r
+ </thead>\r
+ <tbody>\r
+\r
+ <tr>\r
+ <td>a_data </td>\r
+ <td>data </td>\r
+ <td>Sample1 </td>\r
+ <td>Sample </td>\r
+ <td>Sample1 </td>\r
+ </tr>\r
+\r
+ <tr>\r
+ <td>b_data </td>\r
+ <td>new sample </td>\r
+ <td>modified </td>\r
+ <td>Sample </td>\r
+ <td>Sample1 </td>\r
+ </tr>\r
+\r
+ <tr>\r
+ <td>alarm </td>\r
+ <td>deleted </td>\r
+ <td>Sample </td>\r
+ <td>Sample </td>\r
+ <td>Sample1 </td>\r
+ </tr>\r
+\r
+ <tr>\r
+ <td>datanew </td>\r
+ <td>Sample </td>\r
+ <td>Sample1 </td>\r
+ <td>Sample </td>\r
+ <td>Sample1 </td>\r
+ </tr>\r
+ </tbody>\r
+\r
+ </table>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ </div> -->\r
+\r
+ <div class="row-fluid" data-name="table_zone">\r
+ <div id='ict_virtualApplication_table_div'>\r
+ <div>\r
+ <div class="top">\r
+ <table class="table-striped table " id="sai" data-pagination="true" \r
+ data-pagination-first-text="First" data-pagination-pre-text="Previous" data-pagination-next-text="Next" data-pagination-last-text="Last">\r
+ <thead style="background:#ECECEC">\r
+ <tr>\r
+ <th data-field="tname" data-sortable="true">TP Name</th>\r
+ <th data-field="pname" data-sortable="true">PE Name</th>\r
+ <th data-field="vlan" data-sortable="true">VLAN ID</th>\r
+ <th data-field="site" data-sortable="true">Site CIDR</th>\r
+ <th data-field="ip" data-sortable="true">IP</th>\r
+ </tr>\r
+ </thead>\r
+\r
+ </table>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ </div>\r
+\r
+ \r
+\r
+ </div>\r
+\r
+</body>\r
+\r
+</html>
\ No newline at end of file
--- /dev/null
+\r
+<!-- /* Copyright 2016, Huawei Technologies Co., Ltd.\r
+ *\r
+ * Licensed under the Apache License, Version 2.0 (the "License");\r
+ * you may not use this file except in compliance with the License.\r
+ * You may obtain a copy of the License at\r
+ *\r
+ * http://www.apache.org/licenses/LICENSE-2.0\r
+ *\r
+ * Unless required by applicable law or agreed to in writing, software\r
+ * distributed under the License is distributed on an "AS IS" BASIS,\r
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+ * See the License for the specific language governing permissions and\r
+ * limitations under the License.\r
+ */\r
+ -->\r
+\r
+<!DOCTYPE html>\r
+<html>\r
+\r
+<head>\r
+\r
+ <head lang="en">\r
+ <meta charset="UTF-8">\r
+ <title></title>\r
+ <link href="css/bootstrap.min.css" rel="stylesheet" />\r
+ <link href="css/VMMain.css" rel="stylesheet" />\r
+ <link href="css/bootstrap-table.min.css" rel="stylesheet" />\r
+ <link rel="import" href="accorTables.html">\r
+ <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>\r
+ <script type="text/javascript" src="js/bootstrap.min.js"></script>\r
+ <script type="text/javascript" src="js/rest.js"></script>\r
+ <script type="text/javascript" src="js/bootstrap-table.min.js"></script>\r
+ <!-- <script type="text/javascript" src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js">\r
+ </script>\r
+ <link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet" /> -->\r
+ <script type="text/javascript">\r
+ $(document).ready(function() {\r
+ $("#detailCont").show();\r
+ var jsondata = [];\r
+ //jsondata = loadNeData();\r
+ $('#sai').bootstrapTable({\r
+ //Assigning data to table\r
+ data: jsondata\r
+ });\r
+ $('.table tbody tr').click(function() {\r
+ $(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');\r
+ })\r
+ $('.detail-top ul li').click(function() {\r
+ $(this).addClass('current').siblings().removeClass('current');\r
+ });\r
+ $("#topoCont").hide();\r
+ $("#inpCont").hide();\r
+\r
+ function operateFormatter(value, row, index) {\r
+ return [\r
+ '<img class="siteDeleteImg" src="images/delete.png" href="javascript:void(0)" style="cursor: pointer" name="title" title="Delete" />'\r
+ ].join('');\r
+ }\r
+ window.operateEvents = {\r
+ 'click .siteDeleteImg': function(e, value, row, index) {\r
+ // TO DO ajex call for delete\r
+ var result = deleteNe(row.id, row);\r
+ }\r
+ };\r
+\r
+ function hideBasic() {\r
+ $("#basicInfoTab").hide();\r
+ }\r
+\r
+ function showBasic() {\r
+ $("#basicInfoTab").show();\r
+ }\r
+\r
+ function showTopoCont() {\r
+ $("#topoCont").show();\r
+ $("#detailCont").hide();\r
+ $("#inpCont").hide();\r
+ }\r
+\r
+ function showDetCont() {\r
+ $("#topoCont").hide();\r
+ $("#detailCont").show();\r
+ $("#inpCont").hide();\r
+ }\r
+\r
+ function showInpCont() {\r
+ $("#topoCont").hide();\r
+ $("#detailCont").hide();\r
+ $("#inpCont").show();\r
+ }\r
+\r
+ function showTopoContMod() {\r
+ $("#topoContMod").show();\r
+ $("#detailContMod").hide();\r
+ $("#inpContMod").hide();\r
+ }\r
+\r
+ function showDetContMod() {\r
+ $("#topoContMod").hide();\r
+ $("#detailContMod").show();\r
+ $("#inpContMod").hide();\r
+ }\r
+\r
+ function showInpContMod() {\r
+ $("#topoContMod").hide();\r
+ $("#detailContMod").hide();\r
+ $("#inpContMod").show();\r
+ }\r
+ </script>\r
+\r
+ <style>\r
+ .nav-tabs {\r
+ border-bottom-style: none;\r
+ }\r
+ .mT15 {\r
+ margin-top: 15px;\r
+ }\r
+ .fixed-table-container tbody td .th-inner,\r
+ .fixed-table-container thead th .th-inner {\r
+ line-height: 4px;\r
+ }\r
+ .fixed-table-pagination .pagination-info {\r
+ display: none !important;\r
+ }\r
+ .table tbody tr:hover td,\r
+ .table tbody tr.odd:hover td {\r
+ background-color: #e6fbe0 !important;\r
+ }\r
+ /*.fixed-table-pagination .page-list{display:inline-block !important}*/\r
+ \r
+ .detail-top ul {\r
+ background: #F8F6F6 !important;\r
+ }\r
+ .btn {\r
+ padding: 4px;\r
+ }\r
+ </style>\r
+ </head>\r
+\r
+ <body id="open_base_site_cotentBody" class="cotentBody ng-scope">\r
+ <div class="container-fluid ms-controller">\r
+ <h3> Life Cycle Manager > Service Info</h3>\r
+ <div class="separator-line"></div>\r
+\r
+ <div class="detail" style="border-radius:5px;">\r
+ <div class="detail-top" style="margin-top:2px;border-radius:5px;">\r
+ <ul>\r
+ <li style="border-radius:5px;" id="detHov" class="current" onClick="showDetCont();">Detail Info</li>\r
+ <li style="border-radius:5px;" nClick="showTopoCont();">topo</li>\r
+ <li style="border-radius:5px;" onClick="showInpCont();">InputData</li>\r
+ </ul>\r
+ </div>\r
+\r
+ <div style="border-radius:5px;">\r
+ <div id="detailCont" style="display:none;">\r
+ \r
+ <object data="accorTables.html" width="100%" height="300" type="text/html">\r
+\r
+ </object>\r
+ </div>\r
+ <div id="topoCont" style="display:none;">downnn</div>\r
+ <div id="inpCont" style="display:none;">\r
+ <iframe src="inputData.html" name="" allowTransparency="true" scrolling="no" frameborder="0">\r
+ </iframe>\r
+ </div>\r
+ </div>\r
+\r
+ <div class="detail-bottom"></div>\r
+ </div>\r
+\r
+ </div>\r
+ </br>\r
+\r
+ </div>\r
+\r
+ </body>\r
+\r
+</html>
\ No newline at end of file