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

   1 <div class="container" id="tenant-page">
   2     <h1>Tenant Administration - {{ curTenant }}</h1>
   3     <div class="menu">
   4         <ul id="TenantsTabs" class="nav nav-pills" role="tablist">
   5             <li ng-class="{ active: isTabSet('tenantData',0)}" ng-click="setTab('tenantData',0)" >
   6                 <a id="inventory-tab" href="#/cpeui/tenant/{{curTenant}}/inventory"> <i class="icon-tasks"></i> Inventory</a>
   7             </li>
   8             <li ng-class="{ active: isTabSet('tenantData',1)}" ng-click="setTab('tenantData',1)" >
   9                 <a id="evcs-configure-tab" href="#/cpeui/tenant/{{curTenant}}/L2"> <i class="icon-exchange"></i> L2 Services</a>
  10             </li>
  11             <li ng-class="{ active: isTabSet('tenantData',2)}" ng-click="setTab('tenantData',2)" >
  12                 <a id="ipvs-configure-tab" href="#/cpeui/tenant/{{curTenant}}/L3" > <i class="icon-screenshot"></i> L3 Services</a>
  13             </li>
  14             <!-- For Future use
  15             <li ng-class="{ active: isTabSet('tenantData',3)}" ng-click="setTab('tenantData',3)" >
  16                 <a href="#/cpeui/tenant/{{curTenant}}/dashboard" > <i class="icon-dashboard"></i> Dashboard</a>
  17             </li>
  18             <li ng-class="{ active: isTabSet('tenantData',4)}" ng-click="setTab('tenantData',4)" >
  19                 <a href="#/cpeui/tenant/{{curTenant}}/cpemonitor" > <i class="icon-bar-chart"></i> CPE Monitor</a>
  20             </li>
  21             <li ng-class="{ active: isTabSet('tenantData',5)}" ng-click="setTab('tenantData',5)" >
  22                 <a href="#/cpeui/tenant/{{curTenant}}/servicemonitor" > <i class="icon-bar-chart"></i> Service Monitor</a>
  23             </li>
  24              -->
  25             <li ng-class="{ active: isTabSet('tenantData',6)}" ng-click="setTab('tenantData',6)" >
  26                 <a id="tenant-uni-tab" href="#/cpeui/tenant/{{curTenant}}/unis"> <i class="icon-tasks"></i> UNIs</a>
  27             </li>
  28             <li id="refresh_btn" class="active refresh-btn" ng-click="updateEvcView()">
  29                 <button class="btn add-row"> <i class="icon-refresh"></i> Refresh</button>
  30             </li>
  31         </ul>
  32     </div>
  33     <div id="EVCsContent" class="tab-content">
  34        <div ng-show="isTabSet('tenantData',0)">
  35             <div class="table-header">Inventory</div>
  36             <table class="footable table table-striped">
  37                 <thead>
  38                     <tr>
  39                         <th class="minimal-width">CPE-ID</th>
  40                         <th class="minimal-width">Device Name</th>
  41                         <th>UNIs</th>
  42                     </tr>
  43                 </thead>
  44                 <tbody ng-repeat="ce in ces" ng-init="ceUnis = unis.filterByField('device',ce['dev-id'])">
  45                     <tr>
  46                         <td class="minimal-width" ng-bind="ce['dev-id']"></td>
  47                         <td class="minimal-width" ng-bind="ce['device-name']"></td>
  48                         <td>
  49                         <table class="footable table table-striped inner-table" ng-if="!unisTables[item['svc-id']]">
  50                                 <thead>
  51                                     <tr>
  52                                         <th class="minimal-width">Interface Name</th>
  53                                         <th class="minimal-width">VLAN</th>
  54                                         <th class="minimal-width">Service</th>
  55                                     </tr>
  56                                 </thead>
  57                                 <tbody ng-repeat="uni in ceUnis">
  58                                     <tr ng-repeat="svcs in uni.vlanToService | orderBy: '-vlan'" ng-if="uni.hasService">
  59                                         <td rowspan="{{uni.vlanToService.length}}" ng-if="$first" ng-bind="uni.prettyID" />
  60                                         <td ng-bind="svcs.vlan ? svcs.vlan : '-'" />
  61                                         <td>
  62                                             <a class="link" href="#/cpeui/tenant/dav1/{{svcs.svc.evc ? 'L2' : 'L3'}}?svcs.svc={{svcs.svc['svc-id']}}">{{svcs.svc.name ? svcs.svc.name : svcs.svc['svc-id']}}</a>
  63                                         </td>
  64                                     </tr>
  65                                 </tbody>
  66                                 <tbody ng-if="!doesAllUniHasService(ceUnis)">
  67                                     <tr>
  68                                         <td><b ng-repeat="uni in ceUnis" ng-if="!uni.hasService">{{uni.prettyID}}{{$last ? '' : ', '}}</b></td>
  69                                         <td></td>
  70                                         <td></td>
  71                                     </tr>
  72                                 </tbody>
  73                             </table>
  74                         </td>
  75                     </tr>
  76                 </tbody>
  77                 </table>
  78         </div>
  79         <div ng-show="isTabSet('tenantData',1)">
  80             <div class="table-header">L2 Service Config</div>
  81             <table class="footable table table-striped">
  82                 <thead>
  83                     <tr>
  84                         <th class="minimal-width">Service ID</th>
  85                         <th class="minimal-width">Service Name</th>
  86                         <th class="minimal-width">Type</th>
  87                         <th class="minimal-width">Segmentation ID</th>
  88                         <th>UNIs</th>
  89                         <th class="minimal-width">
  90                             <button class="btn btn-md btn-info right" ng-click="evcDialog.show($event,{'svcTypes':svcTypes})">
  91                                 <i class="icon-plus"></i>
  92                                 <md-tooltip>Create EVC</md-tooltip>
  93                             </button>
  94                         </th>
  95                     </tr>
  96                 </thead>
  97                 <tbody id="l2_table">
  98                     <tr ng-repeat="item in evcs | orderBy : 'name'">
  99                         <td class="minimal-width">{{ item.evc['evc-id'] }}</td>
 100                         <td class="minimal-width">{{ item['name'] }}</td>
 101                         <td class="minimal-width">{{ item['svc-type'] | uppercase }}</td>
 102                         <td class="minimal-width">{{ item.evc['segmentation-id'] }}</td>
 103                         <td>
 104                             <table class="footable table table-striped inner-table" ng-if="!isEmpty(item.device2unis)">
 105                                 <thead>
 106                                     <tr>
 107                                         <th class="minimal-width">Device</th>
 108                                         <th class="minimal-width">Port</th>
 109                                         <th class="minimal-width">VLANs <span style="font-size:small;color:inherit;"> (click to edit)</span></th>
 110                                         <th class="minimal-width" ng-if="item.isTree" >Role</th>
 111                                         <th>Bandwidth Profile</th>
 112                                         <th class="minimal-width"></th>
 113                                     </tr>
 114                                 </thead>
 115                                 <tbody>
 116                                     <tr ng-repeat-start="(ce, unis) in item.device2unis | orderBy : ce ">
 117                                         <td class="minimal-width" rowspan="{{unis.length}}">{{ cesDisplayNames[ce] }}</td>
 118                                         <td class="minimal-width" ng-repeat-start="uni in unis | orderBy: sortUni | limitTo :1">{{ uni.prettyID }}</td>
 119                                         <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">
 120                                         {{ uni.vlans.join(', ') }} {{item.evc['preserve-ce-vlan-id'] ? '(Preserved)' : ''}}
 121                                         </td>
 122                                         <td class="minimal-width" ng-if="item.isTree">{{ uni['role'] }}</td>
 123                                         <td >{{ uni['ingress-bw-profile'] }}</td>
 124                                         <td ng-repeat-end class="minimal-width" 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                                     <tr ng-repeat-end ng-repeat="uni in unis | orderBy: sortUni | limitTo :(unis.length-1) :1">
 129                                         <td>{{ uni.prettyID }}</td>
 130                                         <td ng-if="item.isTree">{{ uni['role'] }}</td>
 131                                         <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">
 132                                         {{ uni.vlans.join(', ') }} {{item.evc['preserve-ce-vlan-id'] ? '(Preserved)' : ''}}
 133                                         </td>
 134                                         <td class="minimal-width">{{ uni['ingress-bw-profile'] }}</td>
 135                                             <td class="minimal-width" style="white-space: nowrap;">
 136                                             <button class="btn btn-md btn-danger" ng-click="deleteEvcUni(item['svc-id'], uni['uni-id'])">
 137                                                 <i class="icon-trash"></i>
 138                                             </button>
 139                                         </td>
 140                                     </tr>
 141                                 </tbody>
 142                             </table>
 143                         </td>
 144
 145                         <td class="minimal-width">
 146                             <button class="btn btn-md btn-danger" ng-click="deleteEvc(item['svc-id'])"> <i class="icon-trash"></i> </button>
 147                             <button class="btn btn-md btn-info" ng-click="linkEvcUniDialog.show($event, {svc:item, unis:unis, ces:ces, profiles:profiles})">
 148                                 <i class="icon-plus"></i>
 149                                     <md-tooltip>Add UNI</md-tooltip>
 150                             </button>
 151                         </td>
 152                     </tr>
 153                 </tbody>
 154             </table>
 155         </div>
 156         <div ng-show="isTabSet('tenantData',2)">
 157             <div class="table-header">L3 Service Config</div>
 158             <table class="footable table table-striped">
 159                 <thead>
 160                     <tr>
 161                         <th class="minimal-width">Service ID</th>
 162                         <th class="minimal-width">Service Name</th>
 163                         <th>Service Endpoints</th>
 164                         <th class="minimal-width">
 165                             <button class="btn btn-md btn-info right" ng-click="ipvcDialog.show($event,{'svcTypes':svcTypes})">
 166                                 <i class="icon-plus"></i>
 167                                 <md-tooltip>Create IPVC</md-tooltip>
 168                             </button>
 169                         </th>
 170                     </tr>
 171                 </thead>
 172                 <tbody id="l2_table">
 173                     <tr ng-repeat="ipvc in ipvcs | orderBy : 'name'">
 174                         <td class="minimal-width">{{ ipvc.ipvc['ipvc-id'] }}</td>
 175                         <td class="minimal-width">{{ ipvc['name'] }}</td>
 176                         <td>
 177                             <table class="footable table table-striped inner-table" ng-if="ipvc.ipvc.unis.uni">
 178                                 <thead>
 179                                     <tr>
 180                                         <th class="minimal-width">Device Name</th>
 181                                         <th class="minimal-width">Port</th>
 182                                         <th>Vlan</th>
 183                                         <th class="minimal-width">I/F Address</th>
 184                                         <th>Bandwidth Profile</th>
 185                                         <th class="minimal-width"></th>
 186                                     </tr>
 187                                 </thead>
 188                                 <tbody>
 189                                     <tr ng-repeat="ipuni in ipvc.ipvc.unis.uni | orderBy: 'prettyID'">
 190                                         <td class="minimal-width" ng-init="serviceIpuni = getMefInterfaceIpvc(ipuni['uni-id'],ipuni['ip-uni-id'])">{{ cesDisplayNames[ipuni.device] }}</td>
 191                                         <td class="minimal-width">{{ ipuni.prettyID }}</td>
 192                                         <td>{{serviceIpuni.vlan}}</td>
 193                                         <td class="minimal-width">{{serviceIpuni['ip-address']}}</td>
 194                                         <td>{{ ipuni['ingress-bw-profile'] }}</td>
 195                                         <td class="minimal-width"><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>
 196                                     </tr>
 197                                 </tbody>
 198                             </table>
 199                         </td>
 200                         <td class="minimal-width">
 201                             <button class="btn btn-md btn-danger" ng-click="deleteEvc(ipvc['svc-id'])"> <i class="icon-trash"></i> </button>
 202                             <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>
 203                         </td>
 204                         <!--
 205                             <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>
 206                             <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>
 207                         </td>
 208                         <td class="minimal-width"><button class="btn btn-md btn-danger" ng-click="deleteEvc(ipvc['svc-id'])"> <i class="icon-trash"></i> </button></td>
 209                     </tr>
 210                     <tr ng-repeat-end ng-show="unisTables[ipvc.ipvc['ipvc-id']]">
 211                         <td colspan="5">
 212                             <table class="footable table table-striped inner-table">
 213                                 <thead>
 214                                     <tr>
 215                                         <th>Device</th>
 216                                         <th>UNI</th>
 217                                         <th>IP Address</th>
 218                                         <th>vlan</th>
 219                                         <th class="minimal-width"><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>
 220                                     </tr>
 221                                 </thead>
 222                                 <tbody id="l2_table">
 223                                     <tr ng-repeat="ipuni in ipvc.ipvc.unis.uni">
 224                                         <td ng-init="serviceIpuni = getMefInterfaceIpvc(ipuni['uni-id'],ipuni['ip-uni-id'])">{{ cesDisplayNames[ipuni.device] }}</td>
 225                                         <td>{{ ipuni.prettyID }}</td>
 226                                         <td>{{serviceIpuni['ip-address']}}</td>
 227                                         <td>{{serviceIpuni.vlan}}</td>
 228                                         <td class="minimal-width"><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>
 229                                     </tr>
 230                                 </tbody>
 231                             </table>
 232                         </td>
 233                          -->
 234                     </tr>
 235                 </tbody>
 236             </table>
 237         </div>
 238         <div ng-show="isTabSet('tenantData',6)">
 239             <div class="table-header">Tenant UNIs</div>
 240             <table class="footable table table-striped">
 241                 <thead>
 242                     <tr>
 243                         <th class="minimal-width">Device</th>
 244                         <th class="minimal-width">UNI</th>
 245                         <th>Ports</th>
 246                     </tr>
 247                 </thead>
 248                 <tbody>
 249                     <tr ng-repeat="uni in unis | orderBy: '[\'uni-id\']'">
 250                         <td class="minimal-width">{{ cesDisplayNames[uni.device] }}</td>
 251                         <td class="minimal-width">{{ uni.prettyID }}</td>
 252                         <td>
 253                         <button class="btn add-row" ng-click="expandFlags.tuni[uni['uni-id']] = true" ng-if="!expandFlags.tuni[uni['uni-id']]">
 254                             <i class="icon-plus"></i> Show Ports
 255                         </button>
 256                             <table class="footable table table-striped inner-table" ng-if="expandFlags.tuni[uni['uni-id']]">
 257                                 <thead>
 258                                     <tr>
 259                                         <th class="minimal-width">
 260                                             <button class="btn add-row" ng-click="expandFlags.tuni[uni['uni-id']] = false">
 261                                                 <i class="icon-minus"></i>
 262                                             </button>
 263                                         </th>
 264                                         <th class="minimal-width">IP UNI ID</th>
 265                                         <th class="minimal-width">VLAN</th>
 266                                         <th class="minimal-width">Address</th>
 267                                         <th>Remote Subnets</th>
 268                                         <th class="minimal-width"><button class="btn btn-md btn-info" ng-click="openIpUniDialog($event,uni)"> <i class="icon-plus"></i> </button></th>
 269                                     </tr>
 270                                 </thead>
 271                                 <tbody>
 272                                     <tr ng-repeat="ipuni in uni['ip-unis']['ip-uni'] | orderBy: '[\'ip-uni-id\']'">
 273                                         <td colspan="2" class="minimal-width">{{ ipuni['ip-uni-id'] }}</td>
 274                                         <td class="minimal-width">{{ ipuni.vlan }}</td>
 275                                         <td class="minimal-width">{{ ipuni['ip-address'] }}</td>
 276                                         <td>
 277                                         <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']]">
 278                                             <i class="icon-plus"></i> Show Subnets
 279                                         </button>
 280                                             <table class="footable table table-striped inner-table" ng-if="expandFlags.ipuni[uni['uni-id']+':'+ipuni['ip-uni-id']]">
 281                                                 <thead>
 282                                                     <tr>
 283                                                         <th class="minimal-width">
 284                                                             <button class="btn add-row" ng-click="expandFlags.ipuni[uni['uni-id']+':'+ipuni['ip-uni-id']] = false">
 285                                                                 <i class="icon-minus"></i>
 286                                                             </button>
 287                                                         </th>
 288                                                         <th>Subnet</th>
 289                                                         <th>Gateway</th>
 290                                                         <th class="minimal-width"><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>
 291                                                     </tr>
 292                                                 </thead>
 293                                                 <tbody>
 294                                                     <tr ng-repeat="subnet in subnets[uni['uni-id']][ipuni['ip-uni-id']] | orderBy: subnet" ng-if="subnets[uni['uni-id']]">
 295                                                         <td colspan="2">{{ subnet.subnet }}</td>
 296                                                         <td>{{ subnet.gateway }}</td>
 297                                                         <td class="minimal-width"><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>
 298                                                     </tr>
 299                                                 </tbody>
 300                                             </table>
 301                                         </td>
 302                                         <td class="minimal-width"><button class="btn btn-md btn-danger" ng-click="deleteIpUni(uni['uni-id'],ipuni['ip-uni-id'])"> <i class="icon-trash"></i> </button></td>
 303                                     </tr>
 304                                 </tbody>
 305                             </table>
 306                         </td>
 307                     </tr>
 308                 </tbody>
 309             </table>
 310         </div>
 311     </div>
 312     <div class="clear">
 313         <button class="btn btn-default pull-right" onclick="window.location='#/cpeui/admin/tenants'" > Back </button>
 314     </div>
 315 </div>