From 843fe81ebf7f11920a52f625bf863a1fad4d29de Mon Sep 17 00:00:00 2001 From: Daniel Malachovsky Date: Fri, 5 Feb 2016 16:24:59 +0100 Subject: UI-Grid initial commit - added angular-ui-grid library for handling expandable table - removed old service (http) and old inventory controller - fixed bridge domains page formatting - fixes bugs due to old code's css - applied Dave's comments Change-Id: Ie10d05bb0da3cb9bac666b66cf7168696c45254f Signed-off-by: Daniel Malachovsky Signed-off-by: Varun Seereeram --- vbd/gui/bundle/pom.xml | 5 + .../resources/OSGI-INF/blueprint/blueprint.xml | 1 + .../src/main/resources/vpp/assets/css/vpp.css | 17 +- vbd/gui/module/src/main/resources/vpp/bower.json | 12 +- vbd/gui/module/src/main/resources/vpp/main.js | 2 + .../inventory-table-interfaces-subgrid.tpl.html | 1 + .../resources/vpp/views/inventory-table.tpl.html | 8 +- .../main/resources/vpp/views/new-vpp-dialog.html | 2 +- .../src/main/resources/vpp/vpp.controller.js | 823 +++++++++------------ vbd/gui/module/src/main/resources/vpp/vpp.css | 3 - .../module/src/main/resources/vpp/vpp.module.js | 7 +- .../module/src/main/resources/vpp/vpp.services.js | 375 ++-------- 12 files changed, 424 insertions(+), 832 deletions(-) create mode 100644 vbd/gui/module/src/main/resources/vpp/views/inventory-table-interfaces-subgrid.tpl.html delete mode 100644 vbd/gui/module/src/main/resources/vpp/vpp.css (limited to 'vbd') diff --git a/vbd/gui/bundle/pom.xml b/vbd/gui/bundle/pom.xml index a8e4ba602..ff2b787b5 100644 --- a/vbd/gui/bundle/pom.xml +++ b/vbd/gui/bundle/pom.xml @@ -33,6 +33,11 @@ loader 0.3.0-SNAPSHOT + + io.fd.honeycomb.vbd + vbd-ui-module + 1.0.0-SNAPSHOT + diff --git a/vbd/gui/bundle/src/main/resources/OSGI-INF/blueprint/blueprint.xml b/vbd/gui/bundle/src/main/resources/OSGI-INF/blueprint/blueprint.xml index 265cd7538..5812bcf70 100644 --- a/vbd/gui/bundle/src/main/resources/OSGI-INF/blueprint/blueprint.xml +++ b/vbd/gui/bundle/src/main/resources/OSGI-INF/blueprint/blueprint.xml @@ -13,6 +13,7 @@ src/app/vpp/assets/css/next.css src/app/vpp/bower_components/angular-material/angular-material.min.css + src/app/vpp/bower_components/angular-ui-grid/ui-grid.css src/app/vpp/assets/css/vpp.css 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 45eb9f1d1..b196bcd70 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 @@ -8,7 +8,6 @@ html,body { width: 100%; - overflow: hidden; background-color: #414040; } @@ -31,8 +30,8 @@ md-sidenav.md-locked-open { width: 35px; } -.white { - color: white; +.ui-grid-header-cell-label { + color: black !important; } span.center { @@ -45,6 +44,10 @@ span.center { background-color: white; } +.n-topology-nav { + display: none; +} + .node-label { fill: #414040 !important; } @@ -84,10 +87,6 @@ span.center { z-index: 10000000; } -text.node-label { - font-size: 16px !important; -} - .n-topology.n-topology-blue .n-topology-nav-mode-selected:hover { background: #414040 !important; } @@ -108,7 +107,3 @@ a.md-button.md-warn[disabled], .md-button.md-default-theme[disabled], .md-button .md-button.md-accent[disabled], .md-button.md-default-theme.md-warn[disabled], .md-button.md-warn[disabled] { color: #FFA500 !important; } - -/*md-select.md-default-theme, md-select .md-select-value.md-select-placeholder {*/ - -/*}*/ \ No newline at end of file diff --git a/vbd/gui/module/src/main/resources/vpp/bower.json b/vbd/gui/module/src/main/resources/vpp/bower.json index a6edf5837..441b933b6 100644 --- a/vbd/gui/module/src/main/resources/vpp/bower.json +++ b/vbd/gui/module/src/main/resources/vpp/bower.json @@ -1,7 +1,7 @@ { - "name": "open-vpp", - "description": "open-vpp", - "main": "app.js", + "name": "odl-vpp-ui", + "description": "Opendaylight VPP UI", + "main": "main.js", "authors": [ "Varun Seereeram", "Chris Metz", @@ -28,10 +28,10 @@ "angular-animate": "^1.3.0 || >1.4.0-beta.0", "angular-aria": "^1.3.15 || >1.4.0-beta.0", "angular-material": "~0.11.4", - "angular-smart-table": "~2.1.6", - "angular-route": "~1.4.7" + "angular-smart-table": "~2.1.7", + "angular-ui-grid": "~3.1.0" }, "resolutions": { - "angular": "1.4.8" + "angular": "1.4.9" } } diff --git a/vbd/gui/module/src/main/resources/vpp/main.js b/vbd/gui/module/src/main/resources/vpp/main.js index 6fdc5c209..a39513bdd 100644 --- a/vbd/gui/module/src/main/resources/vpp/main.js +++ b/vbd/gui/module/src/main/resources/vpp/main.js @@ -13,6 +13,7 @@ require.config({ 'angular-smart-table' : 'app/vpp/bower_components/angular-smart-table/dist/smart-table', 'lodash' : 'app/vpp/assets/js/lodash.min', 'next': 'app/vpp/assets/js/next', + 'angular-ui-grid': 'app/vpp/bower_components/angular-ui-grid/ui-grid.min', }, shim : { @@ -20,6 +21,7 @@ require.config({ 'angular-animate' : ['angular'], 'angular-aria' : ['angular'], 'angular-smart-table' : ['angular'], + 'angular-ui-grid' : ['angular'] }, }); diff --git a/vbd/gui/module/src/main/resources/vpp/views/inventory-table-interfaces-subgrid.tpl.html b/vbd/gui/module/src/main/resources/vpp/views/inventory-table-interfaces-subgrid.tpl.html new file mode 100644 index 000000000..c47617cb1 --- /dev/null +++ b/vbd/gui/module/src/main/resources/vpp/views/inventory-table-interfaces-subgrid.tpl.html @@ -0,0 +1 @@ +
\ No newline at end of file diff --git a/vbd/gui/module/src/main/resources/vpp/views/inventory-table.tpl.html b/vbd/gui/module/src/main/resources/vpp/views/inventory-table.tpl.html index ad24bce14..4f15332de 100644 --- a/vbd/gui/module/src/main/resources/vpp/views/inventory-table.tpl.html +++ b/vbd/gui/module/src/main/resources/vpp/views/inventory-table.tpl.html @@ -1,7 +1,8 @@
Mount VPP Reload VPPs - + + +
+
+
\ No newline at end of file diff --git a/vbd/gui/module/src/main/resources/vpp/views/new-vpp-dialog.html b/vbd/gui/module/src/main/resources/vpp/views/new-vpp-dialog.html index d0ce47604..39178716d 100644 --- a/vbd/gui/module/src/main/resources/vpp/views/new-vpp-dialog.html +++ b/vbd/gui/module/src/main/resources/vpp/views/new-vpp-dialog.html @@ -59,7 +59,7 @@ - Mount + Mount diff --git a/vbd/gui/module/src/main/resources/vpp/vpp.controller.js b/vbd/gui/module/src/main/resources/vpp/vpp.controller.js index ebfd49ae8..acb7d0a5c 100644 --- a/vbd/gui/module/src/main/resources/vpp/vpp.controller.js +++ b/vbd/gui/module/src/main/resources/vpp/vpp.controller.js @@ -13,8 +13,8 @@ var modules = ['app/vpp/vpp.module', 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) { + vpp.register.controller('vppCtrl', ['$scope', '$rootScope', '$timeout' ,'dataService', 'toastService', '$mdSidenav', '$mdDialog', + function ($scope, $rootScope, $timeout ,dataService, toastService, $mdSidenav, $mdDialog) { $rootScope['section_logo'] = 'src/app/vpp/assets/images/vpp.gif'; $scope.view_path = 'src/app/vpp/views/'; @@ -27,259 +27,312 @@ define(modules, function(vpp) { vpp.register.controller('InventoryTableController', ['$scope', '$rootScope','$filter', 'toastService', 'VppService', '$mdDialog', 'dataService', 'VppInterfaceService', function($scope, $rootScope, filter, toastService, VppService, $mdDialog, dataService, VppInterfaceService) { - - $scope.getInterfaces = function(index) { - VppInterfaceService.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.initTable = - $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. + $scope.getInterfaces = function(index) { + VppInterfaceService.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); + angular.copy($scope.vppList, dataService.vpps); + }, + //error callback + function(res) { + console.error(res); } - }, - // 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'; + $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. } - } - }, - linkConfig: { - label: 'model.label', - linkType: 'parallel', - color: function(link) { - if (link.getData().type === 'tunnel') { - return '#00FF00'; - } else { - return '#414040'; + }); + } + + $scope.$broadcast('RELOAD_VPP_TABLE'); + }, + // 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'; + } } }, - width: function(link) { - if (link.getData().type === 'tunnel') { - return 5; + 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' } - }, - 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(); - }; + }); + $scope.app = new nx.ui.Application; - }, - 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 - }) - }; + vm.vpp = vpp; + vm.vpp.type = 'vpp'; + vm.vpp.label = vm.vpp.name; - $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(); - }; + var nodes = [].concat(vm.vpp); + var links = []; - 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'); - } - }; + _.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}); + }); - //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 - }) - }; + console.log(vpp); + console.log(nodes); + console.log(links); + + $scope.topo.data({ + nodes: nodes, + links: links + }); - $scope.editVppShowForm = function(vppObject) { + 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 + }) + }; - $mdDialog.show({ - controller: function() { - var vm = this; + $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 + }) + }; - vm.vpp = { - name: vppObject.name, - status: vppObject.status, - ip: vppObject.ipAddress, - port: vppObject.port - }; + $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 + }); + }; - //function called when the cancel button ( 'x' in the top right) is clicked - vm.close = function() { - $mdDialog.cancel(); - }; + $scope.deleteVpp = function(vppObject) { - 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'); - } - }; + var finished = function(successful) { + if (successful) { + toastService.showToast('Removed VPP!'); + $scope.getVppList(); + } else { + toastService.showToast('Error removing 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'); - } - }; + VppService.deleteVpp(vppObject, finished); + }; - //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.getVppList(); + }]); - $scope.deleteVpp = function(vppObject) { + vpp.register.controller('InventoryTableDefinitonController', ['$scope', function($scope) { - var finished = function(successful) { - if (successful) { - toastService.showToast('Removed VPP!'); - $scope.getVppList(); - } else { - toastService.showToast('Error removing VPP'); - } - }; + var actionCellTemplate = + 'View Topology' + + 'Edit' + + 'Delete'; + + $scope.gridOptions = { + + expandableRowTemplate: $scope.view_path + 'inventory-table-interfaces-subgrid.tpl.html', + expandableRowHeight: 150, + //subGridVariable will be available in subGrid scope + expandableRowScope: { + subGridVariable: 'subGridScopeVariable' + } + + } + + $scope.gridOptions.columnDefs = [ + { name: 'name' }, + { name: 'ipAddress'}, + { name: 'port'}, + { name: 'status'}, + { name:' ',cellTemplate: actionCellTemplate} + ]; + + + //$scope.gridOptions.data = $scope.vppList; - VppService.deleteVpp(vppObject, finished); + $scope.gridOptions.onRegisterApi = function(gridApi){ + $scope.gridApi = gridApi; }; - $scope.getVppList(); + $scope.$on('RELOAD_VPP_TABLE', function(event) { + $scope.gridOptions.data = $scope.vppList.map(function(item) { + item.subGridOptions = { + columnDefs: [ + { name:"Name", field:"name" }, + {name:"Mac Address", field: "phys-address"}, + {name:"Oper. Status", fiels: "oper-status"} + ], + data: item.interfaces + }; + + return item; + }); + }); + }]); - vpp.register.controller('TableController', ['$scope', '$rootScope','$filter', 'dataService', 'httpService', 'toastService', function ($scope, $rootScope, filter, dataService, httpService, toastService) { + 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); @@ -301,279 +354,95 @@ define(modules, function(vpp) { }; }]); - vpp.register.controller('InventoryController', function(dataService, $mdDialog, httpService, $location, toastService, $window) { + vpp.register.controller('BridgeDomainsController', function(dataService, $location, $mdDialog, toastService) { 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.nextApp.container(document.getElementById('bridge-domains-next-app')); + dataService.bridgeDomainsTopo.attach(dataService.nextApp); - 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(); + window.addEventListener('resize', function () { + if ($location.path() === '/bridgedomains') { + dataService.topo.adaptToContainer(); } - 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.bridgedomains = dataService.bridgedomains; + vm.selectedBd = dataService.selectedBd; - vm.deleteVpp = function() { - vm.waiting = true; - httpService.deleteVpp(vm.vpp.name, vm.finishedDeleting); - }; + dataService.bridgeDomainsTopo.on('clickNode',function(topo,node) { + console.log(node); + }); - //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.bdChanged = function() { + dataService.injectBridgeDomainsTopoElements(); + dataService.buildTableContent(); }; - 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.addBd = function() { + //show dialog + $mdDialog.show({ + controller: function() { + var vm = this; + vm.bd = {}; + vm.waiting = false; - 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 cancel button ( 'x' in the top right) is clicked + vm.close = function() { + $mdDialog.cancel(); + }; - //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.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.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; + vm.deploy = function() { - //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); + 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!'); - 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); - } - }; + //... removeBdFromOdl(vm.selectedBd.name, successCallback); + } + }; }); }); diff --git a/vbd/gui/module/src/main/resources/vpp/vpp.css b/vbd/gui/module/src/main/resources/vpp/vpp.css deleted file mode 100644 index 32ed57831..000000000 --- a/vbd/gui/module/src/main/resources/vpp/vpp.css +++ /dev/null @@ -1,3 +0,0 @@ -.n-topology-nav { - display: none; -} \ No newline at end of file diff --git a/vbd/gui/module/src/main/resources/vpp/vpp.module.js b/vbd/gui/module/src/main/resources/vpp/vpp.module.js index 04367de45..7d6ed8568 100644 --- a/vbd/gui/module/src/main/resources/vpp/vpp.module.js +++ b/vbd/gui/module/src/main/resources/vpp/vpp.module.js @@ -5,9 +5,12 @@ * terms of the Eclipse Public License v1.0 which accompanies this distribution, * and is available at http://www.eclipse.org/legal/epl-v10.html */ -define(['angularAMD', 'app/routingConfig', 'ui-bootstrap', 'Restangular', 'angular-animate', 'angular-aria', 'angular-material', 'angular-smart-table', 'angular-translate', 'angular-translate-loader-partial'], function() { +define(['angularAMD', 'app/routingConfig', 'ui-bootstrap', 'Restangular', 'angular-animate', 'angular-aria', + 'angular-material', 'angular-smart-table', 'angular-ui-grid', 'angular-translate', + 'angular-translate-loader-partial'], function() { - var vpp = angular.module('app.vpp', ['ui.router.state','app.core', 'ui.bootstrap', 'restangular', 'ngAnimate', 'ngAria', 'ngMaterial', 'smart-table', 'pascalprecht.translate']); + var vpp = angular.module('app.vpp', ['ui.router.state','app.core', 'ui.bootstrap', 'restangular', 'ngAnimate', + 'ngAria', 'ngMaterial', 'smart-table', 'ui.grid', 'ui.grid.expandable', 'pascalprecht.translate']); vpp.register = vpp; diff --git a/vbd/gui/module/src/main/resources/vpp/vpp.services.js b/vbd/gui/module/src/main/resources/vpp/vpp.services.js index 7f082ae1e..49337b109 100644 --- a/vbd/gui/module/src/main/resources/vpp/vpp.services.js +++ b/vbd/gui/module/src/main/resources/vpp/vpp.services.js @@ -30,344 +30,59 @@ define(['app/vpp/vpp.module', 'next'], function(vpp) { } }); - vpp.register.service('httpService', function($http, dataService, $log, toastService, $q) { - /* - this.requestVpps = function() { - $http.get(vppsUrl, { - headers: { - 'Content-Type': 'application/json', - "Authorization": "Basic " + btoa(username + ":" + password) - } - }).then(function successCallback(response) { - dataService.vpps = processVpps(response.data); - var counter = 0; - angular.forEach(dataService.vpps, function(vpp) { - counter++; - var isFinalInterfaceRequest = counter === dataService.vpps.length; - requestInterfaces(vpp, isFinalInterfaceRequest); - }); - }, function errorCallback(response) { - toastService.showToast('Error retrieving VPPs'); - $log.error(response); - }); - }; - - var requestInterfaces = function(vpp, isFinalInterfaceRequest) { - $http.get(interfacesUrl+vpp['node-id']+interfacesUri, { - headers: { - 'Content-Type': 'application/json', - "Authorization": "Basic " + btoa(username + ":" + password) - } - }).then(function successCallback(response) { - vpp.interfaces = response.data.interfaces.interface; - //------ - $http.get(operationalUrl+vpp['node-id']+operationalUri, { - headers: { - 'Content-Type': 'application/json', - "Authorization": "Basic " + btoa(username + ":" + password) - } - }).then(function successCallback(response) { - vpp.operational = response.data; - var interfaceStates = vpp.operational['ietf-interfaces:interfaces-state'].interface; - _.forEach(interfaceStates, function(interf) { - var matchedInterface = _.find(vpp.interfaces,{name: interf.name}); - if (matchedInterface) { - matchedInterface['oper-status'] = interf['oper-status']; - matchedInterface['admin-status'] = interf['admin-status']; - } - }); - if (isFinalInterfaceRequest) { - dataService.updateInventoryTopology(); - } - }, function errorCallback() { - $log.error('Error receiving interface states for '+vpp['node-id']); - }); - //------- - }, function errorCallback() { - $log.error('Error receiving interfaces for '+vpp['node-id']); - }); - }; - - var requestBridgeDomains = function() { - $http.get(bridgedomainsUrl, { - headers: { - 'Content-Type': 'application/json', - "Authorization": "Basic " + btoa(username + ":" + password) - } - }).then(function successCallback(response) { - dataService.setBridgeDomains(response.data["v3po:vpp-state"]); - // done loading... - dataService.requestsFinished(); - }, function errorCallback(response) { - toastService.showToast('Error retrieving Bridge Domains'); - $log.error(response); - }); - }; - - this.deploy = function() { - var errorOccurred = false; - - var success = function(succeeded, lastAssignment) { - if (!errorOccurred && !succeeded) { - toastService.showToast('Error deploying configuration!'); - errorOccurred = true; - } else if (!errorOccurred && succeeded && lastAssignment){ - toastService.showToast('Deployed! Bridge Domain Validated'); - } - }; - for (var x = 0; x < dataService.changedInterfaces.length; x++) { - this.updateAssignmentInODL(dataService.changedInterfaces[x], success, x === dataService.changedInterfaces.length - 1); - } - dataService.changedInterfaces.length = 0; - }; - - this.updateAssignmentInODL = function(interf, success, lastAssignment) { - var postData = { - "interface": [ - { - "name": interf.name, - "link-up-down-trap-enable": "disabled", - "v3po:ethernet": { - "mtu": interf['v3po:ethernet']['mtu'] - }, - "v3po:l2": { - "bridge-domain": interf['v3po:l2']['bridge-domain'], - "split-horizon-group": 0, - "bridged-virtual-interface": false - }, - "type": interf.type, - "description": "", - "enabled": true - } - ] - }; - $http.put(interfacesConfigUrl + encodeURIComponent(interf.name), postData, { - headers: { - 'Content-Type': 'application/yang.data+json', - "Authorization": "Basic " + btoa(username + ":" + password) - } - }).then(function successCallback(response) { - //... - success(true, lastAssignment); - }, function errorCallback(response) { - success(false, lastAssignment); - $log.error(response); - }); - }; - - - this.addBdToODL = function(bdName, isDone) { - var putData = { - "bridge-domain": [ - { - "name": bdName, - "flood": "true", - "forward": "true", - "learn": "true", - "unknown-unicast-flood": "true", - "arp-termination": "false" - } - ] - }; - $http.put(newBridgeDomainUrl+bdName, putData, - { - headers: { - 'Content-Type': 'application/yang.data+json', - "Authorization": "Basic " + btoa(username + ":" + password) - } - }).then(function successCallback() { - toastService.showToast('Bridge Domain Added!'); - isDone('success'); - }, function errorCallback(response) { - $log.error(response); - toastService.showToast('Error adding Bridge Domain.'); - isDone('failure'); - }); - }; - - this.updateInterface = function(interf, isWaiting, cancel, success) { - $http.get(interfacesOperUrl + encodeURIComponent(interf.name), { - headers: { - 'Content-Type': 'application/json', - "Authorization": "Basic " + btoa(username + ":" + password) - } - }).then(function successCallback(r) { - var receivedData = r.data.interface[0]; - var postData = { - "interface": [ - { - "name": receivedData.name, - "link-up-down-trap-enable": "disabled", - "v3po:ethernet": { - "mtu": receivedData['v3po:ethernet']['mtu'] - }, - "v3po:l2": { - "bridge-domain": receivedData['v3po:l2']['bridge-domain'], - "split-horizon-group": 0, - "bridged-virtual-interface": false - }, - "type": receivedData.type, - "description": interf.description, - "enabled": interf['admin-status'] === 'up' ? true : false - } - ] - }; - $http.put(interfacesConfigUrl + encodeURIComponent(interf.name), postData, - { - headers: { - 'Content-Type': 'application/yang.data+json', - "Authorization": "Basic " + btoa(username + ":" + password) - } - }).then(function successCallback() { - toastService.showToast('Updated!'); - isWaiting = false; - success(); - }, function errorCallback(response) { - $log.error(response); - toastService.showToast('Error updating'); - isWaiting = false; - cancel(); - }); - }, function errorCallback(response) { - $log.error(response); - toastService.showToast('Error updating'); - isWaiting = false; - cancel(); - }); - }; - - this.removeBdFromOdl = function(name,success) { - $http.delete(newBridgeDomainUrl+name, { - headers: { - 'Content-Type': 'application/json', - "Authorization": "Basic " + btoa(username + ":" + password) - } - }) - .then(function successCallback() { - success(true); - }, function errorCallback() { - success(false); - }); - }; - - this.configVpp = function(name,ip,port,un,pw,finishedSuccessfullyCallback) { - - var putData = '\ - \ - prefix:sal-netconf-connector\ - '+name+'\ -
'+ip+'
\ - '+port+'\ - '+un+'\ - '+pw+'\ - false\ - \ - prefix:netty-event-executor\ - global-event-executor\ - \ - \ - prefix:binding-broker-osgi-registry\ - binding-osgi-broker\ - \ - \ - prefix:dom-broker-osgi-registry\ - dom-broker\ - \ - \ - prefix:netconf-client-dispatcher\ - global-netconf-dispatcher\ - \ - \ - prefix:threadpool\ - global-netconf-processing-executor\ - \ - '; - - $http.put(configVpp+name, putData, { - headers: { - "Accept": 'application/xml', - "Content-Type": 'application/xml', - "Authorization": "Basic " + btoa(username + ":" + password) - } - }).then(function successCallback(response) { - //... - finishedSuccessfullyCallback(true); - }, function errorCallback(response) { - finishedSuccessfullyCallback(false); - $log.error(response); - }); - }; - - this.deleteVpp = function(name, finishedSuccessfullyCallback) { - $http.delete(configVpp+name, { - headers: { - "Accept": 'application/xml', - "Content-Type": 'application/xml', - "Authorization": "Basic " + btoa(username + ":" + password) - } - }).then(function successCallback(response) { - //... - finishedSuccessfullyCallback(true); - }, function errorCallback(response) { - finishedSuccessfullyCallback(false); - $log.error(response); - }); */ - }); - vpp.register.service('dataService', function() { 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); -/* - var Topo = function() { - return new nx.graphic.Topology({ - adaptive:true, - 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'; - } + + this.bridgeDomainsTopo = 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; - } + } + }, + linkConfig: { + label: 'model.label', + linkType: 'parallel', + color: function(link) { + if (link.getData().type === 'tunnel') { + return '#00FF00'; + } else { + return '#414040'; } }, - showIcon: true, - dataProcessor: 'force', - autoLayout: true, - enableSmartNode: false, - tooltipManagerConfig: { - nodeTooltipContentClass: 'TooltipNode', - linkTooltipContentClass: 'TooltipLink' + width: function(link) { + if (link.getData().type === 'tunnel') { + return 5; + } } - }); - }; + }, + showIcon: true, + dataProcessor: 'force', + autoLayout: true, + enableSmartNode: false, + tooltipManagerConfig: { + nodeTooltipContentClass: 'TooltipNode', + linkTooltipContentClass: 'TooltipLink' + } + }); + this.nextApp = new nx.ui.Application; - this.bridgeDomainsTopo = Topo(); this.vpps = []; this.tableContent = []; @@ -440,7 +155,7 @@ define(['app/vpp/vpp.module', 'next'], function(vpp) { this.interfaces[x].assigned = true; } } - }; */ + }; }); -- cgit 1.2.3-korg