From 1fca33030ee85bfeda2fdf9a2daa44512b6ad2bc Mon Sep 17 00:00:00 2001 From: Daniel Malachovsky Date: Thu, 16 Jun 2016 14:26:21 +0200 Subject: [PATCH] Tenant selector -tenant selector added in toolbar Change-Id: Ibe7f2200d1e81208867046982a2e9bdb7bdd1126 Signed-off-by: michal.kovacik Signed-off-by: Daniel Malachovsky --- .../resources/gbp/common/gbp.controller.js | 469 +++++++++++------- .../src/main/resources/gbp/common/gbp.css | 13 +- .../topology/next_topology.directive.js | 4 +- .../resources/gbp/common/views/index.tpl.html | 8 + .../gbp/endpoints/add-endpoint.controller.js | 55 +- .../endpoints/dialog-add-endpoint.tpl.html | 14 +- .../gbp/endpoints/endpoints-list.service.js | 13 + .../gbp/endpoints/endpoints.controller.js | 8 +- .../side_panel_endpoints_detail.tpl.html | 5 +- .../resolved-policy.controller.js | 18 +- .../resolved-policy/resolved-policy.tpl.html | 6 +- .../resolved-policy/rule-sidepanel.tpl.html | 43 +- 12 files changed, 400 insertions(+), 256 deletions(-) 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 f1295b11c..fd8473e2d 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 @@ -7,21 +7,25 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s function RootGbpCtrl($state, $rootScope, $scope, $filter, RootGbpService, TenantListService, TenantService, EpgListService, ResolvedPolicyService, NextTopologyService, EndpointsListService) { /* properties */ - $scope.stateUrl = null; + $scope.apiType = 'operational'; + $scope.endpoints = EndpointsListService.createList(); + $scope.policyDisabled = true; + $scope.rootTenant = null; + $scope.rootTenants = TenantListService.createList(); + $scope.resolvedPolicy = {}; + $scope.selectedNode = {}; + $scope.sidePanelObject = {}; $scope.sidePanelPage = false; $scope.sidePanelPageEndpoint = false; - $scope.sidePanelObject = {}; - $scope.rootTenant = TenantService.createObject(); - $scope.rootTenants = TenantListService.createList(); - $scope.policyDisabled = true; + $scope.stateUrl = null; + $scope.topologyData = {nodes: [], links: []}; $scope.viewPath = 'src/app/gbp/'; - $scope.selectedNode = {}; - $scope.apiType = 'operational'; - $scope.parentTenant = 'tenant-red'; - $scope.resolvedPolicy = {}; - $scope.endpoints = EndpointsListService.createList(); + + var resolvedPolicies = ResolvedPolicyService.createObject(); + resolvedPolicies.get(fillTopologyData); /* methods */ + $scope.fillTopologyData = fillTopologyData; $scope.broadcastFromRoot = broadcastFromRoot; $scope.closeSidePanel = closeSidePanel; $scope.openSidePanel = openSidePanel; @@ -40,145 +44,202 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s $scope.fadeAll = fadeAll; RootGbpService.setMainClass(); - console.log('RootGbpCtrl initialized'); - init(); - - $scope.topologyData = { - nodes: [], - links: [], - }; - /* implementations */ + /** - * Sets '$scope.sidePanelPage' to false. This variable is watched in index.tpl.html template - * and opens/closes side panel + * + * @param eventName + * @param val */ - function init() { - $scope.rootTenants.clearData(); - $scope.rootTenants.get('config'); - } - function broadcastFromRoot(eventName, val) { $scope.$broadcast(eventName, val); } - function setRootTenant() { - $scope.broadcastFromRoot('ROOT_TENANT_CHANGED'); - enableButtons(); - } - + /** + * + */ function closeSidePanel() { $scope.sidePanelPage = false; NextTopologyService.fadeInAllLayers($rootScope.nxTopology); } /** - * fills $scope.stateUrl with loaded url - * It's called on $viewContentLoaded event + * + * @param arr */ - function setStateUrl() { - $scope.stateUrl = $state.current.url; + function collapseAll(arr) { + arr.forEach(function(element) { + element.expanded = false; + }); } /** - * Sets '$scope.sidePanelPage' to true. This variable is watched in index.tpl.html template - * and opens/closes side panel + * + * @param source + * @param target + * @param contract + * @param tenant + * @returns {{id: string, source: *, target: *, tenant: *}} */ - function openSidePanel(page, object, cbk) { - if(object.constructor.name == 'Epg') { - $scope.endpoints.clearData(); - $scope.endpoints.getByEpg(object.data.id); - } - var samePage = page === $scope.sidePanelPage; + function createLink( source, target, contract, tenant) { + return { + 'id': generateLinkId(contract, source, target), + 'source': source, + 'target': target, + 'tenant': tenant, + }; + } - $scope.selectedNode = object; + /** + * + * @param nodeName + * @param tenantId + * @returns {{id: *, tenantId: *, node-id: *, label: *}} + */ + function createNode(nodeName, tenantId) { + return { + 'id': nodeName, + 'tenantId' : tenantId, + 'node-id': nodeName, + 'label': nodeName, + }; + } - $scope.sidePanelCbk = cbk; - $scope.sidePanelPage = page; - $scope.sidePanelObject = object; + /** + * + */ + function deselectContract() { + NextTopologyService.fadeInAllLayers($rootScope.nxTopology); + $scope.sidePanelPage = 'resolved-policy/contract-sidepanel'; - if ( samePage && $scope.sidePanelCbk) { - $scope.sidePanelCbk(); - } + var obj = Object.keys($scope.resolvedPolicy).map(function(k) { + var obj = $scope.resolvedPolicy[k]; + obj.linkId = k; + + return obj; + }); + + $scope.sidePanelObject = obj; + $scope.selectedNode = null; } + /** + * + */ function deselectEpg() { NextTopologyService.fadeInAllLayers($rootScope.nxTopology); var elements; $scope.sidePanelPage = 'resolved-policy/epg-sidepanel'; elements = EpgListService.createList(); - elements.get($scope.apiType, $scope.parentTenant); + elements.get($scope.apiType, $scope.rootTenant); $scope.sidePanelObject = elements; $scope.selectedNode = null; } - function deselectContract() { - NextTopologyService.fadeInAllLayers($rootScope.nxTopology); - $scope.sidePanelPage = 'resolved-policy/contract-sidepanel'; - - var obj = Object.keys($scope.resolvedPolicy).map(function(k) { - var obj = $scope.resolvedPolicy[k]; - obj.linkId = k; + /** + * + */ + function enableButtons() { + $scope.policyDisabled = false; + } - return obj; + /** + * + * @param arr + */ + function expandAll(arr) { + arr.forEach(function(element) { + element.expanded = true; }); + } - $scope.sidePanelObject = obj; - $scope.selectedNode = null; + /** + * + */ + function fadeAll() { + NextTopologyService.fadeInAllLayers($rootScope.nxTopology); } - function openSidePanelTpl(tpl) { - switch(tpl) { - case 'contract': - $scope.sidePanelPage = 'resolved-policy/contract-sidepanel'; - break; - case 'subject': - $scope.sidePanelPage = 'resolved-policy/subject-sidepanel'; - break; - case 'clause': - $scope.sidePanelPage = 'resolved-policy/clause-sidepanel'; - break; - case 'rule': - $scope.sidePanelPage = 'resolved-policy/rule-sidepanel'; - break; + /** + * + * @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']); } + } - function openSidePanelContract(idElement) { - var obj = $filter('filter')(Object.keys($scope.resolvedPolicy).map(function(k) { - var obj = $scope.resolvedPolicy[k]; - obj.linkId = k; + /** + * + */ + function fillTopologyData() { + var topoData = {nodes: [], links: [],}, + filteredResolvedPolicies = $filter('filter')(resolvedPolicies.data, {'consumer-tenant-id': $scope.rootTenant, 'provider-tenant-id': $scope.rootTenant}); - return obj; - }), {'contract-id': idElement}); - $scope.sidePanelPage = 'resolved-policy/contract-sidepanel'; - $scope.sidePanelObject = obj[0]; - $scope.selectedNode = obj[0]; + 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'])); - NextTopologyService.highlightLink($rootScope.nxTopology, obj[0].linkId); + fillResolvedPolicy(rp); + topoData.links = getContracts(rp); + }); + + $scope.topologyData = topoData; + $scope.topologyLoaded = true; } - function openSidePanelChild(index, type) { - switch(type) { - case 'subject': - $scope.sidePanelPage = 'resolved-policy/subject-sidepanel'; - $scope.subjectIndex = index; - break; - case 'clause': - $scope.sidePanelPage = 'resolved-policy/clause-sidepanel'; - $scope.clauseIndex = index; - break; - case 'rule': - $scope.sidePanelPage = 'resolved-policy/rule-sidepanel'; - $scope.ruleIndex = index; - break; + /** + * + * @param contractId + * @param providerEpgId + * @param consumerEpgId + * @returns {string} + */ + function generateLinkId(contractId, providerEpgId, consumerEpgId) { + return contractId + '_' + providerEpgId + '_' + consumerEpgId; + } + + /** + * + * @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'] + ) + ) + }); } + + return retVal; } + /** + * + * @param obj + * @returns {*} + */ function getObjectsCount(obj) { if(obj) return Object.keys(obj).length; @@ -186,61 +247,120 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s return 0; } - function enableButtons() { - $scope.policyDisabled = false; + /** + * + * @param node + */ + function highlightNode(node) { + NextTopologyService.highlightNode($rootScope.nxTopology, node); } - function toggleExpanded(element) { - if(typeof element !== 'string') { - if(element.expanded) - element.expanded = false; - else - element.expanded = true; - } + /** + * + * @param link + */ + function highlightLink(link) { + NextTopologyService.highlightLink($rootScope.nxTopology, link); } - function expandAll(arr) { - arr.forEach(function(element) { - element.expanded = true; - }); + /** + * + */ + function init() { + $scope.rootTenants.clearData(); + $scope.rootTenants.get('config'); } - function collapseAll(arr) { - arr.forEach(function(element) { - element.expanded = false; - }); - } + /** + * Sets '$scope.sidePanelPage' to true. This variable is watched in index.tpl.html template + * and opens/closes side panel + */ + function openSidePanel(page, object, cbk) { + if(object.constructor.name == 'Epg') { + $scope.endpoints.clearData(); + $scope.endpoints.getByEpg(object.data.id); + } + var samePage = page === $scope.sidePanelPage; - var resolvedPolicies = ResolvedPolicyService.createObject(); - resolvedPolicies.get(function () { - fillTopologyData(); - }); + $scope.selectedNode = object; - function fillTopologyData() { - var topoData = {nodes: [], links: [],}; + $scope.sidePanelCbk = cbk; + $scope.sidePanelPage = page; + $scope.sidePanelObject = object; - resolvedPolicies.data.forEach(function(rp) { - topoData.nodes.push(createNode(rp['consumer-epg-id'], rp['consumer-tenant-id'])); - topoData.nodes.push(createNode(rp['provider-epg-id'], rp['provider-tenant-id'])); + if ( samePage && $scope.sidePanelCbk) { + $scope.sidePanelCbk(); + } + } - fillResolvedPolicy(rp); - topoData.links = getContracts(rp); - }); + /** + * + * @param idElement + */ + function openSidePanelContract(idElement) { + var obj = $filter('filter')(Object.keys($scope.resolvedPolicy).map(function(k) { + var obj = $scope.resolvedPolicy[k]; + obj.linkId = k; - $scope.topologyData = topoData; - $scope.topologyLoaded = true; + return obj; + }), {'contract-id': idElement}); + + $scope.sidePanelPage = 'resolved-policy/contract-sidepanel'; + $scope.sidePanelObject = obj[0]; + $scope.selectedNode = obj[0]; + + NextTopologyService.highlightLink($rootScope.nxTopology, obj[0].linkId); } - 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']); + /** + * . + * @param index + * @param type + */ + function openSidePanelChild(index, type) { + switch(type) { + case 'subject': + $scope.sidePanelPage = 'resolved-policy/subject-sidepanel'; + $scope.subjectIndex = index; + break; + case 'clause': + $scope.sidePanelPage = 'resolved-policy/clause-sidepanel'; + $scope.clauseIndex = index; + break; + case 'rule': + $scope.sidePanelPage = 'resolved-policy/rule-sidepanel'; + $scope.ruleIndex = index; + break; } + } + /** + * + * @param tpl + */ + function openSidePanelTpl(tpl) { + switch(tpl) { + case 'contract': + $scope.sidePanelPage = 'resolved-policy/contract-sidepanel'; + break; + case 'subject': + $scope.sidePanelPage = 'resolved-policy/subject-sidepanel'; + break; + case 'clause': + $scope.sidePanelPage = 'resolved-policy/clause-sidepanel'; + break; + case 'rule': + $scope.sidePanelPage = 'resolved-policy/rule-sidepanel'; + break; + } } + /** + * + * @param data + * @param providerEpgId + * @param consumerEpgId + */ function processPolicyRuleGroupWithEpConstraints(data, providerEpgId, consumerEpgId) { data.forEach(function(element) { element['policy-rule-group'].forEach(function(el) { @@ -262,58 +382,41 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s }) } - function generateLinkId(contractId, providerEpgId, consumerEpgId) { - return contractId + '_' + providerEpgId + '_' + consumerEpgId; - } - - function createNode(nodeName, tenantId) { - return { - 'id': nodeName, - 'tenantId' : tenantId, - 'node-id': nodeName, - 'label': nodeName, - }; - } - - function createLink( source, target, contract, tenant) { - return { - 'id': generateLinkId(contract, source, target), - 'source': source, - 'target': target, - 'tenant': tenant, - }; - } - - function getContracts(data) { - var retVal = []; + /** + * + */ + function setRootTenant() { + $scope.broadcastFromRoot('ROOT_TENANT_CHANGED'); - 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'] - ) - ) - }); + if($scope.stateUrl.startsWith('/resolved-policy')) { + fillTopologyData(); } - - return retVal; } - function highlightNode(node) { - NextTopologyService.highlightNode($rootScope.nxTopology, node); - } + /** + * fills $scope.stateUrl with loaded url + * It's called on $viewContentLoaded event + */ + function setStateUrl() { + $scope.stateUrl = $state.current.url; + closeSidePanel(); - function highlightLink(link) { - NextTopologyService.highlightLink($rootScope.nxTopology, link); + if($scope.stateUrl.startsWith('/resolved-policy')) { + fillTopologyData(); + } } - function fadeAll() { - NextTopologyService.fadeInAllLayers($rootScope.nxTopology); + /** + * + * @param element + */ + function toggleExpanded(element) { + if(typeof element !== 'string') { + if(element.expanded) + element.expanded = false; + else + element.expanded = true; + } } /* event listeners */ @@ -321,9 +424,5 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s * Event fired after content loaded, setStateUrl function is called to fill stateUrl method */ $scope.$on('$viewContentLoaded', setStateUrl); - - // $scope.$watch('nxTopology', function() { - // $rootScope.nxTopology = $scope.nxTopology; - // }); } }); 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 748ebc11f..e7dbd567e 100644 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.css +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.css @@ -101,6 +101,10 @@ md-dialog button span { color: #000; } +div.layout-padding h3 { + color: black; +} + md-sidenav span { color: inherit !important; } @@ -223,10 +227,15 @@ div.md-primary.md-subheader > div > span > span { color: rgb(33,150,243); } +div.md-secondary.md-subheader.ng-scope > div > span > span { + color: rgb(33,150,243) !important; +} + li > md-autocomplete-parent-scope > span { color: rgba(0,0,0,.54); } -md-content > div.md-secondary.md-subheader > div > span > span { - color: rgb(33,150,243) !important; +#tenantSelector div, #tenantSelector .md-select-placeholder span { + color: white; + font-weight: normal; } diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/topology/next_topology.directive.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/topology/next_topology.directive.js index d758ebf19..a3feac5f9 100644 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/topology/next_topology.directive.js +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/topology/next_topology.directive.js @@ -111,9 +111,9 @@ define(['next-ui'], function() { scope.$watch('topologyData', function(){ //console.log('scope.topologyData', scope.topologyData); - if( scope.topologyData.nodes.length ) { //&& initialized === false + //if( scope.topologyData.nodes.length ) { //&& initialized === false scope.init(scope.cbkFunctions.topologyGenerated); - } + //} }); /** diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/views/index.tpl.html b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/views/index.tpl.html index 5fe2381dc..487594b35 100644 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/views/index.tpl.html +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/views/index.tpl.html @@ -15,6 +15,14 @@ Endpoint-groups Contracts + + + {{ tenant.data.id }} + + 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 d29d3c3e4..33262bfa3 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 @@ -16,10 +16,17 @@ define([ selectedItem: null, searchText: null, }; - $scope.epgsListOfChoosenTenant = null; + $scope.epgsListOfChoosenTenant = []; $scope.forwarding = ForwardingService.createObject(); $scope.forwardingContexts = []; $scope.forwardingNetworkDomainIds = []; + $scope.regexps = { + 'ipv4cidr': '(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(\/([0-9]|[1-2][0-9]|3[0-2]))', + 'ipv6cidr': 's*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:)))(%.+)?s*(\/([1-9]|[1-9][0-9]|1[0-1][0-9]|12[0-8]))', + 'mac-address': '([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})', + }; + + $scope.regexps['ip-prefix'] = '(('+$scope.regexps.ipv4cidr + ')|(' + $scope.regexps.ipv6cidr + '))'; /* methods */ $scope.closeDialog = closeDialog; @@ -27,26 +34,10 @@ define([ $scope.filterContextIds = filterContextIds; $scope.filterNetworkDomainIds = filterNetworkDomainIds; $scope.searchEpgs = searchEpgs; - - - $scope.forwarding.get(function () { - var tenantForwarding = $filter('filter')($scope.forwarding.data, { 'tenant-id': $scope.parentTenant }); - - if (tenantForwarding && tenantForwarding.length) { - $scope.forwarding.data = tenantForwarding[0]; - $scope.filterNetworkDomainIds('l2-l3-forwarding:subnet'); - } - - if ($scope.endpoint && $scope.endpoint.data['context-type']) { - $scope.filterContextIds($scope.endpoint.data['context-type']); - } - }); - - - - populateEpgsListOfChoosenTenant(); + $scope.populateScopeAfterTenantSelected = populateScopeAfterTenantSelected; /* Implementations */ + $scope.forwarding.get(postForwardingGet); function closeDialog(){ $mdDialog.cancel(); @@ -72,14 +63,14 @@ define([ function filterNetworkDomainIds(networkDomainType) { $scope.forwardingNetworkDomainIds = $filter('filter')($scope.forwarding.data['network-domain'], {'network-domain-type': networkDomainType}); - $scope.forwardingNetworkDomainIds.unshift(''); } function populateEpgsListOfChoosenTenant() { - var tenantsIdsList = $scope.rootTenants.data.map(function (e) { return e.data.id; }), - indexOfChoosenTenant = tenantsIdsList.indexOf($scope.parentTenant), - epgsObjectsOfChoosenTenant = $scope.rootTenants.data[indexOfChoosenTenant].data.policy['endpoint-group']; - $scope.epgsListOfChoosenTenant = epgsObjectsOfChoosenTenant.map(function (a) { return a.id; }); + $scope.rootTenants.data.some(function (tenant) { + if (tenant.data.id === $scope.endpoint.data.tenant) { + $scope.epgsListOfChoosenTenant = tenant.data.policy['endpoint-group'].map(function (ele) { return ele.id; } ); + } + }); } function searchEpgs(query) { @@ -94,6 +85,22 @@ define([ }; } + function postForwardingGet() { + var tenantForwarding = $filter('filter')($scope.forwarding.data, { 'tenant-id': $scope.endpoint.data.tenant }); + + if (tenantForwarding && tenantForwarding.length) { + $scope.forwarding.data = tenantForwarding[0]; + $scope.filterNetworkDomainIds('l2-l3-forwarding:subnet'); + } + + if ($scope.endpoint && $scope.endpoint.data['context-type']) { + $scope.filterContextIds($scope.endpoint.data['context-type']); + } + } + + function populateScopeAfterTenantSelected() { + populateEpgsListOfChoosenTenant(); + } } }); 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 e1e6a280b..84b167ec8 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 @@ -14,8 +14,8 @@
- - {{ tenant.data.id }} + + {{ tenant.data.id }}
@@ -64,9 +64,11 @@ - +
Required field
+
Expected correct address type format
 @@ -76,6 +78,7 @@ + @@ -108,10 +111,11 @@ md-search-text="epgsChips.searchText" md-items="epg in searchEpgs(epgsChips.searchText)" md-item-text="epg" - placeholder="Add an item" + placeholder="{{!endpoint.data.tenant ? 'Select Tenant first' : 'Add an item'}}" md-autocomplete-wrap-override md-input-name="epAutocomplete" - flex> + flex + ng-disabled="!endpoint.data.tenant"> {{epg}} 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 index 49f9a7b9e..fc0bfac49 100644 --- 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 @@ -17,6 +17,7 @@ define([], function () { this.setData = setData; this.get = get; this.getByEpg = getByEpg; + this.getByTenantId = getByTenantId; this.clearData = clearData; /* Implementation */ @@ -64,6 +65,18 @@ define([], function () { self.setData(endpoints); }); } + + function getByTenantId(rootTenant) { + var self = this; + var restObj = Restangular.one('restconf').one('operational').one('base-endpoint:endpoints'); + return restObj.get().then(function (data) { + var endpoints = $filter('filter')(data.endpoints['address-endpoints']['address-endpoint'].map(function(endpoint) { + return endpoint; + }), { 'tenant': rootTenant }); + self.setData(endpoints); + }); + } + } function createList() { 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 index 902c3051e..20634ad2b 100644 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/endpoints.controller.js +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/endpoints.controller.js @@ -24,11 +24,11 @@ define([ $scope.getEndpointsList = getEndpointsList; $scope.deleteEndpointDialog = deleteEndpointDialog; - getEndpointsList(); + $scope.getEndpointsList(); function getEndpointsList() { $scope.endpoints.clearData(); - $scope.endpoints.get(); + $scope.rootTenant ? $scope.endpoints.getByTenantId($scope.rootTenant) : $scope.endpoints.get($scope.rootTenant); } function openEndpointDialog(operation, endpointData) { @@ -61,5 +61,9 @@ define([ }); } + + $scope.$on('ROOT_TENANT_CHANGED', function () { + $scope.getEndpointsList(); + }); } }); 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 8bd950bff..c1876566c 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 @@ -7,20 +7,21 @@ Endpoint group{{epg}}, -
+
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'] }} 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 4326625a9..32aaf877e 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 @@ -7,25 +7,20 @@ define(['app/gbp/resolved-policy/resolved-policy.service'], function () { /* @ngInject */ function ResolvedPolicyController($rootScope, $scope, ResolvedPolicyService, EpgService, EpgListService, ContractService, NextTopologyService) { + $scope.reloadTopology = reloadTopology; + $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); }); + $scope.$apply(); $scope.parentTenant = node['_model']['_data']['tenantId']; NextTopologyService.highlightNode($rootScope.nxTopology, node['_data-id']); - // //Example of highlighting - // NextTopologyService.highlightNode($scope.nxTopology, 1); - // NextTopologyService.highlightNode($scope.nxTopology, 1, true); //without links around - // NextTopologyService.highlightLink($scope.nxTopology, '1-7'); - // NextTopologyService.highlightPath($scope.nxTopology, [array of links obj]); - - // //Fade out or in whole topology - // NextTopologyService.fadeOutAllLayers(); - // NextTopologyService.fadeInAllLayers(); }, clickLink: function(link){ var resolvedContract = $scope.resolvedPolicy[link['_model']['_data'].id]; @@ -39,6 +34,11 @@ define(['app/gbp/resolved-policy/resolved-policy.service'], function () { } }; + + function reloadTopology() { + $scope.fillTopologyData(); + } + $scope.$watch('nxTopology', function() { $rootScope.nxTopology = $scope.nxTopology; }); diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/resolved-policy.tpl.html b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/resolved-policy.tpl.html index 80850da0c..57ae5834f 100644 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/resolved-policy.tpl.html +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/resolved-policy.tpl.html @@ -1,5 +1,5 @@ -
- sync Reload topology +
+ sync Reload topology -
\ No newline at end of file +
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 0abd8d9bb..d598867b0 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 @@ -22,7 +22,7 @@
Actions ({{selectedNode.subjects[subjectIndex]['resolved-rule'][0][ruleIndex].action.length}}) - +
@@ -39,26 +39,25 @@
- - - -

{{action.order}}

- - {{action.name}} - -
-
- Action definition ID - {{action['action-definition-id']}} -
-
- Name - {{action.name}} -
-
- - - + +
+

{{action.order}}

+ + Order + +
+
+

{{action.name}}

+

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

+

Name: {{action.name}}

+
+
+ + visibility + +
+ @@ -113,4 +112,4 @@ - \ No newline at end of file + -- 2.36.6