added the changes for the SDNO LCM and copyright and license infor for all the js files

Change-Id: I92a2ea3f0060d63d721e7a48a0cc342556fc6967
Signed-off-by: Seshu-Kumar-M <seshu.kumar.m@huawei.com>
diff --git a/openo-portal/portal-lifecyclemgr/js/brs.js b/openo-portal/portal-lifecyclemgr/js/brs.js
new file mode 100644
index 0000000..8e9220e
--- /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 33da54a..e812a46 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 0000000..f5b3145
--- /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 0000000..6840dce
--- /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 0000000..b0337fc
--- /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 0000000..a5c6b54
--- /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 0000000..94dbdf7
--- /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