From 2a32295a39771c31b279cb797dfdae3173284cd8 Mon Sep 17 00:00:00 2001 From: Daniel Malachovsky Date: Mon, 27 Jun 2016 14:45:26 +0200 Subject: [PATCH] open app on resolved policy -app open on resolved policy now -tenant selector styling -SGTs added to sidePannel -SGTs fixing -add/edit dialog: Endpoint Group's autocomplete feature fixed -add/edit dialog styling -reworked resolved-policy -toolbar tenant selector styling -> to be white -auto pre-populate Tenant Id in add/edit EP form if root tenant selected. "require-match" removed from add/edit EP form for Endpoint Group -add/edit EP form style for context&address type corrected -add/edit EP form -> text color changed to black for Endpoint Group and Condition Change-Id: I0c6590ee4856a6a3400597bf5d9609b05afd90a7 Signed-off-by: michal.kovacik Signed-off-by: Daniel Malachovsky Signed-off-by: michal.kovacik Signed-off-by: Daniel Malachovsky --- .../resources/gbp/common/gbp.controller.js | 227 ++++++------------ .../src/main/resources/gbp/common/gbp.css | 29 ++- .../common/topology/next_topology.service.js | 3 +- .../gbp/endpoints/add-endpoint.controller.js | 5 + .../endpoints/dialog-add-endpoint.tpl.html | 32 ++- .../gbp/endpoints/endpoint.service.js | 12 + .../gbp/endpoints/endpoints.controller.js | 3 + .../gbp/endpoints/endpoints.tpl.html | 6 +- .../side_panel_endpoints_detail.tpl.html | 49 ++-- .../gbp/endpoints/sxp-mapping-list.service.js | 73 ++++++ .../gbp/endpoints/sxp-mapping.service.js | 53 ++++ .../resolved-policy/epg-sidepanel.tpl.html | 151 ++++-------- .../resolved-policy-list.service.js | 141 +++++++++++ .../resolved-policy.controller.js | 43 ++-- .../resolved-policy.service.js | 27 ++- .../resolved-policy/rule-sidepanel.tpl.html | 5 +- .../gbp/sfc/dialog-sfc-topology.controller.js | 14 +- .../src/main/resources/gbp/sfc/sfc.service.js | 9 +- 18 files changed, 539 insertions(+), 343 deletions(-) create mode 100644 groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/sxp-mapping-list.service.js create mode 100644 groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/sxp-mapping.service.js create mode 100644 groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/resolved-policy-list.service.js diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.controller.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.controller.js index cb04cc439..97eb26047 100644 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.controller.js +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.controller.js @@ -1,17 +1,24 @@ -define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.service'], function () { +define([ + 'app/gbp/common/gbp.service', + 'app/gbp/resolved-policy/resolved-policy-list.service', + 'app/gbp/endpoints/sxp-mapping-list.service' +], function () { 'use strict'; angular.module('app.gbp').controller('RootGbpCtrl', RootGbpCtrl); - RootGbpCtrl.$inject = ['$state', '$rootScope', '$scope', '$filter', '$mdDialog', 'RootGbpService', - 'TenantListService', 'EpgListService', 'ResolvedPolicyService', 'NextTopologyService', 'EndpointsListService']; + RootGbpCtrl.$inject = ['$filter', '$mdDialog', '$rootScope', '$scope', '$state', + 'EndpointsListService', 'NextTopologyService', 'ResolvedPolicyListService', 'RootGbpService', + 'TenantListService', 'SxpMappingListService']; - function RootGbpCtrl($state, $rootScope, $scope, $filter, $mdDialog, RootGbpService, - TenantListService, EpgListService, ResolvedPolicyService, NextTopologyService, EndpointsListService) { + function RootGbpCtrl($filter, $mdDialog, $rootScope, $scope, $state, + EndpointsListService, NextTopologyService, ResolvedPolicyListService, RootGbpService, + TenantListService, SxpMappingListService) { /* properties */ $scope.apiType = 'operational'; $scope.activeObject = null; $scope.endpoints = EndpointsListService.createList(); + $scope.endpointSgtList = SxpMappingListService.createList(); $scope.rootTenant = null; $scope.rootTenants = TenantListService.createList(); $scope.resolvedPolicy = {}; @@ -20,14 +27,13 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s $scope.sidePanelPage = false; $scope.sidePanelPageEndpoint = false; $scope.stateUrl = null; - $scope.topologyData = {nodes: [], links: []}; + $scope.topologyData = { nodes: [], links: [] }; $scope.viewPath = 'src/app/gbp/'; - var resolvedPolicies = ResolvedPolicyService.createObject(); - resolvedPolicies.get(fillTopologyData); + var resolvedPolicies = ResolvedPolicyListService.createList(); + getResolvedPolicies(); /* methods */ - $scope.fillTopologyData = fillTopologyData; $scope.broadcastFromRoot = broadcastFromRoot; $scope.closeSidePanel = closeSidePanel; $scope.openSfcDialog = openSfcDialog; @@ -78,7 +84,7 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s * @param arr */ function collapseAll(arr) { - arr.forEach(function(element) { + arr.forEach(function (element) { element.expanded = false; }); } @@ -91,12 +97,13 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s * @param tenant * @returns {{id: string, source: *, target: *, tenant: *}} */ - function createLink( source, target, contract, tenant) { + function createLink( linkId) { + var linkIdParts = linkId.split('_'); return { - 'id': generateLinkId(contract, source, target), - 'source': source, - 'target': target, - 'tenant': tenant, + 'id': linkId, + 'source': linkIdParts[1], + 'target': linkIdParts[2], + 'tenant': $scope.rootTenant }; } @@ -104,14 +111,14 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s * * @param nodeName * @param tenantId - * @returns {{id: *, tenantId: *, node-id: *, label: *}} + * @returns {Object} */ - function createNode(nodeName, tenantId) { + function createNode(nodeName) { return { 'id': nodeName, - 'tenantId' : tenantId, + 'tenantId': $scope.rootTenant, 'node-id': nodeName, - 'label': nodeName, + 'label': nodeName }; } @@ -122,14 +129,13 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s $scope.fadeAll(); $scope.sidePanelPage = 'resolved-policy/contract-sidepanel'; - var obj = Object.keys($scope.resolvedPolicy).map(function(k) { - var obj = $scope.resolvedPolicy[k]; - obj.linkId = k; + $scope.sidePanelObject = Object.keys($scope.resolvedPolicy.contracts).map(function (k) { + var ob = $scope.resolvedPolicy.contracts[k]; + ob.linkId = k; - return obj; + return ob; }); - $scope.sidePanelObject = obj; $scope.selectedNode = null; $scope.activeObject = 'contract'; } @@ -139,12 +145,14 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s */ function deselectEpg() { $scope.fadeAll(); - var elements; - $scope.sidePanelPage = 'resolved-policy/epg-sidepanel'; - elements = EpgListService.createList(); - elements.get($scope.apiType, $scope.rootTenant); - $scope.sidePanelObject = elements; + + $scope.sidePanelObject = Object.keys($scope.resolvedPolicy.epgs).map(function (k) { + var ob = $scope.resolvedPolicy.epgs[k]; + ob.id = k; + + return ob; + }); $scope.selectedNode = null; $scope.activeObject = 'epg'; } @@ -154,7 +162,7 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s * @param arr */ function expandAll(arr) { - arr.forEach(function(element) { + arr.forEach(function (element) { element.expanded = true; }); } @@ -167,80 +175,24 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s } /** - * - * @param data - */ - function fillResolvedPolicy(data) { - if(data['policy-rule-group-with-endpoint-constraints']) { - processPolicyRuleGroupWithEpConstraints( - data['policy-rule-group-with-endpoint-constraints'], - data['provider-epg-id'], - data['consumer-epg-id']); - } - - } - - /** - * + * reads resolvedPolicies list, prepares nodes and links for topology and fills them */ function fillTopologyData() { - if($scope.rootTenant) { - var topoData = {nodes: [], links: [],}, - filteredResolvedPolicies = $filter('filter')(resolvedPolicies.data, { - 'consumer-tenant-id': $scope.rootTenant, - 'provider-tenant-id': $scope.rootTenant - }); - + var tempTopoData = {nodes: [], links: []}; - filteredResolvedPolicies && filteredResolvedPolicies.forEach(function(rp) { - if(rp['consumer-tenant-id'] === $scope.rootTenant) { - topoData.nodes.push(createNode(rp['consumer-epg-id'], rp['consumer-tenant-id'])); - } - topoData.nodes.push(createNode(rp['provider-epg-id'], rp['provider-tenant-id'])); - - fillResolvedPolicy(rp); - topoData.links = getContracts(rp); - }); - - $scope.topologyData = topoData; - $scope.topologyLoaded = true; - } - } + $scope.resolvedPolicy = resolvedPolicies.aggregateResolvedPolicies(); + console.log('resolved and aggregated', $scope.resolvedPolicy); - /** - * - * @param contractId - * @param providerEpgId - * @param consumerEpgId - * @returns {string} - */ - function generateLinkId(contractId, providerEpgId, consumerEpgId) { - return contractId + '_' + providerEpgId + '_' + consumerEpgId; - } + tempTopoData.nodes = Object.keys($scope.resolvedPolicy.epgs).map(function (key) { + return createNode(key); + }); - /** - * - * @param data - * @returns {Array} - */ - function getContracts(data) { - var retVal = []; - - if( data['policy-rule-group-with-endpoint-constraints'] && - data['policy-rule-group-with-endpoint-constraints'][0]['policy-rule-group']) { - data['policy-rule-group-with-endpoint-constraints'][0]['policy-rule-group'].forEach(function(prg) { - retVal.push( - createLink( - data['provider-epg-id'], - data['consumer-epg-id'], - prg['contract-id'], - prg['tenant-id'] - ) - ) - }); - } + tempTopoData.links = Object.keys($scope.resolvedPolicy.contracts).map(function (key) { + return createLink(key); + }); - return retVal; + $scope.topologyData = tempTopoData; + $scope.topologyLoaded = true; } /** @@ -255,6 +207,12 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s return 0; } + function getResolvedPolicies() { + if($scope.rootTenant) { + resolvedPolicies.get($scope.rootTenant, fillTopologyData); + } + } + /** * * @param node @@ -277,6 +235,8 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s function init() { $scope.rootTenants.clearData(); $scope.rootTenants.get('config'); + $state.go('main.gbp.index.resolvedPolicy'); + $scope.endpointSgtList.get(); } /** @@ -292,8 +252,8 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s parent: angular.element(document.body), scope: $scope, locals: { - chainName: chainName, - }, + chainName: chainName + } }); } @@ -303,14 +263,6 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s * and opens/closes side panel */ function openSidePanel(page, object, cbk) { - if(object.constructor.name == 'Epg') { - $scope.endpoints.clearData(); - $scope.endpoints.getByEpg(object.data.id); - $scope.activeObject = 'epg'; - } - else - $scope.activeObject = 'contract'; - var samePage = page === $scope.sidePanelPage; $scope.selectedNode = object; @@ -329,12 +281,12 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s * @param idElement */ function openSidePanelContract(idElement) { - var obj = $filter('filter')(Object.keys($scope.resolvedPolicy).map(function(k) { - var obj = $scope.resolvedPolicy[k]; + var obj = $filter('filter')(Object.keys($scope.resolvedPolicy.contracts).map(function (k) { + var obj = $scope.resolvedPolicy.contracts[k]; obj.linkId = k; return obj; - }), {'contract-id': idElement}); + }), { 'contract-id': idElement }); $scope.sidePanelPage = 'resolved-policy/contract-sidepanel'; $scope.sidePanelObject = obj[0]; @@ -350,7 +302,7 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s * @param type */ function openSidePanelChild(index, type) { - switch(type) { + switch (type) { case 'subject': $scope.sidePanelPage = 'resolved-policy/subject-sidepanel'; $scope.subjectIndex = index; @@ -371,7 +323,7 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s * @param tpl */ function openSidePanelTpl(tpl) { - switch(tpl) { + switch (tpl) { case 'contract': $scope.sidePanelPage = 'resolved-policy/contract-sidepanel'; break; @@ -387,43 +339,14 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s } } - /** - * - * @param data - * @param providerEpgId - * @param consumerEpgId - */ - function processPolicyRuleGroupWithEpConstraints(data, providerEpgId, consumerEpgId) { - data.forEach(function(element) { - element['policy-rule-group'].forEach(function(el) { - var linkId = generateLinkId(el['contract-id'], providerEpgId, consumerEpgId); - - $scope.resolvedPolicy = {}; - - if(!$scope.resolvedPolicy.hasOwnProperty(linkId)) { - $scope.resolvedPolicy[linkId] = { - 'contract-id': el['contract-id'], - 'subjects': {}, - }; - } - - if(!$scope.resolvedPolicy[linkId].subjects.hasOwnProperty(el['subject-name'])) { - $scope.resolvedPolicy[linkId].subjects[el['subject-name']] = {'resolved-rule': []}; - } - - $scope.resolvedPolicy[linkId].subjects[el['subject-name']]['resolved-rule'].push(el['resolved-rule']); - }); - }); - } - /** * */ function setRootTenant() { $scope.broadcastFromRoot('ROOT_TENANT_CHANGED'); - if($scope.stateUrl.startsWith('/resolved-policy')) { - fillTopologyData(); + if ($scope.stateUrl.startsWith('/resolved-policy')) { + getResolvedPolicies() if($scope.sidePanelPage) { if($scope.activeObject == 'epg') deselectEpg(); @@ -441,8 +364,8 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s $scope.stateUrl = $state.current.url; closeSidePanel(); - if($scope.stateUrl.startsWith('/resolved-policy')) { - fillTopologyData(); + if ($scope.stateUrl.startsWith('/resolved-policy')) { + getResolvedPolicies() } } @@ -451,11 +374,8 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s * @param element */ function toggleExpanded(element) { - if(typeof element !== 'string') { - if(element.expanded) - element.expanded = false; - else - element.expanded = true; + if (typeof element !== 'string') { + element.expanded = !element.expanded; } } @@ -469,8 +389,8 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s parent: angular.element(document.body), scope: $scope, locals: { - endpoint: endpointData, - }, + endpoint: endpointData + } }); } @@ -494,7 +414,6 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s $scope.endpoints.clearData(); $scope.endpoints.getByEpg($scope.selectedNode.data.id); } - /* event listeners */ /** * Event fired after content loaded, setStateUrl function is called to fill stateUrl method 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 e7dbd567e..2598c3ad5 100644 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.css +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.css @@ -97,9 +97,9 @@ svg g.node text { } /* $mdDialog.confirm */ -md-dialog button span { +/* md-dialog button span { color: #000; -} +} */ div.layout-padding h3 { color: black; @@ -239,3 +239,28 @@ li > md-autocomplete-parent-scope > span { color: white; font-weight: normal; } + +md-input-container md-select md-select-value span { + font-size: 14px; + font-style: inherit; + font-variant: inherit; + font-family: inherit; + letter-spacing: 0.010em; +} + +#select_container_1 { + z-index:1001; +} + +#select_value_label_0 { + border-bottom-color: white !important; + border-bottom-width: 1px; +} + +#select_value_label_0 span { + color: white !important; +} + +.md-chip-content .ng-binding { + color: black; +} diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/topology/next_topology.service.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/topology/next_topology.service.js index 4b18baaaa..f9e5dd949 100644 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/topology/next_topology.service.js +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/topology/next_topology.service.js @@ -16,7 +16,8 @@ define(['next-ui'], function () { scalable: true, nodeConfig: { label: 'model.label', - iconType: 'model.icon', + //iconType: 'model.icon', + iconType: 'unlinked', color: function (node, model) { return topoColors.getItem('forwarding-box'); } 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 index 33262bfa3..be2c06eb5 100644 --- 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 @@ -12,6 +12,9 @@ define([ /* properties */ $scope.endpoint = endpoint ? endpoint : EndpointService.createObject(); + if (!$scope.endpoint.data.tenant) { + $scope.endpoint.data.tenant = $scope.rootTenant ? $scope.rootTenant : null; + } $scope.epgsChips = { selectedItem: null, searchText: null, @@ -36,6 +39,8 @@ define([ $scope.searchEpgs = searchEpgs; $scope.populateScopeAfterTenantSelected = populateScopeAfterTenantSelected; + populateScopeAfterTenantSelected(); + /* Implementations */ $scope.forwarding.get(postForwardingGet); 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 index 84b167ec8..a53e560a7 100644 --- 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 @@ -24,24 +24,30 @@ + aria-label="Context type select" + ng-required="true"> + ng-value="contextType"> {{ contextType }} +
+
Required field
+
+ aria-label="Context Id select" + ng-required="true"> + ng-value="contextId['context-id']"> {{ contextId['context-id'] }} +
+
Required field
+
@@ -51,14 +57,13 @@
- + + ng-value="addressType"> {{ addressType }} -
+
Required field
@@ -85,16 +90,10 @@ {{ NetworkDomainId['network-domain-id'] }} -
-
Required field.
-
-
-
Required field.
-
@@ -103,7 +102,6 @@ - {{ endpoint.data['context-id'] }} - {{ endpoint.data.address }} - {{ endpoint.data.tenant }} + {{ endpoint.data['context-id'] }} + {{ endpoint.data.address }} + {{ endpoint.data.tenant }} {{epg}}, 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 index c1876566c..5f32b957a 100644 --- 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 @@ -1,49 +1,52 @@ Endpoint properties -
- Tenant{{ sidePanelObject.tenant }} +
+ Tenant{{ sidePanelObject.data.tenant }}
-
- Endpoint group{{epg}}, +
+ Endpoint group{{epg}},
- Context type{{ sidePanelObject['context-type'] }} + Context type{{ sidePanelObject.data['context-type'] }}
- Context Id{{ sidePanelObject['context-id'] }} + Context Id{{ sidePanelObject.data['context-id'] }}
- Address type{{ sidePanelObject['address-type'] }} + Address type{{ sidePanelObject.data['address-type'] }}
- Address{{ sidePanelObject.address }} + Address{{ sidePanelObject.data.address }}
- Network domain -
- Id{{ sidePanelObject['network-containment']['network-domain-id'] }} + Network domain +
+ Id{{ sidePanelObject.data['network-containment']['network-domain-id'] }}
-
- type{{ sidePanelObject['network-containment']['network-domain-type'] }} +
+ type{{ sidePanelObject.data['network-containment']['network-domain-type'] }}
- -
- Condition{{cndt}}, + +
+ Condition{{cndt}},
-
+
-
- Internal node{{ sidePanelObject['absolute-location']['internal-node'] }} +
+ Internal node{{ sidePanelObject.data['absolute-location']['internal-node'] }}
-
- Internal node connector{{ sidePanelObject['absolute-location']['internal-node-connector'] }} +
+ Internal node connector{{ sidePanelObject.data['absolute-location']['internal-node-connector'] }}
-
- Timestamp{{ sidePanelObject.timestamp | date: 'short'}} +
+ Timestamp{{ sidePanelObject.data.timestamp | date: 'short'}} +
+
+ SGT{{ endpointSgtList.findSgtsForEndpoint(sidePanelObject) }}
diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/sxp-mapping-list.service.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/sxp-mapping-list.service.js new file mode 100644 index 000000000..4a3f3db58 --- /dev/null +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/sxp-mapping-list.service.js @@ -0,0 +1,73 @@ +define(['app/gbp/endpoints/sxp-mapping.service'], function () { + 'use strict'; + + angular.module('app.gbp').service('SxpMappingListService', SxpMappingListService); + + SxpMappingListService.$inject = ['$filter', 'Restangular', 'SxpMappingService']; + + function SxpMappingListService($filter, Restangular, SxpMappingService) { + /* methods */ + this.createList = createList; + + function EndpointsSgtList() { + /* properties */ + this.data = []; + + /* methods */ + this.setData = setData; + this.get = get; + this.clearData = clearData; + this.findSgtsForEndpoint = findSgtsForEndpoint; + + /* Implementation */ + /** + * fills EndpointsSgtList object with data + * @param data + */ + function setData(data) { + var self = this; + + data && data.forEach(function (dataElement) { + self.data.push(SxpMappingService.createObject(dataElement)); + }); + } + + function clearData() { + var self = this; + self.data = []; + } + + function get() { + /* jshint validthis:true */ + var self = this; + var restObj = Restangular.one('restconf').one('config').one('sxp-mapper-model:sxp-mapper'); + + return restObj.get().then(function (data) { + self.setData(data['sxp-mapper']['endpoint-policy-template-by-sgt']); + }); + } + + function findSgtsForEndpoint(EPobject) { + var self = this, + result = self.data.map(function (ele) { + // properties correction + var condition = ele.data.conditions === undefined ? [] : ele.data.conditions, + epg = ele.data['endpoint-groups'] === undefined ? [] : ele.data['endpoint-groups']; + + return condition.length==EPobject.data.condition.length && condition.every(function(v,i) { return ($.inArray(v,EPobject.data.condition) != -1)}) && + epg.length==EPobject.data['endpoint-group'].length && epg.every(function(v,i) { return ($.inArray(v,EPobject.data['endpoint-group']) != -1)}) && + angular.equals(ele.data.tenant, EPobject.data.tenant) ? ele.data.sgt : false; + }).filter(Boolean); + return result.toString(); + } + } + + function createList() { + var obj = new EndpointsSgtList(); + + return obj; + } + } + + return SxpMappingListService; +}); diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/sxp-mapping.service.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/sxp-mapping.service.js new file mode 100644 index 000000000..569228bde --- /dev/null +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/sxp-mapping.service.js @@ -0,0 +1,53 @@ +define([], function () { + 'use strict'; + + angular.module('app.gbp').service('SxpMappingService', SxpMappingService); + + function SxpMappingService() { + /* methods */ + this.createObject = createObject; + + /** + * EndpointSgt constructor + * @constructor + */ + function EndpointSgt() { + /* properties */ + this.data = {}; + + /* methods */ + this.setData = setData; + + /* Implementation */ + /** + * fills EndpointSgt object with data + * @param data + */ + + function setData(data) { + this.data = {}; + this.data.sgt = data.sgt; + this.data['endpoint-groups'] = data['endpoint-groups']; + this.data.conditions = data.conditions; + this.data.tenant = data.tenant; + } + } + + /** + * creates EndpointSgt object and fills it with data if available + * @param data + * @returns {EndpointSgt} + */ + function createObject(data) { + var obj = new EndpointSgt(); + + if (data) { + obj.setData(data); + } + + return obj; + } + } + + return SxpMappingService; +}); diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/epg-sidepanel.tpl.html b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/epg-sidepanel.tpl.html index bcbc96a85..82fa874cc 100644 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/epg-sidepanel.tpl.html +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/epg-sidepanel.tpl.html @@ -7,11 +7,16 @@
- Endpoint-groups ({{sidePanelObject.data.length}}) + Endpoint-groups ({{sidePanelObject.length}}) - - - {{epg.data.id}} + + +
+

{{epg.id}}

+
@@ -21,7 +26,7 @@
  • Endpoint-groups
  • keyboard_arrow_right
    • -
  • {{selectedNode.data.id}}
    • +
  • {{sidePanelObject.id}}
@@ -29,114 +34,62 @@ Endpoint-group info
Endpoint-group ID - {{sidePanelObject.data.id}} -
-
- intra-group-policy - - - - {{sidePanelObject.data['intra-group-policy']}} - - - + {{sidePanelObject.id}}
-
- Provider-named selectors ({{sidePanelObject.data['provider-named-selector'].length}}) +
+ Provided contracts ({{sidePanelObject['provided-contracts'].length}}) - - - {{providerNamedSelector.name}} - -
-
- Contract ID - {{providerNamedSelector.contract[0]}} -
-
- - - + +
+

{{providedContract}}

+
+
-
- Consumer-named selectors ({{sidePanelObject.data['consumer-named-selector'].length}}) +
+ Consumed contracts ({{sidePanelObject['consumed-contracts'].length}}) - - - {{consumerNamedSelector.name}} - -
-
- Contract ID - {{consumerNamedSelector.contract[0]}} -
-
- - - + +
+

{{consumedContract}}

+
+
Endpoints ({{endpoints.data.length}}) - - - - -
- - Expand all - - - - -
- - Collapse all - - -
- - - edit - - - delete - - - {{endpoint.data['context-id']}} - -
-
- Context Type - {{endpoint.data['context-type']}} -
-
- Address - {{endpoint.data.address}} -
-
- Address Type - {{endpoint.data['address-type']}} -
-
- Network Domain ID - {{endpoint.data['network-containment']['network-domain-id']}} -
-
- Network Domain Type - {{endpoint.data['network-containment']['network-domain-type']}} -
-
- - - + +
+

{{endpoint.getEndpointContextTypeAcronym()}}

+ {{endpoint.data['context-type']}} +
+
+

{{endpoint.data['context-id']}}

+

Address: {{endpoint.data.address}}

+

Network Domain: {{endpoint.data['network-containment']['network-domain-id']}}

+

SGT: {{endpointSgtList.findSgtsForEndpoint(endpoint)}}

+
+
+ + edit + +
+
+ + delete + +
+
- \ No newline at end of file + diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/resolved-policy-list.service.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/resolved-policy-list.service.js new file mode 100644 index 000000000..0d724089b --- /dev/null +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/resolved-policy-list.service.js @@ -0,0 +1,141 @@ +define(['app/gbp/resolved-policy/resolved-policy.service'], function () { + 'use strict'; + + angular.module('app.gbp').service('ResolvedPolicyListService', ResolvedPolicyListService); + + ResolvedPolicyListService.$inject = ['$filter', 'Restangular', 'ResolvedPolicyService']; + + function ResolvedPolicyListService($filter, Restangular, ResolvedPolicyService) { + /* methods */ + this.createList = createList; + this.generateLinkId = generateLinkId; + + + function ResolvedPolicyList() { + /* properties */ + this.data = []; + + /* methods */ + this.aggregateResolvedPolicies = aggregateResolvedPolicies; + this.get = get; + this.clearData = clearData; + this.setData = setData; + + /* Implementation */ + /** + * fills ResolvedPolicyList object with data + * @param data + */ + function setData(data) { + var self = this; + + data && data.forEach(function (dataElement) { + self.data.push(ResolvedPolicyList.createObject(dataElement)); + }); + } + + function clearData() { + var self = this; + self.data = []; + } + + function get(tenant, successCallback) { + var self = this; + + var restObj = Restangular.one('restconf').one('operational').one('resolved-policy:resolved-policies'); + + return restObj.get().then(function(data) { + if(tenant) { + self.data = $filter('filter')(data['resolved-policies']['resolved-policy'], { + 'consumer-tenant-id': tenant, + 'provider-tenant-id': tenant + }); + } + else { + self.data = data['resolved-policies']['resolved-policy']; + } + + successCallback(); + }); + } + + function aggregateResolvedPolicies() { + var self = this, + result = {epgs: {}, contracts: {}}; + + self.data.forEach(function(rp) { + processEpg(result, rp, 'consumer'); + processEpg(result, rp, 'provider'); + + if(rp.hasOwnProperty('policy-rule-group-with-endpoint-constraints')) { + processConstraints( + result, + rp['policy-rule-group-with-endpoint-constraints'], + rp['provider-epg-id'], + rp['consumer-epg-id'] + ); + } + }); + + return result; + + } + + function processEpg(returnValue, resolvedPolicyItem, type) { + if(!returnValue.epgs.hasOwnProperty(resolvedPolicyItem[type+'-epg-id'])) { + returnValue.epgs[resolvedPolicyItem[type+'-epg-id']] = { + 'provided-contracts' : [], + 'consumed-contracts':[] + }; + } + + + + } + + function processConstraints(returnValue, constraints, providerEpgId, consumerEpgId) { + constraints.forEach(function (element) { + element['policy-rule-group'].forEach(function (el) { + var linkId = generateLinkId(el['contract-id'], providerEpgId, consumerEpgId); + + updateEpg(returnValue, el['contract-id'], providerEpgId, 'provided'); + updateEpg(returnValue, el['contract-id'], consumerEpgId, 'consumed'); + + if (!returnValue.contracts.hasOwnProperty(linkId)) { + returnValue.contracts[linkId] = { + 'contract-id': el['contract-id'], + 'subjects': {} + }; + } + + if (!returnValue.contracts[linkId].subjects.hasOwnProperty(el['subject-name'])) { + returnValue.contracts[linkId].subjects[el['subject-name']] = { 'resolved-rule': [] }; + } + + returnValue.contracts[linkId].subjects[el['subject-name']]['resolved-rule'].push(el['resolved-rule']); + }); + }); + } + + function updateEpg(returnValue, contractId, epgId, epgType) { + returnValue.epgs[epgId][epgType+'-contracts'].push(contractId); + } + } + + function generateLinkId(contractId, providerEpgId, consumerEpgId) { + return contractId + '_' + providerEpgId + '_' + consumerEpgId; + } + + function createList(data) { + var obj = new ResolvedPolicyList(); + + if(data) { + obj.setData(data); + } + + return obj; + } + } + + return ResolvedPolicyListService; +}); diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/resolved-policy.controller.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/resolved-policy.controller.js index 9815e0c6a..379c17b42 100644 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/resolved-policy.controller.js +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/resolved-policy.controller.js @@ -12,42 +12,39 @@ define(['app/gbp/resolved-policy/resolved-policy.service'], function () { $scope.cbkFunctions = { clickNode: function(node){ - var epg = EpgService.createObject(); - - epg.get(node['_data-id'], node['_model']['_data']['tenantId'], 'operational', function() { - $scope.openSidePanel('resolved-policy/epg-sidepanel', epg, null); - }); + var epg = $scope.resolvedPolicy.epgs[node['_model']['_id']]; + epg.id = node['_model']['_id']; + $scope.openSidePanel('resolved-policy/epg-sidepanel', epg, null); $scope.$apply(); - $scope.parentTenant = node['_model']['_data']['tenantId']; - NextTopologyService.highlightNode($rootScope.nxTopology, node['_data-id']); + NextTopologyService.highlightNode($rootScope.nxTopology, node['_model']['_id']); }, clickLink: function(link){ - var resolvedContract = $scope.resolvedPolicy[link['_model']['_data'].id]; - resolvedContract.linkId = link['_model']['_data'].id; + var resolvedContract = $scope.resolvedPolicy.contracts[link['_model']['_id']]; + resolvedContract.linkId = link['_model']['_id']; $scope.openSidePanel('resolved-policy/contract-sidepanel', resolvedContract, null); $scope.$apply(); - NextTopologyService.highlightLink($rootScope.nxTopology, link['_model']['_data'].id); + NextTopologyService.highlightLink($rootScope.nxTopology, link['_model']['_id']); }, topologyGenerated: function(){ } }; - function openSfcDialog(chainName) { - $mdDialog.show({ - clickOutsideToClose: true, - controller: 'SfcTopologyController', - preserveScope: true, - templateUrl: $scope.viewPath + 'sfc/dialog-sfc-topology.tpl.html', - parent: angular.element(document.body), - scope: $scope, - locals: { - chainName: chainName, - }, - }); - } + //function openSfcDialog(chainName) { + // $mdDialog.show({ + // clickOutsideToClose: true, + // controller: 'SfcTopologyController', + // preserveScope: true, + // templateUrl: $scope.viewPath + 'sfc/dialog-sfc-topology.tpl.html', + // parent: angular.element(document.body), + // scope: $scope, + // locals: { + // chainName: chainName, + // }, + // }); + //} function reloadTopology() { $scope.fillTopologyData(); diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/resolved-policy.service.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/resolved-policy.service.js index b05dbfce4..0093ac0fc 100644 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/resolved-policy.service.js +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/resolved-policy.service.js @@ -14,24 +14,29 @@ define([], function() { /* properties */ this.data = {}; /* methods */ - this.get = get; + this.setData = setData; /* Implementation */ - function get(successCallback) { - var self = this; + function setData(data) { + this.data['consumer-tenant-id'] = data['consumer-tenant-id']; + this.data['consumer-epg-id'] = data['consumer-epg-id']; + this.data['provider-tenant-id'] = data['provider-tenant-id']; + this.data['provider-epg-id'] = data['provider-epg-id']; + this.data['policy-rule-group-with-endpoint-constraints'] = data['policy-rule-group-with-endpoint-constraints']; + } - var restObj = Restangular.one('restconf').one('operational').one('resolved-policy:resolved-policies'); - return restObj.get().then(function(data) { - self.data = data['resolved-policies']['resolved-policy']; - successCallback(); - }); - } } - function createObject() { - return new ResolvedPolicy(); + function createObject(data) { + var obj = new ResolvedPolicy(); + + if (data) { + obj.setData(data); + } + + return obj; } } diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/rule-sidepanel.tpl.html b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/rule-sidepanel.tpl.html index 93ff7186e..053185a75 100644 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/rule-sidepanel.tpl.html +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/rule-sidepanel.tpl.html @@ -37,10 +37,11 @@

{{action.name}}

Action definition ID: {{action['action-definition-id']}}

-

Name: {{action.name}}

+

Parameter name: {{action['parameter-value'][0].name}}

+

Parameter value: {{action['parameter-value'][0]['string-value']}}

- + visibility
diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/sfc/dialog-sfc-topology.controller.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/sfc/dialog-sfc-topology.controller.js index 203f4c53a..7a6c9b486 100644 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/sfc/dialog-sfc-topology.controller.js +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/sfc/dialog-sfc-topology.controller.js @@ -9,7 +9,7 @@ define([ /* @ngInject */ function SfcTopologyController($filter, $mdDialog, $scope, chainName, SfcService) { /* properties */ - $scope.chain = SfcService.createObject({name: 'SFCGBP'}); + $scope.chain = SfcService.createObject({name: chainName}); $scope.topologyDataSfc = {nodes:[], links:[]}; $scope.cbkFunctionsSfc = { clickNode: function(node){ @@ -57,14 +57,16 @@ define([ nodeConfig: { color: '#0386d2', label: 'model.label', - //scale: 'model.scale', + scale: 'model.scale', iconType: function(vertex) { var type = vertex.get().type; switch (type) { - case 'service-function-type:firewall': + case 'firewall': return 'firewall'; - case 'service-function-type:dpi': + case 'dpi': return 'accesspoint'; + case 'qos': + return 'wlc'; default: return 'unknown'; } @@ -77,8 +79,6 @@ define([ width: 5 }, showIcon: true, - //dataProcessor: 'force', - //autoLayout: true, enableSmartNode: false, tooltipManagerConfig: { showNodeTooltip: false, @@ -94,7 +94,7 @@ define([ nodes.push({ id: sf.name, label: sf.name, - type: sf.type, + type: SfcService.getSfTypeShort(sf.type), x: 100*(index+1), y: 400 }); diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/sfc/sfc.service.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/sfc/sfc.service.js index ff70793a0..935f7668c 100644 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/sfc/sfc.service.js +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/sfc/sfc.service.js @@ -8,6 +8,7 @@ define([], function () { function SfcService(Restangular) { /* methods */ this.createObject = createObject; + this.getSfTypeShort = getSfTypeShort; /** * Sfc constructor @@ -28,7 +29,9 @@ define([], function () { */ function setData(data) { - this.data = data; + this.data.name = data.name; + this.data.symmetric = data.symmetric; + this.data['sfc-service-function'] = data['sfc-service-function']; } /** * gets one Sfc object from Restconf @@ -67,6 +70,10 @@ define([], function () { return obj; } + + function getSfTypeShort(sfType) { + return sfType.replace('service-function-type:', '').trim(); + } } return SfcService; -- 2.36.6