From bdfb221e4ed2e7d68827e986026837cbe86899fb Mon Sep 17 00:00:00 2001 From: "michal.kovacik" Date: Mon, 6 Jun 2016 09:38:15 +0200 Subject: [PATCH] Endpoint added -work on add endpoint dialog - adding works -is without value checking -work on add endpoint dialog -ctrl, services, tpl added -sidePannel with EP details works Change-Id: If63c80cfc185b94a1e478cf004ff26cd74e9116a Signed-off-by: michal.kovacik Endpoints - ordering fixed +small code corrections Change-Id: Ice0cc083053a4a49b03cb5870214c6f81a8333f9 Signed-off-by: michal.kovacik Endpoint's side pannel CSS corrected Change-Id: Iaf235f94e100c36edd14b9e9452640ecc450ebc8 Signed-off-by: michal.kovacik --- .../src/main/resources/gbp/common/gbp.css | 21 +++ .../main/resources/gbp/common/gbp.module.js | 14 ++ .../gbp/endpoints/add-endpoint.controller.js | 42 ++++++ .../endpoints/dialog-add-endpoint.tpl.html | 93 +++++++++++++ .../gbp/endpoints/endpoint.service.js | 123 ++++++++++++++++++ .../gbp/endpoints/endpoints-list.service.js | 57 ++++++++ .../gbp/endpoints/endpoints.controller.js | 63 +++++++++ .../gbp/endpoints/endpoints.tpl.html | 43 ++++++ .../side_panel_endpoints_detail.tpl.html | 31 +++++ 9 files changed, 487 insertions(+) create mode 100644 groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/add-endpoint.controller.js create mode 100644 groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/dialog-add-endpoint.tpl.html create mode 100644 groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/endpoint.service.js create mode 100644 groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/endpoints-list.service.js create mode 100644 groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/endpoints.controller.js create mode 100644 groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/endpoints.tpl.html create mode 100644 groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/side_panel_endpoints_detail.tpl.html diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.css b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.css index 1ce732850..a46d33de4 100644 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.css +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.css @@ -91,3 +91,24 @@ md-dialog button span { md-sidenav span { color: inherit !important; } + +span.md-subheader { + color: red; +} + +div.md-primary.md-subheader.ng-scope > div > span > span { + color: rgb(33,150,243); +} + +md-sidenav > md-toolbar > div > h2 > span { + margin: 20px 0; + color: #666; +} + +span.flex-35 > strong { + color: rgba(0,0,0,0.87); +} + +span.ng-binding.flex { + color: rgba(0,0,0,0.87); +} diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.module.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.module.js index 2a74d9409..43efa0217 100644 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.module.js +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.module.js @@ -31,6 +31,8 @@ define([ NavHelperProvider.addControllerUrl('app/gbp/common/gbp.controller'); NavHelperProvider.addControllerUrl('app/gbp/contract/add-contract.controller'); NavHelperProvider.addControllerUrl('app/gbp/contract/contract.controller'); + NavHelperProvider.addControllerUrl('app/gbp/endpoints/endpoints.controller'); + NavHelperProvider.addControllerUrl('app/gbp/endpoints/add-endpoint.controller'); NavHelperProvider.addControllerUrl('app/gbp/epg/epg.controller'); NavHelperProvider.addControllerUrl('app/gbp/policy/policy.controller'); NavHelperProvider.addControllerUrl('app/gbp/resolved-policy/resolved-policy.controller'); @@ -153,6 +155,18 @@ define([ }, }); + $stateProvider.state('main.gbp.index.endpoints', { + url: '/endpoints', + access: access.admin, + templateUrl: 'src/app/gbp/common/views/index.tpl.html', + views: { + '': { + controller: 'EndpointsController', + templateUrl: 'src/app/gbp/endpoints/endpoints.tpl.html', + }, + }, + }); + $mdThemingProvider.theme('default') .primaryPalette('blue') .accentPalette('blue-grey'); diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/add-endpoint.controller.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/add-endpoint.controller.js new file mode 100644 index 000000000..167c2ba56 --- /dev/null +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/add-endpoint.controller.js @@ -0,0 +1,42 @@ +define([ + 'app/gbp/endpoints/endpoint.service', +], function () { + 'use strict'; + + angular.module('app.gbp').controller('AddEndpointController', AddEndpointController); + + AddEndpointController.$inject = ['$mdDialog', '$scope', 'EndpointService', 'endpoint']; + /* @ngInject */ + function AddEndpointController($mdDialog, $scope, EndpointService, endpoint) { + /* properties */ + $scope.endpoint = endpoint ? endpoint : EndpointService.createObject(); + + /* methods */ + $scope.closeDialog = closeDialog; + $scope.save = save; + $scope.checkEndpointGroup = checkEndpointGroup; + $scope.checkEndpointCondition = checkEndpointCondition; + + console.log('$scope.rootTenants.data.Tenant', $scope.rootTenants.data.Tenant); + /* Implementations */ + + function closeDialog(){ + $mdDialog.cancel(); + $scope.getEndpointsList(); + } + + function save() { + $scope.endpoint.post(function () { + $scope.closeDialog(); + }, function () { + } ); + } + + function checkEndpointGroup(){ + // $scope.bgpRouteForm.nextHopVal.invalidHops = $scope.bgpRoute.getInvalidHops(); + } + + function checkEndpointCondition(){ + } + } +}); diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/dialog-add-endpoint.tpl.html b/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/dialog-add-endpoint.tpl.html new file mode 100644 index 000000000..5d9d6f058 --- /dev/null +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/dialog-add-endpoint.tpl.html @@ -0,0 +1,93 @@ + +
+ +
+

Add Endpoint

+ + Close dialog +
+ + +
+
+ + + + + + {{ tenant.data.id }} + + + + + + + +
+
Required field
+
+ + + + +
+
Required field.
+
+ +
+
+ + + + + + + +
+
Required field
+
+ +
+
+ + + + + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + Close + + + Save + + +
+ diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/endpoint.service.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/endpoint.service.js new file mode 100644 index 000000000..468d55294 --- /dev/null +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/endpoint.service.js @@ -0,0 +1,123 @@ +define([], function () { + 'use strict'; + + angular.module('app.gbp').service('EndpointService', EndpointService); + + EndpointService.$inject = ['Restangular']; + + function EndpointService(Restangular) { + /* methods */ + this.createObject = createObject; + + /** + * Endpoint constructor + * @constructor + */ + function Endpoint() { + /* properties */ + this.data = {}; + this.data['endpoint-group'] = []; + this.data.condition = []; + /* methods */ + this.setData = setData; + this.get = get; + // this.put = put; + this.post = post; + this.deleteEndpoint = deleteEndpoint; + + /* Implementation */ + /** + * fills Endpoint object with data + * @param data + */ + function setData(data) { + this.data['context-type'] = data['context-type']; + this.data['context-id'] = data['context-id']; + this.data['address-type'] = data['address-type']; + this.data.address = data.address; + this.data['network-containment'] = data['network-containment']; + this.data.tenant = data.tenant; + this.data.timestamp = Date(); + this.data['endpoint-group'] = data['endpoint-group']; + } + /** + * gets one Endpoint object from Restconf + * @param id + * @returns {*} + */ + function get() { + var self = this; + + var restObj = Restangular + .one('restconf') + .one('config') + .one('policy:tenants') + .one('tenant') + .one(id) + .one('policy') + .one('Endpoint') + .one(id); + + return restObj.get().then(function (data) { + self.setData(data.Endpoint[0]); + }); + } + + function post(successCbk) { + + var self = this, + restObj = Restangular.one('restconf').one('operations').one('base-endpoint:register-endpoint'), + reqData = { + 'input': { + 'address-endpoint-reg': [ + self.data, + ], + }, + }; + restObj.customPOST(reqData).then(function (data) { + successCbk(data); + }, function () { + + }); + } + + function deleteEndpoint(id, successCallback) { + var self = this; + + var restObj = Restangular + .one('restconf') + .one('config') + .one('policy:tenants') + .one('tenant') + .one(id) + .one('policy') + .one('Endpoint') + .one(self.data.id); + + return restObj.remove().then(function (data) { + successCallback(data); + }, function () { + + }); + } + + } + + /** + * creates Endpoint object and fills it with data if available + * @param data + * @returns {Endpoint} + */ + function createObject(data) { + var obj = new Endpoint(); + + if (data) { + obj.setData(data); + } + + return obj; + } + } + + return EndpointService; +}); diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/endpoints-list.service.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/endpoints-list.service.js new file mode 100644 index 000000000..17f5b985d --- /dev/null +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/endpoints-list.service.js @@ -0,0 +1,57 @@ +define([], function () { + 'use strict'; + + angular.module('app.gbp').service('EndpointsListService', EndpointsListService); + + EndpointsListService.$inject = ['Restangular', 'EndpointService']; + + function EndpointsListService(Restangular, EndpointService) { + /* methods */ + this.createList = createList; + + function EndpointsList() { + /* properties */ + this.data = []; + + /* methods */ + this.setData = setData; + this.get = get; + this.clearData = clearData; + + /* Implementation */ + /** + * fills EndpointsList object with data + * @param data + */ + function setData(data) { + var self = this; + data.forEach(function (dataElement) { + self.data.push(EndpointService.createObject(dataElement)); + }); + } + + function clearData() { + var self = this; + self.data = []; + } + + function get() { + /* jshint validthis:true */ + var self = this; + var restObj = Restangular.one('restconf').one('operational').one('base-endpoint:endpoints'); + + return restObj.get().then(function (data) { + self.setData(data.endpoints['address-endpoints']['address-endpoint']); + }); + } + } + + function createList() { + var obj = new EndpointsList(); + + return obj; + } + } + + return EndpointsListService; +}); diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/endpoints.controller.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/endpoints.controller.js new file mode 100644 index 000000000..a742ea085 --- /dev/null +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/endpoints.controller.js @@ -0,0 +1,63 @@ +define([ + 'app/gbp/endpoints/endpoint.service', + 'app/gbp/endpoints/endpoints-list.service', +], function () { + 'use strict'; + + angular.module('app.gbp').controller('EndpointsController', EndpointsController); + + EndpointsController.$inject = ['$scope', '$mdDialog', 'EndpointsListService', 'EndpointService']; + + function EndpointsController($scope, $mdDialog, EndpointsListService, EndpointService) { + $scope.endpoints = EndpointsListService.createList(); + $scope.openEndpointDialog = openEndpointDialog; + $scope.getEndpointsList = getEndpointsList; + $scope.deleteEndpointDialog = deleteEndpointDialog; + $scope.endpointsTableQuery = { + order: "data['context-id']", + limit: 25, + page: 1, + options: [25, 50, 100], + filter: '', + }; + + getEndpointsList(); + + function getEndpointsList() { + $scope.endpoints.clearData(); + $scope.endpoints.get(); + } + + function openEndpointDialog(endpointData) { + $mdDialog.show({ + clickOutsideToClose: true, + controller: 'AddEndpointController', + preserveScope: true, + templateUrl: $scope.viewPath + 'endpoints/dialog-add-endpoint.tpl.html', + parent: angular.element(document.body), + scope: $scope, + locals: { + endpoint: endpointData, + }, + }); + } + + function deleteEndpointDialog(endpointData) { + var confirm = $mdDialog.confirm() + .title('Delete endpoint') + .textContent('Do you want to delete endpoint?') + .ok('Delete') + .cancel('Cancel'); + + $mdDialog.show(confirm).then(function () { + contractData.deleteEndpoint($scope.rootTenant.data.id, + function () { + $scope.getEndpointsList(); + } + ); + }, function () { + + }); + } + } +}); diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/endpoints.tpl.html b/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/endpoints.tpl.html new file mode 100644 index 000000000..f3151c3aa --- /dev/null +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/endpoints.tpl.html @@ -0,0 +1,43 @@ +
+
+ Add + Reload +
+ + + + + + + + + + + + + + + + + + + + +
Context IdAddressTenantEndpoint GroupActions
{{ endpoint.data['context-id'] }}{{ endpoint.data.address }}{{ endpoint.data.tenant }}{{ epg }} + , + + + edit + + + delete + +
+ + + +
diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/side_panel_endpoints_detail.tpl.html b/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/side_panel_endpoints_detail.tpl.html new file mode 100644 index 000000000..878227b0a --- /dev/null +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/side_panel_endpoints_detail.tpl.html @@ -0,0 +1,31 @@ +Endpoint properties +
+ Context type{{ sidePanelObject['context-type'] }} +
+
+ Context Id{{ sidePanelObject['context-id'] }} +
+
+ Address type{{ sidePanelObject['address-type'] }} +
+
+ address{{ sidePanelObject.address }} +
+ +
+ Network domain Id{{ sidePanelObject['network-containment']['network-domain-id'] }} +
+
+ Network domain type{{ sidePanelObject['network-containment']['network-domain-type'] }} +
+
+ Tenant{{ sidePanelObject.tenant }} +
+
+ Timestamp{{ sidePanelObject.timestamp | date: 'short'}} +
+
+ Endpoint group{{ epg }} + , + +
-- 2.36.6