7 files changed, 1225 insertions, 0 deletions
diff --git a/openo-portal/portal-lifecyclemgr/js/brs.js b/openo-portal/portal-lifecyclemgr/js/brs.js
new file mode 100644
index 00000000..8e9220ed
--- /dev/null
+++ b/openo-portal/portal-lifecyclemgr/js/brs.js
@@ -0,0 +1,342 @@
+/* Copyright (c) 2016, Huawei Technologies Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *		 http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+$('.siteDeleteImg').click(function(){
+	var data = $(this).parent().parent().parent().find('td:last').find('div:last').html();
+	alert(data);
+	var jsonObj = JSON.parse(data);
+	for(var i = 0; i < jsonObj.length; i++) {
+	    var obj = jsonObj[i];
+		var rowData = [obj.tpName,obj.peName,obj.vlanId,obj.siteCidr,obj.ip];
+		$('#underlayTpDataTable').DataTable();
+		$('#underlayTpDataTable').dataTable().fnAddData(rowData);
+	}
+});
+
+
+function deleteSite(objectId){
+	var requestUrl = "http://localhost:8080/org.openo.sdno.brs/openoapi/sdnobrs/v1/sites/"+objectId;
+		        $
+				.ajax({
+					type : "DELETE",
+					url : requestUrl,
+					contentType : "application/json",
+					success : function(jsonobj) {
+						$('#site').bootstrapTable('remove', {
+		                    field: 'id',
+		                    values: [objectId]
+		                });
+						alert("Delete Site successfull !!!");
+					},
+					error : function(xhr, ajaxOptions, thrownError) {
+						alert("Error on deleting site: " + xhr.responseText); 	
+					}
+				});
+}
+function deleteLink(objectId){
+	var requestUrl = "http://localhost:8080/org.openo.sdno.brs/openoapi/sdnobrs/v1/topological-links/"+objectId;
+		        $
+				.ajax({
+					type : "DELETE",
+					url : requestUrl,
+					contentType : "application/json",
+					success : function(jsonobj) {
+						$('#link').bootstrapTable('remove', {
+		                    field: 'id',
+		                    values: [objectId]
+		                });
+						alert("Delete Link successfull !!!");
+					},
+					error : function(xhr, ajaxOptions, thrownError) {
+						alert("Error on deleting link : " + xhr.responseText); 	
+					}
+				});
+}
+
+function deleteNe(objectId){
+	var requestUrl = "http://localhost:8080/org.openo.sdno.brs/openoapi/sdnobrs/v1/managed-elements/"+objectId;
+		        $
+				.ajax({
+					type : "DELETE",
+					url : requestUrl,
+					contentType : "application/json",
+					success : function(jsonobj) {
+						$('#ne').bootstrapTable('remove', {
+		                    field: 'id',
+		                    values: [objectId]
+		                });
+						alert("Delete NE successfull !!!");
+					},
+					error : function(xhr, ajaxOptions, thrownError) {
+						alert("Error on deleting ne : " + xhr.responseText); 	
+					}
+				});
+}
+
+function deletePort(objectId){
+	var requestUrl = "http://localhost:8080/org.openo.sdno.brs/openoapi/sdnobrs/v1/logical-termination-points/"+objectId;
+		        $
+				.ajax({
+					type : "DELETE",
+					url : requestUrl,
+					contentType : "application/json",
+					success : function(jsonobj) {
+						$('#port').bootstrapTable('remove', {
+		                    field: 'id',
+		                    values: [objectId]
+		                });
+						alert("Delete Port successfull !!!");
+					},
+					error : function(xhr, ajaxOptions, thrownError) {
+						alert("Error on deleting port : " + xhr.responseText); 	
+					}
+				});
+}
+function loadSiteData(){
+	var requestUrl = "http://localhost:8080/org.openo.sdno.brs/openoapi/sdnobrs/v1/sites";
+		        $
+				.ajax({
+					type : "GET",
+					url : requestUrl,
+					contentType : "application/json",
+					success : function(jsonobj) {
+						$('#site').bootstrapTable({
+			                data: jsonobj.sites
+		                });
+					},
+					error : function(xhr, ajaxOptions, thrownError) {
+						alert("Error on getting site data : " + xhr.responseText); 	
+					}
+				});
+}
+function loadLinkData(){
+	var requestUrl = "http://localhost:8080/org.openo.sdno.brs/openoapi/sdnobrs/v1/topological-links";
+		        $
+				.ajax({
+					type : "GET",
+					url : requestUrl,
+					contentType : "application/json",
+					success : function(jsonobj) {
+						$('#link').bootstrapTable({
+			                data: jsonobj.topologicalLinks
+		                });
+					},
+					error : function(xhr, ajaxOptions, thrownError) {
+						alert("Error on getting link data : " + xhr.responseText); 	
+					}
+				});
+}
+function loadNeData(){
+	var requestUrl = "http://localhost:8080/org.openo.sdno.brs/openoapi/sdnobrs/v1/managed-elements";
+		        $
+				.ajax({
+					type : "GET",
+					url : requestUrl,
+					contentType : "application/json",
+					success : function(jsonobj) {
+						$('#ne').bootstrapTable({
+			                data: jsonobj.managedElements
+		                });
+					},
+					error : function(xhr, ajaxOptions, thrownError) {
+						alert("Error on getting ne data : " + xhr.responseText); 	
+					}
+				});
+}
+function loadPortData(){
+	var requestUrl = "http://localhost:8080/org.openo.sdno.brs/openoapi/sdnobrs/v1/logical-termination-points";
+		        $
+				.ajax({
+					type : "GET",
+					url : requestUrl,
+					contentType : "application/json",
+					success : function(jsonobj) {
+						$('#port').bootstrapTable({
+		                 data: jsonobj.logicalTerminationPoints
+		                });
+					},
+					error : function(xhr, ajaxOptions, thrownError) {
+						alert("Error on getting port data : " + xhr.responseText); 	
+					}
+				});
+}
+$(function(){
+			$('.creat-btn').click(function(){
+				$('#vmAppDialog').addClass('in').css({'display':'block'});
+				
+			});
+			$('.close,.button-previous').click(function(){
+				$('#vmAppDialog').removeClass('in').css('display','none');
+			});
+			$('.detail-top ul li').click(function(){
+				$(this).addClass('current').siblings().removeClass('current');
+			});
+			$('.para').click(function(){				
+				if($('#serviceTemplateName').val() == ''){
+					alert('Please choose the service templet！');
+					$('#flavorTab').css('display','none');
+				}else{
+					$('#flavorTab').css('display','block');
+				}
+				$('#basicTab').css('display','block');
+			});
+			$('.basic').click(function(){
+				$('#flavorTab').css('display','none');
+			});
+			
+			$('.table tbody tr').click(function(){
+				$(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');
+			});
+			$('.table tr:odd').addClass('active');
+			$('#false').click(function(){
+				$('#vmAppDialog').addClass('in').css({'display':'block'});
+			});
+			$('.close,.button-previous').click(function(){
+				$('#vmAppDialog').removeClass('in').css('display','none');
+			});
+			$('#filterTpLogicalType').click(function(){
+				$('#filterTpLogicalType_select_popupcontainer').toggleClass('openo-hide');
+				$('#filterTpLogicalType').toggleClass('openo-focus');
+				var oLeft = $('#open_base_tpL_td6').offset().left;
+			var oTop = $('#open_base_tpL_td6').offset().top;
+			var oHeight = $('#open_base_tpL_td6').height();
+			$('#filterTpLogicalType_select_popupcontainer').css({'left':oLeft,'top':oTop + oHeight + 10});
+			});
+			$('div.openo-select-popup-container>div.openo-select-item>label').click(function(){
+				var Lvalue = $(this).html();
+				$('#filterTpLogicalType_select_input').attr('value',Lvalue);
+				$('#filterTpLogicalType_select_popupcontainer').addClass('openo-hide');
+				$('#filterTpLogicalType').removeClass('openo-focus');
+			});
+			$.fn.serializeObject = function() {
+				var o = {};
+				var a = this.serializeArray();
+				$.each(a, function() {
+					if (o[this.name] !== undefined) {
+						if (!o[this.name].push) {
+							o[this.name] = [ o[this.name] ];
+						}
+					o[this.name].push(this.value || '');
+					} else {
+						o[this.name] = this.value || '';
+					}
+				});
+			return o;
+			};
+			$('#createSite').click(function(){
+				var formData = JSON.stringify($("#vmAppForm").serializeObject());
+		        var jsonobj = JSON.parse(formData);
+		        var newJson = {"site": jsonobj};
+		        formData = JSON.stringify(newJson);
+		        var requestUrl = "http://localhost:8080/org.openo.sdno.brs/openoapi/sdnobrs/v1/sites";
+		        $
+				.ajax({
+					type : "POST",
+					url : requestUrl,
+					contentType : "application/json",
+					dataType : "json",
+					data : formData,
+					success : function(jsonResp) {
+						alert("Site saved successfully!!!");
+						jsonobj["id"]= jsonResp.site.id;
+						$('#site').bootstrapTable("append", jsonobj);
+						$('#vmAppDialog').removeClass('in').css('display','none');
+					},
+					error : function(xhr, ajaxOptions, thrownError) {
+						alert("Error on page : " + xhr.responseText); 	
+					}
+				});
+			});
+			
+			$('#createNe').click(function(){
+				var formData = JSON.stringify($("#neForm").serializeObject());
+				var jsonobj = JSON.parse(formData);
+		        var newJson = {"managedElement": jsonobj};
+		        formData = JSON.stringify(newJson);
+		        var requestUrl = "http://localhost:8080/org.openo.sdno.brs/openoapi/sdnobrs/v1/managed-elements";
+		        $
+				.ajax({
+					type : "POST",
+					url : requestUrl,
+					contentType : "application/json",
+					dataType : "json",
+					data : formData,
+					success : function(jsonResp) {
+						alert("NE saved successfully!!!");
+						jsonobj["id"]= jsonResp.managedElement.id;
+						$('#ne').bootstrapTable("append", jsonobj);
+						$('#vmAppDialog').removeClass('in').css('display','none');
+
+					},
+					error : function(xhr, ajaxOptions, thrownError) {
+						alert("Error on page : " + xhr.responseText); 	
+					}
+				});
+			});
+			
+			$('#createPort').click(function(){
+				var formData = JSON.stringify($("#portForm").serializeObject());
+				var jsonobj = JSON.parse(formData);
+		        var newJson = {"logicalTerminationPoint": jsonobj};
+		        formData = JSON.stringify(newJson);
+		        var requestUrl = "http://localhost:8080/org.openo.sdno.brs/openoapi/sdnobrs/v1/logical-termination-points";
+		        $
+				.ajax({
+					type : "POST",
+					url : requestUrl,
+					contentType : "application/json",
+					dataType : "json",
+					data : formData,
+					success : function(jsonResp) {
+						alert("Port saved successfully!!!");
+						//TODO : hide model data window.
+						jsonobj["id"]= jsonResp.logicalTerminationPoint.id;
+						$('#port').bootstrapTable("append", jsonobj);
+						$('#vmAppDialog').removeClass('in').css('display','none');
+
+					},
+					error : function(xhr, ajaxOptions, thrownError) {
+						alert("Error on page : " + xhr.responseText); 	
+					}
+				});
+			});
+			
+			$('#createLink').click(function(){
+				var formData = JSON.stringify($("#linkForm").serializeObject());
+				var jsonobj = JSON.parse(formData);
+		        var newJson = {"topologicalLink": jsonobj};
+		        formData = JSON.stringify(newJson);
+		        var requestUrl = "http://localhost:8080/org.openo.sdno.brs/openoapi/sdnobrs/v1/topological-links";
+		        $
+				.ajax({
+					type : "POST",
+					url : requestUrl,
+					contentType : "application/json",
+					dataType : "json",
+					data : formData,
+					success : function(jsonResp) {
+						alert("Link saved successfully!!!");
+						jsonobj["id"]= jsonResp.topologicalLink.id;
+						$('#link').bootstrapTable("append", jsonobj);
+						$('#vmAppDialog').removeClass('in').css('display','none');
+						
+					},
+					error : function(xhr, ajaxOptions, thrownError) {
+						alert("Error on page : " + xhr.responseText); 	
+					}
+				});
+			});
+			
+		})
+\ No newline at end of file
diff --git a/openo-portal/portal-lifecyclemgr/js/rest.js b/openo-portal/portal-lifecyclemgr/js/rest.js
index 33da54a3..e812a46c 100644
--- a/openo-portal/portal-lifecyclemgr/js/rest.js
+++ b/openo-portal/portal-lifecyclemgr/js/rest.js
@@ -1,3 +1,18 @@
+/* Copyright (c) 2016, Huawei Technologies Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *		 http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 $(function(){
 	$('.creat-btn').click(function(){
 				$('#vmAppDialog').addClass('in').css({'display':'block'});
diff --git a/openo-portal/portal-lifecyclemgr/js/underlay.js b/openo-portal/portal-lifecyclemgr/js/underlay.js
new file mode 100644
index 00000000..f5b31455
--- /dev/null
+++ b/openo-portal/portal-lifecyclemgr/js/underlay.js
@@ -0,0 +1,119 @@
+/* Copyright (c) 2016, Huawei Technologies Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *		 http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+function loadUnderlayData(){
+	var requestUrl = "http://localhost:8080/org.openo.sdno.l3vpnservice/openoapi/sdnol3vpn/v1/l3vpns";
+		        $
+				.ajax({
+					type : "GET",
+					url : requestUrl,
+					contentType : "application/json",
+					success : function(jsonobj) {
+						alert("loading underlay data");
+						//TODO: Update the table
+					},
+					error : function(xhr, ajaxOptions, thrownError) {
+						alert("Error on getting underlay data : " + xhr.responseText); 	
+					}
+				});
+}
+function deleteUnderlayData(objectId){
+	var requestUrl = "http://localhost:8080/org.openo.sdno.l3vpnservice/openoapi/sdnol3vpn/v1/l3vpns/"+objectId;
+		        $
+				.ajax({
+					type : "DELETE",
+					url : requestUrl,
+					contentType : "application/json",
+					success : function(jsonobj) {
+						alert("deleting underlay data");
+						//TODO: Update the table
+					},
+					error : function(xhr, ajaxOptions, thrownError) {
+						alert("Error on deleting underlay data : " + xhr.responseText); 	
+					}
+				});
+}
+function loadOverlayData(){
+	var requestUrl = "http://localhost:8080/org.openo.sdno.overlayvpnservice/openoapi/sdnooverlayvpn/v1/site2dc-vpn";
+		        $
+				.ajax({
+					type : "GET",
+					url : requestUrl,
+					contentType : "application/json",
+					success : function(jsonobj) {
+						alert("loading Overlay data...");
+						//TODO: Update the table
+					},
+					error : function(xhr, ajaxOptions, thrownError) {
+						alert("Error on getting Overlayvpn data : " + xhr.responseText); 	
+					}
+				});
+}
+function refressTpDataTable(overlayTable,TpTable){
+	alert("refesssing Tp data table");
+}
+$(function(){
+	$.fn.serializeObject = function() {
+				var o = {};
+				var a = this.serializeArray();
+				$.each(a, function() {
+					if (o[this.name] !== undefined) {
+						if (!o[this.name].push) {
+							o[this.name] = [ o[this.name] ];
+						}
+					o[this.name].push(this.value || '');
+					} else {
+						o[this.name] = this.value || '';
+					}
+				});
+			return o;
+			};
+	$('#createUnderlay').click(function(){
+				var formData = JSON.stringify($("#underlayForm").serializeObject());
+				alert(formData);
+		        var jsonobj = JSON.parse(formData);
+		        var requestUrl = "http://localhost:8080/org.openo.sdno.l3vpnservice/openoapi/sdnol3vpn/v1/l3vpns";
+		        $
+				.ajax({
+					type : "POST",
+					url : requestUrl,
+					contentType : "application/json",
+					dataType : "json",
+					data : formData,
+					success : function(jsonobj) {
+						alert("Details saved successfully!!!");
+						//var data = [jsonobj.name,jsonobj.hostName,jsonobj.productName,jsonobj.vendor,jsonobj.description];
+						//TODO: update the table
+					},
+					error : function(xhr, ajaxOptions, thrownError) {
+						alert("Error on page : " + xhr.responseText); 	
+					}
+				});
+			});
+	$('.underlayNameLink').click(function(){
+	 	alert("coming here");
+		var data = $(this).parent().parent().parent().find('td:last').find('div:last').html();
+		alert(data);
+		var jsonObj = JSON.parse(data);
+		for(var i = 0; i < jsonObj.length; i++) {
+		    var obj = jsonObj[i];
+			var rowData = [obj.tpName,obj.peName,obj.vlanId,obj.siteCidr,obj.ip];
+			$('#underlayTpDataTable').DataTable();
+			$('#underlayTpDataTable').dataTable().fnAddData(rowData);
+		}
+
+	});
+	
+})
+\ No newline at end of file
diff --git a/openo-portal/portal-lifecyclemgr/js/vpn.js b/openo-portal/portal-lifecyclemgr/js/vpn.js
new file mode 100644
index 00000000..6840dced
--- /dev/null
+++ b/openo-portal/portal-lifecyclemgr/js/vpn.js
@@ -0,0 +1,306 @@
+/* Copyright (c) 2016, Huawei Technologies Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *		 http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+function deleteSite(objectId){
+	alert(objectId);
+	var requestUrl = "http://localhost:8080/org.openo.sdno.brs/openoapi/sdnobrs/v1/sites"+objectId;
+		        $
+				.ajax({
+					type : "DELETE",
+					url : requestUrl,
+					contentType : "application/json",
+					success : function(jsonobj) {
+						alert("Details deleted successfully!!!");
+						//TODO: Update the table
+					},
+					error : function(xhr, ajaxOptions, thrownError) {
+						alert("Error on deleting site: " + xhr.responseText); 	
+					}
+				});
+}
+function deleteLink(objectId){
+	var requestUrl = "http://localhost:8080/org.openo.sdno.brs/openoapi/sdnobrs/v1/topological-links"+objectId;
+		        $
+				.ajax({
+					type : "DELETE",
+					url : requestUrl,
+					contentType : "application/json",
+					success : function(jsonobj) {
+						alert("Details deleted successfully!!!");
+						//TODO: Update the table
+					},
+					error : function(xhr, ajaxOptions, thrownError) {
+						alert("Error on deleting link : " + xhr.responseText); 	
+					}
+				});
+}
+
+function deleteNe(objectId){
+	var requestUrl = "http://localhost:8080/org.openo.sdno.brs/sdnobrs/v1/managed-elements"+objectId;
+		        $
+				.ajax({
+					type : "DELETE",
+					url : requestUrl,
+					contentType : "application/json",
+					success : function(jsonobj) {
+						alert("Details deleted successfully!!!");
+						//TODO: Update the table
+					},
+					error : function(xhr, ajaxOptions, thrownError) {
+						alert("Error on deleting ne : " + xhr.responseText); 	
+					}
+				});
+}
+
+function deletePort(objectId){
+	var requestUrl = "http://localhost:8080/org.openo.sdno.brs/openoapi/sdnobrs/v1/logical-termination-points"+objectId;
+		        $
+				.ajax({
+					type : "DELETE",
+					url : requestUrl,
+					contentType : "application/json",
+					success : function(jsonobj) {
+						alert("Details deleted successfully!!!");
+						//TODO: Update the table
+					},
+					error : function(xhr, ajaxOptions, thrownError) {
+						alert("Error on deleting port : " + xhr.responseText); 	
+					}
+				});
+}
+function loadSiteData(){
+	var requestUrl = "http://localhost:8080/org.openo.sdno.brs/openoapi/sdnobrs/v1/sites";
+		        $
+				.ajax({
+					type : "GET",
+					url : requestUrl,
+					contentType : "application/json",
+					success : function(jsonobj) {
+						alert("loading Site data");
+						//TODO: Update the table
+					},
+					error : function(xhr, ajaxOptions, thrownError) {
+						alert("Error on getting site data : " + xhr.responseText); 	
+					}
+				});
+}
+function loadLinkData(){
+	var requestUrl = "http://localhost:8080/org.openo.sdno.brs/openoapi/sdnobrs/v1/topological-links";
+		        $
+				.ajax({
+					type : "GET",
+					url : requestUrl,
+					contentType : "application/json",
+					success : function(jsonobj) {
+						alert("loading Link data");
+						//TODO: Update the table
+					},
+					error : function(xhr, ajaxOptions, thrownError) {
+						alert("Error on getting link data : " + xhr.responseText); 	
+					}
+				});
+}
+function loadNeData(){
+	var requestUrl = "http://localhost:8080/org.openo.sdno.brs/sdnobrs/v1/managed-elements";
+		        $
+				.ajax({
+					type : "GET",
+					url : requestUrl,
+					contentType : "application/json",
+					success : function(jsonobj) {
+						alert("loading NE data");
+						//TODO: Update the table
+					},
+					error : function(xhr, ajaxOptions, thrownError) {
+						alert("Error on getting ne data : " + xhr.responseText); 	
+					}
+				});
+}
+function loadPortData(){
+	var requestUrl = "http://localhost:8080/org.openo.sdno.brs/openoapi/sdnobrs/v1/logical-termination-points";
+		        $
+				.ajax({
+					type : "GET",
+					url : requestUrl,
+					contentType : "application/json",
+					success : function(jsonobj) {
+						alert("loading port data");
+						//TODO: Update the table
+					},
+					error : function(xhr, ajaxOptions, thrownError) {
+						alert("Error on getting port data : " + xhr.responseText); 	
+					}
+				});
+}
+$(function(){
+			$('.creat-btn').click(function(){
+				$('#vmAppDialog').addClass('in').css({'display':'block'});
+				
+			});
+			$('.close,.button-previous').click(function(){
+				$('#vmAppDialog').removeClass('in').css('display','none');
+			});
+			$('.detail-top ul li').click(function(){
+				$(this).addClass('current').siblings().removeClass('current');
+			});
+			$('.para').click(function(){				
+				if($('#serviceTemplateName').val() == ''){
+					alert('Please choose the service templet！');
+					$('#flavorTab').css('display','none');
+				}else{
+					$('#flavorTab').css('display','block');
+				}
+				$('#basicTab').css('display','block');
+			});
+			$('.basic').click(function(){
+				$('#flavorTab').css('display','none');
+			});
+			
+			$('.table tbody tr').click(function(){
+				$(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');
+			});
+			$('.table tr:odd').addClass('active');
+			$('#false').click(function(){
+				$('#vmAppDialog').addClass('in').css({'display':'block'});
+			});
+			$('.close,.button-previous').click(function(){
+				$('#vmAppDialog').removeClass('in').css('display','none');
+			});
+			$('#filterTpLogicalType').click(function(){
+				$('#filterTpLogicalType_select_popupcontainer').toggleClass('openo-hide');
+				$('#filterTpLogicalType').toggleClass('openo-focus');
+				var oLeft = $('#open_base_tpL_td6').offset().left;
+			var oTop = $('#open_base_tpL_td6').offset().top;
+			var oHeight = $('#open_base_tpL_td6').height();
+			$('#filterTpLogicalType_select_popupcontainer').css({'left':oLeft,'top':oTop + oHeight + 10});
+			});
+			$('div.openo-select-popup-container>div.openo-select-item>label').click(function(){
+				var Lvalue = $(this).html();
+				$('#filterTpLogicalType_select_input').attr('value',Lvalue);
+				$('#filterTpLogicalType_select_popupcontainer').addClass('openo-hide');
+				$('#filterTpLogicalType').removeClass('openo-focus');
+			});
+			$.fn.serializeObject = function() {
+				var o = {};
+				var a = this.serializeArray();
+				$.each(a, function() {
+					if (o[this.name] !== undefined) {
+						if (!o[this.name].push) {
+							o[this.name] = [ o[this.name] ];
+						}
+					o[this.name].push(this.value || '');
+					} else {
+						o[this.name] = this.value || '';
+					}
+				});
+			return o;
+			};
+			$('#createSite').click(function(){
+				var formData = JSON.stringify($("#vmAppForm").serializeObject());
+				alert(formData);
+		        var jsonobj = JSON.parse(formData);
+		        var requestUrl = "http://localhost:8080/org.openo.sdno.brs/openoapi/sdnobrs/v1/sites";
+		        $
+				.ajax({
+					type : "POST",
+					url : requestUrl,
+					contentType : "application/json",
+					dataType : "json",
+					data : formData,
+					success : function(jsonobj) {
+						alert("Details saved successfully!!!");
+						var data = [jsonobj.name,jsonobj.hostName,jsonobj.productName,jsonobj.vendor,jsonobj.description];
+						$('#example').dataTable().fnAddData(data);
+						$('.modal').modal('hide');
+					},
+					error : function(xhr, ajaxOptions, thrownError) {
+						alert("Error on page : " + xhr.responseText); 	
+					}
+				});
+			});
+			
+			$('#createNe').click(function(){
+				var formData = JSON.stringify($("#neForm").serializeObject());
+				alert(formData);
+		        var jsonobj = JSON.parse(formData);
+		        var requestUrl = "http://localhost:8080/org.openo.sdno.brs/sdnobrs/v1/managed-elements";
+		        $
+				.ajax({
+					type : "POST",
+					url : requestUrl,
+					contentType : "application/json",
+					dataType : "json",
+					data : formData,
+					success : function(jsonobj) {
+						alert("Details saved successfully!!!");
+						var data = [jsonobj.name,jsonobj.hostName,jsonobj.productName,jsonobj.vendor,jsonobj.description];
+						$('#example').dataTable().fnAddData(data);
+						$('.modal').modal('hide');
+					},
+					error : function(xhr, ajaxOptions, thrownError) {
+						alert("Error on page : " + xhr.responseText); 	
+					}
+				});
+			});
+			
+			$('#createPort').click(function(){
+				var formData = JSON.stringify($("#portForm").serializeObject());
+				alert(formData);
+		        var jsonobj = JSON.parse(formData);
+		        var requestUrl = "http://localhost:8080/org.openo.sdno.brs/openoapi/sdnobrs/v1/logical-termination-points";
+		        $
+				.ajax({
+					type : "POST",
+					url : requestUrl,
+					contentType : "application/json",
+					dataType : "json",
+					data : formData,
+					success : function(jsonobj) {
+						alert("Details saved successfully!!!");
+						var data = [jsonobj.name,jsonobj.hostName,jsonobj.productName,jsonobj.vendor,jsonobj.description];
+						$('#example').dataTable().fnAddData(data);
+						$('.modal').modal('hide');
+					},
+					error : function(xhr, ajaxOptions, thrownError) {
+						alert("Error on page : " + xhr.responseText); 	
+					}
+				});
+			});
+			
+			$('#createLink').click(function(){
+				var formData = JSON.stringify($("#linkForm").serializeObject());
+				alert(formData);
+		        var jsonobj = JSON.parse(formData);
+		        var requestUrl = "http://localhost:8080/org.openo.sdno.brs/openoapi/sdnobrs/v1/topological-links";
+		        $
+				.ajax({
+					type : "POST",
+					url : requestUrl,
+					contentType : "application/json",
+					dataType : "json",
+					data : formData,
+					success : function(jsonobj) {
+						alert("Details saved successfully!!!");
+						var data = [jsonobj.name,jsonobj.hostName,jsonobj.productName,jsonobj.vendor,jsonobj.description];
+						$('#example').dataTable().fnAddData(data);
+						$('.modal').modal('hide');
+					},
+					error : function(xhr, ajaxOptions, thrownError) {
+						alert("Error on page : " + xhr.responseText); 	
+					}
+				});
+			});
+			
+		})
+\ No newline at end of file
diff --git a/openo-portal/portal-lifecyclemgr/overlayvpn.html b/openo-portal/portal-lifecyclemgr/overlayvpn.html
new file mode 100644
index 00000000..b0337fcd
--- /dev/null
+++ b/openo-portal/portal-lifecyclemgr/overlayvpn.html
@@ -0,0 +1,136 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+	<head lang="en">
+	<meta charset="UTF-8">
+	<title></title>
+	<link href="css/bootstrap.min.css" rel="stylesheet" />
+	<link href="css/VMMain.css" rel="stylesheet" />
+	<link href="css/bootstrap-table.min.css" rel="stylesheet" />
+	<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
+    <script type="text/javascript" src="js/bootstrap.min.js"></script>
+    <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 type="text/css">
+	</style>
+	<script type="text/javascript">
+	$(document).ready(function() {
+		var jsondata = [];
+		jsondata = loadOverlayData();
+
+			$('#sai').bootstrapTable({
+			//Assigning data to table
+				data: jsondata
+			});
+		
+    });
+	function operateFormatter(value, row, index) {
+        return [
+            '<img class="siteDeleteImg" src="images/delete.png" href="javascript:void(0)" style="cursor: pointer" name="title" title="Delete" />'
+        ].join('');
+        
+    }
+	 window.operateEvents = {
+         'click .siteDeleteImg': function (e, value, row, index) {
+             // TO DO ajex call for delete
+             console.log(value, row, index);
+         }
+     };
+	</script>
+</head>
+<body id="open_base_vpn_cotentBody" class="cotentBody ng-scope">
+	<div class="container-fluid ms-controller">
+		
+	<h3>	Overlay VPN	</h3>
+		<div class="row-fluid" data-name="table_zone">
+			<div id='ict_virtualApplication_table_div'>
+                <div>
+                    <div class="top">
+                        <table 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">
+                            <thead id="soverlayTable_thead" class="openo-table-thead">
+								<tr class="active">
+									<th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign" data-field="overlayName" data-sortable="true">
+										<div class="openo-table-th-border"></div>
+										<div class="DataTables_sort_wrapper openo-ellipsis ">
+											<span id="overlayName_sorticon" class="openo-table-th-sorticon overflow_elip openoTable_sortable leftHeaderAlign  openo-table-disable-element">Name
+                    </span>
+					</div>
+					</th>
+					<th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign" data-field="overlayDesc" data-sortable="true">
+						<div class="openo-table-th-border"></div>
+						<div class="DataTables_sort_wrapper openo-ellipsis ">
+							<span id="overlayDesc_sorticon" class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element "> Description
+                    </span></div></th>
+					<th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign" data-field="overlayThincCPE" data-sortable="true">
+					<div class="openo-table-th-border"></div><div class="DataTables_sort_wrapper openo-ellipsis ">
+					<span id="overlayThincCPE_sorticon" class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element ">Thin CPE
+                    </span></div></th>
+					<th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign" data-field="overlayPortVlanID" data-sortable="true">
+					<div class="openo-table-th-border"></div><div class="DataTables_sort_wrapper openo-ellipsis ">
+					<span id="overlayPortVlanID_sorticon" class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element ">Port:Vlan ID
+                    </span></div></th>
+					<th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign" data-field="overlayDCName" data-sortable="true">
+					<div class="openo-table-th-border"></div><div class="DataTables_sort_wrapper openo-ellipsis ">
+					<span id="overlayDCName_sorticon" class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element ">DC Name
+                    </span></div></th>			
+					<th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign" data-field="overlayVPC" data-sortable="true">
+					   <div class="openo-table-th-border"></div><div class="DataTables_sort_wrapper openo-ellipsis ">
+					      <span id="overlayVPC_sorticon" class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element ">VPC
+                          </span>
+					   </div>
+					</th>
+					<th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign" data-field="overlayVPCCIDR" data-sortable="true">
+					   <div class="openo-table-th-border"></div><div class="DataTables_sort_wrapper openo-ellipsis ">
+					      <span id="overlayVPCCIDR_sorticon" class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element ">VPC CIDR
+                          </span>
+					   </div>
+					</th>
+					<th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign" data-field="overlayOperation"  align="center" data-formatter = "operateFormatter" data-events="operateEvents">
+						<div class="openo-table-th-border"></div>
+						<div class="DataTables_sort_wrapper openo-ellipsis ">
+							<span id="portAction_sorticon" class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element ">Action</span>
+						</div>
+					</th>					
+				</tr></thead>
+							<!-- <tbody>
+								<tr style="display: none;">
+									<td colspan="7" style="text-align: center;">NULL</td>
+								</tr>
+								<tr class="odd  openo-table-tr openo-table-disable-element" data-rowid="0" data-tableid="overlayTable">
+									<td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="overlayName" data-tableid="overlayTable">
+										<div class="openo-table-disable-element overflow_elip leftDataAlign">
+											<a class="openo-table-disable-element hyperLinkRow" href="javascript:void(0)" id="overlayTable_0_overlayName_link">overlay1</a></div></td>
+									<td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="overlayDesc" data-tableid="overlayTable"><div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="overlayTable_0_overlayDesc_custom_el">overlay 101</div>
+                                    </td>
+                                    <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="overlayThincCPE" data-tableid="overlayTable"><div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="overlayTable_0_overlayThincCPE_custom_el">chaxuanyue</div>
+                                    </td>
+                                    <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="overlayPortVlanID" data-tableid="overlayTable"><div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="overlayTable_0_overlayPortVlanID_custom_el">Bangalore</div>
+                                    </td>
+								    <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="overlayDCName" data-tableid="overlayTable"><div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="overlayTable_0_overlayDCName_custom_el">Bangalore</div>
+                                    </td>
+								    <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="overlayVPC" data-tableid="overlayTable"><div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="overlayTable_0_overlayVPC_custom_el">Bangalore</div>
+                                    </td>
+								    <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="overlayVPCCIDR" data-tableid="overlayTable"><div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="overlayTable_0_overlayVPCCIDR_custom_el">Bangalore</div>
+                                    </td>
+                                    <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="overlayOperation" data-tableid="overlayTable">
+                                        <div class="openo-table-disable-element overflow_elip leftDataAlign openo-table-custom-el" id="overlayTable_0_overlayOperation_custom_el">
+										    <div>
+											    <img src="images/delete.png" href="javascript:void(0)" onclick="deleteoverlay('this')" opertype="overlayDelete" style="cursor: pointer" title="Delete" id="bac4ff3c-d693-4f54-86cd-25af1ea22f59" rowid="0/">
+											</div>
+										</div>
+									</td>
+								</tr>
+							</tbody> -->
+                        </table>
+                    </div>
+                </div>
+            </div>
+		</div>
+		
+		
+	
+
+</body>
+</html>
+\ No newline at end of file
diff --git a/openo-portal/portal-lifecyclemgr/sdnovpn.html b/openo-portal/portal-lifecyclemgr/sdnovpn.html
new file mode 100644
index 00000000..a5c6b54a
--- /dev/null
+++ b/openo-portal/portal-lifecyclemgr/sdnovpn.html
@@ -0,0 +1,99 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title></title>
+	<link href="css/bootstrap.min.css" rel="stylesheet" />
+	<link href="css/RMain.css" rel="stylesheet" />
+    <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
+    <script type="text/javascript" src="js/bootstrap.min.js"></script>
+</head>
+<script type="text/javascript">
+    $(function(){
+        $('.openo_accordion_ui-icon-expand,.header').click(function(){
+            $('#accordionmenuid_ul_0_0_brAppTopMenuID_UL').slideToggle(500);
+            $('.openo_accordion_ui-icon-expand').toggleClass('current')
+        });
+        $('.openoAccordian_showHideArrow_hide').click(function(){
+            // $('#open_base_openo').css('margin-left','-200px');
+            // $('#open_base_openo').css('display','none');
+            // $('.bar').css('display','block');
+            if($('#accordionmenuid').width() >= 200){
+                $('#accordionmenuid').width('18px');
+                $('.openo_accordion_ui-icon-expand,.header,#accordionmenuid_ul_0_0_brAppTopMenuID_UL li a').css('display','none');
+                $('#accordionmenuid_arrow').attr('classname','openoAccordian_showHideArrow_show');
+                $('#iframeContainer').css('width','1284px');                
+            }else if($('#accordionmenuid').width() == 18){
+                $('#accordionmenuid').width('220px');
+                $('.openo_accordion_ui-icon-expand,.header,#accordionmenuid_ul_0_0_brAppTopMenuID_UL li a').css('display','block');
+                $('#accordionmenuid_arrow').attr('classname','openoAccordian_showHideArrow_hide');
+                $('#iframeContainer').css('width','1063px');
+            }
+            
+        });
+        $('.bar span').click(function(){
+            $('#open_base_openo').css('display','block');
+            $('.bar').css('display','none');
+             $('#iframeContainer').css('width','1063px');
+        });
+        $('#accordionmenuid_ul_0_0_brAppTopMenuID_UL li').click(function(){
+            $(this).addClass('openo_accordion_selected').siblings().removeClass('openo_accordion_selected');
+        });
+        $('#accordionmenuid_ul_0_0_brAppTopMenuID_UL_1_0_brAppSiteMenuID').click(function(){
+            $('#accordionContent').attr('src','overlayvpn.html');
+        });
+        $('#accordionmenuid_ul_0_0_brAppTopMenuID_UL_1_1_brAppMeMenuID').click(function(){
+            $('#accordionContent').attr('src','underlayvpn.html');
+        });
+    })
+</script>
+<body>
+    <div id="febDiv" style="overflow: hidden;">
+    <div id="open_base_feb">
+        <!--use for store menu come from feb service, maybe just a temple plan-->
+        <div id="app">
+            <div id="iemp_layout_container" ng-controller="resourceCtrl" class="iemp_layout_container ng-scope">
+
+                <table id="open_base_table" class="three-cols-layout">
+                    <tbody id="open_base_tbody">
+                    <tr id="open_base_tr">
+                        <td class="bar">
+                            <span></span>
+                        </td>
+                        <td id="open_base_openo" class="three-cols-column three-cols-left">
+                            <div id="accordionmenuid" allow-resize="true" dataset="dataArr" height="resHeight" listeners="callBacklisteners" resize-callback="resizehandler" current-select="currentselect" click="clickHandler" class="ng-isolate-scope accordion_parent openo_accordion_main_menu" style="height: 870px;">
+                                <div class="openo-accordion-resizable-handle" style="cursor: auto;"></div>
+                                <ul id="accordionmenuid_ul" class="openoAccordian_accordionmenu">
+                                    <li id="accordionmenuid_ul_0_0_brAppTopMenuID" nodeid="brAppTopMenuID">
+                                        <span class="openo_accordion_ui-icon-expand" style="padding-left: 20px; height: 60px;cursor: pointer;"></span>
+                                        <span class="openoAccordian_showHideArrow_hide" id="accordionmenuid_arrow" style="cursor: pointer;"></span>
+                                        <a title="brApp" class="header opened" style="padding-left: 10px; cursor: pointer;">VPN Manager</a>
+                                        <ul id="accordionmenuid_ul_0_0_brAppTopMenuID_UL">
+                                            <li id="accordionmenuid_ul_0_0_brAppTopMenuID_UL_1_0_brAppSiteMenuID" nodeid="brAppSiteMenuID" class="" style="display: list-item;">
+                                                <a title="点击访问站点" class="" style="padding-left: 62px;">Overlay VPN</a>
+											</li>
+                                            <li id="accordionmenuid_ul_0_0_brAppTopMenuID_UL_1_1_brAppMeMenuID" nodeid="brAppMeMenuID" style="display: list-item;">
+                                                <a title="点击访问网元" style="padding-left: 62px;">Underlay VPN</a>
+                                            </li>
+                                        </ul>
+                                    </li>
+                                </ul>
+                            </div>
+
+                        </td>
+                        <td id="open_base_iframe" class="three-cols-column three-cols-center" style="padding: 0px;">
+
+                            <div id="iframeContainer" class="frame-class" style="height: 870px;">
+                                <iframe id="accordionContent" src="" height="870px"></iframe>
+                            </div>
+                        </td>
+                    </tr>
+                    </tbody>
+                </table>
+
+            </div>
+        </div>
+    </div>
+</div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/openo-portal/portal-lifecyclemgr/underlayvpn.html b/openo-portal/portal-lifecyclemgr/underlayvpn.html
new file mode 100644
index 00000000..94dbdf7b
--- /dev/null
+++ b/openo-portal/portal-lifecyclemgr/underlayvpn.html
@@ -0,0 +1,208 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+	<head lang="en">
+	<meta charset="UTF-8">
+	<title></title>
+	<link href="css/bootstrap.min.css" rel="stylesheet" />
+	<link href="css/jquery.dataTables.min.css" rel="stylesheet" />
+	<link href="css/VMMain.css" rel="stylesheet" />
+	<link href="css/bootstrap-table.min.css" rel="stylesheet" />
+	<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
+	<script type="text/javascript" src="js/bootstrap.min.js"></script>
+	<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 type="text/css">
+	hr {
+  ##-moz-border-bottom-colors: none;
+  -moz-border-image: none;
+  -moz-border-left-colors: none;
+  -moz-border-right-colors: none;
+  -moz-border-top-colors: none;
+  ##border-color: #EEEEEE -moz-use-text-color #FFFFFF;
+  border-style: solid none;
+  border-width: 1px 0;
+  margin: 50px 0;
+}
+	</style>
+	<script type="text/javascript">
+	$(document).ready(function() {
+ 
+
+var jsondata =loadUnderlayData();
+		$('#tbl_overlay').bootstrapTable({
+		//Assigning data to table
+			data: jsondata
+		});
+		$('#underlayTpDataTable').bootstrapTable({
+			//Assigning data to table
+				data: {}
+			});
+    });
+	function operateFormatter(value, row, index) {
+        return [
+            '<img class="siteDeleteImg" src="images/delete.png" href="javascript:void(0)" style="cursor: pointer" name="title" title="Delete" />'
+        ].join('');
+        
+    }
+	 window.operateEvents = {
+         'click .siteDeleteImg': function (e, value, row, index) {
+             // TO DO ajex call for delete
+             console.log(value, row, index);
+         }
+     };
+
+	 
+	 function nameFormatter(value, row) {
+		jsonForTP = row.json.data;
+		var name=JSON.stringify(row.json.data);
+	  	var temp = "<a class='underlayNameLink' onclick='getMethod(this)' name='"+ name + "' data-events='operateEventsU'>" + value + "</a>";
+        return temp;
+    }
+	 function getMethod(obj){
+		 //Update the lower table here
+		 
+		 $('#underlayTpDataTable').bootstrapTable(
+			//Assigning data to table
+				"append", JSON.parse(obj.name)
+			);
+	 }
+	</script>
+</head>
+<body id="open_base_vpn_cotentBody" class="cotentBody ng-scope">
+	<div class="container-fluid ms-controller">
+				<h3>Underlay VPN</h3>
+		<div class="row-fluid" data-name="table_zone">
+			<div id='ict_virtualApplication_table_div'>
+                <div>
+                    <div class="top">
+                        <table id="tbl_overlay" data-pagination="true" data-page-size="5" data-pagination-first-text="First" data-pagination-pre-text="Previous" data-pagination-next-text="Next" data-pagination-last-text="Last">
+                            <thead id="sunderlayTable_thead" class="openo-table-thead">
+								<tr class="active">
+								
+		
+									<th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign" data-formatter="nameFormatter" data-field="underlayName" data-sortable="true">
+										<div class="openo-table-th-border"></div>
+										<div class="DataTables_sort_wrapper openo-ellipsis ">
+											<span id="underlayName_sorticon" class="openo-table-th-sorticon overflow_elip openoTable_sortable leftHeaderAlign  openo-table-disable-element ">Name
+                    </span>
+					</div>
+					</th>
+					<th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign" data-field="underlayTenantName" data-sortable="true">
+					    <div class="openo-table-th-border"></div>
+						<div class="DataTables_sort_wrapper openo-ellipsis ">
+						    <span id="underlayTenantName_sorticon" class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element ">State
+                            </span>
+						</div>
+					</th>
+					<th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign" data-field="underlayType" data-sortable="true">
+						<div class="openo-table-th-border"></div>
+						<div class="DataTables_sort_wrapper openo-ellipsis ">
+							<span id="underlayType_sorticon" class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element " >Description
+                    </span></div></th>
+					<th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign" data-field="underlayDescription" align="center" data-formatter = "operateFormatter" data-events="operateEvents">
+					   <div class="openo-table-th-border"></div><div class="DataTables_sort_wrapper openo-ellipsis ">
+					      <span id="underlayDescription_sorticon" class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element ">Action
+                          </span>
+					   </div>
+					</th>
+					<!-- <th style="display: none;" class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign" data-field="underlayTenantName">
+	                    <div class="openo-table-th-border"></div>
+		                    <div class="DataTables_sort_wrapper openo-ellipsis ">
+		                        <span id="underlayObjId_sorticon" class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element ">ID
+                                </span>
+	                    </div>
+	                </th>
+									<th style="display: none;" class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign" data-field="underlayTenantName">
+					                    <div class="openo-table-th-border"></div>
+						                    <div class="DataTables_sort_wrapper openo-ellipsis ">
+						                        <span id="underlayObjData_sorticon" class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element ">Data
+                                                </span>
+						                    </div>
+					                </th> -->
+					</tr>
+					</thead>
+						    <!-- <tbody>
+								<tr style="display: none;">
+									<td colspan="7" style="text-align: center;">NULL</td>
+								</tr>
+								<tr class="odd  openo-table-tr openo-table-disable-element" data-rowid="0" data-tableid="underlayTable">
+								
+									<td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="underlayName" data-tableid="underlayTable">
+										<div class="openo-table-disable-element overflow_elip leftDataAlign">
+											<a class="underlayNameLink" href="javascript:void(0)" id="underlayTable_0_underlayName_link">underlay1</a>
+										</div>
+									</td>
+									<td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="underlayType" data-tableid="underlayTable">
+									    <div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="underlayTable_0_underlayType_custom_el">underlay 101</div>
+                                    </td>
+                                    <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="underlayTenantName" data-tableid="underlayTable">
+									    <div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="underlayTable_0_underlayTenantName_custom_el">chaxuanyue</div>
+                                    </td>
+                                    <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="underlayOperation" data-tableid="underlayTable">
+                                        <div class="openo-table-disable-element overflow_elip leftDataAlign openo-table-custom-el" id="underlayTable_0_underlayOperation_custom_el">
+										    <div>
+											    <img src="images/delete.png" href="javascript:void(0)" onclick="deleteUnderlayData('this')" opertype="underlayDelete" style="cursor: pointer" title="Delete" id="bac4ff3c-d693-4f54-86cd-25af1ea22f59" rowid="0/">
+											</div>
+										</div>
+									</td>
+									<td style="display: none;" class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="underlayType" data-tableid="underlayTable">
+									    <div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="underlayTable_0_underlayType_custom_el">ID12345</div>
+                                    </td>
+									<td style="display: none;" class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="underlayType" data-tableid="underlayTable">
+									    <div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="underlayTable_0_underlayType_custom_el">[{"tpName":"tp345","peName":"pe123","vlanId":"12344","siteCidr":"tettd","ip":"1.1.1.1"},{"tpName":"tp345","peName":"8xzxze123","vlanId":"234","siteCidr":"tettd","ip":"10.10.1.10"}]</div>
+                                    </td>
+								</tr>
+							</tbody> -->
+                        </table>
+                    </div>
+                </div>
+            </div>
+		</div>
+		<hr>
+		<h3>TP Details</h3>
+		<div class="row-fluid" data-name="table_zone">
+			<div id='ict_virtualApplication_table_div'>
+                <div>
+                    <div class="top">
+                        <table id="underlayTpDataTable" data-pagination="true" data-page-size="5" data-pagination-first-text="First" data-pagination-pre-text="Previous" data-pagination-next-text="Next" data-pagination-last-text="Last">
+                            <thead id="underlayTable_thead" class="openo-table-thead">
+								<tr class="active">
+									<th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign" data-field="underlayName">
+										<div class="openo-table-th-border"></div>
+										<div class="DataTables_sort_wrapper openo-ellipsis ">
+											<span id="underlayName_sorticon" class="openo-table-th-sorticon overflow_elip openoTable_sortable leftHeaderAlign  openo-table-disable-element ">TP Name
+                    </span>
+					</div>
+					</th>
+					<th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign" data-field="underlayType">
+						<div class="openo-table-th-border"></div>
+						<div class="DataTables_sort_wrapper openo-ellipsis ">
+							<span id="underlayType_sorticon" class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element ">PE Name
+                    </span></div></th>
+					<th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign" data-field="underlayTenantName">
+					<div class="openo-table-th-border"></div><div class="DataTables_sort_wrapper openo-ellipsis ">
+					<span id="underlayTenantName_sorticon" class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element ">VLAN ID
+                    </span></div></th>
+					<th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign" data-field="underlayTenantunderlayName" >
+					<div class="openo-table-th-border"></div><div class="DataTables_sort_wrapper openo-ellipsis ">
+					<span id="underlayTenantunderlayName_sorticon" class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element ">Site CIDR
+                    </span></div></th>
+					<th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign" data-field="underlayTenantunderlayIP">
+					<div class="openo-table-th-border"></div><div class="DataTables_sort_wrapper openo-ellipsis ">
+					<span id="underlayTenantunderlayName_sorticon" class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element ">IP
+                    </span></div></th>
+					</tr></thead>
+							<!-- <tbody>
+							</tbody> -->
+                        </table>
+                    </div>
+                </div>
+            </div>
+		</div>
+	</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