Design changes p. 1

- fixed some design flaws
- added tunnel table into inventory detail
- added filter to remove vxlan_tunnel from interfaces list in bd mnager

Change-Id: Ia9f0ca737d062ed2ed57734561dbece34d20b7c3
Signed-off-by: Daniel Malachovsky <daniel.malachovsky@pantheon.sk>

8 files changed, 100 insertions, 34 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 2566d90cb..2aa42ff79 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
@@ -170,6 +170,7 @@ a.md-button.md-warn[disabled], .md-button.md-default-theme[disabled], .md-button
 .table > tbody > tr > td,
 .table > tfoot > tr > td {
     vertical-align: middle;
+    border-top: 1px solid rgba(221, 221, 221, 0.6);
 }
 
 .table > thead > tr > th.interactive {
@@ -213,13 +214,18 @@ select:-webkit-autofill {
 }
 
 md-select-menu.md-default-theme,
-md-select-menu md-option[selected] {
+md-select-menu md-option[selected] div.md-text {
     color: orange;
 }
 
-/*tab overrides*/
-md-tab.md-active {
+md-select.md-default-theme,
+md-select .md-select-value {
+    border-bottom-color: orange;
+}
+
+md-select .md-select-value span {
     color: orange;
+}
 
 md-input-container label {
     color: white !important;
@@ -229,6 +235,24 @@ md-input-container.md-input-focused label {
     color: orange !important;
 }
 
-md-option div.md-text {
-    color: orange !important;
-}
\ No newline at end of file
+md-option[selected] div.md-text {
+    color: orange;
+}
+
+md-option div.md-text:hover {
+    color: orange;
+}
+
+md-select.md-default-theme:not([disabled]):focus,
+md-select:not([disabled]):focus .md-select-value {
+    color: orange;
+}
+
+md-ripple-container {
+
+}
+
+/*tab overrides*/
+md-tab-item.md-active {
+    color: orange;
+}
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 e5ad012fa..7c24690c5 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
@@ -182,7 +182,7 @@ define(['app/vpp/vpp.module'], function(vpp) {
 
 
             /* FIXME: remove after testing */
-            /*$scope.deploy = function() {
+            $scope.deploy = function() {
                 var successfulRequestsRequired = dataService.changedInterfaces.length;
                 var successfulRequests = 0;
 
@@ -253,7 +253,7 @@ define(['app/vpp/vpp.module'], function(vpp) {
                         successfulRequests++;
                     }
                 });
-            };*/
+            };
 
             $scope.removeBd = function() {
                 if(dataService.selectedBd.name) {
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 7f2a4ec0c..b1797534a 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
@@ -20,7 +20,7 @@ define(['app/vpp/vpp.module'], function(vpp) {
                         $scope.vppList = data;
                         $scope.displayVppList = [].concat($scope.vppList);
                         dataService.vpps = $scope.vppList;
-
+console.log($scope.vppList);
                         $scope.$broadcast('RELOAD_VPP_TABLE');
 
                         //for vppList access in BDM
@@ -222,28 +222,31 @@ define(['app/vpp/vpp.module'], function(vpp) {
                 $scope.app.container(document.getElementById('next-vpp-topo'));
                 $scope.topo.attach($scope.app);
 
-                $scope.$watch('selectedVpp', function() {
-                    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});
-                    });
-
-                    $scope.topo.data({
-                        nodes: nodes,
-                        links: links
-                    });
+            };
+
+            $scope.fillTopologyData = function(vpp) {
+                var nodes = [].concat(vpp);
+                var links = [];
+                vpp.type  = 'vpp';
+                vpp.label = vpp.name;
+
+                _.forEach(vpp.interfaces, function(interf, index){
+                    interf.label = interf.name;
+                    interf.scale = 0.5;
+                    nodes.push(interf);
+                    links.push({source: 0, target: index + 1});
+                });
+
+                $scope.topo.data({
+                    nodes: nodes,
+                    links: links
                 });
             };
 
+            $scope.$watch('selectedVpp', function() {
+                $scope.fillTopologyData($scope.selectedVpp);
+            });
+
             $scope.viewTopology($scope.selectedVpp);
 
         }]);
diff --git a/vbd/gui/module/src/main/resources/vpp/controllers/vpp.controller.js b/vbd/gui/module/src/main/resources/vpp/controllers/vpp.controller.js
index 2d968f757..16ce20402 100644
--- a/vbd/gui/module/src/main/resources/vpp/controllers/vpp.controller.js
+++ b/vbd/gui/module/src/main/resources/vpp/controllers/vpp.controller.js
@@ -45,6 +45,16 @@ define(modules, function(vpp) {
                 $scope.$broadcast('RELOAD_SELECTED_VPP');
             };
 
+            // filter used in inventory to filter interfaceList of vxlan_tunnel interfaces
+            $scope.filterRemoveVxlanIf = function (item) {
+                return item.name.indexOf('vxlan') !== 0;
+            };
+
+            // filter used in inventory to return vxlan_tunnel interfaces
+            $scope.filterGetVxlanIf = function (item) {
+                return item.name.indexOf('vxlan') === 0;
+            };
+
 	}]);
 
 
diff --git a/vbd/gui/module/src/main/resources/vpp/services/inventory.service.js b/vbd/gui/module/src/main/resources/vpp/services/inventory.service.js
index d6d27544f..6181ce678 100644
--- a/vbd/gui/module/src/main/resources/vpp/services/inventory.service.js
+++ b/vbd/gui/module/src/main/resources/vpp/services/inventory.service.js
@@ -49,7 +49,7 @@ define(['app/vpp/vpp.module', 'next'], function(vpp) {
                                     vppList.push(vppObj);
                                 },
                                 function() {
-                                    console.warn('blabla');
+                                    console.warn('error');
                                 }
                             )
                         }
diff --git a/vbd/gui/module/src/main/resources/vpp/services/vpp.services.js b/vbd/gui/module/src/main/resources/vpp/services/vpp.services.js
index 4c20f844e..1e9d20b23 100644
--- a/vbd/gui/module/src/main/resources/vpp/services/vpp.services.js
+++ b/vbd/gui/module/src/main/resources/vpp/services/vpp.services.js
@@ -62,7 +62,7 @@ define(['app/vpp/vpp.module', 'next'], function(vpp) {
                     if (link.getData().type === 'tunnel') {
                         return '#00FF00';
                     } else {
-                        return '#414040';
+                        return '#ffffff';
                     }
                 },
                 width: function(link) {
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 806097346..ab4d83dfb 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,7 +1,7 @@
 <div ng-controller="BridgeDomainsController">
     <div layout="row" layout-xs="column" style="height: 550px; width: 100%">
         <div id="bridge-domains-next-app" style="height: 550px; width: 60%"></div>
-        <div class="md-sidenav-left md-whiteframe-z2" style="height: 550px; background-color: #414042; overflow: scroll" flex>
+        <div class="md-sidenav-left md-whiteframe-z2" style="height: 550px; background-color: #414042; overflow-y: scroll" flex>
             <md-content layout-padding ng-controller="TableController as TableCtrl">
                 <md-input-container style="margin-right: 5px;" layout="row">
                 <md-select ng-model='selectedBd.name' placeholder="Select BD" ng-change="bdChanged()" style="width: 100%;">
@@ -23,7 +23,7 @@
                     </tr>
                     </thead>
                     <tbody>
-                    <tr ng-repeat="row in TableCtrl.displayedCollection">
+                    <tr ng-repeat="row in TableCtrl.displayedCollection | filter: filterRemoveVxlanIf">
                         <div ng-hide="row.hidden">
                             <td>
                                 <md-switch ng-model="row.assigned" aria-label="Assign Switch" ng-change="TableCtrl.updateAssignment(row);">
diff --git a/vbd/gui/module/src/main/resources/vpp/views/inventory-detail.tpl.html b/vbd/gui/module/src/main/resources/vpp/views/inventory-detail.tpl.html
index 1fc3fa617..9d08cf67d 100644
--- a/vbd/gui/module/src/main/resources/vpp/views/inventory-detail.tpl.html
+++ b/vbd/gui/module/src/main/resources/vpp/views/inventory-detail.tpl.html
@@ -11,7 +11,12 @@
         <!-- right aligned detail -->
         <div class="md-sidenav-left md-whiteframe-z2" flex layout-margin>
             <md-content layout-padding>
-                <h3>VPP Detail</h3>
+                <div style="float: left">
+                    <h3>VPP Detail</h3>
+                </div>
+                <div style="float: right">
+                    <md-button ng-click="setMainView('inventory')" class="md-raised">Back to VPP List</md-button>
+                </div>
 
                 <table class="table table-striped">
                     <tbody>
@@ -37,6 +42,30 @@
                     </tr>
                     </tbody>
                 </table>
+
+                <div style="float: left">
+                    <h3>VXLAN Tunnel</h3>
+                </div>
+                <table st-table="displayInterfaceList" st-safe-src="selectedVpp.interfaces" class="table table-striped">
+                    <thead>
+                    <tr>
+                        <th st-sort="name" class="interactive">Name</th>
+                        <th st-sort="oper-status" class="interactive" >Oper Status</th>
+                        <th st-sort="admin-status" class="interactive">Admin Status</th>
+                        <th st-sort="v3po:vxlan.src" class="interactive">Source IP</th>
+                        <th st-sort="v3po:vxlan.src" class="interactive">Destination IP</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr ng-repeat="interface in displayInterfaceList | filter: filterGetVxlanIf">
+                        <td>{{interface.name}}</td>
+                        <td>{{interface['admin-status']}}</td>
+                        <td>{{interface['phys-address']}}</td>
+                        <td>{{interface['v3po:vxlan'].src}}</td>
+                        <td>{{interface['v3po:vxlan'].dst}}</td>
+                    </tr>
+                    </tbody>
+                </table>
             </md-content>
         </div>
     </div>
@@ -56,7 +85,7 @@
                         </tr>
                     </thead>
                     <tbody>
-                        <tr ng-repeat="interface in displayInterfaceList">
+                        <tr ng-repeat="interface in displayInterfaceList | filter: filterRemoveVxlanIf">
                             <td>{{interface.name}}</td>
                             <td>{{interface['oper-status']}}</td>
                             <td>{{interface['admin-status']}}</td>