2 <!-- /* Copyright 2016-2017, Huawei Technologies Co., Ltd.
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
8 * http://www.apache.org/licenses/LICENSE-2.0
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
23 <meta charset="UTF-8">
25 <link href="css/bootstrap.min.css" rel="stylesheet" />
26 <link href="css/VMMain.css" rel="stylesheet" />
27 <link href="css/bootstrap-table.min.css" rel="stylesheet" />
28 <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
29 <script type="text/javascript" src="js/bootstrap.min.js"></script>
30 <script type="text/javascript" src="js/brs.js"></script>
31 <script type="text/javascript" src="js/underlay.js"></script>
32 <script type="text/javascript" src="js/bootstrap-table.min.js"></script>
33 <script type="text/javascript" src="js/bootstrap-table-filter-control.min.js"></script>
35 .fixed-table-container tbody td .th-inner,
36 .fixed-table-container thead th .th-inner {
39 .fixed-table-pagination .pagination-info {
40 display: none !important;
42 .table tbody tr:hover td,
43 .table tbody tr.odd:hover td {
44 background-color: #e6fbe0 !important;
47 background: url(delete.png) no-repeat !important;
52 table tr.openoTable_row_selected td {
53 background: #e8f8fe!important;
54 border-bottom: 1px solid #e8e8e8!important;
61 <script type="text/javascript">
62 $(document).ready(function() {
63 var jsondata = loadUnderlayData();
64 $('#tbl_overlay').bootstrapTable({
65 //Assigning data to table
68 $('#underlayTpDataTable').bootstrapTable({
69 //Assigning data to table
72 $('.table tbody tr').click(function() {
74 $(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');
77 $('#sai').on('sort.bs.table', function () {
80 }).on('click-row.bs.table', function () {
83 $('.table tbody tr').click(function() {
85 $(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');
91 function operateFormatter(value, row, index) {
93 '<img class="siteDeleteImg" src="images/delete.png" href="javascript:void(0)" style="cursor: pointer" name="title" title="Delete" />'
96 window.operateEvents = {
97 'click .siteDeleteImg': function(e, value, row, index) {
98 // TO DO ajex call for delete
99 console.log(value, row, index);
102 /* function nameFormatter(value, row) {
103 jsonForTP = row.json.data;
104 var name=JSON.stringify(row.json.data);
105 var temp = "<a class='underlayNameLink' onclick='getMethod(this)' name='"+ name + "' data-events='operateEventsU'>" + value + "</a>";
108 function getMethod(obj) {
109 //Update the lower table here
110 $('#underlayTpDataTable').bootstrapTable(
111 //Assigning data to table
112 "append", JSON.parse(obj.name)
119 <body id="open_base_vpn_cotentBody" class="cotentBody ng-scope">
120 <div class="container-fluid ms-controller">
122 <!-- <div class="row-fluid" data-name="table_zone">
126 <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">
127 <thead id="sunderlayTable_thead" class="openo-table-thead" style="background:#ECECEC">
130 <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayType" data-sortable="true">
131 <div class="openo-table-th-border"></div>
132 <div class="DataTables_sort_wrapper openo-ellipsis ">
133 <span id="underlayType_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">TP Name
137 <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayTenantName" data-sortable="true">
138 <div class="openo-table-th-border"></div>
139 <div class="DataTables_sort_wrapper openo-ellipsis ">
140 <span id="underlayTenantName_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">PE Name
144 <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayType" data-sortable="true">
145 <div class="openo-table-th-border"></div>
146 <div class="DataTables_sort_wrapper openo-ellipsis ">
147 <span id="underlayType_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">VLAN ID
151 <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayType" data-sortable="true">
152 <div class="openo-table-th-border"></div>
153 <div class="DataTables_sort_wrapper openo-ellipsis ">
154 <span id="underlayType_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Site CIDR
158 <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayType" data-sortable="true">
159 <div class="openo-table-th-border"></div>
160 <div class="DataTables_sort_wrapper openo-ellipsis ">
161 <span id="underlayType_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">IP
209 <div class="row-fluid" data-name="table_zone">
210 <div id='ict_virtualApplication_table_div'>
213 <table class="table-striped table " id="sai" data-pagination="true" data-pagination-first-text="First"
214 data-pagination-pre-text="Previous" data-pagination-next-text="Next" data-pagination-last-text="Last"
215 data-filter-control="true">
216 <thead style="background:#ECECEC">
218 <th data-field="tname" data-sortable="true" data-filter-control="input">TP Name</th>
219 <th data-field="pname" data-sortable="true" data-filter-control="input">PE Name</th>
220 <th data-field="vlan" data-sortable="true" data-filter-control="input">VLAN ID</th>
221 <th data-field="site" data-sortable="true" data-filter-control="input">Site CIDR</th>
222 <th data-field="ip" data-sortable="true" data-filter-control="input">IP</th>