From 82953648cc1e495b8d21cc37eb1f9b9320087092 Mon Sep 17 00:00:00 2001 From: Daniel Malachovsky Date: Tue, 21 Jun 2016 15:03:27 +0200 Subject: [PATCH] SFC topology - shows detail of SFC in NeXt topo Change-Id: I971b8cde7e19930ba9a2f407213030d5bdf26e18 Signed-off-by: Daniel Malachovsky --- .../resources/gbp/common/gbp.controller.js | 39 ++++-- .../main/resources/gbp/common/gbp.module.js | 1 + .../contract-sidepanel.tpl.html | 6 +- .../resolved-policy.controller.js | 18 ++- .../resolved-policy/rule-sidepanel.tpl.html | 19 +-- .../gbp/sfc/dialog-sfc-topology.controller.js | 119 ++++++++++++++++++ .../gbp/sfc/dialog-sfc-topology.tpl.html | 16 +++ .../src/main/resources/gbp/sfc/sfc.service.js | 73 +++++++++++ 8 files changed, 263 insertions(+), 28 deletions(-) create mode 100644 groupbasedpolicy-ui/module/src/main/resources/gbp/sfc/dialog-sfc-topology.controller.js create mode 100644 groupbasedpolicy-ui/module/src/main/resources/gbp/sfc/dialog-sfc-topology.tpl.html create mode 100644 groupbasedpolicy-ui/module/src/main/resources/gbp/sfc/sfc.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 17a2725de..cb04cc439 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 @@ -3,9 +3,11 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s angular.module('app.gbp').controller('RootGbpCtrl', RootGbpCtrl); - RootGbpCtrl.$inject = ['$state', '$rootScope', '$scope', '$filter', '$mdDialog', 'RootGbpService', 'TenantListService', 'TenantService', 'EpgListService', 'ResolvedPolicyService', 'NextTopologyService', 'EndpointsListService']; + RootGbpCtrl.$inject = ['$state', '$rootScope', '$scope', '$filter', '$mdDialog', 'RootGbpService', + 'TenantListService', 'EpgListService', 'ResolvedPolicyService', 'NextTopologyService', 'EndpointsListService']; - function RootGbpCtrl($state, $rootScope, $scope, $filter, $mdDialog, RootGbpService, TenantListService, TenantService, EpgListService, ResolvedPolicyService, NextTopologyService, EndpointsListService) { + function RootGbpCtrl($state, $rootScope, $scope, $filter, $mdDialog, RootGbpService, + TenantListService, EpgListService, ResolvedPolicyService, NextTopologyService, EndpointsListService) { /* properties */ $scope.apiType = 'operational'; $scope.activeObject = null; @@ -28,6 +30,7 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s $scope.fillTopologyData = fillTopologyData; $scope.broadcastFromRoot = broadcastFromRoot; $scope.closeSidePanel = closeSidePanel; + $scope.openSfcDialog = openSfcDialog; $scope.openSidePanel = openSidePanel; $scope.setRootTenant = setRootTenant; $scope.toggleExpanded = toggleExpanded; @@ -66,7 +69,7 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s function closeSidePanel() { if($scope.sidePanelPage) { $scope.sidePanelPage = false; - NextTopologyService.fadeInAllLayers($rootScope.nxTopology); + $scope.fadeAll(); } } @@ -116,7 +119,7 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s * */ function deselectContract() { - NextTopologyService.fadeInAllLayers($rootScope.nxTopology); + $scope.fadeAll(); $scope.sidePanelPage = 'resolved-policy/contract-sidepanel'; var obj = Object.keys($scope.resolvedPolicy).map(function(k) { @@ -135,7 +138,7 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s * */ function deselectEpg() { - NextTopologyService.fadeInAllLayers($rootScope.nxTopology); + $scope.fadeAll(); var elements; $scope.sidePanelPage = 'resolved-policy/epg-sidepanel'; @@ -160,7 +163,7 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s * */ function fadeAll() { - NextTopologyService.fadeInAllLayers($rootScope.nxTopology); + $rootScope.nxTopology && NextTopologyService.fadeInAllLayers($rootScope.nxTopology); } /** @@ -183,7 +186,10 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s function fillTopologyData() { if($scope.rootTenant) { var topoData = {nodes: [], links: [],}, - filteredResolvedPolicies = $filter('filter')(resolvedPolicies.data, {'consumer-tenant-id': $scope.rootTenant, 'provider-tenant-id': $scope.rootTenant}); + filteredResolvedPolicies = $filter('filter')(resolvedPolicies.data, { + 'consumer-tenant-id': $scope.rootTenant, + 'provider-tenant-id': $scope.rootTenant + }); filteredResolvedPolicies && filteredResolvedPolicies.forEach(function(rp) { @@ -273,6 +279,25 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s $scope.rootTenants.get('config'); } + /** + * + * @param 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, + }, + }); + } + + /** * Sets '$scope.sidePanelPage' to true. This variable is watched in index.tpl.html template * and opens/closes side panel 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 43efa0217..b341b9b67 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 @@ -36,6 +36,7 @@ define([ NavHelperProvider.addControllerUrl('app/gbp/epg/epg.controller'); NavHelperProvider.addControllerUrl('app/gbp/policy/policy.controller'); NavHelperProvider.addControllerUrl('app/gbp/resolved-policy/resolved-policy.controller'); + NavHelperProvider.addControllerUrl('app/gbp/sfc/dialog-sfc-topology.controller'); NavHelperProvider.addControllerUrl('app/gbp/tenant/add-tenant.controller'); NavHelperProvider.addControllerUrl('app/gbp/tenant/tenant.controller'); diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/contract-sidepanel.tpl.html b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/contract-sidepanel.tpl.html index 8ecd9466e..bff602dcd 100644 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/contract-sidepanel.tpl.html +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/contract-sidepanel.tpl.html @@ -10,7 +10,9 @@ Contracts list ({{sidePanelObject.length}}) - + {{contract['contract-id']}} @@ -41,4 +43,4 @@ - \ No newline at end of file + 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 32aaf877e..9815e0c6a 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 @@ -3,10 +3,11 @@ define(['app/gbp/resolved-policy/resolved-policy.service'], function () { angular.module('app.gbp').controller('ResolvedPolicyController', ResolvedPolicyController); - ResolvedPolicyController.$inject = ['$rootScope', '$scope', 'ResolvedPolicyService', 'EpgService', 'EpgListService', 'ContractService', 'NextTopologyService']; + ResolvedPolicyController.$inject = ['$rootScope', '$scope', '$mdDialog', 'EpgService', 'NextTopologyService']; /* @ngInject */ - function ResolvedPolicyController($rootScope, $scope, ResolvedPolicyService, EpgService, EpgListService, ContractService, NextTopologyService) { + function ResolvedPolicyController($rootScope, $scope, $mdDialog, EpgService, NextTopologyService) { + $scope.reloadTopology = reloadTopology; $scope.cbkFunctions = { @@ -34,6 +35,19 @@ define(['app/gbp/resolved-policy/resolved-policy.service'], 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 reloadTopology() { $scope.fillTopologyData(); 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 feb058048..93ff7186e 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 @@ -21,27 +21,12 @@
Actions ({{selectedNode.subjects[subjectIndex]['resolved-rule'][0][ruleIndex].action.length}}) - - - -
- - Expand all - - - - -
- - Collapse all - -
-

{{action.order}}

@@ -55,7 +40,7 @@

Name: {{action.name}}

- + 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 new file mode 100644 index 000000000..203f4c53a --- /dev/null +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/sfc/dialog-sfc-topology.controller.js @@ -0,0 +1,119 @@ +define([ + 'app/gbp/sfc/sfc.service' +], function () { + 'use strict'; + + angular.module('app.gbp').controller('SfcTopologyController', SfcTopologyController); + + SfcTopologyController.$inject = ['$filter', '$mdDialog', '$scope', 'chainName', 'SfcService']; + /* @ngInject */ + function SfcTopologyController($filter, $mdDialog, $scope, chainName, SfcService) { + /* properties */ + $scope.chain = SfcService.createObject({name: 'SFCGBP'}); + $scope.topologyDataSfc = {nodes:[], links:[]}; + $scope.cbkFunctionsSfc = { + clickNode: function(node){ + + }, + clickLink: function(link){ + + }, + topologyGenerated: function(){ + } + }; + + /* methods */ + $scope.closeDialog = closeDialog; + + /* Implementations */ + + $scope.chain.get(function() { + $scope.chain.data && $scope.chain.data['sfc-service-function'] && + $scope.chain.data['sfc-service-function'].length && $scope.viewTopology(); + + $scope.topologyLoaded = true; + }); + + function closeDialog(){ + $mdDialog.cancel(); + } + + function fillTopologyDataSfc() { + var topoData = {nodes:[], links:[]}; + $scope.chain.data['sfc-service-function'].forEach(function(sf) { + topoData.nodes.push({id: sf.name, 'node-id': sf.name, label: sf.name, type: sf.name}); + }) + + $scope.topologyDataSfc = topoData; + } + + $scope.viewTopology = function() { + $scope.topologySfc = new nx.graphic.Topology({ + height: 400, + width: 600, + scalable: true, + theme:'blue', + enableGradualScaling:true, + nodeConfig: { + color: '#0386d2', + label: 'model.label', + //scale: 'model.scale', + iconType: function(vertex) { + var type = vertex.get().type; + switch (type) { + case 'service-function-type:firewall': + return 'firewall'; + case 'service-function-type:dpi': + return 'accesspoint'; + default: + return 'unknown'; + } + } + }, + linkConfig: { + label: 'model.label', + linkType: 'parallel', + color: '#0386d2', + width: 5 + }, + showIcon: true, + //dataProcessor: 'force', + //autoLayout: true, + enableSmartNode: false, + tooltipManagerConfig: { + showNodeTooltip: false, + showLinkTooltip: false + } + }); + $scope.app = new nx.ui.Application; + + var nodes = []; + var links = []; + + $scope.chain.data['sfc-service-function'].forEach(function(sf, index) { + nodes.push({ + id: sf.name, + label: sf.name, + type: sf.type, + x: 100*(index+1), + y: 400 + }); + + index>0 && links.push({ + source: index-1, + target: index + }); + }) + + $scope.topologySfc.data({ + nodes: nodes, + links: links + }); + + $scope.app.container(document.getElementById('next-vpp-topo')); + $scope.topologySfc.attach($scope.app); + }; + + + } +}); diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/sfc/dialog-sfc-topology.tpl.html b/groupbasedpolicy-ui/module/src/main/resources/gbp/sfc/dialog-sfc-topology.tpl.html new file mode 100644 index 000000000..e2b6458cb --- /dev/null +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/sfc/dialog-sfc-topology.tpl.html @@ -0,0 +1,16 @@ + + +
+

+ Detail for chain {{chain.data.name}} +

+ + +
X
+ +
+ + +
+ + 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 new file mode 100644 index 000000000..ff70793a0 --- /dev/null +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/sfc/sfc.service.js @@ -0,0 +1,73 @@ +define([], function () { + 'use strict'; + + angular.module('app.gbp').service('SfcService', SfcService); + + SfcService.$inject = ['Restangular']; + + function SfcService(Restangular) { + /* methods */ + this.createObject = createObject; + + /** + * Sfc constructor + * @constructor + */ + function Sfc() { + /* properties */ + this.data = {}; + + /* methods */ + this.setData = setData; + this.get = get; + + /* Implementation */ + /** + * fills Sfc object with data + * @param data + */ + + function setData(data) { + this.data = data; + } + /** + * gets one Sfc object from Restconf + * @param id + * @returns {*} + */ + + function get(successCbk) { + + var self = this, + restObj = Restangular + .one('restconf') + .one('config') + .one('service-function-chain:service-function-chains') + .one('service-function-chain') + .one(self.data.name); + + return restObj.get().then(function(data) { + self.data = data['service-function-chain'][0]; + (successCbk || angular.noop)(); + }); + } + } + + /** + * creates Endpoint object and fills it with data if available + * @param data + * @returns {Endpoint} + */ + function createObject(data) { + var obj = new Sfc(); + + if (data) { + obj.setData(data); + } + + return obj; + } + } + + return SfcService; +}); -- 2.36.6