summaryrefslogtreecommitdiffstats
path: root/vbd/gui
diff options
context:
space:
mode:
authorDaniel Malachovsky <daniel.malachovsky@pantheon.sk>2016-02-09 20:16:14 +0100
committerDave Wallace <dwallacelf@gmail.com>2016-02-09 22:03:21 +0000
commit514939ff19a8838e45934f90af039fbeea12fd40 (patch)
tree1bd242504dc8ecf862c66a0abefd4775ccde71b4 /vbd/gui
parent5aa62ee7d2be070b2ffef0443b59c8891ed06845 (diff)
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>
Diffstat (limited to 'vbd/gui')
-rw-r--r--vbd/gui/module/src/main/resources/vpp/assets/css/vpp.css36
-rw-r--r--vbd/gui/module/src/main/resources/vpp/controllers/bdm.controller.js4
-rw-r--r--vbd/gui/module/src/main/resources/vpp/controllers/inventory.controller.js43
-rw-r--r--vbd/gui/module/src/main/resources/vpp/controllers/vpp.controller.js10
-rw-r--r--vbd/gui/module/src/main/resources/vpp/services/inventory.service.js2
-rw-r--r--vbd/gui/module/src/main/resources/vpp/services/vpp.services.js2
-rw-r--r--vbd/gui/module/src/main/resources/vpp/views/bridge-domains.tpl.html4
-rw-r--r--vbd/gui/module/src/main/resources/vpp/views/inventory-detail.tpl.html33
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>