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