diff options
author | Varun Seereeram <vseereer@cisco.com> | 2016-02-07 02:59:07 -0800 |
---|---|---|
committer | Daniel Malachovsky <daniel.malachovsky@pantheon.sk> | 2016-02-07 18:48:11 +0000 |
commit | f5e3e98d5c14252db91b8642028728553b43baca (patch) | |
tree | e649a4dc6fc326bd2f39475d6ca359d96b322952 | |
parent | df53da6e0a476db6c0e46b9d5e6c2b5d620c600a (diff) |
Inventory rework
- ui-grid replaces by smart-table
- dark theme setted
- orange buttons added
Change-Id: I2afe3231a1e889a1d23056242167cad65cbfae11
Signed-off-by: Daniel Malachovsky <daniel.malachovsky@pantheon.sk>
Signed-off-by: Varun Seereeram <vseereer@cisco.com>
8 files changed, 90 insertions, 56 deletions
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 @@ <list> <value>src/app/vpp/assets/css/next.css</value> <value>src/app/vpp/bower_components/angular-material/angular-material.min.css</value> - <value>src/app/vpp/bower_components/angular-ui-grid/ui-grid.css</value> <value>src/app/vpp/assets/css/vpp.css</value> </list> </property> 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 @@ <div ng-controller="BridgeDomainsController"> - <md-progress-linear md-mode="indeterminate" ng-if="BridgeDomainsController.dataService.loading"></md-progress-linear> - <div layout="row" layout-xs="column" style="height:100%"> - <div id="bridge-domains-next-app" style="height: 100%; width: 50%" flex></div> - <div class="md-sidenav-left md-whiteframe-z2" style="background-color: white" flex> + <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> <md-content layout-padding ng-controller="TableController as TableCtrl"> <md-input-container style="margin-right: 5px;" layout="row"> - <md-select ng-model='BridgeDomainsController.selectedBd.name' placeholder="Select BD" ng-change="BridgeDomainsController.bdChanged()" style="width: 100%;"> - <md-option ng-repeat="bd in BridgeDomainsController.bridgedomains" value="{{bd.name}}">{{bd.name}}</md-option> + <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-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="BridgeDomainsController.removeBd()" style="width: 35%;" ng-if="BridgeDomainsController.dataService.injectedInterfaces.length===0 && BridgeDomainsController.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">Remove BD</md-button> </md-input-container> <table st-table="TableCtrl.displayedCollection" class="table table-striped" st-safe-src="TableCtrl.rowCollection"> @@ -35,7 +33,7 @@ </tbody> </table> <!--<md-input-container style="bottom: 10px">--> - <md-button class="md-raised" md-no-ink ng-click="BridgeDomainsController.deploy()" style="width: 94%;position: fixed;" ng-if="BridgeDomainsController.dataService.changedInterfaces.length">Deploy</md-button> + <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-input-container>--> </md-content> </div> 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 @@ <div ng-controller="InventoryTableController"> <md-button ng-click="addVppShowForm()">Mount VPP</md-button> <md-button ng-click="getVppList()">Reload VPPs</md-button> - <!--FIXME: decide which element to use, if static, or ui-grid--> - <!--<table class="footable"> - <thead> - <tr> - <th>VPP Name</th> - <th>IP Address</th> - <th>Port</th> - <th>Connection Status</th> - <th>Actions</th> - </tr> - </thead> - <tbody> - <tr ng-repeat="vpp in vppList"> - <td>{{vpp.name}}</td> - <td>{{vpp.ipAddress}}</td> - <td>{{vpp.port}}</td> - <td>{{vpp.status}}</td> - <td> - <md-button ng-click="viewTopology(vpp)">View Topology</md-button> - <md-button ng-click="editVppShowForm(vpp)" ng-hide="vpp.status === 'connected'">Edit</md-button> - <md-button ng-click="deleteVpp(vpp)" >Delete</md-button> - </td> - </tr> - </tbody> - </table>--> - <div ng-controller="InventoryTableDefinitonController" class="black"> - <div ui-grid="gridOptions" ui-grid-expandable class="grid"></div> - </div> + + <md-content layout-padding> + <table st-table="displayVppList" st-safe-src="vppList" class="table table-striped"> + <thead> + <tr> + <th st-sort="name">VPP Name</th> + <th st-sort="ipAddress">IP Address</th> + <th st-sort="port">Port</th> + <th st-sort="status">Connection Status</th> + <th>Actions</th> + </tr> + </thead> + <tbody> + <tr ng-repeat="vpp in displayVppList"> + <td>{{vpp.name}}</td> + <td>{{vpp.ipAddress}}</td> + <td>{{vpp.port}}</td> + <td>{{vpp.status}}</td> + <td> + <md-button ng-click="viewTopology(vpp)">View Topology</md-button> + <md-button ng-click="editVppShowForm(vpp)" ng-hide="vpp.status === 'connected'">Edit</md-button> + <md-button ng-click="deleteVpp(vpp)" >Delete</md-button> + </td> + </tr> + </tbody> + </table> + </md-content> </div>
\ 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' }) |