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'
         })