<md-dialog class="cpe-dialog" aria-label="Create EVC" ng-cloak>
<md-toolbar>
<div class="md-toolbar-tools">
- <h2>Create EVC</h2>
+ <h2>{{params.svc ? 'Edit L2 Service' : 'Create New L2 Service'}}</h2>
<span flex></span>
<md-button class="md-icon-button" aria-label="Close dialog" ng-click="cancel()">
<i class="icon-remove-sign"></i>
<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>
+ <md-input-container class="md-block" ng-init="initObj(params.svc)">
+ <label>Service Name</label>
+ <input type="text" required name="svcName" ng-model="obj.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>
+ <label>Service Type <i ng-if="params.svc"> (This field can not be edited)</i></label>
+ <md-select required ng-model="obj['svc-type']" name="svc_type" ng-disabled="params.svc">
+ <md-optgroup label="E-LINE">
+ <md-option value="epl">epl</md-option>
+ <md-option value="evpl">evpl</md-option>
+ </md-optgroup>
+ <md-optgroup label="E-LAN">
+ <md-option value="eplan">eplan</md-option>
+ <md-option value="evplan">evplan</md-option>
+ </md-optgroup>
+ <md-optgroup label="E-TREE">
+ <md-option value="eptree">eptree</md-option>
+ <md-option value="evptree">evptree</md-option>
+ </md-optgroup>
</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">
+
+ <md-input-container class="md-block">
+ <label>Segmentation ID</label>
+ <input type="number" step="1" name="segmentation_id" ng-model="obj.evc['segmentation-id']">
+ </md-input-container>
+ <!-- ////////////////////////////
+ <md-input-container class="md-block" ng-init="item=params.svc">
+ <div>Service UNIs
+ <button><i class="icon-plus"></i></button>
+ </div>
+ <table class="footable table table-striped inner-table" ng-if="!isEmpty(item.device2unis)" ng-init="expandFlags.L2[item['svc-id']] = true">
+ <thead ng-if="!expandFlags.L2[item['svc-id']]">
+ <tr>
+ <th class="minimal-width"><i ng-click="expandFlags.L2[item['svc-id']] = true" class="expand-btn icon-caret-right"></i> Show UNIs</th>
+ </tr>
+ </thead>
+ <thead ng-if-start="expandFlags.L2[item['svc-id']]">
+ <tr>
+ <th class="minimal-width"><i ng-click="expandFlags.L2[item['svc-id']] = false" class="expand-btn icon-caret-down"></i> Device </th>
+ <th class="minimal-width">Port</th>
+ <th class="minimal-width">VLANs <span style="font-size:small;color:inherit;"> (click to edit)</span></th>
+ <th class="minimal-width" ng-if="item.isTree" >Role</th>
+ <th>Bandwidth Profile</th>
+ <th class="minimal-width"></th>
+ </tr>
+ </thead>
+ <tbody ng-if-end>
+ <tr ng-repeat-start="(ce, unis) in item.device2unis | orderBy : ce ">
+ <td class="minimal-width" 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="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" ng-if="item.isTree">{{ uni['role'] }}</td>
+ <td >{{ uni['ingress-bw-profile'] }}</td>
+ <td ng-repeat-end class="minimal-width" 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="minimal-width" 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>
+ </md-input-container>
+ //////////////////////////// -->
+ <a ng-init="advancedCollapsed=true" ng-click="advancedCollapsed = !advancedCollapsed" class="btn btn-navbar btn-info">{{advancedCollapsed ? 'Show' : 'Hide'}} Advanced Options</a>
+ <md-input-container class="md-block" ng-if-start="!advancedCollapsed">
<label>Maximum Number of UNIs</label>
<input type="number" step="1" name="max_uni" ng-model="obj.max_uni">
</md-input-container>
+ <md-input-container class="md-block">
+ <label>Subnet</label>
+ <input type="text" name="subnet" ng-model="obj.evc.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>
+ </md-input-container>
+ <div layout-gt-sm="row" style="padding:0">
+ <md-input-container class="md-block" flex-gt-sm>
+ <md-checkbox name="is_preserve_vlan" ng-model="obj.evc['preserve-ce-vlan-id']">Preserve VLAN</md-checkbox>
+ </md-input-container>
+ <md-input-container class="md-block" ng-if="obj.evc['preserve-ce-vlan-id']" flex-gt-sm style="margin-bottom: 0px;">
+ <label>Preserved VLAN</label>
+ <input required type="number" step="1" name="p_vlan" ng-model="obj.evc['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">
+ <label>Learned MAC Expiration Time (seconds)</label>
+ <input type="number" step="1" name="mac_timeout" min="0" ng-model="obj.evc['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">
+ <label>EVC MTU size</label>
+ <input type="number" step="1" name="mtu" min="1522" max="16384" ng-model="obj.evc['max-svc-frame-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.evc['unicast-svc-frm-delivery']" name="unicast">
+ <md-option ng-value="undefined"></md-option>
+ <md-option ng-value="'discard'">Discard</md-option>
+ <md-option ng-value="'unconditional'">Unconditional</md-option>
+ <md-option ng-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.evc['multicast-svc-frm-delivery']" name="multicast">
+ <md-option ng-value="undefined"></md-option>
+ <md-option ng-value="'discard'">Discard</md-option>
+ <md-option ng-value="'unconditional'">Unconditional</md-option>
+ <md-option ng-value="'conditional'">Conditional</md-option>
+ </md-select>
+ </md-input-container>
- <a ng-init="advancedCollapsed=true" ng-click="advancedCollapsed = !advancedCollapsed" class="btn btn-navbar btn-info">{{advancedCollapsed ? 'Show' : 'Hide'}} Advanced Options</a>
- <div layout-gt-sm="row" ng-if-start="!advancedCollapsed">
- <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-input-container>
- <md-input-container class="md-block" ng-if="obj.is_preserve_vlan" flex-gt-sm style="margin-bottom: 0px; margin-top: 36px;">
- <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.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>
- </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>
Code Review / unimgr.git / blobdiff