Fix create dialog open failed.

Change-Id: I85fa9396ef3ccd6b9a3e9601f188721ba39da8c8
Issue-id: USECASEUI-36
Signed-off-by: Luji7 <lu.ji3@zte.com.cn>

5 files changed, 614 insertions, 256 deletions

diff --git a/usecaseui-lcm/src/main/webapp/app/uui/fusion/scripts/controller/ServiceTemplateService.js b/usecaseui-lcm/src/main/webapp/app/uui/fusion/scripts/controller/ServiceTemplateService.js
index 328e1bbb..e329e947 100644
--- a/usecaseui-lcm/src/main/webapp/app/uui/fusion/scripts/controller/ServiceTemplateService.js
+++ b/usecaseui-lcm/src/main/webapp/app/uui/fusion/scripts/controller/ServiceTemplateService.js
@@ -14,6 +14,245 @@
  * limitations under the License.
  */
  app.factory("ServiceTemplateService", function($http, $log) {
+   var url = '';
+   return {
+     getAllCustomers: function (processFun) {
+       return $http({
+         url: url+'/onapapi/uui-lcm/v1/customers',
+         method: 'GET',
+         data: null,
+         headers: {'Content-Type': 'application/json'}
+       }).then(function(response){
+         var customers = response.data;
+         var result = customers.map(function (customer) {
+           return {
+             name: customer['subscriber-name'],
+             id: customer['global-customer-id'],
+           };
+         });
+         processFun(result);
+       });
+     },
 
-   return {};
+     getAllServiceTypes: function (customerId, processFun) {
+       return $http({
+         url: url+'/onapapi/uui-lcm/v1/customers/' + customerId + '/service-subscriptions',
+         method: 'GET',
+         data: null,
+         headers: {'Content-Type': 'application/json'}
+       }).then(function(response){
+         var serviceSubscriptions = response.data;
+         var result = serviceSubscriptions.map(function (serviceSubscription) {
+           return {
+             name: serviceSubscription['service-type'],
+             value: serviceSubscription['service-type']
+           };
+         });
+         processFun(result);
+       });
+     },
+
+     getServiceInstances: function (customerId, serviceType, processFun) {
+       return $http({
+         url: url+'/onapapi/uui-lcm/v1/service-instances?customerId='+customerId+'&&serviceType='+serviceType,
+         method: 'GET',
+         data: null,
+         headers: {'Content-Type': 'application/json'}
+       }).then(function(response){
+         var serviceInstances = response.data;
+         var result = serviceInstances.map(function (serviceInstance) {
+           return {
+             serviceInstanceId: serviceInstance['service-instance-id'],
+             serviceInstanceName: serviceInstance['service-instance-name'],
+             serviceType: serviceInstance['service-type'],
+           };
+         });
+         processFun(result);
+       });
+     },
+
+     getAllServiceTemplates: function (processFun) {
+       return $http({
+         url: url+'/onapapi/uui-lcm/v1/service-templates',
+         method: 'GET',
+         data: null,
+         headers: {'Content-Type': 'application/json'}
+       }).then(function(response){
+         var templates = response.data;
+         var result = templates.map(function (template) {
+           return {
+             name: template.name,
+             id: template.uuid,
+             invariantUUID: template.invariantUUID,
+             version: template.version,
+             toscaModelURL: template.toscaModelURL
+           };
+         });
+         processFun(result);
+       });
+     },
+
+     getTemplateParameters: function (template, processFun) {
+       return $http({
+         url: url+'/onapapi/uui-lcm/v1/service-templates/' + template.id,
+         method: 'GET',
+         data: null,
+         headers: {'Content-Type': 'application/json'}
+       }).then(function(response){
+         var inputRsp = response.data;
+         processFun(inputRsp);
+       });
+     },
+
+     getAllVimInfo: function (processFun) {
+       return $http({
+         url: url+'/onapapi/uui-lcm/v1/locations/',
+         method: 'GET',
+         data: null,
+         headers: {'Content-Type': 'application/json'}
+       }).then(function(response){
+         var vimInfos = response.data;
+         var result = vimInfos.map(function (vim) {
+           return {
+             name: vim['cloud-owner'] + '-' + vim['cloud-region-id'],
+             value: vim['cloud-owner'] + '-' + vim['cloud-region-id']
+           };
+         });
+         processFun(result);
+       });
+     },
+
+     createService: function (customer, serviceType, service, template) {
+
+        function translateInputs(t, customer,serviceType, c) {
+              var reqParas = {
+                subscriptionServiceType: serviceType.value
+              };
+              c[t.name].parameters.forEach(function (parameter) {
+                reqParas[parameter.name] = parameter.value;// todo
+              });
+              var nestedSegments = t.nestedTemplates.map(function (nestedTemplate) {
+                return translateInputs(nestedTemplate,customer,serviceType, c);
+              });
+              return {
+                domainHost: c[t.name].location.value,// ???
+                nodeTemplateName: t.name+':'+t.version,
+                nodeType: 'service',
+                'GLOBALSUBSCIBERID': customer.id,
+                'SUBSCIBERNAME': customer.name,
+                requestParameters: reqParas,
+                segments: nestedSegments
+              };
+            }
+
+       var cache = {};
+       cache[template.name] = {
+         location: service.location.value,
+         parameters: service.parameters
+       };
+       service.segments.forEach(function (segment) {
+         cache[segment.nodeTemplateName] = {
+           location: segment.location.value,
+           parameters: segment.parameters
+         }
+       });
+       console.log('cache ----');
+       console.log(cache);
+
+       var reqPara = translateInputs(template,customer, serviceType, cache);
+       var requestBody = {
+         service: {
+           name: service.serviceName,
+           description: service.serviceDescription,
+           serviceDefId: template.invariantUUID,
+           templateId: template.uuid, // uuid ??
+           parameters: reqPara
+         }
+       };
+
+       console.log('request body: ');
+       console.log(requestBody);
+
+       return $http({
+         url: url+'/onapapi/uui-lcm/v1/services',
+         method: 'POST',
+         data: JSON.stringify(requestBody),
+         headers: {'Content-Type': 'application/json'}
+       }).then(function(response){
+         console.log('create response...');
+         console.log(response.data);
+       });
+     },
+
+     deleteService: function (serviceId) {
+       return $http({
+         url: url+'/onapapi/uui-lcm/v1/services/' + serviceId,
+         method: 'DELETE',
+         data: null,
+         headers: {'Content-Type': 'application/json'}
+       }).then(function(response){
+         console.log('delete response...');
+         console.log(response.data);
+       });
+     },
+
+     getPackages: function (processFun) {
+       return $http({
+         url: url+'/onapapi/uui-lcm/v1/vf-ns-packages',
+         method: 'GET',
+         data: null,
+         headers: {'Content-Type': 'application/json'}
+       }).then(function(response){
+         var packageRsp = response.data;
+         var packages = [];
+         packageRsp.nsPackage.forEach(function (ns) {
+           packages.push({
+             uuid: ns.uuid,
+             invariantUUID: ns.invariantUUID,
+             name: ns.name,
+             type: 'NS'
+           })
+         });
+         packageRsp.vnfPackages.forEach(function (vnf) {
+           packages.push({
+             uuid: vnf.uuid,
+             invariantUUID: vnf.invariantUUID,
+             name: vnf.name,
+             type: 'VF'
+           })
+         });
+         processFun(packages);
+       });
+     },
+
+     packageOnboard: function (onboardPackage, vims) {
+       console.log('onboard...');
+       console.log(onboardPackage);
+       console.log(vims);
+       var requestBody = {
+         csarId: onboardPackage.uuid
+       }
+       if(onboardPackage.type === 'NS') {
+         return $http({
+           url: url+'/onapapi/uui-lcm/v1/ns-packages',
+           method: 'POST',
+           data: JSON.stringify(requestBody),
+           headers: {'Content-Type': 'application/json'}
+         }).then(function(response){
+           console.log('onboard ns package response...');
+           console.log(response.data);
+         });
+       } else {
+         return $http({
+           url: url+'/onapapi/uui-lcm/v1/vf-packages',
+           method: 'POST',
+           data: JSON.stringify(requestBody),
+           headers: {'Content-Type': 'application/json'}
+         }).then(function(response){
+           console.log('onboard vf package response...');
+           console.log(response.data);
+         });
+       }
+     }
+   };
  });
diff --git a/usecaseui-lcm/src/main/webapp/app/uui/fusion/scripts/controller/lcmController.js b/usecaseui-lcm/src/main/webapp/app/uui/fusion/scripts/controller/lcmController.js
index b09cfb07..0b2d431d 100644
--- a/usecaseui-lcm/src/main/webapp/app/uui/fusion/scripts/controller/lcmController.js
+++ b/usecaseui-lcm/src/main/webapp/app/uui/fusion/scripts/controller/lcmController.js
@@ -13,38 +13,207 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-app.controller('lcmCtrl', ['$scope','$uibModal', '$log', '$http', '$timeout', '$interval', 'uiGridConstants', 'uiGridGroupingConstants',
-    function ($scope,$uibModal, $log, $http, $timeout, $interval) {
-      $scope.openCreateServiceDialog = function () {
-        console.log('start to open dialog....');
+app.controller('lcmCtrl', ['$scope', '$state', '$uibModal', '$log', '$http', '$timeout', '$interval', 'ServiceTemplateService',
+    function ($scope, $state, $uibModal, $log, $http, $timeout, $interval, ServiceTemplateService) {
+      var ctrl = this;
+      ctrl.openCreateServiceDialog = function () {
         var modalInstance = $uibModal.open({
           ariaLabelledBy: 'modal-title',
           ariaDescribedBy: 'modal-body',
           templateUrl : 'app/uui/fusion/scripts/view-models/create-service-dialog.html',
-          controller : 'createServiceCtrl'
+          controller : 'createServiceCtrl',
+          controllerAs : 'ctrl',
+          resolve: {
+            customer: function () {
+              return ctrl.customer;
+            },
+            serviceType: function () {
+              return ctrl.serviceType;
+            }
+          }
+        });
+        modalInstance.result.then(
+          function(result) {
+            console.log('receive ok button clicked!');
+            console.log(result);
+          },
+          function(reason) {
+            console.log('receive cancel button clicked!');
+            console.log(reason);
+            $log.info('Modal dismissed at: ' + new Date());
+          }
+        );
+      };
+
+      ctrl.init = function () {
+        ctrl.canCreateService = "true";
+        ServiceTemplateService.getAllCustomers(function (customers) {
+          ctrl.customers = customers;
+        });
+        ServiceTemplateService.getPackages(function (packages) {
+          ctrl.packages = packages;
+        });
+      };
+
+      ctrl.customerChanged = function () {
+        if(ctrl.customer === undefined || ctrl.customer === null) {
+          ctrl.serviceTypes = [];
+        } else {
+          ServiceTemplateService.getAllServiceTypes(ctrl.customer.id, function (serviceTypes) {
+            ctrl.serviceTypes = serviceTypes;
+          });
+        }
+        ctrl.serviceType = undefined;
+        ctrl.canCreateService = "true";
+      };
+
+      ctrl.serviceTypeChanged = function () {
+        if(ctrl.serviceType === undefined || ctrl.serviceType === null || ctrl.customer === undefined || ctrl.customer === null) {
+          ctrl.canCreateService = "true";
+          return;
+        }
+        ctrl.canCreateService = "false";
+        ServiceTemplateService.getServiceInstances(ctrl.customer.id, ctrl.serviceType.type, function (instances) {
+          ctrl.serviceInstances = instances;
+        });
+      };
+
+      ctrl.packageOnboard = function (onboardPackage) {
+        var modalInstance = $uibModal.open({
+          ariaLabelledBy: 'modal-title',
+          ariaDescribedBy: 'modal-body',
+          templateUrl : 'app/uui/fusion/scripts/view-models/vnf-ns-onboard-dialog.html',
+          controller : 'packageOnboardCtrl',
+          controllerAs : 'ctrl',
+          resolve: {
+            onboardPackage: function () {
+              return onboardPackage;
+            }
+          }
         });
         modalInstance.result.then(
-          function() {
+          function(result) {
             console.log('receive ok button clicked!');
+            console.log(result);
           },
-          function() {
+          function(reason) {
             console.log('receive cancel button clicked!');
-            $log.info('Modal dismissed at: ' + new Date())
+            console.log(reason);
+            $log.info('Modal dismissed at: ' + new Date());
           }
         );
       };
     }
   ]
 )
-.controller('createServiceCtrl',['ServiceTemplateService',
-    function($scope, $uibModalInstance, ServiceTemplateService) {
+.controller('createServiceCtrl',['$scope', '$state', '$uibModalInstance', 'ServiceTemplateService', 'customer', 'serviceType',
+    function($scope, $state, $uibModalInstance, ServiceTemplateService, customer, serviceType) {
+      var ctrl = this;
+
+      ctrl.templates = ServiceTemplateService.getAllServiceTemplates();
 
-      $scope.ok = function() {
+      ctrl.changeInput = function (serviceTemplate) {
+        var paras = serviceTemplate.inputs.map(function (input) {
+          return {
+            name: input.name,
+            description: input.description,
+            defaultValue: input.defaultValue,
+            isRequired: input.isRequired,
+            readonly: ""
+          };
+        });
+
+        var segmentsPara = serviceTemplate.nestedTemplates.map(function (nestedTemplate) {
+          var nestedParas = nestedTemplate.inputs.map(function (input) {
+            return {
+              name: input.name,
+              description: input.description,
+              defaultValue: input.defaultValue,
+              isRequired: input.isRequired,
+              readonly: ""
+            };
+          });
+          return {
+               nodeTemplateName: nestedTemplate.name,
+               location: {
+                 name: nestedTemplate.name + " location",// ???
+               },
+               parameters: nestedParas
+             };
+        });
+
+        var service = {
+          serviceName: ctrl.service.serviceName,
+          serviceDescription: ctrl.service.serviceDescription,
+          location: {
+            name: "local host" // ???
+          },
+          parameters: paras,
+          segments: segmentsPara
+        };
+        ctrl.service = service;
+      };
+
+      ctrl.serviceTemplateChanged = function (template) {
+        console.log('serviceTemplateChanged invoked... ' + template);
+        if(template === undefined || template === null) {
+          ctrl.service = undefined;
+          ctrl.realTemplate = undefined;
+        } else {
+          ServiceTemplateService.getTemplateParameters(template, function (templateRsp) {
+            ctrl.realTemplate = templateRsp;
+            ctrl.changeInput(ctrl.realTemplate);
+          });
+        }
+      };
+
+      ctrl.ok = function() {
         console.log('ok button clicked!');
+        console.log('service: ');
+        console.log(ctrl.service);
+        console.log(customer);
+        console.log(serviceType);
+        console.log(ctrl.realTemplate);
+        ServiceTemplateService.createService(customer, serviceType, ctrl.service, ctrl.realTemplate);
+        var result = 'success.';
+        $uibModalInstance.close(result);
       };
+
+      console.log($uibModalInstance);
       // cancel click
-      $scope.cancel = function() {
+      ctrl.cancel = function() {
         $uibModalInstance.dismiss('cancel');
-      }
+      };
+
+      ServiceTemplateService.getAllVimInfo(function (vims) {
+        ctrl.locations = vims;
+      });
+    }]
+).controller('packageOnboardCtrl',['$scope', '$state', '$uibModalInstance', 'ServiceTemplateService','onboardPackage',
+    function($scope, $state, $uibModalInstance, ServiceTemplateService, onboardPackage) {
+      var ctrl = this;
+
+      ServiceTemplateService.getAllVimInfo(function (vims) {
+        ctrl.packageLocations = vims;
+      });
+
+      ctrl.ok = function() {
+        var proVims = [];
+        ctrl.packageLocations.forEach(function (location) {
+          if(location.productenv) {
+            proVims.push(location.name);
+          }
+        });
+        ServiceTemplateService.packageOnboard(onboardPackage, {
+          testenv: ctrl.testenv,
+          productenv: proVims
+        });
+        $uibModalInstance.close('successfully');
+      };
+      // cancel click
+      ctrl.cancel = function() {
+        $uibModalInstance.dismiss('cancel');
+      };
+
     }]
 );
diff --git a/usecaseui-lcm/src/main/webapp/app/uui/fusion/scripts/view-models/create-service-dialog.html b/usecaseui-lcm/src/main/webapp/app/uui/fusion/scripts/view-models/create-service-dialog.html
index a00f54b9..760a067f 100644
--- a/usecaseui-lcm/src/main/webapp/app/uui/fusion/scripts/view-models/create-service-dialog.html
+++ b/usecaseui-lcm/src/main/webapp/app/uui/fusion/scripts/view-models/create-service-dialog.html
@@ -16,68 +16,101 @@
 
 -->
 <div class="modal-header" style="margin-bottom: 15px;">
-  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
   <h4 class="modal-title" id="myModalLabel">
     <span>Create</span>
   </h4>
 </div>
 
 <div class="modal-body">
-  <ul class="nav nav-tabs nav-justified vmapp-margin">
-    <li class="active basic">
-      <a href="#basicTab" style="margin-left:1px;" onclick="showBasic();" id="basicTab" data-toggle="tab">
-        <span>Base</span>
-      </a>
-    </li>
-    <li style="padding-right:2px;" class="para">
-      <a href="#" onclick="hideBasic();" data-toggle="tab">
-        <span>Template Parameters</span>
-      </a>
-    </li>
-  </ul>
+  <form class="form-horizontal" role="form" id="neForm">
 
-  <div id="basicInfoTab">
-    <div class="mT15 form-group" style="margin-left:25px;" ms-class="has-error:vmAppDialog.name==''">
-      <label class="col-sm-3 control-label">
-        <span>Service Name</span>
-        <span class="required">*</span>
-      </label>
-      <div class="col-sm-7">
-        <input type="text" id="svcName" name="svcName" class="form-control" placeholder="Service Name" maxlength="256"/>
+  <uib-tabset active="active">
+    <uib-tab heading="Base">
+      <div id="basicInfoTab" style="margin-top:20px;">
+        <div class="mT15 form-group" style="margin-left:25px;">
+          <label class="col-sm-3 control-label">
+            <span>Service Name</span>
+            <span class="required">*</span>
+          </label>
+          <div class="col-sm-7">
+            <input type="text" id="svcName" name="svcName" class="form-control" placeholder="Service Name" maxlength="256" ng-model="ctrl.service.serviceName"/>
+          </div>
+        </div>
+        <div class="mT15 form-group" style="margin-left:25px;">
+          <label class="col-sm-3 control-label">
+            <span>Service Description</span>
+            <span class="required">*</span>
+          </label>
+          <div class="col-sm-7">
+            <input type="text" id="svcDesc" name="" class="form-control" placeholder="Service Description" maxlength="256" ng-model="ctrl.service.serviceDescription"/>
+          </div>
+        </div>
+        <div class="form-group" style="margin-left:25px;margin-bottom:15px;">
+          <label class="col-sm-3 control-label">
+            <span>Service Template</span>
+            <span class="required">*</span>
+          </label>
+          <div class="col-sm-7">
+            <select class="form-control" style="padding-top: 0px;padding-bottom: 0px;" id="svcTempl" name="svcTempl" ng-change="ctrl.serviceTemplateChanged(ctrl.selectedTemplate)" ng-model="ctrl.selectedTemplate" ng-options="template.name for template in ctrl.templates">
+              <option value="">--select--</option>
+            </select>
+          </div>
+        </div>
       </div>
-    </div>
-    <div class="mT15 form-group" style="margin-left:25px;" ms-class="has-error:vmAppDialog.name==''">
-      <label class="col-sm-3 control-label">
-        <span>Service Description</span>
-        <span class="required">*</span>
-      </label>
-      <div class="col-sm-7">
-        <input type="text" id="svcDesc" name="" class="form-control" placeholder="Service Description" maxlength="256"/>
+    </uib-tab>
+    <uib-tab heading="Template Parameters">
+      <div id='templateParasTab' style="margin-top:20px;">
+        <div ng-if="ctrl.service !== undefined" class="form-group" style="margin-left:0px;margin-bottom:5px;">
+          <label class="col-sm-5 control-label">
+            <span>{{ctrl.service.location.name}}</span><span class="required">*</span>
+          </label>
+          <div class="col-sm-5">
+            <select class="form-control" style ="padding-top: 0px;padding-bottom: 0px;" ng-model="ctrl.service.location.value" ng-options="option.value for option in ctrl.locations">
+              <option value="">--select--</option>
+            </select>
+          </div>
+        </div>
+        <div ng-repeat="parameter in ctrl.service.parameters" class="mT15 form-group" style="margin-left:0px;">
+          <label class="col-sm-5 control-label">
+            <span>{{parameter.name}}</span><span ng-if="parameter.isRequired" class="required">*</span>
+          </label>
+          <div class="col-sm-5">
+            <input type="text"  name="{{parameter.description}}" class="form-control" ng-model="parameter.value" placeholder="{{parameter.name}}" value="{{parameter.defaultValue}}" ng-readonly="{{parameter.readonly}}"/>
+          </div>
+        </div>
+        <fieldset ng-repeat="segment in ctrl.service.segments" style="margin-left:25px;">
+          <legend>{{segment.nodeTemplateName}}</legend>
+          <div class="form-group" style="margin-left:0px;margin-bottom:5px;">
+            <label class="col-sm-5 control-label">
+              <span>{{segment.location.name}}</span><span class="required">*</span>
+            </label>
+            <div class="col-sm-5">
+              <select class="form-control" style ="padding-top: 0px;padding-bottom: 0px;" ng-model="segment.location.value" ng-options="option.value for option in ctrl.locations">
+                <option value="">--select--</option>
+              </select>
+            </div>
+          </div>
+          <div ng-repeat="segment_parameter in segment.parameters" class="mT15 form-group" style="margin-left:0px;">
+            <label class="col-sm-5 control-label">
+              <span>{{segment_parameter.name}}</span><span ng-if="segment_parameter.isRequired" class="required">*</span>
+            </label>
+            <div class="col-sm-5">
+              <input type="text"  name="{{segment_parameter.description}}" class="form-control" ng-model="segment_parameter.value" placeholder="{{segment_parameter.name}}" value="{{segment_parameter.defaultValue}}" ng-readonly="{{segment_parameter.readonly}}"/>
+            </div>
+          </div>
+        </fieldset>
       </div>
-    </div>
-    <div class="form-group" style="margin-left:25px;margin-bottom:15px;" ms-class="has-error:vmAppDialog.name==''">
-      <label class="col-sm-3 control-label">
-        <span>Service Template</span>
-        <span class="required">*</span>
-      </label>
-      <div class="col-sm-7">
-        <select class="form-control" style="padding-top: 0px;padding-bottom: 0px;" id="svcTempl" name="svcTempl" onchange="serviceTemplateChanged();">
-          <option value="select">--select--</option>
-          <option value="1.1">1.1</option>
-          <option value="1.2">1.2</option>
-        </select>
-      </div>
-    </div>
-  </div>
+    </uib-tab>
+  </uib-tabset>
 
-  <div id="templateParameterTab"></div>
+</form>
 </div>
 
 <div class="modal-footer">
-  <button type="button" style="width:80px;" class="btn SDBtn" ng-click="ok()" data-dismiss="modal" aria-hidden="true" id="startToCreateService">
+  <button type="button" style="width:80px;" class="btn btn-primary" ng-click="ctrl.ok()" id="startToCreateService">
     <span id="nfv-virtualApplication-iui-text-cancelBtn">OK</span>
   </button>
-  <button type="button" style="width:80px;" class="btn button-previous SDBtn" ng-click="cancel()" data-dismiss="modal">
+  <button type="button" style="width:80px;" class="btn btn-warning" ng-click="ctrl.cancel()">
     <span id="nfv-virtualApplication-iui-text-previousBtn">Cancel</span>
   </button>
 </div>
diff --git a/usecaseui-lcm/src/main/webapp/app/uui/fusion/scripts/view-models/lifecyclemanagement.html b/usecaseui-lcm/src/main/webapp/app/uui/fusion/scripts/view-models/lifecyclemanagement.html
index e0a9d2ad..b6fadfc8 100644
--- a/usecaseui-lcm/src/main/webapp/app/uui/fusion/scripts/view-models/lifecyclemanagement.html
+++ b/usecaseui-lcm/src/main/webapp/app/uui/fusion/scripts/view-models/lifecyclemanagement.html
@@ -15,97 +15,73 @@
     limitations under the License.
 
 -->
-<div class="templatemo-content-wrapper" ng-controller="lcmCtrl" ng-init="init()">
+<div class="templatemo-content-wrapper" ng-controller="lcmCtrl as ctrl" ng-init="ctrl.init()">
   <div class="templatemo-content">
     <h1 style="margin-bottom:40px">Life Cycle Manager</h1>
-    <!--ul class="nav nav-tabs nav-justified vmapp-margin"-->
-    <ul class="nav nav-tabs nav-justified vmapp-margin" style="border-bottom-color:#66B3FF">
-        <li class="active basic">
-            <a href="#" style="margin-left:1px" onclick="showService();" id="serviceTab" data-toggle="tab">
-                <span>Services</span>
-            </a>
-        </li>
-        <li style="padding-right:2px;" class="para">
-            <a href="#vnf-ns-onboard" onclick="hideService();" data-toggle="tab" id="vnfNsTab">
-                <span>Vnf/NS Packages</span>
-            </a>
-        </li>
-    </ul>
-
-    <div id="vnf-ns-onboard">
-      <table id="onbaordTable" class="table table-striped table-hover table-bordered">
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th>Type</th>
-            <th>Action</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>vBras</td>
-            <td>VNF</td>
-            <td>
-              <button class="btn btn-primary onboard-button">Onboard</button>
-            </td>
-          </tr>
-          <tr>
-            <td>network service</td>
-            <td>NS</td>
-            <td>
-              <button class="btn btn-primary onboard-button">Onboard</button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-
-    <div id="service-table">
-      <!--button id="createService" style="margin-top: 20px" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span></button-->
-      <button id="createService" style="font-size:20px" ng-click="openCreateServiceDialog()">
-        <span class="glyphicon glyphicon-plus" style="margin-top:20px;width:80px;margin-left:20px"></span>
-      </button>
-      <table class="table table-striped table-hover table-bordered" style="margin:2px">
-        <thead>
-          <tr>
-            <th>Service Instance Id</th>
-            <th>Service Name</th>
-            <th>Service Type</th>
-            <th>Action</th>
-          </tr>
-        </thead>
-        <tbody id="bb">
-          <tr>
-            <td>123</td>
-            <td>VoLTE Use Case 1</td>
-            <td>E2E Service</td>
-            <td><a href="#" class="btn btn-primary">Delete</a></td>
-          </tr>
-          <tr>
-            <td>456</td>
-            <td>VoLTE Use Case 2</td>
-            <td>E2E Service</td>
-            <td><a href="#" class="btn btn-primary">Delete</a></td>
-          </tr>
-          <tr>
-            <td>789</td>
-            <td>VoLTE Use Case 3</td>
-            <td>E2E Service</td>
-            <td><a href="#" class="btn btn-primary">Delete</a></td>
-          </tr>
-        </tbody>
-      </table>
-      <ul class="pagination pull-right">
-        <li class="disabled"><a href="#">&laquo;</a></li>
-        <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
-        <li><a href="#">2 <span class="sr-only">(current)</span></a></li>
-        <li><a href="#">3 <span class="sr-only">(current)</span></a></li>
-        <li><a href="#">4 <span class="sr-only">(current)</span></a></li>
-        <li><a href="#">5 <span class="sr-only">(current)</span></a></li>
-        <li><a href="#">&raquo;</a></li>
-      </ul>
-    </div>
 
+    <uib-tabset active="active">
+      <uib-tab heading="Services">
+        <div id="serviceTable" style="margin-top:20px;">
+          <label>
+            <span>Customer</span>
+            <span class="required">*</span>
+          </label>
+          <select id="customer" ng-change="ctrl.customerChanged()" ng-model="ctrl.customer" ng-options="c.name for c in ctrl.customers">
+            <option value="">--select--</option>
+          </select>
+          <label style="margin-left:10px">
+            <span>Service Type</span>
+            <span class="required">*</span>
+          </label>
+          <select id="serviceType" ng-change="ctrl.serviceTypeChanged()" ng-model="ctrl.serviceType" ng-options="t.name for t in ctrl.serviceTypes">
+            <option value="">--select--</option>
+          </select>
+          <button id="createService" class="btn btn-primary" style="margin-bottom:10px;margin-left:10px" ng-click="ctrl.openCreateServiceDialog()">
+            <span>Create</span>
+          </button>
+          <table class="table table-striped table-hover table-bordered" style="margin:2px">
+            <thead>
+              <tr>
+                <th>Service Instance Id</th>
+                <th>Service Name</th>
+                <th>Service Type</th>
+                <th>Action</th>
+              </tr>
+            </thead>
+            <tbody id="bb">
+              <tr ng-repeat="serviceInstance in ctrl.serviceInstances">
+                <td>{{serviceInstance.serviceInstanceId}}</td>
+                <td>{{serviceInstance.serviceInstanceName}}</td>
+                <td>{{serviceInstance.serviceType}}</td>
+                <td><a href="#" class="btn btn-primary">Delete</a></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </uib-tab>
+      <uib-tab heading="Vnf/NS Packages">
+        <div id="vnfNsPackages" style="margin-top:20px;">
+          <table id="onbaordTable" class="table table-striped table-hover table-bordered">
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Type</th>
+                <th>Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr ng-repeat="package in ctrl.packages">
+                <td>{{package.name}}</td>
+                <td>{{package.type}}</td>
+                <td>
+                  <button class="btn btn-primary onboard-button" ng-click="ctrl.packageOnboard(package)">Onboard</button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </uib-tab>
+    </uib-tabset>
 </div>
 
 <!-- Modal -->
@@ -125,110 +101,3 @@
     </div>
   </div>
 </div>
-
-<!--div id="createServiceDialog" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="content">
-        <div class="modal-header" style="margin-bottom: 15px;">
-          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-          <h4 class="modal-title" id="myModalLabel">
-            <span>Create</span>
-          </h4>
-        </div>
-        <form class="form-horizontal" role="form" id="neForm">
-          <div id="wizard">
-            <div class="modal-body">
-              <ul class="nav nav-tabs nav-justified vmapp-margin">
-                <li class="active basic">
-                  <a href="#basicTab" style="margin-left:1px;" onclick="showBasic();" id="basicTab" data-toggle="tab">
-                    <span>Base</span>
-                  </a>
-                </li>
-                <li style="padding-right:2px;" class="para">
-                  <a href="#" onclick="hideBasic();" data-toggle="tab">
-                    <span>Template Parameters</span>
-                  </a>
-                </li>
-              </ul>
-
-              <div id="basicInfoTab">
-                <div class="mT15 form-group" style="margin-left:25px;" ms-class="has-error:vmAppDialog.name==''">
-                  <label class="col-sm-3 control-label">
-                    <span>Service Name</span>
-                    <span class="required">*</span>
-                  </label>
-                  <div class="col-sm-7">
-                    <input type="text" id="svcName" name="svcName" class="form-control" placeholder="Service Name" maxlength="256"/>
-                  </div>
-                </div>
-                <div class="mT15 form-group" style="margin-left:25px;" ms-class="has-error:vmAppDialog.name==''">
-                  <label class="col-sm-3 control-label">
-                    <span>Service Description</span>
-                    <span class="required">*</span>
-                  </label>
-                  <div class="col-sm-7">
-                    <input type="text" id="svcDesc" name="" class="form-control" placeholder="Service Description" maxlength="256"/>
-                  </div>
-                </div>
-                <div class="form-group" style="margin-left:25px;margin-bottom:15px;" ms-class="has-error:vmAppDialog.name==''">
-                  <label class="col-sm-3 control-label">
-                    <span>Service Template</span>
-                    <span class="required">*</span>
-                  </label>
-                  <div class="col-sm-7">
-                    <select class="form-control" style="padding-top: 0px;padding-bottom: 0px;" id="svcTempl" name="svcTempl" onchange="serviceTemplateChanged();">
-                      <option value="select">--select--</option>
-                      <option value="1.1">1.1</option>
-                      <option value="1.2">1.2</option>
-                    </select>
-                  </div>
-                </div>
-              </div>
-
-              <div id="templateParameterTab"></div>
-            </div>
-            <div class="modal-footer">
-              <button type="button" style="width:80px;" class="btn SDBtn" data-dismiss="modal" aria-hidden="true" id="startToCreateService">
-                <span id="nfv-virtualApplication-iui-text-cancelBtn">OK</span>
-              </button>
-              <button type="button" style="width:80px;" class="btn button-previous SDBtn" data-dismiss="modal">
-                <span id="nfv-virtualApplication-iui-text-previousBtn">Cancel</span>
-              </button>
-            </div>
-          </div>
-        </form>
-      </div>
-    </div>
-  </div>
-</div-->
-
-<div id="vnf-ns-onboard-dialog" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="content">
-        <div class="modal-header" style="margin-bottom: 15px;">
-          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-          <h4 class="modal-title" id="myModalLabel">
-            <span>Select VIM Onboard Image</span>
-          </h4>
-        </div>
-        <form class="form-horizontal" role="form" id="neForm">
-          <div id="wizard">
-            <div class="modal-body">
-              <div id="vnf-ns-vim-table"></div>
-            </div>
-            <div class="modal-footer">
-              <button type="button" style="width:80px;" class="btn SDBtn" data-dismiss="modal" aria-hidden="true" id="startToCreateService">
-                <span id="nfv-virtualApplication-iui-text-cancelBtn">OK</span>
-              </button>
-              <button type="button" style="width:80px;" class="btn button-previous SDBtn" data-dismiss="modal">
-                <span id="nfv-virtualApplication-iui-text-previousBtn">Cancel</span>
-              </button>
-            </div>
-          </div>
-        </form>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/usecaseui-lcm/src/main/webapp/app/uui/fusion/scripts/view-models/vnf-ns-onboard-dialog.html b/usecaseui-lcm/src/main/webapp/app/uui/fusion/scripts/view-models/vnf-ns-onboard-dialog.html
new file mode 100644
index 00000000..b0ba9faa
--- /dev/null
+++ b/usecaseui-lcm/src/main/webapp/app/uui/fusion/scripts/view-models/vnf-ns-onboard-dialog.html
@@ -0,0 +1,48 @@
+<!--
+
+    Copyright 2016-2017 ZTE Corporation.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<div class="modal-header" style="margin-bottom: 15px;">
+  <h4 class="modal-title" id="myModalLabel">
+    <span>Select VIM Onboard Image</span>
+  </h4>
+</div>
+
+<div class="modal-body">
+  <form class="form-horizontal" role="form" id="neForm">
+    <div>
+      <table id="vnfVimNsSelection" class="table table-striped table-hover table-bordered">
+        <thead><tr><th>VIM Name</th><th>Test Environment</th><th>Product Environment</th></tr></thead>
+        <tbody>
+          <tr ng-repeat="location in ctrl.packageLocations">
+            <td>{{location.name}}</td>
+            <td><input type="radio" name="test-env" ng-model="$parent.ctrl.testenv" ng-checked="false" ng-value="location.name"/></td>
+            <td><input type="checkbox" ng-model="location.productenv" /></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </form>
+</div>
+
+<div class="modal-footer">
+  <button type="button" style="width:80px;" class="btn btn-primary" ng-click="ctrl.ok()" id="startToCreateService">
+    <span id="nfv-virtualApplication-iui-text-cancelBtn">OK</span>
+  </button>
+  <button type="button" style="width:80px;" class="btn btn-warning" ng-click="ctrl.cancel()">
+    <span id="nfv-virtualApplication-iui-text-previousBtn">Cancel</span>
+  </button>
+</div>