diff options
Diffstat (limited to 'vbd/gui/module')
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> |