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