From 882ddc69b05a4001718d90aa9c57f1e13d80aa0d Mon Sep 17 00:00:00 2001 From: Varun Seereeram Date: Thu, 4 Feb 2016 05:15:51 -0800 Subject: GUI initial commit - open ui on http://controllerIp:8181/index.html - added interfaces to vpp topo. - fixed VPP mounting - fixed VPP Editing and deleting Change-Id: I6ae2c6e5781d3e0cdb78b112d706b9f5076301d5 Signed-off-by: Daniel Malachovsky Signed-off-by: Varun Seereeram Signed-off-by: Robert Varga --- .../src/main/resources/vpp/vpp.controller.js | 571 +++++++++++++++++++++ 1 file changed, 571 insertions(+) create mode 100644 vbd/gui/module/src/main/resources/vpp/vpp.controller.js (limited to 'vbd/gui/module/src/main/resources/vpp/vpp.controller.js') diff --git a/vbd/gui/module/src/main/resources/vpp/vpp.controller.js b/vbd/gui/module/src/main/resources/vpp/vpp.controller.js new file mode 100644 index 000000000..17d5a1085 --- /dev/null +++ b/vbd/gui/module/src/main/resources/vpp/vpp.controller.js @@ -0,0 +1,571 @@ +var modules = ['app/vpp/vpp.module', + 'app/vpp/vpp.services', + ]; + + +define(modules, function(vpp) { + + vpp.register.controller('vppCtrl', ['$scope', '$rootScope', '$timeout', 'httpService' ,'dataService', 'toastService', '$mdSidenav', '$mdDialog', + function ($scope, $rootScope, $timeout, httpService ,dataService, toastService, $mdSidenav, $mdDialog) { + $rootScope['section_logo'] = 'src/app/vpp/assets/images/vpp.gif'; + $scope.view_path = 'src/app/vpp/views/'; + + $scope.mainView = "inventory"; + + $scope.setMainView = function(viewName) { + $scope.mainView = viewName; + }; + }]); + + vpp.register.controller('InventoryTableController', ['$scope', '$rootScope','$filter', 'toastService', 'VppService', '$mdDialog', 'dataService', 'InterfaceService', function($scope, $rootScope, filter, toastService, VppService, $mdDialog, dataService, InterfaceService) { + + $scope.getInterfaces = function(index) { + InterfaceService.getInterfaceList( + $scope.vppList[index].name, + //success callback + function(data) { + var interfaces = data['interfaces-state'].interface; + var vpp = $scope.vppList[index]; + vpp.interfaces = []; + + interfaces.forEach(function(i){ + if (i.name != 'local0') { + vpp.interfaces.push(i); + } + }); + + console.log($scope.vppList); + }, + //error callback + function(res) { + console.error(res); + } + ) + }; + + $scope.getVppList = function() { + $scope.initVppList(); + + VppService.getVppList( + // success callback + function(data) { + if(data.topology.length || data.topology[0].node.length) { + data.topology[0].node.forEach(function(n) { + if(n['node-id'] !== 'controller-config') { + var vppObj = VppService.createObj(n['node-id'], n['netconf-node-topology:host'], n['netconf-node-topology:port'], null, null, n['netconf-node-topology:connection-status']); + $scope.vppList.push(vppObj); + $scope.getInterfaces($scope.vppList.length - 1); //pass index. + + } + }); + } + }, + // error callback + function(res) { + console.error(res); + } + ); + }; + + $scope.initVppList = function() { + $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() { + var vm = this; + vm.vpp = {}; + //function called when the cancel button ( 'x' in the top right) is clicked + vm.close = function() { + $mdDialog.cancel(); + }; + + vm.finished = function(successful) { + if (successful) { + vm.close(); + vm.waiting = false; + toastService.showToast('New VPP added!'); + $scope.getVppList(); + } else { + vm.waiting = false; + toastService.showToast('Error adding new VPP'); + } + }; + + //function called when the update button is clicked + vm.updateConfig = function() { + vm.waiting = true; + VppService.mountVpp(vm.vpp.name, vm.vpp.ip, vm.vpp.port, vm.vpp.un, vm.vpp.pw, vm.finished); + }; + }, + controllerAs: 'NewVppDialogCtrl', + templateUrl: $scope.view_path + 'new-vpp-dialog.html', + parent: angular.element(document.body), + clickOutsideToClose:true + }) + }; + + $scope.editVppShowForm = function(vppObject) { + + $mdDialog.show({ + controller: function() { + var vm = this; + + vm.vpp = { + name: vppObject.name, + status: vppObject.status, + ip: vppObject.ipAddress, + port: vppObject.port + }; + + //function called when the cancel button ( 'x' in the top right) is clicked + vm.close = function() { + $mdDialog.cancel(); + }; + + vm.finishedUpdating = function(successful) { + if (successful) { + vm.close(); + vm.waiting = false; + toastService.showToast('VPP configuration updated!'); + $scope.getVppList(); + } else { + vm.waiting = false; + toastService.showToast('Error configuring VPP'); + } + }; + + vm.finishedDeleting = function(successful) { + if (successful) { + VppService.mountVpp(vm.vpp.name, vm.vpp.ip, vm.vpp.port, vm.vpp.un, vm.vpp.pw, vm.finishedUpdating); + $scope.getVppList(); + } else { + vm.waiting = false; + toastService.showToast('Error configuring VPP'); + } + }; + + //function called when the update button is clicked + vm.updateConfig = function() { + //VppService.editVpp(vm.vpp.name, vm.vpp.ip, vm.vpp.port, vm.vpp.un, vm.vpp.pw, vm.finishedUpdating); + VppService.deleteVpp(vm.vpp, vm.finishedDeleting); + }; + }, + controllerAs: 'ConfigVppDialogCtrl', + templateUrl: $scope.view_path + 'config-vpp-dialog.html', + parent: angular.element(document.body), + clickOutsideToClose:true + }); + }; + + $scope.deleteVpp = function(vppObject) { + + var finished = function(successful) { + if (successful) { + toastService.showToast('Removed VPP!'); + $scope.getVppList(); + } else { + toastService.showToast('Error removing VPP'); + } + }; + + VppService.deleteVpp(vppObject, finished); + }; + + $scope.getVppList(); + }]); + + vpp.register.controller('TableController', ['$scope', '$rootScope','$filter', 'dataService', 'httpService', 'toastService', function ($scope, $rootScope, filter, dataService, httpService, 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('InventoryController', function(dataService, $mdDialog, httpService, $location, toastService, $window) { + var vm = this; + vm.dataService = dataService; + + var nextApp = new nx.ui.Application; + + nextApp.container(document.getElementById('inventory-next-app')); + dataService.vppTopo.attach(nextApp); + dataService.vppTopo.tooltipManager().nodeTooltip().close(); + dataService.bridgeDomainsTopo.tooltipManager().nodeTooltip().close(); + + window.addEventListener('resize', function() { + if ($location.path() === '/inventory') { + dataService.vppTopo.adaptToContainer(); + } + }); + + dataService.vppTopo.on("topologyGenerated", function() { //on topology generated... + dataService.vppTopo.stage().on('dblclick', function(sender, event) { + var target = event.target; + var nodesLayerDom = dataService.vppTopo.getLayer('nodes').dom().$dom; + var id; + + //db click node + if (nodesLayerDom.contains(target)) { + while (!target.classList.contains('node')) { + target = target.parentElement; + } + id = target.getAttribute('data-id'); + dataService.vppTopo.tooltipManager().nodeTooltip().close(); + + if(dataService.vppTopo.getNode(id).model().get().type ==='iana-if-type:ethernetCsmacd') { + vm.configInterface(dataService.vppTopo.getData().nodes[id]); + } else { + vm.configVpp(dataService.vppTopo.getNode(id)); + } + } + }); //Double click handler + + dataService.vppTopo.on('clickNode',function(topo, node){ + if(node.model().get().type!='iana-if-type:ethernetCsmacd') { + dataService.vppTopo.tooltipManager().nodeTooltip().close(); + } + console.log(node.model().get()); + }); + }); + + vm.configVpp = function(node) { + console.log(node.model().get()); + $mdDialog.show({ + controller: function() { + var vm = this; + var nodeModel = node.model().get(); + vm.vpp = { + name: nodeModel['node-id'], + status: nodeModel['netconf-node-topology:connection-status'], + ip: nodeModel['netconf-node-topology:host'], + port: nodeModel['netconf-node-topology:port'] + }; + + //function called when the cancel button ( 'x' in the top right) is clicked + vm.close = function() { + $mdDialog.cancel(); + }; + + vm.finishedUpdating = function(successful) { + if (successful) { + vm.close(); + vm.waiting = false; + toastService.showToast('VPP configuration updated!'); + $window.location.reload(true); + } else { + vm.waiting = false; + toastService.showToast('Error configuring VPP'); + } + }; + + vm.finishedDeleting = function(successful) { + if (successful) { + vm.close(); + vm.waiting = false; + toastService.showToast('VPP deleted!'); + $window.location.reload(true); + } else { + vm.waiting = false; + toastService.showToast('Error deleting VPP'); + } + }; + + vm.deleteVpp = function() { + vm.waiting = true; + httpService.deleteVpp(vm.vpp.name, vm.finishedDeleting); + }; + + //function called when the update button is clicked + vm.updateConfig = function() { + //TODO: Function to send a POST with the entered content in the form field + httpService.configVpp(vm.vpp.name, vm.vpp.ip, vm.vpp.port, vm.vpp.un, vm.vpp.pw, vm.finishedUpdating); + }; + }, + controllerAs: 'ConfigVppDialogCtrl', + templateUrl: 'templates/config-vpp-dialog.html', + parent: angular.element(document.body), + clickOutsideToClose:false + }) + }; + + vm.addVpp = function() { + //show dialog + $mdDialog.show({ + controller: function() { + var vm = this; + vm.vpp = {}; + //function called when the cancel button ( 'x' in the top right) is clicked + vm.close = function() { + $mdDialog.cancel(); + }; + + vm.finished = function(successful) { + if (successful) { + vm.close(); + vm.waiting = false; + toastService.showToast('New VPP added!'); + $window.location.reload(true); + } else { + vm.waiting = false; + toastService.showToast('Error adding new VPP'); + } + }; + + //function called when the update button is clicked + vm.updateConfig = function() { + vm.waiting = true; + //TODO: Function to send a POST with the entered content in the form field + httpService.mountVpp(vm.vpp.name, vm.vpp.ip, vm.vpp.port, vm.vpp.un, vm.vpp.pw, vm.finished); + }; + }, + controllerAs: 'NewVppDialogCtrl', + templateUrl: 'templates/new-vpp-dialog.html', + parent: angular.element(document.body), + clickOutsideToClose:false + }) + }; + + vm.configInterface = function(interf) { + //show dialog + $mdDialog.show({ + controller: function() { + var vm = this; + var oldDescription = interf.description; + var oldAdminStatus = interf['admin-status']; + vm.interf = interf; + //function called when the cancel button ( 'x' in the top right) is clicked + vm.cancel = function() { + $mdDialog.cancel(); + vm.revert(); + }; + vm.revert = function() { + interf['admin-status'] = oldAdminStatus; + interf.description = oldDescription + }; + vm.success = function() { + $mdDialog.cancel(); + }; + //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 + httpService.updateInterface(vm.interf,vm.waiting,vm.cancel, vm.success); + }; + }, + controllerAs: 'ConfigInterfaceDialogCtrl', + templateUrl: 'templates/config-interface-dialog.html', + parent: angular.element(document.body), + clickOutsideToClose:false + }) + }; + dataService.vppTopo.adaptToContainer(); + }); + + vpp.register.controller('BridgeDomainsController', function(dataService, $location, $mdDialog, httpService, toastService) { + var vm = this; + vm.dataService = dataService; + var nextApp = new nx.ui.Application; + nextApp.container(document.getElementById('bridge-domains-next-app')); + dataService.bridgeDomainsTopo.attach(nextApp); + + window.addEventListener('resize', function () { + if ($location.path() === '/bridgedomains') { + dataService.bridgeDomainsTopo.adaptToContainer(); + } + }); + + dataService.vppTopo.tooltipManager().nodeTooltip().close(); + dataService.bridgeDomainsTopo.tooltipManager().nodeTooltip().close(); + + 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(httpService) { + 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 + httpService.addBdToODL(vm.bd.name, vm.isDone); + }; + }, + controllerAs: 'NewBdDialogCtrl', + templateUrl: 'templates/new-bd-dialog.html', + parent: angular.element(document.body), + clickOutsideToClose:false + }) + }; + + vm.deploy = function() { + httpService.deploy(); + }; + + 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!'); + + } + }; + + httpService.removeBdFromOdl(vm.selectedBd.name, successCallback); + } + }; + }); +}); + + -- cgit 1.2.3-korg