* 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);
+ });
+ }
+ }
+ };
});
* 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');
+ };
+
}]
);
-->
<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>
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 -->
</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>
--- /dev/null
+<!--
+
+ 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>
Code Review / usecase-ui.git / commitdiff