Overlay VPN page correction
authorseshukm <seshu.kumar.m@huawei.com>
Tue, 25 Apr 2017 12:18:03 +0000 (17:48 +0530)
committerseshukm <seshu.kumar.m@huawei.com>
Tue, 25 Apr 2017 12:18:03 +0000 (17:48 +0530)
IssueId : CLIENT-202

Change-Id: Iea28a285d86a3ee28f9ec453c9f6e0681776f2a0
Signed-off-by: seshukm <seshu.kumar.m@huawei.com>
12 files changed:
lifecyclemgr/src/main/webapp/lifecyclemgr/css/style.css
lifecyclemgr/src/main/webapp/lifecyclemgr/index.html
lifecyclemgr/src/main/webapp/lifecyclemgr/js/DataService.js
lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js
lifecyclemgr/src/main/webapp/lifecyclemgr/templates/overlayTabs.html [new file with mode: 0644]
lifecyclemgr/src/main/webapp/lifecyclemgr/templates/overlayVPN.html
lifecyclemgr/src/main/webapp/lifecyclemgr/templates/siteList.html [new file with mode: 0644]
lifecyclemgr/src/main/webapp/lifecyclemgr/templates/underlayVPN_L2.html [new file with mode: 0644]
lifecyclemgr/src/main/webapp/lifecyclemgr/templates/underlayVPN_L3.html [new file with mode: 0644]
lifecyclemgr/src/main/webapp/lifecyclemgr/templates/vpcList.html [new file with mode: 0644]
lifecyclemgr/src/main/webapp/lifecyclemgr/templates/vpnConnections.html [new file with mode: 0644]
lifecyclemgr/src/main/webapp/lifecyclemgr/templates/vpnGateway.html [new file with mode: 0644]

index 954ad09..aeab876 100644 (file)
  * See the License for the specific language governing permissions and\r
  * limitations under the License.\r
  */\r
\r
+\r
+.containerh{\r
+    background-color:white !important;\r
+    min-height:900px !important;\r
+}\r
+\r
 .lcmanager{\r
     padding: 0 50px;\r
 }\r
@@ -74,7 +79,7 @@
     text-align: left;\r
 }\r
 \r
-.detailinfo, .topo, .inputdata {\r
+.detailinfo, .topo, .inputdata, .vpnConnections, .vpnGateway, .siteList, .vpcList {\r
     border-right: 1px solid #ddd;\r
 }\r
 \r
@@ -194,4 +199,13 @@ select {
        background-color:white !important;\r
        min-height:500px;\r
 \r
-}
\ No newline at end of file
+}\r
+\r
+.rowSelected td{\r
+    background-color:#e8f8fe !important;\r
+}\r
+\r
+#overlaytabArea{\r
+    margin-top: 50px;\r
+    text-align: center;\r
+}\r
index 15cf035..c9f1931 100644 (file)
@@ -44,7 +44,7 @@
 \r
 </head>\r
 \r
-<body  ng-app="lcApp">\r
+<body  ng-app="lcApp" class="containerh">\r
 \r
 \r
 <div class="homecontent center lcmanager containerh">\r
index 04394a2..a792de8 100644 (file)
 \r
 app.factory("DataService", function($http, $log){\r
     var lcData = null;\r
+    var overLayData = null;\r
     var createParamJsonObj = {\r
         templateId:'',\r
         parameters: {}\r
     };\r
+    var url = "";\r
     var tableDataLoaded = false;\r
     \r
     return {\r
@@ -38,9 +40,10 @@ app.factory("DataService", function($http, $log){
 \r
             //load main Table\r
             return $http({\r
-                url: '/openoapi/servicegateway/v1/services',\r
+                url: url+'/openoapi/servicegateway/v1/services',\r
                 //url: 'http://localhost:5000/api/getLCData',\r
                 method: 'GET',\r
+                data: null,\r
                 headers: {'Content-Type': 'application/json'}\r
 \r
                 /*url: '/openoapi/inventory/v1/services',\r
@@ -73,9 +76,37 @@ app.factory("DataService", function($http, $log){
         },\r
         getOverlayData : function() {\r
             return $http({\r
-                url: '/openoapi/sdnooverlayvpn/v1/site2dc-vpn',\r
+                url: url+'/openoapi/sdnooverlayvpn/v1/site2dc-vpn',\r
                 //url: 'http://localhost:5000/api/getOverlayVPNData',\r
                 method: 'GET',\r
+                data: null,\r
+                headers: {'Content-Type': 'application/json'}\r
+            }).then(function(response){\r
+                //$log.info(response);\r
+                overLayData = response.data.overlayData;\r
+                return response.data;\r
+            });\r
+        },\r
+        getOverlayVPNConnData : function(id, type){\r
+            var returnData = null;\r
+            if(overLayData) {\r
+                for (var i = 0; i < overLayData.length; i++) {\r
+                    if(overLayData[i].id == id) {\r
+                        returnData = overLayData[i][type];\r
+                        break;\r
+                    }\r
+                }\r
+                return returnData;\r
+            }\r
+            else\r
+                return null;\r
+        },\r
+        getSiteListData : function() {\r
+            return $http({\r
+                url: url+'/openoapi/sdnobrs/v1/sites',\r
+                //url: 'http://localhost:5000/api/getOverlayVPNData',\r
+                method: 'GET',\r
+                data: null,\r
                 headers: {'Content-Type': 'application/json'}\r
             }).then(function(response){\r
                 //$log.info(response);\r
@@ -84,20 +115,37 @@ app.factory("DataService", function($http, $log){
         },\r
         getUnderlayData : function() {\r
             return $http({\r
-                url: '/openoapi/sdnol3vpn/v1/l3vpns',\r
+                url: url+'/openoapi/sdnol3vpn/v1/l3vpns',\r
                 //url: 'http://localhost:5000/api/getUnderlayVPNData',\r
                 method: 'GET',\r
+                data: null,\r
                 headers: {'Content-Type': 'application/json'}\r
             }).then(function(response){\r
                 //$log.info(response);\r
+                underlayData = response.data.data.underlayVPN;\r
                 return response.data;\r
             });\r
         },\r
+       getTPLinkData : function(id){\r
+            var returnData = null;\r
+            if(underlayData) {\r
+                for (var i = 0; i < underlayData.length; i++) {\r
+                    if(underlayData[i].id == id) {\r
+                        returnData = underlayData[i].tp_details;\r
+                        break;\r
+                    }\r
+                }\r
+                return returnData;\r
+            }\r
+            else\r
+                return null;\r
+        },\r
         loadServiceTopoSequence : function(id) {\r
             return $http({\r
-                url: '/openoapi/gso/v1/services/toposequence/' + id,\r
+                url: url+'/openoapi/gso/v1/services/toposequence/' + id,\r
                 //url: 'http://localhost:5000/api/getOverlayVPNData',\r
                 method: 'GET',\r
+                data: null,\r
                 headers: {'Content-Type': 'application/json'}\r
             }).then(function(response){\r
                 //$log.info(response);\r
@@ -118,9 +166,10 @@ app.factory("DataService", function($http, $log){
         generateTemplatesComponent : function() {\r
             //dropdown data\r
             return $http({\r
-                url: '/openoapi/catalog/v1/servicetemplates',\r
+                url: url+'/openoapi/catalog/v1/servicetemplates',\r
                 //url: 'http://localhost:5000/api/getTemplateData',\r
                 method: 'GET',\r
+                data: null,\r
                 headers: {'Content-Type': 'application/json'}\r
             }).then(function(response){\r
                 //$log.info(response);\r
index e1dbdbe..a6fe604 100644 (file)
@@ -128,9 +128,35 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
             })\r
             .state("home.lcTabs.detailInfo.vpnManager.underlayVPN", {\r
                 url: "/underlayVPN",\r
-                templateUrl : "templates/underlayVPN.html",\r
+                templateUrl : "templates/underlayVPN_L3.html",\r
                 controller : "underlayVPNCtrl"\r
             })\r
+\r
+            .state("home.lcTabs.detailInfo.vpnManager.overlayVPN.overlayTabs", {\r
+                url: "/overlayTabs/:overlayId",\r
+                templateUrl : "templates/overlayTabs.html",\r
+                controller : "overlayTabsCtrl"\r
+            })\r
+            .state("home.lcTabs.detailInfo.vpnManager.overlayVPN.overlayTabs.vpnConnections", {\r
+                url: "/vpnConnections",\r
+                templateUrl : "templates/vpnConnections.html",\r
+                controller : "vpnConnectionsCtrl"\r
+            })\r
+            .state("home.lcTabs.detailInfo.vpnManager.overlayVPN.overlayTabs.vpnGateway", {\r
+                url: "/vpnGateway",\r
+                templateUrl : "templates/vpnGateway.html",\r
+                controller : "vpnGatewayCtrl"\r
+            })\r
+            .state("home.lcTabs.detailInfo.vpnManager.overlayVPN.overlayTabs.siteList", {\r
+                url: "/siteList",\r
+                templateUrl : "templates/siteList.html",\r
+                controller : "siteListCtrl"\r
+            })\r
+            .state("home.lcTabs.detailInfo.vpnManager.overlayVPN.overlayTabs.vpcList", {\r
+                url: "/vpcList",\r
+                templateUrl : "templates/vpcList.html",\r
+                controller : "vpcListCtrl"\r
+            })\r
         /*modalStateProvider.state("home.lcTabs1", {\r
             url: '/lcTabs',\r
             templateUrl: 'templates/lctabs.html'\r
@@ -149,10 +175,10 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
             });\r
             if(!DataService.getTableDataLoaded()) {\r
                 DataService.loadGetServiceData()\r
-                    .then(function (data) {\r
-                        if (data) {\r
-                            $scope.tableData = data.data;\r
-                            var tableData = data.data;\r
+                    .then(function (response) {\r
+                        if (response.data) {\r
+                            $scope.tableData = response.data;\r
+                            var tableData = response.data;\r
                             loadTableData();\r
                             //$timeout(loadTableData, 0);\r
                         }\r
@@ -645,7 +671,7 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
             var deletehtml = Mustache.to_html(def_button_tpl, delete_data);\r
             $('div.overlayAction').html($compile(deletehtml)($scope));*/\r
 \r
-            $scope.tableParams = new NgTableParams({count: 5, sorting: {id: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}\r
+            $scope.tableParams = new NgTableParams({count: 3, sorting: {id: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}\r
             }, { counts:[], dataset: $scope.overlayData});\r
 \r
             $scope.checkboxes = { 'checked': false, items: {} };\r
@@ -665,18 +691,25 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
                 $scope.checkboxes.items[user.id]\r
             });\r
         };\r
+\r
+        $scope.rowHighilited=function(row)\r
+        {\r
+            $scope.selectedRow = row;\r
+        }\r
+\r
     })\r
 \r
     /*-------------------------------------------------------------------------------UnderlayVPN---------------------------------------------------------------------*/\r
 \r
     .controller("underlayVPNCtrl", function($scope, $rootScope, $compile, DataService, NgTableParams){\r
         $scope.message = "Underlay VPN";\r
+        $scope.tpTableShowing = false;\r
 \r
         $scope.init = function() {\r
             //console.log("Underlay VPN... ng-init + " +  $rootScope.lcmModelTemplate);\r
             DataService.getUnderlayData()\r
-                .then(function(data){\r
-                    $scope.underlayVPN = data.underlayVPN;\r
+                .then(function(response){\r
+                    $scope.underlayVPN = response.data.underlayVPN;\r
                     console.log("Data: ");\r
                     loadButtons();\r
                 }, function(reason){\r
@@ -692,7 +725,7 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
             $('div.underlayAction').html($compile(deletehtml)($scope));*/\r
 \r
             $scope.tableParams = new NgTableParams({count: 5, sorting: {id: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}\r
-            }, { counts:[5, 10], dataset: $scope.underlayVPN.underlayData});\r
+            }, { counts:[5, 10], dataset: $scope.underlayVPN});\r
 \r
             $scope.checkboxes = { 'checked': false, items: {} };\r
 \r
@@ -705,8 +738,8 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
                 });\r
             });\r
 \r
-            $scope.tableParams_tpDetails = new NgTableParams({count: 5, sorting: {id: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}\r
-            }, { counts:[5, 10], dataset: $scope.underlayVPN.tp_details});\r
+            /*$scope.tableParams_tpDetails = new NgTableParams({count: 5, sorting: {id: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}\r
+            }, { counts:[5, 10], dataset: $scope.underlayVPN.tp_details});*/\r
         }\r
         $scope.checkAll = function() {\r
             console.log("Checked ..");\r
@@ -714,6 +747,21 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
                 $scope.checkboxes.items[data.id]\r
             });\r
         };\r
+\r
+        $scope.loadTPLinkData = function(id, row){\r
+            $scope.selectedRow = row;\r
+            $scope.tpTableShowing = true;\r
+            console.log("Underlay table row click");\r
+            var tp_detData = DataService.getTPLinkData(id);\r
+            $scope.tableParams_tpDetails = new NgTableParams({count: 5, sorting: {id: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}\r
+            }, { counts:[5, 10], dataset: tp_detData});\r
+        }\r
+\r
+        $scope.rowHighilited=function(row)\r
+        {\r
+            $scope.selectedRow = row;\r
+        }\r
+\r
     })\r
 \r
     .controller('inputDataCtrl', function($scope, $stateParams, $log, DataService) {\r
@@ -767,6 +815,46 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
 \r
     })\r
 \r
+    .controller('overlayTabsCtrl', function($scope, $state) {\r
+        $state.go('home.lcTabs.detailInfo.vpnManager.overlayVPN.overlayTabs.vpnConnections');\r
+    })\r
+\r
+    .controller('vpnConnectionsCtrl', function($scope, $stateParams, NgTableParams, DataService) {\r
+        $scope.message = "VPN Connections";\r
+        var rowData = DataService.getOverlayVPNConnData($stateParams.overlayId, "vpnConnections");\r
+        $scope.vpnConnTable = new NgTableParams({count: 5, sorting: {id: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}\r
+        }, { counts:[5, 10], dataset: rowData});\r
+    })\r
+\r
+    .controller('vpnGatewayCtrl', function($scope, $stateParams, NgTableParams, DataService) {\r
+        $scope.message = "VPN Gateway";\r
+        var rowData = DataService.getOverlayVPNConnData($stateParams.overlayId, "vpnGateways");\r
+        $scope.vpnGateTable = new NgTableParams({count: 5, sorting: {id: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}\r
+        }, { counts:[5, 10], dataset: rowData});\r
+    })\r
+\r
+    .controller('siteListCtrl', function($scope, $stateParams, NgTableParams, DataService) {\r
+        $scope.message = "Site List";\r
+        //var rowData = DataService.getSiteListData();\r
+        DataService.getSiteListData()\r
+            .then(function (response) {\r
+                $scope.siteListData = response.sites;\r
+                $scope.siteTable = new NgTableParams({count: 5, sorting: {id: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}\r
+                }, { counts:[5, 10], dataset: $scope.siteListData});\r
+            }, function (reason) {\r
+                $scope.message = "Error is :" + JSON.stringify(reason);\r
+            });\r
+    })\r
+\r
+    .controller('vpcListCtrl', function($scope, $stateParams, NgTableParams, DataService) {\r
+        $scope.message = "VPN List";\r
+        var rowData = DataService.getOverlayVPNConnData($stateParams.overlayId, "vpcList");\r
+        $scope.vpcListTable = new NgTableParams({count: 5, sorting: {id: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}\r
+        }, { counts:[5, 10], dataset: rowData});\r
+    })\r
+\r
+\r
+\r
 \r
 \r
 var lcmModelTemplate = "";\r
diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/overlayTabs.html b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/overlayTabs.html
new file mode 100644 (file)
index 0000000..c2e04eb
--- /dev/null
@@ -0,0 +1,36 @@
+<!--\r
+\r
+    Copyright 2017, Huawei Technologies Co., Ltd.\r
+\r
+    Licensed under the Apache License, Version 2.0 (the "License");\r
+    you may not use this file except in compliance with the License.\r
+    You may obtain a copy of the License at\r
+\r
+            http://www.apache.org/licenses/LICENSE-2.0\r
+\r
+    Unless required by applicable law or agreed to in writing, software\r
+    distributed under the License is distributed on an "AS IS" BASIS,\r
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+    See the License for the specific language governing permissions and\r
+    limitations under the License.\r
+\r
+-->\r
+\r
+<!--<div id="lctabArea" ng-init="init()"></div>-->\r
+\r
+\r
+<div id="overlaytabArea">\r
+\r
+    <ul class="nav nav-tabs">\r
+        <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>\r
+        <!--<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>-->\r
+        <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>\r
+        <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>\r
+        <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>\r
+    </ul>\r
+\r
+    <div class="tab-content"></div>\r
+    <ui-view></ui-view>\r
+\r
+\r
+</div>\r
index 1671983..d7ca3ba 100644 (file)
 \r
 <div class="headerTitle">{{message}}</div>\r
 <br>\r
-\r
+<div class="col-md-12 col-sm-12 col-lg-12">\r
 <div class="overlayAction" ng-init="init()">\r
     <!--<button ng-click="showAddModal()" class="btnDefault pull-left">Add</button>-->\r
     <!--<button ng-click="deleteData()" class="btnDefault pull-left prvdel">Delete Selected</button>-->\r
 </div>\r
 <br>\r
 <div class="panel panel-default">\r
-<table ng-table="tableParams" class="table table table-striped table-hover table-bordered lctable" show-filter="true">\r
-    <tr ng-repeat="overlayData in $data">\r
+<table id="overlayTable" ng-table="tableParams" class="table table table-striped table-hover table-bordered lctable"  show-filter="true">\r
+    <tr ng-repeat="overlayData in $data" ui-sref=".overlayTabs({overlayId: overlayData.id})" ui-sref-active="selected-row">\r
         <!--<td header="'ng-table/headers/checkbox.html'">\r
             <input type="checkbox" ng-model="checkboxes.items[overlayData.id]" />\r
         </td>-->\r
+        <td title="'Id'" filter="{ id: 'text'}" sortable="'id'">\r
+            {{overlayData.id}}\r
+        </td>\r
         <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">\r
             {{overlayData.name}}\r
         </td>\r
         <td title="'Description'" filter="{ desc: 'text'}" sortable="'desc'">\r
-            {{overlayData.desc}}\r
-        </td>\r
-        <td title="'Thin CPE'" filter="{ thinCPE: 'text'}" sortable="'thinCPE'">\r
-            {{overlayData.thinCPE}}\r
-        </td>\r
-        <td title="'Port : Vlan ID'" filter="{ portVlan: 'number'}" sortable="'portVlan'">\r
-            {{overlayData.portVlan}}\r
-        </td>\r
-        <td title="'DC Name'" filter="{ dcName: 'text'}" sortable="'dcName'">\r
-            {{overlayData.dcName}}\r
+            {{overlayData.description}}\r
         </td>\r
-        <td title="'VPC'" filter="{ vpc: 'text'}" sortable="'vpc'">\r
-            {{overlayData.vpc}}\r
+        <td title="'Action State'" filter="{ actionState: 'text'}" sortable="'actionState'">\r
+            {{overlayData.actionState}}\r
         </td>\r
-        <td title="'VPC CIDR'" filter="{ vpcCIDR: 'text'}" sortable="'vpcCIDR'">\r
-            {{overlayData.vpcCIDR}}\r
+        <td title="'Port : VPN Descriptor'" filter="{ vpnDescriptor: 'number'}" sortable="'vpnDescriptor'">\r
+            {{overlayData.vpnDescriptor}}\r
         </td>\r
-        <td title="'Action'">\r
-            <!--<span class="pull-right glyphicon glyphicon-edit" ng-click="editData(overlayData.id)" style="cursor: pointer;margin: 0 5px"></span>-->\r
+\r
+        <!--<td title="'Action'">\r
+            &lt;!&ndash;<span class="pull-right glyphicon glyphicon-edit" ng-click="editData(overlayData.id)" style="cursor: pointer;margin: 0 5px"></span>&ndash;&gt;\r
            <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>\r
-        </td>\r
+        </td>-->\r
+        \r
     </tr>\r
 </table>\r
 </div>\r
+<ui-view></ui-view>\r
+</div>\r
 \r
 <script type="text/ng-template" id="ng-table/headers/checkbox.html">\r
     <input type="checkbox" ng-model="checkboxes.checked" name="filter-checkbox" value="" />\r
diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/siteList.html b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/siteList.html
new file mode 100644 (file)
index 0000000..0a4339b
--- /dev/null
@@ -0,0 +1,45 @@
+<!--\r
+\r
+    Copyright 2017, Huawei Technologies Co., Ltd.\r
+\r
+    Licensed under the Apache License, Version 2.0 (the "License");\r
+    you may not use this file except in compliance with the License.\r
+    You may obtain a copy of the License at\r
+\r
+            http://www.apache.org/licenses/LICENSE-2.0\r
+\r
+    Unless required by applicable law or agreed to in writing, software\r
+    distributed under the License is distributed on an "AS IS" BASIS,\r
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+    See the License for the specific language governing permissions and\r
+    limitations under the License.\r
+\r
+-->\r
+\r
+<div class="headerTitle">{{message}}</div>\r
+<br>\r
+<br>\r
+<div class="panel panel-default">\r
+    <table ng-table="siteTable" class="table table table-striped table-hover table-bordered lctable "  show-filter="true">\r
+        <tr ng-repeat="siteData in $data">\r
+            <!--<td header="'ng-table/headers/checkbox.html'">\r
+                <input type="checkbox" ng-model="checkboxes.items[overlayData.id]" />\r
+            </td>-->\r
+            <td title="'Id'" filter="{ id: 'text'}" sortable="'id'">\r
+                {{siteData.id}}\r
+            </td>\r
+            <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">\r
+                {{siteData.name}}\r
+            </td>\r
+\r
+            <!--<td title="'Action'">\r
+                &lt;!&ndash;<span class="pull-right glyphicon glyphicon-edit" ng-click="editData(overlayData.id)" style="cursor: pointer;margin: 0 5px"></span>&ndash;&gt;\r
+               <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>\r
+            </td>-->\r
+        </tr>\r
+    </table>\r
+</div>\r
+\r
+<script type="text/ng-template" id="ng-table/headers/checkbox.html">\r
+    <input type="checkbox" ng-model="checkboxes.checked" name="filter-checkbox" value="" />\r
+</script>\r
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 (file)
index 0000000..4b8eedb
--- /dev/null
@@ -0,0 +1,78 @@
+<!--\r
+\r
+    Copyright 2017, Huawei Technologies Co., Ltd.\r
+\r
+    Licensed under the Apache License, Version 2.0 (the "License");\r
+    you may not use this file except in compliance with the License.\r
+    You may obtain a copy of the License at\r
+\r
+            http://www.apache.org/licenses/LICENSE-2.0\r
+\r
+    Unless required by applicable law or agreed to in writing, software\r
+    distributed under the License is distributed on an "AS IS" BASIS,\r
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+    See the License for the specific language governing permissions and\r
+    limitations under the License.\r
+\r
+-->\r
+\r
+<div class="headerTitle">{{message}}</div>\r
+<br>\r
+\r
+<div class="underlayAction" ng-init="init()">\r
+    <!--<button ng-click="showAddModal()" class="btnDefault pull-left">Add</button>-->\r
+    <!--<button ng-click="deleteData()" class="btnDefault pull-left prvdel">Delete Selected</button>-->\r
+</div>\r
+<br>\r
+<div class="panel panel-default">\r
+    <table id="underlayTable" ng-table="tableParams" class="table table table-striped table-hover table-bordered lctable"   show-filter="true">\r
+        <tr ng-repeat="underlayData in $data" ng-class="{rowSelected:$index==selectedRow}" ng-click="loadTPLinkData(underlayData.id, $index)">\r
+            <!--<td header="'ng-table/headers/checkbox.html'">\r
+                <input type="checkbox" ng-model="checkboxes.items[underlayData.id]" />\r
+            </td>-->\r
+            <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">\r
+                {{underlayData.name}}\r
+            </td>\r
+            <td title="'State'" filter="{ thinCPE: 'text'}" sortable="'thinCPE'">\r
+                {{underlayData.thinCPE}}\r
+            </td>\r
+            <td title="'Description'" filter="{ desc: 'text'}" sortable="'desc'">\r
+                {{underlayData.desc}}\r
+            </td>\r
+            <td title="'Action'">\r
+                <!--<span class="pull-right glyphicon glyphicon-edit" ng-click="editData(underlayData.id)" style="cursor: pointer;margin: 0 5px"></span>-->\r
+                <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>\r
+            </td>\r
+        </tr>\r
+    </table>\r
+</div>\r
+\r
+<script type="text/ng-template" id="ng-table/headers/checkbox.html">\r
+    <input type="checkbox" ng-model="checkboxes.checked" name="filter-checkbox" value="" />\r
+</script>\r
+\r
+<br>\r
+<div id="tpLinkBlock" ng-show="tpTableShowing">\r
+    <div class="headerTitle">TP Details</div>\r
+    <div class="panel panel-default">\r
+        <table ng-table="tableParams_tpDetails" class="table table table-striped table-hover table-bordered lctable" show-filter="true">\r
+            <tr ng-repeat="tpDetailsData in $data" ng-class="{rowSelected:$index==selectedRow}" ng-click="rowHighilited($index)">\r
+                <td title="'TP Name'" filter="{ tp_name: 'text'}" sortable="'tp_name'">\r
+                    {{tpDetailsData.tp_name}}\r
+                </td>\r
+                <td title="'PE Name'" filter="{ pe_name: 'text'}" sortable="'pe_name'">\r
+                    {{tpDetailsData.pe_name}}\r
+                </td>\r
+                <td title="'VLAN ID'" filter="{ vlanId: 'text'}" sortable="'vlanId'">\r
+                    {{tpDetailsData.vlanId}}\r
+                </td>\r
+                <td title="'Site CIDR'" filter="{ site_cidr: 'text'}" sortable="'site_cidr'">\r
+                    {{tpDetailsData.site_cidr}}\r
+                </td>\r
+                <td title="'IP'" filter="{ ip: 'text'}" sortable="'ip'">\r
+                    {{tpDetailsData.ip}}\r
+                </td>\r
+            </tr>\r
+        </table>\r
+    </div>\r
+</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 (file)
index 0000000..b91ec32
--- /dev/null
@@ -0,0 +1,78 @@
+<!--\r
+\r
+    Copyright 2017, Huawei Technologies Co., Ltd.\r
+\r
+    Licensed under the Apache License, Version 2.0 (the "License");\r
+    you may not use this file except in compliance with the License.\r
+    You may obtain a copy of the License at\r
+\r
+            http://www.apache.org/licenses/LICENSE-2.0\r
+\r
+    Unless required by applicable law or agreed to in writing, software\r
+    distributed under the License is distributed on an "AS IS" BASIS,\r
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+    See the License for the specific language governing permissions and\r
+    limitations under the License.\r
+\r
+-->\r
+\r
+<div class="headerTitle">{{message}}</div>\r
+<br>\r
+\r
+<div class="underlayAction" ng-init="init()">\r
+    <!--<button ng-click="showAddModal()" class="btnDefault pull-left">Add</button>-->\r
+    <!--<button ng-click="deleteData()" class="btnDefault pull-left prvdel">Delete Selected</button>-->\r
+</div>\r
+<br>\r
+<div class="panel panel-default">\r
+<table id="underlayTable" ng-table="tableParams" class="table table table-striped table-hover table-bordered lctable"   show-filter="true">\r
+    <tr ng-repeat="underlayData in $data" ng-class="{rowSelected:$index==selectedRow}" ng-click="loadTPLinkData(underlayData.id, $index)">\r
+        <!--<td header="'ng-table/headers/checkbox.html'">\r
+            <input type="checkbox" ng-model="checkboxes.items[underlayData.id]" />\r
+        </td>-->\r
+        <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">\r
+            {{underlayData.name}}\r
+        </td>\r
+        <td title="'State'" filter="{ thinCPE: 'text'}" sortable="'thinCPE'">\r
+            {{underlayData.thinCPE}}\r
+        </td>\r
+        <td title="'Description'" filter="{ desc: 'text'}" sortable="'desc'">\r
+            {{underlayData.desc}}\r
+        </td>\r
+        <td title="'Action'">\r
+            <!--<span class="pull-right glyphicon glyphicon-edit" ng-click="editData(underlayData.id)" style="cursor: pointer;margin: 0 5px"></span>-->\r
+        <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>\r
+        </td>\r
+    </tr>\r
+</table>\r
+</div>\r
+\r
+<script type="text/ng-template" id="ng-table/headers/checkbox.html">\r
+    <input type="checkbox" ng-model="checkboxes.checked" name="filter-checkbox" value="" />\r
+</script>\r
+\r
+<br>\r
+<div id="tpLinkBlock" ng-show="tpTableShowing">\r
+    <div class="headerTitle">TP Details</div>\r
+    <div class="panel panel-default">\r
+    <table ng-table="tableParams_tpDetails" class="table table table-striped table-hover table-bordered lctable" show-filter="true">\r
+        <tr ng-repeat="tpDetailsData in $data" ng-class="{rowSelected:$index==selectedRow}" ng-click="rowHighilited($index)">\r
+            <td title="'TP Name'" filter="{ tp_name: 'text'}" sortable="'tp_name'">\r
+                {{tpDetailsData.tp_name}}\r
+            </td>\r
+            <td title="'PE Name'" filter="{ pe_name: 'text'}" sortable="'pe_name'">\r
+                {{tpDetailsData.pe_name}}\r
+            </td>\r
+            <td title="'VLAN ID'" filter="{ vlanId: 'text'}" sortable="'vlanId'">\r
+                {{tpDetailsData.vlanId}}\r
+            </td>\r
+            <td title="'Site CIDR'" filter="{ site_cidr: 'text'}" sortable="'site_cidr'">\r
+                {{tpDetailsData.site_cidr}}\r
+            </td>\r
+            <td title="'IP'" filter="{ ip: 'text'}" sortable="'ip'">\r
+                {{tpDetailsData.ip}}\r
+            </td>\r
+        </tr>\r
+    </table>\r
+    </div>\r
+</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 (file)
index 0000000..1412a4c
--- /dev/null
@@ -0,0 +1,45 @@
+<!--\r
+\r
+    Copyright 2017, Huawei Technologies Co., Ltd.\r
+\r
+    Licensed under the Apache License, Version 2.0 (the "License");\r
+    you may not use this file except in compliance with the License.\r
+    You may obtain a copy of the License at\r
+\r
+            http://www.apache.org/licenses/LICENSE-2.0\r
+\r
+    Unless required by applicable law or agreed to in writing, software\r
+    distributed under the License is distributed on an "AS IS" BASIS,\r
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+    See the License for the specific language governing permissions and\r
+    limitations under the License.\r
+\r
+-->\r
+\r
+<div class="headerTitle">{{message}}</div>\r
+<br>\r
+<br>\r
+<div class="panel panel-default">\r
+    <table ng-table="vpcListTable" class="table table table-striped table-hover table-bordered lctable"  show-filter="true">\r
+        <tr ng-repeat="vpcListData in $data">\r
+            <!--<td header="'ng-table/headers/checkbox.html'">\r
+                <input type="checkbox" ng-model="checkboxes.items[overlayData.id]" />\r
+            </td>-->\r
+            <td title="'Id'" filter="{ id: 'text'}" sortable="'id'">\r
+                {{vpcListData.id}}\r
+            </td>\r
+            <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">\r
+                {{vpcListData.name}}\r
+            </td>\r
+\r
+            <!--<td title="'Action'">\r
+                &lt;!&ndash;<span class="pull-right glyphicon glyphicon-edit" ng-click="editData(overlayData.id)" style="cursor: pointer;margin: 0 5px"></span>&ndash;&gt;\r
+               <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>\r
+            </td>-->\r
+        </tr>\r
+    </table>\r
+</div>\r
+\r
+<script type="text/ng-template" id="ng-table/headers/checkbox.html">\r
+    <input type="checkbox" ng-model="checkboxes.checked" name="filter-checkbox" value="" />\r
+</script>\r
diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/vpnConnections.html b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/vpnConnections.html
new file mode 100644 (file)
index 0000000..f57c073
--- /dev/null
@@ -0,0 +1,60 @@
+<!--\r
+\r
+    Copyright 2017, Huawei Technologies Co., Ltd.\r
+\r
+    Licensed under the Apache License, Version 2.0 (the "License");\r
+    you may not use this file except in compliance with the License.\r
+    You may obtain a copy of the License at\r
+\r
+            http://www.apache.org/licenses/LICENSE-2.0\r
+\r
+    Unless required by applicable law or agreed to in writing, software\r
+    distributed under the License is distributed on an "AS IS" BASIS,\r
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+    See the License for the specific language governing permissions and\r
+    limitations under the License.\r
+\r
+-->\r
+\r
+<div class="headerTitle">{{message}}</div>\r
+<br>\r
+<br>\r
+<div class="panel panel-default">\r
+    <table ng-table="vpnConnTable" class="table table table-striped table-hover table-bordered lctable"  show-filter="true">\r
+        <tr ng-repeat="vpnConnData in $data">\r
+            <!--<td header="'ng-table/headers/checkbox.html'">\r
+                <input type="checkbox" ng-model="checkboxes.items[overlayData.id]" />\r
+            </td>-->\r
+            <td title="'Id'" filter="{ id: 'text'}" sortable="'id'">\r
+                {{vpnConnData.id}}\r
+            </td>\r
+            <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">\r
+                {{vpnConnData.name}}\r
+            </td>\r
+            <td title="'Description'" filter="{ description: 'text'}" sortable="'description'">\r
+                {{vpnConnData.description}}\r
+            </td>\r
+            <td title="'Port : Deploy Status'" filter="{ deployStatus: 'number'}" sortable="'deployStatus'">\r
+                {{vpnConnData.deployStatus}}\r
+            </td>\r
+            <td title="'Action State'" filter="{ actionState: 'text'}" sortable="'actionState'">\r
+                {{vpnConnData.actionState}}\r
+            </td>\r
+            <td title="'Port : Running Status'" filter="{ runningStatus: 'number'}" sortable="'runningStatus'">\r
+                {{vpnConnData.runningStatus}}\r
+            </td>\r
+            <td title="'Port : Route Type'" filter="{ routeType: 'number'}" sortable="'routeType'">\r
+                {{vpnConnData.routeType}}\r
+            </td>\r
+\r
+            <!--<td title="'Action'">\r
+                &lt;!&ndash;<span class="pull-right glyphicon glyphicon-edit" ng-click="editData(overlayData.id)" style="cursor: pointer;margin: 0 5px"></span>&ndash;&gt;\r
+               <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>\r
+            </td>-->\r
+        </tr>\r
+    </table>\r
+</div>\r
+\r
+<script type="text/ng-template" id="ng-table/headers/checkbox.html">\r
+    <input type="checkbox" ng-model="checkboxes.checked" name="filter-checkbox" value="" />\r
+</script>\r
diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/vpnGateway.html b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/vpnGateway.html
new file mode 100644 (file)
index 0000000..44d4c8d
--- /dev/null
@@ -0,0 +1,58 @@
+<!--\r
+\r
+    Copyright 2017, Huawei Technologies Co., Ltd.\r
+\r
+    Licensed under the Apache License, Version 2.0 (the "License");\r
+    you may not use this file except in compliance with the License.\r
+    You may obtain a copy of the License at\r
+\r
+            http://www.apache.org/licenses/LICENSE-2.0\r
+\r
+    Unless required by applicable law or agreed to in writing, software\r
+    distributed under the License is distributed on an "AS IS" BASIS,\r
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+    See the License for the specific language governing permissions and\r
+    limitations under the License.\r
+\r
+-->\r
+\r
+<div class="headerTitle">{{message}}</div>\r
+<br>\r
+<br>\r
+<div class="panel panel-default">\r
+    <table ng-table="vpnGateTable" class="table table table-striped table-hover table-bordered lctable"  show-filter="true">\r
+        <tr ng-repeat="vpnGateData in $data">\r
+            <!--<td header="'ng-table/headers/checkbox.html'">\r
+                <input type="checkbox" ng-model="checkboxes.items[overlayData.id]" />\r
+            </td>-->\r
+            <td title="'Id'" filter="{ id: 'text'}" sortable="'id'">\r
+                {{vpnGateData.id}}\r
+            </td>\r
+            <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">\r
+                {{vpnGateData.name}}\r
+            </td>\r
+            <td title="'Description'" filter="{ description: 'text'}" sortable="'description'">\r
+                {{vpnGateData.description}}\r
+            </td>\r
+\r
+            <td title="'Action State'" filter="{ actionState: 'text'}" sortable="'actionState'">\r
+                {{vpnGateData.actionState}}\r
+            </td>\r
+\r
+            <td title="'VPC Id'" filter="{ vpcid: 'text'}" sortable="'vpcid'">\r
+                {{vpnGateData.vpcId}}\r
+            </td>\r
+\r
+\r
+\r
+            <!--<td title="'Action'">\r
+                &lt;!&ndash;<span class="pull-right glyphicon glyphicon-edit" ng-click="editData(overlayData.id)" style="cursor: pointer;margin: 0 5px"></span>&ndash;&gt;\r
+               <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>\r
+            </td>-->\r
+        </tr>\r
+    </table>\r
+</div>\r
+\r
+<script type="text/ng-template" id="ng-table/headers/checkbox.html">\r
+    <input type="checkbox" ng-model="checkboxes.checked" name="filter-checkbox" value="" />\r
+</script>\r