* 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
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
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
\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
\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
\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
},\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
},\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
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
})\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
});\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
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
$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
$('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
});\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
$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
\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
--- /dev/null
+<!--\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
\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
+ <!–<span class="pull-right glyphicon glyphicon-edit" ng-click="editData(overlayData.id)" style="cursor: pointer;margin: 0 5px"></span>–>\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
--- /dev/null
+<!--\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
+ <!–<span class="pull-right glyphicon glyphicon-edit" ng-click="editData(overlayData.id)" style="cursor: pointer;margin: 0 5px"></span>–>\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
--- /dev/null
+<!--\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
--- /dev/null
+<!--\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
--- /dev/null
+<!--\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
+ <!–<span class="pull-right glyphicon glyphicon-edit" ng-click="editData(overlayData.id)" style="cursor: pointer;margin: 0 5px"></span>–>\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
--- /dev/null
+<!--\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
+ <!–<span class="pull-right glyphicon glyphicon-edit" ng-click="editData(overlayData.id)" style="cursor: pointer;margin: 0 5px"></span>–>\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
--- /dev/null
+<!--\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
+ <!–<span class="pull-right glyphicon glyphicon-edit" ng-click="editData(overlayData.id)" style="cursor: pointer;margin: 0 5px"></span>–>\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