diff options
Diffstat (limited to 'vbd/gui/module')
10 files changed, 464 insertions, 356 deletions
diff --git a/vbd/gui/module/src/main/resources/vpp/assets/css/vpp.css b/vbd/gui/module/src/main/resources/vpp/assets/css/vpp.css index cd5b73d48..2566d90cb 100644 --- a/vbd/gui/module/src/main/resources/vpp/assets/css/vpp.css +++ b/vbd/gui/module/src/main/resources/vpp/assets/css/vpp.css @@ -186,7 +186,9 @@ md-input-container .md-placeholder { } md-input-container.md-default-theme:not(.md-input-invalid).md-input-focused, -md-input-container:not(.md-input-invalid).md-input-focused label, +md-input-container:not(.md-input-invalid).md-input-focused label { + color: orange; +} md-input-container.md-default-theme:not(.md-input-invalid).md-input-has-value, md-input-container:not(.md-input-invalid).md-input-has-value label { color: white; @@ -218,4 +220,15 @@ md-select-menu md-option[selected] { /*tab overrides*/ md-tab.md-active { color: orange; + +md-input-container label { + color: white !important; +} + +md-input-container.md-input-focused label { + color: orange !important; +} + +md-option div.md-text { + color: orange !important; }
\ No newline at end of file diff --git a/vbd/gui/module/src/main/resources/vpp/controllers/bdm.controller.js b/vbd/gui/module/src/main/resources/vpp/controllers/bdm.controller.js index d8fe8ea0f..e5ad012fa 100644 --- a/vbd/gui/module/src/main/resources/vpp/controllers/bdm.controller.js +++ b/vbd/gui/module/src/main/resources/vpp/controllers/bdm.controller.js @@ -11,62 +11,125 @@ define(['app/vpp/vpp.module'], function(vpp) { }]); - vpp.register.controller('TableController', ['$scope', '$rootScope','$filter', 'dataService', 'toastService', function ($scope, $rootScope, filter, dataService, toastService) { - var vm = this; - vm.rowCollection = dataService.tableContent; - vm.displayedCollection = [].concat(vm.rowCollection); - vm.updateAssignment = function(receivedInterface) { - var interf = _.find(dataService.interfaces, {name: receivedInterface.name, 'phys-address': receivedInterface['phys-address']}); - angular.copy(receivedInterface, interf); - if (interf.assigned){ - interf['v3po:l2']['bridge-domain'] = dataService.selectedBd.name; - } else { - interf['v3po:l2']['bridge-domain'] = ''; - } - dataService.injectBridgeDomainsTopoElements(); - dataService.buildTableContent(); - var previouslyChangedInterface = _.find(dataService.changedInterfaces, {name: interf.name, 'phys-address': interf['phys-address']}); - if (!previouslyChangedInterface) { - dataService.changedInterfaces.push(interf); - } - console.log(dataService.changedInterfaces); - }; - }]); + vpp.register.controller('TableController', ['$scope', '$rootScope','$filter', 'dataService', 'toastService', 'bdmInterfaceService', + function ($scope, $rootScope, filter, dataService, toastService, bdmInterfaceService) { + var vm = this; + vm.rowCollection = dataService.tableContent; + vm.displayedCollection = [].concat(vm.rowCollection); - vpp.register.controller('BridgeDomainsController', ['$scope', '$rootScope','$filter', 'dataService', 'bdmBridgeDomainService', 'toastService', - function($scope, $rootScope, $filter, dataService, bdmBridgeDomainService, toastService) { - $scope.addBd = function() { - var obj = bdmBridgeDomainService.createObj('vBD' + ((Math.random() * 100) + 1) ); + vm.updateAssignment = function(receivedInterface) { + console.log(receivedInterface); + var interf = _.find(dataService.interfaces, {name: receivedInterface.name, 'vppName': receivedInterface.vppName}); + if (receivedInterface.assigned){ + interf.assigned = true; + interf.vbd = dataService.selectedBd.name; + receivedInterface.vbd = dataService.selectedBd.name; + + vm.assignInterface(interf); + } else { + var vbdName = receivedInterface.vbd, + vppName = receivedInterface.vppName; + + interf.assigned = false; + interf.vbd = ''; + receivedInterface.vbd = ''; + + vm.unassignInterface(interf, vbdName, vppName); + } + //dataService.buildTableContent(); + var previouslyChangedInterface = _.find(dataService.changedInterfaces, {name: interf.name, 'vppName': interf.vppName}); + if (!previouslyChangedInterface) { + dataService.changedInterfaces.push(interf); + } + console.log(dataService.changedInterfaces); + dataService.injectBridgeDomainsTopoElements(); - bdmBridgeDomainService.add(obj, - function(data) { - console.log('successadding vbd'); - }, - function() { - console.warn('add bd failed'); - }); }; - $scope.dataService = dataService; + vm.assignInterface = function(interface) { + var interfaceObject = bdmInterfaceService.createObj(interface.name, interface.name); - dataService.nextApp.container(document.getElementById('bridge-domains-next-app')); - dataService.bridgeDomainsTopo.attach(dataService.nextApp); + var successCallback = function() { + toastService.showToast('Interface assigned'); + }; - window.addEventListener('resize', function () { - if ($location.path() === '/bridgedomains') { - dataService.topo.adaptToContainer(); - } - }); + var errorCallback = function() { + toastService.showToast('Unable to assign interface'); + }; + + bdmInterfaceService.add(interfaceObject, interface.vbd, interface.vppName, successCallback, errorCallback); + }; + + vm.unassignInterface = function(interface, vbdname, vppName) { + var interfaceObject = bdmInterfaceService.createObj(interface.name, interface.name); + + var successCallback = function() { + toastService.showToast('Interface unassigned'); + }; + + var errorCallback = function() { + toastService.showToast('Unable to unassign interface'); + }; + + bdmInterfaceService.delete(interfaceObject, vbdname, vppName, successCallback, errorCallback); + + }; + }]); + + vpp.register.controller('BridgeDomainsController', ['$scope', '$rootScope','$filter', 'dataService', 'bdmBridgeDomainService', 'toastService', '$mdDialog','bdmInterfaceService', + function($scope, $rootScope, $filter, dataService, bdmBridgeDomainService, toastService, $mdDialog,bdmInterfaceService) { + console.log('Bridge Domains Controller executed.'); + + $scope.dataService = dataService; $scope.bridgedomains = dataService.bridgedomains; $scope.selectedBd = dataService.selectedBd; + dataService.nextApp.container(document.getElementById('bridge-domains-next-app')); + dataService.bridgeDomainsTopo.attach(dataService.nextApp); + + if (!dataService.bridgedomainsLoaded) { + dataService.generateInterfaces(); + bdmBridgeDomainService.get(function(data) { + //success callback + angular.copy(data['network-topology'].topology, dataService.bridgedomains); + dataService.bridgedomainsLoaded = true; + console.log('Loaded BridgeDomains:'); + console.log(dataService.bridgedomains); + dataService.buildAssignedInterfaces(); + }, function(data,status) { + //error callback + console.log(status); + }); + } + dataService.bridgeDomainsTopo.on('clickNode',function(topo,node) { console.log(node); }); + $scope.reload = function() { + dataService.selectedBd.name = ''; + dataService.changedInterfaces.length = 0; + dataService.originalAssignments.length = 0; + dataService.interfaces.length = 0; + dataService.tableContent.length = 0; + dataService.bridgeDomainsTopo.clear(); + dataService.injectedInterfaces.length = 0; + dataService.generateInterfaces(); + bdmBridgeDomainService.get(function(data) { + //success callback + angular.copy(data['network-topology'].topology, dataService.bridgedomains); + dataService.bridgedomainsLoaded = true; + console.log('Loaded BridgeDomains:'); + console.log(dataService.bridgedomains); + dataService.buildAssignedInterfaces(); + }, function(data,status) { + //error callback + console.log(status); + }); + }; + $scope.bdChanged = function() { - dataService.injectBridgeDomainsTopoElements(); dataService.buildTableContent(); }; @@ -88,8 +151,7 @@ define(['app/vpp/vpp.module'], function(vpp) { if (status === 'success') { dataService.bridgedomains.push(vm.bd); dataService.selectedBd.name = vm.bd.name; - dataService.injectBridgeDomainsTopoElements(); - dataService.buildTableContent(); + $scope.reload(); vm.close(); } }; @@ -99,23 +161,102 @@ define(['app/vpp/vpp.module'], function(vpp) { vm.waiting = true; //send a POST with the entered content in the form field + var obj = bdmBridgeDomainService.createObj(vm.bd.name); + + bdmBridgeDomainService.add(obj, + function(data) { + vm.isDone('success'); + }, + function() { + vm.isDone('failed'); + }); + }; }, controllerAs: 'NewBdDialogCtrl', - templateUrl: 'templates/new-bd-dialog.html', + templateUrl: $scope.view_path + 'new-bd-dialog.html', parent: angular.element(document.body), clickOutsideToClose:false }) }; + /* FIXME: remove after testing */ + /*$scope.deploy = function() { + var successfulRequestsRequired = dataService.changedInterfaces.length; + var successfulRequests = 0; - $scope.deploy = function() { + console.log('Removing previous assignments...'); + _.forEach(dataService.changedInterfaces, function(interf) { - }; + //Check if previously assigned.. then DELETE + //.... + var previousAssignment = _.find(dataService.originalAssignments, { + 'vbridge-topology:user-interface': interf.name, + vppName: interf.vppName + }); + + if (previousAssignment) { + successfulRequestsRequired++; + bdmInterfaceService.delete( + { + "tp-id":previousAssignment['tp-id'], + "vbridge-topology:user-interface": previousAssignment['vbridge-topology:user-interface'] + }, + previousAssignment.vbd, + previousAssignment.vppName, + function() { + //success callback + console.log('Removed previous assignment:',previousAssignment); + successfulRequests++; + + if (successfulRequests >= successfulRequestsRequired) { + toastService.showToast('Deployed! Bridge Domain Validated.'); + dataService.changedInterfaces.length = 0; + console.log('Changed interfaces tracker has been reset.'); + $scope.reload(); + } + }, + function() { + //error callback + console.error('ERROR removing assignment:',previousAssignment); + } + ) + } + if (interf.assigned) { + //Send PUT to correct vBD + bdmInterfaceService.add( + { + "tp-id":interf.vppName+'-'+interf.name, + "vbridge-topology:user-interface": interf.name + }, + interf.vbd, + interf.vppName, + function() { + //success callback + console.log('Added assignment:',interf); + successfulRequests++; + + if (successfulRequests >= successfulRequestsRequired) { + toastService.showToast('Deployed! Bridge Domain Validated.'); + dataService.changedInterfaces.length = 0; + console.log('Changed interfaces tracker has been reset.') + $scope.reload(); + } + }, + function() { + //error callback + console.error('ERROR adding assignment:',interf); + } + ) + } else { + successfulRequests++; + } + }); + };*/ $scope.removeBd = function() { - if($scope.selectedBd.name) { + if(dataService.selectedBd.name) { var successCallback = function(success) { if (success) { console.log($scope.bridgedomains); @@ -124,18 +265,20 @@ define(['app/vpp/vpp.module'], function(vpp) { }); toastService.showToast('Bridge Domain Removed!'); $scope.selectedBd.name = ''; - dataService.clearInjectedInterfacesInBridgeDomainTopo(); - dataService.injectBdIntoBridgeDomainsTopo(); + dataService.clearTopology(); dataService.tableContent.length = 0; + $scope.reload(); } else { toastService.showToast('Error removing Bridge Domain!'); - } }; - - //... removeBdFromOdl(vm.selectedBd.name, successCallback); + bdmBridgeDomainService.remove(dataService.selectedBd.name, function(){successCallback(true)}, function(){successCallback(false)}); } }; + window.addEventListener('resize', function () { + dataService.bridgeDomainsTopo.adaptToContainer(); + }); + }]); });
\ No newline at end of file diff --git a/vbd/gui/module/src/main/resources/vpp/controllers/bdm.vpp.controller.js b/vbd/gui/module/src/main/resources/vpp/controllers/bdm.vpp.controller.js index 69dfd2fcb..44a4b0cf2 100644 --- a/vbd/gui/module/src/main/resources/vpp/controllers/bdm.vpp.controller.js +++ b/vbd/gui/module/src/main/resources/vpp/controllers/bdm.vpp.controller.js @@ -11,132 +11,4 @@ define(['app/vpp/vpp.module'], function(vpp) { }]); - vpp.register.controller('TableController', ['$scope', '$rootScope','$filter', 'dataService', 'toastService', function ($scope, $rootScope, filter, dataService, toastService) { - var vm = this; - vm.rowCollection = dataService.tableContent; - vm.displayedCollection = [].concat(vm.rowCollection); - vm.updateAssignment = function(receivedInterface) { - var interf = _.find(dataService.interfaces, {name: receivedInterface.name, 'phys-address': receivedInterface['phys-address']}); - angular.copy(receivedInterface, interf); - if (interf.assigned){ - interf['v3po:l2']['bridge-domain'] = dataService.selectedBd.name; - } else { - interf['v3po:l2']['bridge-domain'] = ''; - } - dataService.injectBridgeDomainsTopoElements(); - dataService.buildTableContent(); - var previouslyChangedInterface = _.find(dataService.changedInterfaces, {name: interf.name, 'phys-address': interf['phys-address']}); - if (!previouslyChangedInterface) { - dataService.changedInterfaces.push(interf); - } - console.log(dataService.changedInterfaces); - }; - }]); - - vpp.register.controller('BridgeDomainsController', ['$scope', '$rootScope','$filter', 'dataService', 'bdmBridgeDomainService', 'toastService', - function($scope, $rootScope, $filter, dataService, bdmBridgeDomainService, toastService) { - $scope.addBd = function() { - var obj = bdmBridgeDomainService.createObj('vBD' + ((Math.random() * 100) + 1) ); - - bdmBridgeDomainService.add(obj, - function(data) { - console.log('successadding vbd'); - }, - function() { - console.warn('add bd failed'); - }); - }; - - /*var vm = this; - vm.dataService = dataService; - - dataService.nextApp.container(document.getElementById('bridge-domains-next-app')); - dataService.bridgeDomainsTopo.attach(dataService.nextApp); - - window.addEventListener('resize', function () { - if ($location.path() === '/bridgedomains') { - dataService.topo.adaptToContainer(); - } - }); - - vm.bridgedomains = dataService.bridgedomains; - vm.selectedBd = dataService.selectedBd; - - dataService.bridgeDomainsTopo.on('clickNode',function(topo,node) { - console.log(node); - }); - - vm.bdChanged = function() { - dataService.injectBridgeDomainsTopoElements(); - dataService.buildTableContent(); - }; - - vm.addBd = function() { - //show dialog - $mdDialog.show({ - controller: function() { - var vm = this; - vm.bd = {}; - vm.waiting = false; - - //function called when the cancel button ( 'x' in the top right) is clicked - vm.close = function() { - $mdDialog.cancel(); - }; - - vm.isDone = function(status) { - vm.waiting = false; - if (status === 'success') { - dataService.bridgedomains.push(vm.bd); - dataService.selectedBd.name = vm.bd.name; - dataService.injectBridgeDomainsTopoElements(); - dataService.buildTableContent(); - vm.close(); - } - }; - - //function called when the update button is clicked - vm.updateConfig = function() { - vm.waiting = true; - //send a POST with the entered content in the form field - - }; - }, - controllerAs: 'NewBdDialogCtrl', - templateUrl: 'templates/new-bd-dialog.html', - parent: angular.element(document.body), - clickOutsideToClose:false - }) - }; - - - - vm.deploy = function() { - - }; - - vm.removeBd = function() { - if(vm.selectedBd.name) { - var successCallback = function(success) { - if (success) { - console.log(vm.bridgedomains); - _.remove(vm.bridgedomains, { - name: vm.selectedBd.name - }); - toastService.showToast('Bridge Domain Removed!'); - vm.selectedBd.name = ''; - dataService.clearInjectedInterfacesInBridgeDomainTopo(); - dataService.injectBdIntoBridgeDomainsTopo(); - dataService.tableContent.length = 0; - } else { - toastService.showToast('Error removing Bridge Domain!'); - - } - }; - - //... removeBdFromOdl(vm.selectedBd.name, successCallback); - } - }; - */ - }]); });
\ No newline at end of file diff --git a/vbd/gui/module/src/main/resources/vpp/controllers/inventory.controller.js b/vbd/gui/module/src/main/resources/vpp/controllers/inventory.controller.js index c8ca1e575..7f2a4ec0c 100644 --- a/vbd/gui/module/src/main/resources/vpp/controllers/inventory.controller.js +++ b/vbd/gui/module/src/main/resources/vpp/controllers/inventory.controller.js @@ -22,6 +22,9 @@ define(['app/vpp/vpp.module'], function(vpp) { dataService.vpps = $scope.vppList; $scope.$broadcast('RELOAD_VPP_TABLE'); + + //for vppList access in BDM + dataService.vpps = $scope.vppList; }, // error callback function(res) { @@ -33,105 +36,8 @@ define(['app/vpp/vpp.module'], function(vpp) { $scope.initVppList = function() { $scope.vppList = []; $scope.displayVppList = []; - - //setting reference for vpp access in BDM - //dataService.vpps = $scope.vppList; }; - /*$scope.viewTopology = function(vpp) { - $mdDialog.show({ - controller: function() { - var vm = this; - - $scope.topo = new nx.graphic.Topology({ - height: 350, - width: 500, - scalable: true, - theme:'blue', - enableGradualScaling:true, - nodeConfig: { - color: '#414040', - label: 'model.label', - scale: 'model.scale', - iconType: function(vertex) { - var type = vertex.get().type; - if (type === 'bd') { - return 'bd' - } else if (type === 'vpp') { - return 'switch' - } else { - return 'interf'; - } - } - }, - linkConfig: { - label: 'model.label', - linkType: 'parallel', - color: function(link) { - if (link.getData().type === 'tunnel') { - return '#00FF00'; - } else { - return '#414040'; - } - }, - width: function(link) { - if (link.getData().type === 'tunnel') { - return 5; - } - } - }, - showIcon: true, - dataProcessor: 'force', - autoLayout: true, - enableSmartNode: false, - tooltipManagerConfig: { - nodeTooltipContentClass: 'TooltipNode', - linkTooltipContentClass: 'TooltipLink' - } - }); - $scope.app = new nx.ui.Application; - - vm.vpp = vpp; - vm.vpp.type = 'vpp'; - vm.vpp.label = vm.vpp.name; - - var nodes = [].concat(vm.vpp); - var links = []; - - _.forEach(vm.vpp.interfaces, function(interf, index){ - interf.label = interf.name; - interf.scale = 0.5; - nodes.push(interf); - links.push({source: 0, target: index + 1}); - }); - - console.log(vpp); - console.log(nodes); - console.log(links); - - $scope.topo.data({ - nodes: nodes, - links: links - }); - - this.close = function() { - $mdDialog.cancel(); - }; - - }, - onComplete: function() { - console.log(document.getElementById('next-vpp-topo')); - $scope.app.container(document.getElementById('next-vpp-topo')); - $scope.topo.attach($scope.app); - - }, - templateUrl: $scope.view_path + 'vpp-topo.html', - controllerAs: 'VppTopoCtrl', - parent: angular.element(document.body), - clickOutsideToClose:true - }) - };*/ - $scope.addVppShowForm = function() { $mdDialog.show({ controller: function() { @@ -340,9 +246,5 @@ define(['app/vpp/vpp.module'], function(vpp) { $scope.viewTopology($scope.selectedVpp); - /*$scope.$on('RELOAD_SELECTED_VPP', function(event) { - $scope.viewTopology($scope.selectedVpp); - });*/ - }]); });
\ No newline at end of file diff --git a/vbd/gui/module/src/main/resources/vpp/services/bdm.bridgedomain.service.js b/vbd/gui/module/src/main/resources/vpp/services/bdm.bridgedomain.service.js index 5d3b69632..1438208d2 100644 --- a/vbd/gui/module/src/main/resources/vpp/services/bdm.bridgedomain.service.js +++ b/vbd/gui/module/src/main/resources/vpp/services/bdm.bridgedomain.service.js @@ -55,6 +55,16 @@ define(['app/vpp/vpp.module'], function(vpp) { }); }; + s.remove = function(bdName,successCallback,errorCallback) { + //http://localhost:8181/restconf/config/network-topology:network-topology/topology/testBD + var restObj = VPPRestangular.one('restconf').one('config').one('network-topology:network-topology').one('topology').one(bdName); + + restObj.remove().then(function(data) { + successCallback(data); + }, function(res) { + errorCallback(res.data, res.status); + }); + }; return s; }); diff --git a/vbd/gui/module/src/main/resources/vpp/services/bdm.interface.service.js b/vbd/gui/module/src/main/resources/vpp/services/bdm.interface.service.js index 341fb5d48..d2abc77b1 100644 --- a/vbd/gui/module/src/main/resources/vpp/services/bdm.interface.service.js +++ b/vbd/gui/module/src/main/resources/vpp/services/bdm.interface.service.js @@ -6,7 +6,7 @@ * and is available at http://www.eclipse.org/legal/epl-v10.html */ define(['app/vpp/vpp.module'], function(vpp) { - vpp.register.factory('bdmInterfaceService', function(VPPRestangular) { + vpp.register.factory('bdmInterfaceService', function(VPPRestangular, bdmVppService) { var s = {}; var Interface = function(tpId, interfaceName) { @@ -18,12 +18,32 @@ define(['app/vpp/vpp.module'], function(vpp) { return new Interface(tpId, interfaceName); }; - s.add = function(interface, bridgeDomainId, vppId, successCallback, errorCallback) { + s.add = function(interf, bridgeDomainId, vppId, successCallback, errorCallback) { var restObj = VPPRestangular.one('restconf').one('config').one('network-topology:network-topology') - .one('topology').one(bridgeDomainId).one('node').one(vppId).one('termination-point').one(interface['tp-id']); - var dataObj = {'termination-point': [interface]}; + .one('topology').one(bridgeDomainId).one('node').one(vppId).one('termination-point').one(encodeURIComponent(interf['tp-id'])); - restObj.customPUT(dataObj).then(function(data) { + var dataObj = {'termination-point': [interf]}; + + var write = function() { + restObj.customPUT(dataObj).then(function(data) { + successCallback(data); + }, function(res) { + errorCallback(res.data, res.status); + }); + }; + + var errorCallback = function() {}; + + bdmVppService.checkAndWriteVpp(bridgeDomainId, vppId, write, errorCallback); + + + }; + + s.delete = function(interf, bridgeDomainId, vppId, successCallback, errorCallback) { + var restObj = VPPRestangular.one('restconf').one('config').one('network-topology:network-topology') + .one('topology').one(bridgeDomainId).one('node').one(vppId).one('termination-point').one(encodeURIComponent(interf['tp-id'])); + + restObj.remove().then(function(data) { successCallback(data); }, function(res) { errorCallback(res.data, res.status); @@ -41,7 +61,6 @@ define(['app/vpp/vpp.module'], function(vpp) { }); }; - return s; }); });
\ No newline at end of file diff --git a/vbd/gui/module/src/main/resources/vpp/services/bdm.vpp.service.js b/vbd/gui/module/src/main/resources/vpp/services/bdm.vpp.service.js index b817a75a3..0a24c2329 100644 --- a/vbd/gui/module/src/main/resources/vpp/services/bdm.vpp.service.js +++ b/vbd/gui/module/src/main/resources/vpp/services/bdm.vpp.service.js @@ -38,14 +38,40 @@ define(['app/vpp/vpp.module'], function(vpp) { s.get = function(bridgeDomainId, successCallback, errorCallback) { var restObj = VPPRestangular.one('restconf').one('config').one('network-topology:network-topology').one('topology').one(bridgeDomainId); - restObj.get().then(function(data) { + return restObj.get().then(function(data) { successCallback(data); }, function(res) { errorCallback(res.data, res.status); }); }; + s.getOne = function(bridgeDomainId, vppId, successCallback, errorCallback) { + var restObj = VPPRestangular.one('restconf').one('config').one('network-topology:network-topology').one('topology').one(bridgeDomainId).one('node').one(vppId); + return restObj.get().then(function(data) { + successCallback(data); + }, function(res) { + errorCallback(res.data, res.status); + }); + }; + + s.checkAndWriteVpp = function(bridgeDomainId, vppId, successCallback, errorCallback) { + s.getOne(bridgeDomainId, vppId, + function() { + successCallback(); + }, function() { + var vppObject = s.createObj(vppId, vppId); + + s.add(vppObject, bridgeDomainId, function() { + successCallback(); + }, function() { + errorCallback(); + }); + } + ); + + //getPromise.then + }; return s; }); });
\ No newline at end of file diff --git a/vbd/gui/module/src/main/resources/vpp/services/vpp.services.js b/vbd/gui/module/src/main/resources/vpp/services/vpp.services.js index 70b1631f7..4c20f844e 100644 --- a/vbd/gui/module/src/main/resources/vpp/services/vpp.services.js +++ b/vbd/gui/module/src/main/resources/vpp/services/vpp.services.js @@ -30,14 +30,15 @@ define(['app/vpp/vpp.module', 'next'], function(vpp) { } }); - vpp.register.service('dataService', function() { + vpp.register.service('dataService', ['$timeout', function($timeout) { + + var self = this; nx.graphic.Icons.registerIcon("bd", "src/app/vpp/assets/images/bd1.svg", 45, 45); nx.graphic.Icons.registerIcon("interf", "src/app/vpp/assets/images/interf.svg", 45, 45); this.bridgeDomainsTopo = new nx.graphic.Topology({ - height: 350, - width: 500, + adaptive: true, scalable: true, theme:'blue', enableGradualScaling:true, @@ -49,8 +50,6 @@ define(['app/vpp/vpp.module', 'next'], function(vpp) { var type = vertex.get().type; if (type === 'bd') { return 'bd' - } else if (type === 'vpp') { - return 'switch' } else { return 'interf'; } @@ -82,11 +81,11 @@ define(['app/vpp/vpp.module', 'next'], function(vpp) { } }); this.nextApp = new nx.ui.Application; + this.bridgedomainsLoaded = false; this.vpps = []; - this.tableContent = []; - this.unassignedInterfaces = []; + this.originalAssignments = []; this.interfaces = []; this.injectedInterfaces = []; this.bridgedomains = []; @@ -95,69 +94,188 @@ define(['app/vpp/vpp.module', 'next'], function(vpp) { name: '' }; - this.setBridgeDomains = function(data) { - angular.copy(data['bridge-domains']['bridge-domain'], this.bridgedomains); + this.generateInterfaces = function() { + self.interfaces.length = 0; + _.forEach(this.vpps, function(vpp) { + _.forEach(vpp.interfaces, function(interf) { + interf.vppName = vpp.name; + interf.label = vpp.name+'/'+interf.name; + interf.scale = 0.5; + self.interfaces.push(interf); + }); + }); + console.log(this.interfaces); }; - this.clearInjectedInterfacesInBridgeDomainTopo = function() { - this.bridgeDomainsTopo.clear(); - this.injectedInterfaces.length = 0; + this.buildAssignedInterfaces = function() { + this.originalAssignments.length = 0; + _.forEach(this.bridgedomains, function(bd){ + var bdName = bd['topology-id']; + var nodes = bd.node; + if (nodes) { + _.forEach(nodes, function(vpp) { + var vppName = vpp['node-id']; + var tps = vpp['termination-point']; + if (tps) { + _.forEach(tps, function(tp) { + tp.vppName = vppName; + tp.vbd = bdName; + self.originalAssignments.push(tp); + }) + } + }) + } + }); + console.log('Assigned Interfaces: '); + console.log(this.originalAssignments); }; - this.generateUnassignedInterfaces = function() { - this.unassignedInterfaces.length = 0; - for (var x=0; x<this.interfaces.length; x++) { - if (!this.interfaces[x]['v3po:l2']['bridge-domain']) { - this.unassignedInterfaces.push(this.interfaces[x]); + this.buildTableContent = function() { + this.tableContent.length = 0; + angular.copy(this.interfaces,this.tableContent); + + + //Makes assignements based on previously changed interfaces, or assignments retrieved from ODL + _.forEach(this.tableContent, function(interf) { + var matchedChangedInterface = _.find(self.changedInterfaces, { + name: interf.name, + vppName: interf.vppName + }); + + var matchedOriginalAssignment = _.find(self.originalAssignments, { + 'vbridge-topology:user-interface': interf.name, + vppName: interf.vppName + }); + + if (matchedChangedInterface) { + interf.assigned = matchedChangedInterface.assigned; + interf.vbd = matchedChangedInterface.vbd; + } else if (matchedOriginalAssignment) { + interf.assigned = true; + interf.vbd = matchedOriginalAssignment.vbd; + } else { + interf.assigned = false; + interf.vbd = ''; } - } - }; + }); + + _.remove(self.tableContent, function(interf){ + var isAssigned = interf.assigned === true; + var isNotCorrectBd = !(interf.vbd === self.selectedBd.name); + return(isAssigned && isNotCorrectBd); + }); + + //_.forEach(this.originalAssignments, function(origAssignment) { + // if (origAssignment.vbd === self.selectedBd.name) { + // var matchedInterface = _.find(self.tableContent, { + // name: origAssignment['vbridge-topology:user-interface'], + // vppName: origAssignment.vppName + // }); + // if (matchedInterface) { + // matchedInterface.assigned = true; + // matchedInterface.vbd = origAssignment.vbd; + // } else { + // console.error('Interface "'+origAssignment['vbridge-topology:user-interface']+'" on VPP "'+origAssignment.vppName+'" in vBD "'+origAssignment.vbd+'" was not found at mount point!'); + // } + // } else { + // _.remove(self.tableContent, { + // name: origAssignment['vbridge-topology:user-interface'], + // vppName: origAssignment.vppName + // }); + // } + //}); + // + //_.forEach(this.changedInterfaces, function(changedInterface) { + // + // var matchedInterface = _.find(self.tableContent, { + // name: changedInterface.name, + // vppName: changedInterface.vppName + // }); + // + // if (matchedInterface) { + // if (changedInterface.assigned) { + // if (changedInterface.vbd === self.selectedBd.name) { + // matchedInterface.assigned = true; + // matchedInterface.vbd = changedInterface.vbd; + // } + // else { + // _.remove(self.tableContent, { + // name: changedInterface.name, + // vppName: changedInterface.vppName + // }); + // } + // } else { + // matchedInterface.assigned = false; + // matchedInterface.vbd = ''; + // } + // } + //}); + + //.. + + //_.remove(self.tableContent, { + // name: origAssignment['vbridge-topology:user-interface'], + // vppName: origAssignment.vppName + //}); + + this.injectBridgeDomainsTopoElements(); - this.injectBridgeDomainsTopoElements = function() { - this.clearInjectedInterfacesInBridgeDomainTopo(); - this.injectBdIntoBridgeDomainsTopo(); - this.injectInterfacesIntoBridgeDomainsTopo(); - this.injectInterfacesLinksIntoBridgeDomainsTopo(); - this.bridgeDomainsTopo.adaptToContainer(); }; - this.buildTableContent = function() { - this.tableContent.length = 0; - this.generateUnassignedInterfaces(); - angular.copy(this.unassignedInterfaces.concat(this.injectedInterfaces),this.tableContent); + + this.clearTopology = function() { + this.bridgeDomainsTopo.clear(); + this.injectedInterfaces.length = 0; + }; - this.injectBdIntoBridgeDomainsTopo = function() { - this.bridgeDomainsTopo.addNode({ + //this.generateUnassignedInterfaces = function() { + // this.unassignedInterfaces.length = 0; + // for (var x=0; x<this.interfaces.length; x++) { + // if (!this.interfaces[x]['v3po:l2']['bridge-domain']) { + // this.unassignedInterfaces.push(this.interfaces[x]); + // } + // } + //}; + + this.setData = function() { + + for (var x=0; x<this.tableContent.length; x++) { + if (this.tableContent[x].assigned) { + this.bridgeDomainsTopo.addNode(this.tableContent[x]); + this.injectedInterfaces.push(this.tableContent[x]); + } + } + + var nodes = [{ name : this.selectedBd.name, label: this.selectedBd.name, - x: 60, - y: -50, - scale: 5 - }); - }; + type:'bd', + x: 0, + y: 0, + scale: 1 + }].concat(this.injectedInterfaces); - this.injectInterfacesLinksIntoBridgeDomainsTopo = function() { - var nodes = this.bridgeDomainsTopo.getNodes(); + var links = []; for (var x=1; x<nodes.length; x++){ - var target = nodes[x].get('data-id'); - this.bridgeDomainsTopo.addLink({'source':0, 'target': target}); + links.push({'source':0, 'target': x}); } - }; - this.injectInterfacesIntoBridgeDomainsTopo = function() { - for (var x=0; x<this.interfaces.length; x++) { - if ((this.interfaces[x]['v3po:l2']['bridge-domain'] === this.selectedBd.name) && (this.interfaces[x].type==='iana-if-type:ethernetCsmacd')) { - this.interfaces[x].label = 'vpp1/'+this.interfaces[x].name; - this.bridgeDomainsTopo.addNode(this.interfaces[x]); - this.injectedInterfaces.push(this.interfaces[x]); - this.interfaces[x].assigned = true; - } - } + var topoData = { + nodes: nodes, + links: links + }; + + this.bridgeDomainsTopo.data(topoData); }; - }); + this.injectBridgeDomainsTopoElements = function() { + this.clearTopology(); + this.setData(); + self.bridgeDomainsTopo.adaptToContainer(); + }; + }]); diff --git a/vbd/gui/module/src/main/resources/vpp/views/bridge-domains.tpl.html b/vbd/gui/module/src/main/resources/vpp/views/bridge-domains.tpl.html index 263fc0949..806097346 100644 --- a/vbd/gui/module/src/main/resources/vpp/views/bridge-domains.tpl.html +++ b/vbd/gui/module/src/main/resources/vpp/views/bridge-domains.tpl.html @@ -1,39 +1,44 @@ <div ng-controller="BridgeDomainsController"> - <div layout="row" layout-xs="column" style="height:100%"> - <div id="bridge-domains-next-app" style="height: 550px; width: 50%" flex></div> - <div class="md-sidenav-left md-whiteframe-z2" style="height: 550px" flex> + <div layout="row" layout-xs="column" style="height: 550px; width: 100%"> + <div id="bridge-domains-next-app" style="height: 550px; width: 60%"></div> + <div class="md-sidenav-left md-whiteframe-z2" style="height: 550px; background-color: #414042; overflow: scroll" flex> <md-content layout-padding ng-controller="TableController as TableCtrl"> <md-input-container style="margin-right: 5px;" layout="row"> <md-select ng-model='selectedBd.name' placeholder="Select BD" ng-change="bdChanged()" style="width: 100%;"> - <md-option ng-repeat="bd in bridgedomains" value="{{bd.name}}">{{bd.name}}</md-option> + <md-option ng-repeat="bd in bridgedomains" value="{{bd['topology-id']}}">{{bd['topology-id']}}</md-option> </md-select> <md-button class="md-raised" md-no-ink ng-click="addBd()" style="width: 25%;">Add BD</md-button> - <md-button class="md-raised" md-no-ink ng-click="removeBd()" style="width: 35%;" ng-if="dataService.injectedInterfaces.length===0 && dataService.selectedBd.name">Remove BD</md-button> + <md-button class="md-raised" md-no-ink ng-click="removeBd()" style="width: 35%;" ng-if="dataService.injectedInterfaces.length===0 && dataService.selectedBd.name && dataService.changedInterfaces.length===0">Remove BD</md-button> + <md-button class="md-raised" md-no-ink ng-click="reload()" style="width: 25%;">Reload</md-button> </md-input-container> - <table st-table="TableCtrl.displayedCollection" class="table table-striped" st-safe-src="TableCtrl.rowCollection"> + <table st-table="TableCtrl.displayedCollection" class="table" st-safe-src="TableCtrl.rowCollection"> <thead> <tr> <th>Assigned</th> + <th st-sort="vppName" st-sort-default="true">Vpp</th> <th st-sort="name" st-sort-default="true">Interface Name</th> - <th st-sort="description">Description</th> + <!--<th st-sort="description">Description</th>--> <th st-sort="bridge-domain">Bridge Domain</th> </tr> </thead> <tbody> <tr ng-repeat="row in TableCtrl.displayedCollection"> - <td> - <md-switch ng-model="row.assigned" aria-label="Assign Switch" ng-change="TableCtrl.updateAssignment(row);"> - </md-switch> - </td> - <td>{{row.label}}</td> - <td>{{row.description}}</td> - <td>{{row['v3po:l2']['bridge-domain']}}</td> + <div ng-hide="row.hidden"> + <td> + <md-switch ng-model="row.assigned" aria-label="Assign Switch" ng-change="TableCtrl.updateAssignment(row);"> + </md-switch> + </td> + <td>{{row.vppName}}</td> + <td>{{row.name}}</td> + <!--<td>{{row.description}}</td>--> + <td>{{row.vbd}}</td> + </div> </tr> </tbody> </table> <!--<md-input-container style="bottom: 10px">--> - <md-button class="md-raised" md-no-ink ng-click="deploy()" style="width: 94%;position: fixed;" ng-if="dataService.changedInterfaces.length">Deploy</md-button> + <md-button class="md-raised" md-no-ink ng-click="deploy()" style="width: 94%;" ng-if="dataService.changedInterfaces.length">Deploy</md-button> <!--</md-input-container>--> </md-content> </div> diff --git a/vbd/gui/module/src/main/resources/vpp/views/new-bd-dialog.html b/vbd/gui/module/src/main/resources/vpp/views/new-bd-dialog.html index fd04f8e84..41e6ad8a4 100644 --- a/vbd/gui/module/src/main/resources/vpp/views/new-bd-dialog.html +++ b/vbd/gui/module/src/main/resources/vpp/views/new-bd-dialog.html @@ -7,7 +7,7 @@ </h2> <span flex></span> <md-button class="md-icon-button" ng-click="NewBdDialogCtrl.close()" aria-label="close button"> - <div class="glyphicon glyphicon-remove"></div> + <div>X</div> </md-button> </div> </md-toolbar> |