-<div class="container">
+<div>
<h1>Global Administration</h1>
<div class="menu">
<ul id="MainTabs" class="nav nav-pills" role="tablist">
<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" ng-init="initObj(params.svc)">
- <label>EVC Name</label>
+ <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>
</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.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;">
<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 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-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 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-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-dialog class="cpe-dialog" aria-label="Create IPVC" ng-cloak>
<md-toolbar>
<div class="md-toolbar-tools">
- <h2>Create IPVC</h2>
+ <h2>Create New L3 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>IPVC Name</label>
+ <label>Service Name</label>
<input type="text" required name="ipvcname" ng-model="obj.svc_name">
<div ng-messages="projectForm.ipvcname.$error">
<div ng-message="required">Number is required!</div>
<md-dialog class="cpe-dialog" aria-label="Update UNI" ng-cloak>
<md-toolbar>
<div class="md-toolbar-tools">
- <h2>Update {{ params.svc['svc-id'] }} Uni</h2>
+ <h2>Add UNI to {{ params.svc['name'] ? params.svc['name'] : params.svc['svc-id']}} </h2>
<span flex></span>
<md-button class="md-icon-button" aria-label="Close dialog" ng-click="cancel()">
<i class="icon-remove-sign"></i>
<md-input-container class="md-block">
<label>Device</label>
<md-select ng-model="obj.device_id" name="device">
- <md-option ng-repeat="ce in params.ces" ng-value="ce['dev-id']" default>{{ ce.displayName }}</md-option>
+ <md-option ng-repeat="ce in params.ces | orderBy: 'displayName'" ng-value="ce['dev-id']" default>{{ ce.displayName }}</md-option>
</md-select>
</md-input-container>
<md-input-container class="md-block">
<md-dialog class="cpe-dialog" aria-label="Update UNI" ng-cloak>
<md-toolbar>
<div class="md-toolbar-tools">
- <h2>Update {{ params.svc['svc-id'] }} Uni</h2>
+ <h2>Add UNI to {{ params.svc['name'] ? params.svc['name'] : params.svc['svc-id']}} </h2>
<span flex></span>
<md-button class="md-icon-button" aria-label="Close dialog" ng-click="cancel()">
<i class="icon-remove-sign"></i>
<md-input-container class="md-block">
<label>Device</label>
<md-select ng-model="obj.device_id" name="device">
- <md-option ng-repeat="ce in params.ces" ng-value="ce['dev-id']">{{ ce.displayName }}</md-option>
+ <md-option ng-repeat="ce in params.ces | orderBy: 'displayName'" ng-value="ce['dev-id']">{{ ce.displayName }}</md-option>
</md-select>
</md-input-container>
<md-input-container class="md-block">
}).join(' ');
}
- $scope.svcTypes = [ 'epl', 'evpl', 'eplan', 'evplan', 'eptree', 'evptree' ]
var evcTypes = {
'epl' : 'point-to-point',
'evpl' : 'point-to-point',
$scope.editEvc = function($event, svc) {
new CpeuiDialogs.Dialog('AddEvc', {}, function(obj) {
obj['svc-id'] = svc['svc-id'];
- CpeuiSvc.addEvc(obj, evcTypes[obj.svc_type], $scope.curTenant, function() {
+ CpeuiSvc.addEvc(obj, evcTypes[obj['svc-type']], $scope.curTenant, function() {
$scope.updateEvcView();
});
- }, addEvcController).show($event, {'svcTypes':$scope.svcTypes, svc:svc});
+ }, addEvcController).show($event, {svc:svc});
}
$scope.openMenu = function($mdOpenMenu, ev) {
if (ipvc.ipvc.unis && ipvc.ipvc.unis.uni) {
ipvc.ipvc.unis.uni.forEach(function(u){
var mefUni = $scope.getMefInterfaceIpvc(u['uni-id'],u['ip-uni-id']);
+ if (mefUni === undefined) {
+ return;
+ }
u.ipAddress = mefUni['ip-address'];
u.deviceName = $scope.cesDisplayNames[u.device];
if ($scope.subnets[u['uni-id']]) {
}, staticRoutingController).show();
}
-
var dhcpDialogController = function($scope, $mdDialog, params) {
$scope.selectedNetworks = [];
$scope.updateEnabled = function() {
$scope.selectedNetworks.forEach(function(u){
- $scope.addDhcp(u.mefUni['ip-address']);
+ if (u.mefUni) {
+ $scope.addDhcp(u.mefUni['ip-address']);
+ }
});
$scope.selectedNetworks = [];
$('md-backdrop').click();// close md-select dropdown
};
-
- $scope.openStaticAssigment = function(subnet) {
+
+ $scope.openStaticAssigment = function(subnet) {
$scope.focusedSubnet = subnet;
CpeuiSvc.getDhcpStaticAllocation($scope.vrfid, subnet.subnet, function(allocations) {
$scope.subnetAllocations = allocations;
$scope.okCallback()
$scope.dialogState = $scope.previousState;
}
-
+
$scope.updateDhcpData = function() {
CpeuiSvc.getDhcp($scope.vrfid, function(dhcps){
$scope.dhcps = dhcps;
//$scope.params.ipvcUnis = $scope.params.ipvcUnis.filter(x => $scope.dhcps[x.mefUni['ip-address']] == undefined);
});
}
-
+
$scope.getAvailableNetwork = function(){
if ($scope.dhcps !== undefined) {
- return $scope.params.ipvcUnis.filter(x => $scope.dhcps[x.mefUni['ip-address']] == undefined);
+ return $scope.params.ipvcUnis.filter(x => (x.mefUni && $scope.dhcps[x.mefUni['ip-address']] == undefined));
} else {
return $scope.params.ipvcUnis;
}
}
-
+
$scope.addDhcp = function(subnet) {
var edges = CpeUiUtils.getSubnetEdges(subnet);
CpeuiSvc.addDhcp($scope.vrfid, subnet, edges[0] ,edges[1],function(){
- // TODO find a way to getDhcp only once, after the last add
+ // TODO find a way to getDhcp only once, after the last add
$scope.updateDhcpData();
});
}
-
+
$scope.removeDhcp = function(subnet) {
$scope.confirm("This will delete this dhcp configuration",function(){
CpeuiSvc.removeDhcp($scope.vrfid, subnet, function(){
$scope.setAddingRow(false);
}
}
-
+
$scope.removeAllocation = function(subnet, mac) {
$scope.confirm("Are you sure you want to remove this allocation?",function(){
CpeuiSvc.removeDhcpStaticAllocation($scope.vrfid, subnet, mac, function(){
});
});
};
-
+
$scope.setDNS = function(primaryDns, secondaryDns) {
for (var i in $scope.dhcps) {
var allocPool = $scope.dhcps[i];
$scope.updateDhcpData();
};
-
+
$scope.openDhcpDialog = function(ipvc) {
- CpeuiSvc.getServicesVrfId(ipvc['svc-id'],function(vrfId){
+ CpeuiSvc.getServicesVrfId(ipvc['svc-id'],function(vrfId){
params = {ipvc:ipvc,ipvcUnis:[],vrfId:vrfId};
- if (ipvc.ipvc.unis && ipvc.ipvc.unis.uni) {
+ if (ipvc.ipvc.unis && ipvc.ipvc.unis.uni) {
params.ipvcUnis = angular.copy(ipvc.ipvc.unis.uni);
params.ipvcUnis.forEach(function(u){
u.mefUni = $scope.getMefInterfaceIpvc(u['uni-id'],u['ip-uni-id']);
-<div class="container" id="tenant-page">
+<div id="tenant-page">
<h1>Tenant Administration - {{ curTenant }}</h1>
<div class="menu">
<ul id="TenantsTabs" class="nav nav-pills" role="tablist">
<table class="footable table table-striped">
<thead>
<tr>
- <th class="minimal-width">CPE-ID</th>
+ <th class="minimal-width">Device ID</th>
<th class="minimal-width">Device Name</th>
<th>UNIs</th>
</tr>
</thead>
- <tbody ng-repeat="ce in ces" ng-init="ceUnis = unis.filterByField('device',ce['dev-id'])">
+ <tbody ng-repeat="ce in ces |orderBy: '[\'device-name\']'" ng-init="ceUnis = unis.filterByField('device',ce['dev-id'])">
<tr>
<td class="minimal-width" ng-bind="ce['dev-id']"></td>
<td class="minimal-width" ng-bind="ce['device-name']"></td>
<td>
- <table class="footable table table-striped inner-table">
+ <table class="footable table table-striped inner-table" style="table-layout:fixed;">
<thead>
<tr>
- <th class="minimal-width">Interface Name</th>
+ <th class="minimal-width">Port</th>
<th class="minimal-width">VLAN</th>
<th class="minimal-width">Service</th>
</tr>
</thead>
- <tbody ng-repeat="uni in ceUnis">
- <tr ng-repeat="svcs in uni.vlanToService | orderBy: '-vlan'" ng-if="uni.hasService">
+ <tbody ng-repeat="uni in ceUnis |orderBy: 'prettyID'">
+ <tr ng-repeat="svcs in uni.vlanToService | orderBy: 'vlan'" ng-if="uni.hasService">
<td rowspan="{{uni.vlanToService.length}}" ng-if="$first" ng-bind="uni.prettyID" />
<td ng-bind="svcs.vlan ? svcs.vlan : '-'" />
<td>
</tbody>
<tbody ng-if="!doesAllUniHasService(ceUnis)">
<tr>
- <td><b ng-repeat="uni in ceUnis" ng-if="!uni.hasService">{{uni.prettyID}}{{$last ? '' : ', '}}</b></td>
+ <td><b style="text-decoration: underline;">Unused:</b> <b ng-repeat="uni in ceUnis |orderBy: 'prettyID'" ng-if="!uni.hasService">{{uni.prettyID}}{{$last ? '' : ', '}}</b></td>
<td></td>
<td></td>
</tr>
<th class="minimal-width">Segmentation ID</th>
<th>UNIs</th>
<th class="minimal-width">
- <button class="btn btn-md btn-info right" ng-click="evcDialog.show($event,{'svcTypes':svcTypes})">
+ <button class="btn btn-md btn-info right" ng-click="evcDialog.show($event,{})">
<i class="icon-plus"></i>
- <md-tooltip>Create EVC</md-tooltip>
+ <md-tooltip>Create Service</md-tooltip>
</button>
</th>
</tr>
</md-input-container>
</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>
+ <button class="btn btn-md btn-danger" ng-click="deleteEvcUni(item['svc-id'], uni['uni-id'])">
+ <i class="icon-trash"></i>
+ <md-tooltip>Remove UNI</md-tooltip>
+ </button>
</td>
</tr>
</tbody>
</td>
<td class="minimal-width">
- <button class="btn btn-md btn-action" ng-click="editEvc($event,item)"> <i class="icon-edit"></i> </button>
+ <button class="btn btn-md btn-action" ng-click="editEvc($event,item)">
+ <i class="icon-edit"></i>
+ <md-tooltip>Edit Service</md-tooltip>
+ </button>
<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>
- <md-tooltip>Add UNI</md-tooltip>
+ <md-tooltip>Add UNI</md-tooltip>
+ </button>
+ <button class="btn btn-md btn-danger" ng-click="deleteEvc(item['svc-id'])">
+ <i class="icon-trash"></i>
+ <md-tooltip>Remove Service</md-tooltip>
</button>
- <button class="btn btn-md btn-danger" ng-click="deleteEvc(item['svc-id'])"> <i class="icon-trash"></i> </button>
</td>
</tr>
</tbody>
<th class="minimal-width">Service Name</th>
<th>Service Endpoints</th>
<th class="minimal-width">
- <button class="btn btn-md btn-info right" ng-click="ipvcDialog.show($event,{'svcTypes':svcTypes})">
+ <button class="btn btn-md btn-info right" ng-click="ipvcDialog.show($event,{})">
<i class="icon-plus"></i>
- <md-tooltip>Create IPVC</md-tooltip>
+ <md-tooltip>Create Service</md-tooltip>
</button>
</th>
</tr>
</tr>
</thead>
<tbody ng-if-end>
- <tr ng-repeat="ipuni in ipvc.ipvc.unis.uni | orderBy: 'prettyID'">
+ <tr ng-repeat="ipuni in ipvc.ipvc.unis.uni | orderBy: ['device','prettyID']">
<td class="minimal-width" ng-init="serviceIpuni = getMefInterfaceIpvc(ipuni['uni-id'],ipuni['ip-uni-id'])">{{ cesDisplayNames[ipuni.device] }}</td>
<td class="minimal-width">{{ ipuni.prettyID }}</td>
<td>{{serviceIpuni.vlan}}</td>
</md-select>
</md-input-container>
</td>
- <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>
+ <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>
+ <md-tooltip>Remove Endpoint</md-tooltip>
+ </button>
+ </td>
</tr>
</tbody>
</table>
<td class="minimal-width">
<div layout="column">
<div layout="row">
- <button class="btn btn-md btn-danger" ng-click="deleteEvc(ipvc['svc-id'])"> <i class="icon-trash"></i> </button>
- <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>
+ <button class="btn btn-md btn-danger" ng-click="deleteEvc(ipvc['svc-id'])"> <i class="icon-trash"></i>
+ <md-tooltip>Remove Service</md-tooltip>
+ </button>
+ <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>
+ <md-tooltip>Add Endpoint</md-tooltip>
+ </button>
</div>
<md-menu>
<button class="btn btn-md btn-action" ng-click="openMenu($mdOpenMenu, $event)" style="width:100%">