From f5e3e98d5c14252db91b8642028728553b43baca Mon Sep 17 00:00:00 2001 From: Varun Seereeram Date: Sun, 7 Feb 2016 02:59:07 -0800 Subject: Inventory rework - ui-grid replaces by smart-table - dark theme setted - orange buttons added Change-Id: I2afe3231a1e889a1d23056242167cad65cbfae11 Signed-off-by: Daniel Malachovsky Signed-off-by: Varun Seereeram --- .../resources/OSGI-INF/blueprint/blueprint.xml | 1 - .../src/main/resources/vpp/assets/css/vpp.css | 34 +++++++++++++ vbd/gui/module/src/main/resources/vpp/bower.json | 3 +- .../resources/vpp/controllers/bdm.controller.js | 27 +++++------ .../vpp/controllers/inventory.controller.js | 6 +++ .../resources/vpp/views/bridge-domains.tpl.html | 14 +++--- .../resources/vpp/views/inventory-table.tpl.html | 55 +++++++++++----------- .../module/src/main/resources/vpp/vpp.module.js | 6 +-- 8 files changed, 90 insertions(+), 56 deletions(-) (limited to 'vbd') 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 5812bcf70..265cd7538 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,7 +13,6 @@ 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 b196bcd70..bd03a8baa 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 @@ -107,3 +107,37 @@ 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; } + +.st-sort-ascent:after{ + content: '\25B2'; +} + +.st-sort-descent:after{ + content: '\25BC'; +} + +.st-sort-ascent:before{ + content: none; +} + +.st-sort-descent:before{ + content: none; +} + +button span { + color: orange !important; +} + +button.md-raised.md-button { + background-color: orange !important; +} + +button.md-raised.md-button span{ + color: black !important; +} + + + +a.md-button.md-default-theme.md-raised, a.md-button.md-raised, .md-button.md-default-theme.md-raised, .md-button.md-raised { + background-color: #424242 !important; +} diff --git a/vbd/gui/module/src/main/resources/vpp/bower.json b/vbd/gui/module/src/main/resources/vpp/bower.json index 441b933b6..f317fb1ae 100644 --- a/vbd/gui/module/src/main/resources/vpp/bower.json +++ b/vbd/gui/module/src/main/resources/vpp/bower.json @@ -28,8 +28,7 @@ "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.7", - "angular-ui-grid": "~3.1.0" + "angular-smart-table": "~2.1.7" }, "resolutions": { "angular": "1.4.9" 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 b49fe8af8..d8fe8ea0f 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 @@ -47,8 +47,7 @@ define(['app/vpp/vpp.module'], function(vpp) { }); }; - /*var vm = this; - vm.dataService = dataService; + $scope.dataService = dataService; dataService.nextApp.container(document.getElementById('bridge-domains-next-app')); dataService.bridgeDomainsTopo.attach(dataService.nextApp); @@ -59,19 +58,19 @@ define(['app/vpp/vpp.module'], function(vpp) { } }); - vm.bridgedomains = dataService.bridgedomains; - vm.selectedBd = dataService.selectedBd; + $scope.bridgedomains = dataService.bridgedomains; + $scope.selectedBd = dataService.selectedBd; dataService.bridgeDomainsTopo.on('clickNode',function(topo,node) { console.log(node); }); - vm.bdChanged = function() { + $scope.bdChanged = function() { dataService.injectBridgeDomainsTopoElements(); dataService.buildTableContent(); }; - vm.addBd = function() { + $scope.addBd = function() { //show dialog $mdDialog.show({ controller: function() { @@ -111,20 +110,20 @@ define(['app/vpp/vpp.module'], function(vpp) { - vm.deploy = function() { + $scope.deploy = function() { }; - vm.removeBd = function() { - if(vm.selectedBd.name) { + $scope.removeBd = function() { + if($scope.selectedBd.name) { var successCallback = function(success) { if (success) { - console.log(vm.bridgedomains); - _.remove(vm.bridgedomains, { - name: vm.selectedBd.name + console.log($scope.bridgedomains); + _.remove($scope.bridgedomains, { + name: $scope.selectedBd.name }); toastService.showToast('Bridge Domain Removed!'); - vm.selectedBd.name = ''; + $scope.selectedBd.name = ''; dataService.clearInjectedInterfacesInBridgeDomainTopo(); dataService.injectBdIntoBridgeDomainsTopo(); dataService.tableContent.length = 0; @@ -137,6 +136,6 @@ define(['app/vpp/vpp.module'], function(vpp) { //... 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 8d85cc704..c579796e2 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 @@ -18,6 +18,8 @@ define(['app/vpp/vpp.module'], function(vpp) { // success callback function(data) { $scope.vppList = data; + $scope.displayVppList = [].concat($scope.vppList); + $scope.$broadcast('RELOAD_VPP_TABLE'); }, // error callback @@ -29,6 +31,10 @@ 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) { 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 d92873afe..263fc0949 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,16 +1,14 @@
- -
-
-
+
+
- - {{bd.name}} + + {{bd.name}} Add BD - Remove BD + Remove BD @@ -35,7 +33,7 @@
- Deploy + Deploy
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 4f15332de..3335ad395 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,32 +1,31 @@
Mount VPP Reload VPPs - - -
-
-
+ + + + + + + + + + + + + + + + + + + + + +
VPP NameIP AddressPortConnection StatusActions
{{vpp.name}}{{vpp.ipAddress}}{{vpp.port}}{{vpp.status}} + View Topology + Edit + Delete +
+
\ 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 56a1852de..712db65d5 100644 --- a/vbd/gui/module/src/main/resources/vpp/vpp.module.js +++ b/vbd/gui/module/src/main/resources/vpp/vpp.module.js @@ -6,11 +6,11 @@ * 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-ui-grid', 'angular-translate', + 'angular-material', 'angular-smart-table', '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', 'ui.grid', 'ui.grid.expandable', 'pascalprecht.translate']); + 'ngAria', 'ngMaterial', 'smart-table', 'pascalprecht.translate']); vpp.register = vpp; @@ -102,7 +102,7 @@ define(['angularAMD', 'app/routingConfig', 'ui-bootstrap', 'Restangular', 'angul 'contrastLightColors': undefined // could also specify this if default was 'dark' }); - $mdThemingProvider.theme('default') + $mdThemingProvider.theme('default').dark() .primaryPalette('odl-gray',{ 'default': '500' }) -- cgit 1.2.3-korg