UI Portal changes GSO-12

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

7 files changed, 135 insertions, 125 deletions

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