diff options
Diffstat (limited to 'vbd/gui/module/src/main/resources/vpp/views')
4 files changed, 129 insertions, 34 deletions
diff --git a/vbd/gui/module/src/main/resources/vpp/views/index.tpl.html b/vbd/gui/module/src/main/resources/vpp/views/index.tpl.html index add7f7854..72115cf7b 100644 --- a/vbd/gui/module/src/main/resources/vpp/views/index.tpl.html +++ b/vbd/gui/module/src/main/resources/vpp/views/index.tpl.html @@ -1,5 +1,19 @@ <div ng-controller="vppCtrl"> - <md-toolbar> + <md-tabs md-dynamic-height md-border-bottom> + <md-tab label="Inventory" md-on-select="setMainView('inventory')"> + <md-content class="md-padding"> + <section ng-if="mainView === 'inventory'" ng-include src="view_path+'inventory-table.tpl.html'"></section> + <section ng-if="mainView === 'inventoryDetail'" ng-include src="view_path+'inventory-detail.tpl.html'"></section> + </md-content> + </md-tab> + <md-tab label="Bridge Domains" md-on-select="setMainView('bridgeDomains')"> + <md-content class="md-padding"> + <section ng-if="mainView === 'bridgeDomains'" ng-include src="view_path+'bridge-domains.tpl.html'"></section> + </md-content> + </md-tab> + </md-tabs> + + <!--<md-toolbar> <div class="md-toolbar-tools float-left"> <span flex></span> <md-button ng-click="setMainView('inventory')">Inventory</md-button> @@ -10,7 +24,8 @@ </md-toolbar> <div ng-view style="height: 100%"> - <section ng-if="mainView === 'inventory'" ng-include src="view_path+'inventory-table.tpl.html'"></section> - <section ng-if="mainView === 'bridgeDomains'" ng-include src="view_path+'bridge-domains.tpl.html'"></section> - </div> + + + + </div>--> </div>
\ No newline at end of file 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 new file mode 100644 index 000000000..1fc3fa617 --- /dev/null +++ b/vbd/gui/module/src/main/resources/vpp/views/inventory-detail.tpl.html @@ -0,0 +1,70 @@ +<div ng-controller="InventoryDetailController"> + <div layout="row" layout-xs="column"> + <!-- Topology --> + <div class="md-whiteframe-z2" flex="60" layout-margin> + <md-content layout-padding> + <h3>Topology</h3> + <div id="next-vpp-topo"></div> + </md-content> + </div> + + <!-- right aligned detail --> + <div class="md-sidenav-left md-whiteframe-z2" flex layout-margin> + <md-content layout-padding> + <h3>VPP Detail</h3> + + <table class="table table-striped"> + <tbody> + <tr> + <td><b>VPP Name</b></td> + <td> + <md-select ng-model='selectedVpp' placeholder="Select VPP" ng-change="selectVpp(vpp)"> + <md-option ng-repeat="vpp in vppList" ng-value="vpp">{{vpp.name}}</md-option> + </md-select> + </td> + </tr> + <tr> + <td><b>IP Address</b></td> + <td>{{selectedVpp.ipAddress}}</td> + </tr> + <tr> + <td><b>Port</b></td> + <td>{{selectedVpp.port}}</td> + </tr> + <tr> + <td><b>Connection Status</b></td> + <td>{{selectedVpp.status}}</td> + </tr> + </tbody> + </table> + </md-content> + </div> + </div> + + <div layout="row" flex="100" layout-margin> + <!-- interfaces list --> + <div class="md-whiteframe-z2" flex="100"> + <md-content layout-padding> + <h3>Interface list</h3> + <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="phys-address" class="interactive">MAC Address</th> + </tr> + </thead> + <tbody> + <tr ng-repeat="interface in displayInterfaceList"> + <td>{{interface.name}}</td> + <td>{{interface['oper-status']}}</td> + <td>{{interface['admin-status']}}</td> + <td>{{interface['phys-address']}}</td> + </tr> + </tbody> + </table> + </md-content> + </div> + </div> +</div>
\ No newline at end of file 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 3335ad395..ab62c75c3 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,31 +1,41 @@ <div ng-controller="InventoryTableController"> - <md-button ng-click="addVppShowForm()">Mount VPP</md-button> - <md-button ng-click="getVppList()">Reload VPPs</md-button> + <div layout="row" flex="100" layout-margin> + <div class="md-whiteframe-z2 flex"> + <md-content layout-padding> + <div style="float: left"> + <h3>VPP List</h3> + </div> + <div style="float: right"> + <md-button ng-click="addVppShowForm()" class="md-raised">Mount VPP</md-button> + <md-button ng-click="getVppList()" class="md-raised">Reload VPPs</md-button> + </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> + <table st-table="displayVppList" st-safe-src="vppList" class="table table-striped"> + <thead> + <tr> + <th st-sort="name" class="interactive">VPP Name</th> + <th st-sort="ipAddress" class="interactive">IP Address</th> + <th st-sort="port" class="interactive">Port</th> + <th st-sort="status" class="interactive">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)" class="md-accent">View Topology</md-button>--> + <md-button ng-click="selectVpp(vpp); setMainView('inventoryDetail')" >Detail</md-button> + <md-button ng-click="editVppShowForm(vpp)" ng-disabled="vpp.status === 'connected'" class="md-accent">Edit</md-button> + <md-button ng-click="deleteVpp(vpp)" class="md-accent">Delete</md-button> + </td> + </tr> + </tbody> + </table> + </md-content> + </div> + </div> </div>
\ No newline at end of file diff --git a/vbd/gui/module/src/main/resources/vpp/views/new-vpp-dialog.html b/vbd/gui/module/src/main/resources/vpp/views/new-vpp-dialog.html index 39178716d..bd502b31c 100644 --- a/vbd/gui/module/src/main/resources/vpp/views/new-vpp-dialog.html +++ b/vbd/gui/module/src/main/resources/vpp/views/new-vpp-dialog.html @@ -58,8 +58,8 @@ <md-progress-linear md-mode="indeterminate" ng-show="NewVppDialogCtrl.waiting"></md-progress-linear> <md-dialog-actions layout="row"> <span flex></span> - <md-button ng-click="NewVppDialogCtrl.updateConfig();" style="margin-right:20px;" class="md-accent"> - <span style="color: black">Mount</span> + <md-button ng-click="NewVppDialogCtrl.updateConfig();" style="margin-right:20px;" class="md-raised"> + <span>Mount</span> </md-button> </md-dialog-actions> </form> |