<div layout="column" ng-cloak>
<md-content layout-padding>
<md-input-container class="md-block">
- <label>EVC ID (Number)</label>
- <input type="number" required name="evcid" ng-model="obj.id">
- <div ng-messages="projectForm.evcid.$error">
- <div ng-message="required">Number is required!</div>
- </div>
+ <label>EVC Name</label>
+ <input type="text" required name="svcName" ng-model="obj.svc_name">
+ <div ng-messages="projectForm.svcName.$error">
+ <div ng-message="required">Name is required!</div>
+ </div>
</md-input-container>
<md-input-container class="md-block">
<label>Service Type</label>
<md-select required ng-model="obj.svc_type" name="svc_type" >
- <md-option ng-repeat="typ in params.svcTypes" value="{{ typ }}">{{ typ }}</md-option>
+ <md-option ng-repeat="typ in params.svcTypes" value="{{ typ }}">{{ typ }}</md-option>
</md-select>
<div ng-messages="projectForm.svc_type.$error">
- <div ng-message="required">This is required!</div>
- </div>
+ <div ng-message="required">This is required!</div>
+ </div>
</md-input-container>
<md-input-container class="md-block">
<label>Maximum Number of UNIs</label>
<label>Subnet</label>
<input type="text" name="subnet" ng-model="obj.subnet" ng-pattern="/\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\/(?:[1-2]?[0-9]|3[0-2])\b/">
<div ng-messages="projectForm.subnet.$error">
- <div ng-message="pattern">IP/Mask is required! (ex. 127.0.0.1/32)</div>
- </div>
+ <div ng-message="pattern">IP/Mask is required! (ex. 127.0.0.1/32)</div>
+ </div>
</md-input-container>
- <div layout-gt-sm="row" style="padding:0">
- <md-input-container class="md-block" flex-gt-sm>
- <!--
- <md-switch name="is_preserve_vlan" ng-model="obj.is_preserve_vlan">{{obj.is_preserve_vlan ? "" : "Do Not"}} Preserve VLAN</md-switch>
- -->
- <md-checkbox name="is_preserve_vlan" ng-model="obj.is_preserve_vlan">Preserve VLAN</md-checkbox>
- </md-input-container>
- <md-input-container class="md-block" ng-if="obj.is_preserve_vlan" flex-gt-sm style="margin-bottom: 0px;">
- <label>Preserved VLAN</label>
- <input required type="number" step="1" name="p_vlan" ng-model="obj.preserved_vlan">
- <div ng-messages="projectForm.p_vlan.$error">
- <div ng-message="required">Number is required!</div>
- </div>
- </md-input-container>
- </div>
- <md-input-container class="md-block" ng-init="obj.mac_timeout = 300">
- <label>Learned MAC Expiration Time (seconds)</label>
- <input type="number" step="1" name="mac_timeout" min="0" ng-model="obj.mac_timeout">
- <div ng-messages="projectForm.mac_timeout.$error">
- <div ng-message="min">Number must be positive</div>
- </div>
- </md-input-container>
- <md-input-container class="md-block" ng-init="obj.mtu_size = 1522">
- <label>EVC MTU size</label>
- <input type="number" step="1" name="mtu" min="1522" max="16384" ng-model="obj.mtu_size">
- <div ng-messages="projectForm.mtu.$error">
- <div ng-message="min">Number must be in range [1522..16384]</div>
- <div ng-message="max">Number must be in range [1522..16384]</div>
- </div>
- </md-input-container>
- <md-input-container class="md-block">
- <label>Unicast Service Frame Delivery</label>
- <md-select ng-model="obj.unicast" name="unicast">
- <md-option value="{{ undefined }}"></md-option>
- <md-option value="discard">Discard</md-option>
- <md-option value="unconditional">Unconditional</md-option>
- <md-option value="conditional">Conditional</md-option>
- </md-select>
- </md-input-container>
- <md-input-container class="md-block" ng-if-end>
- <label>Multicast Service Frame Delivery</label>
- <md-select ng-model="obj.multicast" name="multicast">
- <md-option value="{{ undefined }}"></md-option>
- <md-option value="discard">Discard</md-option>
- <md-option value="unconditional">Unconditional</md-option>
- <md-option value="conditional">Conditional</md-option>
- </md-select>
- </md-input-container>
-
+ <div layout-gt-sm="row" style="padding:0">
+ <md-input-container class="md-block" flex-gt-sm>
+ <!--
+ <md-switch name="is_preserve_vlan" ng-model="obj.is_preserve_vlan">{{obj.is_preserve_vlan ? "" : "Do Not"}} Preserve VLAN</md-switch>
+ -->
+ <md-checkbox name="is_preserve_vlan" ng-model="obj.is_preserve_vlan">Preserve VLAN</md-checkbox>
+ </md-input-container>
+ <md-input-container class="md-block" ng-if="obj.is_preserve_vlan" flex-gt-sm style="margin-bottom: 0px;">
+ <label>Preserved VLAN</label>
+ <input required type="number" step="1" name="p_vlan" ng-model="obj.preserved_vlan">
+ <div ng-messages="projectForm.p_vlan.$error">
+ <div ng-message="required">Number is required!</div>
+ </div>
+ </md-input-container>
+ </div>
+ <md-input-container class="md-block" ng-init="obj.mac_timeout = 300">
+ <label>Learned MAC Expiration Time (seconds)</label>
+ <input type="number" step="1" name="mac_timeout" min="0" ng-model="obj.mac_timeout">
+ <div ng-messages="projectForm.mac_timeout.$error">
+ <div ng-message="min">Number must be positive</div>
+ </div>
+ </md-input-container>
+ <md-input-container class="md-block" ng-init="obj.mtu_size = 1522">
+ <label>EVC MTU size</label>
+ <input type="number" step="1" name="mtu" min="1522" max="16384" ng-model="obj.mtu_size">
+ <div ng-messages="projectForm.mtu.$error">
+ <div ng-message="min">Number must be in range [1522..16384]</div>
+ <div ng-message="max">Number must be in range [1522..16384]</div>
+ </div>
+ </md-input-container>
+ <md-input-container class="md-block">
+ <label>Unicast Service Frame Delivery</label>
+ <md-select ng-model="obj.unicast" name="unicast">
+ <md-option value="{{ undefined }}"></md-option>
+ <md-option value="discard">Discard</md-option>
+ <md-option value="unconditional">Unconditional</md-option>
+ <md-option value="conditional">Conditional</md-option>
+ </md-select>
+ </md-input-container>
+ <md-input-container class="md-block" ng-if-end>
+ <label>Multicast Service Frame Delivery</label>
+ <md-select ng-model="obj.multicast" name="multicast">
+ <md-option value="{{ undefined }}"></md-option>
+ <md-option value="discard">Discard</md-option>
+ <md-option value="unconditional">Unconditional</md-option>
+ <md-option value="conditional">Conditional</md-option>
+ </md-select>
+ </md-input-container>
+
</md-content>
</div>
</md-dialog-content>
<md-button type="submit" ng-click="validate(projectForm) ? done(obj) : (invalid = true)"> Create </md-button>
</md-dialog-actions>
</form>
-</md-dialog>
\ No newline at end of file
+</md-dialog>
<div class="container" id="tenant-page">
- <h1>Tenant {{ curTenant }}</h1>
- <div class="menu">
- <ul id="EVCs-tab" class="nav nav-pills" role="tablist">
- <li ng-class="{ active: isTabSet('tenantData',1)}" ng-click="setTab('tenantData',1)" >
- <a id="evcs-configure-tab" href="#/cpeui/tenant/{{curTenant}}/L2"> <i class="icon-tasks"></i> L2 Services</a>
- </li>
- <li ng-class="{ active: isTabSet('tenantData',2)}" ng-click="setTab('tenantData',2)" >
- <a id="evcs-configure-tab" href="#/cpeui/tenant/{{curTenant}}/L3" > <i class="icon-tasks"></i> L3 Services</a>
- </li>
- <li ng-class="{ active: isTabSet('tenantData',3)}" ng-click="setTab('tenantData',3)" >
- <a id="evcs-configure-tab" href="#/cpeui/tenant/{{curTenant}}/unis"> <i class="icon-tasks"></i> UNIs</a>
- </li>
- <li id="refresh_btn" class="active refresh-btn" ng-click="updateEvcView()">
- <button class="btn add-row"> <i class="icon-refresh"></i> Refresh</button>
- </li>
- </ul>
- </div>
- <div id="EVCsContent" class="tab-content">
- <div ng-show="isTabSet('tenantData',1)">
- <div class="table-header">EVCs Table</div>
- <table class="footable table table-striped">
- <thead>
- <tr>
- <th class="minimal-width">EVC ID</th>
- <th class="minimal-width">Network Name</th>
- <th class="minimal-width">SVC Type</th>
- <th class="minimal-width">EVC Type</th>
- <th class="minimal-width">Tenant</th>
- <th colspan="2">UNIs</th>
- </tr>
- </thead>
- <tbody id="l2_table">
- <tr ng-repeat="item in evcs | orderBy : sortEvc">
- <td class="minimal-width">{{ item.evc['evc-id'] }}</td>
- <td class="minimal-width">{{ networkNames[item['svc-id']] }}</td>
- <td class="minimal-width">{{ item['svc-type'] }}</td>
- <td class="minimal-width">{{ title(item.evc['evc-type']) }}</td>
- <td class="minimal-width">{{ item['tenant-id'] }}</td>
-
- <td >
- <button class="btn add-row" ng-click="unisTables[item['svc-id']] = false" ng-if="unisTables[item['svc-id']]">
- <i class="icon-plus"></i> Show UNIs
- </button>
- <table class="footable table table-striped inner-table" ng-if="!unisTables[item['svc-id']]">
- <thead>
- <tr>
- <th class="minimal-width">
- <button class="btn add-row" ng-click="unisTables[item['svc-id']] = true">
- <i class="icon-minus"></i>
- </button>
- </th>
- <th class="minimal-width">Device</th>
- <th class="minimal-width">UNI</th>
- <th class="minimal-width" ng-if="item.isTree" >Role</th>
- <th class="minimal-width">VLANs <span style="font-size:small;color:inherit;"> (click to edit)</span></th>
- <th class="minimal-width">Profile</th>
- <th class="delete-tr">
- <button class="btn btn-md btn-info" ng-click="linkEvcUniDialog.show($event, {svc:item, unis:unis, ces:ces, profiles:profiles})">
- <i class="icon-plus"></i>
- </button>
- </th>
- </tr>
- </thead>
- <tbody>
- <tr ng-repeat-start="(ce, unis) in item.device2unis | orderBy : ce ">
- <td class="minimal-width" colspan="2" rowspan="{{unis.length}}">{{ cesDisplayNames[ce] }}</td>
- <td class="minimal-width" ng-repeat-start="uni in unis | orderBy: sortUni | limitTo :1">{{ uni.prettyID }}</td>
- <td class="minimal-width" ng-if="item.isTree">{{ uni['role'] }}</td>
- <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">
- {{ uni.vlans.join(', ') }} {{item.evc['preserve-ce-vlan-id'] ? '(Preserved)' : ''}}
- </td>
- <td class="minimal-width">{{ uni['ingress-bw-profile'] }}</td>
- <td ng-repeat-end class="delete-tr" style="white-space: nowrap;">
- <button class="btn btn-md btn-danger" ng-click="deleteEvcUni(item['svc-id'], uni['uni-id'])"> <i class="icon-trash"></i> </button>
- </td>
- </tr>
- <tr ng-repeat-end ng-repeat="uni in unis | orderBy: sortUni | limitTo :(unis.length-1) :1">
- <td>{{ uni.prettyID }}</td>
- <td ng-if="item.isTree">{{ uni['role'] }}</td>
- <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">
- {{ uni.vlans.join(', ') }} {{item.evc['preserve-ce-vlan-id'] ? '(Preserved)' : ''}}
- </td>
- <td class="minimal-width">{{ uni['ingress-bw-profile'] }}</td>
- <td class="delete-tr" style="white-space: nowrap;">
- <button class="btn btn-md btn-danger" ng-click="deleteEvcUni(item['svc-id'], uni['uni-id'])"> <i class="icon-trash"></i> </button>
- </td>
- </tr>
- </tbody>
- </table>
- </td>
-
- <td class="delete-tr"><button class="btn btn-md btn-danger" ng-click="deleteEvc(item['svc-id'])"> <i class="icon-trash"></i> </button></td>
- </tr>
-
- <!--
- <td >
- <button ng-show="!unisTables[item['svc-id']]" class="btn add-row btn-block" ng-click="unisTables[item['svc-id']] = true;">Show Unis</button>
- <button ng-show="unisTables[item['svc-id']]" class="btn add-row btn-block" ng-click="unisTables[item['svc-id']] = false;">Hide Unis</button>
- </td>
- <tr ng-repeat-end ng-show="unisTables[item['svc-id']]">
- <td colspan="6">
- <table class="footable table table-striped inner-table">
- <thead>
- <tr>
- <th>Device</th>
- <th>UNI</th>
- <th ng-if="item.isTree" >Role</th>
- <th>VLANs <span style="font-size:small;color:inherit;"> (click to edit)</span></th>
- <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>
- </tr>
- </thead>
- <tbody id="l2_table">
- <tr ng-repeat-start="(ce, unis) in item.device2unis | orderBy : ce ">
- <td rowspan="{{unis.length}}">{{ cesDisplayNames[ce] }}</td>
- <td ng-repeat-start="uni in unis | orderBy: sortUni | limitTo :1">{{ uni.prettyID }}</td>
- <td ng-if="item.isTree">{{ uni['role'] }}</td>
- <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">
- {{ uni.vlans.join(', ') }} {{item.evc['preserve-ce-vlan-id'] ? '(Preserved)' : ''}}
- </td>
- <td ng-repeat-end class="delete-tr" style="white-space: nowrap;">
- <button class="btn btn-md btn-danger" ng-click="deleteEvcUni(item['svc-id'], uni['uni-id'])"> <i class="icon-trash"></i> </button>
- </td>
- </tr>
- <tr ng-repeat-end ng-repeat="uni in unis | orderBy: sortUni | limitTo :(unis.length-1) :1">
- <td>{{ uni.prettyID }}</td>
- <td ng-if="item.isTree">{{ uni['role'] }}</td>
- <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">
- {{ uni.vlans.join(', ') }} {{item.evc['preserve-ce-vlan-id'] ? '(Preserved)' : ''}}
- </td>
- <td class="delete-tr" style="white-space: nowrap;">
- <button class="btn btn-md btn-danger" ng-click="deleteEvcUni(item['svc-id'], uni['uni-id'])"> <i class="icon-trash"></i> </button>
- </td>
- </tr>
- </tbody>
- </table>
- </td>
- </tr>
- -->
- </tbody>
- </table>
- <div><a class="btn add-row" ng-click="evcDialog.show($event,{'svcTypes':svcTypes})" >Create EVC</a></div>
- </div>
- <div ng-show="isTabSet('tenantData',2)">
- <div class="table-header">IPVCs Table</div>
- <table class="footable table table-striped">
- <thead>
- <tr>
- <th class="minimal-width">IPVC ID</th>
- <th class="minimal-width">IPVC Type</th>
- <th class="minimal-width">Tenant</th>
- <th colspan="2">UNIs</th>
- </tr>
- </thead>
- <tbody id="l2_table">
- <tr ng-repeat="ipvc in ipvcs | orderBy : sortIpvc">
- <td class="minimal-width">{{ ipvc.ipvc['ipvc-id'] }}</td>
- <td class="minimal-width">{{ ipvc.ipvc['ipvc-type'] }}</td>
- <td class="minimal-width">{{ ipvc['tenant-id'] }}</td>
- <td >
- <button class="btn add-row" ng-click="unisTables[ipvc.ipvc['ipvc-id']] = false" ng-if="unisTables[ipvc.ipvc['ipvc-id']]">
- <i class="icon-plus"></i> Show UNIs
- </button>
- <table class="footable table table-striped inner-table" ng-if="!unisTables[ipvc.ipvc['ipvc-id']]">
- <thead>
- <tr>
- <th class="minimal-width">
- <button class="btn add-row" ng-click="unisTables[ipvc.ipvc['ipvc-id']] = true">
- <i class="icon-minus"></i>
- </button>
- </th>
- <th>Device</th>
- <th>UNI</th>
- <th>IP Address</th>
- <th>Vlan</th>
- <th>Profile</th>
- <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>
- </tr>
- </thead>
- <tbody>
- <tr ng-repeat="ipuni in ipvc.ipvc.unis.uni | orderBy: 'prettyID'">
- <td colspan="2" ng-init="serviceIpuni = getMefInterfaceIpvc(ipuni['uni-id'],ipuni['ip-uni-id'])">{{ cesDisplayNames[ipuni.device] }}</td>
- <td>{{ ipuni.prettyID }}</td>
- <td>{{serviceIpuni['ip-address']}}</td>
- <td>{{serviceIpuni.vlan}}</td>
- <td class="minimal-width">{{ ipuni['ingress-bw-profile'] }}</td>
- <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>
- </tr>
- </tbody>
- </table>
- </td>
- <td class="delete-tr"><button class="btn btn-md btn-danger" ng-click="deleteEvc(ipvc['svc-id'])"> <i class="icon-trash"></i> </button></td>
- <!--
- <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>
- <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>
- </td>
- <td class="delete-tr"><button class="btn btn-md btn-danger" ng-click="deleteEvc(ipvc['svc-id'])"> <i class="icon-trash"></i> </button></td>
- </tr>
- <tr ng-repeat-end ng-show="unisTables[ipvc.ipvc['ipvc-id']]">
- <td colspan="5">
- <table class="footable table table-striped inner-table">
- <thead>
- <tr>
- <th>Device</th>
- <th>UNI</th>
- <th>IP Address</th>
- <th>vlan</th>
- <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>
- </tr>
- </thead>
- <tbody id="l2_table">
- <tr ng-repeat="ipuni in ipvc.ipvc.unis.uni">
- <td ng-init="serviceIpuni = getMefInterfaceIpvc(ipuni['uni-id'],ipuni['ip-uni-id'])">{{ cesDisplayNames[ipuni.device] }}</td>
- <td>{{ ipuni.prettyID }}</td>
- <td>{{serviceIpuni['ip-address']}}</td>
- <td>{{serviceIpuni.vlan}}</td>
- <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>
- </tr>
- </tbody>
- </table>
- </td>
- -->
- </tr>
- </tbody>
- </table>
- <div><a class="btn add-row" ng-click="ipvcDialog.show($event,{'svcTypes':svcTypes})" >Create IPVC</a></div>
- </div>
- <div ng-show="isTabSet('tenantData',3)">
- <div class="table-header">Tenant UNIs</div>
- <table class="footable table table-striped">
- <thead>
- <tr>
- <th class="minimal-width">Device</th>
- <th class="minimal-width">UNI</th>
- <th>Ports</th>
- </tr>
- </thead>
- <tbody>
- <tr ng-repeat="uni in unis | orderBy: '[\'uni-id\']'">
- <td class="minimal-width">{{ cesDisplayNames[uni.device] }}</td>
- <td class="minimal-width">{{ uni.prettyID }}</td>
- <td>
- <button class="btn add-row" ng-click="expandFlags.tuni[uni['uni-id']] = true" ng-if="!expandFlags.tuni[uni['uni-id']]">
- <i class="icon-plus"></i> Show Ports
- </button>
- <table class="footable table table-striped inner-table" ng-if="expandFlags.tuni[uni['uni-id']]">
- <thead>
- <tr>
- <th class="minimal-width">
- <button class="btn add-row" ng-click="expandFlags.tuni[uni['uni-id']] = false">
- <i class="icon-minus"></i>
- </button>
- </th>
- <th class="minimal-width">IP UNI ID</th>
- <th class="minimal-width">VLAN</th>
- <th class="minimal-width">Address</th>
- <th>Remote Subnets</th>
- <th class="delete-tr"><button class="btn btn-md btn-info" ng-click="openIpUniDialog($event,uni)"> <i class="icon-plus"></i> </button></th>
- </tr>
- </thead>
- <tbody>
- <tr ng-repeat="ipuni in uni['ip-unis']['ip-uni'] | orderBy: '[\'ip-uni-id\']'">
- <td colspan="2" class="minimal-width">{{ ipuni['ip-uni-id'] }}</td>
- <td class="minimal-width">{{ ipuni.vlan }}</td>
- <td class="minimal-width">{{ ipuni['ip-address'] }}</td>
- <td>
- <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']]">
- <i class="icon-plus"></i> Show Subnets
- </button>
- <table class="footable table table-striped inner-table" ng-if="expandFlags.ipuni[uni['uni-id']+':'+ipuni['ip-uni-id']]">
- <thead>
- <tr>
- <th class="minimal-width">
- <button class="btn add-row" ng-click="expandFlags.ipuni[uni['uni-id']+':'+ipuni['ip-uni-id']] = false">
- <i class="icon-minus"></i>
- </button>
- </th>
- <th>Subnet</th>
- <th>Gateway</th>
- <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>
- </tr>
- </thead>
- <tbody>
- <tr ng-repeat="subnet in subnets[uni['uni-id']][ipuni['ip-uni-id']] | orderBy: subnet" ng-if="subnets[uni['uni-id']]">
- <td colspan="2">{{ subnet.subnet }}</td>
- <td>{{ subnet.gateway }}</td>
- <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>
- </tr>
- </tbody>
- </table>
- </td>
- <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>
- </tr>
- </tbody>
- </table>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- <div class="clear">
- <button class="btn btn-default pull-right" onclick="window.location='#/cpeui/admin/tenants'" > Back </button>
- </div>
+ <h1>Tenant {{ curTenant }}</h1>
+ <div class="menu">
+ <ul id="EVCs-tab" class="nav nav-pills" role="tablist">
+ <li ng-class="{ active: isTabSet('tenantData',1)}" ng-click="setTab('tenantData',1)" >
+ <a id="evcs-configure-tab" href="#/cpeui/tenant/{{curTenant}}/L2"> <i class="icon-tasks"></i> L2 Services</a>
+ </li>
+ <li ng-class="{ active: isTabSet('tenantData',2)}" ng-click="setTab('tenantData',2)" >
+ <a id="evcs-configure-tab" href="#/cpeui/tenant/{{curTenant}}/L3" > <i class="icon-tasks"></i> L3 Services</a>
+ </li>
+ <li ng-class="{ active: isTabSet('tenantData',3)}" ng-click="setTab('tenantData',3)" >
+ <a id="evcs-configure-tab" href="#/cpeui/tenant/{{curTenant}}/unis"> <i class="icon-tasks"></i> UNIs</a>
+ </li>
+ <li id="refresh_btn" class="active refresh-btn" ng-click="updateEvcView()">
+ <button class="btn add-row"> <i class="icon-refresh"></i> Refresh</button>
+ </li>
+ </ul>
+ </div>
+ <div id="EVCsContent" class="tab-content">
+ <div ng-show="isTabSet('tenantData',1)">
+ <div class="table-header">EVCs Table</div>
+ <table class="footable table table-striped">
+ <thead>
+ <tr>
+ <th class="minimal-width">EVC Name</th>
+ <th class="minimal-width">EVC ID</th>
+ <th class="minimal-width">Network Name</th>
+ <th class="minimal-width">SVC Type</th>
+ <th class="minimal-width">EVC Type</th>
+ <th class="minimal-width">Tenant</th>
+ <th colspan="2">UNIs</th>
+ </tr>
+ </thead>
+ <tbody id="l2_table">
+ <tr ng-repeat="item in evcs | orderBy : 'name'">
+ <td class="minimal-width">{{ item['name'] }}</td>
+ <td class="minimal-width">{{ item.evc['evc-id'] }}</td>
+ <td class="minimal-width">{{ networkNames[item['svc-id']] }}</td>
+ <td class="minimal-width">{{ item['svc-type'] }}</td>
+ <td class="minimal-width">{{ title(item.evc['evc-type']) }}</td>
+ <td class="minimal-width">{{ item['tenant-id'] }}</td>
+
+ <td >
+ <button class="btn add-row" ng-click="unisTables[item['svc-id']] = false" ng-if="unisTables[item['svc-id']]">
+ <i class="icon-plus"></i> Show UNIs
+ </button>
+ <table class="footable table table-striped inner-table" ng-if="!unisTables[item['svc-id']]">
+ <thead>
+ <tr>
+ <th class="minimal-width">
+ <button class="btn add-row" ng-click="unisTables[item['svc-id']] = true">
+ <i class="icon-minus"></i>
+ </button>
+ </th>
+ <th class="minimal-width">Device</th>
+ <th class="minimal-width">UNI</th>
+ <th class="minimal-width" ng-if="item.isTree" >Role</th>
+ <th class="minimal-width">VLANs <span style="font-size:small;color:inherit;"> (click to edit)</span></th>
+ <th class="minimal-width">Profile</th>
+ <th class="delete-tr">
+ <button class="btn btn-md btn-info" ng-click="linkEvcUniDialog.show($event, {svc:item, unis:unis, ces:ces, profiles:profiles})">
+ <i class="icon-plus"></i>
+ </button>
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr ng-repeat-start="(ce, unis) in item.device2unis | orderBy : ce ">
+ <td class="minimal-width" colspan="2" rowspan="{{unis.length}}">{{ cesDisplayNames[ce] }}</td>
+ <td class="minimal-width" ng-repeat-start="uni in unis | orderBy: sortUni | limitTo :1">{{ uni.prettyID }}</td>
+ <td class="minimal-width" ng-if="item.isTree">{{ uni['role'] }}</td>
+ <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">
+ {{ uni.vlans.join(', ') }} {{item.evc['preserve-ce-vlan-id'] ? '(Preserved)' : ''}}
+ </td>
+ <td class="minimal-width">{{ uni['ingress-bw-profile'] }}</td>
+ <td ng-repeat-end class="delete-tr" style="white-space: nowrap;">
+ <button class="btn btn-md btn-danger" ng-click="deleteEvcUni(item['svc-id'], uni['uni-id'])"> <i class="icon-trash"></i> </button>
+ </td>
+ </tr>
+ <tr ng-repeat-end ng-repeat="uni in unis | orderBy: sortUni | limitTo :(unis.length-1) :1">
+ <td>{{ uni.prettyID }}</td>
+ <td ng-if="item.isTree">{{ uni['role'] }}</td>
+ <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">
+ {{ uni.vlans.join(', ') }} {{item.evc['preserve-ce-vlan-id'] ? '(Preserved)' : ''}}
+ </td>
+ <td class="minimal-width">{{ uni['ingress-bw-profile'] }}</td>
+ <td class="delete-tr" style="white-space: nowrap;">
+ <button class="btn btn-md btn-danger" ng-click="deleteEvcUni(item['svc-id'], uni['uni-id'])"> <i class="icon-trash"></i> </button>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+
+ <td class="delete-tr"><button class="btn btn-md btn-danger" ng-click="deleteEvc(item['svc-id'])"> <i class="icon-trash"></i> </button></td>
+ </tr>
+
+ <!--
+ <td >
+ <button ng-show="!unisTables[item['svc-id']]" class="btn add-row btn-block" ng-click="unisTables[item['svc-id']] = true;">Show Unis</button>
+ <button ng-show="unisTables[item['svc-id']]" class="btn add-row btn-block" ng-click="unisTables[item['svc-id']] = false;">Hide Unis</button>
+ </td>
+ <tr ng-repeat-end ng-show="unisTables[item['svc-id']]">
+ <td colspan="6">
+ <table class="footable table table-striped inner-table">
+ <thead>
+ <tr>
+ <th>Device</th>
+ <th>UNI</th>
+ <th ng-if="item.isTree" >Role</th>
+ <th>VLANs <span style="font-size:small;color:inherit;"> (click to edit)</span></th>
+ <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>
+ </tr>
+ </thead>
+ <tbody id="l2_table">
+ <tr ng-repeat-start="(ce, unis) in item.device2unis | orderBy : ce ">
+ <td rowspan="{{unis.length}}">{{ cesDisplayNames[ce] }}</td>
+ <td ng-repeat-start="uni in unis | orderBy: sortUni | limitTo :1">{{ uni.prettyID }}</td>
+ <td ng-if="item.isTree">{{ uni['role'] }}</td>
+ <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">
+ {{ uni.vlans.join(', ') }} {{item.evc['preserve-ce-vlan-id'] ? '(Preserved)' : ''}}
+ </td>
+ <td ng-repeat-end class="delete-tr" style="white-space: nowrap;">
+ <button class="btn btn-md btn-danger" ng-click="deleteEvcUni(item['svc-id'], uni['uni-id'])"> <i class="icon-trash"></i> </button>
+ </td>
+ </tr>
+ <tr ng-repeat-end ng-repeat="uni in unis | orderBy: sortUni | limitTo :(unis.length-1) :1">
+ <td>{{ uni.prettyID }}</td>
+ <td ng-if="item.isTree">{{ uni['role'] }}</td>
+ <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">
+ {{ uni.vlans.join(', ') }} {{item.evc['preserve-ce-vlan-id'] ? '(Preserved)' : ''}}
+ </td>
+ <td class="delete-tr" style="white-space: nowrap;">
+ <button class="btn btn-md btn-danger" ng-click="deleteEvcUni(item['svc-id'], uni['uni-id'])"> <i class="icon-trash"></i> </button>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ -->
+ </tbody>
+ </table>
+ <div><a class="btn add-row" ng-click="evcDialog.show($event,{'svcTypes':svcTypes})" >Create EVC</a></div>
+ </div>
+ <div ng-show="isTabSet('tenantData',2)">
+ <div class="table-header">IPVCs Table</div>
+ <table class="footable table table-striped">
+ <thead>
+ <tr>
+ <th class="minimal-width">IPVC Name</th>
+ <th class="minimal-width">IPVC ID</th>
+ <th class="minimal-width">IPVC Type</th>
+ <th class="minimal-width">Tenant</th>
+ <th colspan="2">UNIs</th>
+ </tr>
+ </thead>
+ <tbody id="l2_table">
+ <tr ng-repeat="ipvc in ipvcs | orderBy : 'name'">
+ <td class="minimal-width">{{ ipvc['name'] }}</td>
+ <td class="minimal-width">{{ ipvc.ipvc['ipvc-id'] }}</td>
+ <td class="minimal-width">{{ ipvc.ipvc['ipvc-type'] }}</td>
+ <td class="minimal-width">{{ ipvc['tenant-id'] }}</td>
+ <td >
+ <button class="btn add-row" ng-click="unisTables[ipvc.ipvc['ipvc-id']] = false" ng-if="unisTables[ipvc.ipvc['ipvc-id']]">
+ <i class="icon-plus"></i> Show UNIs
+ </button>
+ <table class="footable table table-striped inner-table" ng-if="!unisTables[ipvc.ipvc['ipvc-id']]">
+ <thead>
+ <tr>
+ <th class="minimal-width">
+ <button class="btn add-row" ng-click="unisTables[ipvc.ipvc['ipvc-id']] = true">
+ <i class="icon-minus"></i>
+ </button>
+ </th>
+ <th>Device</th>
+ <th>UNI</th>
+ <th>IP Address</th>
+ <th>Vlan</th>
+ <th>Profile</th>
+ <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>
+ </tr>
+ </thead>
+ <tbody>
+ <tr ng-repeat="ipuni in ipvc.ipvc.unis.uni | orderBy: 'prettyID'">
+ <td colspan="2" ng-init="serviceIpuni = getMefInterfaceIpvc(ipuni['uni-id'],ipuni['ip-uni-id'])">{{ cesDisplayNames[ipuni.device] }}</td>
+ <td>{{ ipuni.prettyID }}</td>
+ <td>{{serviceIpuni['ip-address']}}</td>
+ <td>{{serviceIpuni.vlan}}</td>
+ <td class="minimal-width">{{ ipuni['ingress-bw-profile'] }}</td>
+ <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>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ <td class="delete-tr"><button class="btn btn-md btn-danger" ng-click="deleteEvc(ipvc['svc-id'])"> <i class="icon-trash"></i> </button></td>
+ <!--
+ <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>
+ <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>
+ </td>
+ <td class="delete-tr"><button class="btn btn-md btn-danger" ng-click="deleteEvc(ipvc['svc-id'])"> <i class="icon-trash"></i> </button></td>
+ </tr>
+ <tr ng-repeat-end ng-show="unisTables[ipvc.ipvc['ipvc-id']]">
+ <td colspan="5">
+ <table class="footable table table-striped inner-table">
+ <thead>
+ <tr>
+ <th>Device</th>
+ <th>UNI</th>
+ <th>IP Address</th>
+ <th>vlan</th>
+ <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>
+ </tr>
+ </thead>
+ <tbody id="l2_table">
+ <tr ng-repeat="ipuni in ipvc.ipvc.unis.uni">
+ <td ng-init="serviceIpuni = getMefInterfaceIpvc(ipuni['uni-id'],ipuni['ip-uni-id'])">{{ cesDisplayNames[ipuni.device] }}</td>
+ <td>{{ ipuni.prettyID }}</td>
+ <td>{{serviceIpuni['ip-address']}}</td>
+ <td>{{serviceIpuni.vlan}}</td>
+ <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>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ -->
+ </tr>
+ </tbody>
+ </table>
+ <div><a class="btn add-row" ng-click="ipvcDialog.show($event,{'svcTypes':svcTypes})" >Create IPVC</a></div>
+ </div>
+ <div ng-show="isTabSet('tenantData',3)">
+ <div class="table-header">Tenant UNIs</div>
+ <table class="footable table table-striped">
+ <thead>
+ <tr>
+ <th class="minimal-width">Device</th>
+ <th class="minimal-width">UNI</th>
+ <th>Ports</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr ng-repeat="uni in unis | orderBy: '[\'uni-id\']'">
+ <td class="minimal-width">{{ cesDisplayNames[uni.device] }}</td>
+ <td class="minimal-width">{{ uni.prettyID }}</td>
+ <td>
+ <button class="btn add-row" ng-click="expandFlags.tuni[uni['uni-id']] = true" ng-if="!expandFlags.tuni[uni['uni-id']]">
+ <i class="icon-plus"></i> Show Ports
+ </button>
+ <table class="footable table table-striped inner-table" ng-if="expandFlags.tuni[uni['uni-id']]">
+ <thead>
+ <tr>
+ <th class="minimal-width">
+ <button class="btn add-row" ng-click="expandFlags.tuni[uni['uni-id']] = false">
+ <i class="icon-minus"></i>
+ </button>
+ </th>
+ <th class="minimal-width">IP UNI ID</th>
+ <th class="minimal-width">VLAN</th>
+ <th class="minimal-width">Address</th>
+ <th>Remote Subnets</th>
+ <th class="delete-tr"><button class="btn btn-md btn-info" ng-click="openIpUniDialog($event,uni)"> <i class="icon-plus"></i> </button></th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr ng-repeat="ipuni in uni['ip-unis']['ip-uni'] | orderBy: '[\'ip-uni-id\']'">
+ <td colspan="2" class="minimal-width">{{ ipuni['ip-uni-id'] }}</td>
+ <td class="minimal-width">{{ ipuni.vlan }}</td>
+ <td class="minimal-width">{{ ipuni['ip-address'] }}</td>
+ <td>
+ <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']]">
+ <i class="icon-plus"></i> Show Subnets
+ </button>
+ <table class="footable table table-striped inner-table" ng-if="expandFlags.ipuni[uni['uni-id']+':'+ipuni['ip-uni-id']]">
+ <thead>
+ <tr>
+ <th class="minimal-width">
+ <button class="btn add-row" ng-click="expandFlags.ipuni[uni['uni-id']+':'+ipuni['ip-uni-id']] = false">
+ <i class="icon-minus"></i>
+ </button>
+ </th>
+ <th>Subnet</th>
+ <th>Gateway</th>
+ <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>
+ </tr>
+ </thead>
+ <tbody>
+ <tr ng-repeat="subnet in subnets[uni['uni-id']][ipuni['ip-uni-id']] | orderBy: subnet" ng-if="subnets[uni['uni-id']]">
+ <td colspan="2">{{ subnet.subnet }}</td>
+ <td>{{ subnet.gateway }}</td>
+ <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>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ <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>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <div class="clear">
+ <button class="btn btn-default pull-right" onclick="window.location='#/cpeui/admin/tenants'" > Back </button>
+ </div>
</div>