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;
$scope.fillTopologyData = fillTopologyData;
$scope.broadcastFromRoot = broadcastFromRoot;
$scope.closeSidePanel = closeSidePanel;
+ $scope.openSfcDialog = openSfcDialog;
$scope.openSidePanel = openSidePanel;
$scope.setRootTenant = setRootTenant;
$scope.toggleExpanded = toggleExpanded;
function closeSidePanel() {
if($scope.sidePanelPage) {
$scope.sidePanelPage = false;
- NextTopologyService.fadeInAllLayers($rootScope.nxTopology);
+ $scope.fadeAll();
}
}
*
*/
function deselectContract() {
- NextTopologyService.fadeInAllLayers($rootScope.nxTopology);
+ $scope.fadeAll();
$scope.sidePanelPage = 'resolved-policy/contract-sidepanel';
var obj = Object.keys($scope.resolvedPolicy).map(function(k) {
*
*/
function deselectEpg() {
- NextTopologyService.fadeInAllLayers($rootScope.nxTopology);
+ $scope.fadeAll();
var elements;
$scope.sidePanelPage = 'resolved-policy/epg-sidepanel';
*
*/
function fadeAll() {
- NextTopologyService.fadeInAllLayers($rootScope.nxTopology);
+ $rootScope.nxTopology && NextTopologyService.fadeInAllLayers($rootScope.nxTopology);
}
/**
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) {
$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
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');
<md-subheader class="md-primary">Contracts list ({{sidePanelObject.length}})</md-subheader>
<md-list>
<ng-repeat ng-repeat="contract in sidePanelObject">
- <md-list-item ng-click="openSidePanel('resolved-policy/contract-sidepanel', contract, null)" ng-mouseenter="highlightLink(contract.linkId)" ng-mouseleave="fadeAll()">
+ <md-list-item ng-click="openSidePanel('resolved-policy/contract-sidepanel', contract, null)"
+ ng-mouseenter="highlightLink(contract.linkId)"
+ ng-mouseleave="fadeAll()">
{{contract['contract-id']}}
</md-list-item>
</ng-repeat>
</ng-repeat>
</md-list>
</div>
-</md-content>
\ No newline at end of file
+</md-content>
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 = {
}
};
+ 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();
<md-subheader class="md-primary">
<div layout="row" class="layout-row">
<span>Actions ({{selectedNode.subjects[subjectIndex]['resolved-rule'][0][ruleIndex].action.length}})</span>
- <span class="flex" flex></span>
<span ng-if="selectedNode.subjects[subjectIndex]['resolved-rule'][0][ruleIndex].action.length">
- <md-button class="md-button md-primary md-button md-ink-ripple expand-button" type="button" ng-click="expandAll(selectedNode.subjects[subjectIndex]['resolved-rule'][0][ruleIndex].action)" aria-label="Expand all">
- <i class="fa fa-expand ng-scope"></i>
- <div class="md-ripple-container"></div>
- <md-tooltip md-direction="bottom">
- Expand all
- </md-tooltip>
- </md-button>
- <md-button class="md-button md-primary md-button md-ink-ripple expand-button" type="button" ng-click="collapseAll(selectedNode.subjects[subjectIndex]['resolved-rule'][0][ruleIndex].action)" aria-label="Collapse all">
- <i class="fa fa-compress ng-scope"></i>
- <div class="md-ripple-container"></div>
- <md-tooltip md-direction="bottom">
- Collapse all
- </md-tooltip>
- </md-button>
</span>
</div>
</md-subheader>
<md-list class="expander">
- <md-list-item ng-click="toggleExpanded(action)" class="md-3-line" layout="row"
+ <md-list-item class="md-3-line" layout="row"
ng-repeat="action in selectedNode.subjects[subjectIndex]['resolved-rule'][0][ruleIndex].action">
<div layout-padding flex="10">
<h3>{{action.order}}</h3>
<p>Name: {{action.name}} </p>
</div>
<div ng-if="action['action-definition-id'] === 'Action-Chain'" flex="10">
- <md-button class="md-icon-button" ng-click="openSfcDialog({{action.name}})">
+ <md-button class="md-icon-button" ng-click="openSfcDialog(action.name)">
<md-icon>visibility</md-icon>
</md-button>
</div>
--- /dev/null
+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);
+ };
+
+
+ }
+});
--- /dev/null
+<md-dialog ng-cloak aria-label="vpp topo">
+ <md-toolbar>
+ <div class="md-toolbar-tools">
+ <h2 style="color: white">
+ Detail for chain {{chain.data.name}}
+ </h2>
+ <span flex></span>
+ <md-button class="md-icon-button" ng-click="closeDialog()" aria-label="close button">
+ <div>X</div>
+ </md-button>
+ </div>
+ </md-toolbar>
+ <md-dialog-content style="max-width:600px;max-height:400px;overflow:hidden">
+ <div id="next-vpp-topo"></div>
+ </md-dialog-content>
+</md-dialog>
--- /dev/null
+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;
+});
Code Review / groupbasedpolicy.git / commitdiff