| <!-- | |
| Copyright 2016, Huawei Technologies Co., Ltd. | |
| Licensed under the Apache License, Version 2.0 (the "License"); | |
| you may not use this file except in compliance with the License. | |
| You may obtain a copy of the License at | |
| http://www.apache.org/licenses/LICENSE-2.0 | |
| Unless required by applicable law or agreed to in writing, software | |
| distributed under the License is distributed on an "AS IS" BASIS, | |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
| See the License for the specific language governing permissions and | |
| limitations under the License. | |
| --> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <link href="css/bootstrap.min.css" rel="stylesheet" /> | |
| <link href="css/VMMain.css" rel="stylesheet" /> | |
| <link href="css/bootstrap-table.min.css" rel="stylesheet" /> | |
| <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script> | |
| <script type="text/javascript" src="js/bootstrap.min.js"></script> | |
| <script type="text/javascript" src="js/brs.js"></script> | |
| <script type="text/javascript" src="js/underlay.js"></script> | |
| <script type="text/javascript" src="js/bootstrap-table.min.js"></script> | |
| <style type="text/css"> | |
| </style> | |
| <script type="text/javascript"> | |
| $(document).ready(function() { | |
| var jsondata = []; | |
| jsondata = loadOverlayData(); | |
| $('#sai').bootstrapTable({ | |
| //Assigning data to table | |
| data: jsondata | |
| }); | |
| }); | |
| function operateFormatter(value, row, index) { | |
| return [ | |
| '<img class="siteDeleteImg" src="images/delete.png" href="javascript:void(0)" style="cursor: pointer" name="title" title="Delete" />' | |
| ].join(''); | |
| } | |
| window.operateEvents = { | |
| 'click .siteDeleteImg': function (e, value, row, index) { | |
| // TO DO ajex call for delete | |
| console.log(value, row, index); | |
| } | |
| }; | |
| </script> | |
| </head> | |
| <body id="open_base_vpn_cotentBody" class="cotentBody ng-scope"> | |
| <div class="container-fluid ms-controller"> | |
| <h3> Overlay VPN </h3> | |
| <div class="row-fluid" data-name="table_zone"> | |
| <div id='ict_virtualApplication_table_div'> | |
| <div> | |
| <div class="top"> | |
| <table id="sai" 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"> | |
| <thead id="soverlayTable_thead" class="openo-table-thead"> | |
| <tr class="active"> | |
| <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="overlayName" data-sortable="true"> | |
| <div class="openo-table-th-border"></div> | |
| <div class="DataTables_sort_wrapper openo-ellipsis "> | |
| <span id="overlayName_sorticon" class="openo-table-th-sorticon overflow_elip openoTable_sortable leftHeaderAlign openo-table-disable-element">Name | |
| </span> | |
| </div> | |
| </th> | |
| <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="overlayDesc" data-sortable="true"> | |
| <div class="openo-table-th-border"></div> | |
| <div class="DataTables_sort_wrapper openo-ellipsis "> | |
| <span id="overlayDesc_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element "> Description | |
| </span></div></th> | |
| <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="overlayThincCPE" data-sortable="true"> | |
| <div class="openo-table-th-border"></div><div class="DataTables_sort_wrapper openo-ellipsis "> | |
| <span id="overlayThincCPE_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Thin CPE | |
| </span></div></th> | |
| <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="overlayPortVlanID" data-sortable="true"> | |
| <div class="openo-table-th-border"></div><div class="DataTables_sort_wrapper openo-ellipsis "> | |
| <span id="overlayPortVlanID_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Port:Vlan ID | |
| </span></div></th> | |
| <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="overlayDCName" data-sortable="true"> | |
| <div class="openo-table-th-border"></div><div class="DataTables_sort_wrapper openo-ellipsis "> | |
| <span id="overlayDCName_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">DC Name | |
| </span></div></th> | |
| <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="overlayVPC" data-sortable="true"> | |
| <div class="openo-table-th-border"></div><div class="DataTables_sort_wrapper openo-ellipsis "> | |
| <span id="overlayVPC_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">VPC | |
| </span> | |
| </div> | |
| </th> | |
| <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="overlayVPCCIDR" data-sortable="true"> | |
| <div class="openo-table-th-border"></div><div class="DataTables_sort_wrapper openo-ellipsis "> | |
| <span id="overlayVPCCIDR_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">VPC CIDR | |
| </span> | |
| </div> | |
| </th> | |
| <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="overlayOperation" align="center" data-formatter = "operateFormatter" data-events="operateEvents"> | |
| <div class="openo-table-th-border"></div> | |
| <div class="DataTables_sort_wrapper openo-ellipsis "> | |
| <span id="portAction_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Action</span> | |
| </div> | |
| </th> | |
| </tr></thead> | |
| <!-- <tbody> | |
| <tr style="display: none;"> | |
| <td colspan="7" style="text-align: center;">NULL</td> | |
| </tr> | |
| <tr class="odd openo-table-tr openo-table-disable-element" data-rowid="0" data-tableid="overlayTable"> | |
| <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="overlayName" data-tableid="overlayTable"> | |
| <div class="openo-table-disable-element overflow_elip leftDataAlign"> | |
| <a class="openo-table-disable-element hyperLinkRow" href="javascript:void(0)" id="overlayTable_0_overlayName_link">overlay1</a></div></td> | |
| <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="overlayDesc" data-tableid="overlayTable"><div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="overlayTable_0_overlayDesc_custom_el">overlay 101</div> | |
| </td> | |
| <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="overlayThincCPE" data-tableid="overlayTable"><div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="overlayTable_0_overlayThincCPE_custom_el">chaxuanyue</div> | |
| </td> | |
| <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="overlayPortVlanID" data-tableid="overlayTable"><div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="overlayTable_0_overlayPortVlanID_custom_el">Bangalore</div> | |
| </td> | |
| <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="overlayDCName" data-tableid="overlayTable"><div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="overlayTable_0_overlayDCName_custom_el">Bangalore</div> | |
| </td> | |
| <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="overlayVPC" data-tableid="overlayTable"><div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="overlayTable_0_overlayVPC_custom_el">Bangalore</div> | |
| </td> | |
| <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="overlayVPCCIDR" data-tableid="overlayTable"><div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="overlayTable_0_overlayVPCCIDR_custom_el">Bangalore</div> | |
| </td> | |
| <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="overlayOperation" data-tableid="overlayTable"> | |
| <div class="openo-table-disable-element overflow_elip leftDataAlign openo-table-custom-el" id="overlayTable_0_overlayOperation_custom_el"> | |
| <div> | |
| <img src="images/delete.png" href="javascript:void(0)" onclick="deleteoverlay('this')" opertype="overlayDelete" style="cursor: pointer" title="Delete" id="bac4ff3c-d693-4f54-86cd-25af1ea22f59" rowid="0/"> | |
| </div> | |
| </div> | |
| </td> | |
| </tr> | |
| </tbody> --> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |