From cf298fc4149e52135d5a712b345ac206abfc88cb Mon Sep 17 00:00:00 2001
From: Luji7 <lu.ji3@zte.com.cn>
Date: Fri, 4 Nov 2016 10:25:10 +0800
Subject: Issue ID: GSO-60 merge changes from sun release

Change-Id: I9949e242644711a07a8da7a22dfbaf19ee7d74bd
Signed-off-by: Luji7 <lu.ji3@zte.com.cn>
---
 .../src/main/webapp/lifecyclemgr/InputData.html    |  21 +-
 .../src/main/webapp/lifecyclemgr/TopoAccor.html    | 249 +++++++++++----------
 .../src/main/webapp/lifecyclemgr/UnderLay_TP.html  |  20 +-
 .../src/main/webapp/lifecyclemgr/accorTables.html  |  16 +-
 .../src/main/webapp/lifecyclemgr/chartTopo.html    |   7 +-
 .../src/main/webapp/lifecyclemgr/gsolcmmain.html   |  36 ++-
 .../lcm-template-parameters-i18n-en-US.properties  |  94 ++++++++
 .../src/main/webapp/lifecyclemgr/js/brs.js         |   2 +-
 .../src/main/webapp/lifecyclemgr/js/gsolcm.js      |  43 ++--
 .../lifecyclemgr/js/jquery.bootstrap-growl.min.js  |   1 +
 .../webapp/lifecyclemgr/js/tmNodesController.js    |   6 +-
 .../src/main/webapp/lifecyclemgr/js/underlay.js    |  20 +-
 .../src/main/webapp/lifecyclemgr/js/vpn.js         |   2 +-
 .../src/main/webapp/lifecyclemgr/overlayvpn.html   |  88 ++++----
 .../src/main/webapp/lifecyclemgr/underlayvpn.html  |  24 +-
 15 files changed, 368 insertions(+), 261 deletions(-)
 create mode 100644 openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/i18n/lcm-template-parameters-i18n-en-US.properties
 create mode 100644 openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/jquery.bootstrap-growl.min.js

diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/InputData.html b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/InputData.html
index 5d75323f..1aae9d23 100644
--- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/InputData.html
+++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/InputData.html
@@ -25,17 +25,20 @@
         <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="../common/thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js"></script>
+		<script type="text/javascript" src="../common/thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js"></script>
         <script type="text/javascript" src="js/bootstrap.min.js"></script>
         <script type="text/javascript" src="js/rest.js"></script>
-        <script type="text/javascript" src="js/gsolcm.js"></script>
+		<script type="text/javascript" src="js/gsolcm.js"></script>
         <script type="text/javascript" src="js/bootstrap-table.min.js"></script>
        <script>
             $(document).ready(function () {
-                new lcmHandler();
+			    new lcmHandler();
                 $('[data-toggle="tooltip"]').tooltip();
+
                 var params = new URLSearchParams(window.location.search.slice(1));
+
                 var jsonData = JSON.parse((params.get("json")));
                 if (jsonData != null) {
                     $("body").empty();
@@ -57,12 +60,12 @@
 							if(sdnControllerObj != undefined){
 								paramValue = sdnControllerObj.name;
 							}
-						}	
+						}		
                         else{
-                             var nameObj = {name:key,showName:key};
-                             name = showName(nameObj);
-                        }                                                     
-                        $("body").append('<div class="mT15 form-group row" style="margin-top:35px;margin-left:25%"><div class="col-sm-6" align="right"><label class="control-label"><span style="font-size:16px;">'+ name + ':</span></label></div><div class="col-sm-6"><input  type="text" name="" maxlength="256" style="margin-left:10px;width:250px;" data-toggle="tooltip" data-placement="top" title="'+ paramValue + '" value="'+ paramValue + '" readonly disabled/></div></div>');
+						    var nameObj = {name:key,showName:key};
+							name = showName(nameObj);
+                        }						
+                        $("body").append('<div class="mT15 form-group row" style="margin-top:35px;margin-left:15%"><div class="col-sm-5" align="left"><label class="control-label"><span style="font-size:16px;">'+ name + '</span></label></div><div class="col-sm-1" align="left"><span style="font-size:16px;">:</span></div><div class="col-sm-6"><input  type="text" name="" maxlength="256" style="margin-left:10px;width:250px;padding-left: 5px" data-toggle="tooltip" data-placement="top" title="'+ paramValue + '" value="'+ paramValue + '" readonly disabled/></div></div>');
                     }
                 }
 
@@ -71,7 +74,7 @@
 
         <style>
             html, body {
-                width: 800px;
+                width: 99%;/*800px;*/
             }
         </style>
     </head>
diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/TopoAccor.html b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/TopoAccor.html
index 4b4ae9ef..cd021a49 100644
--- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/TopoAccor.html
+++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/TopoAccor.html
@@ -1,14 +1,14 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <link href="css/bootstrap.min.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/rest.js"></script>
-        <script type="text/javascript" src="js/bootstrap-table.min.js"></script>
+    <link href="css/bootstrap.min.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/rest.js"></script>
+    <script type="text/javascript" src="js/bootstrap-table.min.js"></script>
     <script>
         $(document).ready(function () {
             var serviceId = getQueryStringValue("serviceId");
@@ -22,122 +22,133 @@
             var params = new URLSearchParams(window.location.search.slice(1));
             return params.get(key);
         }
+        function acordClick_sdno() {
+            $("#topoContObj").show();
+            $("#nfvotopoContObj").hide();
+        }
+        function acordClick_nfvo() {
+            $("#nfvotopoContObj").show();
+            $("#topoContObj").hide();
+        }
+
     </script>
-  <meta charset="utf-8">
-  <title>JS Bin</title>
-  <style>
- 
-.panel-group .panel-heading + .panel-collapse > .panel-body {
-  border: 1px solid #ddd;
-}
-.panel-group,
-.panel-group .panel,
-.panel-group .panel-heading,
-.panel-group .panel-heading a,
-.panel-group .panel-title,
-.panel-group .panel-title a,
-.panel-group .panel-body,
-.panel-group .panel-group .panel-heading + .panel-collapse > .panel-body {
-  border-radius: 2px;
-  border: 0;
-}
-.panel-group .panel-heading {
-  padding: 0;
-}
-.panel-group .panel-heading a {
-  display: block;
-  background: #428bca;
-  color: #ffffff;
-  padding: 15px;
-  text-decoration: none;
-  position: relative;
-}
-
-.panel-group .panel-heading a:hover {
- border: 1px solid #4AC9FF;
- 
-}
-
- 
-.panel-group .panel-heading a.collapsed {
-  background: #eeeeee;
-  color: inherit;
-}
-.panel-group .panel-heading a:after {
-  content: '-';
-  position: absolute;
-  right: 20px;
-  top:5px;
-  font-size:30px;
-}
-.panel-group .panel-heading a.collapsed:after {
-  content: '+';
-}
-.panel-group .panel-collapse {
-  margin-top: 5px !important;
-}
-.panel-group .panel-body {
-  background: #ffffff;
-  padding: 15px;
-}
-.panel-group .panel {
-  background-color: transparent;
-}
-.panel-group .panel-body p:last-child,
-.panel-group .panel-body ul:last-child,
-.panel-group .panel-body ol:last-child {
-  margin-bottom: 0;
-}
-
-  </style>
+    <meta charset="utf-8">
+    <title>JS Bin</title>
+    <style>
+        body {
+            overflow: hidden;
+            margin: 15px;
+        }
+        .panel-heading:hover {
+            border: 1px solid #4ac9ff;
+            color: #4ac9ff;
+        }
+
+        li:hover {
+            cursor: pointer;
+            color: #4ac9ff;
+        }
+        #accordion .glyphicon {
+            margin-right: 10px;
+        }
+
+        .panel-collapse > .list-group .list-group-item:first-child {
+            border-top-right-radius: 0;
+            border-top-left-radius: 0;
+        }
+
+        .panel-collapse > .list-group .list-group-item {
+            border-width: 1px 0;
+        }
+
+        .panel-collapse > .list-group {
+            margin-bottom: 0;
+        }
+
+        .panel-collapse .list-group-item {
+            border-radius: 0;
+        }
+
+        .panel-collapse .list-group .list-group {
+            margin: 0;
+            margin-top: 10px;
+        }
+
+        .panel-collapse .list-group-item li.list-group-item {
+            margin: 0 -15px;
+            border-top: 1px solid #ddd !important;
+            border-bottom: 0;
+            padding-left: 30px;
+        }
+
+        .panel-collapse .list-group-item li.list-group-item:last-child {
+            padding-bottom: 0;
+        }
+
+        .panel-collapse div.list-group div.list-group {
+            margin: 0;
+        }
+
+        .panel-collapse div.list-group .list-group a.list-group-item {
+            border-top: 1px solid #ddd !important;
+            border-bottom: 0;
+            padding-left: 30px;
+        }
+
+        .panel-collapse .list-group-item li.list-group-item {
+            border-top: 1px solid #DDD !important;
+        }
+
+        .selected {
+            /*background-color: #ddd;*/
+            color: #4ac9ff;
+        }
+        .panel-title>a {
+            display: inline-block;
+            width: 100%;
+        }
+
+    </style>
 </head>
 <body>
-  
-<div class="container" style="margin-top:10px;">
 
-         <div class="panel-group" id="accordion">
-         
+    <div class="row">
+        <div class="col-sm-3" style="width: 18%; padding-right: 0;">
+            <div class="panel-group" id="accordion">
+                <div class="panel panel-default">
+                    <div class="panel-heading">
+                        <h4 class="panel-title">
+                            <a id="sdno" style="text-decoration:none;" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" onClick="acordClick_sdno();">
+                                SDNO
+                            </a>
+                        </h4>
+                    </div>
+                </div>
+            </div>
             <div class="panel panel-default">
-               <div class="panel-heading">
-                  <h4 class="panel-title">
-                     <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
-                     SDNO
-                     </a>
-                  </h4>
-               </div><!--/.panel-heading -->
-               <div id="collapseOne" class="panel-collapse collapse in">
-                  <div class="panel-body">
-                     <!--iframe src="chartTopo.html" name="" style="width:100%" allowTransparency="true" scrolling="no" frameborder="0">
-                                        </iframe>-->
-                      <object id="topoContObj" data="chartTopo.html" width="100%" height="300" type="text/html">
-
-                      </object>
-                  </div><!--/.panel-body -->
-               </div><!--/.panel-collapse -->
-            </div><!-- /.panel -->
-
-            
-            <div class="panel panel-default">
-               <div class="panel-heading">
-                  <h4 class="panel-title">
-                     <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
-                     NFVO
-                     </a>
-                  </h4>
-               </div><!--/.panel-heading -->
-               <div id="collapseThree" class="panel-collapse collapse">
-                  <div class="panel-body">
-                      <object id="nfvotopoContObj" data="lcm_detail_nfvo_topology.html" width="100%" height="300" type="text/html">
-
-                      </object>
-                  </div><!--/.panel-body -->
-               </div><!--/.panel-collapse -->
-            </div><!-- /.panel -->
-         </div><!-- /.panel-group -->
-
-</div><!-- /.container -->  
-  
-  
+                <div class="panel-heading">
+                    <h4 class="panel-title">
+                        <a id="nfvo" style="text-decoration:none;" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" onClick="acordClick_nfvo();">
+                            NFVO
+                        </a>
+                    </h4>
+                </div>
+            </div>
+        </div>
+        <div class="col-sm-3" style="width: 82%; padding-right: 0;">
+            <div class="panel-body" style="padding: 0">
+                <object id="topoContObj" data="chartTopo.html" width="100%" height="300" type="text/html">
+
+                </object>
+            </div>
+            <div class="panel-body" style="padding: 0">
+                <object id="nfvotopoContObj" data="lcm_detail_nfvo_topology.html" width="100%" height="300" type="text/html">
+
+                </object>
+            </div>
+        </div>
+    </div>
+
 
 </body>
 </html>
\ No newline at end of file
diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/UnderLay_TP.html b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/UnderLay_TP.html
index 1c8effdd..17c24427 100644
--- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/UnderLay_TP.html
+++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/UnderLay_TP.html
@@ -60,24 +60,10 @@
     </style>
     <script type="text/javascript">
     $(document).ready(function() {
-        //var jsondata = loadUnderlayData();
-		
-        var params = new URLSearchParams(window.location.search.slice(1));
-        debugger;
-        var jsonData = JSON.parse((params.get("jsondata")));
-		var tblData= [];
-		jsonData.accessPointList.forEach(function(accessPoint){
-		    tblData.push({
-			    tname:accessPoint.name,
-				pname:'',
-				vlan:accessPoint.typeSpecList[0].ethernetTpSpec.dot1qVlanList,
-				site:'',
-				ip:accessPoint.typeSpecList[0].ipTpSpec.masterIp				
-			});
-		})
-        $('#sai').bootstrapTable({
+        var jsondata = loadUnderlayData();
+        $('#tbl_overlay').bootstrapTable({
             //Assigning data to table
-            data: tblData
+            data: jsondata
         });
         $('#underlayTpDataTable').bootstrapTable({
             //Assigning data to table
diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/accorTables.html b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/accorTables.html
index 4bdf441c..5de335d7 100644
--- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/accorTables.html
+++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/accorTables.html
@@ -41,14 +41,14 @@
 			var jsonData = [];
 			var object = {};
 
-			if("SSAR" === serviceType || "SDNO" === serviceType)  
+			if("SSAR" === serviceType)
 			{
-				object.nodeType  = "sdno"
+				object.nodeType  = "sdn"
 				jsonData[0] = object;
 			}
 			else if("NSAR" == serviceType || "NFAR" == serviceType || "NFVO" == serviceType)
 			{
-				object.nodeType  = "nfvo";
+				object.nodeType  = "nfv";
 				jsonData[0] = object;
 			}
 			else{
@@ -57,10 +57,10 @@
 			
             
 			
-			//TODO check for the 
+			//TODO check for the type and update the tab
             console.log("jsonData length: " + jsonData.length);
-            for (i = 0; i < jsonData.length; i++) {
-                console.log("jsonData Name: " + jsonData[i].nodeType);
+       /*     for (i = 0; i < jsonData.length; i++) {
+               // console.log("jsonData Name: " + jsonData[i].nodeType);
                 if (jsonData[i].nodeType.indexOf('sdn') != -1) {
                     //$("#sdnoLink").text(jsonData[i].name.toUpperCase());
                     console.log("Adding Accordian to SDNO");
@@ -77,7 +77,7 @@
                 else {
 
                 }
-            }
+            } */
 
             $("#overlayContObj").attr('data', 'overlayvpn.html?serviceId='+serviceId);
             $("#underlayContObj").attr('data', 'underlayvpn.html?serviceId='+serviceId);
@@ -170,7 +170,7 @@
                 content += '<li onClick="fnLoadTblData(this, \''+type+'\');" id="linkgso" class="list-group-item"><span class="glyphicon glyphicon-pencil text-primary"></span><span>OPEN-O</span></li>';
             }
             else if(type == "nfvo"){
-              //  content += '<li onClick="fnLoadTblData(this, \''+type+'\');" id="linknfvo" class="list-group-item"><span class="glyphicon glyphicon-pencil text-primary"></span><span>ZTE</span></li>';
+                //content += '<li onClick="fnLoadTblData(this, \''+type+'\');" id="linknfvo" class="list-group-item"><span class="glyphicon glyphicon-pencil text-primary"></span><span>ZTE</span></li>';
             }
             content += '</ul></div></div>';
             return content;
diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/chartTopo.html b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/chartTopo.html
index ab0d71f3..e9fccf60 100644
--- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/chartTopo.html
+++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/chartTopo.html
@@ -32,8 +32,11 @@
     <script type="text/javascript" src="js/jquery-ui-1.12.1.min.js"> </script>
     <link href="css/jquery-ui-1.12.1.min.css" rel="stylesheet" />
 
-    <script type="text/javascript" src="js/highcharts.js"></script>
-    <script type="text/javascript" src="js/exporting.js"></script>
+
+    <script src="js/topo/sigma/sigma.min.js"></script>
+    <script src="js/topo/sigma/sigma.renderers.edgeLabels.min.js"></script>
+
+
     <style>
         body {
             overflow: hidden;
diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/gsolcmmain.html b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/gsolcmmain.html
index 23027954..89a521aa 100644
--- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/gsolcmmain.html
+++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/gsolcmmain.html
@@ -41,7 +41,7 @@
             new lcmHandler();
 
             $('.modal-dialog').draggable();
-            $("#detailCont").show();
+           // $("#detailCont").show();
             var jsondata = loadGetServiceData();
 			
 			$.each(jsondata,function(k,v){
@@ -60,23 +60,23 @@
                 $(this).addClass('current').siblings().removeClass('current');
             });
             $("#topoCont").hide();
-            $("#inpCont").hide();
+            $("#inpCont").show();
             $("#topoContMod").hide();
-            $("#detailContMod").show();
-            $("#inpContMod").hide();
+            $("#detailContMod").hide();
+            $("#inpContMod").show();
             
             $('#sai').bootstrapTable({}) .on('click-row.bs.table', function (e, row, $element) {
-
                 var newURL = "accorTables.html?serviceId="+row.serviceId + "&serviceType="+row.serviceType;
 			  //  var newURL = "accorTables.html?serviceId="+row.serviceId ;
                 console.log("URL: "+newURL);
                 document.getElementById("tabContainer").style.display = "none";
                 document.getElementById("detailConObj").setAttribute('data', newURL);
-                document.getElementById("detailContMod").setAttribute('data', newURL);
+                document.getElementById("detailContDlg").setAttribute('data', newURL);
                 document.getElementById("tabContainer").style.display = "block";
 
                 //loadIframe("topoFrame", "chartTopo.html?serviceId="+row.serviceId);
                 document.getElementById("topoContObj").setAttribute('data', 'TopoAccor.html?serviceId='+row.serviceId);
+                document.getElementById("topoContDlg").setAttribute('data', 'TopoAccor.html?serviceId='+row.serviceId);
 				document.getElementById('inputcontent').setAttribute('data', 'InputData.html?json='+ JSON.stringify(row));
                 document.getElementById('inputcontentDlg').setAttribute('data', 'InputData.html?json='+ JSON.stringify(row));
            	});
@@ -360,7 +360,12 @@
 
                     <div class="detail" style="margin:10px;border-radius:5px;">
                         <div class="detail-top" style="margin-top:10px;border-radius:5px;">
-                            <ul class="nav nav-tabs nav-justified vmapp-margin">
+                         <span><h2 style="margin-left: 1%">Detailed Info</h2></span>
+						
+
+						
+						
+                        <!--    <ul class="nav nav-tabs nav-justified vmapp-margin">
                                 <li class="active basic">
                                     <a href="#" onClick="showDetContMod();" id="" data-toggle="tab">
                                         <span>Detail Info</span>
@@ -376,15 +381,15 @@
                                         <span>Input Data</span>
                                     </a>
                                 </li>
-                            </ul>
+                            </ul> -->
 
                             <div id="detailContMod">
-                                <object data="accorTables.html" width="100%" height="300" type="text/html">
+                                <object id="detailContDlg" data="accorTables.html" width="100%" height="300" type="text/html">
 
                                 </object>
                             </div>
                             <div id="topoContMod" style="display:none;">
-                                <object data="chartTopo.html" width="100%" height="300" type="text/html">
+                                <object id="topoContDlg" data="TopoAccor.html" width="100%" height="300" type="text/html">
 
                                 </object>
                                 <!--<iframe id="topoFrame" src="chartTopo.html" name="" style="width:100%; height:400px;" allowTransparency="true" scrolling="no" frameborder="0">
@@ -426,7 +431,14 @@
 
     <div id="tabContainer" class="detail" style="border-radius:5px;display: none">
         <div class="detail-top" style="margin-top:2px;border-radius:5px;">
-            <ul class="nav nav-tabs nav-justified vmapp-margin">
+
+            <span><h2 style="margin-left: 1%">Detailed Info</h2></span>
+
+            <div id="inpCont" style="display:none;">
+                <object id="inputcontent" src="InputData.html" width="100%" height="300" type="text/html">
+                </object>
+            </div>
+         <!--   <ul class="nav nav-tabs nav-justified vmapp-margin">
 
                 <li class="active basic">
                     <a href="#" onClick="showDetCont();" id="detHov" data-toggle="tab">
@@ -446,7 +458,7 @@
                     </a>
                 </li>
 
-            </ul>
+            </ul> -->
         </div>
 
         <div style="border-radius:5px;">
diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/i18n/lcm-template-parameters-i18n-en-US.properties b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/i18n/lcm-template-parameters-i18n-en-US.properties
new file mode 100644
index 00000000..87e720b3
--- /dev/null
+++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/i18n/lcm-template-parameters-i18n-en-US.properties
@@ -0,0 +1,94 @@
+tosca.nodes.sdn.ext.NS.ns_underlayervpn.ac1_ip=Left AC
+tosca.nodes.sdn.ext.NS.ns_underlayervpn.ac1_peer_ip=Left CE IP
+tosca.nodes.sdn.ext.NS.ns_underlayervpn.ac1_port=Left Port
+tosca.nodes.sdn.ext.NS.ns_underlayervpn.ac1_route=Left Route
+tosca.nodes.sdn.ext.NS.ns_underlayervpn.ac1_svlan=Left VLAN
+tosca.nodes.sdn.ext.NS.ns_underlayervpn.ac2_ip=Right AC
+tosca.nodes.sdn.ext.NS.ns_underlayervpn.ac2_peer_ip=Right CE IP
+tosca.nodes.sdn.ext.NS.ns_underlayervpn.ac2_port=Right Port
+tosca.nodes.sdn.ext.NS.ns_underlayervpn.ac2_route=Right Route
+tosca.nodes.sdn.ext.NS.ns_underlayervpn.ac2_svlan=Right VLAN
+tosca.nodes.sdn.ext.NS.ns_underlayervpn.description=Description
+tosca.nodes.sdn.ext.NS.ns_underlayervpn.name=Service Name
+tosca.nodes.sdn.ext.NS.ns_underlayervpn.pe1_ip=Left PE IP
+tosca.nodes.sdn.ext.NS.ns_underlayervpn.pe2_ip=Right PE IP
+tosca.nodes.sdn.ext.NS.ns_underlayervpn.serviceType=Service Type
+tosca.nodes.sdn.ext.NS.ns_underlayervpn.technology=Technology
+tosca.nodes.sdn.ext.NS.ns_underlayervpn.topology=Topology
+tosca.nodes.sdn.ext.NS.enterprise2DC.dcFWIP=Firewall IP
+tosca.nodes.sdn.ext.NS.enterprise2DC.dcGWIP=Gateway IP
+tosca.nodes.sdn.ext.NS.enterprise2DC.dcLBIP=Load Balancer IP
+tosca.nodes.sdn.ext.NS.enterprise2DC.description=Description
+tosca.nodes.sdn.ext.NS.enterprise2DC.id=ID
+tosca.nodes.sdn.ext.NS.enterprise2DC.name=Service Name
+tosca.nodes.sdn.ext.NS.enterprise2DC.siteAccessPortVlan=ThinCPE VLAN
+tosca.nodes.sdn.ext.NS.enterprise2DC.siteCidr=Enterprise cidr
+tosca.nodes.sdn.ext.NS.enterprise2DC.siteThinCpeIP=ThinCPE IP
+tosca.nodes.sdn.ext.NS.enterprise2DC.siteVNI=ThinCPE VxLAN ID
+tosca.nodes.sdn.ext.NS.enterprise2DC.vCPE_MgrIp=vCPE IP
+tosca.nodes.sdn.ext.NS.enterprise2DC.vpcName=VPC Name
+tosca.nodes.sdn.ext.NS.enterprise2DC.vpcSubnetCidr=VPC cidr
+tosca.nodes.sdn.ext.NS.enterprise2DC.vpcSubnetName=VPC Subnet Name
+tosca.nodes.sdn.ext.NS.enterprise2DC.vpcVNI=VPC VxLAN ID
+tosca.nodes.nfv.NS.VBRAS_NS.externalDataNetworkName=External Data Network Name
+tosca.nodes.nfv.NS.VBRAS_NS.externalManageNetworkName=External Management Network Name
+tosca.nodes.nfv.NS.VCPE_NS.sfc_data_network=SFC Data Network Name
+tosca.nodes.nfv.NS.VCPE_NS.externalManageNetworkName=External Management Network Name
+tosca.nodes.nfv.NS.VCPE_NS.NatIpRange=Nat Ip Range
+tosca.nodes.nfv.NS.VCPE_NS.m6000_mng_ip=M6000 Mng IP
+tosca.nodes.nfv.NS.VCPE_NS.externalPluginManageNetworkName=External Plugin Management Network Name
+tosca.nodes.nfv.NS.VCPE_NS.externalDataNetworkName=External Data Network Name
+tosca.nodes.nfv.NS.POP_NS.sfc_data_network=SFC Data Network Name
+tosca.nodes.nfv.NS.POP_NS.externalManageNetworkName=External Management Network Name
+tosca.nodes.nfv.NS.POP_NS.NatIpRange=Nat Ip Range
+tosca.nodes.nfv.NS.POP_NS.m6000_mng_ip=M6000 Mng IP
+tosca.nodes.nfv.NS.POP_NS.externalPluginManageNetworkName=External Plugin Management Network Name
+tosca.nodes.nfv.NS.POP_NS.externalCompanyFtpDataNetworkName=External Company Ftp Data Network Name
+tosca.nodes.nfv.NS.POP_NS.externalDataNetworkName=External Data Network Name
+ac1_ip=Left AC
+ac1_peer_ip=Left CE IP
+ac1_port=Left Port
+ac1_route=Left Route
+ac1_svlan=Left VLAN
+ac2_ip=Right AC
+ac2_peer_ip=Right CE IP
+ac2_port=Right Port
+ac2_route=Right Route
+ac2_svlan=Right VLAN
+description=Description
+name=Service Name
+pe1_ip=Left PE IP
+pe2_ip=Right PE IP
+serviceType=Service Type
+technology=Technology
+topology=Topology
+dcFWIP=Firewall IP
+dcGWIP=Gateway IP
+dcLBIP=Load Balancer IP
+description=Description
+id=ID
+name=Service Name
+siteAccessPortVlan=ThinCPE VLAN
+siteCidr=Enterprise cidr
+siteThinCpeIP=ThinCPE IP
+siteVNI=ThinCPE VxLAN ID
+vCPE_MgrIp=vCPE IP
+vpcName=VPC Name
+vpcSubnetCidr=VPC cidr
+vpcSubnetName=VPC Subnet Name
+vpcVNI=VPC VxLAN ID
+externalDataNetworkName=External Data Network Name
+externalManageNetworkName=External Management Network Name
+sfc_data_network=SFC Data Network Name
+externalManageNetworkName=External Management Network Name
+NatIpRange=Nat Ip Range
+m6000_mng_ip=M6000 Mng IP
+externalPluginManageNetworkName=External Plugin Management Network Name
+externalDataNetworkName=External Data Network Name
+sfc_data_network=SFC Data Network Name
+externalManageNetworkName=External Management Network Name
+NatIpRange=Nat Ip Range
+m6000_mng_ip=M6000 Mng IP
+externalPluginManageNetworkName=External Plugin Management Network Name
+externalCompanyFtpDataNetworkName=External Company Ftp Data Network Name
+externalDataNetworkName=External Data Network Name
\ No newline at end of file
diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/brs.js b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/brs.js
index 17648d34..3dbc7ebd 100644
--- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/brs.js
+++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/brs.js
@@ -346,4 +346,4 @@ $(function () {
             });
     });
 
-})
\ No newline at end of file
+})
diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/gsolcm.js b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/gsolcm.js
index d5549ebb..498a86c0 100644
--- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/gsolcm.js
+++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/gsolcm.js
@@ -118,11 +118,11 @@ function initParameterTab() {
 	).then(
 	    function(template) {
 	    	if(template.serviceType === 'GSO') {
-	    		return fetchGsoTemplateInputParameters(templateId);
+	    		return fetchGsoTemplateInputParameters(templateId, template);
 	    	} else if(template.serviceType === 'NFVO') {
-	    		return fetchNfvoTemplateInputParameters(templateId);
+	    		return fetchNfvoTemplateInputParameters(templateId, template);
 	    	} else if(template.serviceType === 'SDNO') {
-	    		return fetchSdnoTemplateInputParameters(templateId);
+	    		return fetchSdnoTemplateInputParameters(templateId, template);
 	    	}
 	    }
 	).then(
@@ -148,6 +148,7 @@ function fetchServiceTemplateBy(templateId) {
             template.name = response.templateName;
             template.gsarId = response.csarId;
             template.id = response.id;
+            template.nodeType = '';
             return fetchCsar(template.gsarId);
         }
     ).then(
@@ -174,7 +175,7 @@ function fetchCsar(csarId) {
 	});
 }
 
-function fetchGsoTemplateInputParameters(templateId) {
+function fetchGsoTemplateInputParameters(templateId, template) {
 	var defer = $.Deferred();
     $.when(
         fetchTemplateParameterDefinitions(templateId),
@@ -185,6 +186,11 @@ function fetchGsoTemplateInputParameters(templateId) {
         function (templateParameterResponse, nestingTempatesParas, vimInfoResponse, sdnControllersResponse) {
             var inputs = templateParameterResponse[0].inputs.map(function(input) {
                 input.showName = input.name;
+                if(template.nodeType === null || template.nodeType === undefined || template.nodeType.length === 0) {
+                    input.i18nKey = input.name;    
+                } else {
+                    input.i18nKey = template.nodeType + '.' +input.name;    
+                }
                 return input;
             });
         	var inputParas = concat(inputs, nestingTempatesParas);
@@ -232,6 +238,7 @@ function fetchGsoNestingTemplateParameters(templateId) {
 	    		    		var inputs = serviceTemplate.inputs.map(function(input) {
                                 input.showName = input.name;
 	    		    			input.name = nodeTemplate.type + '.' + input.name;
+                                input.i18nKey = nodeTemplate.type + '.' + input.name;
 	    		    			return input;
 	    		    		});
 	    		    		$.when(
@@ -244,14 +251,16 @@ function fetchGsoNestingTemplateParameters(templateId) {
 	    		    		    			type: 'location',
 	    		    		    			description: nodeTemplate.name + ' Location',
 	    		    		    			required: 'true',
-                                            showName: nodeTemplate.name + ' Location'
+                                            showName: nodeTemplate.name + ' Location',
+                                            i18nKey: nodeTemplate.name + ' Location'
 	    		    		    		});
                                         inputs.push({
                                             name: nodeTemplate.type + '.sdncontroller',
                                             type: 'sdncontroller',
                                             description: nodeTemplate.name + ' SDN Controller',
                                             required: 'true',
-                                            showName: nodeTemplate.name + ' SDN Controller'
+                                            showName: nodeTemplate.name + ' SDN Controller',
+                                            i18nKey: nodeTemplate.name + ' SDN Controller'
                                         });
                                     }
 	    		    		    	nodeAggregatation.notify(inputs);
@@ -321,7 +330,7 @@ function translateToTemplateParameters(inputs, vims, controllers) {
     return {changed: false, parameters: inputParameters, vimInfos: vims, sdnControllers: controllers};
 }
 
-function fetchNfvoTemplateInputParameters(templateId) {
+function fetchNfvoTemplateInputParameters(templateId, template) {
 	var defer = $.Deferred();
 	$.when(
 		fetchTemplateParameterDefinitions(templateId),
@@ -334,6 +343,7 @@ function fetchNfvoTemplateInputParameters(templateId) {
 	    	var inputParas = templateParameterResponse[0].inputs;
             inputParas = inputParas.map(function(input) {
                 input.showName = input.name;
+                input.i18nKey = template.nodeType + '.' + input.name;
                 return input;
             });
 	    	inputParas.push({
@@ -341,14 +351,16 @@ function fetchNfvoTemplateInputParameters(templateId) {
 	    		type: 'location',
 	    		description: 'Location',
 	    		required: 'true',
-                showName: 'Location'
+                showName: 'Location',
+                i18nKey: 'Location'
 	    	});
             inputParas.push({
                 name: 'sdncontroller',
                 type: 'sdncontroller',
                 description: 'SDN Controller',
                 required: 'true',
-                showName: 'SDN Controller'
+                showName: 'SDN Controller',
+                i18nKey: 'SDN Controller'
             });
 	    	templateParameters = translateToTemplateParameters(inputParas, vims, sdnControllers);
             defer.resolve(templateParameters);	
@@ -357,7 +369,7 @@ function fetchNfvoTemplateInputParameters(templateId) {
 	return defer;
 }
 
-function fetchSdnoTemplateInputParameters(templateId) {
+function fetchSdnoTemplateInputParameters(templateId, template) {
 	var defer = $.Deferred();
 	$.when(
 		fetchTemplateParameterDefinitions(templateId)
@@ -365,6 +377,7 @@ function fetchSdnoTemplateInputParameters(templateId) {
 	    function (templateParameterResponse) {
             var inputs = templateParameterResponse.inputs.map(function(input) {
                 input.showName = input.name;
+                input.i18nKey = template.nodeType + '.' + input.name;
                 return input;
             })
 	    	templateParameters = translateToTemplateParameters(inputs, [], []);
@@ -520,7 +533,7 @@ function createGsoServiceInstance(gatewayService, serviceInstance, serviceTempla
             serviceInstance.serviceId = response.serviceId;
             var gsoServiceUri = '/openoapi/gso/v1/services/' + response.serviceId;
             var timerDefer = $.Deferred();
-            var timeout = 600000;
+            var timeout = 3600000;
             var fun = function() {
                 if(timeout === 0) {
                     timerDefer.resolve({
@@ -620,7 +633,7 @@ function createServiceInstance(gatewayService, lcmUri, serviceInstance) {
             var jobId = response.serviceId;
             var jobStatusUri = lcmUri + '/jobs/' + jobId;
             var timerDefer = $.Deferred();
-            var timeout = 600000;
+            var timeout = 3600000;
             var fun = function() {
                 if(timeout === 0) {
                     timerDefer.resolve({
@@ -715,7 +728,7 @@ function deleteNe(rowId, row) {
             } else if (serviceType === 'NFVO') {
                 var nfvoLcmUri = '/openoapi/nslcm/v1';
                 deleteNonGsoServiceInstance(gatewayService, nfvoLcmUri, instanceId, remove, failFun);
-            } else if (serviceType === 'SDNO' || serviceType === 'SSAR') {
+            } else if (serviceType === 'SDNO') {
                 var sdnoLcmUri = '/openoapi/sdnonslcm/v1';
                 deleteNonGsoServiceInstance(gatewayService, sdnoLcmUri, instanceId, remove, failFun);
             }
@@ -732,7 +745,7 @@ function deleteGsoServiceInstance(gatewayService, instanceId, remove, failFun) {
         function(response) {
             var gsoServiceUri = '/openoapi/gso/v1/services/toposequence/' + instanceId;
             var timerDefer = $.Deferred();
-            var timeout = 600000;
+            var timeout = 3600000;
             var fun = function() {
                 if(timeout === 0) {
                     timerDefer.resolve({
@@ -779,7 +792,7 @@ function deleteNonGsoServiceInstance(gatewayService, lcmUri, instanceId, remove,
             var jobId = response.jobId;
             var jobStatusUri = lcmUri + '/jobs/' + jobId;
             var timerDefer = $.Deferred();
-            var timeout = 600000;
+            var timeout = 3600000;
             var fun = function() {
                 if(timeout === 0) {
                     timerDefer.resolve({
diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/jquery.bootstrap-growl.min.js b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/jquery.bootstrap-growl.min.js
new file mode 100644
index 00000000..67837e50
--- /dev/null
+++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/jquery.bootstrap-growl.min.js
@@ -0,0 +1 @@
+(function(){var c;c=jQuery;c.bootstrapGrowl=function(f,a){var b,e,d;a=c.extend({},c.bootstrapGrowl.default_options,a);b=c("<div>");b.attr("class","bootstrap-growl alert");a.type&&b.addClass("alert-"+a.type);a.allow_dismiss&&(b.addClass("alert-dismissible"),b.append('<button class="close" data-dismiss="alert" type="button"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>'));b.append(f);a.top_offset&&(a.offset={from:"top",amount:a.top_offset});d=a.offset.amount;c(".bootstrap-growl").each(function(){return d= Math.max(d,parseInt(c(this).css(a.offset.from))+c(this).outerHeight()+a.stackup_spacing)});e={position:"body"===a.ele?"fixed":"absolute",margin:0,"z-index":"9999",display:"none"};e[a.offset.from]=d+"px";b.css(e);"auto"!==a.width&&b.css("width",a.width+"px");c(a.ele).append(b);switch(a.align){case "center":b.css({left:"50%","margin-left":"-"+b.outerWidth()/2+"px"});break;case "left":b.css("left","20px");break;default:b.css("right","20px")}b.fadeIn();0<a.delay&&b.delay(a.delay).fadeOut(function(){return c(this).alert("close")}); return b};c.bootstrapGrowl.default_options={ele:"body",type:"info",offset:{from:"top",amount:20},align:"right",width:250,delay:4E3,allow_dismiss:!0,stackup_spacing:10}}).call(this);
diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/tmNodesController.js b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/tmNodesController.js
index 1510d129..6f1235a6 100644
--- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/tmNodesController.js
+++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/tmNodesController.js
@@ -35,7 +35,7 @@ var vm = avalon.define({
         }
     },
     $restUrl: {
-        queryNodeInstanceUrl: "/openoapi/nslcm/v1/ns/"
+        queryNodeInstanceUrl: "/openoapi/nslcm/v1.0/ns/"
     },
     $init: function () {
         vm.$initInstanceData();
@@ -147,7 +147,7 @@ var vm = avalon.define({
             ],
             "aaData": tableData
         });
-    },
+    };
 
 //nodes list table
 nodesList :{
@@ -186,7 +186,7 @@ var initParam = function () {
         var instanceId = params[0].substring(params[0].indexOf('=') + 1);
 
         vm.instanceId = instanceId;
-        vm.$restUrl.queryNodeInstanceUrl = vm.$restUrl.queryNodeInstanceUrl + instanceId;
+        vm.$restUrl.queryNodeInstanceUrl = commonUtil.format(vm.$restUrl.queryNodeInstanceUrl, instanceId);
         vm.$init();
     }
 };
diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/underlay.js b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/underlay.js
index e52d0150..d7451a13 100644
--- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/underlay.js
+++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/underlay.js
@@ -20,23 +20,21 @@ $.getJSON("./conf/dataconfig.json", function (jsonData){
     console.log("URL = " + JSON.stringify(url));
 });
 
-function loadUnderlayData(serviceId) {
-    var requestUrl = "/openoapi/sdnol3vpn/v1/l3vpns/" + serviceId;
-	var returnObj;
+function loadUnderlayData() {
+    var requestUrl = "/openoapi/sdnol3vpn/v1/l3vpns";
     $
         .ajax({
             type: "GET",
             url: requestUrl,
-			async: false,
             contentType: "application/json",
             success: function (jsonobj) {
-                returnObj = jsonobj;
+                alert("loading underlay data");
+                //TODO: Update the table
             },
             error: function (xhr, ajaxOptions, thrownError) {
                 //alert("Error on getting underlay data : " + xhr.responseText);
             }
         });
-    return returnObj;
 }
 function deleteUnderlayData(objectId) {
     var requestUrl = "/openoapi/sdnol3vpn/v1/l3vpns/" + objectId;
@@ -54,23 +52,21 @@ function deleteUnderlayData(objectId) {
             }
         });
 }
-function loadOverlayData(serviceId) {
-    var requestUrl =  "/openoapi/sdnooverlay/v1/site2dc-vpn/" + serviceId;
-	var returnObj;
+function loadOverlayData() {
+    var requestUrl =  "/openoapi/sdnooverlayvpn/v1/site2dc-vpn";
     $
         .ajax({
             type: "GET",
             url: requestUrl,
-			async: false,
             contentType: "application/json",
             success: function (jsonobj) {
-                returnObj = jsonobj;
+                alert("loading Overlay data...");
+                //TODO: Update the table
             },
             error: function (xhr, ajaxOptions, thrownError) {
                 //alert("Error on getting Overlayvpn data : " + xhr.responseText);
             }
         });
-	return returnObj;
 }
 function refressTpDataTable(overlayTable, TpTable) {
     alert("refesssing Tp data table");
diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/vpn.js b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/vpn.js
index a1656b9f..e309d3e6 100644
--- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/vpn.js
+++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/vpn.js
@@ -309,4 +309,4 @@ $(function () {
             });
     });
 
-})
\ No newline at end of file
+})
diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/overlayvpn.html b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/overlayvpn.html
index 2604de80..d55e4319 100644
--- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/overlayvpn.html
+++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/overlayvpn.html
@@ -36,56 +36,50 @@
         <script type="text/javascript">
             $(document).ready(function () {
                 var jsondata = [];
-				var params = new URLSearchParams(window.location.search.slice(1));
-				var serviceId = params.get("serviceId");
-                jsondata = loadOverlayData(serviceId);
-				var tabData = [];
-				
-				var tableRow = {};
-				tableRow.desc = jsondata.description;
-				tableRow.name= jsondata.name;
-				tableRow.thinCpe= jsondata.site.cidr;//TODO
-				tableRow.port = "";
-				//tableRow.dcName=jsondata.vpc.name;
-				tableRow.vpc = jsondata.vpc.name;
-				tableRow.vpcCidr= jsondata.vpc.site.cidr;
-				tabData[0]=tableRow;
-
+                jsondata = loadOverlayData();
 
                 $('#sai').bootstrapTable({
                     //Assigning data to table
-                    data: tabData
+                    data: jsondata
+                });
+                $('.table tbody tr').click(function () {
+                    $(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');
                 });
-            $('.table tbody tr').click(function () {
-                $(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');
-          });
 
-            $('#sai').on('sort.bs.table', function () {
-   
+                $('#sai').on('sort.bs.table', function () {
 
-            }).on('click-row.bs.table', function () {
-       
-         
-         $('.table tbody tr').click(function() {
-                    
-                $(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');
-          });
-        
-         });
-    });
 
-    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>
+                }).on('click-row.bs.table', function () {
+
+
+                    $('.table tbody tr').click(function() {
+
+                        $(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');
+                    });
+
+                });
+
+                var serviceId = getQueryStringValue("serviceId");
+                console.log("overlayvpn - serviceId : " + serviceId);
+            });
+
+            function getQueryStringValue (key) {
+                var params = new URLSearchParams(window.location.search.slice(1));
+                return params.get(key);
+            }
+
+            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>
     <style>
     .dropdown-menu {
             min-width: 10px;
@@ -278,10 +272,10 @@
                         <tr>
                             <th data-field="name" data-sortable="true" data-filter-control="input">Name</th>
                             <th data-field="desc" data-sortable="true" data-filter-control="input">Description</th>
-                            <th data-field="thinCpe" data-sortable="true" data-filter-control="input">Site CIDR</th>
+                            <th data-field="thinCpe" data-sortable="true" data-filter-control="input">Thin CPE</th>
                             <th data-field="port" data-sortable="true" data-filter-control="input">Port:Vlan ID</th>
-                           <!-- <th data-field="dcName" data-sortable="true" data-filter-control="input">DC Name</th> -->
-                            <th data-field="vpc" data-sortable="true" data-filter-control="input">VPC Name</th>
+                            <th data-field="dcName" data-sortable="true" data-filter-control="input">DC Name</th>
+                            <th data-field="vpc" data-sortable="true" data-filter-control="input">VPC</th>
                             <th data-field="vpcCidr" data-sortable="true" data-filter-control="input">VPC CIDR</th>
                             <th data-field="action" data-sortable="">Action</th>
                         </tr>
@@ -292,6 +286,6 @@
         </div>
     </div>
 
-</div>
+
 </body>
 </html>
\ No newline at end of file
diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/underlayvpn.html b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/underlayvpn.html
index ef181ec6..6d8b545e 100644
--- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/underlayvpn.html
+++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/underlayvpn.html
@@ -95,18 +95,11 @@
         <script type="text/javascript">
             $(document).ready(function () {
 
-				var params = new URLSearchParams(window.location.search.slice(1));
-				var serviceId = params.get("serviceId");
-                var jsondata = loadUnderlayData(serviceId);
-				var tabData = [];
-				var tableRow = {};
-				tableRow.name = jsondata.name;
-				tableRow.desc= jsondata.description;
-				tableRow.state= jsondata.operStatus;//TODO
-				tabData[0] = tableRow;
-                $('#sai').bootstrapTable({
+
+                var jsondata = loadUnderlayData();
+                $('#tbl_overlay').bootstrapTable({
                     //Assigning data to table
-                    data: tabData
+                    data: jsondata
                 });
                 $('#underlayTpDataTable').bootstrapTable({
                     //Assigning data to table
@@ -128,8 +121,10 @@
                     });
 
                 });
+
+                var serviceId = getQueryStringValue("serviceId");
                 console.log("underlayvpn - serviceId : " + serviceId);
-                 $("#underlay_tp").attr('data', 'UnderLay_TP.html?jsondata='+JSON.stringify(jsondata));
+
             });
 
             function getQueryStringValue (key) {
@@ -275,9 +270,8 @@
     </div>
 
     <div id="tpDiv">
-	     <object id="underlay_tp" data="UnderLay_TP.html" width="100%" height="450" type="text/html"></object>
-        <!--<iframe src="UnderLay_TP.html" style="width:100%;height:450px;" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0">
-        </iframe>-->
+        <iframe src="UnderLay_TP.html" style="width:100%;height:450px;" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0">
+        </iframe>
     </div>
     <div id="filterTpLogicalType_select_popupcontainer" class="openo openo-select-popup-container openo-hide"
          style="width: 155px; max-height: 130px; left: 628px; top: 104px; z-index: 1761;">
-- 
cgit 1.2.3-korg