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 class="minimal-width">Network Name</th>
  27                                                 <th class="minimal-width">SVC Type</th>
  28                                                 <th class="minimal-width">EVC Type</th>
  29                                                 <th class="minimal-width">Tenant</th>
  30                                                 <th colspan="2">UNIs</th>
  31                                         </tr>
  32                                 </thead>
  33                                 <tbody id="l2_table">
  34                                         <tr ng-repeat="item in evcs | orderBy : sortEvc">
  35                                                 <td class="minimal-width">{{ item.evc['evc-id'] }}</td>
  36                                                 <td class="minimal-width">{{ networkNames[item['svc-id']] }}</td>
  37                                                 <td class="minimal-width">{{ item['svc-type'] }}</td>
  38                                                 <td class="minimal-width">{{ title(item.evc['evc-type']) }}</td>
  39                                                 <td class="minimal-width">{{ item['tenant-id'] }}</td>
  40
  41                                                 <td >
  42                                                 <button class="btn add-row" ng-click="unisTables[item['svc-id']] = false" ng-if="unisTables[item['svc-id']]">
  43                                                         <i class="icon-plus"></i> Show UNIs
  44                                                 </button>
  45                                                         <table class="footable table table-striped inner-table" ng-if="!unisTables[item['svc-id']]">
  46                                                                 <thead>
  47                                                                         <tr>
  48                                                                                 <th class="minimal-width">
  49                                                                                         <button class="btn add-row" ng-click="unisTables[item['svc-id']] = true">
  50                                                                                                 <i class="icon-minus"></i>
  51                                                                                         </button>
  52                                                                                 </th>
  53                                                                                 <th>Device</th>
  54                                                                                 <th>UNI</th>
  55                                                                                 <th ng-if="item.isTree" >Role</th>
  56                                                                                 <th class="minimal-width">VLANs <span style="font-size:small;color:inherit;"> (click to edit)</span></th>
  57                                                                                 <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>
  58                                                                         </tr>
  59                                                                 </thead>
  60                                                                 <tbody>
  61                                                                         <tr ng-repeat-start="(ce, unis) in item.device2unis | orderBy : ce ">
  62                                                                                 <td colspan="2" rowspan="{{unis.length}}">{{ cesDisplayNames[ce] }}</td>
  63                                                                                 <td ng-repeat-start="uni in unis | orderBy: sortUni | limitTo :1">{{ uni.prettyID }}</td>
  64                                                                                 <td ng-if="item.isTree">{{ uni['role'] }}</td>
  65                                                                                 <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">
  66                                                                                 {{ uni.vlans.join(', ') }} {{item.evc['preserve-ce-vlan-id'] ? '(Preserved)' : ''}}
  67                                                                                 </td>
  68                                                                                 <td ng-repeat-end class="delete-tr" style="white-space: nowrap;">
  69                                                                                 <button class="btn btn-md btn-danger" ng-click="deleteEvcUni(item['svc-id'], uni['uni-id'])"> <i class="icon-trash"></i> </button>
  70                                                                                 </td>
  71                                                                         </tr>
  72                                                                         <tr ng-repeat-end ng-repeat="uni in unis | orderBy: sortUni | limitTo :(unis.length-1) :1">
  73                                                                                 <td>{{ uni.prettyID }}</td>
  74                                                                                 <td ng-if="item.isTree">{{ uni['role'] }}</td>
  75                                                                                 <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">
  76                                                                                 {{ uni.vlans.join(', ') }} {{item.evc['preserve-ce-vlan-id'] ? '(Preserved)' : ''}}
  77                                                                                 </td>
  78                                                                                 <td class="delete-tr" style="white-space: nowrap;">
  79                                                                                 <button class="btn btn-md btn-danger" ng-click="deleteEvcUni(item['svc-id'], uni['uni-id'])"> <i class="icon-trash"></i> </button>
  80                                                                                 </td>
  81                                                                         </tr>
  82                                                                 </tbody>
  83                                                         </table>
  84                                                 </td>
  85
  86                                                 <td class="delete-tr"><button class="btn btn-md btn-danger" ng-click="deleteEvc(item['svc-id'])"> <i class="icon-trash"></i> </button></td>
  87                                         </tr>
  88
  89                                                 <!--
  90                                                 <td >
  91                                                         <button ng-show="!unisTables[item['svc-id']]" class="btn add-row btn-block" ng-click="unisTables[item['svc-id']] = true;">Show Unis</button>
  92                                                         <button ng-show="unisTables[item['svc-id']]" class="btn add-row btn-block" ng-click="unisTables[item['svc-id']] = false;">Hide Unis</button>
  93                                                 </td>
  94                                         <tr ng-repeat-end ng-show="unisTables[item['svc-id']]">
  95                                                 <td colspan="6">
  96                                                         <table class="footable table table-striped inner-table">
  97                                                                 <thead>
  98                                                                         <tr>
  99                                                                                 <th>Device</th>
 100                                                                                 <th>UNI</th>
 101                                                                                 <th ng-if="item.isTree" >Role</th>
 102                                                                                 <th>VLANs <span style="font-size:small;color:inherit;"> (click to edit)</span></th>
 103                                                                                 <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>
 104                                                                         </tr>
 105                                                                 </thead>
 106                                                                 <tbody id="l2_table">
 107                                                                         <tr ng-repeat-start="(ce, unis) in item.device2unis | orderBy : ce ">
 108                                                                                 <td rowspan="{{unis.length}}">{{ cesDisplayNames[ce] }}</td>
 109                                                                                 <td ng-repeat-start="uni in unis | orderBy: sortUni | limitTo :1">{{ uni.prettyID }}</td>
 110                                                                                 <td ng-if="item.isTree">{{ uni['role'] }}</td>
 111                                                                                 <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">
 112                                                                                 {{ uni.vlans.join(', ') }} {{item.evc['preserve-ce-vlan-id'] ? '(Preserved)' : ''}}
 113                                                                                 </td>
 114                                                                                 <td ng-repeat-end class="delete-tr" style="white-space: nowrap;">
 115                                                                                 <button class="btn btn-md btn-danger" ng-click="deleteEvcUni(item['svc-id'], uni['uni-id'])"> <i class="icon-trash"></i> </button>
 116                                                                                 </td>
 117                                                                         </tr>
 118                                                                         <tr ng-repeat-end ng-repeat="uni in unis | orderBy: sortUni | limitTo :(unis.length-1) :1">
 119                                                                                 <td>{{ uni.prettyID }}</td>
 120                                                                                 <td ng-if="item.isTree">{{ uni['role'] }}</td>
 121                                                                                 <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">
 122                                                                                 {{ uni.vlans.join(', ') }} {{item.evc['preserve-ce-vlan-id'] ? '(Preserved)' : ''}}
 123                                                                                 </td>
 124                                                                                 <td class="delete-tr" style="white-space: nowrap;">
 125                                                                                 <button class="btn btn-md btn-danger" ng-click="deleteEvcUni(item['svc-id'], uni['uni-id'])"> <i class="icon-trash"></i> </button>
 126                                                                                 </td>
 127                                                                         </tr>
 128                                                                 </tbody>
 129                                                         </table>
 130                                                 </td>
 131                                         </tr>
 132                                                  -->
 133                                 </tbody>
 134                         </table>
 135                         <div><a class="btn add-row" ng-click="evcDialog.show($event,{'svcTypes':svcTypes})" >Create EVC</a></div>
 136                 </div>
 137                 <div ng-show="isTabSet('tenantData',2)">
 138                         <div class="table-header">IPVCs Table</div>
 139                         <table class="footable table table-striped">
 140                                 <thead>
 141                                         <tr>
 142                                                 <th class="minimal-width">IPVC ID</th>
 143                                                 <th class="minimal-width">IPVC Type</th>
 144                                                 <th class="minimal-width">Tenant</th>
 145                                                 <th colspan="2">UNIs</th>
 146                                         </tr>
 147                                 </thead>
 148                                 <tbody id="l2_table">
 149                                         <tr ng-repeat="ipvc in ipvcs | orderBy : sortIpvc">
 150                                                 <td class="minimal-width">{{ ipvc.ipvc['ipvc-id'] }}</td>
 151                                                 <td class="minimal-width">{{ ipvc.ipvc['ipvc-type'] }}</td>
 152                                                 <td class="minimal-width">{{ ipvc['tenant-id'] }}</td>
 153                                                 <td >
 154                                                 <button class="btn add-row" ng-click="unisTables[ipvc.ipvc['ipvc-id']] = false" ng-if="unisTables[ipvc.ipvc['ipvc-id']]">
 155                                                         <i class="icon-plus"></i> Show UNIs
 156                                                 </button>
 157                                                         <table class="footable table table-striped inner-table" ng-if="!unisTables[ipvc.ipvc['ipvc-id']]">
 158                                                                 <thead>
 159                                                                         <tr>
 160                                                                                 <th class="minimal-width">
 161                                                                                         <button class="btn add-row" ng-click="unisTables[ipvc.ipvc['ipvc-id']] = true">
 162                                                                                                 <i class="icon-minus"></i>
 163                                                                                         </button>
 164                                                                                 </th>
 165                                                                                 <th>Device</th>
 166                                                                                 <th>UNI</th>
 167                                                                                 <th>IP Address</th>
 168                                                                                 <th>vlan</th>
 169                                                                                 <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>
 170                                                                         </tr>
 171                                                                 </thead>
 172                                                                 <tbody>
 173                                                                         <tr ng-repeat="ipuni in ipvc.ipvc.unis.uni">
 174                                                                                 <td colspan="2" ng-init="serviceIpuni = getMefInterfaceIpvc(ipuni['uni-id'],ipuni['ip-uni-id'])">{{ cesDisplayNames[ipuni.device] }}</td>
 175                                                                                 <td>{{ ipuni.prettyID }}</td>
 176                                                                                 <td>{{serviceIpuni['ip-address']}}</td>
 177                                                                                 <td>{{serviceIpuni.vlan}}</td>
 178                                                                                 <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>
 179                                                                         </tr>
 180                                                                 </tbody>
 181                                                         </table>
 182                                                 </td>
 183                                                 <td class="delete-tr"><button class="btn btn-md btn-danger" ng-click="deleteEvc(ipvc['svc-id'])"> <i class="icon-trash"></i> </button></td>
 184                                                 <!--
 185                                                         <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>
 186                                                         <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>
 187                                                 </td>
 188                                                 <td class="delete-tr"><button class="btn btn-md btn-danger" ng-click="deleteEvc(ipvc['svc-id'])"> <i class="icon-trash"></i> </button></td>
 189                                         </tr>
 190                                         <tr ng-repeat-end ng-show="unisTables[ipvc.ipvc['ipvc-id']]">
 191                                                 <td colspan="5">
 192                                                         <table class="footable table table-striped inner-table">
 193                                                                 <thead>
 194                                                                         <tr>
 195                                                                                 <th>Device</th>
 196                                                                                 <th>UNI</th>
 197                                                                                 <th>IP Address</th>
 198                                                                                 <th>vlan</th>
 199                                                                                 <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>
 200                                                                         </tr>
 201                                                                 </thead>
 202                                                                 <tbody id="l2_table">
 203                                                                         <tr ng-repeat="ipuni in ipvc.ipvc.unis.uni">
 204                                                                                 <td ng-init="serviceIpuni = getMefInterfaceIpvc(ipuni['uni-id'],ipuni['ip-uni-id'])">{{ cesDisplayNames[ipuni.device] }}</td>
 205                                                                                 <td>{{ ipuni.prettyID }}</td>
 206                                                                                 <td>{{serviceIpuni['ip-address']}}</td>
 207                                                                                 <td>{{serviceIpuni.vlan}}</td>
 208                                                                                 <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>
 209                                                                         </tr>
 210                                                                 </tbody>
 211                                                         </table>
 212                                                 </td>
 213                                                  -->
 214                                         </tr>
 215                                 </tbody>
 216                         </table>
 217                         <div><a class="btn add-row" ng-click="ipvcDialog.show($event,{'svcTypes':svcTypes})" >Create IPVC</a></div>
 218                 </div>
 219                 <div ng-show="isTabSet('tenantData',3)">
 220                         <div class="table-header">Tenant UNIs</div>
 221                         <table class="footable table table-striped">
 222                                 <thead>
 223                                         <tr>
 224                                                 <th class="minimal-width">Device</th>
 225                                                 <th class="minimal-width">UNI</th>
 226                                                 <th>Ports</th>
 227                                         </tr>
 228                                 </thead>
 229                                 <tbody>
 230                                         <tr ng-repeat="uni in unis | orderBy: '[\'uni-id\']'">
 231                                                 <td class="minimal-width">{{ cesDisplayNames[uni.device] }}</td>
 232                                                 <td class="minimal-width">{{ uni.prettyID }}</td>
 233                                                 <td>
 234                                                 <button class="btn add-row" ng-click="expandFlags.tuni[uni['uni-id']] = false" ng-if="expandFlags.tuni[uni['uni-id']]">
 235                                                         <i class="icon-plus"></i> Show Ports
 236                                                 </button>
 237                                                         <table class="footable table table-striped inner-table" ng-if="!expandFlags.tuni[uni['uni-id']]">
 238                                                                 <thead>
 239                                                                         <tr>
 240                                                                                 <th class="minimal-width">
 241                                                                                         <button class="btn add-row" ng-click="expandFlags.tuni[uni['uni-id']] = true">
 242                                                                                                 <i class="icon-minus"></i>
 243                                                                                         </button>
 244                                                                                 </th>
 245                                                                                 <th class="minimal-width">IP UNI ID</th>
 246                                                                                 <th class="minimal-width">VLAN</th>
 247                                                                                 <th class="minimal-width">Address</th>
 248                                                                                 <th>Remote Subnets</th>
 249                                                                                 <th class="delete-tr"><button class="btn btn-md btn-info" ng-click="openIpUniDialog($event,uni)"> <i class="icon-plus"></i> </button></th>
 250                                                                         </tr>
 251                                                                 </thead>
 252                                                                 <tbody>
 253                                                                         <tr ng-repeat="ipuni in uni['ip-unis']['ip-uni'] | orderBy: '[\'ip-uni-id\']'">
 254                                                                                 <td colspan="2" class="minimal-width">{{ ipuni['ip-uni-id'] }}</td>
 255                                                                                 <td class="minimal-width">{{ ipuni.vlan }}</td>
 256                                                                                 <td class="minimal-width">{{ ipuni['ip-address'] }}</td>
 257                                                                                 <td>
 258                                                                                 <button class="btn add-row" ng-click="expandFlags.ipuni[ipuni['ip-uni-id']] = true" ng-if="!expandFlags.ipuni[ipuni['ip-uni-id']]">
 259                                                                                         <i class="icon-plus"></i> Show Subnets
 260                                                                                 </button>
 261                                                                                         <table class="footable table table-striped inner-table" ng-if="expandFlags.ipuni[ipuni['ip-uni-id']]">
 262                                                                                                 <thead>
 263                                                                                                         <tr>
 264                                                                                                                 <th class="minimal-width">
 265                                                                                                                         <button class="btn add-row" ng-click="expandFlags.ipuni[ipuni['ip-uni-id']] = false">
 266                                                                                                                                 <i class="icon-minus"></i>
 267                                                                                                                         </button>
 268                                                                                                                 </th>
 269                                                                                                                 <th>Subnet</th>
 270                                                                                                                 <th>Gateway</th>
 271                                                                                                                 <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>
 272                                                                                                         </tr>
 273                                                                                                 </thead>
 274                                                                                                 <tbody>
 275                                                                                                         <tr ng-repeat="subnet in ipuni['subnets']['subnet'] | orderBy: subnet">
 276                                                                                                                 <td colspan="2">{{ subnet.subnet }}</td>
 277                                                                                                                 <td>{{ subnet.gateway }}</td>
 278                                                                                                                 <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>
 279                                                                                                         </tr>
 280                                                                                                 </tbody>
 281                                                                                         </table>
 282                                                                                 </td>
 283                                                                                 <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>
 284                                                                         </tr>
 285                                                                 </tbody>
 286                                                         </table>
 287                                                 </td>
 288                                         </tr>
 289                                 </tbody>
 290                         </table>
 291                 </div>
 292         </div>
 293         <div class="clear">
 294                 <button class="btn btn-default pull-right" onclick="window.location='#/cpeui/admin/tenants'" > Back </button>
 295         </div>
 296 </div>