53 files changed, 1755 insertions, 392 deletions
diff --git a/common/src/main/webapp/framework/browser/templates/home.html b/common/src/main/webapp/framework/browser/templates/home.html
index 41426f61..cd170303 100644
--- a/common/src/main/webapp/framework/browser/templates/home.html
+++ b/common/src/main/webapp/framework/browser/templates/home.html
@@ -145,7 +145,7 @@
                     </ul>
                 </div>-->
             </div>
-            <div id="rightContainer" class="col-sm-8 col-md-9 col-lg-9">
+            <div id="rightContainer" class="">
                 <!--<div id="sampleArea"></div>-->
                 <ui-view></ui-view>
             </div>
diff --git a/extsys/src/main/webapp/extsys/sdncontroller/bak/controller.html b/extsys/src/main/webapp/extsys/sdncontroller/bak/controller.html
index 144a9bec..5397e6e0 100644
--- a/extsys/src/main/webapp/extsys/sdncontroller/bak/controller.html
+++ b/extsys/src/main/webapp/extsys/sdncontroller/bak/controller.html
@@ -22,17 +22,17 @@
     <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/controller.js"></script>
-        <script type="text/javascript" src="js/bootstrap.min.js"></script>
-        <script type="text/javascript" src="js/bootstrap-table.min.js"></script>
-        <script type="text/javascript" src="js/bootstrap-table-filter-control.min.js"></script>
+        <link href="/openoui/extsys/sdncontroller/bak/css/bootstrap.min.css" rel="stylesheet"/>
+        <link href="/openoui/extsys/sdncontroller/bak/css/VMMain.css" rel="stylesheet"/>
+        <link href="/openoui/extsys/sdncontroller/bak/css/bootstrap-table.min.css" rel="stylesheet"/>
+        <script type="text/javascript" src="/openoui/extsys/sdncontroller/bak/js/jquery-1.11.2.min.js"></script>
+        <script type="text/javascript" src="/openoui/extsys/sdncontroller/bak/js/controller.js"></script>
+        <script type="text/javascript" src="/openoui/extsys/sdncontroller/bak/js/bootstrap.min.js"></script>
+        <script type="text/javascript" src="/openoui/extsys/sdncontroller/bak/js/bootstrap-table.min.js"></script>
+        <script type="text/javascript" src="/openoui/extsys/sdncontroller/bak/js/bootstrap-table-filter-control.min.js"></script>
         <script type="text/javascript">
             $(document).ready(function () {
-                loadControllerData();
+              loadControllerData();
             });
             function operateFormatter(value, row, index) {
                 return ['<img class="siteDeleteImg" src="images/delete.png" href="javascript:void(0)" style="cursor: pointer" name="title" title="Delete" />']
@@ -55,7 +55,7 @@
             <div id="open_base_tpL_buttonGroup" class="openoButton_buttonGroupClass">
                 <div
                         class="openo openo-widget-button openoButton_buttonClass_parent ng-isolate-scope openoButton_buttonClass defaultbutton openoButton_button_default"
-                        tabindex="0" id="false" text="res.brApp_ui_res_btn_create" icon-url="./images/add.png"
+                        tabindex="0" id="false" text="res.brApp_ui_res_btn_create" icon-url="/openoui/extsys/sdncontroller/bak/images/add.png"
                         cls="defaultbutton" click="clickAdd"
                         style="display: inline-block; padding-left: 0px; padding-right: 0px;">
                     <div class="openoButton_buttonInnerClass openo-corner-all openoButton_Image" id="false_button">
diff --git a/extsys/src/main/webapp/extsys/sdncontroller/css/style.css b/extsys/src/main/webapp/extsys/sdncontroller/css/style.css
new file mode 100644
index 00000000..1f81d81d
--- /dev/null
+++ b/extsys/src/main/webapp/extsys/sdncontroller/css/style.css
@@ -0,0 +1,33 @@
+/* Copyright 2017, 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.
+ */
+ 
+
+.containerh{
+	background-color:white !important;
+	min-height:800px;
+
+}
+
+#textCenter{
+    padding-top:8px;
+}
+
+#rowSpacing{
+    margin-bottom: 9px;
+}
+
+#borderSpacing{
+    margin-bottom: -15px;
+}
+\ No newline at end of file
diff --git a/extsys/src/main/webapp/extsys/sdncontroller/index.html b/extsys/src/main/webapp/extsys/sdncontroller/index.html
index 62855576..942a86bb 100644
--- a/extsys/src/main/webapp/extsys/sdncontroller/index.html
+++ b/extsys/src/main/webapp/extsys/sdncontroller/index.html
@@ -34,15 +34,16 @@
     <!--<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>-->
     <script src="/openoui/thirdparty/js/jquery-ui.js"></script>
     <script type="text/javascript" src="/openoui/thirdparty/js/bootstrap.min.js"></script>
+	<link href="/openoui/extsys/sdncontroller/css/style.css" rel="stylesheet"/>
     <script src="/openoui/extsys/sdncontroller/js/app.js"></script>
     <script src="/openoui/extsys/sdncontroller/js/rest.js"></script>
-    <script src="/openoui/framework/js/DataService.js"></script>
+    <script src="/openoui/extsys/sdncontroller/js/DataService.js"></script>
     <script src="/openoui/thirdparty/js/mustache.js"></script>
 
 
 </head>
 
-<body ng-app="ControllerApp" onload="loadTemplate()">
+<body ng-app="ControllerApp" class="containerh"> <!-- onload="loadTemplate()"-->
     <ui-view></ui-view>
 </body>
 </html>
 \ No newline at end of file
diff --git a/extsys/src/main/webapp/extsys/sdncontroller/js/DataService.js b/extsys/src/main/webapp/extsys/sdncontroller/js/DataService.js
new file mode 100644
index 00000000..f374bbd8
--- /dev/null
+++ b/extsys/src/main/webapp/extsys/sdncontroller/js/DataService.js
@@ -0,0 +1,80 @@
+app.factory("DataService", function($http, $log) {
+    return {
+        /**
+         *
+         * @param url - url of the service
+         * @param data - data as an object (used as query string in url)
+         * @returns {*}
+         */
+        get: function (url, data) {
+            if(data) {
+                url += "?";
+                for(key in data){
+                    url += key+ "=" + data[key];
+                }
+            }
+            return $http({
+                url: url,
+                method: 'GET',
+                data: null,
+                headers: {'Content-Type': 'application/json'}
+            }).then(function (response) {
+                return response.data;
+            });
+        },
+        /**
+         *
+         * @param url - url of the service
+         * @param data - data as an object (used for post method)
+         * @returns {*}
+         */
+        post: function (url, data) {
+            return $http({
+                url: url,
+                method: 'POST',
+                data: data,
+                headers: {'Content-Type': 'application/json '}
+            }).then(function (response) {
+                console.log("Response : ");
+                $log.info(response.data);
+                return response.data;
+            });
+        },
+        /**
+         * TODO - To Check for Delete
+         * @param url
+         * @param data
+         * @returns {*}
+         */
+        delete: function (url) {
+            return $http({
+                url: url,
+                method: 'DELETE',
+                data: null,
+                headers: {'Content-Type': 'application/json '}
+            }).then(function (response) {
+                console.log("Response : ");
+                $log.info(response.data);
+                return response.data;
+            });
+        },
+        /**
+         *
+         * @param url
+         * @param data
+         */
+        put: function (url, data) {
+            return $http({
+                url: url,
+                method: 'PUT',
+                data: data,
+                headers: {'Content-Type': 'application/json '}
+            }).then(function (response) {
+                console.log("Response : ");
+                $log.info(response.data);
+                return response.data;
+            });
+        }
+
+    }
+})
+\ No newline at end of file
diff --git a/extsys/src/main/webapp/extsys/sdncontroller/js/app.js b/extsys/src/main/webapp/extsys/sdncontroller/js/app.js
index c6f601c2..e856ef7d 100644
--- a/extsys/src/main/webapp/extsys/sdncontroller/js/app.js
+++ b/extsys/src/main/webapp/extsys/sdncontroller/js/app.js
@@ -27,6 +27,12 @@ var app = angular.module("ControllerApp", ["ui.router", "ngTable"])
      }
      });
      })*/
+	.run(function($rootScope, $location, $state, $stateParams) {
+        $rootScope.$on('$viewContentLoaded', function() {
+            //call it here
+            loadTemplate();
+        });
+    })
     .config(function($stateProvider, $urlRouterProvider, $urlMatcherFactoryProvider) {
         //$routeProvider.caseInsensitiveMatch = true;
         $urlMatcherFactoryProvider.caseInsensitive(true);
@@ -54,8 +60,8 @@ var app = angular.module("ControllerApp", ["ui.router", "ngTable"])
                     $log.info(data);
                     loadButtons();
                 }, function (reason) {
-
                     $scope.message = "Error is :" + JSON.stringify(reason);
+					loadButtons();
                 });
         }
 
@@ -63,27 +69,13 @@ var app = angular.module("ControllerApp", ["ui.router", "ngTable"])
             var def_button_tpl = $(modelTemplate).filter('#defaultButtons').html();
             var def_iconbutton_tpl = $(modelTemplate).filter('#defaultIconButtons').html();
             var dialog = $(modelTemplate).filter('#dialog').html();
-            var add_data = {"title":"Create", "type":"btn btn-default",  "gType": "plus-icon", "iconPosition":"left", "clickAction":"showAddModal()"};
+            var add_data = {"title":"Create", "type":"btn btn-default", "gType": "plus-icon", "iconPosition":"left", "clickAction":"showAddModal()"};
            // var delete_data = {"title":"Delete Selected", "type":"btn btn-default", "gType": "delete-icon", "iconPosition":"left", "clickAction":"deleteData()"};
             var addhtml = Mustache.to_html(def_iconbutton_tpl, add_data);
             //var deletehtml = Mustache.to_html(def_iconbutton_tpl, delete_data);
             $('#extsysAction').html($compile(addhtml)($scope));
             //$('#extsysAction').append($compile(deletehtml)($scope));
 
-            $scope.checkboxes = { 'checked': false, items: {} };
-
-            //var data = [{id: 1, name: "Moroni", age: 50}, {id: 2, name: "ABC", age: 30}, {id: 3, name: "Morhoni", age: 10}, {id: 4, name: "DABC", age: 31}, {id: 5, name: "Noor", age: 30}, {id: 6, name: "ABCD", age: 40}, {id: 7, name: "DABC", age: 31}, {id: 8, name: "Noor", age: 30}, {id: 9, name: "ABCD", age: 40}, {id: 10, name: "DABC", age: 31}, {id: 11, name: "Noor", age: 30}, {id: 12, name: "ABCD", age: 40}];
-            $scope.controllerTableParams = new NgTableParams({count: 5, sorting: {name: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}
-            }, { counts:[5, 10, 20, 50], dataset: $scope.data.controllerData});
-
-            /*$scope.$watch('checkboxes.checked', function(value) {
-                angular.forEach($scope.data.controllerData, function(item) {
-                    console.log("#######"+item.id);
-                    if (angular.isDefined(item.id)) {
-                        $scope.checkboxes.items[item.id] = value;
-                    }
-                });
-            });*/
 
             var modelSubmit_data = {"title":"OK", "clickAction":"saveData(ext.id)"};
             var modelSubmit_html = Mustache.to_html(def_button_tpl, modelSubmit_data);
@@ -96,7 +88,7 @@ var app = angular.module("ControllerApp", ["ui.router", "ngTable"])
             var text = $(modelTemplate).filter('#textfield').html();
             var dropDown = $(modelTemplate).filter('#simpleDropdownTmpl').html();
 
-            var extName = {"ErrMsg" :     {"errmsg" : "Name is required.", "modalVar":"ext.Name", "errtag":"textboxErrName", "errfunc":"validatetextboxName", "required":true}};
+            var extName = {"ErrMsg" :     {"errmsg" : "Name is required.", "modalVar":"ext.name", "errtag":"textboxErrName", "errfunc":"validatetextboxName", "required":true}};
             $('#myModal #name').append($compile(Mustache.to_html(text, extName.ErrMsg))($scope));
 
             var extURL = {"ErrMsg" :     {"errmsg" : "URL is required.", "modalVar":"ext.url", "errtag":"textboxErrURL", "errfunc":"validatetextboxURL", "required":true}};
@@ -105,44 +97,48 @@ var app = angular.module("ControllerApp", ["ui.router", "ngTable"])
             var extUserName = {"ErrMsg" :     {"errmsg" : "UserName is required.", "modalVar":"ext.userName", "errtag":"textboxErrUserName", "errfunc":"validatetextboxUserName", "required":true}};
             $('#myModal #username').append($compile(Mustache.to_html(text, extUserName.ErrMsg))($scope));
 
-            var extPassword = {"ErrMsg" :     {"errmsg" : "Password is required.", "modalVar":"ext.Password", "errtag":"textboxErrPassword", "errfunc":"validatetextboxPassword", "required":true}};
+            var extPassword = {"ErrMsg" :     {"errmsg" : "Password is required.", "modalVar":"ext.password", "errtag":"textboxErrPassword", "errfunc":"validatetextboxPassword", "required":true}};
             $('#myModal #password').append($compile(Mustache.to_html(text, extPassword.ErrMsg))($scope));
 
-            var extVersion = {"ErrMsg" :     {"errmsg" : "Version is required.", "modalVar":"ext.Version"}};
+            var extVersion = {"ErrMsg" :     {"errmsg" : "Version is required.", "modalVar":"ext.version"}};
             $('#myModal #version').append($compile(Mustache.to_html(text, extVersion.ErrMsg))($scope));
 
-            var extVendor = {"ErrMsg" :     {"errmsg" : "Vendor is required.", "modalVar":"ext.Vendor"}};
+            var extVendor = {"ErrMsg" :     {"errmsg" : "Vendor is required.", "modalVar":"ext.vendor"}};
             $('#myModal #vendor').append($compile(Mustache.to_html(text, extVendor.ErrMsg))($scope));
 
-            var extDescription = {"ErrMsg" :     {"textboxErr" : "Description is required.", "modalVar":"ext.Description"}};
+            var extDescription = {"ErrMsg" :     {"textboxErr" : "Description is required.", "modalVar":"ext.description"}};
             $('#myModal #description').append($compile(Mustache.to_html(text, extDescription.ErrMsg))($scope));
 
             /*var extProtocol = {"ErrMsg" :     {"textboxErr" : "Protocol is required.", "modalVar":"ext.protocol"}};
             $('#myModal #protocol').append($compile(Mustache.to_html(text, extProtocol.ErrMsg))($scope));*/
 
-            var dropdowndata_protocol = {
+            /*var dropdowndata_protocol = {
                 "modalVar" : "ext.Protocol",
                 "labelField" : "itemLabel",
-                "optionsValue" : JSON.stringify($scope.data.dropdownProtocolData.item)
+                "optionsValue" : JSON.stringify($scope.data ? $scope.data.dropdownProtocolData.item : "")
             };
 
-            console.log("dropdown data:"+$scope.data.dropdownProtocolData.item);
+            //console.log("dropdown data:"+$scope.data.dropdownProtocolData.item);
 
-            $('#myModal #protocol').append($compile(Mustache.to_html(dropDown, dropdowndata_protocol))($scope));
+            $('#myModal #protocol').append($compile(Mustache.to_html(dropDown, dropdowndata_protocol))($scope));*/
+
+            var dropdownResponse=[{"id":"netconf","name":"netconf"},{"id":"snmp","name":"snmp"},{"id":"https","name":"https"},{"id":"http","name":"http"}];
+            var dropdownInfo = translateToDropdownInfo(dropdownResponse);
+            $('#myModal #protocolDD').html(dropdownInfo);
 
             var extProductName = {"ErrMsg" :     {"textboxErr" : "ProductName is required.", "modalVar":"ext.productName"}};
             $('#myModal #ProductName').append($compile(Mustache.to_html(text, extProductName.ErrMsg))($scope));
 
-            /*var extType = {"ErrMsg" :     {"textboxErr" : "Type is required.", "modalVar":"ext.type"}};
-            $('#myModal #type').append($compile(Mustache.to_html(text, extType.ErrMsg))($scope));*/
+            var extType = {"ErrMsg" :     {"textboxErr" : "Type is required.", "modalVar":"ext.type"}};
+            $('#myModal #type').append($compile(Mustache.to_html(text, extType.ErrMsg))($scope));
 
-            var dropdowndata_type = {
+            /*var dropdowndata_type = {
                 "modalVar" : "ext.Type",
                 "labelField" : "itemLabel",
-                "optionsValue" : JSON.stringify($scope.data.dropdownTypeData.item)
+                "optionsValue" : JSON.stringify($scope.data?$scope.data.dropdownTypeData.item:"")
             };
 
-            $('#myModal #type').append($compile(Mustache.to_html(dropDown, dropdowndata_type))($scope));
+            $('#myModal #type').append($compile(Mustache.to_html(dropDown, dropdowndata_type))($scope));*/
 
 
 
@@ -156,12 +152,26 @@ var app = angular.module("ControllerApp", ["ui.router", "ngTable"])
             var extOperation = {"ErrMsg" :     {"textboxErr" : "The name is required.", "modalVar":"ext.operation", "placeholder":"Hard Disk"}};
             $('#myModal #Operation').append($compile(Mustache.to_html(text, extOperation.ErrMsg))($scope));*/
 
+            $scope.checkboxes = { 'checked': false, items: {} };
+
+            //var data = [{id: 1, name: "Moroni", age: 50}, {id: 2, name: "ABC", age: 30}, {id: 3, name: "Morhoni", age: 10}, {id: 4, name: "DABC", age: 31}, {id: 5, name: "Noor", age: 30}, {id: 6, name: "ABCD", age: 40}, {id: 7, name: "DABC", age: 31}, {id: 8, name: "Noor", age: 30}, {id: 9, name: "ABCD", age: 40}, {id: 10, name: "DABC", age: 31}, {id: 11, name: "Noor", age: 30}, {id: 12, name: "ABCD", age: 40}];
+            $scope.controllerTableParams = new NgTableParams({count: 5, sorting: {name: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}
+            }, { counts:[5, 10, 20, 50], dataset: $scope.data});
+
+            /*$scope.$watch('checkboxes.checked', function(value) {
+             angular.forEach($scope.data.controllerData, function(item) {
+             console.log("#######"+item.id);
+             if (angular.isDefined(item.id)) {
+             $scope.checkboxes.items[item.id] = value;
+             }
+             });
+             });*/
 
 
         }
 
         $scope.validatetextboxName = function (value){
-            if($scope.ext.Name) {
+            if($scope.ext.name) {
                 $scope.textboxErrName = false;
             }
             else
@@ -185,7 +195,7 @@ var app = angular.module("ControllerApp", ["ui.router", "ngTable"])
         }
 
         $scope.validatetextboxPassword = function (value){
-            if($scope.ext.Password) {
+            if($scope.ext.password) {
                 $scope.textboxErrPassword = false;
             }
             else
@@ -199,6 +209,17 @@ var app = angular.module("ControllerApp", ["ui.router", "ngTable"])
             $state.reload();
         }
 
+        function translateToDropdownInfo(dropdowndata) {
+            var options = '<option value="select">--select--</option>';
+            var i;
+            for (i = 0; i < dropdowndata.length; i += 1) {
+                var option = '<option value="' + dropdowndata[i].id + '">' + dropdowndata[i].name
+                    + '</option>';
+                options = options + option;
+            }
+
+            return options;
+        }
 
 
         /*$scope.checkAll = function () {
@@ -218,6 +239,9 @@ var app = angular.module("ControllerApp", ["ui.router", "ngTable"])
             $scope.textboxErrPassword = false;
         }
         $scope.saveData = function (id) {
+
+            $scope.ext.protocol = $('#protocolDD').val();
+
             if (!$scope.textboxErrName && !$scope.textboxErrURL && !$scope.textboxErrUserName && !$scope.textboxErrPassword) {
                 if (id) {
                     //edit data
@@ -263,7 +287,7 @@ var app = angular.module("ControllerApp", ["ui.router", "ngTable"])
                 "msg": "Do you really wanted to Delete?.",
                 "buttons": [
                     {
-                        "text": "Ok", "action": "deleteConfirmation("+id+")"
+                        "text": "Ok", "action": "deleteConfirmation('"+[id]+"')"
                     }]
             }};
             angular.forEach($scope.checkboxes.items, function(value) {
@@ -335,22 +359,43 @@ function loadTemplate() {
     });
 }*/
 
-var modelTemplate = "";
+/*var modelTemplate = "";
 function loadTemplate() {
-    $.get('framework/template.html', function (template) {
+    *//*$.get('/openoui/framework/template.html', function (template) {
+        modelTemplate += template;
+    });*//*
+    $.get('/openoui/framework/templateContainer.html', function (template) {
+        modelTemplate += template;
+    });
+    $.get('/openoui/framework/templateWidget.html', function (template) {
+        //console.log("Template is : "+template);
+        modelTemplate += template;
+    });
+    $.get('/openoui/framework/templateNotification.html', function (template) {
+        modelTemplate += template;
+    });
+    $.get('/openoui/framework/templateFunctional.html', function (template) {
         modelTemplate += template;
     });
-    $.get('framework/templateContainer.html', function (template) {
+}*/
+
+var modelTemplate = "";
+function loadTemplate() {
+
+    /*$.get('/openoui/resmgr/templates/template.html', function (template) {
+        modelTemplate += template;
+     });*/
+    $.get('/openoui/extsys/sdncontroller/templates/templateContainer.html', function (template) {
         modelTemplate += template;
     });
-    $.get('framework/templateWidget.html', function (template) {
+    $.get('/openoui/extsys/sdncontroller/templates/templateWidget.html', function (template) {
         //console.log("Template is : "+template);
         modelTemplate += template;
     });
-    $.get('framework/templateNotification.html', function (template) {
+    $.get('/openoui/extsys/sdncontroller/templates/templateNotification.html', function (template) {
         modelTemplate += template;
     });
-    $.get('framework/templateFunctional.html', function (template) {
+    $.get('/openoui/extsys/sdncontroller/templates/templateFunctional.html', function (template) {
         modelTemplate += template;
     });
 }
diff --git a/extsys/src/main/webapp/extsys/sdncontroller/js/rest.js b/extsys/src/main/webapp/extsys/sdncontroller/js/rest.js
index 47b94c64..1279c424 100644
--- a/extsys/src/main/webapp/extsys/sdncontroller/js/rest.js
+++ b/extsys/src/main/webapp/extsys/sdncontroller/js/rest.js
@@ -18,7 +18,7 @@
 
 
 app.factory("controllerDataService", function($http, DataService, $log){
-    var uri = 'http://192.168.9.13:18008';
+    var uri = '';
     return {
         getControllerData : function() {
             /*return $http({
diff --git a/extsys/src/main/webapp/extsys/sdncontroller/templates/controller.html b/extsys/src/main/webapp/extsys/sdncontroller/templates/controller.html
index faa336d1..cc3d9524 100644
--- a/extsys/src/main/webapp/extsys/sdncontroller/templates/controller.html
+++ b/extsys/src/main/webapp/extsys/sdncontroller/templates/controller.html
@@ -30,38 +30,38 @@
             <input type="checkbox" ng-model="checkboxes.items[controllerData.id]" />
         </td>-->
         <td title="'Name'" filter="{ Name: 'text'}" sortable="'Name'">
-            {{controllerData.Name}}
+            {{controllerData.name}}
         </td>
         <td title="'Protocol'" filter="{ Protocol: 'text'}" sortable="'Protocol'">
-            {{controllerData.Protocol}}
+            {{controllerData.protocol}}
         </td>
         <td title="'Product Name'" filter="{ productName: 'text'}" sortable="'productName'">
             {{controllerData.productName}}
         </td>
         </td>
         <td title="'Type'" filter="{ Type: 'text'}" sortable="'Type'">
-            {{controllerData.Type}}
+            {{controllerData.type}}
         </td>
         <td title="'Vendor'" filter="{ Vendor: 'text'}" sortable="'Vendor'">
-            {{controllerData.Vendor}}
+            {{controllerData.vendor}}
         </td>
         <td title="'Version'" filter="{ Version: 'number'}" sortable="'Version'">
-            {{controllerData.Version}}
+            {{controllerData.version}}
         </td>
         <td title="'Description'" filter="{ Description: 'text'}" sortable="'Description'">
-            {{controllerData.Description}}
+            {{controllerData.description}}
         </td>
         <td title="'Create Time'" filter="{ createTime: 'number'}" sortable="'createTime'">
             {{controllerData.createTime}}
         </td>
         <td title="'Operation'" filter="{ Operation: 'text'}" sortable="'Operation'">
-            {{controllerData.Operation}}
+            {{controllerData.operation}}
         </td>
         <td title="'Action'">
            <!-- <span class="pull-right glyphicon glyphicon-edit" ng-click="editData(controllerData.name)" style="cursor: pointer;margin: 0 5px"></span>
             <span class="pull-right glyphicon glyphicon-trash" ng-click="deleteIndividualData(controllerData.name)" style="cursor: pointer;margin: 0 5px"></span>-->
-            <span  ng-click="editData(controllerData.id)" style="cursor: pointer;margin: 0 5px"> <img src="framework/images/edit.png" height="15" align="left"/></span>
-            <span  ng-click="deleteData(controllerData.id)" style="cursor: pointer;margin: 0 5px"><img src="framework/images/delete.png" height="15" align="middle"/></span>
+            <span  ng-click="editData(controllerData.sdnControllerId)" style="cursor: pointer;margin: 0 5px"> <img src="/openoui/framework/browser/thirdparty/images/edit.png" height="15" align="left"/></span>
+            <span  ng-click="deleteData(controllerData.sdnControllerId)" style="cursor: pointer;margin: 0 5px"><img src="/openoui/framework/browser/thirdparty/images/delete.png" height="15" align="middle"/></span>
         </td>
     </tr>
 </table>
@@ -80,7 +80,7 @@
         <div class="modal-content">
             <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal">&times;</button>
-                <h5 class="modal-title">Modal Header</h5>
+                <h5 class="modal-title">>Add Controller</h5>
             </div>
             <form  name="extsysForm" method="post">
                 <div class="modal-body">
@@ -130,6 +130,7 @@
                     <div class="form-group row">
                         <label class="col-xs-4 col-form-label">Protocol</label>
                         <div id="protocol" class="col-xs-8" >
+                            <select id="protocolDD" class="form-control inputfield" ng-model="ext.protocol"></select>
                         </div>
                     </div>
 
diff --git a/extsys/src/main/webapp/extsys/sdncontroller/templates/templateContainer.html b/extsys/src/main/webapp/extsys/sdncontroller/templates/templateContainer.html
new file mode 100644
index 00000000..ef6f01c6
--- /dev/null
+++ b/extsys/src/main/webapp/extsys/sdncontroller/templates/templateContainer.html
@@ -0,0 +1,79 @@
+<!--
+
+    Copyright 2016-2017, 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.
+
+-->
+<!-- Accordion -->
+<script id="accordion" type="text/html">
+    {{#items}}
+    <div class="panel panel-default">
+        <h3 class="panel-title">
+            <a data-toggle="collapse" data-parent="#accordion" data-target="#{{tabId}}">{{header}}</a>
+        </h3>
+        <div id="{{tabId}}" class="panel-collapse collapse {{#isActive}}in{{/isActive}}">
+            <div class="panel-body"> {{msg}} </div>
+        </div>
+    </div>
+    {{/items}}
+</script>
+
+<!--Tabs-->
+<script id="tabs" type="text/html">
+    <ul class="nav nav-tabs">
+        {{#items}}<li {{#isActive}}class="active"{{/isActive}}><a data-toggle="tab" data-target="#{{target}}">{{tablabel}}</a></li>{{/items}}
+    </ul>
+    <div class="tab-content">
+        {{#items}}
+        <div id="{{target}}" class="tab-pane fade {{#isActive}}in active{{/isActive}}">
+            <h3>{{tablabel}}</h3>
+            <p>{{msg}}</p>
+        </div>
+        {{/items}}
+    </div>
+</script>
+
+<!--Vertical Tabs-->
+<script id="vtabs" type="text/html">
+    <ul class="nav nav-stacked col-sm-4 col-md-4 col-lg-4">
+        {{#items}}<li {{#isActive}}class="active"{{/isActive}}><a data-toggle="tab" data-target="#{{target}}">{{tablabel}}</a></li>{{/items}}
+    </ul>
+    <div class="tab-content col-sm-8 col-md-8 col-lg-8">
+        {{#items}}
+        <div id="{{target}}" class="tab-pane fade {{#isActive}}in active{{/isActive}}">
+            <h3>{{tablabel}}</h3>
+            <p>{{msg}}</p>
+        </div>
+        {{/items}}
+    </div>
+</script>
+
+<!--Table-->
+<script id="table" type="text/html">
+    {{#filter}}<input type="text" id="myInput" onkeyup="{{action}}" placeholder="Search for {{searchField}}">{{/filter}}
+    <table id="myTable{{#filter}}_search{{/filter}}" class="table {{#striped}}table-striped{{/striped}} {{#border}}table-bordered{{/border}} {{#hover}}table-hover{{/hover}} {{#condensed}}table-condensed{{/condensed}}">
+        <thead>
+        <tr>
+            {{#itemHeader}}<th>{{.}}</th>{{/itemHeader}}
+        </tr>
+        </thead>
+        <tbody>
+        {{#rowitem}}
+        <tr>
+            {{#values}}<td>{{.}}</td>{{/values}}
+        </tr>
+        {{/rowitem}}
+        </tbody>
+    </table>
+</script>
+\ No newline at end of file
diff --git a/extsys/src/main/webapp/extsys/sdncontroller/templates/templateFunctional.html b/extsys/src/main/webapp/extsys/sdncontroller/templates/templateFunctional.html
new file mode 100644
index 00000000..ff2f53f0
--- /dev/null
+++ b/extsys/src/main/webapp/extsys/sdncontroller/templates/templateFunctional.html
@@ -0,0 +1,82 @@
+<!--
+
+    Copyright 2016-2017, 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.
+
+-->
+
+<script id="functionalDialog" type="text/html">
+    <div id="funModal" class="modal fade" role="dialog" ng-init="getDetail()">
+        <div class="modal-dialog modal-md">
+
+            <!-- Modal content-->
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    <h4 class="modal-title titlestyle">{{title}}</h4>
+                </div>
+                <div class="modal-body">
+                    <div>
+                        <form class="form-horizontal" role="form">
+                            {{#labels}}
+                            <div class="form-group">
+                                <label class="control-label col-sm-3 labelstyle" for={{input_id}}>{{text}}</label>
+                                <div class="col-sm-7">
+                                    <input type={{type}} class="form-control" id={{input_id}}>
+                                </div>
+                            </div>
+                            {{/labels}}
+                        </form>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <div>{{#buttons}} <button type="button" class="btn btnDefault btnmrg" data-dismiss="modal" >{{text}}</button> {{/buttons}}
+                        {{#showClose}}<button type="button" class="btn btnDefault btnmrg" data-dismiss="modal">{{closeBtnTxt}}</button>{{/showClose}}
+                    </div>
+                    <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
+                </div>
+            </div>
+
+        </div>
+    </div>
+</script>
+
+
+<script id="dialog" type="text/html">
+    <div id="uniModal" class="modal fade" role="dialog">
+        <div class="modal-dialog">
+
+            <!-- Modal content-->
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    <div class="modalHeader"></div>
+                </div>
+                <form name="provinceForm" method="post"><!-- ng-submit="saveData(province.id)"-->
+                    <div class="modal-body">
+                        <div class="modalBodyContent">
+                        </div>
+                    </div>
+
+                    <div id="footerBtns" class="modal-footer">
+                    </div>
+
+                </form>
+            </div>
+
+
+        </div>
+    </div>
+
+</script>
+\ No newline at end of file
diff --git a/extsys/src/main/webapp/extsys/sdncontroller/templates/templateNotification.html b/extsys/src/main/webapp/extsys/sdncontroller/templates/templateNotification.html
new file mode 100644
index 00000000..97f26e37
--- /dev/null
+++ b/extsys/src/main/webapp/extsys/sdncontroller/templates/templateNotification.html
@@ -0,0 +1,48 @@
+<!--
+
+    Copyright 2016-2017, 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.
+
+-->
+
+<!--Dialog-->
+<script id="personDialog" type="text/html">
+    <div id="msgModal" class="modal fade" role="dialog">
+        <div class="modal-dialog modal-md">
+
+            <!-- Modal content-->
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    <h4 class="modal-title titlestyle">{{title}}</h4>
+                </div>
+                <div class="modal-body">
+                    <div class="container center">
+                        <div class="row">
+                            <div class="col-xs-2 col-sm-2 col-md-1 col-lg-1 icon {{icon}} {{iconColor}}"></div>
+                            <div class="msg col-xs-10 col-sm-10 col-md-11 col-lg-11" style="text-align:left;vertical-align: middle;">{{msg}}</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <div>{{#buttons}} <button type="button" class="btn btnDefault btnmrg" data-dismiss="modal" ng-click={{action}}>{{text}}</button> {{/buttons}}
+                        {{#showClose}}<button type="button" class="btn btnDefault btnmrg" data-dismiss="modal">{{closeBtnTxt}}</button>{{/showClose}}
+                    </div>
+                    <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
+                </div>
+            </div>
+
+        </div>
+    </div>
+</script>
+\ No newline at end of file
diff --git a/extsys/src/main/webapp/extsys/sdncontroller/templates/templateWidget.html b/extsys/src/main/webapp/extsys/sdncontroller/templates/templateWidget.html
new file mode 100644
index 00000000..bb8eef48
--- /dev/null
+++ b/extsys/src/main/webapp/extsys/sdncontroller/templates/templateWidget.html
@@ -0,0 +1,222 @@
+<!--
+
+    Copyright 2016-2017, 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.
+
+-->
+
+<!-- Default Buttons <button class="btnDefault" ng-click="{{clickAction}}">{{title}}</button>-->
+<script id="defaultButtons" type="text/html">
+    <input type="button" class="btnDefault btnmrg" ng-click="{{clickAction}}" value="{{title}}"/>
+</script>
+
+<script id="defaultIconButtons" type="text/html">
+    <button id="iconBtn" type="button" class="btnDefault  btnmrg {{type}}" ng-click="{{clickAction}}">{{title}}
+        <span class="glyphicon {{gType}} pull-{{iconPosition}}"></span>
+    </button>
+</script>
+
+<!-- Visual Buttons -->
+<script id="visualButtons" type="text/html">
+    <button type="button" class="btn btn-{{type}}">{{title}}</button>
+</script>
+
+<!-- Different sized Buttons -->
+<script id="sizeButtons" type="text/html">
+    <button type="button" class="btn btn-{{type}} {{size}}">{{title}}</button>
+</script>
+
+<!-- Icon Buttons -->
+<script id="iconButtons" type="text/html">
+    <button type="button" class="btn btn-{{type}}">{{title}}
+        <span class="glyphicon {{gType}}"></span>
+    </button>
+</script>
+
+<!--Dropdown template-->
+<script id="dropDown" type="text/html">
+    <div class="drop{{position}}">
+        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{{title}}
+            <span class="caret"></span>
+        </button>
+        <ul class="dropdown-menu">
+            {{#items}}<li><a href="#">{{itemLabel}}</a></li>{{/items}}
+        </ul>
+    </div>
+</script>
+
+<script id="dropDownHeader" type="text/html">
+    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{{title}}
+        <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu">
+        {{#items}}
+        {{#isheader}}<li class="divider"></li><li class="dropdown-header">{{itemLabel}}</li><li class="divider"></li>{{/isheader}}
+        {{^isheader}}<li><a href="#">{{itemLabel}}</a></li>{{/isheader}}
+        {{/items}}
+    </ul>
+</script>
+
+<script id="simpleDropdownTmpl" type="text/html">
+    <div class="dropdownplain">
+
+        <select class="inputfield form-control" ng-model="{{modalVar}}" ng-options="item.{{labelField}} for item in {{optionsValue}}">
+            <option style="display:none" value="">--select--</option>
+        </select>
+    </div>
+</script>
+
+
+<!--Radio Buttons-->
+<script id="radioButtons" type="text/html">
+    <div>
+        <input class="magic-radio" type="radio" name="radio" id="radio{{id}}"/>
+        <label for="radio{{id}}">{{label}}</label></br>
+    </div>
+</script>
+
+<!--Check boxes template-->
+<script id="checkBoxes" type="text/html">
+    <div class="funkyradio-{{type}}">
+        <input type="checkbox" name="check" id="checkbox{{id}}" {{#checked}}checked{{/checked}} />
+        <label for="checkbox{{id}}">{{label}}</label>
+    </div>
+</script>
+
+<!--text-->
+<script id="textfield" type="text/html">
+    <div class="css-form">
+       <input id ="textbox" name="textbox" class="form-control inputfield" placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="text"  ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}> {{#required}}<span class="staricon">*</span>{{/required}}
+        <span class="errMsg" ng-show="{{errtag}}">{{errmsg}}</span>
+    </div>
+</script>
+
+<!--email-->
+<script id="email" type="text/html">
+    <div class="css-form">
+        <input class="form-control inputfield"  placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="email"  ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}>{{#required}}<span class="staricon">*</span>{{/required}}
+        <span class="errMsg" ng-show="{{errtag}}">{{errmsg}}</span>
+    </div>
+</script>
+
+<!--url-->
+<script  id="url" type="text/html">
+    <div class="css-form">
+        <input class="form-control inputfield" placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="url"  ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}>{{#required}}<span class="staricon">*</span>{{/required}}
+        <span class="errMsg" ng-show="{{errtag}}">{{errmsg}}</span>
+    </div>
+</script>
+
+<!--password-->
+<script  id="password" type="text/html">
+    <div class="css-form">
+
+
+        <input class="form-control inputfield" placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="password" pattern=".{3,}" maxlength="{{#maxLength}}{{maxLength}}{{/maxLength}}{{^maxLength}}9{{/maxLength}}" ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}>{{#required}}<span class="staricon">*</span>{{/required}}
+        <span class="errMsg" ng-show="{{errtag}}">{{errmsg}}</span>
+    </div>
+</script>
+
+<!--numeric-->
+<script id="numeric" type="text/html">
+    <div class="css-form">
+        <input  class="form-control inputfield" placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="number"  ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}/>{{#required}}<span class="staricon">*</span>{{/required}}
+        <span class="errMsg" ng-show="{{errtag}}">{{errmsg}}</span>
+    </div>
+</script>
+
+<!--dot-->
+<script  id="dot" type="text/html">
+    <div class="css-form">
+        <input class="form-control inputfield"  placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="datetime-local"  ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}>{{#required}}<span class="staricon">*</span>{{/required}}
+        <span class="errMsg" ng-show="{{errtag}}">{{errmsg}}</span>
+    </div>
+</script>
+
+<!--date-->
+<script  id="dateinput" type="text/html">
+    <div class="css-form">
+        <input class="form-control inputfield"  placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="date" ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}>{{#required}}<span class="staricon">*</span>{{/required}}
+        <span class="errMsg" ng-show="{{errtag}}">{{errmsg}}</span>
+    </div>
+</script>
+
+<!--Month-->
+<script  id="monthinput" type="text/html">
+    <div class="css-form">
+        <input class="form-control inputfield" placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="month"  ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}>{{#required}}<span class="staricon">*</span>{{/required}}
+        <span class="errMsg" ng-show="{{errtag}}">{{errmsg}}</span>
+    </div>
+</script>
+
+
+<!--Week-->
+<script   id="weekinput" type="text/html">
+    <div class="css-form">
+        <input class="form-control inputfield"  placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="week"  ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}>{{#required}}<span class="staricon">*</span>{{/required}}
+        <span class="errMsg" ng-show="{{errtag}}">{{errmsg}}</span>
+    </div>
+</script>
+
+<!--time-->
+<script   id="timeinput" type="text/html">
+    <div class="css-form">
+        <input class="form-control inputfield"  placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="time"  ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}>{{#required}}<span class="staricon">*</span>{{/required}}
+        <span class="errMsg" ng-show="{{errtag}}">{{errmsg}}</span>
+    </div>
+</script>
+
+<!--ipv4-->
+<script   id="ipv4" type="text/html">
+    <div class="css-form">
+        <input class="form-control inputfield" type="ipv4" placeholder="{{placeholder}}" ng-model="{{modalVar}}" pattern="((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$"  ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}>{{#required}}<span class="staricon">*</span>{{/required}}
+        <span class="errMsg" ng-show="{{errtag}}">{{errmsg}}</span>
+    </div>
+</script>
+
+<!--ipv6-->
+<script   id="ipv6" type="text/html">
+    <div class="css-form">
+        <input class="form-control inputfield"   placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="ipv6"  pattern="^([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])" ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}>{{#required}}<span class="staricon">*</span>{{/required}}
+        <span class="errMsg" ng-show="{{errtag}}">{{errmsg}}</span>
+    </div>
+</script>
+
+<!--textarea-->
+<script id="textarea" type="text/html">
+    <div class="css-form">
+        <textarea class="form-control inputfield"  rows="4" cols="50" placeholder="{{placeholder}}" ng-model="{{modalVar}}"  ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}></textarea>{{#required}}<span class="staricon">*</span>{{/required}}
+        <span class="errMsg" ng-show="{{errtag}}">{{errmsg}}</span>
+    </div>
+</script>
+
+<!--note-->
+<script id="note" type="text/html">
+
+    <a  id="noteanchor" href="#/home/textarea" title="Note" data-toggle="popover" data-trigger="focus" data-placement="{{placement}}">
+        <span class="glyphicon glyphicon-info-sign "></span></a>
+</script>
+
+<!-- list -->
+<script id="list" type="text/html">
+
+    {{#items}}
+
+    <div>
+        <button type="button" class="btn btn-primary btn-block" ng-click="loadSubMenuPage('{{id}}', '{{level}}', '{{row}}')">{{title}}</button>
+    </div>
+
+    {{/items}}
+
+</script>
diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/css/style.css b/lifecyclemgr/src/main/webapp/lifecyclemgr/css/style.css
index 954ad091..aeab8761 100644
--- a/lifecyclemgr/src/main/webapp/lifecyclemgr/css/style.css
+++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/css/style.css
@@ -12,7 +12,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
- 
+
+.containerh{
+    background-color:white !important;
+    min-height:900px !important;
+}
+
 .lcmanager{
     padding: 0 50px;
 }
@@ -74,7 +79,7 @@
     text-align: left;
 }
 
-.detailinfo, .topo, .inputdata {
+.detailinfo, .topo, .inputdata, .vpnConnections, .vpnGateway, .siteList, .vpcList {
     border-right: 1px solid #ddd;
 }
 
@@ -194,4 +199,13 @@ select {
 	background-color:white !important;
 	min-height:500px;
 
-}
-\ No newline at end of file
+}
+
+.rowSelected td{
+    background-color:#e8f8fe !important;
+}
+
+#overlaytabArea{
+    margin-top: 50px;
+    text-align: center;
+}
diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/index.html b/lifecyclemgr/src/main/webapp/lifecyclemgr/index.html
index 15cf0359..c9f19319 100644
--- a/lifecyclemgr/src/main/webapp/lifecyclemgr/index.html
+++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/index.html
@@ -44,7 +44,7 @@
 
 </head>
 
-<body  ng-app="lcApp">
+<body  ng-app="lcApp" class="containerh">
 
 
 <div class="homecontent center lcmanager containerh">
diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/js/DataService.js b/lifecyclemgr/src/main/webapp/lifecyclemgr/js/DataService.js
index e5b7c8cc..0361864d 100644
--- a/lifecyclemgr/src/main/webapp/lifecyclemgr/js/DataService.js
+++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/js/DataService.js
@@ -18,10 +18,12 @@
 
 app.factory("DataService", function($http, $log){
     var lcData = null;
+    var overLayData = null;
     var createParamJsonObj = {
         templateId:'',
         parameters: {}
     };
+    var url = "";
     var tableDataLoaded = false;
     
     return {
@@ -38,9 +40,10 @@ app.factory("DataService", function($http, $log){
 
             //load main Table
             return $http({
-                url: '/openoapi/servicegateway/v1/services',
+                url: url+'/openoapi/servicegateway/v1/services',
                 //url: 'http://localhost:5000/api/getLCData',
                 method: 'GET',
+                data: null,
                 headers: {'Content-Type': 'application/json'}
 
                 /*url: '/openoapi/inventory/v1/services',
@@ -62,7 +65,7 @@ app.factory("DataService", function($http, $log){
             if(lcData) {
                 for (var i = 0; i < lcData.length; i++) {
                     if(lcData[i].serviceId == id) {
-                        returnData = lcData[i].inputParameters;
+                        returnData = lcData[i];
                         break;
                     }
                 }
@@ -71,41 +74,146 @@ app.factory("DataService", function($http, $log){
             else
                 return null;
         },
-        getOverlayData : function() {
+        getOverlayData : function(id) {
             return $http({
-                url: '/openoapi/sdnooverlayvpn/v1/site2dc-vpn',
+                url: url+'/openoapi/sdnooverlay/v1/vpns/' + id,
                 //url: 'http://localhost:5000/api/getOverlayVPNData',
                 method: 'GET',
+                data: null,
                 headers: {'Content-Type': 'application/json'}
             }).then(function(response){
                 //$log.info(response);
+                overLayData = response.data;
                 return response.data;
             });
         },
-        getUnderlayData : function() {
+        getOverlayVPNConnData : function(id, type){
+            var returnData = null;
+            if(overLayData) {
+                return overLayData[type];
+            }
+            else
+                return [];
+        },
+        getSiteListData : function() {
             return $http({
-                url: '/openoapi/sdnol3vpn/v1/l3vpns',
+                url: url+'/openoapi/sdnobrs/v1/sites',
+                //url: 'http://localhost:5000/api/getOverlayVPNData',
+                method: 'GET',
+                data: null,
+                headers: {'Content-Type': 'application/json'}
+            }).then(function(response){
+                if(overLayData) {
+                    var sites = [];
+                    var index = 0;
+                    for(var i = 0 ; i < response.data.length; i++){
+                        var isContains = false;
+                        for(var j = 0; j < overLayData.siteList.length; j++){
+                            if(response.data[i].id == overLayData.siteList[j]){
+                                isContains = true;
+                            }
+                        }
+                        if(isContains){
+                            sites[index] = response.data[i];
+                            index ++;
+                        }
+                    }
+                    return sites;
+                }
+                else {
+                    return [];
+                }
+            });
+        },
+        getVpcListData : function() {
+            return $http({
+                url: url+'/openoapi/sdnovpc/v1/vpcs',
+                //url: 'http://localhost:5000/api/getOverlayVPNData',
+                method: 'GET',
+                data: null,
+                headers: {'Content-Type': 'application/json'}
+            }).then(function(response){
+                if(overLayData) {
+                    var vpcs = [];
+                    var index = 0;
+                    for(var i = 0 ; i < response.data.length; i++){
+                        var isContains = false;
+                        for(var j = 0; j < overLayData.vpcList.length; j++){
+                            if(response.data[i].id == overLayData.vpcList[j]){
+                                isContains = true;
+                            }
+                        }
+                        if(isContains){
+                            vpcs[index] = response.data[i];
+                            index ++;
+                        }
+                    }
+                    return vpcs;
+                }
+                else {
+                    return [];
+                }
+            });
+        },
+        getUnderlayData : function(id) {
+            return $http({
+                url: url+'/openoapi/sdnol3vpn/v1/l3vpns/' + id,
                 //url: 'http://localhost:5000/api/getUnderlayVPNData',
                 method: 'GET',
+                data: null,
                 headers: {'Content-Type': 'application/json'}
             }).then(function(response){
                 //$log.info(response);
+                underlayData = response.data;
                 return response.data;
             });
         },
-        loadServiceDetails : function(id) {
-            return JSON.parse('[{"id":"12345", "name":"sdno"}, {"id":"23456", "name":"gso"},{"id":"12345", "name":"nfvo"}]');
+	getTPLinkData : function(){
+            var returnData = null;
+            if(underlayData) {                
+                return underlayData.accessPointList;
+            }
+            else
+                return [];
+        },
+        loadServiceTopoSequence : function(id) {
+            return $http({
+                url: url+'/openoapi/gso/v1/services/toposequence/' + id,
+                //url: 'http://localhost:5000/api/getOverlayVPNData',
+                method: 'GET',
+                data: null,
+                headers: {'Content-Type': 'application/json'}
+            }).then(function(response){
+                //$log.info(response);
+                var serviceToposequence = response.data;
+                var responseData = [];
+                for (var i = 0; i < serviceToposequence.service.segments.length; i++) {
+                    var segment = serviceToposequence.service.segments[i];
+                    responseData[i] = {"id":segment.serviceSegmentId, "name":segment.serviceSegmentType};
+                }
+                return responseData;
+            });
+            //return JSON.parse('[{"id":"12345", "name":"sdno"}, {"id":"23456", "name":"gso"},{"id":"12345", "name":"nfvo"}]');
         },
-        loadNfvoServiceDetails : function(id) {
-            return JSON.parse('{"vnfInfoId": [{ "vnfInstanceId": "123", "vnfInstanceName": "vnf instance 1", "vnfProfileId": "321" }, { "vnfInstanceId": "123", "vnfInstanceName": "vnf instance 1", "vnfProfileId": "321" }],  "vlInfo": [{ "networkResource": {"resourceName": "network resource 1"}, "linkPortResource": { "resourceName": "link port resource 1"}}, { "networkResource": {"resourceName": "network resource 1"}, "linkPortResource": { "resourceName": "link port resource 1"}}], "vnffgInfo": [{"vnfId": "vnfid-123", "virtualLinkId": "virtual link 123", "cpId": "cp id 123", "nfp": "nfp 123"}, {"vnfId": "vnfid-123", "virtualLinkId": "virtual link 123", "cpId": "cp id 123", "nfp": "nfp 123"}]}');
+        loadNfvoServiceDetails : function(id, processFun) {
+            return $http({
+                url: url+'/openoapi/nslcm/v1/ns/' + id,
+                method: 'GET',
+                data: null,
+                headers: {'Content-Type': 'application/json'}
+            }).then(function(response){
+                processFun(response.data);
+            });
+            // return JSON.parse('{"vnfInfoId": [{ "vnfInstanceId": "123", "vnfInstanceName": "vnf instance 1", "vnfProfileId": "321" }, { "vnfInstanceId": "123", "vnfInstanceName": "vnf instance 1", "vnfProfileId": "321" }],  "vlInfo": [{ "networkResource": {"resourceName": "network resource 1"}, "linkPortResource": { "resourceName": "link port resource 1"}}, { "networkResource": {"resourceName": "network resource 1"}, "linkPortResource": { "resourceName": "link port resource 1"}}], "vnffgInfo": [{"vnfId": "vnfid-123", "virtualLinkId": "virtual link 123", "cpId": "cp id 123", "nfp": "nfp 123"}, {"vnfId": "vnfid-123", "virtualLinkId": "virtual link 123", "cpId": "cp id 123", "nfp": "nfp 123"}]}');
         },
 
         generateTemplatesComponent : function() {
             //dropdown data
             return $http({
-                url: '/openoapi/catalog/v1/servicetemplates',
+                url: url+'/openoapi/catalog/v1/servicetemplates',
                 //url: 'http://localhost:5000/api/getTemplateData',
                 method: 'GET',
+                data: null,
                 headers: {'Content-Type': 'application/json'}
             }).then(function(response){
                 //$log.info(response);
@@ -364,7 +472,9 @@ function collectParamValue(identify, param) {
  * @returns
  */
 function getParamId(identify, param) {
-    return '' ===identify ? param.name : identify + '_' + param.name;
+    var tmpname = param.name.replace(/-/g, '_');
+    var tmpname1 = tmpname.replace(/\./g, '_');
+    return '' ===identify ? tmpname1 : identify + '_' + tmpname1;
 }
 
 /**
@@ -393,7 +503,7 @@ function generateParamComponent(nodeType, identify, param, strReadOnly) {
     var name = getParamLabel(nodeType, param);
     var id = getParamId(identify,param);
     var component = '';
-    if (param.type === 'string') {
+    if (param.type != 'enum') {
         component = '<div class="mT15 form-group row-content" style="margin-left:0px;">'
                 + '<label class="col-sm-6 control-label labelstyle">'
                 + '<span>' + name + '</span>' + generateRequiredLabel(param)
@@ -411,7 +521,7 @@ function generateParamComponent(nodeType, identify, param, strReadOnly) {
         component = '<div class="form-group row-content" style="margin-left:0px;margin-bottom:5px;">'
                 + '<label class="col-sm-6 control-label labelstyle">'
                 + '<span>' + name + '</span>'
-                + '<span class="required">*</span>'
+                + generateRequiredLabel(param)
                 + '</label>'
                 + '<div class="col-sm-6">'
                 + '<select class="form-control" style ="padding-top: 0px;padding-bottom: 0px;"'
@@ -789,7 +899,7 @@ function scaleServiceInstance(nsInstanceId, scaleType, aspectId, numberOfSteps,
             }
         ]
     };
-    var nfvoUri = '/openoapi/nslcm/1.0/ns/' + nsInstanceId + '/scale';
+    var nfvoUri = '/openoapi/nslcm/v1/ns/' + nsInstanceId + '/scale';
     $.when(
         $.ajax({
             type: "POST",
diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js b/lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js
index 053ee41d..138c6edf 100644
--- a/lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js
+++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js
@@ -111,13 +111,13 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
                 controller : "inputDataCtrl"
             })
             .state("home.lcTabs.detailInfo.nfvoDetail", {
-                url : "/nfvoDetailInfo",
+                url : "/nfvoDetailInfo/:segmentId",
                 templateUrl: "templates/nfvoDetail.html",
                 controller: "nfvoDetailCtrl"
             })
 
             .state("home.lcTabs.detailInfo.vpnManager", {
-                url : "/vpnManager",
+                url : "/vpnManager/:segmentId",
                 templateUrl : "templates/vpnManager.html",
                 controller : "vpnManagerCtrl"
             })
@@ -128,9 +128,35 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
             })
             .state("home.lcTabs.detailInfo.vpnManager.underlayVPN", {
                 url: "/underlayVPN",
-                templateUrl : "templates/underlayVPN.html",
+                templateUrl : "templates/underlayVPN_L3.html",
                 controller : "underlayVPNCtrl"
             })
+
+            .state("home.lcTabs.detailInfo.vpnManager.overlayVPN.overlayTabs", {
+                url: "/overlayTabs/:overlayId",
+                templateUrl : "templates/overlayTabs.html",
+                controller : "overlayTabsCtrl"
+            })
+            .state("home.lcTabs.detailInfo.vpnManager.overlayVPN.overlayTabs.vpnConnections", {
+                url: "/vpnConnections",
+                templateUrl : "templates/vpnConnections.html",
+                controller : "vpnConnectionsCtrl"
+            })
+            .state("home.lcTabs.detailInfo.vpnManager.overlayVPN.overlayTabs.vpnGateway", {
+                url: "/vpnGateway",
+                templateUrl : "templates/vpnGateway.html",
+                controller : "vpnGatewayCtrl"
+            })
+            .state("home.lcTabs.detailInfo.vpnManager.overlayVPN.overlayTabs.siteList", {
+                url: "/siteList",
+                templateUrl : "templates/siteList.html",
+                controller : "siteListCtrl"
+            })
+            .state("home.lcTabs.detailInfo.vpnManager.overlayVPN.overlayTabs.vpcList", {
+                url: "/vpcList",
+                templateUrl : "templates/vpcList.html",
+                controller : "vpcListCtrl"
+            })
         /*modalStateProvider.state("home.lcTabs1", {
             url: '/lcTabs',
             templateUrl: 'templates/lctabs.html'
@@ -149,10 +175,10 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
             });
             if(!DataService.getTableDataLoaded()) {
                 DataService.loadGetServiceData()
-                    .then(function (data) {
-                        if (data) {
-                            $scope.tableData = data.data;
-                            var tableData = data.data;
+                    .then(function (response) {
+                        if (response.data) {
+                            $scope.tableData = response.data;
+                            var tableData = response.data;
                             loadTableData();
                             //$timeout(loadTableData, 0);
                         }
@@ -532,39 +558,65 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
 
     })
 
-    .controller('detailInfoCtrl', function($scope, $stateParams, $compile, DataService) {
+    .controller('detailInfoCtrl', function($scope, $stateParams, $compile, DataService, $log) {
         console.log("detailInfoCtrl --> $stateParams.id:: " + $stateParams.id);
         //$scope.currentId = $stateParams.id;
-        $scope.rightPanelHeader = "VPN Manager";
-
-        var jsonData = DataService.loadServiceDetails($stateParams.id);
-        $(".accordion").html("");
-        for (var i = 0; i < jsonData.length; i++) {
-            //console.log("jsonData Name: " + jsonData[i].name);
-            if (jsonData[i].name == "sdno") {
-                //$("#sdnoLink").text(jsonData[i].name.toUpperCase());
-                //console.log("Adding Accordian to SDNO");
-                $(".accordion").append($compile(addAccordionData("sdno", jsonData[i].name.toUpperCase(), $stateParams.id))($scope));
-            }
-            else if (jsonData[i].name == "gso") {
-                //console.log("Adding Accordian to GSO");
-                $(".accordion").append($compile(addAccordionData("gso", jsonData[i].name.toUpperCase(), $stateParams.id))($scope));
-            }
-            else if (jsonData[i].name == "nfvo") {
-                //console.log("Adding Accordian to NFVO");
-                $(".accordion").append($compile(addAccordionData("nfvo", jsonData[i].name.toUpperCase(), $stateParams.id))($scope));
-            }
-            else {
 
+        var rowData = DataService.getSavedLCData($stateParams.id);
+        var jsonData =[];
+        if(rowData.serviceType === "SDNO"){
+            $scope.rightPanelHeader = "SDNO VPN Manager";
+            jsonData[0] = {"id": $stateParams.id, "name": rowData.serviceType};
+            inializeAccordion(jsonData);
+        }
+        else if(rowData.serviceType === "NFVO"){
+            //TODO - NFVO Pages should be loaded here
+            $scope.rightPanelHeader = "NFVO VPN Manager";
+            jsonData[0] = {"id": $stateParams.id, "name": rowData.serviceType};
+            inializeAccordion(jsonData);
+        }
+        else{
+            DataService.loadServiceTopoSequence($stateParams.id)
+                .then(function (response) {
+                    console.log("Data Param Template :: ");
+                    $log.info(response);
+                    inializeAccordion(response);
+                }, function (reason) {
+                    $scope.error = "Error ! " + reason;
+                });
+        }
+
+        function inializeAccordion(jsonData) {
+            $(".accordion").html("");
+            for (var i = 0; i < jsonData.length; i++) {
+                //console.log("jsonData Name: " + jsonData[i].name);
+                if (jsonData[i].name == "SDNO") {
+                    //$("#sdnoLink").text(jsonData[i].name.toUpperCase());
+                    //console.log("Adding Accordian to SDNO");
+                    $(".accordion").append($compile(addAccordionData("sdno", jsonData[i].name.toUpperCase(), jsonData[i].id))($scope));
+                }
+                else if (jsonData[i].name == "NFVO") {
+                    //console.log("Adding Accordian to NFVO");
+                    $(".accordion").append($compile(addAccordionData("nfvo", jsonData[i].name.toUpperCase(), jsonData[i].id))($scope));
+                }
+                else {
+
+                }
             }
         }
 
+
         function addAccordionData(type, text, id) {
             console.log("id:"+id);
             var content = '';
             content += '<div class="panel panel-default"><div class="panel-heading">';
             content += '<h6 class="panel-title">';
-            content += '<a style="text-decoration:none;" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne_'+type+'" ui-sref=".vpnManager" ui-sref-active="link_active_DetailInfo" href="#/home/lcTabs/'+id+'/detailInfo/vpnManager">';
+            if(type == "sdno") {
+                content += '<a style="text-decoration:none;" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne_' + type + '" ui-sref=".vpnManager({segmentId: \'' + id + '\'})" ui-sref-active="link_active_DetailInfo" href="#/home/lcTabs/' + id + '/detailInfo/vpnManager">';
+            }
+            else if(type == "nfvo") {
+                content += '<a style="text-decoration:none;" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne_' + type + '" ui-sref=".nfvoDetail({segmentId: \'' + id + '\'})" ui-sref-active="link_active_DetailInfo" href="#/home/lcTabs/' + id + '/detailInfo/nfvoDetailInfo">';
+            }
             content += '<span id="sdnoLink">'+text+'</span></a>';
             content += '</h6></div>';
             if(type == "sdno") {
@@ -620,14 +672,17 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
 
     /*-------------------------------------------------------------------------------OverlayVPN---------------------------------------------------------------------*/
 
-    .controller("overlayVPNCtrl", function($scope, $rootScope, $compile, DataService, NgTableParams){
+    .controller("overlayVPNCtrl", function($scope, $rootScope, $stateParams, $compile, DataService, NgTableParams){
         $scope.message = "Overlay VPN";
+        console.log("Service Id: "+ $stateParams.id);
+        console.log("Segment Id: "+ $stateParams.segmentId);
 
         $scope.init = function() {
             //console.log("Overlay VPN... ng-init + " +  $rootScope.lcmModelTemplate);
-            DataService.getOverlayData()
+            DataService.getOverlayData($stateParams.segmentId)
                 .then(function(data){
-                    $scope.overlayData = data.overlayData;
+                    $scope.overlayData = [];
+                    $scope.overlayData[0] = data;
                     console.log("Data: ");
                     loadButtons();
                 }, function(reason){
@@ -643,7 +698,7 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
             var deletehtml = Mustache.to_html(def_button_tpl, delete_data);
             $('div.overlayAction').html($compile(deletehtml)($scope));*/
 
-            $scope.tableParams = new NgTableParams({count: 5, sorting: {id: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}
+            $scope.tableParams = new NgTableParams({count: 3, sorting: {id: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}
             }, { counts:[], dataset: $scope.overlayData});
 
             $scope.checkboxes = { 'checked': false, items: {} };
@@ -663,18 +718,28 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
                 $scope.checkboxes.items[user.id]
             });
         };
+
+        $scope.rowHighilited=function(row)
+        {
+            $scope.selectedRow = row;
+        }
+
     })
 
     /*-------------------------------------------------------------------------------UnderlayVPN---------------------------------------------------------------------*/
 
-    .controller("underlayVPNCtrl", function($scope, $rootScope, $compile, DataService, NgTableParams){
+    .controller("underlayVPNCtrl", function($scope, $rootScope, $stateParams, $compile, DataService, NgTableParams){
         $scope.message = "Underlay VPN";
+        console.log("Service Id: "+ $stateParams.id);
+        console.log("Segment Id: "+ $stateParams.segmentId);
+        $scope.tpTableShowing = false;
 
         $scope.init = function() {
             //console.log("Underlay VPN... ng-init + " +  $rootScope.lcmModelTemplate);
-            DataService.getUnderlayData()
-                .then(function(data){
-                    $scope.underlayVPN = data.underlayVPN;
+            DataService.getUnderlayData($stateParams.segmentId)
+                .then(function(response){
+                    $scope.underlayVPN = [];
+                    $scope.underlayVPN[0] = response;
                     console.log("Data: ");
                     loadButtons();
                 }, function(reason){
@@ -690,7 +755,7 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
             $('div.underlayAction').html($compile(deletehtml)($scope));*/
 
             $scope.tableParams = new NgTableParams({count: 5, sorting: {id: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}
-            }, { counts:[5, 10], dataset: $scope.underlayVPN.underlayData});
+            }, { counts:[5, 10], dataset: $scope.underlayVPN});
 
             $scope.checkboxes = { 'checked': false, items: {} };
 
@@ -703,8 +768,8 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
                 });
             });
 
-            $scope.tableParams_tpDetails = new NgTableParams({count: 5, sorting: {id: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}
-            }, { counts:[5, 10], dataset: $scope.underlayVPN.tp_details});
+            /*$scope.tableParams_tpDetails = new NgTableParams({count: 5, sorting: {id: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}
+            }, { counts:[5, 10], dataset: $scope.underlayVPN.tp_details});*/
         }
         $scope.checkAll = function() {
             console.log("Checked ..");
@@ -712,11 +777,27 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
                 $scope.checkboxes.items[data.id]
             });
         };
+
+        $scope.loadTPLinkData = function(id, row){
+            $scope.selectedRow = row;
+            $scope.tpTableShowing = true;
+            console.log("Underlay table row click");
+            var tp_detData = DataService.getTPLinkData();
+            $scope.tableParams_tpDetails = new NgTableParams({count: 5, sorting: {id: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}
+            }, { counts:[5, 10], dataset: tp_detData});
+        }
+
+        $scope.rowHighilited=function(row)
+        {
+            $scope.selectedRow = row;
+        }
+
     })
 
     .controller('inputDataCtrl', function($scope, $stateParams, $log, DataService) {
         console.log("inputDataCtrl --> $stateParams.id:: " + $stateParams.id);
-        $scope.inputData = DataService.getSavedLCData($stateParams.id);
+        var rowData = DataService.getSavedLCData($stateParams.id);
+        $scope.inputData = rowData.inputParameters;
         $log.info($scope.inputData);
         $("div.inputDataElements").html("");
         $("div.inputDataElements").append(convertInputsToUI('', 'show', $scope.inputData));
@@ -725,18 +806,21 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
 
     .controller('nfvoDetailCtrl', function($scope, $stateParams, $compile, DataService) {
         console.log("nfvoDetailCtrl --> $stateParams.id:: " + $stateParams.id);
+        console.log("nfvoDetailCtrl --> $stateParams.segmentId:: " + $stateParams.segmentId);
         //$scope.currentId = $stateParams.id;
 
-        var jsonData = DataService.loadNfvoServiceDetails($stateParams.id);
         var table_tpl = $(lcmModelTemplate).filter('#table').html();
-        var vnfData = fetchDataForVnf(jsonData);
-        $('#vnfInfoTable').html(Mustache.to_html(table_tpl, vnfData));
+        var processFun = function (jsonData) {
+            var vnfData = fetchDataForVnf(jsonData);
+            $('#vnfInfoTable').html(Mustache.to_html(table_tpl, vnfData));
 
-        var vlData = fetchDataForVl(jsonData);
-        $('#vlInfoTable').html(Mustache.to_html(table_tpl, vlData));
+            var vlData = fetchDataForVl(jsonData);
+            $('#vlInfoTable').html(Mustache.to_html(table_tpl, vlData));
 
-        var vnffgData = fetchDataForVnffg(jsonData);
-        $('#vnffgInfoTable').html(Mustache.to_html(table_tpl, vnffgData));
+            var vnffgData = fetchDataForVnffg(jsonData);
+            $('#vnffgInfoTable').html(Mustache.to_html(table_tpl, vnffgData));
+        };
+        DataService.loadNfvoServiceDetails($stateParams.segmentId, processFun);
 
         function fetchDataForVnf(jsonData) {
             var header = ["Vnf instance Name"];
@@ -764,6 +848,46 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
 
     })
 
+    .controller('overlayTabsCtrl', function($scope, $state) {
+        $state.go('home.lcTabs.detailInfo.vpnManager.overlayVPN.overlayTabs.vpnConnections');
+    })
+
+    .controller('vpnConnectionsCtrl', function($scope, $stateParams, NgTableParams, DataService) {
+        $scope.message = "VPN Connections";
+        var rowData = DataService.getOverlayVPNConnData($stateParams.overlayId, "vpnConnections");
+        $scope.vpnConnTable = new NgTableParams({count: 5, sorting: {id: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}
+        }, { counts:[5, 10], dataset: rowData});
+    })
+
+    .controller('vpnGatewayCtrl', function($scope, $stateParams, NgTableParams, DataService) {
+        $scope.message = "VPN Gateway";
+        var rowData = DataService.getOverlayVPNConnData($stateParams.overlayId, "vpnGateways");
+        $scope.vpnGateTable = new NgTableParams({count: 5, sorting: {id: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}
+        }, { counts:[5, 10], dataset: rowData});
+    })
+
+    .controller('siteListCtrl', function($scope, $stateParams, NgTableParams, DataService) {
+        $scope.message = "Site List";
+        //var rowData = DataService.getSiteListData();
+        DataService.getSiteListData()
+            .then(function (response) {
+                $scope.siteListData = response.sites;
+                $scope.siteTable = new NgTableParams({count: 5, sorting: {id: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}
+                }, { counts:[5, 10], dataset: $scope.siteListData});
+            }, function (reason) {
+                $scope.message = "Error is :" + JSON.stringify(reason);
+            });
+    })
+
+    .controller('vpcListCtrl', function($scope, $stateParams, NgTableParams, DataService) {
+        $scope.message = "VPN List";
+        var rowData = DataService.getVpcListData();
+        $scope.vpcListTable = new NgTableParams({count: 5, sorting: {id: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}
+        }, { counts:[5, 10], dataset: rowData});
+    })
+
+
+
 
 
 var lcmModelTemplate = "";
diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/style.css b/lifecyclemgr/src/main/webapp/lifecyclemgr/style.css
new file mode 100644
index 00000000..b0ce4f62
--- /dev/null
+++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/style.css
@@ -0,0 +1,16 @@
+/* Copyright 2017, 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.
+ */
+ 
+
diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/overlayTabs.html b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/overlayTabs.html
new file mode 100644
index 00000000..c2e04eb5
--- /dev/null
+++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/overlayTabs.html
@@ -0,0 +1,36 @@
+<!--
+
+    Copyright 2017, 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.
+
+-->
+
+<!--<div id="lctabArea" ng-init="init()"></div>-->
+
+
+<div id="overlaytabArea">
+
+    <ul class="nav nav-tabs">
+        <li class="col-md-3 col-sm-3 col-xs-3 nopadding vpnConnections"><a ui-sref=".vpnConnections" ui-sref-active="link_active" class="nomargin">VPN Connections</a></li>
+        <!--<li class="col-md-4 col-sm-4 col-xs-4 nopadding topo"><a  ui-sref=".topo" ui-sref-active="link_active" class="nomargin" >Topo</a></li>-->
+        <li class="col-md-3 col-sm-3 col-xs-3 nopadding vpnGateway"><a  ui-sref=".vpnGateway" ui-sref-active="link_active" class="nomargin" >VPN Gateway</a></li>
+        <li class="col-md-3 col-sm-3 col-xs-3 nopadding siteList"><a  ui-sref=".siteList" ui-sref-active="link_active" class="nomargin" >Site List</a></li>
+        <li class="col-md-3 col-sm-3 col-xs-3 nopadding vpcList"><a  ui-sref=".vpcList" ui-sref-active="link_active" class="nomargin" >VPC List</a></li>
+    </ul>
+
+    <div class="tab-content"></div>
+    <ui-view></ui-view>
+
+
+</div>
diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/overlayVPN.html b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/overlayVPN.html
index 16719833..d7ca3ba4 100644
--- a/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/overlayVPN.html
+++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/overlayVPN.html
@@ -18,46 +18,44 @@
 
 <div class="headerTitle">{{message}}</div>
 <br>
-
+<div class="col-md-12 col-sm-12 col-lg-12">
 <div class="overlayAction" ng-init="init()">
     <!--<button ng-click="showAddModal()" class="btnDefault pull-left">Add</button>-->
     <!--<button ng-click="deleteData()" class="btnDefault pull-left prvdel">Delete Selected</button>-->
 </div>
 <br>
 <div class="panel panel-default">
-<table ng-table="tableParams" class="table table table-striped table-hover table-bordered lctable" show-filter="true">
-    <tr ng-repeat="overlayData in $data">
+<table id="overlayTable" ng-table="tableParams" class="table table table-striped table-hover table-bordered lctable"  show-filter="true">
+    <tr ng-repeat="overlayData in $data" ui-sref=".overlayTabs({overlayId: overlayData.id})" ui-sref-active="selected-row">
         <!--<td header="'ng-table/headers/checkbox.html'">
             <input type="checkbox" ng-model="checkboxes.items[overlayData.id]" />
         </td>-->
+        <td title="'Id'" filter="{ id: 'text'}" sortable="'id'">
+            {{overlayData.id}}
+        </td>
         <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
             {{overlayData.name}}
         </td>
         <td title="'Description'" filter="{ desc: 'text'}" sortable="'desc'">
-            {{overlayData.desc}}
-        </td>
-        <td title="'Thin CPE'" filter="{ thinCPE: 'text'}" sortable="'thinCPE'">
-            {{overlayData.thinCPE}}
-        </td>
-        <td title="'Port : Vlan ID'" filter="{ portVlan: 'number'}" sortable="'portVlan'">
-            {{overlayData.portVlan}}
-        </td>
-        <td title="'DC Name'" filter="{ dcName: 'text'}" sortable="'dcName'">
-            {{overlayData.dcName}}
+            {{overlayData.description}}
         </td>
-        <td title="'VPC'" filter="{ vpc: 'text'}" sortable="'vpc'">
-            {{overlayData.vpc}}
+        <td title="'Action State'" filter="{ actionState: 'text'}" sortable="'actionState'">
+            {{overlayData.actionState}}
         </td>
-        <td title="'VPC CIDR'" filter="{ vpcCIDR: 'text'}" sortable="'vpcCIDR'">
-            {{overlayData.vpcCIDR}}
+        <td title="'Port : VPN Descriptor'" filter="{ vpnDescriptor: 'number'}" sortable="'vpnDescriptor'">
+            {{overlayData.vpnDescriptor}}
         </td>
-        <td title="'Action'">
-            <!--<span class="pull-right glyphicon glyphicon-edit" ng-click="editData(overlayData.id)" style="cursor: pointer;margin: 0 5px"></span>-->
+
+        <!--<td title="'Action'">
+            &lt;!&ndash;<span class="pull-right glyphicon glyphicon-edit" ng-click="editData(overlayData.id)" style="cursor: pointer;margin: 0 5px"></span>&ndash;&gt;
            <span  ng-click="deleteIndividualData(overlayData.id)" style="cursor: pointer;margin: 0 5px"><img src="/openoui/framework/browser/thirdparty/images/delete.png" height="15" align="middle"/></span>
-        </td>
+        </td>-->
+        
     </tr>
 </table>
 </div>
+<ui-view></ui-view>
+</div>
 
 <script type="text/ng-template" id="ng-table/headers/checkbox.html">
     <input type="checkbox" ng-model="checkboxes.checked" name="filter-checkbox" value="" />
diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/siteList.html b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/siteList.html
new file mode 100644
index 00000000..0a4339b9
--- /dev/null
+++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/siteList.html
@@ -0,0 +1,45 @@
+<!--
+
+    Copyright 2017, 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.
+
+-->
+
+<div class="headerTitle">{{message}}</div>
+<br>
+<br>
+<div class="panel panel-default">
+    <table ng-table="siteTable" class="table table table-striped table-hover table-bordered lctable "  show-filter="true">
+        <tr ng-repeat="siteData in $data">
+            <!--<td header="'ng-table/headers/checkbox.html'">
+                <input type="checkbox" ng-model="checkboxes.items[overlayData.id]" />
+            </td>-->
+            <td title="'Id'" filter="{ id: 'text'}" sortable="'id'">
+                {{siteData.id}}
+            </td>
+            <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
+                {{siteData.name}}
+            </td>
+
+            <!--<td title="'Action'">
+                &lt;!&ndash;<span class="pull-right glyphicon glyphicon-edit" ng-click="editData(overlayData.id)" style="cursor: pointer;margin: 0 5px"></span>&ndash;&gt;
+               <span  ng-click="deleteIndividualData(overlayData.id)" style="cursor: pointer;margin: 0 5px"><img src="/openoui/framework/browser/thirdparty/images/delete.png" height="15" align="middle"/></span>
+            </td>-->
+        </tr>
+    </table>
+</div>
+
+<script type="text/ng-template" id="ng-table/headers/checkbox.html">
+    <input type="checkbox" ng-model="checkboxes.checked" name="filter-checkbox" value="" />
+</script>
diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/underlayVPN_L2.html b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/underlayVPN_L2.html
new file mode 100644
index 00000000..4b8eedb5
--- /dev/null
+++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/underlayVPN_L2.html
@@ -0,0 +1,78 @@
+<!--
+
+    Copyright 2017, 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.
+
+-->
+
+<div class="headerTitle">{{message}}</div>
+<br>
+
+<div class="underlayAction" ng-init="init()">
+    <!--<button ng-click="showAddModal()" class="btnDefault pull-left">Add</button>-->
+    <!--<button ng-click="deleteData()" class="btnDefault pull-left prvdel">Delete Selected</button>-->
+</div>
+<br>
+<div class="panel panel-default">
+    <table id="underlayTable" ng-table="tableParams" class="table table table-striped table-hover table-bordered lctable"   show-filter="true">
+        <tr ng-repeat="underlayData in $data" ng-class="{rowSelected:$index==selectedRow}" ng-click="loadTPLinkData(underlayData.id, $index)">
+            <!--<td header="'ng-table/headers/checkbox.html'">
+                <input type="checkbox" ng-model="checkboxes.items[underlayData.id]" />
+            </td>-->
+            <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
+                {{underlayData.name}}
+            </td>
+            <td title="'State'" filter="{ thinCPE: 'text'}" sortable="'thinCPE'">
+                {{underlayData.thinCPE}}
+            </td>
+            <td title="'Description'" filter="{ desc: 'text'}" sortable="'desc'">
+                {{underlayData.desc}}
+            </td>
+            <td title="'Action'">
+                <!--<span class="pull-right glyphicon glyphicon-edit" ng-click="editData(underlayData.id)" style="cursor: pointer;margin: 0 5px"></span>-->
+                <span ng-click="deleteIndividualData(underlayData.id)" style="cursor: pointer;margin: 0 5px"><img src="/openoui/framework/browser/thirdparty/images/delete.png" height="15" align="middle"/></span>
+            </td>
+        </tr>
+    </table>
+</div>
+
+<script type="text/ng-template" id="ng-table/headers/checkbox.html">
+    <input type="checkbox" ng-model="checkboxes.checked" name="filter-checkbox" value="" />
+</script>
+
+<br>
+<div id="tpLinkBlock" ng-show="tpTableShowing">
+    <div class="headerTitle">TP Details</div>
+    <div class="panel panel-default">
+        <table ng-table="tableParams_tpDetails" class="table table table-striped table-hover table-bordered lctable" show-filter="true">
+            <tr ng-repeat="tpDetailsData in $data" ng-class="{rowSelected:$index==selectedRow}" ng-click="rowHighilited($index)">
+                <td title="'TP Name'" filter="{ tp_name: 'text'}" sortable="'tp_name'">
+                    {{tpDetailsData.tp_name}}
+                </td>
+                <td title="'PE Name'" filter="{ pe_name: 'text'}" sortable="'pe_name'">
+                    {{tpDetailsData.pe_name}}
+                </td>
+                <td title="'VLAN ID'" filter="{ vlanId: 'text'}" sortable="'vlanId'">
+                    {{tpDetailsData.vlanId}}
+                </td>
+                <td title="'Site CIDR'" filter="{ site_cidr: 'text'}" sortable="'site_cidr'">
+                    {{tpDetailsData.site_cidr}}
+                </td>
+                <td title="'IP'" filter="{ ip: 'text'}" sortable="'ip'">
+                    {{tpDetailsData.ip}}
+                </td>
+            </tr>
+        </table>
+    </div>
+</div>
+\ No newline at end of file
diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/underlayVPN_L3.html b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/underlayVPN_L3.html
new file mode 100644
index 00000000..230e0dfe
--- /dev/null
+++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/underlayVPN_L3.html
@@ -0,0 +1,72 @@
+<!--
+
+    Copyright 2017, 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.
+
+-->
+
+<div class="headerTitle">{{message}}</div>
+<br>
+
+<div class="underlayAction" ng-init="init()">
+    <!--<button ng-click="showAddModal()" class="btnDefault pull-left">Add</button>-->
+    <!--<button ng-click="deleteData()" class="btnDefault pull-left prvdel">Delete Selected</button>-->
+</div>
+<br>
+<div class="panel panel-default">
+<table id="underlayTable" ng-table="tableParams" class="table table table-striped table-hover table-bordered lctable"   show-filter="true">
+    <tr ng-repeat="underlayData in $data" ng-class="{rowSelected:$index==selectedRow}" ng-click="loadTPLinkData(underlayData.id, $index)">
+        <!--<td header="'ng-table/headers/checkbox.html'">
+            <input type="checkbox" ng-model="checkboxes.items[underlayData.id]" />
+        </td>-->
+        <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
+            {{underlayData.name}}
+        </td>
+        <td title="'Status'" filter="{ operStatus: 'text'}" sortable="'operStatus'">
+            {{underlayData.operStatus}}
+        </td>
+        <td title="'Description'" filter="{ desc: 'text'}" sortable="'desc'">
+            {{underlayData.desc}}
+        </td>
+        <td title="'Action'">
+            <!--<span class="pull-right glyphicon glyphicon-edit" ng-click="editData(underlayData.id)" style="cursor: pointer;margin: 0 5px"></span>-->
+        <span ng-click="deleteIndividualData(underlayData.id)" style="cursor: pointer;margin: 0 5px"><img src="/openoui/framework/browser/thirdparty/images/delete.png" height="15" align="middle"/></span>
+        </td>
+    </tr>
+</table>
+</div>
+
+<script type="text/ng-template" id="ng-table/headers/checkbox.html">
+    <input type="checkbox" ng-model="checkboxes.checked" name="filter-checkbox" value="" />
+</script>
+
+<br>
+<div id="tpLinkBlock" ng-show="tpTableShowing">
+    <div class="headerTitle">TP Details</div>
+    <div class="panel panel-default">
+    <table ng-table="tableParams_tpDetails" class="table table table-striped table-hover table-bordered lctable" show-filter="true">
+        <tr ng-repeat="tpDetailsData in $data" ng-class="{rowSelected:$index==selectedRow}" ng-click="rowHighilited($index)">
+            <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
+                {{tpDetailsData.name}}
+            </td>
+            <td title="'Status'" filter="{ operStatus: 'text'}" sortable="'operStatus'">
+                {{tpDetailsData.operStatus}}
+            </td>
+            <td title="'Type'" filter="{ type: 'text'}" sortable="'type'">
+                {{tpDetailsData.type}}
+            </td>
+        </tr>
+    </table>
+    </div>
+</div>
+\ No newline at end of file
diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/vpcList.html b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/vpcList.html
new file mode 100644
index 00000000..1412a4c8
--- /dev/null
+++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/vpcList.html
@@ -0,0 +1,45 @@
+<!--
+
+    Copyright 2017, 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.
+
+-->
+
+<div class="headerTitle">{{message}}</div>
+<br>
+<br>
+<div class="panel panel-default">
+    <table ng-table="vpcListTable" class="table table table-striped table-hover table-bordered lctable"  show-filter="true">
+        <tr ng-repeat="vpcListData in $data">
+            <!--<td header="'ng-table/headers/checkbox.html'">
+                <input type="checkbox" ng-model="checkboxes.items[overlayData.id]" />
+            </td>-->
+            <td title="'Id'" filter="{ id: 'text'}" sortable="'id'">
+                {{vpcListData.id}}
+            </td>
+            <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
+                {{vpcListData.name}}
+            </td>
+
+            <!--<td title="'Action'">
+                &lt;!&ndash;<span class="pull-right glyphicon glyphicon-edit" ng-click="editData(overlayData.id)" style="cursor: pointer;margin: 0 5px"></span>&ndash;&gt;
+               <span  ng-click="deleteIndividualData(overlayData.id)" style="cursor: pointer;margin: 0 5px"><img src="/openoui/framework/browser/thirdparty/images/delete.png" height="15" align="middle"/></span>
+            </td>-->
+        </tr>
+    </table>
+</div>
+
+<script type="text/ng-template" id="ng-table/headers/checkbox.html">
+    <input type="checkbox" ng-model="checkboxes.checked" name="filter-checkbox" value="" />
+</script>
diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/vpnConnections.html b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/vpnConnections.html
new file mode 100644
index 00000000..f57c0735
--- /dev/null
+++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/vpnConnections.html
@@ -0,0 +1,60 @@
+<!--
+
+    Copyright 2017, 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.
+
+-->
+
+<div class="headerTitle">{{message}}</div>
+<br>
+<br>
+<div class="panel panel-default">
+    <table ng-table="vpnConnTable" class="table table table-striped table-hover table-bordered lctable"  show-filter="true">
+        <tr ng-repeat="vpnConnData in $data">
+            <!--<td header="'ng-table/headers/checkbox.html'">
+                <input type="checkbox" ng-model="checkboxes.items[overlayData.id]" />
+            </td>-->
+            <td title="'Id'" filter="{ id: 'text'}" sortable="'id'">
+                {{vpnConnData.id}}
+            </td>
+            <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
+                {{vpnConnData.name}}
+            </td>
+            <td title="'Description'" filter="{ description: 'text'}" sortable="'description'">
+                {{vpnConnData.description}}
+            </td>
+            <td title="'Port : Deploy Status'" filter="{ deployStatus: 'number'}" sortable="'deployStatus'">
+                {{vpnConnData.deployStatus}}
+            </td>
+            <td title="'Action State'" filter="{ actionState: 'text'}" sortable="'actionState'">
+                {{vpnConnData.actionState}}
+            </td>
+            <td title="'Port : Running Status'" filter="{ runningStatus: 'number'}" sortable="'runningStatus'">
+                {{vpnConnData.runningStatus}}
+            </td>
+            <td title="'Port : Route Type'" filter="{ routeType: 'number'}" sortable="'routeType'">
+                {{vpnConnData.routeType}}
+            </td>
+
+            <!--<td title="'Action'">
+                &lt;!&ndash;<span class="pull-right glyphicon glyphicon-edit" ng-click="editData(overlayData.id)" style="cursor: pointer;margin: 0 5px"></span>&ndash;&gt;
+               <span  ng-click="deleteIndividualData(overlayData.id)" style="cursor: pointer;margin: 0 5px"><img src="/openoui/framework/browser/thirdparty/images/delete.png" height="15" align="middle"/></span>
+            </td>-->
+        </tr>
+    </table>
+</div>
+
+<script type="text/ng-template" id="ng-table/headers/checkbox.html">
+    <input type="checkbox" ng-model="checkboxes.checked" name="filter-checkbox" value="" />
+</script>
diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/vpnGateway.html b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/vpnGateway.html
new file mode 100644
index 00000000..44d4c8d3
--- /dev/null
+++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/vpnGateway.html
@@ -0,0 +1,58 @@
+<!--
+
+    Copyright 2017, 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.
+
+-->
+
+<div class="headerTitle">{{message}}</div>
+<br>
+<br>
+<div class="panel panel-default">
+    <table ng-table="vpnGateTable" class="table table table-striped table-hover table-bordered lctable"  show-filter="true">
+        <tr ng-repeat="vpnGateData in $data">
+            <!--<td header="'ng-table/headers/checkbox.html'">
+                <input type="checkbox" ng-model="checkboxes.items[overlayData.id]" />
+            </td>-->
+            <td title="'Id'" filter="{ id: 'text'}" sortable="'id'">
+                {{vpnGateData.id}}
+            </td>
+            <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
+                {{vpnGateData.name}}
+            </td>
+            <td title="'Description'" filter="{ description: 'text'}" sortable="'description'">
+                {{vpnGateData.description}}
+            </td>
+
+            <td title="'Action State'" filter="{ actionState: 'text'}" sortable="'actionState'">
+                {{vpnGateData.actionState}}
+            </td>
+
+            <td title="'VPC Id'" filter="{ vpcid: 'text'}" sortable="'vpcid'">
+                {{vpnGateData.vpcId}}
+            </td>
+
+
+
+            <!--<td title="'Action'">
+                &lt;!&ndash;<span class="pull-right glyphicon glyphicon-edit" ng-click="editData(overlayData.id)" style="cursor: pointer;margin: 0 5px"></span>&ndash;&gt;
+               <span  ng-click="deleteIndividualData(overlayData.id)" style="cursor: pointer;margin: 0 5px"><img src="/openoui/framework/browser/thirdparty/images/delete.png" height="15" align="middle"/></span>
+            </td>-->
+        </tr>
+    </table>
+</div>
+
+<script type="text/ng-template" id="ng-table/headers/checkbox.html">
+    <input type="checkbox" ng-model="checkboxes.checked" name="filter-checkbox" value="" />
+</script>
diff --git a/resmgr/src/main/webapp/resmgr/index.html b/resmgr/src/main/webapp/resmgr/index.html
index 36a6b17b..9572b117 100644
--- a/resmgr/src/main/webapp/resmgr/index.html
+++ b/resmgr/src/main/webapp/resmgr/index.html
@@ -1,4 +1,4 @@
-<!--/* Copyright 2017, Huawei Technologies Co., Ltd.
+<!-- Copyright 2017, 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.
@@ -11,7 +11,7 @@
 * 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.
-*/-->
+-->
 
 
 <!DOCTYPE html>
diff --git a/resmgr/src/main/webapp/resmgr/js/app.js b/resmgr/src/main/webapp/resmgr/js/app.js
index d930cbb1..542b0421 100644
--- a/resmgr/src/main/webapp/resmgr/js/app.js
+++ b/resmgr/src/main/webapp/resmgr/js/app.js
@@ -68,11 +68,13 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
                 controller : "datacenterCtrl"
             })
 
-            .state("resource.vim", {
+            /*
+			.state("resource.vim", {
                 url: "/vim",
                 templateUrl : "nfv-resmgr/vim/vim.html",
                 controller : "vimCtrl"
             })
+			*/
 
     })
 
@@ -134,9 +136,18 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
             var portName = {"ErrMsg" :     {"errmsg" : "Name is required.", "modalVar":"port.name", "errtag":"textboxErrName", "errfunc":"validatetextboxName", "required":true}};
             $('#myModal #name').append($compile(Mustache.to_html(text, portName.ErrMsg))($scope));
 
-            var portMe = {"ErrMsg" :     {"errmsg" : "ME is required.", "modalVar":"port.meID", "errtag":"textboxErrMe", "errfunc":"validatetextboxMe", "required":true}};
-            $('#myModal #meID').append($compile(Mustache.to_html(text, portMe.ErrMsg))($scope));
-
+            portDataService.getAllNEData().then(function(response) {
+                var medata = [];
+                for(var i = 0; i < response.managedElements.length; i+=1){
+                    medata[i] = {"serviceTemplateId":response.managedElements[i].id,"templateName":response.managedElements[i].name};
+                }
+                var dropdownInfo = translateToDropdownInfo(medata);
+                $("#myModal #medropdown").html(dropdownInfo);
+                console.log("Data: ");
+                $log.info(data);
+            }, function(reason) {
+                $scope.message = "Error is :" + JSON.stringify(reason);
+            });
             //var portType = {"ErrMsg" :     {"textboxErr" : "The name is required.", "modalVar":"port.type"}};
             //$('#myModal #type').append($compile(Mustache.to_html(dropDown, $scope.data.dropdowntypeData))($scope));
 
@@ -148,7 +159,7 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
 
             $('#myModal #type').append($compile(Mustache.to_html(dropDown, dropSimple_data))($scope));*/
 			
-			var dropdownResponse=[{"serviceTemplateId":"tenant_site","templateName":"portType1"},{"serviceTemplateId":"tenant_site2","templateName":"portType2"}];
+			var dropdownResponse=[{"serviceTemplateId":"ETH","templateName":"ETH"},{"serviceTemplateId":"POS","templateName":"POS"},{"serviceTemplateId":"Trunk","templateName":"Trunk"},{"serviceTemplateId":"Loopback","templateName":"Loopback"}];
 			var dropdownInfo = translateToDropdownInfo(dropdownResponse);
             document.getElementById("portdropdown").innerHTML = dropdownInfo;
 
@@ -169,7 +180,7 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
 
             $('#myModal #Edgepoint').append($compile(Mustache.to_html(dropDown, dropSimple_data))($scope));*/
 			
-			var dropdownResponse=[{"serviceTemplateId":"tenant_site","templateName":"Edgepoint1"},{"serviceTemplateId":"tenant_site2","templateName":"Edgepoint2"}];
+			var dropdownResponse=[{"serviceTemplateId":"true","templateName":"true"},{"serviceTemplateId":"false","templateName":"false"}];
 			var dropdownInfo = translateToDropdownInfo(dropdownResponse);
             document.getElementById("portEdropdown").innerHTML = dropdownInfo;
 			
@@ -189,6 +200,9 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
             var portOperatingState = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"port.operState"}};
             $('#myModal #operState').append($compile(Mustache.to_html(text, portOperatingState.ErrMsg))($scope));
 
+            var neNativeId = {"ErrMsg" :     {"errmsg" : "The nativeid required.", "modalVar":"port.nativeID"}};
+            $('#myModal #nativeId').append($compile(Mustache.to_html(text, neNativeId.ErrMsg))($scope));
+
             $scope.checkboxes = { 'checked': false, items: {} };
 
             $scope.portTableParams = new NgTableParams({count: 5, sorting: {name: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}
@@ -283,6 +297,9 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
             $scope.numericErr = false;
         }
         $scope.saveData = function(id) {
+            $scope.port.isEdgePoint = $('#portEdropdown').val();
+            $scope.port.logicalType = $('#portdropdown').val();
+            $scope.port.meID = $('#medropdown').val();
             if (!$scope.textboxErrName && !$scope.textboxErrMe) {
 				var ports ={};
 				ports.logicalTerminationPoint=$scope.port;
@@ -464,7 +481,7 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
 
             $('#myModal #type').append($compile(Mustache.to_html(dropDown, dropSimple_data))($scope));*/
 			
-			var dropdownResponse=[{"serviceTemplateId":"tenant_site","templateName":"tenant_site"},{"serviceTemplateId":"tenant_site2","templateName":"tenant_site2"}];
+			var dropdownResponse=[{"serviceTemplateId":"network_site","templateName":"network_site"},{"serviceTemplateId":"tenant_site","templateName":"tenant_site"}];
 			var dropdownInfo = translateToDropdownInfo(dropdownResponse);
             document.getElementById("sitedropdown").innerHTML = dropdownInfo;
 
@@ -523,6 +540,7 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
             $scope.textboxErrName = false;
         }
         $scope.saveData = function(id) {
+            $scope.site.type = $('#sitedropdown').val();
             if (!$scope.textboxErrName) {
 				
 
@@ -643,8 +661,8 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
         $scope.init = function() {
             locationDataService.getLocationData()
                 .then(function (data) {
-                    $scope.data = data;
-                    console.log("Data: ");
+                    $scope.data = data.locations;
+                    console.log(JSON.stringify($scope.data));
                     $log.info(data);
                     loadButtons();
                 }, function (reason) {
@@ -665,7 +683,7 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
             $('#locationAction').html($compile(addhtml)($scope));
             $('#locationAction').append($compile(deletehtml)($scope));
 
-            var modelSubmit_data = {"title":"OK", "clickAction":"saveData(loc.Id)"};
+            var modelSubmit_data = {"title":"OK", "clickAction":"saveData(loc.id)"};
             var modelSubmit_html = Mustache.to_html(def_button_tpl, modelSubmit_data);
             $('#myModal #footerBtns').html($compile(modelSubmit_html)($scope));
 
@@ -678,34 +696,34 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
             var ipv4 = $(modelTemplate).filter('#ipv4').html();
             var number = $(modelTemplate).filter('#numeric').html();
 
-            var locId = {"ErrMsg" :     {"errmsg" : "Name is required.", "modalVar":"loc.Id", "errtag":"textboxErrId", "errfunc":"validatetextboxId"}};
+            var locId = {"ErrMsg" :     {"errmsg" : "Name is required.", "modalVar":"loc.id", "errtag":"textboxErrId", "errfunc":"validatetextboxId"}};
             $('#myModal #Name').append($compile(Mustache.to_html(text, locId.ErrMsg))($scope));
 
-            var locCountry = {"ErrMsg" :     {"errmsg" : "Country is required.", "modalVar":"loc.Country", "errtag":"textboxErrCountry", "errfunc":"validatetextboxCountry","required":true}};
+            var locCountry = {"ErrMsg" :     {"errmsg" : "Country is required.", "modalVar":"loc.country", "errtag":"textboxErrCountry", "errfunc":"validatetextboxCountry","required":true}};
             $('#myModal #Country').append($compile(Mustache.to_html(text, locCountry.ErrMsg))($scope));
 
-            var locLocation = {"ErrMsg" :     {"errmsg" : "Location is required.", "modalVar":"loc.Location", "errtag":"textboxErrLocation", "errfunc":"validatetextboxLocation","required":true}};
+            var locLocation = {"ErrMsg" :     {"errmsg" : "Location is required.", "modalVar":"loc.location", "errtag":"textboxErrLocation", "errfunc":"validatetextboxLocation","required":true}};
             $('#myModal #Location').append($compile(Mustache.to_html(text, locLocation.ErrMsg))($scope));
 
-            var locDescription = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"loc.Description", "errtag":"textboxErr", "errfunc":"validatetextbox"}};
+            var locDescription = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"loc.description", "errtag":"textboxErr", "errfunc":"validatetextbox"}};
             $('#myModal #Description').append($compile(Mustache.to_html(text, locDescription.ErrMsg))($scope));
 
-            var locLatitude = {"ErrMsg" :     {"errmsg" : "Latitude is required.", "modalVar":"loc.Latitude", "errtag":"textboxErrLatitude", "errfunc":"validatetextboxLatitude", "required":true}};
+            var locLatitude = {"ErrMsg" :     {"errmsg" : "Latitude is required.", "modalVar":"loc.latitude", "errtag":"textboxErrLatitude", "errfunc":"validatetextboxLatitude", "required":true}};
             $('#myModal #Latitude').append($compile(Mustache.to_html(text, locLatitude.ErrMsg))($scope));
 
-            var locLongitude = {"ErrMsg" :     {"errmsg" : "Longitude is required.", "modalVar":"loc.Longitude", "errtag":"textboxErrLongitude", "errfunc":"validatetextboxLongitude", "required":true}};
+            var locLongitude = {"ErrMsg" :     {"errmsg" : "Longitude is required.", "modalVar":"loc.longitude", "errtag":"textboxErrLongitude", "errfunc":"validatetextboxLongitude", "required":true}};
             $('#myModal #Longitude').append($compile(Mustache.to_html(text, locLongitude.ErrMsg))($scope));
 
             $scope.checkboxes = { 'checked': false, items: {} };
 
-            $scope.neTableParams = new NgTableParams({count: 5, sorting: {Id: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}
-            }, { counts:[5, 10, 20, 50], dataset: $scope.data.locationData});
+            $scope.neTableParams = new NgTableParams({count: 5, sorting: {Id: 'asc'}    
+            }, { counts:[5, 10, 20, 50], dataset: $scope.data});
 
             $scope.$watch('checkboxes.checked', function(value) {
                 $scope.checkboxes.items = {};
                 angular.forEach($scope.neTableParams.data, function(item) {
-                    if (angular.isDefined(item.Id)) {
-                        $scope.checkboxes.items[item.Id] = value;
+                    if (angular.isDefined(item.id)) {
+                        $scope.checkboxes.items[item.id] = value;
                     }
                 });
             });
@@ -713,7 +731,7 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
         }
 
         $scope.validatetextboxCountry = function (value){
-            if($scope.loc.Country) {
+            if($scope.loc.country) {
                 $scope.textboxErrCountry = false;
             }
             else
@@ -721,7 +739,7 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
         }
 
         $scope.validatetextboxLocation = function (value){
-            if($scope.loc.Location) {
+            if($scope.loc.location) {
                 $scope.textboxErrLocation = false;
             }
             else
@@ -729,7 +747,7 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
         }
 
         $scope.validatetextboxLatitude = function (value){
-            if($scope.loc.Latitude) {
+            if($scope.loc.latitude) {
                 $scope.textboxErrLatitude = false;
             }
             else
@@ -737,7 +755,7 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
         }
 
         $scope.validatetextboxLongitude = function (value){
-            if($scope.loc.Longitude) {
+            if($scope.loc.longitude) {
                 $scope.textboxErrLongitude = false;
             }
             else
@@ -771,7 +789,7 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
             if (!$scope.textboxErrLocation && !$scope.textboxErrCountry && !$scope.textboxErrLatitude && !$scope.textboxErrLongitude) {
 				
 				var locs = {}
-					locs.location = $scope.loc
+					locs = $scope.loc
                 if(id) {
 					
 					
@@ -861,10 +879,10 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
         $scope.editData = function(id) {
             console.log("To be edited : " + id);
             var dataFound = false;
-            angular.forEach($scope.data.locationData, function(data) {
+            angular.forEach($scope.data, function(data) {
                 if(!dataFound) {
-                    if (data.Id == id) {
-                        console.log("Found : " + data.Id);
+                    if (data.id == id) {
+                        console.log("Found : " + data.id);
                         $scope.loc = data;
                         $("#myModal").modal();
                         dataFound = true;
@@ -1031,6 +1049,7 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
             $scope.numericErr = false;
         }
         $scope.saveData = function(id) {
+            $scope.link.type = $('#linkdropdown').val();
             if (!$scope.textboxErr) {
 				
 			var links ={}
@@ -1187,7 +1206,7 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
             var neVersion = {"ErrMsg" :     {"errmsg" : "The version is required.", "modalVar":"ne.version"}};  //,"errtag":"textboxErrVersion", "errfunc":"validatetextboxVersion","required":true
             $('#myModal #version').append($compile(Mustache.to_html(text, neVersion.ErrMsg))($scope));
 
-            var neNERole = {"ErrMsg" :     {"errmsg" : "The role is required.", "modalVar":"ne.role"}}; //,"errtag":"textboxErrRole", "errfunc":"validatetextboxRole","required":true
+            var neNERole = {"ErrMsg" :     {"errmsg" : "The role is required.", "modalVar":"ne.neRole"}}; //,"errtag":"textboxErrRole", "errfunc":"validatetextboxRole","required":true
             $('#myModal #nerole').append($compile(Mustache.to_html(text, neNERole.ErrMsg))($scope));
 
             var serialNumber = {"ErrMsg" :     {"errmsg" : "The serialNumber is required.", "modalVar":"ne.serialNumber"}}; //,"errtag":"textboxErrSerial", "errfunc":"validatetextboxSerial","required":true
@@ -1205,19 +1224,31 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
 
             $('#myModal #controller').append($compile(Mustache.to_html(dropDown, dropSimple_data))($scope));*/
 			
-			var dropdownResponse=[{"serviceTemplateId":"meCtrl","templateName":"mecontroller1"},{"serviceTemplateId":"meCtrl2","templateName":"mecontroller"}];
+			/*var dropdownResponse=[{"serviceTemplateId":"meCtrl","templateName":"mecontroller1"},{"serviceTemplateId":"meCtrl2","templateName":"mecontroller"}];
 			var dropdownInfo = translateToDropdownInfo(dropdownResponse);
-            document.getElementById("medropdown").innerHTML = dropdownInfo;
+            document.getElementById("medropdown").innerHTML = dropdownInfo;*/
+
+
+            neDataService.getNECtrlDDList()
+                .then(function (response) {
+                    $scope.ctrlList = response;
+                    var dropdownInfo = translateCtrlIDToDropdownInfo($scope.ctrlList);
+                    $("#myModal #medropdown").html(dropdownInfo);
+                    console.log("Data: ");
+                    $log.info(data);
+                }, function (reason) {
+                    $scope.message = "Error is :" + JSON.stringify(reason);
+                });
 
             /*var neController = {"ErrMsg" :     {"errmsg" : "IP Address is required.", "modalVar":"ne.controller"}};
             $('#myModal #controller').append($compile(Mustache.to_html(text, neController.ErrMsg))($scope));*/
 
-            var neIPAddress = {"ErrMsg" :     {"errmsg" : "IP Address is required.", "modalVar":"ne.ipAddress","errtag":"textboxErrIP", "errfunc":"validatetextboxIP","required":true}};
+            var neIPAddress = {"ErrMsg" :     {"errmsg" : "IP Address is required.", "modalVar":"ne.ipAddress"}};
             $('#myModal #ipAddress').append($compile(Mustache.to_html(text, neIPAddress.ErrMsg))($scope));
 
 
 
-            var neNativeId = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"ne.nativeId"}};
+            var neNativeId = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"ne.nativeID"}};
             $('#myModal #nativeId').append($compile(Mustache.to_html(text, neNativeId.ErrMsg))($scope));
 
             /*var neOperatingState = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"ne.operatingState"}};
@@ -1275,6 +1306,18 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
             return options;
         }
 
+        function translateCtrlIDToDropdownInfo(dropdowndata) {
+            var options = '<option value="select">--select--</option>';
+            var i;
+            for (i = 0; i < dropdowndata.length; i += 1) {
+                var option = '<option value="' + dropdowndata[i].sdnControllerId + '">' + dropdowndata[i].name
+                    + '</option>';
+                options = options + option;
+            }
+
+            return options;
+        }
+
         $scope.validatetextboxName = function (value){
             if($scope.ne.name) {
                 $scope.textboxErrName = false;
@@ -1292,7 +1335,7 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
         }
 
         $scope.validatetextboxRole = function (value){
-            if($scope.ne.role) {
+            if($scope.ne.neRole) {
                 $scope.textboxErrRole = false;
             }
             else
@@ -1339,6 +1382,11 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
             $("#myModal").modal({}).draggable();
         }
         $scope.saveData = function(id) {
+            $scope.ne.controllerID = [];
+            $scope.ne.controllerID[0] = $('#medropdown').val();
+            $scope.ne.siteID = [];
+            $scope.ne.siteID[0] = $('#siteIdDropdown').val();
+
             if (!$scope.textboxErrName && !$scope.textboxErrIP) {
 				
 				var nes = {};
@@ -1452,7 +1500,7 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
         $scope.init = function() {
             datacenterDataService.getDatacenterData()
                 .then(function (data) {
-                    $scope.data = data;
+                    $scope.data = data.datacenters;
                     console.log("Data: ");
                     $log.info(data);
                     loadButtons();
@@ -1474,7 +1522,7 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
             $('#datacenterAction').html($compile(addhtml)($scope));
             $('#datacenterAction').append($compile(deletehtml)($scope));
 
-            var modelSubmit_data = {"title":"OK", "clickAction":"saveData(datacenter.Id)"};
+            var modelSubmit_data = {"title":"OK", "clickAction":"saveData(datacenter.id)"};
             var modelSubmit_html = Mustache.to_html(def_button_tpl, modelSubmit_data);
             $('#myModal #footerBtns').html($compile(modelSubmit_html)($scope));
 
@@ -1487,10 +1535,10 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
             var number = $(modelTemplate).filter('#numeric').html();
             var dropDown = $(modelTemplate).filter('#simpleDropdownTmpl').html();
 
-            var dataId = {"ErrMsg" :     {"textboxErr" : "The name is required.", "modalVar":"datacenter.Id"}};
+            var dataId = {"ErrMsg" :     {"textboxErr" : "The name is required.", "modalVar":"datacenter.id"}};
             $('#myModal #Id').append($compile(Mustache.to_html(text, dataId.ErrMsg))($scope));
 
-            var dataName = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"datacenter.Name","errtag":"textboxErr", "errfunc":"validatetextbox","required":true}};
+            var dataName = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"datacenter.name","errtag":"textboxErr", "errfunc":"validatetextbox","required":true}};
             $('#myModal #Name').append($compile(Mustache.to_html(text, dataName.ErrMsg))($scope));
 
             var dataStatus = {"ErrMsg" :     {"textboxErr" : "The name is required.", "modalVar":"datacenter.Status"}};
@@ -1525,40 +1573,45 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
 			
 			var dropdownResponse=[{"serviceTemplateId":"Country1","templateName":"Country1"},{"serviceTemplateId":"Country2","templateName":"Country2"}];
             var dropdownInfo = translateToDropdownInfo(dropdownResponse);
-            document.getElementById("countrydropdown").innerHTML = dropdownInfo;
+            //document.getElementById("countrydropdown").innerHTML = dropdownInfo;
 
             var dropdownResponse=[{"serviceTemplateId":"Location1","templateName":"Location1"},{"serviceTemplateId":"Location2","templateName":"Location2"}];
             var dropdownInfo = translateToDropdownInfo(dropdownResponse);
-            document.getElementById("locationdropdown").innerHTML = dropdownInfo;
+            //document.getElementById("locationdropdown").innerHTML = dropdownInfo;
 
             var dropdownResponse=[{"serviceTemplateId":"ServiceName1","templateName":"ServiceName1"},{"serviceTemplateId":"ServiceName2","templateName":"ServiceName2"}];
             var dropdownInfo = translateToDropdownInfo(dropdownResponse);
-            document.getElementById("servicenamedropdown").innerHTML = dropdownInfo;
+            //document.getElementById("servicenamedropdown").innerHTML = dropdownInfo;
 
-            var dataCPU = {"ErrMsg" :     {"textboxErr" : "The name is required.", "modalVar":"datacenter.Cpu"}};
+            var dataCPU = {"ErrMsg" :     {"textboxErr" : "The name is required.", "modalVar":"datacenter.cpu"}};
             $('#myModal #Cpu').append($compile(Mustache.to_html(text, dataCPU.ErrMsg))($scope));
 
-            var dataMemory = {"ErrMsg" :     {"textboxErr" : "The name is required.", "modalVar":"datacenter.Memory"}};
+            var dataMemory = {"ErrMsg" :     {"textboxErr" : "The name is required.", "modalVar":"datacenter.memory"}};
             $('#myModal #Memory').append($compile(Mustache.to_html(text, dataMemory.ErrMsg))($scope));
 
-            var dataHarddisk = {"ErrMsg" :     {"textboxErr" : "The name is required.", "modalVar":"datacenter.HardDisk"}};
+            var dataHarddisk = {"ErrMsg" :     {"textboxErr" : "The name is required.", "modalVar":"datacenter.hardDisk"}};
             $('#myModal #HardDisk').append($compile(Mustache.to_html(text, dataHarddisk.ErrMsg))($scope));
 
             $scope.checkboxes = { 'checked': false, items: {} };
 
-            $scope.neTableParams = new NgTableParams({count: 5, sorting: {Id: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}
-            }, { counts:[5, 10, 20, 50], dataset: $scope.data.datacenterData});
+            $scope.neTableParams = new NgTableParams({count: 5, sorting: {Id: 'asc'}  
+            }, { counts:[5, 10, 20, 50], dataset: $scope.data});
 
             $scope.$watch('checkboxes.checked', function(value) {
                 $scope.checkboxes.items = {};
 
                 angular.forEach($scope.neTableParams.data, function(item) {
 					
-                    if (angular.isDefined(item.Id)) {
-                        $scope.checkboxes.items[item.Id] = value;
+                    if (angular.isDefined(item.id)) {
+                        $scope.checkboxes.items[item.id] = value;
                     }
                 });
             });
+			
+			//action
+			fillCountryData();
+			fillVimNameData();
+			regChangeAction();
 
         }
 		
@@ -1573,7 +1626,7 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
         }
 
         $scope.validatetextbox = function (value){
-            if($scope.datacenter.Name) {
+            if($scope.datacenter.name) {
                 $scope.textboxErr = false;
             }
             else
@@ -1604,7 +1657,10 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
             if (!$scope.textboxErr) {
 				
 				var dcs = {}
-				dcs.dc =	$scope.datacenter;
+				dcs =	$scope.datacenter;
+				$scope.datacenter.vimName = $("#servicenamedropdown").val();
+				$scope.datacenter.location = $("#locationdropdown").val();
+				$scope.datacenter.country = $("#countrydropdown").val();
                 if(id) {
                     //edit data
                     console.log("Editing data.." + JSON.stringify(dcs));
@@ -1692,9 +1748,9 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
         $scope.editData = function(id) {
             console.log("To be edited : " + id);
             var dataFound = false;
-            angular.forEach($scope.data.datacenterData, function(data) {
+            angular.forEach($scope.data, function(data) {
                 if(!dataFound) {
-                    if (data.Id == id) {
+                    if (data.id == id) {
                         console.log("Found : " + data.id);
                         $scope.datacenter = data;
                         $("#myModal").modal();
diff --git a/resmgr/src/main/webapp/resmgr/nfv-resmgr/datacenter/datacenter.html b/resmgr/src/main/webapp/resmgr/nfv-resmgr/datacenter/datacenter.html
index a2caf0a2..be46fbed 100644
--- a/resmgr/src/main/webapp/resmgr/nfv-resmgr/datacenter/datacenter.html
+++ b/resmgr/src/main/webapp/resmgr/nfv-resmgr/datacenter/datacenter.html
@@ -24,39 +24,39 @@
 <table ng-table="neTableParams" class="table table-bordered table-striped" show-filter="true">
     <tr ng-repeat="datacenterData in $data">
         <td header="'ng-table/headers/checkbox.html'">
-            <input type="checkbox" ng-model="checkboxes.items[datacenterData.Id]" />
+            <input type="checkbox" ng-model="checkboxes.items[datacenterData.id]" />
         </td>
-        <td title="'Id'" filter="{ Id: 'text'}" sortable="'Id'">
-            {{datacenterData.Id}}
+        <td title="'Id'" filter="{ id: 'text'}" sortable="'id'">
+            {{datacenterData.id}}
         </td>
-        <td title="'Name'" filter="{ Name: 'number'}" sortable="'Name'">
-            {{datacenterData.Name}}
+        <td title="'Name'" filter="{ name: 'number'}" sortable="'name'">
+            {{datacenterData.name}}
         </td>
-        <td title="'Status'" filter="{ Status: 'text'}" sortable="'Status'">
-            {{datacenterData.Status}}
+        <td title="'Status'" filter="{ status: 'text'}" sortable="'status'">
+            {{datacenterData.status}}
         </td>
         </td>
-        <td title="'Country'" filter="{ Country: 'text'}" sortable="'Country'">
-            {{datacenterData.Country}}
+        <td title="'Country'" filter="{ country: 'text'}" sortable="'country'">
+            {{datacenterData.country}}
         </td>
-        <td title="'Location'" filter="{ Location: 'text'}" sortable="'Location'">
-            {{datacenterData.Location}}
+        <td title="'Location'" filter="{ location: 'text'}" sortable="'location'">
+            {{datacenterData.location}}
         </td>
-        <td title="'Service Name'" filter="{ ServiceName: 'text'}" sortable="'ServiceName'">
-            {{datacenterData.ServiceName}}
+        <td title="'Service Name'" filter="{ serviceName: 'text'}" sortable="'serviceName'">
+            {{datacenterData.vimName}}
         </td>
-        <td title="'Cpu(Cores)'" filter="{ Cpu: 'number'}" sortable="'Cpu'">
-            {{datacenterData.Cpu}}
+        <td title="'Cpu(Cores)'" filter="{ cpu: 'number'}" sortable="'cpu'">
+            {{datacenterData.cpu}}
         </td>
-        <td title="'Memory(MB)'" filter="{ Memory: 'number'}" sortable="'Memory'">
-            {{datacenterData.Memory}}
+        <td title="'Memory(MB)'" filter="{ memory: 'number'}" sortable="'memory'">
+            {{datacenterData.memory}}
         </td>
-        <td title="'HardDisk(GB)'" filter="{ HardDisk: 'number'}" sortable="'HardDisk'">
-            {{datacenterData.HardDisk}}
+        <td title="'HardDisk(GB)'" filter="{ hardDisk: 'number'}" sortable="'hardDisk'">
+            {{datacenterData.hardDisk}}
         </td>
         <td title="'Action'">
-            <span  ng-click="editData(datacenterData.Id)" style="cursor: pointer;margin: 0 5px"> <img src="/openoui/framework/browser/thirdparty/images/edit.png" height="15" align="left"/></span>
-            <span  ng-click="deleteData(datacenterData.Id)" style="cursor: pointer;margin: 0 5px"><img src="/openoui/framework/browser/thirdparty/images/delete.png" height="15" align="middle"/></span>
+            <span  ng-click="editData(datacenterData.id)" style="cursor: pointer;margin: 0 5px"> <img src="/openoui/framework/browser/thirdparty/images/edit.png" height="15" align="left"/></span>
+            <span  ng-click="deleteData(datacenterData.id)" style="cursor: pointer;margin: 0 5px"><img src="/openoui/framework/browser/thirdparty/images/delete.png" height="15" align="middle"/></span>
         </td>
     </tr>
 </table>
@@ -77,7 +77,7 @@
                 <button type="button" class="close" data-dismiss="modal">&times;</button>
                 <h5 class="modal-title labelstyle">Modal Header</h5>
             </div>
-            <form ng-submit="saveData(province.id)" name="provinceForm" method="post">
+            <form ng-submit="saveData(province.id)" name="datacenterForm" method="post">
                 <div class="modal-body" id="borderSpacing">
 
                     <div class="form-group row" id="rowSpacing">
@@ -85,38 +85,18 @@
                         <div id="Name" class="col-xs-8" >
                         </div>
                     </div>
-                    <!--<div class="form-group row">
-                        <label class="col-xs-4 col-form-label">Country</label>
-                        <div id="Country" class="col-xs-8" >
-                        </div>
-                    </div>-->
 					<div class="form-group row" id="rowSpacing">
                         <label class="col-xs-4 col-form-label" id="textCenter">Country</label>
                         <div id="Country" class="col-xs-8" >
                             <select id="countrydropdown" class="form-control inputfield" ng-model="datacenterData.optSelect" ng-options="item.templateName for item in optionsValue"></select>
                         </div>
                     </div>
-                    <div class="form-group row" id="rowSpacing">
-                        <label class="col-xs-4 col-form-label" id="textCenter">Status</label>
-                        <div id="Status" class="col-xs-8" >
-                        </div>
-                    </div>
-                    <!--<div class="form-group row">
-                        <label class="col-xs-4 col-form-label">Location</label>
-                        <div id="Location" class="col-xs-8" >
-                        </div>
-                    </div>-->
 					<div class="form-group row" id="rowSpacing">
                         <label class="col-xs-4 col-form-label" id="textCenter">Location</label>
                         <div id="Location" class="col-xs-8" >
                             <select id="locationdropdown" class="form-control inputfield" ng-model="datacenterData.optSelect" ng-options="item.templateName for item in optionsValue"></select>
                         </div>
                     </div>
-                    <!--<div class="form-group row">
-                        <label class="col-xs-4 col-form-label">ServiceName</label>
-                        <div id="ServiceName" class="col-xs-8" >
-                        </div>
-                    </div>-->
 					<div class="form-group row" id="rowSpacing">
                         <label class="col-xs-4 col-form-label" id="textCenter">ServiceName</label>
                         <div id="ServiceName" class="col-xs-8" >
@@ -125,17 +105,17 @@
                     </div>
                     <div class="form-group row" id="rowSpacing">
                         <label class="col-xs-4 col-form-label" id="textCenter">CPU(Cores)</label>
-                        <div id="Cpu" class="col-xs-8" >
+                        <div id="" class="col-xs-8" >
                         </div>
                     </div>
                     <div class="form-group row" id="rowSpacing">
                         <label class="col-xs-4 col-form-label" id="textCenter">Memory</label>
-                        <div id="Memory" class="col-xs-8" >
+                        <div id="" class="col-xs-8" >
                         </div>
                     </div>
                     <div class="form-group row" id="rowSpacing">
                         <label class="col-xs-4 col-form-label" id="textCenter">HardDisk</label>
-                        <div id="HardDisk" class="col-xs-8" >
+                        <div id="" class="col-xs-8" >
                         </div>
                     </div>
 
diff --git a/resmgr/src/main/webapp/resmgr/nfv-resmgr/datacenter/datacenterRest.js b/resmgr/src/main/webapp/resmgr/nfv-resmgr/datacenter/datacenterRest.js
index f1251569..61031eea 100644
--- a/resmgr/src/main/webapp/resmgr/nfv-resmgr/datacenter/datacenterRest.js
+++ b/resmgr/src/main/webapp/resmgr/nfv-resmgr/datacenter/datacenterRest.js
@@ -18,15 +18,6 @@ app.factory("datacenterDataService", function($http,DataService, $log){
     uri += "/openoapi/resmgr/v1/datacenters/";
     return {
         getDatacenterData : function() {
-            /*console.log("hi in dataservice");
-            return $http({
-                url: 'http://localhost:3000/datacenterAPI/getDatacenterData',
-                method: 'GET',
-                headers: {'Content-Type': 'application/json'}
-            }).then(function(response){
-                //$log.info(response);
-                return response.data;
-            });*/
             return DataService.get(uri)
                 .then(function(response){
                     $log.info("in get data service data is  :"+response);
@@ -35,17 +26,7 @@ app.factory("datacenterDataService", function($http,DataService, $log){
                 });
         },
         deleteDatacenterData : function(id) {
-            /*return $http({
-                url: 'http://localhost:3000/datacenterAPI/deleteDatacenterData',
-                method: 'POST',
-                data: {'idList':idList},
-                headers: {'Content-Type': 'application/json'}
-            }).then(function(response){
-                console.log("Successfully Deleted..");
-                $log.info(response);
-                return response.data;
-            });*/
-            return DataService.delete(uri+"/"+id)
+            return DataService.delete(uri+id)
                 .then(function(response){
                     $log.info("in delete data service data is  :"+response);
                     console.log(response);
@@ -69,4 +50,78 @@ app.factory("datacenterDataService", function($http,DataService, $log){
                 });
         }
     }
-});
-\ No newline at end of file
+});
+
+
+
+function fillCountryData() {
+
+    var requestUrl = "/openoapi/resmgr/v1/locations/country";
+    var htmlContent = "";
+    $.ajax({
+        type: "GET",
+        url: requestUrl,
+        contentType: "application/json",
+        success: function (jsonobj) {
+            var str = jsonobj.data.replace('[', '').replace(']', '').split(',')
+            $.each(str, function (n, v) {
+                htmlContent += "<option value=" + v + ">" + v + "</option>";
+                $("#countrydropdown").html(htmlContent);
+
+            });
+        },
+        error: function (xhr, ajaxOptions, thrownError) {
+            bootbox.alert("Error on getting country data : " + xhr.responseText);
+        }
+    });
+}
+
+function fillVimNameData() {
+
+    var requestUrl = "/openoapi/resmgr/v1/locations/cloudservice";
+    var htmlContent = "";
+    $.ajax({
+        type: "GET",
+        url: requestUrl,
+        contentType: "application/json",
+        success: function (jsonobj) {
+            var str = jsonobj.data.replace('[', '').replace(']', '').split(',')
+            $.each(str, function (n, v) {
+                htmlContent += "<option value='" + v + "'>" + v + "</option>";
+                $("#servicenamedropdown").html(htmlContent);
+
+            });
+        },
+        error: function (xhr, ajaxOptions, thrownError) {
+            bootbox.alert("Error on getting country data : " + xhr.responseText);
+        }
+    });
+}
+function regChangeAction(){
+	  $('#countrydropdown').change(function () {
+        var country = $(this).children('option:selected').val();
+        var requestUrl = "/openoapi/resmgr/v1/locations/locationbycountry?country=" + country;
+
+        var htmlContent = "<option value=''>--select--</option>";
+        $.ajax({
+            type: "GET",
+            url: requestUrl,
+            contentType: "application/json",
+            success: function (jsonobj) {
+				console.log(jsonobj.data);
+				   var str = jsonobj.data.replace('[', '').replace(']', '').split(',');
+				   console.log(str);
+                $.each(str, function (n, v) {
+                    htmlContent += "<option value='" + v + "'>" + v + "</option>";
+                    $("#locationdropdown").html(htmlContent);
+
+                });
+
+            },
+            error: function (xhr, ajaxOptions, thrownError) {
+                bootbox.alert("Error on getting location data : " + xhr.responseText);
+            }
+        });
+
+    });
+}
+\ No newline at end of file
diff --git a/resmgr/src/main/webapp/resmgr/nfv-resmgr/location/location.html b/resmgr/src/main/webapp/resmgr/nfv-resmgr/location/location.html
index 9c0f72eb..cafdca2c 100644
--- a/resmgr/src/main/webapp/resmgr/nfv-resmgr/location/location.html
+++ b/resmgr/src/main/webapp/resmgr/nfv-resmgr/location/location.html
@@ -23,32 +23,30 @@
 <table ng-table="neTableParams" class="table table-bordered table-striped customtable" show-filter="true">
     <tr ng-repeat="locationData in $data">
         <td header="'ng-table/headers/checkbox.html'">
-            <input type="checkbox" ng-model="checkboxes.items[locationData.Id]" />
+            <input type="checkbox" ng-model="checkboxes.items[locationData.id]" />
         </td>
-        <td title="'Id'" filter="{ Id: 'text'}" sortable="'Id'">
-            {{locationData.Id}}
+        <td title="'Id'" filter="{ id: 'text'}" sortable="'id'">
+            {{locationData.id}}
         </td>
-        <td title="'Country'" filter="{ Country: 'text'}" sortable="'Country'">
-            {{locationData.Country}}
+        <td title="'Country'" filter="{ country: 'text'}" sortable="'country'">
+            {{locationData.country}}
         </td>
-        <td title="'Location'" filter="{ Location: 'text'}" sortable="'Location'">
-            {{locationData.Location}}
+        <td title="'Location'" filter="{ location: 'text'}" sortable="'location'">
+            {{locationData.location}}
         </td>
         </td>
-        <td title="'Description'" filter="{ Description: 'text'}" sortable="'Description'">
-            {{locationData.Description}}
+        <td title="'Description'" filter="{ description: 'text'}" sortable="'description'">
+            {{locationData.description}}
         </td>
-        <td title="'Latitude'" filter="{ Latitude: 'text'}" sortable="'Latitude'">
-            {{locationData.Latitude}}
+        <td title="'Latitude'" filter="{ latitude: 'text'}" sortable="'latitude'">
+            {{locationData.latitude}}
         </td>
-        <td title="'Longitude'" filter="{ Longitude: 'text'}" sortable="'Longitude'">
-            {{locationData.Longitude}}
+        <td title="'Longitude'" filter="{ longitude: 'text'}" sortable="'longitude'">
+            {{locationData.longitude}}
         </td>
         <td title="'Action'">
-            <!--<span class="pull-right glyphicon glyphicon-edit" ng-click="editData(locationData.Id)" style="cursor: pointer;margin: 0 5px"></span>
-            <span class="pull-right glyphicon glyphicon-trash" ng-click="deleteData(locationData.Id)" style="cursor: pointer;margin: 0 5px"></span>-->
-            <span  ng-click="editData(locationData.Id)" style="cursor: pointer;margin: 0 5px"> <img src="/openoui/framework/browser/thirdparty/images/edit.png" height="15" align="left"/></span>
-            <span  ng-click="deleteData(locationData.Id)" style="cursor: pointer;margin: 0 5px"><img src="/openoui/framework/browser/thirdparty/images/delete.png" height="15" align="middle"/></span>
+            <span  ng-click="editData(locationData.id)" style="cursor: pointer;margin: 0 5px"> <img src="/openoui/framework/browser/thirdparty/images/edit.png" height="15" align="left"/></span>
+            <span  ng-click="deleteData(locationData.id)" style="cursor: pointer;margin: 0 5px"><img src="/openoui/framework/browser/thirdparty/images/delete.png" height="15" align="middle"/></span>
         </td>
     </tr>
 </table>
diff --git a/resmgr/src/main/webapp/resmgr/nfv-resmgr/location/locationRest.js b/resmgr/src/main/webapp/resmgr/nfv-resmgr/location/locationRest.js
index 4bfb2f58..e940a588 100644
--- a/resmgr/src/main/webapp/resmgr/nfv-resmgr/location/locationRest.js
+++ b/resmgr/src/main/webapp/resmgr/nfv-resmgr/location/locationRest.js
@@ -45,7 +45,7 @@ app.factory("locationDataService", function($http,DataService, $log){
                 $log.info(response);
                 return response.data;
             });*/
-            return DataService.delete(uri+"/"+id)
+            return DataService.delete(uri+id)
                 .then(function(response){
                     $log.info("in delete data service data is  :"+response);
                     console.log(response);
diff --git a/resmgr/src/main/webapp/resmgr/nfv-resmgr/vim/vimgraph.html b/resmgr/src/main/webapp/resmgr/nfv-resmgr/vim/vimgraph.html
index 2bde05b5..badaa021 100644
--- a/resmgr/src/main/webapp/resmgr/nfv-resmgr/vim/vimgraph.html
+++ b/resmgr/src/main/webapp/resmgr/nfv-resmgr/vim/vimgraph.html
@@ -50,7 +50,7 @@
         <br>
         <label style="font-size:14px;">Cpu status</label>
     </div>
-    <div style="...">
+    <div style="width:30%;float: left;text-align:center;display: inline">
         <canvas id="memoryChart"></canvas>
         <br>
         <label style="font-size:14px;">Memory status</label>
diff --git a/resmgr/src/main/webapp/resmgr/sdn-resmgr/link/link.html b/resmgr/src/main/webapp/resmgr/sdn-resmgr/link/link.html
index 63cdf2d1..96febbd7 100644
--- a/resmgr/src/main/webapp/resmgr/sdn-resmgr/link/link.html
+++ b/resmgr/src/main/webapp/resmgr/sdn-resmgr/link/link.html
@@ -94,7 +94,7 @@
                     <div class="form-group row" id="rowSpacing">
                         <label class="col-xs-4 col-form-label" id="textCenter">Type</label>
                         <div id="logicalType" class="col-xs-8" >
-						 <select id="linkdropdown" class="form-control inputfield" ng-model="siteData.optSelect" ng-options="item.templateName for item in optionsValue"></select>
+						 <select id="linkdropdown" class="form-control inputfield" ng-model="link.type" ng-options="item.templateName for item in optionsValue"></select>
                         </div>
                     </div>
                     <div class="form-group row" id="rowSpacing">
diff --git a/resmgr/src/main/webapp/resmgr/sdn-resmgr/ne/ne.html b/resmgr/src/main/webapp/resmgr/sdn-resmgr/ne/ne.html
index 6ddb5f66..92f8c2fc 100644
--- a/resmgr/src/main/webapp/resmgr/sdn-resmgr/ne/ne.html
+++ b/resmgr/src/main/webapp/resmgr/sdn-resmgr/ne/ne.html
@@ -121,7 +121,7 @@
                     <div class="form-group row" id="rowSpacing">
                         <label class="col-xs-4 col-form-label" id="textCenter">Controller</label>
                         <div id="controller" class="col-xs-8" >
-                            <select id="medropdown" class="form-control inputfield" ng-model="ne.optSelect"></select>
+                            <select id="medropdown" class="form-control inputfield" ng-model="ne.controller"></select>
                         </div>
                     </div>
                     <div class="form-group row" id="rowSpacing">
@@ -133,7 +133,7 @@
                     <div class="form-group row" id="rowSpacing">
                         <label class="col-xs-4 col-form-label" id="textCenter">Site Name</label>
                         <div id="siteId" class="col-xs-8" >
-                            <select id="siteIdDropdown" class="form-control inputfield" ng-model="ne.siteId"></select>
+                            <select id="siteIdDropdown" class="form-control inputfield" ng-model="ne.siteID"></select>
                         </div>
                     </div>
                 </div>
diff --git a/resmgr/src/main/webapp/resmgr/sdn-resmgr/ne/neRest.js b/resmgr/src/main/webapp/resmgr/sdn-resmgr/ne/neRest.js
index f67c0fec..a15ad4f8 100644
--- a/resmgr/src/main/webapp/resmgr/sdn-resmgr/ne/neRest.js
+++ b/resmgr/src/main/webapp/resmgr/sdn-resmgr/ne/neRest.js
@@ -25,6 +25,16 @@ app.factory("neDataService", function($http, DataService, $log, siteDataService)
                     return response;
                 });
         },
+        getNECtrlDDList : function () {
+            var url = "";
+            url += "/openoapi/extsys/v1/sdncontrollers";
+            return DataService.get(url)
+                .then(function(response){
+                    $log.info("in get data service data is  :"+response);
+                    console.log(response);
+                    return response;
+                });
+        },
         getAllNEData : function() {
             /*return $http({
                 url: 'http://localhost:3000/meAPI/getAllNEData',
diff --git a/resmgr/src/main/webapp/resmgr/sdn-resmgr/port/port.html b/resmgr/src/main/webapp/resmgr/sdn-resmgr/port/port.html
index f81265b0..5fe7b2a4 100644
--- a/resmgr/src/main/webapp/resmgr/sdn-resmgr/port/port.html
+++ b/resmgr/src/main/webapp/resmgr/sdn-resmgr/port/port.html
@@ -93,14 +93,15 @@
                 </div>
 
                 <div class="form-group row" id="rowSpacing">
-                    <label class="col-xs-4 col-form-label" id="textCenter">me</label>
+                    <label class="col-xs-4 col-form-label" id="textCenter">ME</label>
                     <div id="meID" class="col-xs-8" >
+                     <select id="medropdown" class="form-control inputfield" ng-model="port.meID"></select>
                     </div>
                 </div>
                 <div class="form-group row" id="rowSpacing">
                     <label class="col-xs-4 col-form-label" id="textCenter">Type</label>
                     <div id="logicalType" class="col-xs-8" >
-					 <select id="portdropdown" class="form-control inputfield" ng-model="siteData.optSelect" ng-options="item.templateName for item in optionsValue"></select>
+					 <select id="portdropdown" class="form-control inputfield" ng-model="port.logicalType" ng-options="item.templateName for item in optionsValue"></select>
                     </div>
                 </div>
                 <div class="form-group row" id="rowSpacing">
@@ -111,7 +112,7 @@
                 <div class="form-group row" id="rowSpacing">
                     <label class="col-xs-4 col-form-label" id="textCenter">Edge Point</label>
                     <div id="isEdgePoint" class="col-xs-8" >
-					<select id="portEdropdown" class="form-control inputfield" ng-model="siteData.optSelect" ng-options="item.templateName for item in optionsValue"></select>
+					<select id="portEdropdown" class="form-control inputfield" ng-model="port.isEdgePoint" ng-options="item.templateName for item in optionsValue"></select>
                     </div>
                 </div>
                 <div class="form-group row" id="rowSpacing">
@@ -124,6 +125,11 @@
                     <div id="ipAddress" class="col-xs-8" >
                     </div>
                 </div>
+                   <div class="form-group row" id="rowSpacing">
+                       <label class="col-xs-4 col-form-label" id="textCenter">Native ID</label>
+                       <div id="nativeId" class="col-xs-8" >
+                       </div>
+                   </div>
 
                 <div id="footerBtns" class="modal-footer">
                 </div>
diff --git a/resmgr/src/main/webapp/resmgr/sdn-resmgr/port/portRest.js b/resmgr/src/main/webapp/resmgr/sdn-resmgr/port/portRest.js
index 6bed2640..0d7c2349 100644
--- a/resmgr/src/main/webapp/resmgr/sdn-resmgr/port/portRest.js
+++ b/resmgr/src/main/webapp/resmgr/sdn-resmgr/port/portRest.js
@@ -90,6 +90,14 @@ app.factory("portDataService", function($http,DataService, $log){
                     console.log(response);
                     return response;
                 });
+        },
+        getAllNEData : function() {
+            return DataService.get("/openoapi/sdnobrs/v1/managed-elements")
+                .then(function(response){
+                    $log.info("in get data service data is  :"+response);
+                    console.log(response);
+                    return response;
+                });
         }
     }
 });
 \ No newline at end of file
diff --git a/resmgr/src/main/webapp/resmgr/sdn-resmgr/site/site.html b/resmgr/src/main/webapp/resmgr/sdn-resmgr/site/site.html
index 80a22467..76029246 100644
--- a/resmgr/src/main/webapp/resmgr/sdn-resmgr/site/site.html
+++ b/resmgr/src/main/webapp/resmgr/sdn-resmgr/site/site.html
@@ -82,7 +82,7 @@
                     <div class="form-group row" id="rowSpacing">
                         <label class="col-xs-4 col-form-label" id="textCenter">Type</label>
                         <div id="tenantID" class="col-xs-8" >
-						 <select id="sitedropdown" class="form-control inputfield" ng-model="siteData.optSelect" ng-options="item.templateName for item in optionsValue"></select>
+						 <select id="sitedropdown" class="form-control inputfield" ng-model="site.type" ng-options="item.templateName for item in optionsValue"></select>
                         </div>
                     </div>
                     <div class="form-group row" id="rowSpacing">
diff --git a/resmgr/src/main/webapp/resmgr/templates/resource.html b/resmgr/src/main/webapp/resmgr/templates/resource.html
index 0838cc13..cb01af39 100644
--- a/resmgr/src/main/webapp/resmgr/templates/resource.html
+++ b/resmgr/src/main/webapp/resmgr/templates/resource.html
@@ -43,9 +43,9 @@
                                 <li>
                                     <a ui-sref=".datacenter" ui-sref-active="link_active">Data Center</a>
                                 </li>
-                                <li>
+                                <!--<li>
                                     <a ui-sref=".vim" ui-sref-active="link_active">VIM</a>
-                                </li>
+                                </li>-->
                             </ul>
                         </div>
                     </div>
diff --git a/resmgr/src/main/webapp/resmgr/templates/templateContainer.html b/resmgr/src/main/webapp/resmgr/templates/templateContainer.html
index ef6f01c6..a1640acd 100644
--- a/resmgr/src/main/webapp/resmgr/templates/templateContainer.html
+++ b/resmgr/src/main/webapp/resmgr/templates/templateContainer.html
@@ -61,7 +61,7 @@
 
 <!--Table-->
 <script id="table" type="text/html">
-    {{#filter}}<input type="text" id="myInput" onkeyup="{{action}}" placeholder="Search for {{searchField}}">{{/filter}}
+    {{#filter}}<input type="text" autocomplete="off" id="myInput" onkeyup="{{action}}" placeholder="Search for {{searchField}}">{{/filter}}
     <table id="myTable{{#filter}}_search{{/filter}}" class="table {{#striped}}table-striped{{/striped}} {{#border}}table-bordered{{/border}} {{#hover}}table-hover{{/hover}} {{#condensed}}table-condensed{{/condensed}}">
         <thead>
         <tr>
diff --git a/resmgr/src/main/webapp/resmgr/templates/templateWidget.html b/resmgr/src/main/webapp/resmgr/templates/templateWidget.html
index bb8eef48..338cf47b 100644
--- a/resmgr/src/main/webapp/resmgr/templates/templateWidget.html
+++ b/resmgr/src/main/webapp/resmgr/templates/templateWidget.html
@@ -97,7 +97,7 @@
 <!--text-->
 <script id="textfield" type="text/html">
     <div class="css-form">
-       <input id ="textbox" name="textbox" class="form-control inputfield" placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="text"  ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}> {{#required}}<span class="staricon">*</span>{{/required}}
+       <input id ="textbox" autocomplete="off" name="textbox" class="form-control inputfield" placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="text"  ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}> {{#required}}<span class="staricon">*</span>{{/required}}
         <span class="errMsg" ng-show="{{errtag}}">{{errmsg}}</span>
     </div>
 </script>
@@ -105,7 +105,7 @@
 <!--email-->
 <script id="email" type="text/html">
     <div class="css-form">
-        <input class="form-control inputfield"  placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="email"  ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}>{{#required}}<span class="staricon">*</span>{{/required}}
+        <input class="form-control inputfield" autocomplete="off" placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="email"  ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}>{{#required}}<span class="staricon">*</span>{{/required}}
         <span class="errMsg" ng-show="{{errtag}}">{{errmsg}}</span>
     </div>
 </script>
@@ -113,7 +113,7 @@
 <!--url-->
 <script  id="url" type="text/html">
     <div class="css-form">
-        <input class="form-control inputfield" placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="url"  ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}>{{#required}}<span class="staricon">*</span>{{/required}}
+        <input class="form-control inputfield" autocomplete="off" placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="url"  ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}>{{#required}}<span class="staricon">*</span>{{/required}}
         <span class="errMsg" ng-show="{{errtag}}">{{errmsg}}</span>
     </div>
 </script>
@@ -123,7 +123,7 @@
     <div class="css-form">
 
 
-        <input class="form-control inputfield" placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="password" pattern=".{3,}" maxlength="{{#maxLength}}{{maxLength}}{{/maxLength}}{{^maxLength}}9{{/maxLength}}" ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}>{{#required}}<span class="staricon">*</span>{{/required}}
+        <input class="form-control inputfield" autocomplete="off" placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="password" pattern=".{3,}" maxlength="{{#maxLength}}{{maxLength}}{{/maxLength}}{{^maxLength}}9{{/maxLength}}" ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}>{{#required}}<span class="staricon">*</span>{{/required}}
         <span class="errMsg" ng-show="{{errtag}}">{{errmsg}}</span>
     </div>
 </script>
@@ -131,7 +131,7 @@
 <!--numeric-->
 <script id="numeric" type="text/html">
     <div class="css-form">
-        <input  class="form-control inputfield" placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="number"  ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}/>{{#required}}<span class="staricon">*</span>{{/required}}
+        <input  class="form-control inputfield" autocomplete="off" placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="number"  ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}/>{{#required}}<span class="staricon">*</span>{{/required}}
         <span class="errMsg" ng-show="{{errtag}}">{{errmsg}}</span>
     </div>
 </script>
@@ -139,7 +139,7 @@
 <!--dot-->
 <script  id="dot" type="text/html">
     <div class="css-form">
-        <input class="form-control inputfield"  placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="datetime-local"  ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}>{{#required}}<span class="staricon">*</span>{{/required}}
+        <input class="form-control inputfield" autocomplete="off" placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="datetime-local"  ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}>{{#required}}<span class="staricon">*</span>{{/required}}
         <span class="errMsg" ng-show="{{errtag}}">{{errmsg}}</span>
     </div>
 </script>
@@ -180,7 +180,7 @@
 <!--ipv4-->
 <script   id="ipv4" type="text/html">
     <div class="css-form">
-        <input class="form-control inputfield" type="ipv4" placeholder="{{placeholder}}" ng-model="{{modalVar}}" pattern="((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$"  ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}>{{#required}}<span class="staricon">*</span>{{/required}}
+        <input class="form-control inputfield" autocomplete="off" type="ipv4" placeholder="{{placeholder}}" ng-model="{{modalVar}}" pattern="((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$"  ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}>{{#required}}<span class="staricon">*</span>{{/required}}
         <span class="errMsg" ng-show="{{errtag}}">{{errmsg}}</span>
     </div>
 </script>
@@ -196,7 +196,7 @@
 <!--textarea-->
 <script id="textarea" type="text/html">
     <div class="css-form">
-        <textarea class="form-control inputfield"  rows="4" cols="50" placeholder="{{placeholder}}" ng-model="{{modalVar}}"  ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}></textarea>{{#required}}<span class="staricon">*</span>{{/required}}
+        <textarea class="form-control inputfield" autocomplete="off" rows="4" cols="50" placeholder="{{placeholder}}" ng-model="{{modalVar}}"  ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}></textarea>{{#required}}<span class="staricon">*</span>{{/required}}
         <span class="errMsg" ng-show="{{errtag}}">{{errmsg}}</span>
     </div>
 </script>
diff --git a/vnfmarket/src/main/webapp/vnfmarket/app/app.config.js b/vnfmarket/src/main/webapp/vnfmarket/app/app.config.js
index 2efd963c..4b9af093 100644
--- a/vnfmarket/src/main/webapp/vnfmarket/app/app.config.js
+++ b/vnfmarket/src/main/webapp/vnfmarket/app/app.config.js
@@ -85,7 +85,7 @@
 
         $translateProvider.useSanitizeValueStrategy(null);
         $translateProvider.useStaticFilesLoader({
-            prefix: "vnfmarket/common/locale/locale-",
+            prefix: "/openoui/vnfmarket/common/locale/locale-",
             suffix: ".json"
         });
         $translateProvider.preferredLanguage('en')
diff --git a/vnfmarket/src/main/webapp/vnfmarket/app/modules/home/home.html b/vnfmarket/src/main/webapp/vnfmarket/app/modules/home/home.html
index f27486fa..a10cf5fe 100644
--- a/vnfmarket/src/main/webapp/vnfmarket/app/modules/home/home.html
+++ b/vnfmarket/src/main/webapp/vnfmarket/app/modules/home/home.html
@@ -17,7 +17,7 @@
     <div ng-controller="SidenavCtrl as vm" ng-cloak>
         <md-toolbar class="md-tall md-hue-1">
             <div class="image">
-                <img src="vnfmarket/common/images/logo.png" align="middle" >
+                <img src="/openoui/vnfmarket/common/images/logo.png" align="middle" >
             </div>
             <div layout="column" class="md-toolbar-tools-bottom inset">
             </div>
@@ -27,7 +27,7 @@
                 <div class="inset">
                     <!--<ng-md-icon icon="apps"></ng-md-icon>-->
                     <i>
-                        <img src="vnfmarket/common/images/Marketplace.png">
+                        <img src="/openoui/vnfmarket/common/images/Marketplace.png">
                     </i>
                 </div>
                 <p> {{ 'module.marketplace.sideNav.marketplaceNav' | translate}} </p>
diff --git a/vnfmarket/src/main/webapp/vnfmarket/app/modules/home/homeRoute.js b/vnfmarket/src/main/webapp/vnfmarket/app/modules/home/homeRoute.js
index ff2d0994..be24302e 100644
--- a/vnfmarket/src/main/webapp/vnfmarket/app/modules/home/homeRoute.js
+++ b/vnfmarket/src/main/webapp/vnfmarket/app/modules/home/homeRoute.js
@@ -26,7 +26,7 @@
 angular.module('vnfmarket')
     .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider, vnfConfig) {
 
-        var homePath = 'vnfmarket/app/modules/home';
+        var homePath = '/openoui/vnfmarket/app/modules/home';
         $stateProvider
             .state('home', {
                 url: '',
diff --git a/vnfmarket/src/main/webapp/vnfmarket/app/modules/home/marketplace.html b/vnfmarket/src/main/webapp/vnfmarket/app/modules/home/marketplace.html
index e0e9773b..eb4cf6b5 100644
--- a/vnfmarket/src/main/webapp/vnfmarket/app/modules/home/marketplace.html
+++ b/vnfmarket/src/main/webapp/vnfmarket/app/modules/home/marketplace.html
@@ -16,7 +16,7 @@
 <div class="md-padding nomargin nopadding" flex layout-sm="column">
     <md-card class="nomargin">
         <md-card-content class="nopadding">
-            <img src="vnfmarket/common/images/productioncardtype.png"  style="width:100%;">
+            <img src="/openoui/vnfmarket/common/images/productioncardtype.png"  style="width:100%;">
         </md-card-content>
     </md-card>
     <!-- Start About Page -->
@@ -95,14 +95,14 @@
                         <button class="btn btnDefault iconMargin" ng-click="vm.serviceUpload(false, service.csarId)">
                           <md-tooltip md-direction="top">{{'common.actions.update' | translate}}</md-tooltip>
                             <i>
-                                <img src="vnfmarket/common/images/reupload.png" class="btnIconSpacing">
+                                <img src="/openoui/vnfmarket/common/images/reupload.png" class="btnIconSpacing">
                             </i>
                           {{'common.actions.update' | translate}}
                         </button>
                         <button class="btn btnDefault iconMargin deletebutton" ng-click="vm.serviceDelete(service)">
                           <md-tooltip md-direction="top">{{'common.actions.delete' | translate}}</md-tooltip>
                             <i>
-                                <img src="vnfmarket/common/images/delete.png" class="btnIconSpacing">
+                                <img src="/openoui/vnfmarket/common/images/delete.png" class="btnIconSpacing">
                             </i>
                             {{'common.actions.delete' | translate}}
                         </button>
@@ -110,7 +110,7 @@
                         <button class="btn btnPrimary downloadIcon" ng-click="vm.downloadService(service.csarId)" ng-disabled="service.downloadCount == -1">
                           <md-tooltip md-direction="top">{{'common.actions.download' | translate}} </md-tooltip>
                             <i>
-                                <img src="vnfmarket/common/images/download.png" class="btnIconSpacing">
+                                <img src="/openoui/vnfmarket/common/images/download.png" class="btnIconSpacing">
                             </i>
                           {{'common.actions.download' | translate}}
                         </button>
@@ -184,7 +184,7 @@
                                 <md-icon class="md-icon" aria-label="{{'common.actions.update' | translate}}" ng-click="vm.serviceUpload(false, service.csarId)">
                                 <md-tooltip md-direction="top">{{'common.actions.update' | translate}}</md-tooltip>
                                 <i>
-                                <img src="vnfmarket/common/images/reupload.png" class="btnIconSpacing">
+                                <img src="/openoui/vnfmarket/common/images/reupload.png" class="btnIconSpacing">
                             </i>
                                     <!-- <i class="material-icons materialIconAdjustment" aria-hidden="true">{{'common.actions.fileUpload' | translate}}</i> -->
                                 </md-icon>
@@ -192,13 +192,13 @@
                                 <md-tooltip md-direction="top">{{'common.actions.download' | translate}}</md-tooltip>
                                     <!-- <i class="material-icons materialIconAdjustment" aria-hidden="true">{{'common.actions.getApp' | translate}}</i> -->
                                     <i>
-                                <img src="vnfmarket/common/images/download.png" class="btnIconSpacing primaryColor">
+                                <img src="/openoui/vnfmarket/common/images/download.png" class="btnIconSpacing primaryColor">
                             </i>
                                 </md-icon>
                                 <md-icon class="md-icon" aria-label="{{'common.actions.delete' | translate}}"  ng-click="vm.serviceDelete(service)">
                                 <md-tooltip md-direction="top">{{'common.actions.delete' | translate}}</md-tooltip>
                                 <i>
-                                <img src="vnfmarket/common/images/delete.png" class="btnIconSpacing">
+                                <img src="/openoui/vnfmarket/common/images/delete.png" class="btnIconSpacing">
                             </i>
                                     <!-- <i class="fa fa-trash-o icon-red fa-sm" aria-hidden="true"></i> -->
 
@@ -215,7 +215,7 @@
     <div ng-if="vm.services.length == 0">
     <div class="content emptyPage">
         <div class="imageContainer">
-            <img src="vnfmarket/common/images/empty.png" class="btnIconSpacing">
+            <img src="/openoui/vnfmarket/common/images/empty.png" class="btnIconSpacing">
         </div>
         <h3>{{'module.marketplace.main.emptyList.label' | translate}} <a ng-click="vm.serviceUpload(true)">{{'module.marketplace.main.emptyList.anchor' | translate}}</a> {{'module.marketplace.main.emptyList.labelContinued' | translate}}</h3>
     </div>
diff --git a/vnfmarket/src/main/webapp/vnfmarket/app/modules/home/serviceDetails/functionalTest/view.html b/vnfmarket/src/main/webapp/vnfmarket/app/modules/home/serviceDetails/functionalTest/view.html
index 61455396..86875311 100644
--- a/vnfmarket/src/main/webapp/vnfmarket/app/modules/home/serviceDetails/functionalTest/view.html
+++ b/vnfmarket/src/main/webapp/vnfmarket/app/modules/home/serviceDetails/functionalTest/view.html
@@ -3,7 +3,7 @@
     <br>
     <div>
        <!-- <img src="../../../../../common/images/floating-layer-function_old.png">-->
-        <img src="vnfmarket/common/images/floating_layer_function.png" width="100%" height="40%">
+        <img src="/openoui/vnfmarket/common/images/floating_layer_function.png" width="100%" height="40%">
     </div>
     <br>
 <md-card flex="100" class="nomargin">
diff --git a/vnfmarket/src/main/webapp/vnfmarket/app/modules/home/serviceDetails/serviceDetails.html b/vnfmarket/src/main/webapp/vnfmarket/app/modules/home/serviceDetails/serviceDetails.html
index 3731bf66..a6221996 100644
--- a/vnfmarket/src/main/webapp/vnfmarket/app/modules/home/serviceDetails/serviceDetails.html
+++ b/vnfmarket/src/main/webapp/vnfmarket/app/modules/home/serviceDetails/serviceDetails.html
@@ -42,7 +42,7 @@
             <button class="btn btnPrimary downloadButton" ng-click="vm.downloadService(vm.service.csarId)">
                 <md-tooltip md-direction="top">{{'common.actions.download' | translate}} </md-tooltip>
                 <i>
-                    <img src="vnfmarket/common/images/download.png" class="btnIconSpacing">
+                    <img src="/openoui/vnfmarket/common/images/download.png" class="btnIconSpacing">
                 </i>
                 {{'common.actions.download' | translate}}
             </button>
@@ -50,14 +50,14 @@
             <button class="btn btnDefault iconMargin" ng-click="vm.reupload(false,vm.service.csarId)">
                 <md-tooltip md-direction="top">{{'common.actions.update' | translate}}</md-tooltip>
                 <i>
-                    <img src="vnfmarket/common/images/reupload.png" class="btnIconSpacing">
+                    <img src="/openoui/vnfmarket/common/images/reupload.png" class="btnIconSpacing">
                 </i>
                 {{'common.actions.update' | translate}}
             </button>
             <button class="btn btnDefault" ng-click="vm.serviceDelete(vm.service)">
                 <md-tooltip md-direction="top">{{'common.actions.delete' | translate}}</md-tooltip>
                 <i>
-                    <img src="vnfmarket/common/images/delete.png" class="btnIconSpacing">
+                    <img src="/openoui/vnfmarket/common/images/delete.png" class="btnIconSpacing">
                 </i>
                 {{'common.actions.delete' | translate}}
             </button>
diff --git a/vnfmarket/src/main/webapp/vnfmarket/app/modules/home/serviceDetails/serviceDetailsCtrl.js b/vnfmarket/src/main/webapp/vnfmarket/app/modules/home/serviceDetails/serviceDetailsCtrl.js
index 95da6bf7..466ab412 100644
--- a/vnfmarket/src/main/webapp/vnfmarket/app/modules/home/serviceDetails/serviceDetailsCtrl.js
+++ b/vnfmarket/src/main/webapp/vnfmarket/app/modules/home/serviceDetails/serviceDetailsCtrl.js
@@ -46,7 +46,8 @@
         }
 
         vm.service = $stateParams.serviceDetails;
-        vm.service.funcTestReportUrl = baseUrlConfig.common.ip + ":" + baseUrlConfig.common.port + vm.service.report;
+      //ses  vm.service.funcTestReportUrl = baseUrlConfig.common.ip + ":" + baseUrlConfig.common.port + vm.service.report;
+	    vm.service.funcTestReportUrl =  vm.service.report;
 
         vm.downloadService = function(csarId) {
             homeService.updateDownloadCount(csarId).then(function(response){
diff --git a/vnfmarket/src/main/webapp/vnfmarket/app/modules/home/serviceUpload/onboarding/functionalTest/view.html b/vnfmarket/src/main/webapp/vnfmarket/app/modules/home/serviceUpload/onboarding/functionalTest/view.html
index 1056ac7b..35fdb528 100644
--- a/vnfmarket/src/main/webapp/vnfmarket/app/modules/home/serviceUpload/onboarding/functionalTest/view.html
+++ b/vnfmarket/src/main/webapp/vnfmarket/app/modules/home/serviceUpload/onboarding/functionalTest/view.html
@@ -12,7 +12,7 @@
     <br>
     <div>
        <!-- <img src="../../../../../common/images/floating-layer-function.png">-->
-        <img src="vnfmarket/common/images/floating_layer_function.png" width="100%" height="40%">
+        <img src="/openoui/vnfmarket/common/images/floating_layer_function.png" width="100%" height="40%">
 
     </div>
     <br>
diff --git a/vnfmarket/src/main/webapp/vnfmarket/common/config/baseUrlConfig.js b/vnfmarket/src/main/webapp/vnfmarket/common/config/baseUrlConfig.js
index c4836889..72b9f5a9 100644
--- a/vnfmarket/src/main/webapp/vnfmarket/common/config/baseUrlConfig.js
+++ b/vnfmarket/src/main/webapp/vnfmarket/common/config/baseUrlConfig.js
@@ -28,8 +28,8 @@
         .module('vnfmarket')
         .constant("baseUrlConfig", {
             "common": {
-                "ip" : "http://127.0.0.1", 
-                "port" : "8080"
+                "ip" : "", //ses
+                "port" : "" //ses
             }
         })
 })();
 \ No newline at end of file
diff --git a/vnfmarket/src/main/webapp/vnfmarket/common/config/configuration.js b/vnfmarket/src/main/webapp/vnfmarket/common/config/configuration.js
index a98c7523..fb8f85e5 100644
--- a/vnfmarket/src/main/webapp/vnfmarket/common/config/configuration.js
+++ b/vnfmarket/src/main/webapp/vnfmarket/common/config/configuration.js
@@ -72,7 +72,7 @@
                 }
             },
             "modulePath": {
-                "home": "vnfmarket/app/modules/home"
+                "home": "/openoui/vnfmarket/app/modules/home"
             }
         })
 })();
 \ No newline at end of file
diff --git a/vnfmarket/src/main/webapp/vnfmarket/common/services/httpService.js b/vnfmarket/src/main/webapp/vnfmarket/common/services/httpService.js
index 1b340061..3141a1f4 100644
--- a/vnfmarket/src/main/webapp/vnfmarket/common/services/httpService.js
+++ b/vnfmarket/src/main/webapp/vnfmarket/common/services/httpService.js
@@ -39,7 +39,8 @@
             var defer = $q.defer()
             $http({
                 method: method,
-                url: baseUrlConfig.common.ip + ":" + baseUrlConfig.common.port + url,
+               //ses url: baseUrlConfig.common.ip + ":" + baseUrlConfig.common.port + url,
+			   url:url,
                 data: data,
                 headers: headers
             }).then(function successCallback(response) {
@@ -50,7 +51,7 @@
                 var parentEl = angular.element(document.body);
                 $mdDialog.show({
                     parent:parentEl,
-                    templateUrl:'vnfmarket/common/templates/serverError.html',
+                    templateUrl:'/openoui/vnfmarket/common/templates/serverError.html',
                     locals:{
                         error:error
                     },
@@ -73,7 +74,8 @@
             var defer = $q.defer()
             $http({
                 method: method,
-                url: baseUrlConfig.common.ip + ":" + baseUrlConfig.common.port + url,
+              //ses  url: baseUrlConfig.common.ip + ":" + baseUrlConfig.common.port + url,
+			   url:url,
                 data: data,
                 headers: headers,
                 transformRequest: angular.identity,
@@ -92,7 +94,7 @@
                 var parentEl = angular.element(document.body);
                 $mdDialog.show({
                     parent:parentEl,
-                    templateUrl:'vnfmarket/common/templates/serverError.html',
+                    templateUrl:'/openoui/vnfmarket/common/templates/serverError.html',
                     locals:{
                         error:error
                     },
diff --git a/vnfmarket/src/main/webapp/vnfmarket/index.html b/vnfmarket/src/main/webapp/vnfmarket/index.html
index f5f8c77c..1293150f 100644
--- a/vnfmarket/src/main/webapp/vnfmarket/index.html
+++ b/vnfmarket/src/main/webapp/vnfmarket/index.html
@@ -24,21 +24,21 @@
 	<meta name="author" content="" />
 	<meta name="keywords" content="" />
 	<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=yes" />
-	<link rel="shortcut icon" href="app/assets/images/favicon.ico" />
-	<link rel="apple-touch-icon" href="app/assets/images/apple-touch-icon.png" />
-	<link rel="apple-touch-icon" sizes="72x72" href="app/assets/images/apple-touch-icon-72x72.png" />
-	<link rel="apple-touch-icon" sizes="114x114" href="app/assets/images/apple-touch-icon-114x114.png" />
+	<link rel="shortcut icon" href="/openoui/vnfmarket/app/assets/images/favicon.ico" />
+	<link rel="apple-touch-icon" href="/openoui/vnfmarket/app/assets/images/apple-touch-icon.png" />
+	<link rel="apple-touch-icon" sizes="72x72" href="/openoui/vnfmarket/app/assets/images/apple-touch-icon-72x72.png" />
+	<link rel="apple-touch-icon" sizes="114x114" href="/openoui/vnfmarket/app/assets/images/apple-touch-icon-114x114.png" />
 	<!-- injector:css -->
-	<link rel="stylesheet" href="vnfmarket/common/thirdparty/angular-material-icons/angular-material-icons.css">
-	<link rel="stylesheet" href="vnfmarket/common/thirdparty/angular-material/angular-material.css">
-	<link rel="stylesheet" href="vnfmarket/common/thirdparty/components-font-awesome/css/font-awesome.css">
-	<link rel="stylesheet" href="vnfmarket/common/thirdparty/angular-material-data-table/dist/md-data-table.css">
+	<link rel="stylesheet" href="/openoui/vnfmarket/common/thirdparty/angular-material-icons/angular-material-icons.css">
+	<link rel="stylesheet" href="/openoui/vnfmarket/common/thirdparty/angular-material/angular-material.css">
+	<link rel="stylesheet" href="/openoui/vnfmarket/common/thirdparty/components-font-awesome/css/font-awesome.css">
+	<link rel="stylesheet" href="/openoui/vnfmarket/common/thirdparty/angular-material-data-table/dist/md-data-table.css">
 	<!-- endinjector -->
-    <link rel="stylesheet" href="vnfmarket/common/thirdparty/bootstrap/dist/css/bootstrap.min.css">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="vnfmarket/common/css/main.css">
-    <link rel="stylesheet" href="vnfmarket/common/css/home.css">
+    <link rel="stylesheet" href="/openoui/vnfmarket/common/thirdparty/bootstrap/dist/css/bootstrap.min.css">
+  <!--  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">  -->
+    <link rel="stylesheet" href="/openoui/vnfmarket/common/css/main.css">
+    <link rel="stylesheet" href="/openoui/vnfmarket/common/css/home.css">
 </head>
 <body ng-cloak>
 
@@ -46,56 +46,56 @@
 <div ui-view layout="row" layout-fill></div>
 <!--End-->
 <!-- injector:js -->
-<script src="vnfmarket/common/thirdparty/jquery/dist/jquery.js"></script>
-<script src="vnfmarket/common/thirdparty/es5-shim/es5-shim.js"></script>
-<script src="vnfmarket/common/thirdparty/json3/lib/json3.min.js"></script>
-<script src="vnfmarket/common/thirdparty/angular/angular.js"></script>
-<script src="vnfmarket/common/thirdparty/angular-aria/angular-aria.js"></script>
-<script src="vnfmarket/common/thirdparty/angular-mocks/angular-mocks.js"></script>
-<script src="vnfmarket/common/thirdparty/angular-cookies/angular-cookies.js"></script>
-<script src="vnfmarket/common/thirdparty/angular-animate/angular-animate.js"></script>
-<script src="vnfmarket/common/thirdparty/angular-sanitize/angular-sanitize.js"></script>
-<script src="vnfmarket/common/thirdparty/angular-resource/angular-resource.js"></script>
-<script src="vnfmarket/common/thirdparty/angular-material-icons/angular-material-icons.min.js"></script>
-<script src="vnfmarket/common/thirdparty/angular-messages/angular-messages.js"></script>
-<script src="vnfmarket/common/thirdparty/angular-material/angular-material.js"></script>
-<script src="vnfmarket/common/thirdparty/angular-ui-router/release/angular-ui-router.js"></script>
-<script src="vnfmarket/common/thirdparty/bootstrap/dist/js/bootstrap.js"></script>
-<script src="vnfmarket/common/thirdparty/angular-material-data-table/dist/md-data-table.js"></script>
-<script src="vnfmarket/common/thirdparty/angular-translate/angular-translate.js"></script>
-<script src="vnfmarket/common/thirdparty/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
-<script src="vnfmarket/app/app.js"></script>
-<script src="vnfmarket/app/app.config.js"></script>
-<script src="vnfmarket/common/config/configuration.js"></script>
-<script src="vnfmarket/common/config/baseUrlConfig.js"></script>
-<script src="vnfmarket/app/modules/home/homeModule.js"></script>
-<script src="vnfmarket/app/modules/home/homeRoute.js"></script>
-<script src="vnfmarket/app/modules/home/homeCtrl.js"></script>
-<script src="vnfmarket/app/modules/home/serviceDelete/serviceDeleteCtrl.js"></script>
-<script src="vnfmarket/app/modules/home/serviceDetails/serviceDetailsCtrl.js"></script>
+<script src="/openoui/vnfmarket/common/thirdparty/jquery/dist/jquery.js"></script>
+<script src="/openoui/vnfmarket/common/thirdparty/es5-shim/es5-shim.js"></script>
+<script src="/openoui/vnfmarket/common/thirdparty/json3/lib/json3.min.js"></script>
+<script src="/openoui/vnfmarket/common/thirdparty/angular/angular.js"></script>
+<script src="/openoui/vnfmarket/common/thirdparty/angular-aria/angular-aria.js"></script>
+<script src="/openoui/vnfmarket/common/thirdparty/angular-mocks/angular-mocks.js"></script>
+<script src="/openoui/vnfmarket/common/thirdparty/angular-cookies/angular-cookies.js"></script>
+<script src="/openoui/vnfmarket/common/thirdparty/angular-animate/angular-animate.js"></script>
+<script src="/openoui/vnfmarket/common/thirdparty/angular-sanitize/angular-sanitize.js"></script>
+<script src="/openoui/vnfmarket/common/thirdparty/angular-resource/angular-resource.js"></script>
+<script src="/openoui/vnfmarket/common/thirdparty/angular-material-icons/angular-material-icons.min.js"></script>
+<script src="/openoui/vnfmarket/common/thirdparty/angular-messages/angular-messages.js"></script>
+<script src="/openoui/vnfmarket/common/thirdparty/angular-material/angular-material.js"></script>
+<script src="/openoui/vnfmarket/common/thirdparty/angular-ui-router/release/angular-ui-router.js"></script>
+<script src="/openoui/vnfmarket/common/thirdparty/bootstrap/dist/js/bootstrap.js"></script>
+<script src="/openoui/vnfmarket/common/thirdparty/angular-material-data-table/dist/md-data-table.js"></script>
+<script src="/openoui/vnfmarket/common/thirdparty/angular-translate/angular-translate.js"></script>
+<script src="/openoui/vnfmarket/common/thirdparty/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
+<script src="/openoui/vnfmarket/app/app.js"></script>
+<script src="/openoui/vnfmarket/app/app.config.js"></script>
+<script src="/openoui/vnfmarket/common/config/configuration.js"></script>
+<script src="/openoui/vnfmarket/common/config/baseUrlConfig.js"></script>
+<script src="/openoui/vnfmarket/app/modules/home/homeModule.js"></script>
+<script src="/openoui/vnfmarket/app/modules/home/homeRoute.js"></script>
+<script src="/openoui/vnfmarket/app/modules/home/homeCtrl.js"></script>
+<script src="/openoui/vnfmarket/app/modules/home/serviceDelete/serviceDeleteCtrl.js"></script>
+<script src="/openoui/vnfmarket/app/modules/home/serviceDetails/serviceDetailsCtrl.js"></script>
 <!--  -->
-<script src="vnfmarket/app/modules/home/serviceDetails/functionalTest/functionalTestService.js"></script>
+<script src="/openoui/vnfmarket/app/modules/home/serviceDetails/functionalTest/functionalTestService.js"></script>
 
-<script src="vnfmarket/app/modules/home/serviceDetails/functionalTest/functionalTestCtrl.js"></script>
-<script src="vnfmarket/app/modules/home/serviceDetails/validation/validationCtrl.js"></script>
-<script src="vnfmarket/app/modules/home/serviceDetails/lifeCycle/lifeCycleCtrl.js"></script>
+<script src="/openoui/vnfmarket/app/modules/home/serviceDetails/functionalTest/functionalTestCtrl.js"></script>
+<script src="/openoui/vnfmarket/app/modules/home/serviceDetails/validation/validationCtrl.js"></script>
+<script src="/openoui/vnfmarket/app/modules/home/serviceDetails/lifeCycle/lifeCycleCtrl.js"></script>
 <!--  -->
-<script src="vnfmarket/app/modules/home/serviceUpload/serviceUploadCtrl.js"></script>
-<script src="vnfmarket/app/modules/layouts/main-page/mainPageCtrl.js"></script>
-<script src="vnfmarket/app/modules/layouts/side-nav/sidenavCtrl.js"></script>
-<script src="vnfmarket/app/modules/home/homeService.js"></script>
-<script src="vnfmarket/app/modules/home/serviceDelete/serviceDeleteService.js"></script>
-<script src="vnfmarket/app/modules/home/serviceDetails/serviceDetailsService.js"></script>
-<script src="vnfmarket/app/modules/home/serviceUpload/serviceUploadService.js"></script>
-<script src="vnfmarket/app/modules/home/serviceUpload/onboarding/onboarding.js"></script>
-<script src="vnfmarket/app/modules/home/serviceUpload/onboarding/onboardingSuccess.js"></script>
-<script src="vnfmarket/app/modules/home/serviceUpload/onboarding/onBoardingService.js"></script>
-<script src="vnfmarket/app/modules/home/serviceUpload/onboarding/validation/validationCtrl.js"></script>
-<script src="vnfmarket/app/modules/home/serviceUpload/onboarding/functionalTest/functionalTestCtrl.js"></script>
-<script src="vnfmarket/app/modules/home/serviceUpload/onboarding/lifeCycle/lifeCycleCtrl.js"></script>
-<script src="vnfmarket/common/services/httpService.js"></script>
-<script src="vnfmarket/common/directives/autofocus/autofocusDirective.js"></script>
-<script src="vnfmarket/common/directives/fileupload/fileuploadDirective.js"></script>
+<script src="/openoui/vnfmarket/app/modules/home/serviceUpload/serviceUploadCtrl.js"></script>
+<script src="/openoui/vnfmarket/app/modules/layouts/main-page/mainPageCtrl.js"></script>
+<script src="/openoui/vnfmarket/app/modules/layouts/side-nav/sidenavCtrl.js"></script>
+<script src="/openoui/vnfmarket/app/modules/home/homeService.js"></script>
+<script src="/openoui/vnfmarket/app/modules/home/serviceDelete/serviceDeleteService.js"></script>
+<script src="/openoui/vnfmarket/app/modules/home/serviceDetails/serviceDetailsService.js"></script>
+<script src="/openoui/vnfmarket/app/modules/home/serviceUpload/serviceUploadService.js"></script>
+<script src="/openoui/vnfmarket/app/modules/home/serviceUpload/onboarding/onboarding.js"></script>
+<script src="/openoui/vnfmarket/app/modules/home/serviceUpload/onboarding/onboardingSuccess.js"></script>
+<script src="/openoui/vnfmarket/app/modules/home/serviceUpload/onboarding/onBoardingService.js"></script>
+<script src="/openoui/vnfmarket/app/modules/home/serviceUpload/onboarding/validation/validationCtrl.js"></script>
+<script src="/openoui/vnfmarket/app/modules/home/serviceUpload/onboarding/functionalTest/functionalTestCtrl.js"></script>
+<script src="/openoui/vnfmarket/app/modules/home/serviceUpload/onboarding/lifeCycle/lifeCycleCtrl.js"></script>
+<script src="/openoui/vnfmarket/common/services/httpService.js"></script>
+<script src="/openoui/vnfmarket/common/directives/autofocus/autofocusDirective.js"></script>
+<script src="/openoui/vnfmarket/common/directives/fileupload/fileuploadDirective.js"></script>
 <!-- endinjector -->
 </body>
 </html>