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