Gitiles
Code Review Sign In
gerrit.nordix.org / onap / vnfsdk / refrepo / 72f3252388b55377cecd503757475a38139e6f9e / . / openo-portal / portal-lifecyclemgr / underlayvpn.html
blob: 94dbdf7b647e1e1f104f063487c7de8ec6cfb802 [file] [log] [blame]
Seshu-Kumar-M72f32522016-09-14 18:06:11 +0800[diff] [blame^]1
2<!DOCTYPE html>
3<html>
4<head>
5 <head lang="en">
6 <meta charset="UTF-8">
7 <title></title>
8 <link href="css/bootstrap.min.css" rel="stylesheet" />
9 <link href="css/jquery.dataTables.min.css" rel="stylesheet" />
10 <link href="css/VMMain.css" rel="stylesheet" />
11 <link href="css/bootstrap-table.min.css" rel="stylesheet" />
12 <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
13 <script type="text/javascript" src="js/bootstrap.min.js"></script>
14 <script type="text/javascript" src="js/brs.js"></script>
15 <script type="text/javascript" src="js/underlay.js"></script>
16 <script type="text/javascript" src="js/bootstrap-table.min.js"></script>
17 <style type="text/css">
18 hr {
19 ##-moz-border-bottom-colors: none;
20 -moz-border-image: none;
21 -moz-border-left-colors: none;
22 -moz-border-right-colors: none;
23 -moz-border-top-colors: none;
24 ##border-color: #EEEEEE -moz-use-text-color #FFFFFF;
25 border-style: solid none;
26 border-width: 1px 0;
27 margin: 50px 0;
28}
29 </style>
30 <script type="text/javascript">
31 $(document).ready(function() {
32
33
34var jsondata =loadUnderlayData();
35 $('#tbl_overlay').bootstrapTable({
36 //Assigning data to table
37 data: jsondata
38 });
39 $('#underlayTpDataTable').bootstrapTable({
40 //Assigning data to table
41 data: {}
42 });
43 });
44 function operateFormatter(value, row, index) {
45 return [
46 '<img class="siteDeleteImg" src="images/delete.png" href="javascript:void(0)" style="cursor: pointer" name="title" title="Delete" />'
47 ].join('');
48
49 }
50 window.operateEvents = {
51 'click .siteDeleteImg': function (e, value, row, index) {
52 // TO DO ajex call for delete
53 console.log(value, row, index);
54 }
55 };
56
57
58 function nameFormatter(value, row) {
59 jsonForTP = row.json.data;
60 var name=JSON.stringify(row.json.data);
61 var temp = "<a class='underlayNameLink' onclick='getMethod(this)' name='"+ name + "' data-events='operateEventsU'>" + value + "</a>";
62 return temp;
63 }
64 function getMethod(obj){
65 //Update the lower table here
66
67 $('#underlayTpDataTable').bootstrapTable(
68 //Assigning data to table
69 "append", JSON.parse(obj.name)
70 );
71 }
72 </script>
73</head>
74<body id="open_base_vpn_cotentBody" class="cotentBody ng-scope">
75 <div class="container-fluid ms-controller">
76 <h3>Underlay VPN</h3>
77 <div class="row-fluid" data-name="table_zone">
78 <div id='ict_virtualApplication_table_div'>
79 <div>
80 <div class="top">
81 <table 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">
82 <thead id="sunderlayTable_thead" class="openo-table-thead">
83 <tr class="active">
84
85
86 <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-formatter="nameFormatter" data-field="underlayName" data-sortable="true">
87 <div class="openo-table-th-border"></div>
88 <div class="DataTables_sort_wrapper openo-ellipsis ">
89 <span id="underlayName_sorticon" class="openo-table-th-sorticon overflow_elip openoTable_sortable leftHeaderAlign openo-table-disable-element ">Name
90 </span>
91 </div>
92 </th>
93 <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayTenantName" data-sortable="true">
94 <div class="openo-table-th-border"></div>
95 <div class="DataTables_sort_wrapper openo-ellipsis ">
96 <span id="underlayTenantName_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">State
97 </span>
98 </div>
99 </th>
100 <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayType" data-sortable="true">
101 <div class="openo-table-th-border"></div>
102 <div class="DataTables_sort_wrapper openo-ellipsis ">
103 <span id="underlayType_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element " >Description
104 </span></div></th>
105 <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayDescription" align="center" data-formatter = "operateFormatter" data-events="operateEvents">
106 <div class="openo-table-th-border"></div><div class="DataTables_sort_wrapper openo-ellipsis ">
107 <span id="underlayDescription_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Action
108 </span>
109 </div>
110 </th>
111 <!-- <th style="display: none;" class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayTenantName">
112 <div class="openo-table-th-border"></div>
113 <div class="DataTables_sort_wrapper openo-ellipsis ">
114 <span id="underlayObjId_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">ID
115 </span>
116 </div>
117 </th>
118 <th style="display: none;" class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayTenantName">
119 <div class="openo-table-th-border"></div>
120 <div class="DataTables_sort_wrapper openo-ellipsis ">
121 <span id="underlayObjData_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Data
122 </span>
123 </div>
124 </th> -->
125 </tr>
126 </thead>
127 <!-- <tbody>
128 <tr style="display: none;">
129 <td colspan="7" style="text-align: center;">NULL</td>
130 </tr>
131 <tr class="odd openo-table-tr openo-table-disable-element" data-rowid="0" data-tableid="underlayTable">
132
133 <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="underlayName" data-tableid="underlayTable">
134 <div class="openo-table-disable-element overflow_elip leftDataAlign">
135 <a class="underlayNameLink" href="javascript:void(0)" id="underlayTable_0_underlayName_link">underlay1</a>
136 </div>
137 </td>
138 <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="underlayType" data-tableid="underlayTable">
139 <div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="underlayTable_0_underlayType_custom_el">underlay 101</div>
140 </td>
141 <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="underlayTenantName" data-tableid="underlayTable">
142 <div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="underlayTable_0_underlayTenantName_custom_el">chaxuanyue</div>
143 </td>
144 <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="underlayOperation" data-tableid="underlayTable">
145 <div class="openo-table-disable-element overflow_elip leftDataAlign openo-table-custom-el" id="underlayTable_0_underlayOperation_custom_el">
146 <div>
147 <img src="images/delete.png" href="javascript:void(0)" onclick="deleteUnderlayData('this')" opertype="underlayDelete" style="cursor: pointer" title="Delete" id="bac4ff3c-d693-4f54-86cd-25af1ea22f59" rowid="0/">
148 </div>
149 </div>
150 </td>
151 <td style="display: none;" class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="underlayType" data-tableid="underlayTable">
152 <div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="underlayTable_0_underlayType_custom_el">ID12345</div>
153 </td>
154 <td style="display: none;" class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="underlayType" data-tableid="underlayTable">
155 <div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="underlayTable_0_underlayType_custom_el">[{"tpName":"tp345","peName":"pe123","vlanId":"12344","siteCidr":"tettd","ip":"1.1.1.1"},{"tpName":"tp345","peName":"8xzxze123","vlanId":"234","siteCidr":"tettd","ip":"10.10.1.10"}]</div>
156 </td>
157 </tr>
158 </tbody> -->
159 </table>
160 </div>
161 </div>
162 </div>
163 </div>
164 <hr>
165 <h3>TP Details</h3>
166 <div class="row-fluid" data-name="table_zone">
167 <div id='ict_virtualApplication_table_div'>
168 <div>
169 <div class="top">
170 <table id="underlayTpDataTable" 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">
171 <thead id="underlayTable_thead" class="openo-table-thead">
172 <tr class="active">
173 <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayName">
174 <div class="openo-table-th-border"></div>
175 <div class="DataTables_sort_wrapper openo-ellipsis ">
176 <span id="underlayName_sorticon" class="openo-table-th-sorticon overflow_elip openoTable_sortable leftHeaderAlign openo-table-disable-element ">TP Name
177 </span>
178 </div>
179 </th>
180 <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayType">
181 <div class="openo-table-th-border"></div>
182 <div class="DataTables_sort_wrapper openo-ellipsis ">
183 <span id="underlayType_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">PE Name
184 </span></div></th>
185 <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayTenantName">
186 <div class="openo-table-th-border"></div><div class="DataTables_sort_wrapper openo-ellipsis ">
187 <span id="underlayTenantName_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">VLAN ID
188 </span></div></th>
189 <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayTenantunderlayName" >
190 <div class="openo-table-th-border"></div><div class="DataTables_sort_wrapper openo-ellipsis ">
191 <span id="underlayTenantunderlayName_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Site CIDR
192 </span></div></th>
193 <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayTenantunderlayIP">
194 <div class="openo-table-th-border"></div><div class="DataTables_sort_wrapper openo-ellipsis ">
195 <span id="underlayTenantunderlayName_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">IP
196 </span></div></th>
197 </tr></thead>
198 <!-- <tbody>
199 </tbody> -->
200 </table>
201 </div>
202 </div>
203 </div>
204 </div>
205 </div>
206 <div id="filterTpLogicalType_select_popupcontainer" class="openo openo-select-popup-container openo-hide" style="width: 155px; max-height: 130px; left: 628px; top: 104px; z-index: 1761;"><div class="openo-select-item openo-ellipsis " id="filterTpLogicalType_openo-select-id_0"><label class="openo-ellipsis openo-select-blank-item" style="width: 100%; display: block; height: 20px;"></label></div><div class="openo-select-item openo-ellipsis " id="filterTpLogicalType_openo-select-id_1"><label class="openo-ellipsis " style="width: 100%; display: block; height: 20px;">ETH</label></div><div class="openo-select-item openo-ellipsis " id="filterTpLogicalType_openo-select-id_2"><label class="openo-ellipsis " style="width: 100%; display: block; height: 20px;" title="POS">POS</label></div><div class="openo-select-item openo-ellipsis " id="filterTpLogicalType_openo-select-id_3"><label class="openo-ellipsis " style="width: 100%; display: block; height: 20px;">Trunk</label></div><div class="openo-select-item openo-ellipsis " id="filterTpLogicalType_openo-select-id_4"><label class="openo-ellipsis " style="width: 100%; display: block; height: 20px;">Loopback</label></div></div>
207</body>
208</html>