1 <div ng-controller="InventoryDetailController">
2 <div layout="row" layout-xs="column">
4 <div class="md-whiteframe-z2" flex="60" layout-margin>
5 <md-content layout-padding>
6 <h3>Vpp and Interfaces</h3>
7 <div id="next-vpp-topo"></div>
11 <!-- right aligned detail -->
12 <div class="md-sidenav-left md-whiteframe-z2" flex layout-margin>
13 <md-content layout-padding>
14 <div style="float: left">
17 <div style="float: right">
18 <md-button ng-click="setMainView('inventory')" class="md-raised">Back to VPP List</md-button>
21 <table class="table table-striped">
24 <td><b>VPP Name</b></td>
26 <md-select ng-model='selectedVpp' placeholder="Select VPP" ng-change="selectVpp(vpp)">
27 <md-option ng-repeat="vpp in vppList" ng-value="vpp">{{vpp.name}}</md-option>
32 <td><b>IP Address</b></td>
33 <td>{{selectedVpp.ipAddress}}</td>
37 <td>{{selectedVpp.port}}</td>
40 <td><b>Connection Status</b></td>
41 <td>{{selectedVpp.status}}</td>
46 <div style="float: left">
49 <table st-table="displayInterfaceList" st-safe-src="selectedVpp.interfaces" class="table table-striped">
52 <th st-sort="name" class="interactive">Name</th>
53 <th st-sort="oper-status" class="interactive" >Oper Status</th>
54 <th st-sort="admin-status" class="interactive">Admin Status</th>
55 <th st-sort="'v3po:vxlan.src'" class="interactive">Source IP</th>
56 <th st-sort="'v3po:vxlan.src'" class="interactive">Destination IP</th>
60 <tr ng-repeat="interface in displayInterfaceList | filter: filterGetVxlanIf">
61 <td>{{interface.name}}</td>
62 <td>{{interface['admin-status']}}</td>
63 <td>{{interface['phys-address']}}</td>
64 <td>{{interface['v3po:vxlan'].src}}</td>
65 <td>{{interface['v3po:vxlan'].dst}}</td>
73 <div layout="row" flex="100" layout-margin>
74 <!-- interfaces list -->
75 <div class="md-whiteframe-z2" flex="100">
76 <md-content layout-padding>
77 <h3>Interface list</h3>
78 <table st-table="displayInterfaceList" st-safe-src="selectedVpp.interfaces" class="table table-striped">
81 <th st-sort="name" class="interactive">Name</th>
82 <th st-sort="oper-status" class="interactive" >Oper Status</th>
83 <th st-sort="admin-status" class="interactive">Admin Status</th>
84 <th st-sort="phys-address" class="interactive">MAC Address</th>
88 <tr ng-repeat="interface in displayInterfaceList | filter: filterRemoveVxlanIf">
89 <td>{{interface.name}}</td>
90 <td>{{interface['oper-status']}}</td>
91 <td>{{interface['admin-status']}}</td>
92 <td>{{interface['phys-address']}}</td>