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