diff options
Diffstat (limited to 'usecaseui-lcm/src/main')
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="#">«</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="#">»</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> |