dlux/cpeui/cpeui-module/src/main/resources/cpeui/tenant.tpl.html

   1 <div class="container" id="tenant-page">
   2         <h1>Tenant {{ curTenant }}</h1>
   3         <div class="menu">
   4                 <ul id="EVCs-tab" class="nav nav-pills" role="tablist">
   5                         <li ng-class="{ active: isTabSet('tenantData',1)}" ng-click="setTab('tenantData',1)" >
   6                                 <a id="evcs-configure-tab" href="#/cpeui/tenant/{{curTenant}}/L2"> <i class="icon-tasks"></i> L2 Services</a>
   7                         </li>
   8                         <li ng-class="{ active: isTabSet('tenantData',2)}" ng-click="setTab('tenantData',2)" >
   9                                 <a id="evcs-configure-tab" href="#/cpeui/tenant/{{curTenant}}/L3" > <i class="icon-tasks"></i> L3 Services</a>
  10                         </li>
  11                         <li ng-class="{ active: isTabSet('tenantData',3)}" ng-click="setTab('tenantData',3)" >
  12                                 <a id="evcs-configure-tab" href="#/cpeui/tenant/{{curTenant}}/unis"> <i class="icon-tasks"></i> UNIs</a>
  13                         </li>
  14                         <li id="refresh_btn" class="active refresh-btn" ng-click="updateEvcView()">
  15                                 <button class="btn add-row"> <i class="icon-refresh"></i> Refresh</button>
  16                         </li>
  17                 </ul>
  18         </div>
  19         <div id="EVCsContent" class="tab-content">
  20                 <div ng-show="isTabSet('tenantData',1)">
  21                         <div class="table-header">EVCs Table</div>
  22                         <table class="footable table table-striped">
  23                                 <thead>
  24                                         <tr>
  25                                                 <th class="minimal-width">EVC ID</th>
  26                                                 <th>UNIs</th>
  27                                                 <th>Network Name</th>
  28                                                 <th>SVC Type</th>
  29                                                 <th>EVC Type</th>
  30                                                 <th colspan="2" >Tenant</th>
  31                                         </tr>
  32                                 </thead>
  33                                 <tbody id="l2_table">
  34                                         <tr ng-repeat-start="item in evcs | orderBy : sortEvc">
  35                                                 <td rowspan="{{ 1 + unisTables[item['svc-id']] }}" class="minimal-width">{{ item.evc['evc-id'] }}</td>
  36                                                 <td >
  37                                                         <button ng-show="!unisTables[item['svc-id']]" class="btn add-row btn-block" ng-click="unisTables[item['svc-id']] = true;">Show Unis</button>
  38                                                         <button ng-show="unisTables[item['svc-id']]" class="btn add-row btn-block" ng-click="unisTables[item['svc-id']] = false;">Hide Unis</button>
  39                                                 </td>
  40                                                 <td >{{ networkNames[item['svc-id']] }}</td>
  41                                                 <td >{{ item['svc-type'] }}</td>
  42                                                 <td >{{ title(item.evc['evc-type']) }}</td>
  43                                                 <td>{{ item['tenant-id'] }}</td>
  44                                                 <td class="delete-tr"><button class="btn btn-md btn-danger" ng-click="deleteEvc(item['svc-id'])"> <i class="icon-trash"></i> </button></td>
  45                                         </tr>
  46                                         <tr ng-repeat-end ng-show="unisTables[item['svc-id']]">
  47                                                 <td colspan="6">
  48                                                         <table class="footable table table-striped inner-table">
  49                                                                 <thead>
  50                                                                         <tr>
  51                                                                                 <th>Device</th>
  52                                                                                 <th>UNI</th>
  53                                                                                 <th ng-if="item.isTree" >Role</th>
  54                                                                                 <th>VLANs <span style="font-size:small;color:inherit;"> (click to edit)</span></th>
  55                                                                                 <th class="delete-tr"><button class="btn btn-md btn-info" ng-click="linkEvcUniDialog.show($event, {'svc':item,'unis':unis,'ces':ces})"> <i class="icon-plus"></i> </button></th>
  56                                                                         </tr>
  57                                                                 </thead>
  58                                                                 <tbody id="l2_table">
  59                                                                         <tr ng-repeat-start="(ce, unis) in item.device2unis | orderBy : ce ">
  60                                                                                 <td rowspan="{{unis.length}}">{{ cesDisplayNames[ce] }}</td>
  61                                                                                 <td ng-repeat-start="uni in unis | orderBy: sortUni | limitTo :1">{{ uni.prettyID }}</td>
  62                                                                                 <td ng-if="item.isTree">{{ uni['role'] }}</td>
  63                                                                                 <td class="clickable" ng-click="!item.evc['preserve-ce-vlan-id'] ? editVlanDialog.show($event, {svcid:item['svc-id'], uniid:uni['uni-id'], vlans:uni.vlans}) : 0">
  64                                                                                 {{ uni.vlans.join(', ') }} {{item.evc['preserve-ce-vlan-id'] ? '(Preserved)' : ''}}
  65                                                                                 </td>
  66                                                                                 <td ng-repeat-end class="delete-tr" style="white-space: nowrap;">
  67                                                                                 <button class="btn btn-md btn-danger" ng-click="deleteEvcUni(item['svc-id'], uni['uni-id'])"> <i class="icon-trash"></i> </button>
  68                                                                                 </td>
  69                                                                         </tr>
  70                                                                         <tr ng-repeat-end ng-repeat="uni in unis | orderBy: sortUni | limitTo :(unis.length-1) :1">
  71                                                                                 <td>{{ uni.prettyID }}</td>
  72                                                                                 <td ng-if="item.isTree">{{ uni['role'] }}</td>
  73                                                                                 <td class="clickable" ng-click="!item.evc['preserve-ce-vlan-id'] ? editVlanDialog.show($event, {svcid:item['svc-id'], uniid:uni['uni-id'], vlans:uni.vlans}) : 0">
  74                                                                                 {{ uni.vlans.join(', ') }} {{item.evc['preserve-ce-vlan-id'] ? '(Preserved)' : ''}}
  75                                                                                 </td>
  76                                                                                 <td class="delete-tr" style="white-space: nowrap;">
  77                                                                                 <button class="btn btn-md btn-danger" ng-click="deleteEvcUni(item['svc-id'], uni['uni-id'])"> <i class="icon-trash"></i> </button>
  78                                                                                 </td>
  79                                                                         </tr>
  80                                                                 </tbody>
  81                                                         </table>
  82                                                 </td>
  83                                         </tr>
  84                                 </tbody>
  85                         </table>
  86                         <div><a class="btn btn-info add-row" ng-click="evcDialog.show($event,{'svcTypes':svcTypes})" >Create EVC</a></div>
  87                 </div>
  88                 <div ng-show="isTabSet('tenantData',2)">
  89                         <div class="table-header">IPVCs Table</div>
  90                         <table class="footable table table-striped">
  91                                 <thead>
  92                                         <tr>
  93                                                 <th class="minimal-width">IPVC ID</th>
  94                                                 <th>UNIs</th>
  95                                                 <th>IPVC Type</th>
  96                                                 <th colspan="2" >Tenant</th>
  97                                         </tr>
  98                                 </thead>
  99                                 <tbody id="l2_table">
 100                                         <tr ng-repeat-start="ipvc in ipvcs | orderBy : sortIpvc">
 101                                                 <td rowspan="{{ 1 + unisTables[ipvc.ipvc['ipvc-id']] }}" class="minimal-width">{{ ipvc.ipvc['ipvc-id'] }}</td>
 102                                                 <td >
 103                                                         <button ng-show="!unisTables[ipvc.ipvc['ipvc-id']]" class="btn add-row btn-block" ng-click="unisTables[ipvc.ipvc['ipvc-id']] = true;">Show Unis</button>
 104                                                         <button ng-show="unisTables[ipvc.ipvc['ipvc-id']]" class="btn add-row btn-block" ng-click="unisTables[ipvc.ipvc['ipvc-id']] = false;">Hide Unis</button>
 105                                                 </td>
 106                                                 <td >{{ ipvc.ipvc['ipvc-type'] }}</td>
 107                                                 <td>{{ ipvc['tenant-id'] }}</td>
 108                                                 <td class="delete-tr"><button class="btn btn-md btn-danger" ng-click="deleteEvc(ipvc['svc-id'])"> <i class="icon-trash"></i> </button></td>
 109                                         </tr>
 110                                         <tr ng-repeat-end ng-show="unisTables[ipvc.ipvc['ipvc-id']]">
 111                                                 <td colspan="5">
 112                                                         <table class="footable table table-striped inner-table">
 113                                                                 <thead>
 114                                                                         <tr>
 115                                                                                 <th>Device</th>
 116                                                                                 <th>UNI</th>
 117                                                                                 <th>IP Address</th>
 118                                                                                 <th>vlan</th>
 119                                                                                 <th class="delete-tr"><button class="btn btn-md btn-info" ng-click="linkIpvcUniDialog.show($event, {'svc':ipvc,'unis':unis,'ces':ces})"> <i class="icon-plus"></i> </button></th>
 120                                                                         </tr>
 121                                                                 </thead>
 122                                                                 <tbody id="l2_table">
 123                                                                         <tr ng-repeat="ipuni in ipvc.ipvc.unis.uni">
 124                                                                                 <td ng-init="serviceIpuni = getMefInterfaceIpvc(ipuni['uni-id'],ipuni['ip-uni-id'])">{{ ipuni.device }}</td>
 125                                                                                 <td>{{ ipuni.prettyID }}</td>
 126                                                                                 <td>{{serviceIpuni['ip-address']}}</td>
 127                                                                                 <td>{{serviceIpuni.vlan}}</td>
 128                                                                                 <td class="delete-tr"><button class="btn btn-md btn-danger" ng-click="deleteIpvcUni(ipvc['svc-id'], ipuni['uni-id'])"> <i class="icon-trash"></i> </button></td>
 129                                                                         </tr>
 130                                                                 </tbody>
 131                                                         </table>
 132                                                 </td>
 133                                         </tr>
 134                                 </tbody>
 135                         </table>
 136                         <div><a class="btn btn-info add-row" ng-click="ipvcDialog.show($event,{'svcTypes':svcTypes})" >Create IPVC</a></div>
 137                 </div>
 138                 <div ng-show="isTabSet('tenantData',3)">
 139                         <div class="table-header">Tenant UNIs</div>
 140                         <table class="footable table table-striped">
 141                                 <thead>
 142                                         <tr>
 143                                                 <th class="minimal-width">Device</th>
 144                                                 <th class="minimal-width">UNI</th>
 145                                                 <th>Ports</th>
 146                                         </tr>
 147                                 </thead>
 148                                 <tbody>
 149                                         <tr ng-repeat="uni in unis | orderBy: '[\'uni-id\']'">
 150                                                 <td class="minimal-width">{{ uni.device }}</td>
 151                                                 <td class="minimal-width">{{ uni.prettyID }}</td>
 152                                                 <td>
 153                                                 <button class="btn btn-info add-row" ng-click="expandFlags.tuni[uni['uni-id']] = false" ng-if="expandFlags.tuni[uni['uni-id']]">
 154                                                         <i class="icon-plus"></i> Show Ports
 155                                                 </button>
 156                                                         <table class="footable table table-striped inner-table" ng-if="!expandFlags.tuni[uni['uni-id']]">
 157                                                                 <thead>
 158                                                                         <tr>
 159                                                                                 <th class="minimal-width">
 160                                                                                         <button class="btn btn-info add-row" ng-click="expandFlags.tuni[uni['uni-id']] = true">
 161                                                                                                 <i class="icon-minus"></i>
 162                                                                                         </button>
 163                                                                                 </th>
 164                                                                                 <th class="minimal-width">IP UNI ID</th>
 165                                                                                 <th class="minimal-width">VLAN</th>
 166                                                                                 <th class="minimal-width">Address</th>
 167                                                                                 <th>Remote Subnets</th>
 168                                                                                 <th class="delete-tr"><button class="btn btn-md btn-info" ng-click="openIpUniDialog($event,uni)"> <i class="icon-plus"></i> </button></th>
 169                                                                         </tr>
 170                                                                 </thead>
 171                                                                 <tbody>
 172                                                                         <tr ng-repeat="ipuni in uni['ip-unis']['ip-uni'] | orderBy: '[\'ip-uni-id\']'">
 173                                                                                 <td colspan="2" class="minimal-width">{{ ipuni['ip-uni-id'] }}</td>
 174                                                                                 <td class="minimal-width">{{ ipuni.vlan }}</td>
 175                                                                                 <td class="minimal-width">{{ ipuni['ip-address'] }}</td>
 176                                                                                 <td>
 177                                                                                 <button class="btn btn-info add-row" ng-click="expandFlags.ipuni[ipuni['ip-uni-id']] = true" ng-if="!expandFlags.ipuni[ipuni['ip-uni-id']]">
 178                                                                                         <i class="icon-plus"></i> Show Subnets
 179                                                                                 </button>
 180                                                                                         <table class="footable table table-striped inner-table" ng-if="expandFlags.ipuni[ipuni['ip-uni-id']]">
 181                                                                                                 <thead>
 182                                                                                                         <tr>
 183                                                                                                                 <th class="minimal-width">
 184                                                                                                                         <button class="btn btn-info add-row" ng-click="expandFlags.ipuni[ipuni['ip-uni-id']] = false">
 185                                                                                                                                 <i class="icon-minus"></i>
 186                                                                                                                         </button>
 187                                                                                                                 </th>
 188                                                                                                                 <th>Subnet</th>
 189                                                                                                                 <th>Gateway</th>
 190                                                                                                                 <th class="delete-tr"><button class="btn btn-md btn-info" ng-click="ipUniSubnetDialog.show($event,{uniid:uni['uni-id'],ipuniid:ipuni['ip-uni-id']})"> <i class="icon-plus"></i> </button></th>
 191                                                                                                         </tr>
 192                                                                                                 </thead>
 193                                                                                                 <tbody>
 194                                                                                                         <tr ng-repeat="subnet in ipuni['subnets']['subnet'] | orderBy: subnet">
 195                                                                                                                 <td colspan="2">{{ subnet.subnet }}</td>
 196                                                                                                                 <td>{{ subnet.gateway }}</td>
 197                                                                                                                 <td class="delete-tr"><button class="btn btn-md btn-danger" ng-click="deleteIpUniSubnet(uni['uni-id'],ipuni['ip-uni-id'],subnet.subnet)"> <i class="icon-trash"></i> </button></td>
 198                                                                                                         </tr>
 199                                                                                                 </tbody>
 200                                                                                         </table>
 201                                                                                 </td>
 202                                                                                 <td class="delete-tr"><button class="btn btn-md btn-danger" ng-click="deleteIpUni(uni['uni-id'],ipuni['ip-uni-id'])"> <i class="icon-trash"></i> </button></td>
 203                                                                         </tr>
 204                                                                 </tbody>
 205                                                         </table>
 206                                                 </td>
 207                                         </tr>
 208                                 </tbody>
 209                         </table>
 210                 </div>
 211         </div>
 212         <div class="clear">
 213                 <button class="btn btn-default pull-right" onclick="window.location='#/cpeui/admin/tenants'" > Back </button>
 214         </div>
 215 </div>