summaryrefslogtreecommitdiffstats
path: root/vbd/gui/module/src
diff options
context:
space:
mode:
authorVarun Seereeram <vseereer@cisco.com>2016-02-07 02:59:07 -0800
committerDaniel Malachovsky <daniel.malachovsky@pantheon.sk>2016-02-07 18:48:11 +0000
commitf5e3e98d5c14252db91b8642028728553b43baca (patch)
treee649a4dc6fc326bd2f39475d6ca359d96b322952 /vbd/gui/module/src
parentdf53da6e0a476db6c0e46b9d5e6c2b5d620c600a (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>
Diffstat (limited to 'vbd/gui/module/src')
-rw-r--r--vbd/gui/module/src/main/resources/vpp/assets/css/vpp.css34
-rw-r--r--vbd/gui/module/src/main/resources/vpp/bower.json3
-rw-r--r--vbd/gui/module/src/main/resources/vpp/controllers/bdm.controller.js27
-rw-r--r--vbd/gui/module/src/main/resources/vpp/controllers/inventory.controller.js6
-rw-r--r--vbd/gui/module/src/main/resources/vpp/views/bridge-domains.tpl.html14
-rw-r--r--vbd/gui/module/src/main/resources/vpp/views/inventory-table.tpl.html55
-rw-r--r--vbd/gui/module/src/main/resources/vpp/vpp.module.js6
7 files changed, 90 insertions, 55 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 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'
})