From: Seshu-Kumar-M <seshu.kumar.m@huawei.com>
Date: Tue, 11 Oct 2016 07:47:17 +0000 (-0700)
Subject: UI Portal changes GSO-12
X-Git-Tag: release/sun~106^2
X-Git-Url: https://gerrit.onap.org/r/gitweb?a=commitdiff_plain;h=a81f191130325f58a13f2746e574aa012b34adb9;p=vnfsdk%2Frefrepo.git

UI Portal changes GSO-12

Change-Id: Ib72a9c6576acd5786fa01ac049b629fe5ee489ee
Signed-off-by: Seshu-Kumar-M <seshu.kumar.m@huawei.com>
---

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 253155e3..17c24427 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 48e82b59..75def130 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 @@ ul,li{
 	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 4527e27e..7fbc77d3 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 00000000..78dfa703
--- /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 a72cbf27..75d61ac3 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 @@ $(function () {
 
 /*******************************************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 @@ function loadGetServiceData(){
 
 /*********************************************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 a9143ef0..7656f57b 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 647269d4..58c09586 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>
+    </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 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>
-    <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