add auto generated id for mef elements 82/50482/2
authorshlomi <shlomi.alfasi@hpe.com>
Sun, 15 Jan 2017 16:52:25 +0000 (18:52 +0200)
committershlomi <shlomi.alfasi@hpe.com>
Sun, 15 Jan 2017 16:59:57 +0000 (18:59 +0200)
Change-Id: Icc8ba37a8c08e5c41b112f73a5c3a6cbe97b35b2
Signed-off-by: shlomi <shlomi.alfasi@hpe.com>
dlux/cpeui/cpeui-module/src/main/resources/cpeui/dialogs/AddEvc.tpl.html
dlux/cpeui/cpeui-module/src/main/resources/cpeui/dialogs/AddIpUni.tpl.html
dlux/cpeui/cpeui-module/src/main/resources/cpeui/dialogs/AddIpvc.tpl.html
dlux/cpeui/cpeui-module/src/main/resources/cpeui/services/cpeui.services.js
dlux/cpeui/cpeui-module/src/main/resources/cpeui/services/utils.js
dlux/cpeui/cpeui-module/src/main/resources/cpeui/tenant.controller.js
dlux/cpeui/cpeui-module/src/main/resources/cpeui/tenant.tpl.html
legato-api/src/main/yang/mef-services.yang

index 8507775de0105f16f35e91308095053e20063ada..5620cd09177c19ec02bc387f2df95b4b31992e3c 100644 (file)
 <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>
index a2ef9838afde75ba3460132a4968c8acc3eec115..8ee42c94326f5da54d02f21ca0f661d82dcc155c 100644 (file)
@@ -14,8 +14,8 @@
 <div layout="column" ng-cloak>
   <md-content layout-padding>
       <md-input-container class="md-block">
-        <label>IP-UNI ID (Number)</label>
-        <input type="number" required name="ipuniid" ng-model="obj['ip-uni-id']" ng-init="obj['uni-id'] = params.uniid">
+        <label>IP-UNI Name</label>
+        <input type="text" required name="ipuniname" ng-model="obj['ip-uni-name']" ng-init="obj['uni-id'] = params.uniid">
         <div ng-messages="projectForm.ipuniid.$error">
                <div ng-message="required">Number is required!</div>
        </div>
index de444bda50e468cd263ee355e4af4e4b0f5ae333..40fbe4ca951ede61405eb3a4340543536276515e 100644 (file)
 <div layout="column" ng-cloak>
   <md-content layout-padding>
       <md-input-container class="md-block">
-        <label>IPVC ID (Number)</label>
-        <input type="number" required name="ipvcid" ng-model="obj.id">
-        <div ng-messages="projectForm.ipvcid.$error">
-               <div ng-message="required">Number is required!</div>
-       </div>
-      </md-input-container>      
-      <!-- 
+        <label>IPVC 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>
+        </div>
+      </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>IPVC 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>
+          <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>IPVC 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>
@@ -70,4 +70,4 @@
       <md-button type="submit" ng-click="done(obj)"> Create </md-button>
     </md-dialog-actions>
     </form>
-</md-dialog>
\ No newline at end of file
+</md-dialog>
index 6d41f7bba8941ea63aeff9f205bd4db98c49107f..5a169b8fbd177e2e5cb5f1432a5939308f101708 100644 (file)
@@ -1,6 +1,6 @@
 define(['app/cpeui/cpeui.module'],function(cpeui) {
 
-    cpeui.factory('CpeuiSvc', function($http) {
+    cpeui.factory('CpeuiSvc', function($http, Utils) {
         var baseUrl = "/restconf/config/mef-global:mef-global/";
         var svc = {};
 
@@ -95,7 +95,7 @@ define(['app/cpeui/cpeui.module'],function(cpeui) {
               }
           });
       };
-      
+
       svc.deleteProfile = function(name, callback) {
           $http({
               method:'DELETE',
@@ -270,7 +270,7 @@ define(['app/cpeui/cpeui.module'],function(cpeui) {
                     // copy config fields like tenant-id
                     if (confMap[u['uni-id']]){
                       for (var attrname in confMap[u['uni-id']]) {
-                        u[attrname] = confMap[u['uni-id']][attrname]; 
+                        u[attrname] = confMap[u['uni-id']][attrname];
                       }
                     }
                   });
@@ -311,13 +311,15 @@ define(['app/cpeui/cpeui.module'],function(cpeui) {
 
         // IPVCs
         svc.addIpvc = function(ipvc, tenant, callback) {
+          var ipvcId = Utils.randomId();
           var data = {
             "mef-service" :  {
-              "svc-id" : ipvc.id,
+              "svc-id" : ipvcId,
+              "name" : ipvc.svc_name,
               "svc-type" : 'eplan',
               "tenant-id" : tenant,
               "ipvc" : {
-                "ipvc-id" : ipvc.id,
+                "ipvc-id" : ipvcId,
                 "ipvc-type" : 'multipoint',
               }
             }
@@ -333,9 +335,10 @@ define(['app/cpeui/cpeui.module'],function(cpeui) {
           });
       };
 
-      svc.addIpUni = function(uniid, ipuni_id, ip_address, vlan, segmentation_id, callback) {
+      svc.addIpUni = function(uniid, ip_address, vlan, segmentation_id, callback) {
+        var ipUniId = Utils.randomId();
         var data = {"ip-uni":{
-          "ip-uni-id": ipuni_id,
+          "ip-uni-id": ipUniId,
           "ip-address": ip_address
         }};
         if (vlan){
@@ -354,7 +357,7 @@ define(['app/cpeui/cpeui.module'],function(cpeui) {
             }
         });
     };
-    
+
     svc.getAllIpUniSubnets = function(callback) {
       $http({
           method:'GET',
@@ -381,7 +384,7 @@ define(['app/cpeui/cpeui.module'],function(cpeui) {
 
   svc.addIpUniSubnet = function(uniid, ipuniid, subnet, gateway, callback) {
         var data = {
-            "subnet": 
+            "subnet":
             {
               "subnet": subnet,
               "uni-id":uniid,
@@ -392,7 +395,7 @@ define(['app/cpeui/cpeui.module'],function(cpeui) {
         $http(
             {
               method : 'POST',
-              url : "/restconf/config/mef-interfaces:mef-interfaces/subnets/",                                
+              url : "/restconf/config/mef-interfaces:mef-interfaces/subnets/",
               data : data
             }).then(function successCallback(response) {
           if (callback != undefined) {
@@ -400,9 +403,9 @@ define(['app/cpeui/cpeui.module'],function(cpeui) {
           }
         });
       };
-    
+
     svc.deleteIpUniSubnet = function(uniid, ipuni_id, subnet, callback) {
-        
+
         $http({
             method:'DELETE',
             url:"/restconf/config/mef-interfaces:mef-interfaces/subnets/subnet/"+uniid+"/"+ipuni_id+"/"+subnet.replace("/","%2F")+"/"
@@ -413,7 +416,7 @@ define(['app/cpeui/cpeui.module'],function(cpeui) {
         });
     };
     svc.deleteIpUni = function(uniid, ipuni_id, callback) {
-        
+
         $http({
             method:'DELETE',
             url:"/restconf/config/mef-interfaces:mef-interfaces/unis/uni/"+uniid+"/ip-unis/ip-uni/"+ipuni_id+"/"
@@ -423,7 +426,7 @@ define(['app/cpeui/cpeui.module'],function(cpeui) {
             }
         });
     };
-    
+
     svc.getIpUniSubnets = function(uniid, ipuni_id, callback) {
       $http({
           method:'GET',
@@ -438,7 +441,7 @@ define(['app/cpeui/cpeui.module'],function(cpeui) {
       });
     };
 
-    
+
     // EVCs
     function getJsonUnis(unis) {
             var uni_json = [];
@@ -448,17 +451,19 @@ define(['app/cpeui/cpeui.module'],function(cpeui) {
             unis.forEach(function(i){uni_json.push({"uni-id":i});});
             return uni_json;
         }
-    
+
     svc.addEvc = function(evc, evc_type, tenant, callback) {
             var uni_json = getJsonUnis(evc.unis);
 //            preserved-vlan
+            var evcId = Utils.randomId();
             var data = {
               "mef-service" :  {
-                "svc-id" : evc.id,
+                "svc-id" : evcId,
+                "name" : evc.svc_name,
                 "svc-type" : evc.svc_type,
                 "tenant-id" : tenant,
                 "evc" : {
-                  "evc-id" : evc.id,
+                  "evc-id" : evcId,
                   "evc-type" : evc_type,
                   "preserve-ce-vlan-id" : evc.is_preserve_vlan,
                   "max-svc-frame-size" : evc.mtu_size,
@@ -590,7 +595,7 @@ define(['app/cpeui/cpeui.module'],function(cpeui) {
               }
           });
       };
-      
+
       svc.deleteIpvcUni = function(svcid, uni_id, ipuni_id, callback) {
         $http({
            method:'DELETE',
@@ -601,9 +606,9 @@ define(['app/cpeui/cpeui.module'],function(cpeui) {
            }
        });
    };
-      
-      
-      
+
+
+
         svc.addEvcUni = function(svcid, uni_id, role, vlans, profile_name, callback) {
             var data = {"uni":{
                             "uni-id":uni_id,
index c181d24836bcededeb81df2e6f2bfe92b1ca4fe0..4dbe208f38cedb32b68f1f6cc09a621dd32f3dad 100644 (file)
@@ -8,4 +8,14 @@ define([ 'app/cpeui/cpeui.module' ], function(cpeui) {
           return (item[field_name] == value) != to_filter_out;
       });
   };
+
+  cpeui.factory('Utils', function() {
+      var svc = {};
+
+      svc.randomId = function () {
+          return Math.floor(Math.random() * Math.pow(2, 31));
+      };
+      return svc;
+  });
+
 });
index ab92668c8e98ac370023da620c34e4912eca9f75..75dcc49c569a9d6c25113dd8148d8304db99508b 100644 (file)
@@ -162,7 +162,7 @@ define([ 'app/cpeui/cpeui.module' ], function(cpeui) {
     };
 
     $scope.ipUniDialog = new CpeuiDialogs.Dialog('AddIpUni', {}, function(obj) {
-      CpeuiSvc.addIpUni(obj['uni-id'], obj['ip-uni-id'], obj['ip-address'], obj.vlan, obj['segmentation-id'], function() {
+      CpeuiSvc.addIpUni(obj['uni-id'], obj['ip-address'], obj.vlan, obj['segmentation-id'], function() {
         var uni = $scope.unis.filterByField('uni-id',obj['uni-id'])[0];
         if (uni['ip-unis'] == undefined || uni['ip-unis']['ip-uni'] == undefined){
           uni['ip-unis'] = {'ip-uni':[]};
@@ -313,16 +313,9 @@ define([ 'app/cpeui/cpeui.module' ], function(cpeui) {
 
     $scope.editVlanDialog = new CpeuiDialogs.Dialog('EditVlans', {}, undefined, editVlanController);
 
-    $scope.sortEvc = function(evc) {
-      return evc.evc['evc-id'];
-    };
     $scope.sortUni = function(uni) {
       return uni['uni-id'];
     };
-    $scope.sortIpvc = function(ipvc) {
-      return ipvc['ipvc-id'];
-    };
-
     init();
   });
 });
index eb8b5e5278eaad519dc54e822d9cc91aaa7ce173..acfe1158e2df2a4ad6a388797375a879bec37f7c 100644 (file)
 <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>
index b0237594ff022a76d1222bc65deb5b42a1b63983..8a23c835f0765b46f4b658d50d48b5524a17ac15 100644 (file)
@@ -1609,11 +1609,16 @@ module mef-services {
         }
       }
       leaf svc-id {
-        type mef-types:retail-svc-id-type;
-        description
-                "The MEF Service ID is a simple key used to " +
-                "distinguish MEF Service Configuration Groups.";
-        reference "[MEF10.3] Section 7.";
+          type mef-types:retail-svc-id-type;
+          description
+                  "The MEF Service ID is a simple key used to " +
+                  "distinguish MEF Service Configuration Groups.";
+          reference "[MEF10.3] Section 7.";
+        }
+      leaf name {
+          type mef-types:identifier45;
+          description
+                  "The MEF Service name.";
       }
       leaf sp-id {
         when "/mef-global:mef-global/mef-global:svc-providers" {