Merge "UI Portal changes GSO-12"
diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/UnderLay_TP.html b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/UnderLay_TP.html
index 253155e..17c2442 100644
--- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/UnderLay_TP.html
+++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/UnderLay_TP.html
@@ -30,32 +30,33 @@
<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>
+ <script type="text/javascript" src="js/bootstrap-table-filter-control.min.js"></script>
<style>
- .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;
- }
+ .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;
+ }
</style>
<script type="text/javascript">
$(document).ready(function() {
@@ -205,27 +206,27 @@
</div>
</div> -->
- <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="tname" data-sortable="true">TP Name</th>
- <th data-field="pname" data-sortable="true">PE Name</th>
- <th data-field="vlan" data-sortable="true">VLAN ID</th>
- <th data-field="site" data-sortable="true">Site CIDR</th>
- <th data-field="ip" data-sortable="true">IP</th>
- </tr>
- </thead>
-
- </table>
- </div>
+ <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"
+ data-filter-control="true">
+ <thead style="background:#ECECEC">
+ <tr>
+ <th data-field="tname" data-sortable="true" data-filter-control="input">TP Name</th>
+ <th data-field="pname" data-sortable="true" data-filter-control="input">PE Name</th>
+ <th data-field="vlan" data-sortable="true" data-filter-control="input">VLAN ID</th>
+ <th data-field="site" data-sortable="true" data-filter-control="input">Site CIDR</th>
+ <th data-field="ip" data-sortable="true" data-filter-control="input">IP</th>
+ </tr>
+ </thead>
+ </table>
</div>
</div>
</div>
+ </div>
diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/css/VMMain.css b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/css/VMMain.css
index 48e82b5..75def13 100644
--- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/css/VMMain.css
+++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/css/VMMain.css
@@ -67,6 +67,10 @@
border: 1px solid #4AC9FF
}
+.table-striped>tbody>tr:nth-child(odd)>td,.table-striped>tbody>tr:nth-child(odd)>th {
+ background-color:#f5f5f5
+}
+
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
color: #009ae7;
background-color: #fff;
diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/gsolcmmain.html b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/gsolcmmain.html
index 4527e27..7fbc77d 100644
--- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/gsolcmmain.html
+++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/gsolcmmain.html
@@ -28,9 +28,9 @@
<script type="text/javascript" src="js/rest.js"></script>
<script type="text/javascript" src="js/bootstrap-table.min.js"></script>
<script type="text/javascript" src="js/gsolcm.js"></script>
- <script type="text/javascript" src="js/jquery-ui-1.12.1.min.js">
- </script>
- <link href="css/jquery-ui-1.12.1.min.css" rel="stylesheet" />
+ <script type="text/javascript" src="js/jquery-ui-1.12.1.min.js"></script>
+ <link href="css/jquery-ui-1.12.1.min.css" rel="stylesheet" />
+ <script type="text/javascript" src="js/bootstrap-table-filter-control.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
/* $('.modal-content').resizable({
@@ -154,7 +154,7 @@
return true;
}
</script>
- <style>
+ <style>
.nav-tabs {
border-bottom-style: none;
}
@@ -240,13 +240,13 @@
<div class="top">
<table class="table table-striped" 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">
+ data-pagination-next-text="Next" data-pagination-last-text="Last" data-filter-control="true">
<thead id="soverlayTable_thead" class="openo-table-thead" style="background:#ECECEC">
<tr class="active" style="background:#D9D6D5">
<th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
data-formatter="operateFormatterServiceName" data-field="serviceName"
- data-sortable="true">
+ data-sortable="true" data-filter-control="input">
<div class="openo-table-th-border"></div>
<div class="DataTables_sort_wrapper openo-ellipsis ">
<span id="overlayDesc_sorticon"
@@ -256,7 +256,7 @@
</th>
<th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
- data-field="templateName" data-sortable="true">
+ data-field="templateName" data-sortable="true" data-filter-control="input">
<div class="openo-table-th-border"></div>
<div class="DataTables_sort_wrapper openo-ellipsis ">
<span id="overlayThincCPE_sorticon"
@@ -272,7 +272,7 @@
</div>
</th -->
<th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
- data-field="createTime" data-sortable="true">
+ data-field="createTime" data-sortable="true" data-filter-control="input">
<div class="openo-table-th-border"></div>
<div class="DataTables_sort_wrapper openo-ellipsis ">
<span id="overlayVPC_sorticon"
@@ -281,7 +281,7 @@
</div>
</th>
<th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
- data-field="creator" data-sortable="true">
+ data-field="creator" data-sortable="true" data-filter-control="input">
<div class="openo-table-th-border"></div>
<div class="DataTables_sort_wrapper openo-ellipsis ">
<span id="overlayVPCCIDR_sorticon"
@@ -522,7 +522,7 @@
aria-hidden="true" id="createNS">
<span id="nfv-virtualApplication-iui-text-cancelBtn">OK</span>
</button>
- <button type="button" style="width:80px;" class="btn button-previous SDBtn">
+ <button type="button" style="width:80px;" class="btn button-previous SDBtn" data-dismiss="modal">
<span id="nfv-virtualApplication-iui-text-previousBtn">Cancel</span>
</button>
diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/bootstrap-table-filter-control.min.js b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/bootstrap-table-filter-control.min.js
new file mode 100644
index 0000000..78dfa70
--- /dev/null
+++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/bootstrap-table-filter-control.min.js
@@ -0,0 +1,7 @@
+/*
+ * bootstrap-table - v1.11.0 - 2016-07-02
+ * https://github.com/wenzhixin/bootstrap-table
+ * Copyright (c) 2016 zhixin wen
+ * Licensed MIT License
+ */
+!function(a){"use strict";var b=a.fn.bootstrapTable.utils.sprintf,c=a.fn.bootstrapTable.utils.objectKeys,d=function(b,c,d){c=a.trim(c),b=a(b.get(b.length-1)),f(b,c)||b.append(a("<option></option>").attr("value",c).text(a("<div />").html(d).text()))},e=function(b){var c=b.find("option:gt(0)");c.sort(function(b,c){return b=a(b).text().toLowerCase(),c=a(c).text().toLowerCase(),a.isNumeric(b)&&a.isNumeric(c)&&(b=parseFloat(b),c=parseFloat(c)),b>c?1:c>b?-1:0}),b.find("option:gt(0)").remove(),b.append(c)},f=function(a,b){for(var c=a.get(a.length-1).options,d=0;d<c.length;d++)if(c[d].value===b.toString())return!0;return!1},g=function(a){a.$tableHeader.css("height","77px")},h=function(a){var b=a.$header;return a.options.height&&(b=a.$tableHeader),b},i=function(a){var b="select, input";return a.options.height&&(b="table select, table input"),b},j=function(b){if(a.fn.bootstrapTable.utils.isIEBrowser()){if(a(b).is("input")){var c=0;if("selectionStart"in b)c=b.selectionStart;else if("selection"in document){b.focus();var d=document.selection.createRange(),e=document.selection.createRange().text.length;d.moveStart("character",-b.value.length),c=d.text.length-e}return c}return-1}return-1},k=function(b,c){a.fn.bootstrapTable.utils.isIEBrowser()&&(void 0!==b.setSelectionRange?b.setSelectionRange(c,c):a(b).val(b.value))},l=function(b){var c=h(b),d=i(b);b.options.valuesFilterControl=[],c.find(d).each(function(){b.options.valuesFilterControl.push({field:a(this).closest("[data-field]").data("field"),value:a(this).val(),position:j(a(this).get(0))})})},m=function(b){var c=null,d=[],e=h(b),f=i(b);b.options.valuesFilterControl.length>0&&e.find(f).each(function(){c=a(this).closest("[data-field]").data("field"),d=a.grep(b.options.valuesFilterControl,function(a){return a.field===c}),d.length>0&&(a(this).val(d[0].value),k(a(this).get(0),d[0].position))})},n=function(){var b=[],c=document.cookie.match(/(?:bs.table.)(\w*)/g);return c?(a.each(c,function(c,d){/./.test(d)&&(d=d.split(".").pop()),-1===a.inArray(d,b)&&b.push(d)}),b):void 0},o=function(b){var c=b.options.data,f=(b.pageTo<b.options.data.length?b.options.data.length:b.pageTo,function(a){return a.filterControl&&"select"===a.filterControl.toLowerCase()&&a.searchable}),g=function(a){return void 0===a.filterData||"column"===a.filterData.toLowerCase()},h=function(a){return a&&a.length>0},i=b.options.pagination?"server"===b.options.sidePagination?b.pageTo:b.options.totalRows:b.pageTo;a.each(b.header.fields,function(j,k){var l=b.columns[a.fn.bootstrapTable.utils.getFieldIndex(b.columns,k)],m=a(".bootstrap-table-filter-control-"+p(l.field));if(f(l)&&g(l)&&h(m)){0===m.get(m.length-1).options.length&&d(m,"","");for(var n={},o=0;i>o;o++){var q=c[o][k],r=a.fn.bootstrapTable.utils.calculateObjectValue(b.header,b.header.formatters[j],[q,c[o],o],q);n[r]=q}for(var s in n)d(m,n[s],s);e(m)}})},p=function(a){return String(a).replace(/(:|\.|\[|\]|,)/g,"\\$1")},q=function(b,c){var f,g,h=!1,i=0;a.each(b.columns,function(i,j){if(f="hidden",g=[],j.visible){if(j.filterControl){g.push('<div style="margin: 0 2px 2px 2px;" class="filterControl">');var k=j.filterControl.toLowerCase();j.searchable&&b.options.filterTemplate[k]&&(h=!0,f="visible",g.push(b.options.filterTemplate[k](b,j.field,f)))}else g.push('<div style="height: 34px;"></div>');if(a.each(c.children().children(),function(b,c){return c=a(c),c.data("field")===j.field?(c.find(".fht-cell").append(g.join("")),!1):void 0}),void 0!==j.filterData&&"column"!==j.filterData.toLowerCase()){var l,m,n=t(s,j.filterData.substring(0,j.filterData.indexOf(":")));if(null===n)throw new SyntaxError('Error. You should use any of these allowed filter data methods: var, json, url. Use like this: var: {key: "value"}');l=j.filterData.substring(j.filterData.indexOf(":")+1,j.filterData.length),m=a(".bootstrap-table-filter-control-"+p(j.field)),d(m,"",""),n(l,m);var o,q;switch(n){case"url":a.ajax({url:l,dataType:"json",success:function(a){for(var b in a)d(m,b,a[b]);e(m)}});break;case"var":o=window[l];for(q in o)d(m,q,o[q]);e(m);break;case"jso":o=JSON.parse(l);for(q in o)d(m,q,o[q]);e(m)}}}}),h?(c.off("keyup","input").on("keyup","input",function(a){clearTimeout(i),i=setTimeout(function(){b.onColumnSearch(a)},b.options.searchTimeOut)}),c.off("change","select").on("change","select",function(a){clearTimeout(i),i=setTimeout(function(){b.onColumnSearch(a)},b.options.searchTimeOut)}),c.off("mouseup","input").on("mouseup","input",function(c){var d=a(this),e=d.val();""!==e&&setTimeout(function(){var a=d.val();""===a&&(clearTimeout(i),i=setTimeout(function(){b.onColumnSearch(c)},b.options.searchTimeOut))},1)}),c.find(".date-filter-control").length>0&&a.each(b.columns,function(b,d){void 0!==d.filterControl&&"datepicker"===d.filterControl.toLowerCase()&&c.find(".date-filter-control.bootstrap-table-filter-control-"+d.field).datepicker(d.filterDatepickerOptions).on("changeDate",function(b){a(b.currentTarget).keyup()})})):c.find(".filterControl").hide()},r=function(a){switch(a=void 0===a?"left":a.toLowerCase()){case"left":return"ltr";case"right":return"rtl";case"auto":return"auto";default:return"ltr"}},s={"var":function(a,b){var c=window[a];for(var f in c)d(b,f,c[f]);e(b)},url:function(b,c){a.ajax({url:b,dataType:"json",success:function(a){for(var b in a)d(c,b,a[b]);e(c)}})},json:function(a,b){var c=JSON.parse(a);for(var f in c)d(b,f,c[f]);e(b)}},t=function(a,b){for(var c=Object.keys(a),d=0;d<c.length;d++)if(c[d]===b)return a[b];return null};a.extend(a.fn.bootstrapTable.defaults,{filterControl:!1,onColumnSearch:function(){return!1},filterShowClear:!1,alignmentSelectControlOptions:void 0,filterTemplate:{input:function(a,c,d){return b('<input type="text" class="form-control bootstrap-table-filter-control-%s" style="width: 100%; visibility: %s">',c,d)},select:function(a,c,d){return b('<select class="form-control bootstrap-table-filter-control-%s" style="width: 100%; visibility: %s" dir="%s"></select>',c,d,r(a.options.alignmentSelectControlOptions))},datepicker:function(a,c,d){return b('<input type="text" class="form-control date-filter-control bootstrap-table-filter-control-%s" style="width: 100%; visibility: %s">',c,d)}},valuesFilterControl:[]}),a.extend(a.fn.bootstrapTable.COLUMN_DEFAULTS,{filterControl:void 0,filterData:void 0,filterDatepickerOptions:void 0,filterStrictSearch:!1,filterStartsWithSearch:!1}),a.extend(a.fn.bootstrapTable.Constructor.EVENTS,{"column-search.bs.table":"onColumnSearch"}),a.extend(a.fn.bootstrapTable.defaults.icons,{clear:"glyphicon-trash icon-clear"}),a.extend(a.fn.bootstrapTable.locales,{formatClearFilters:function(){return"Clear Filters"}}),a.extend(a.fn.bootstrapTable.defaults,a.fn.bootstrapTable.locales);var u=a.fn.bootstrapTable.Constructor,v=u.prototype.init,w=u.prototype.initToolbar,x=u.prototype.initHeader,y=u.prototype.initBody,z=u.prototype.initSearch;u.prototype.init=function(){if(this.options.filterControl){var a=this;Object.keys||c(),this.options.valuesFilterControl=[],this.$el.on("reset-view.bs.table",function(){a.options.height&&(a.$tableHeader.find("select").length>0||a.$tableHeader.find("input").length>0||q(a,a.$tableHeader))}).on("post-header.bs.table",function(){m(a)}).on("post-body.bs.table",function(){a.options.height&&g(a)}).on("column-switch.bs.table",function(){m(a)})}v.apply(this,Array.prototype.slice.apply(arguments))},u.prototype.initToolbar=function(){if(this.showToolbar=this.options.filterControl&&this.options.filterShowClear,w.apply(this,Array.prototype.slice.apply(arguments)),this.options.filterControl&&this.options.filterShowClear){var c=this.$toolbar.find(">.btn-group"),d=c.find(".filter-show-clear");d.length||(d=a(['<button class="btn btn-default filter-show-clear" ',b('type="button" title="%s">',this.options.formatClearFilters()),b('<i class="%s %s"></i> ',this.options.iconsPrefix,this.options.icons.clear),"</button>"].join("")).appendTo(c),d.off("click").on("click",a.proxy(this.clearFilterControl,this)))}},u.prototype.initHeader=function(){x.apply(this,Array.prototype.slice.apply(arguments)),this.options.filterControl&&q(this,this.$header)},u.prototype.initBody=function(){y.apply(this,Array.prototype.slice.apply(arguments)),o(this)},u.prototype.initSearch=function(){if(z.apply(this,Array.prototype.slice.apply(arguments)),"server"!==this.options.sidePagination){var b=this,c=a.isEmptyObject(this.filterColumnsPartial)?null:this.filterColumnsPartial;this.data=c?a.grep(this.data,function(d,e){for(var f in c){var g=b.columns[a.fn.bootstrapTable.utils.getFieldIndex(b.columns,f)],h=c[f].toLowerCase(),i=d[f];if(g&&g.searchFormatter&&(i=a.fn.bootstrapTable.utils.calculateObjectValue(b.header,b.header.formatters[a.inArray(f,b.header.fields)],[i,d,e],i)),g.filterStrictSearch){if(-1===a.inArray(f,b.header.fields)||"string"!=typeof i&&"number"!=typeof i||i.toString().toLowerCase()!==h.toString().toLowerCase())return!1}else if(g.filterStartsWithSearch){if(-1===a.inArray(f,b.header.fields)||"string"!=typeof i&&"number"!=typeof i||0!==(i+"").toLowerCase().indexOf(h))return!1}else if(-1===a.inArray(f,b.header.fields)||"string"!=typeof i&&"number"!=typeof i||-1===(i+"").toLowerCase().indexOf(h))return!1}return!0}):this.data}},u.prototype.initColumnSearch=function(a){if(l(this),a){this.filterColumnsPartial=a,this.updatePagination();for(var b in a)this.trigger("column-search",b,a[b])}},u.prototype.onColumnSearch=function(b){if(!(a.inArray(b.keyCode,[37,38,39,40])>-1)){l(this);var c=a.trim(a(b.currentTarget).val()),d=a(b.currentTarget).closest("[data-field]").data("field");a.isEmptyObject(this.filterColumnsPartial)&&(this.filterColumnsPartial={}),c?this.filterColumnsPartial[d]=c:delete this.filterColumnsPartial[d],this.searchText+="randomText",this.options.pageNumber=1,this.onSearch(b),this.trigger("column-search",d,c)}},u.prototype.clearFilterControl=function(){if(this.options.filterControl&&this.options.filterShowClear){var c=this,d=n(),e=h(c),f=e.closest("table"),g=e.find(i(c)),j=c.$toolbar.find(".search input"),k=0;if(a.each(c.options.valuesFilterControl,function(a,b){b.value=""}),m(c),!(g.length>0))return;if(this.filterColumnsPartial={},a(g[0]).trigger("INPUT"===g[0].tagName?"keyup":"change"),j.length>0&&c.resetSearch(),c.options.sortName!==f.data("sortName")||c.options.sortOrder!==f.data("sortOrder")){var l=e.find(b('[data-field="%s"]',a(g[0]).closest("table").data("sortName")));l.length>0&&(c.onSort(f.data("sortName"),f.data("sortName")),a(l).find(".sortable").trigger("click"))}clearTimeout(k),k=setTimeout(function(){d&&d.length>0&&a.each(d,function(a,b){void 0!==c.deleteCookie&&c.deleteCookie(b)})},c.options.searchTimeOut)}}}(jQuery);
\ No newline at end of file
diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/rest.js b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/rest.js
index a72cbf2..75d61ac 100644
--- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/rest.js
+++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/rest.js
@@ -115,13 +115,11 @@
/*******************************************Get Service**********************************************/
function loadGetServiceData(){
- return JSON.parse('[{"serviceId":"1111","serviceName":"siteToDC","description":"siteToDC","createTime":"xxxxxx","creator":"XXXX","serviceType":"GSO","templateName":"xxxxxx","inputParameters":{"POP-1-0-0.vFW-moc":"xxx","POP-1-0-0.vCPE-moc":"xxx"}},{"serviceId":"2222","serviceName":"siteToDC","description":"siteToDC","createTime":"xxxxxx","creator":"XXXX","serviceType":"GSO","templateName":"xxxxxx","inputParameters":{"POP-1-0-0.vFW-moc":"xxx1","POP-1-0-0.vCPE-moc":"xxx1"}}]');
- // TODO authenticate the url.
- var requestUrl = url + "/openoapi/sdnobrs/v1/topological-links";
+ var requestUrl = url + "/openoapi/inventory/v1/services";
$
.ajax({
- type : "GET",
+ type : "POST",
url : requestUrl,
contentType : "application/json",
success : function(jsonobj) {
@@ -136,10 +134,8 @@
/*********************************************Get Service Details********************************************/
function loadServiceDetails(serviceId){
- return JSON.parse('[{"id":"12345", "name":"sdno"}, {"id":"23456", "name":"gso"},{"id":"12345", "name":"nfvo"}]');
- //return JSON.parse('{"sdno":[{"id":"12345", "name":"SDNO"}], "nfvo":[{"id":"12345", "name":"SDNO"}]}');
- //return JSON.parse('"nfvo":[{"id":"12345", "name":"SDNO"}]}');
- // TODO authenticate the url.
+
+ // TODO re-confirm the latest url.
var requestUrl = url + "/openoapi/lifecyclemgr/v1/services/toposequence/" + serviceId;
$
.ajax({
diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/overlayvpn.html b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/overlayvpn.html
index a9143ef..7656f57 100644
--- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/overlayvpn.html
+++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/overlayvpn.html
@@ -30,6 +30,7 @@
<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>
+ <script type="text/javascript" src="js/bootstrap-table-filter-control.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
@@ -252,30 +253,30 @@
</div>
</div> -->
- <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="desc" data-sortable="true">Description</th>
- <th data-field="thinCpe" data-sortable="true">Thin CPE</th>
- <th data-field="port" data-sortable="true">Port:Vlan ID</th>
- <th data-field="dcName" data-sortable="true">DC Name</th>
- <th data-field="vpc" data-sortable="true">VPC</th>
- <th data-field="vpcCidr" data-sortable="true">VPC CIDR</th>
- <th data-field="action" data-sortable="">Action</th>
- </tr>
- </thead>
-
- </table>
- </div>
- </div>
+ <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"
+ data-filter-control="true">
+ <thead style="background:#ECECEC">
+ <tr>
+ <th data-field="name" data-sortable="true" data-filter-control="input">Name</th>
+ <th data-field="desc" data-sortable="true" data-filter-control="input">Description</th>
+ <th data-field="thinCpe" data-sortable="true" data-filter-control="input">Thin CPE</th>
+ <th data-field="port" data-sortable="true" data-filter-control="input">Port:Vlan ID</th>
+ <th data-field="dcName" data-sortable="true" data-filter-control="input">DC Name</th>
+ <th data-field="vpc" data-sortable="true" data-filter-control="input">VPC</th>
+ <th data-field="vpcCidr" data-sortable="true" data-filter-control="input">VPC CIDR</th>
+ <th data-field="action" data-sortable="">Action</th>
+ </tr>
+ </thead>
+ </table>
</div>
</div>
+ </div>
+ </div>
</body>
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 647269d..58c0958 100644
--- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/underlayvpn.html
+++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/underlayvpn.html
@@ -31,13 +31,14 @@
<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>
- .dropdown-menu {
- min-width: 10px;
- }
- .btn {
- padding: 4px;
- }
+ <script type="text/javascript" src="js/bootstrap-table-filter-control.min.js"></script>
+ <style>
+ .dropdown-menu {
+ min-width: 10px;
+ }
+ .btn {
+ padding: 4px;
+ }
.fixed-table-container tbody td .th-inner,
.fixed-table-container thead th .th-inner {
@@ -238,44 +239,44 @@
</div>
-->
- <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 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"
+ data-filter-control="true">
+ <thead style="background:#ECECEC">
+ <tr>
+ <th data-field="name" data-sortable="true" data-filter-control="input">Name</th>
+ <th data-field="state" data-sortable="true" data-filter-control="input">State</th>
+ <th data-field="desc" data-sortable="true" data-filter-control="input">Description</th>
+ <th data-field="action" data-sortable="">Action</th>
+ </tr>
+ </thead>
+ </table>
</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;">
- <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>
- <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>
+
+ <div id="tpDiv">
+ <iframe src="UnderLay_TP.html" style="width:100%;height:450px;" 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;">
+ <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>
</body>
</html>
\ No newline at end of file