diff options
Diffstat (limited to 'openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/underlayvpn.html')
| -rw-r--r-- | openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/underlayvpn.html | 394 |
1 files changed, 191 insertions, 203 deletions
diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/underlayvpn.html b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/underlayvpn.html index 4db9f27f..647269d4 100644 --- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/underlayvpn.html +++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/underlayvpn.html @@ -32,36 +32,64 @@ <script type="text/javascript" src="js/underlay.js"></script>
<script type="text/javascript" src="js/bootstrap-table.min.js"></script>
<style>
- .fixed-table-container tbody td .th-inner,
- .fixed-table-container thead th .th-inner {
- line-height: 4px;
+ .dropdown-menu {
+ min-width: 10px;
}
-
- .fixed-table-pagination .pagination-info {
- display: none !important;
+ .btn {
+ padding: 4px;
}
- .table tbody tr:hover td,
- .table tbody tr.odd:hover td {
- background-color: #e6fbe0 !important;
- }
+ .fixed-table-container tbody td .th-inner,
+ .fixed-table-container thead th .th-inner {
+ line-height: 4px;
+ }
+ .fixed-table-pagination .pagination-info {
+ display: none !important;
+ }
+ .table tbody tr:hover td,
+ .table tbody tr.odd:hover td {
+ background-color: #e6fbe0 !important;
+ }
+ .delete-btn {
+ background: url(delete.png) no-repeat !important;
+ width: 16px;
+ height: 16px;
+ border: none;
+ }
+ table tr.openoTable_row_selected td {
+ background: #e8f8fe!important;
+ border-bottom: 1px solid #e8e8e8!important;
+ }
+ .container-fluid {
+ padding-left: 10px;
+ padding-right: 0px;
+ }
- .delete-btn {
- background: url(delete.png) no-repeat !important;
- width: 16px;
- height: 16px;
- border: none;
+ .clearfix {
+ display: none;
}
+ .page-list{
+ float:none !important;
+ display:inline-block !important;
+ margin-right: 10px;
+ vertical-align: middle;
+ margin-bottom: 25px;
- table tr.openoTable_row_selected td {
- background: #e8f8fe !important;
- border-bottom: 1px solid #e8e8e8 !important;
}
+ .pull-left{
+ float:none !important;
+ display:inline-block !important;
+ }
- .container-fluid {
- padding-left: 10px;
- padding-right: 0px;
- }
+ .pull-right{
+ float:none !important;
+ display:inline-block !important;
+ }
+
+ .fixed-table-pagination{
+ height:20px;
+ float:right;
+ }
</style>
<script type="text/javascript">
$(document).ready(function () {
@@ -78,202 +106,162 @@ });
$('.table tbody tr').click(function () {
$(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');
- })
- });
- 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);
- }
- };
+ $('#sai').on('sort.bs.table', function () {
+
+ }).on('click-row.bs.table', function () {
+
+
+ $('.table tbody tr').click(function() {
+
+ $(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');
+ });
+
+ });
+ });
- function nameFormatter(value, row) {
- jsonForTP = row.json.data;
- var name = JSON.stringify(row.json.data);
- var temp = "<a class='underlayNameLink' onclick='getMethod(this)' name='" + name + "' data-events='operateEventsU'>" + value + "</a>";
- return temp;
- }
- function getMethod(obj) {
- //Update the lower table here
+ 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);
+ }
+ };
+ /* function nameFormatter(value, row) {
+ jsonForTP = row.json.data;
+ var name=JSON.stringify(row.json.data);
+ var temp = "<a class='underlayNameLink' onclick='getMethod(this)' name='"+ name + "' data-events='operateEventsU'>" + value + "</a>";
+ return temp;
+ }*/
+ function getMethod(obj) {
+ //Update the lower table here
+ $('#underlayTpDataTable').bootstrapTable(
+ //Assigning data to table
+ "append", JSON.parse(obj.name)
+ );
+ }
+ </script>
- $('#underlayTpDataTable').bootstrapTable(
- //Assigning data to table
- "append", JSON.parse(obj.name)
- );
- }
- </script>
- </head>
-<body id="open_base_vpn_cotentBody" class="cotentBody ng-scope">
-<div class="container-fluid ms-controller">
- <h3>Underlay VPN</h3>
- <div class="row-fluid" data-name="table_zone">
- <div id='ict_virtualApplication_table_div'>
- <div>
- <div class="top">
- <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">
- <thead id="sunderlayTable_thead" class="openo-table-thead" style="background:#ECECEC">
- <tr class="active">
+</head>
+<body id="open_base_vpn_cotentBody" class="cotentBody ng-scope">
+ <div class="container-fluid ms-controller">
+ <h3>Underlay VPN</h3>
+ <!-- <div class="row-fluid" data-name="table_zone">
+ <div id='ict_virtualApplication_table_div'>
+ <div>
+ <div class="top">
+ <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">
+ <thead id="sunderlayTable_thead" class="openo-table-thead" style="background:#ECECEC">
+ <tr class="active">
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
- data-formatter="nameFormatter" data-field="underlayName" data-sortable="true">
- <div class="openo-table-th-border"></div>
- <div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="underlayName_sorticon"
- class="openo-table-th-sorticon overflow_elip openoTable_sortable leftHeaderAlign openo-table-disable-element ">Name
+ <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-formatter="nameFormatter" data-field="underlayName" data-sortable="true">
+ <div class="openo-table-th-border"></div>
+ <div class="DataTables_sort_wrapper openo-ellipsis ">
+ <span id="underlayName_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="underlayTenantName" data-sortable="true">
- <div class="openo-table-th-border"></div>
- <div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="underlayTenantName_sorticon"
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">State
+ </div>
+ </th>
+ <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayTenantName" data-sortable="true">
+ <div class="openo-table-th-border"></div>
+ <div class="DataTables_sort_wrapper openo-ellipsis ">
+ <span id="underlayTenantName_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">State
</span>
- </div>
- </th>
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
- data-field="underlayType" data-sortable="true">
- <div class="openo-table-th-border"></div>
- <div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="underlayType_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="underlayDescription" align="center" data-formatter="operateFormatter"
- data-events="operateEvents">
- <div class="openo-table-th-border"></div>
- <div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="underlayDescription_sorticon"
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Action
+ </div>
+ </th>
+ <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayType" data-sortable="true">
+ <div class="openo-table-th-border"></div>
+ <div class="DataTables_sort_wrapper openo-ellipsis ">
+ <span id="underlayType_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="underlayDescription" align="center" data-formatter="operateFormatter" data-events="operateEvents">
+ <div class="openo-table-th-border"></div>
+ <div class="DataTables_sort_wrapper openo-ellipsis ">
+ <span id="underlayDescription_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Action
</span>
- </div>
- </th>
- <!-- <th style="display: none;" class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayTenantName">
- <div class="openo-table-th-border"></div>
- <div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="underlayObjId_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">ID
- </span>
- </div>
- </th>
- <th style="display: none;" class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayTenantName">
- <div class="openo-table-th-border"></div>
- <div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="underlayObjData_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Data
- </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="underlayTable">
-
- <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="underlayName" data-tableid="underlayTable">
- <div class="openo-table-disable-element overflow_elip leftDataAlign">
- <a class="underlayNameLink" href="javascript:void(0)" id="underlayTable_0_underlayName_link">underlay1</a>
- </div>
- </td>
- <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="underlayType" data-tableid="underlayTable">
- <div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="underlayTable_0_underlayType_custom_el">underlay 101</div>
- </td>
- <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="underlayTenantName" data-tableid="underlayTable">
- <div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="underlayTable_0_underlayTenantName_custom_el">chaxuanyue</div>
- </td>
- <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="underlayOperation" data-tableid="underlayTable">
- <div class="openo-table-disable-element overflow_elip leftDataAlign openo-table-custom-el" id="underlayTable_0_underlayOperation_custom_el">
- <div>
- <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/">
</div>
- </div>
- </td>
- <td style="display: none;" class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="underlayType" data-tableid="underlayTable">
- <div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="underlayTable_0_underlayType_custom_el">ID12345</div>
- </td>
- <td style="display: none;" class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="underlayType" data-tableid="underlayTable">
- <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>
- </td>
- </tr>
- </tbody> -->
- </table>
+ </th>
+
+ </tr>
+ </thead>
+ <tbody>
+
+ <tr>
+ <td>a_data </td>
+ <td>data </td>
+ <td>Sample1 </td>
+ <td>
+ <button class="table-btn delete-btn"></button>
+ </td>
+ </tr>
+
+ <tr>
+ <td>b_data </td>
+ <td>new sample </td>
+ <td>modified </td>
+ <td>
+ <button class="table-btn delete-btn"></button>
+ </td>
+ </tr>
+
+ <tr>
+ <td>data </td>
+ <td>updated </td>
+ <td>Sample </td>
+ <td>
+ <button class="table-btn delete-btn"></button>
+ </td>
+ </tr>
+
+ <tr>
+ <td>alarm </td>
+ <td>deleted </td>
+ <td>Sample </td>
+ <td>
+ <button class="table-btn delete-btn"></button>
+ </td>
+ </tr>
+ </tbody>
+
+ </table>
+ </div>
</div>
</div>
</div>
- </div>
- <hr>
- <h3>TP Details</h3>
- <div class="row-fluid" data-name="table_zone">
- <div id='ict_virtualApplication_table_div'>
- <div>
- <div class="top">
- <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">
- <thead id="underlayTable_thead" class="openo-table-thead">
- <tr class="active">
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
- data-field="underlayName">
- <div class="openo-table-th-border"></div>
- <div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="underlayName_sorticon"
- class="openo-table-th-sorticon overflow_elip openoTable_sortable leftHeaderAlign openo-table-disable-element ">TP Name
- </span>
- </div>
- </th>
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
- data-field="underlayType">
- <div class="openo-table-th-border"></div>
- <div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="underlayType_sorticon"
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">PE Name
- </span></div>
- </th>
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
- data-field="underlayTenantName">
- <div class="openo-table-th-border"></div>
- <div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="underlayTenantName_sorticon"
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">VLAN ID
- </span></div>
- </th>
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
- data-field="underlayTenantunderlayName">
- <div class="openo-table-th-border"></div>
- <div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="underlayTenantunderlayName_sorticon"
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Site CIDR
- </span></div>
- </th>
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
- data-field="underlayTenantunderlayIP">
- <div class="openo-table-th-border"></div>
- <div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="underlayTenantunderlayName_sorticon"
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">IP
- </span></div>
- </th>
- </tr>
- </thead>
- <!-- <tbody>
- </tbody> -->
- </table>
+ -->
+
+ <div class="row-fluid" data-name="table_zone">
+ <div id='ict_virtualApplication_table_div'>
+ <div>
+ <div class="top">
+ <table class="table-striped table " id="sai" data-pagination="true"
+ data-pagination-first-text="First" data-pagination-pre-text="Previous" data-pagination-next-text="Next" data-pagination-last-text="Last">
+ <thead style="background:#ECECEC">
+ <tr>
+ <th data-field="name" data-sortable="true">Name</th>
+ <th data-field="state" data-sortable="true">State</th>
+ <th data-field="desc" data-sortable="true">Description</th>
+ <th data-field="action" data-sortable="">Action</th>
+ </tr>
+ </thead>
+
+ </table>
+ </div>
+ </div>
</div>
</div>
- </div>
- </div>
+
+<div id="tpDiv">
+ <iframe src="UnderLay_TP.html" style="width:100%;height:210px;" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0">
+ </iframe>
</div>
<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;">
|