Merge changes 
diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js b/lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js
index 5155738..053ee41 100644
--- a/lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js
+++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js
@@ -238,7 +238,8 @@
             }, { counts:[5, 10, 15], dataset: $scope.tableData});

 

             $scope.$watch('checkboxes.checked', function(value) {

-                angular.forEach($scope.tableData, function(item) {

+				$scope.checkboxes.items = [];

+                angular.forEach($scope.tableParams.data, function(item) {

                     if (angular.isDefined(item.id)) {

                         $scope.checkboxes.items[item.id] = value;

                     }

@@ -648,7 +649,8 @@
             $scope.checkboxes = { 'checked': false, items: {} };

 

             $scope.$watch('checkboxes.checked', function(value) {

-                angular.forEach($scope.overlayData, function(item) {

+				$scope.checkboxes.items = [];

+                angular.forEach($scope.tableParams.data, function(item) {

                     if (angular.isDefined(item.id)) {

                         $scope.checkboxes.items[item.id] = value;

                     }

@@ -693,7 +695,8 @@
             $scope.checkboxes = { 'checked': false, items: {} };

 

             $scope.$watch('checkboxes.checked', function(value) {

-                angular.forEach($scope.underlayVPN.underlayData, function(item) {

+					  $scope.checkboxes.items = [];

+                angular.forEach($scope.tableParams.data, function(item) {

                     if (angular.isDefined(item.id)) {

                         $scope.checkboxes.items[item.id] = value;

                     }

diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/home.html b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/home.html
index 8030137..4fc8fd7 100644
--- a/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/home.html
+++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/home.html
@@ -43,8 +43,8 @@
             <td title="'Action'">

                 <!--<img src="../images/delete.png" ng-click="editData(lcData.id)" style="cursor: pointer"></img>-->

                 <!--<span class="pull-right glyphicon glyphicon-edit" ng-click="editData(lcData.serviceId)" style="cursor: pointer;margin: 0 5px"></span>-->

-                <span class="pull-right glyphicon glyphicon-trash" ng-click="deleteIndividualData(lcData.serviceId)" style="cursor: pointer;margin: 0 5px"></span>

-                <span class="pull-right glyphicon glyphicon-circle-arrow-right" ng-click="scaleData(lcData.serviceId)" style="cursor: pointer;margin: 0 5px"></span>

+                <span  ng-click="scaleData(lcData.serviceId)" style="cursor: pointer;margin: 0 5px"><img src="/openoui/framework/browser/thirdparty/images/edit.png" height="15" align="left"/></span>

+				<span  ng-click="deleteIndividualData(lcData.serviceId)" 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/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/overlayVPN.html b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/overlayVPN.html
index 5f484f1..1671983 100644
--- a/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/overlayVPN.html
+++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/overlayVPN.html
@@ -53,7 +53,7 @@
         </td>

         <td title="'Action'">

             <!--<span class="pull-right glyphicon glyphicon-edit" ng-click="editData(overlayData.id)" style="cursor: pointer;margin: 0 5px"></span>-->

-            <span class="pull-right glyphicon glyphicon-trash" ng-click="deleteIndividualData(overlayData.id)" style="cursor: pointer;margin: 0 5px"></span>

+           <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>

diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/underlayVPN.html b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/underlayVPN.html
index 385db8c..5cd4126 100644
--- a/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/underlayVPN.html
+++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/underlayVPN.html
@@ -41,7 +41,7 @@
         </td>

         <td title="'Action'">

             <!--<span class="pull-right glyphicon glyphicon-edit" ng-click="editData(underlayData.id)" style="cursor: pointer;margin: 0 5px"></span>-->

-            <span class="pull-right glyphicon glyphicon-trash" ng-click="deleteIndividualData(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>

diff --git a/provincemgr/src/main/webapp/bak/provincemgr/index.html b/provincemgr/src/main/webapp/bak/provincemgr/index.html
new file mode 100644
index 0000000..f53edcc
--- /dev/null
+++ b/provincemgr/src/main/webapp/bak/provincemgr/index.html
@@ -0,0 +1,49 @@
+<!--
+
+    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.
+
+-->
+
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Province Management</title>
+    <link href="thirdparty/css/bootstrap.min.css" rel="stylesheet"/>
+    <link href="thirdparty/css/font-awesome.min.css" rel="stylesheet">
+    <link href="thirdparty/css/zTreeStyle.css" rel="stylesheet"/>
+    <link href="thirdparty/css/magic-check.css" rel="stylesheet"/>
+    <link href="thirdparty/css/ng-table.min.css" rel="stylesheet"/>
+    <link href="framework/css/open-ostyle.css" rel="stylesheet"/>
+    <script src="thirdparty/js/angular.min.js"></script>
+    <script src="thirdparty/js/angular-ui-router.min.js"></script>
+    <script src="thirdparty/js/ng-table.min.js"></script>
+    <script src="thirdparty/js/jquery_1.12.4.min.js"></script>
+    <script src="thirdparty/js/jquery-ui.js"></script>
+    <script type="text/javascript" src="thirdparty/js/bootstrap.min.js"></script>
+    <script src="js/app.js"></script>
+    <script src="js/rest.js"></script>
+    <script src="framework/js/DataService.js"></script>
+    <script src="thirdparty/js/mustache.js"></script>
+    <script src="thirdparty/js/jquery.ztree.core-3.5.js"></script>
+
+</head>
+
+<body ng-app="ProvinceManagementApp" onload="loadTemplate()">
+<ui-view></ui-view>
+</body>
+</html>
\ No newline at end of file
diff --git a/provincemgr/src/main/webapp/bak/provincemgr/js/app.js b/provincemgr/src/main/webapp/bak/provincemgr/js/app.js
new file mode 100644
index 0000000..b8979dd
--- /dev/null
+++ b/provincemgr/src/main/webapp/bak/provincemgr/js/app.js
@@ -0,0 +1,303 @@
+/*

+

+ 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.

+

+ */

+

+var app = angular.module("ProvinceManagementApp", ["ui.router", "ngTable"])

+

+    .config(function($stateProvider, $urlRouterProvider, $urlMatcherFactoryProvider){

+

+        $urlMatcherFactoryProvider.caseInsensitive(true);

+        $urlRouterProvider.otherwise('/provinceMgmt');

+        $stateProvider

+            .state("" +

+                "provinceMgmt", {

+                url: "/provinceMgmt",

+                templateUrl : "templates/management.html",

+                controller : "managementCtrl"

+            })

+    })

+

+

+    .controller("managementCtrl", function($scope, $log, provinceDataService, $state, $compile, NgTableParams){

+        $scope.message = "Management";

+

+        $scope.init = function() {

+            provinceDataService.getAllProvinceData()

+                .then(function(data){

+                    $scope.provinceData = data.provinceData;

+                    console.log("Data: ");

+                    loadButtons();

+                    $log.info(data.provinceData);

+                }, function(reason){

+                    $scope.message = "Error is :" + JSON.stringify(reason);

+                });

+

+            /*DataService.post("http://localhost:4000/api/getAllJSONData", {"wdgtType":$scope.provinceTip})

+                .then(function(data){

+                    $scope.provinceTipData = data.data.provinceTip;

+                });*/

+        }

+

+        function loadButtons() {

+

+            console.log("modelTemplate issss"+modelTemplate);

+            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 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);

+            $('#provinceAction').html($compile(addhtml)($scope));

+

+

+

+            $('#provinceAction').append($compile(deletehtml)($scope));

+

+            $('#managementDialog').html($compile(dialog)($scope));

+

+            $scope.checkboxes = { 'checked': false, items: {} };

+

+            $scope.tableParams = new NgTableParams({count: 5, sorting: {province_name: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}

+            }, { counts:[5, 10, 20, 50], dataset: $scope.provinceData});

+

+            $scope.$watch('checkboxes.checked', function(value) {

+                angular.forEach($scope.provinceData, function(item) {

+                    if (angular.isDefined(item.id)) {

+                        $scope.checkboxes.items[item.id] = value;

+                    }

+                });

+            });

+

+            var text = $(modelTemplate).filter('#textfield').html();

+            var ipv4 = $(modelTemplate).filter('#ipv4').html();

+            var number = $(modelTemplate).filter('#numeric').html();

+

+            $('#managementDialog .modalHeader').html('<h5 class="modal-title titlestyle">Modal Header</h5>');

+            $('#managementDialog .modalBodyContent').html('<div class="form-group row"> <label class="col-xs-4 col-form-label labelstyle">Name</label> <div class="col-xs-8 provinceName" > </div> </div>');

+            $('#managementDialog .modalBodyContent').append('<div class="form-group row"> <label class="col-xs-4 col-form-label labelstyle">IP Address</label> <div class="col-xs-8 ipAddress" > </div> </div>');

+            $('#managementDialog .modalBodyContent').append(' <div class="form-group row"> <label for="port" class="col-xs-4 col-form-label labelstyle">Port</label> <div class="col-xs-8 port" > </div> </div>');

+            $('#managementDialog .modalBodyContent').append(' <div class="form-group row"> <label for="desc" class="col-xs-4 col-form-label labelstyle">Description</label> <div class="col-xs-8 desc" > </div> </div>');

+

+

+

+            var dataText = {"ErrMsg" :     {"errmsg" : "Please input Name.", "modalVar":"province.province_name", "placeholder":"Name", "errtag":"ptextboxErr", "errfunc":"validatetextbox", "required":true}};

+            $('#managementDialog .provinceName').html($compile(Mustache.to_html(text, dataText.ErrMsg))($scope));

+

+            var dataIP = {"ErrMsg" :     {"errmsg" : "Please input IP Address.", "modalVar":"province.ip", "placeholder":"IP Address"}};

+            $('#managementDialog .ipAddress').html($compile(Mustache.to_html(ipv4, dataIP.ErrMsg))($scope));

+

+            var dataNum = {"ErrMsg" :     {"errmsg" : "Please input port.", "modalVar":"province.port", "placeholder":"Port"}};

+            $('#managementDialog .port').html($compile(Mustache.to_html(number, dataNum.ErrMsg))($scope));

+

+            var dataText = {"ErrMsg" :     {"errmsg" : "Please input description.", "modalVar":"province.desc", "placeholder":"Description"}};

+            $('#managementDialog .desc').html($compile(Mustache.to_html(text, dataText.ErrMsg))($scope));

+

+            var modelSubmit_data = {"title":"OK", "clickAction":"saveData(province.id)"};

+            var modelSubmit_html = Mustache.to_html(def_button_tpl, modelSubmit_data);

+            $('#managementDialog #footerBtns').html($compile(modelSubmit_html)($scope));

+

+            var modelBtn_data = {"title":"Cancel", "clickAction":"closeModal()"};

+            var modelBtn_html = Mustache.to_html(def_button_tpl, modelBtn_data);

+            $('#managementDialog #footerBtns').append($compile(modelBtn_html)($scope));

+        }

+

+        $scope.validatetextbox = function (value){

+            if($scope.province.province_name) {

+                $scope.ptextboxErr = false;

+            }

+            else

+                $scope.ptextboxErr = true;

+        }

+

+        $scope.checkAll = function() {

+            console.log("Checked ..");

+            angular.forEach($scope.provinceData, function(data) {

+                $scope.checkboxes.items[user.id]

+            });

+        };

+

+        $scope.closeModal = function() {

+            console.log("Closing Modal...");

+            $('#uniModal').modal('hide');

+            console.log("@@@@@@@@@@@@@@@@@@");

+            $state.reload();

+        }

+

+        $scope.showAddModal = function() {

+            console.log("Showing Modal to Add data");

+            $scope.province = {};

+            $scope.textboxErr = false;

+            $scope.ipv4Err = false;

+            $scope.numericErr = false;

+            //$("#myModal").modal();

+            $("#uniModal").modal({}).draggable();

+        }

+        $scope.saveData = function(id) {

+            if(id) {

+                //edit data

+                console.log("Editing data.." + JSON.stringify($scope.province));

+                provinceDataService.editProvinceData($scope.province)

+                    .then(function (data) {

+                            $scope.message = "Success :-)";

+                            $state.reload();

+                        },

+                        function (reason) {

+                            $scope.message = reason.status + " " + reason.statusText;

+                        });

+            }

+            else {

+                console.log("Adding data.." + JSON.stringify($scope.province));

+                provinceDataService.addProvinceData($scope.province)

+                    .then(function (data) {

+                            $scope.message = "Success :-)";

+                            $state.reload();

+                        },

+                        function (reason) {

+                            $scope.message = reason.status + " " + reason.statusText;

+                        });

+            }

+            $('#uniModal').modal('hide');

+        }

+

+        /*$scope.deleteIndividualData = function(id) {

+            var deleteArr = [];

+            //$log.info($scope.checkboxes);

+            deleteArr.push(id);

+

+            console.log("To be deleted : "+deleteArr);

+            //$log.info(deleteArr);

+

+

+            provinceDataService.post("http://localhost:4000/api/deleteProvinceData", {'idList':deleteArr})

+                .then(function(data){

+                        $scope.message = "Successfully deleted :-)";

+                        $state.reload();

+                    },

+                    function(reason){

+                        //$log.info(reason);

+                        $scope.message = reason.status + " " + reason.statusText;

+                    });

+        }*/

+        $scope.deleteData = function(id) {

+            var confirmation=false;

+            var dialog_tpl = $(modelTemplate).filter('#personDialog').html();

+            var error = {"err_data" : { "title": "Error",

+                "showClose": "true",

+                "closeBtnTxt": "Cancel",

+                "icon": "glyphicon glyphicon-exclamation-sign",

+                "iconColor": "icon_error",

+                "msg": "Do you really wanted to Delete?.",

+                "buttons": [

+                    {

+                        "text": "OK", "action": "deleteConfirmation("+id+")"

+                    }]

+            }};

+            angular.forEach($scope.checkboxes.items, function(value) {

+                if(value) {

+                    checkbox = true;

+                }

+            });

+            if (checkbox || (typeof id !== "undefined")) {

+                var html = Mustache.to_html(dialog_tpl, error.err_data);

+                $($compile(html)($scope)).modal({backdrop: "static"});

+            }

+        }

+

+        $scope.deleteConfirmation = function(id) {

+            console.log("data in province data is :");

+            $log.info($scope.provinceData);

+            var deleteArr = [];

+            if (typeof id !== "undefined"){

+

+                deleteArr.push(id);

+            }else{

+                angular.forEach($scope.checkboxes.items, function (value, key) {

+                    if (value) {

+                        console.log("deleting name is :" + key);

+                        deleteArr.push(key);

+                    }

+                });

+

+            }

+

+            console.log("To be deleted : " + deleteArr);

+

+            for(var i = 0; i < deleteArr.length; i++) {

+                console.log("To be deleted : "+deleteArr[i]);

+                provinceDataService.deleteProvinceData(deleteArr[i])

+                    .then(function(data){

+                            $scope.message = "Successfully deleted :-)";

+                            $state.reload();

+                        },

+                        function(reason){

+                            $scope.message = reason.status + " " + reason.statusText;

+                        });

+            }

+

+           /* provinceDataService.post("http://localhost:4000/api/deleteProvinceData", {'idList':deleteArr})

+                .then(function (data) {

+                        $scope.message = "Successfully deleted :-)";

+                        $state.reload();

+                    },

+                    function (reason) {

+                        $scope.message = reason.status + " " + reason.statusText;

+                    });*/

+        }

+

+        $scope.editData = function(id) {

+            $scope.textboxErr = false;

+            $scope.ipv4Err = false;

+            $scope.numericErr = false;

+            console.log("To be edited : " + id);

+            var dataFound = false;

+            angular.forEach($scope.provinceData, function(data) {

+                if(!dataFound) {

+                    if (data.id == id) {

+                        console.log("Found : " + data.id);

+                        $scope.province = data;

+

+                        $("#uniModal").modal();

+                        dataFound = true;

+                    }

+                }

+            });

+        }

+

+    })

+

+var modelTemplate = "";

+function loadTemplate() {

+    $.get('framework/template.html', function (template) {

+        modelTemplate += template;

+    });

+    $.get('framework/templateContainer.html', function (template) {

+        modelTemplate += template;

+    });

+    $.get('framework/templateWidget.html', function (template) {

+        //console.log("Template is : "+template);

+        modelTemplate += template;

+    });

+    $.get('framework/templateNotification.html', function (template) {

+        modelTemplate += template;

+    });

+    $.get('framework/templateFunctional.html', function (template) {

+        modelTemplate += template;

+    });

+}
\ No newline at end of file
diff --git a/provincemgr/src/main/webapp/bak/provincemgr/js/rest.js b/provincemgr/src/main/webapp/bak/provincemgr/js/rest.js
new file mode 100644
index 0000000..6432ca1
--- /dev/null
+++ b/provincemgr/src/main/webapp/bak/provincemgr/js/rest.js
@@ -0,0 +1,94 @@
+/*

+

+ 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.

+

+ */

+

+

+app.factory("provinceDataService", function($http,DataService, $log){

+    var uri ;//'http://192.168.9.13:18008';

+    return {

+        getAllProvinceData : function() {

+            /*return $http({

+                url: 'http://localhost:4000/api/getAllProvinceData',

+                method: 'GET',

+                headers: {'Content-Type': 'application/json'}

+            }).then(function(response){

+                //$log.info(response);

+                return response.data;

+            });*/

+            return DataService.get(uri+'/api/getAllProvinceData')

+                .then(function(response){

+                    $log.info("in get data service data is  :"+response);

+                    console.log(response);

+                    return response;

+                });

+        },

+        addProvinceData : function(provinceDetail) {

+            /*return $http({

+                url: 'http://localhost:4000/api/addProvinceData',

+                method: 'POST',

+                data: provinceDetail,

+                headers: {'Content-Type': 'application/json '}

+            }).then(function(response){

+                console.log("Response : ");

+                $log.info(response.data);

+                return response.data;

+            });*/

+            return DataService.post(uri+'/api/addProvinceData', provinceDetail)

+                .then(function(response){

+                    console.log("Successfully added.. Data returned in DataService is");

+                    console.log(response);

+                    return response;

+                });

+        },

+        deleteProvinceData : function(id) {

+            /*return $http({

+                url: 'http://localhost:4000/api/deleteProvinceData',

+                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+'/api/deleteProvinceData'+"/"+id)

+                .then(function(response){

+                    $log.info("in delete data service data is  :"+response);

+                    console.log(response);

+                    return response;

+                });

+        },

+        editProvinceData : function(provinceDetail) {

+            /*return $http({

+                url: 'http://localhost:4000/api/editProvinceData',

+                method: 'POST',

+                data: provinceDetail,

+                headers: {'Content-Type': 'application/json'}

+            }).then(function(response){

+                console.log("Successfully Edited...");

+                $log.info(response);

+                return response.data;

+            });*/

+            return DataService.put(uri+'/api/editProvinceData', provinceDetail)

+                .then(function(response){

+                    console.log("Successfully edited.. Data returned in DataService is");

+                    console.log(response);

+                    return response;

+                });

+        }

+    }

+});

diff --git a/provincemgr/src/main/webapp/bak/provincemgr/templates/management.html b/provincemgr/src/main/webapp/bak/provincemgr/templates/management.html
new file mode 100644
index 0000000..934eff0
--- /dev/null
+++ b/provincemgr/src/main/webapp/bak/provincemgr/templates/management.html
@@ -0,0 +1,110 @@
+<!--

+

+    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="homecontent center">

+<div class="col-md-12 col-sm-12 col-lg-12">

+    <h4>{{message}}</h4>

+    <br><br>

+    <div id="provinceAction" ng-init="init()">

+

+    </div>

+    <br>

+    <br>

+

+    <table ng-table="tableParams" class="table table-bordered table-striped customtable" show-filter="true">

+        <tr ng-repeat="provinceData in $data">

+            <td header="'ng-table/headers/checkbox.html'">

+                <input type="checkbox" ng-model="checkboxes.items[provinceData.id]" />

+            </td>

+            <td title="'Name'" filter="{ province_name: 'text'}" sortable="'province_name'">

+                {{provinceData.province_name}}

+            </td>

+            <td title="'IP Address'" filter="{ ip: 'text'}" sortable="'ip'">

+                {{provinceData.ip}}

+            </td>

+            <td title="'Port'" filter="{ port: 'number'}" sortable="'port'">

+                {{provinceData.port}}

+            </td>

+            <td title="'Description'" filter="{ port: 'text'}" sortable="'desc'">

+                {{provinceData.desc}}

+            </td>

+            <td title="'Action'">

+                <span  ng-click="editData(provinceData.id)" style="cursor: pointer;margin: 0 5px"> <img src="framework/images/edit.png" height="15" align="left"/></span>

+                <span  ng-click="deleteData(provinceData.id)" style="cursor: pointer;margin: 0 5px"><img src="framework/images/delete.png" height="15" align="middle"/></span>

+            </td>

+        </tr>

+    </table>

+

+

+    <script type="text/ng-template" id="ng-table/headers/checkbox.html">

+        <input type="checkbox" ng-model="checkboxes.checked" name="filter-checkbox" value="" />

+    </script>

+

+    <!--<div id="myTable"></div>-->

+

+

+     <!--Modal-->

+    <!--<div id="managementDialog" class="modal fade" role="dialog">

+        <div class="modal-dialog">

+

+            &lt;!&ndash; Modal content&ndash;&gt;

+            <div class="modal-content">

+                <div class="modal-header">

+                    <button type="button" class="close" data-dismiss="modal">&times;</button>

+                    <h5 class="modal-title titlestyle">Modal Header</h5>

+                </div>

+                <form name="provinceForm" method="post">

+                    <div class="modal-body">

+

+                        <div class="form-group row">

+                            <label class="col-xs-4 col-form-label labelstyle">Name</label>

+                            <div class="col-xs-8 provinceName" >

+                                &lt;!&ndash;<input class="form-control" ng-model="province.province_name" type="text" value="" placeholder="Province Name" id="pname" required><br>&ndash;&gt;

+                            </div>

+                        </div>

+                        <div class="form-group row">

+                            <label class="col-xs-4 col-form-label labelstyle">IP Address</label>

+                            <div class="col-xs-8 ipAddress" >

+                                &lt;!&ndash;<input class="form-control" ng-model="province.ip" type="ipv4" pattern="((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$" value="" placeholder="IP Address" id="ipaddress" required><br>&ndash;&gt;

+                            </div>

+                        </div>

+                        <div class="form-group row">

+                            <label class="col-xs-4 col-form-label labelstyle">Port</label>

+                            <div class="col-xs-8 port" >

+                                &lt;!&ndash;<input class="form-control" ng-model="province.port" type="number" value="" placeholder="Port" id="port"  required>&ndash;&gt;

+

+                            </div>

+                        </div>

+

+                        &lt;!&ndash;<input type="submit" class="btn btn-default" value="validate"/>&ndash;&gt;

+

+                    </div>

+

+                    <div id="footerBtns" class="modal-footer">

+

+                    </div>

+                </form>

+            </div>

+

+

+        </div>

+    </div>-->

+    <!--<div id="myModal" class="modal-header">-->

+    <div id="managementDialog"></div>

+    <!--</div>-->

+</div>

+</div>
\ No newline at end of file
diff --git a/provincemgr/src/main/webapp/provincemgr/index.html b/provincemgr/src/main/webapp/provincemgr/index.html
index f53edcc..6f9b899 100644
--- a/provincemgr/src/main/webapp/provincemgr/index.html
+++ b/provincemgr/src/main/webapp/provincemgr/index.html
@@ -23,23 +23,24 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Province Management</title>
-    <link href="thirdparty/css/bootstrap.min.css" rel="stylesheet"/>
-    <link href="thirdparty/css/font-awesome.min.css" rel="stylesheet">
-    <link href="thirdparty/css/zTreeStyle.css" rel="stylesheet"/>
-    <link href="thirdparty/css/magic-check.css" rel="stylesheet"/>
-    <link href="thirdparty/css/ng-table.min.css" rel="stylesheet"/>
-    <link href="framework/css/open-ostyle.css" rel="stylesheet"/>
-    <script src="thirdparty/js/angular.min.js"></script>
-    <script src="thirdparty/js/angular-ui-router.min.js"></script>
-    <script src="thirdparty/js/ng-table.min.js"></script>
-    <script src="thirdparty/js/jquery_1.12.4.min.js"></script>
-    <script src="thirdparty/js/jquery-ui.js"></script>
-    <script type="text/javascript" src="thirdparty/js/bootstrap.min.js"></script>
-    <script src="js/app.js"></script>
-    <script src="js/rest.js"></script>
-    <script src="framework/js/DataService.js"></script>
-    <script src="thirdparty/js/mustache.js"></script>
-    <script src="thirdparty/js/jquery.ztree.core-3.5.js"></script>
+    <link href="/openoui/thirdparty/css/bootstrap.min.css" rel="stylesheet"/>
+    <link href="/openoui/thirdparty/css/font-awesome.min.css" rel="stylesheet">
+    <link href="/openoui/thirdparty/css/zTreeStyle.css" rel="stylesheet"/>
+    <link href="/openoui/thirdparty/css/magic-check.css" rel="stylesheet"/>
+    <link href="/openoui/thirdparty/css/ng-table.min.css" rel="stylesheet"/>
+    <link href="/openoui/framework/css/open-ostyle.css" rel="stylesheet"/>
+
+    <script src="/openoui/thirdparty/js/angular.min.js"></script>
+    <script src="/openoui/thirdparty/js/angular-ui-router.min.js"></script>
+    <script src="/openoui/thirdparty/js/ng-table.min.js"></script>
+    <script src="/openoui/thirdparty/js/jquery_1.12.4.min.js"></script>
+    <script src="/openoui/thirdparty/js/jquery-ui.js"></script>
+    <script type="text/javascript" src="/openoui/thirdparty/js/bootstrap.min.js"></script>
+    <script src="/openoui/provincemgr/js/app.js"></script>
+    <script src="/openoui/provincemgr/js/rest.js"></script>
+	<script type="text/javascript" src="/openoui/provincemgr/js/DataService.js"></script>
+    <script src="/openoui/thirdparty/js/mustache.js"></script>
+    <script src="/openoui/thirdparty/js/jquery.ztree.core-3.5.js"></script>
 
 </head>
 
diff --git a/provincemgr/src/main/webapp/provincemgr/js/DataService.js b/provincemgr/src/main/webapp/provincemgr/js/DataService.js
new file mode 100644
index 0000000..750e802
--- /dev/null
+++ b/provincemgr/src/main/webapp/provincemgr/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/provincemgr/src/main/webapp/provincemgr/js/app.js b/provincemgr/src/main/webapp/provincemgr/js/app.js
index b8979dd..7a97217 100644
--- a/provincemgr/src/main/webapp/provincemgr/js/app.js
+++ b/provincemgr/src/main/webapp/provincemgr/js/app.js
@@ -6,7 +6,7 @@
  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

+ 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,

@@ -33,7 +33,7 @@
 

 

     .controller("managementCtrl", function($scope, $log, provinceDataService, $state, $compile, NgTableParams){

-        $scope.message = "Management";

+        $scope.title = "Management";

 

         $scope.init = function() {

             provinceDataService.getAllProvinceData()

@@ -43,6 +43,7 @@
                     loadButtons();

                     $log.info(data.provinceData);

                 }, function(reason){

+					loadButtons();

                     $scope.message = "Error is :" + JSON.stringify(reason);

                 });

 

@@ -284,20 +285,20 @@
 

 var modelTemplate = "";

 function loadTemplate() {

-    $.get('framework/template.html', function (template) {

+    $.get('/openoui/resmgr/templates/template.html', function (template) {

         modelTemplate += template;

     });

-    $.get('framework/templateContainer.html', function (template) {

+    $.get('/openoui/resmgr/templates/templateContainer.html', function (template) {

         modelTemplate += template;

     });

-    $.get('framework/templateWidget.html', function (template) {

+    $.get('/openoui/resmgr/templates/templateWidget.html', function (template) {

         //console.log("Template is : "+template);

         modelTemplate += template;

     });

-    $.get('framework/templateNotification.html', function (template) {

+    $.get('/openoui/resmgr/templates/templateNotification.html', function (template) {

         modelTemplate += template;

     });

-    $.get('framework/templateFunctional.html', function (template) {

+    $.get('/openoui/resmgr/templates/templateFunctional.html', function (template) {

         modelTemplate += template;

     });

 }
\ No newline at end of file
diff --git a/provincemgr/src/main/webapp/provincemgr/js/rest.js b/provincemgr/src/main/webapp/provincemgr/js/rest.js
index 6432ca1..b2c994c 100644
--- a/provincemgr/src/main/webapp/provincemgr/js/rest.js
+++ b/provincemgr/src/main/webapp/provincemgr/js/rest.js
@@ -18,7 +18,8 @@
 

 

 app.factory("provinceDataService", function($http,DataService, $log){

-    var uri ;//'http://192.168.9.13:18008';

+    /* var uri = 'http://192.168.9.13:18008'; */

+    var uri ;

     return {

         getAllProvinceData : function() {

             /*return $http({

diff --git a/provincemgr/src/main/webapp/provincemgr/templates/management.html b/provincemgr/src/main/webapp/provincemgr/templates/management.html
index 934eff0..ccbd45e 100644
--- a/provincemgr/src/main/webapp/provincemgr/templates/management.html
+++ b/provincemgr/src/main/webapp/provincemgr/templates/management.html
@@ -17,7 +17,7 @@
 -->

 <div class="homecontent center">

 <div class="col-md-12 col-sm-12 col-lg-12">

-    <h4>{{message}}</h4>

+    <h4>{{title}}</h4>

     <br><br>

     <div id="provinceAction" ng-init="init()">

 

@@ -43,8 +43,8 @@
                 {{provinceData.desc}}

             </td>

             <td title="'Action'">

-                <span  ng-click="editData(provinceData.id)" style="cursor: pointer;margin: 0 5px"> <img src="framework/images/edit.png" height="15" align="left"/></span>

-                <span  ng-click="deleteData(provinceData.id)" style="cursor: pointer;margin: 0 5px"><img src="framework/images/delete.png" height="15" align="middle"/></span>

+                <span  ng-click="editData(provinceData.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(provinceData.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/provincemgr/src/main/webapp/provincemgr/templates/templateContainer.html b/provincemgr/src/main/webapp/provincemgr/templates/templateContainer.html
new file mode 100644
index 0000000..ef6f01c
--- /dev/null
+++ b/provincemgr/src/main/webapp/provincemgr/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/provincemgr/src/main/webapp/provincemgr/templates/templateFunctional.html b/provincemgr/src/main/webapp/provincemgr/templates/templateFunctional.html
new file mode 100644
index 0000000..ff2f53f
--- /dev/null
+++ b/provincemgr/src/main/webapp/provincemgr/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/provincemgr/src/main/webapp/provincemgr/templates/templateNotification.html b/provincemgr/src/main/webapp/provincemgr/templates/templateNotification.html
new file mode 100644
index 0000000..97f26e3
--- /dev/null
+++ b/provincemgr/src/main/webapp/provincemgr/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/provincemgr/src/main/webapp/provincemgr/templates/templateWidget.html b/provincemgr/src/main/webapp/provincemgr/templates/templateWidget.html
new file mode 100644
index 0000000..bb8eef4
--- /dev/null
+++ b/provincemgr/src/main/webapp/provincemgr/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/resmgr/src/main/webapp/resmgr/js/app.js b/resmgr/src/main/webapp/resmgr/js/app.js
index be7b5ee..b86393f 100644
--- a/resmgr/src/main/webapp/resmgr/js/app.js
+++ b/resmgr/src/main/webapp/resmgr/js/app.js
@@ -147,6 +147,10 @@
             };

 

             $('#myModal #type').append($compile(Mustache.to_html(dropDown, dropSimple_data))($scope));*/

+			

+			var dropdownResponse=[{"serviceTemplateId":"tenant_site","templateName":"portType1"},{"serviceTemplateId":"tenant_site2","templateName":"portType2"}];

+			var dropdownInfo = translateToDropdownInfo(dropdownResponse);

+            document.getElementById("portdropdown").innerHTML = dropdownInfo;

 

             var portType = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"port.logicalType"}};

             $('#myModal #logicalType').append($compile(Mustache.to_html(text, portType.ErrMsg))($scope));

@@ -164,6 +168,11 @@
             };

 

             $('#myModal #Edgepoint').append($compile(Mustache.to_html(dropDown, dropSimple_data))($scope));*/

+			

+			var dropdownResponse=[{"serviceTemplateId":"tenant_site","templateName":"Edgepoint1"},{"serviceTemplateId":"tenant_site2","templateName":"Edgepoint2"}];

+			var dropdownInfo = translateToDropdownInfo(dropdownResponse);

+            document.getElementById("portEdropdown").innerHTML = dropdownInfo;

+			

 

             var portEdgepoint = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"port.isEdgePoint"}};

             $('#myModal #isEdgePoint').append($compile(Mustache.to_html(text, portEdgepoint.ErrMsg))($scope));

@@ -186,7 +195,8 @@
             }, { counts:[5, 10, 20, 50], dataset: $scope.data});

 

             $scope.$watch('checkboxes.checked', function(value) {

-                angular.forEach($scope.data, function(item) {

+				 $scope.checkboxes.items = [];

+                angular.forEach($scope.portTableParams.data, function(item) {

                     if (angular.isDefined(item.id)) {

                         $scope.checkboxes.items[item.id] = value;

                     }

@@ -194,6 +204,18 @@
             });

 

         }

+		

+		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].serviceTemplateId + '">' + dropdowndata[i].templateName

+                    + '</option>';

+                options = options + option;

+            }

+

+            return options;

+        } 

 

         $scope.validatetextboxName = function (value){

             if($scope.port.name) {

@@ -303,7 +325,7 @@
                 "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) {

@@ -321,7 +343,7 @@
             console.log("data in port data is ::");

             $log.info($scope.data.portData);

             var deleteArr = [];

-            if (typeof id !== "undefined"){

+            if (id){

 

                 deleteArr.push(id);

             }

@@ -355,6 +377,8 @@
                     if (data.id == id) {

                         console.log("Found : " + data.id);

                         $scope.port = data;

+						$('#portdropdown').val(data.logicalType);

+						$('#portEdropdown').val(data.isEdgePoint);

                         $("#myModal").modal();

                         dataFound = true;

                     }

@@ -401,7 +425,8 @@
             }, { counts:[5, 10, 20, 50], dataset: $scope.data});

 

             $scope.$watch('checkboxes.checked', function(value) {

-                angular.forEach($scope.data, function(item) {

+				 $scope.checkboxes.items = [];

+                angular.forEach($scope.siteTableParams.data, function(item) {

                     console.log(item.id);

                     if (angular.isDefined(item.id)) {

                         $scope.checkboxes.items[item.id] = value;

@@ -437,6 +462,10 @@
             };

 

             $('#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 dropdownInfo = translateToDropdownInfo(dropdownResponse);

+            document.getElementById("sitedropdown").innerHTML = dropdownInfo;

 

             var siteType = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"site.type"}};

             $('#myModal #type').append($compile(Mustache.to_html(text, siteType.ErrMsg))($scope));

@@ -451,6 +480,19 @@
             $('#myModal #location').append($compile(Mustache.to_html(text, siteLocation.ErrMsg))($scope));

         }

 

+		

+		 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].serviceTemplateId + '">' + dropdowndata[i].templateName

+                    + '</option>';

+                options = options + option;

+            }

+

+            return options;

+        } 

+		

         $scope.validatetextboxName = function (value){

             if($scope.site.name) {

                 $scope.textboxErrName = false;

@@ -529,7 +571,7 @@
                 "msg": "Do you really wanted to Delete?.",

                 "buttons": [

                     {

-                        "text": "Ok", "action": "deleteConfirmation("+id+")"

+                        "text": "Ok", "action": "deleteConfirmation('"+[id]+"')"

                     }]

             }};

 

@@ -548,7 +590,7 @@
             console.log("data in site data is :");

             $log.info($scope.data.siteData);

             var deleteArr = [];

-            if (typeof id !== "undefined"){

+            if (id){

 

                 deleteArr.push(id);

             }

@@ -583,6 +625,7 @@
                         console.log("Found : " + data.name);

                         console.log("Found : " + data);

                         $scope.site = data;

+						$('#sitedropdown').val(data.type);

                         $("#myModal").modal();

                         dataFound = true;

                     }

@@ -658,7 +701,8 @@
             }, { counts:[5, 10, 20, 50], dataset: $scope.data.locationData});

 

             $scope.$watch('checkboxes.checked', function(value) {

-                angular.forEach($scope.data.locationData, function(item) {

+				 $scope.checkboxes.items = [];

+                angular.forEach($scope.neTableParams.data, function(item) {

                     if (angular.isDefined(item.Id)) {

                         $scope.checkboxes.items[item.Id] = value;

                     }

@@ -768,7 +812,7 @@
                 "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) {

@@ -786,7 +830,7 @@
             console.log("data in location data is :");

             $log.info($scope.data.locationData);

             var deleteArr = [];

-            if (typeof id !== "undefined"){

+            if (id){

 

                 deleteArr.push(id);

             }

@@ -882,6 +926,10 @@
             };

 

             $('#myModal #type').append($compile(Mustache.to_html(dropDown, dropSimple_data))($scope));*/

+			

+			var dropdownResponse=[{"serviceTemplateId":"tenant_site","templateName":"TP1"},{"serviceTemplateId":"tenant_site2","templateName":"TP2"}];

+			var dropdownInfo = translateToDropdownInfo(dropdownResponse);

+            document.getElementById("linkdropdown").innerHTML = dropdownInfo;

 

             var linkType = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"link.logicalType"}};

             $('#myModal #logicalType').append($compile(Mustache.to_html(text, linkType.ErrMsg))($scope));

@@ -913,7 +961,8 @@
             }, { counts:[5, 10, 20, 50], dataset: $scope.data});

 

             $scope.$watch('checkboxes.checked', function(value) {

-                angular.forEach($scope.data, function(item) {

+				 $scope.checkboxes.items = [];

+                angular.forEach($scope.linkTableParams.data, function(item) {

                     console.log(item.id);

                     if (angular.isDefined(item.id)) {

                         $scope.checkboxes.items[item.id] = value;

@@ -922,6 +971,18 @@
             });

 

         }

+		

+		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].serviceTemplateId + '">' + dropdowndata[i].templateName

+                    + '</option>';

+                options = options + option;

+            }

+

+            return options;

+        } 

 

         $scope.validatetextbox = function (value){

             if($scope.link.name) {

@@ -1014,7 +1075,7 @@
                 "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) {

@@ -1032,7 +1093,7 @@
             console.log("data in link data is :");

             $log.info($scope.data.linkData);

             var deleteArr = [];

-            if (typeof id !== "undefined"){

+            if (id){

 

                 deleteArr.push(id);

             }

@@ -1066,6 +1127,7 @@
                     if (data.id == id) {

                         console.log("Found : " + data.id);

                         $scope.link = data;

+						$('#linkdropdown').val(data.logicalType);

                         $("#myModal").modal();

                         dataFound = true;

                     }

@@ -1133,6 +1195,10 @@
             };

 

             $('#myModal #controller').append($compile(Mustache.to_html(dropDown, dropSimple_data))($scope));*/

+			

+			var dropdownResponse=[{"serviceTemplateId":"meCtrl","templateName":"mecontroller1"},{"serviceTemplateId":"meCtrl2","templateName":"mecontroller"}];

+			var dropdownInfo = translateToDropdownInfo(dropdownResponse);

+            document.getElementById("medropdown").innerHTML = dropdownInfo;

 

             var neController = {"ErrMsg" :     {"errmsg" : "IP Address is required.", "modalVar":"ne.controller"}};

             $('#myModal #controller').append($compile(Mustache.to_html(text, neController.ErrMsg))($scope));

@@ -1155,7 +1221,8 @@
             }, { counts:[5, 10, 20, 50], dataset: $scope.data});

 

             $scope.$watch('checkboxes.checked', function(value) {

-                angular.forEach($scope.data, function(item) {

+				 $scope.checkboxes.items = [];

+                angular.forEach($scope.neTableParams.data, function(item) {

                     if (angular.isDefined(item.id)) {

                         $scope.checkboxes.items[item.id] = value;

                     }

@@ -1163,6 +1230,18 @@
             });

 

         }

+		

+		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].serviceTemplateId + '">' + dropdowndata[i].templateName

+                    + '</option>';

+                options = options + option;

+            }

+

+            return options;

+        } 

 

 

         $scope.validatetextboxName = function (value){

@@ -1248,7 +1327,7 @@
                 "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) {

@@ -1266,7 +1345,7 @@
             console.log("data in ne data is :");

             $log.info($scope.data.neData);

             var deleteArr = [];

-            if (typeof id !== "undefined") {

+            if (id) {

 

                 deleteArr.push(id);

             }

@@ -1299,6 +1378,7 @@
                     if (data.id == id) {

                         console.log("Found : " + data.id);

                         $scope.ne = data;

+						$('#medropdown').val(data.controller);

                         $("#myModal").modal();

                         dataFound = true;

                     }

@@ -1402,7 +1482,10 @@
             }, { counts:[5, 10, 20, 50], dataset: $scope.data.datacenterData});

 

             $scope.$watch('checkboxes.checked', function(value) {

-                angular.forEach($scope.data.datacenterData, function(item) {

+				  $scope.checkboxes.items = [];

+

+                angular.forEach($scope.neTableParams.data, function(item) {

+					

                     if (angular.isDefined(item.Id)) {

                         $scope.checkboxes.items[item.Id] = value;

                     }

@@ -1492,7 +1575,7 @@
                 "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) {

@@ -1510,7 +1593,7 @@
             console.log("data in datacenter data is :");

             $log.info($scope.data.datacenter);

             var deleteArr = [];

-            if (typeof id !== "undefined"){

+            if (id){

 

                 deleteArr.push(id);

             }

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 e28abfc..f026935 100644
--- a/resmgr/src/main/webapp/resmgr/sdn-resmgr/link/link.html
+++ b/resmgr/src/main/webapp/resmgr/sdn-resmgr/link/link.html
@@ -94,6 +94,7 @@
                     <div class="form-group row">

                         <label class="col-xs-4 col-form-label">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>

                         </div>

                     </div>

                     <div class="form-group row">

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 45f5da3..a1422f0 100644
--- a/resmgr/src/main/webapp/resmgr/sdn-resmgr/ne/ne.html
+++ b/resmgr/src/main/webapp/resmgr/sdn-resmgr/ne/ne.html
@@ -104,6 +104,7 @@
                     <div class="form-group row">

                         <label class="col-xs-4 col-form-label">Controller</label>

                         <div id="controller" class="col-xs-8" >

+						<select id="medropdown" class="form-control inputfield" ng-model="meData.optSelect" ng-options="item.templateName for item in optionsValue"></select>

                         </div>

                     </div>

                     <div class="form-group row">

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 09cf3a6..d3e6322 100644
--- a/resmgr/src/main/webapp/resmgr/sdn-resmgr/port/port.html
+++ b/resmgr/src/main/webapp/resmgr/sdn-resmgr/port/port.html
@@ -100,6 +100,7 @@
                 <div class="form-group row">

                     <label class="col-xs-4 col-form-label">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>

                     </div>

                 </div>

                 <div class="form-group row">

@@ -110,6 +111,7 @@
                 <div class="form-group row">

                     <label class="col-xs-4 col-form-label">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>

                     </div>

                 </div>

                 <div class="form-group row">

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 fb25066..8625843 100644
--- a/resmgr/src/main/webapp/resmgr/sdn-resmgr/site/site.html
+++ b/resmgr/src/main/webapp/resmgr/sdn-resmgr/site/site.html
@@ -80,8 +80,9 @@
                         </div>

                     </div>

                     <div class="form-group row">

-                        <label class="col-xs-4 col-form-label">Tenant name</label>

+                        <label class="col-xs-4 col-form-label">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>

                         </div>

                     </div>

                     <div class="form-group row">