diff options
Diffstat (limited to 'vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management')
3 files changed, 567 insertions, 0 deletions
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.controller.js b/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.controller.js new file mode 100644 index 000000000..14ca43b56 --- /dev/null +++ b/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.controller.js @@ -0,0 +1,369 @@ +(function () { + 'use strict'; + + appDS2.controller("newChangeManagementModalController", ["$uibModalInstance", "$uibModal", "AaiService", "changeManagementService", + "$log", "$scope", "_", newChangeManagementModalController]); + + function newChangeManagementModalController($uibModalInstance, $uibModal, AaiService, changeManagementService, $log, $scope, _) { + var vm = this; + + var init = function () { + vm.changeManagement = {}; + + loadServicesCatalog(); + registerVNFNamesWatcher(); + vm.loadSubscribers(); + }; + + var loadServicesCatalog = function () { + changeManagementService.getAllSDCServices() + .then(function (response) { + vm.SDCServicesCatalog = response.data; + }) + .catch(function (error) { + $log.error(error); + }) + }; + + var registerVNFNamesWatcher = function () { + $scope.$watch('vm.changeManagement.vnfNames', function (newVal, oldVal) { + if (!oldVal || newVal && newVal.length > oldVal.length) { //JUST THE LAST ONE ADDED + var newVNFName = _.last(vm.changeManagement.vnfNames); + if (oldVal) { + vm.changeManagement.vnfNames = oldVal; + vm.changeManagement.vnfNames.push(newVNFName); + } + if (newVNFName && newVNFName["service-instance-node"]) { + var availableVersions = []; + var services = _.filter(vm.SDCServicesCatalog.services, + {"invariantUUID": newVNFName["service-instance-node"][0].properties["model-invariant-id"]}); + + _.each(services, function (service) { + changeManagementService.getSDCService(service.uuid) + .then(function (response) { + _.each(response.data.vnfs, function (vnf) { + if (newVNFName["invariant-id"] === vnf.invariantUuid) { + availableVersions.push(extractVNFModel(vnf, response.data.service, newVNFName)); + } + }); + var versions = _.uniqBy(availableVersions, ['modelInfo.modelVersion']); + newVNFName.availableVersions = _.uniq(versions, response.data.service, true); + }).catch(function (error) { + $log.error(error); + }); + }); + } + } + }, true); + }; + + var extractVNFModel = function (csarVNF, sdcService, selectionVNF) { + var versionCsarData = { + vnfInstanceId: "", + vnfName: csarVNF.name, + modelInfo: { + modelType: "vnf", + modelInvariantId: csarVNF.invariantUuid, + modelVersionId: selectionVNF.modelVersionId, + modelName: csarVNF.name, + modelVersion: csarVNF.version, + modelCustomizationName: csarVNF.modelCustomizationName, + modelCustomizationId: csarVNF.customizationUuid + }, + cloudConfiguration: { + lcpCloudRegionId: "mdt1", + tenantId: "88a6ca3ee0394ade9403f075db23167e" + }, + requestInfo: { + source: "VID", + suppressRollback: false, + requestorId: "az2016" + }, + relatedInstanceList: [ + { + relatedInstance: { + instanceId: selectionVNF["service-instance-node"]["0"].properties['service-instance-id'], + modelInfo: { + modelType: "service", + modelInvariantId: selectionVNF["service-instance-node"]["0"].properties['model-invariant-id'], + modelVersionId: selectionVNF.modelVersionId, + modelName: sdcService.name, + modelVersion: sdcService.version, + modelCustomizationName: selectionVNF["service-instance-node"]["0"].properties['model-customization-name'], //TODO: Missing + modelCustomizationId: selectionVNF["service-instance-node"]["0"].properties['model-customization-id'] + } + } + } + ], + requestParameters: { + usePreload: true + } + }; + + return versionCsarData; + }; + + vm.close = function () { + $uibModalInstance.close(); + }; + + vm.schedule = function () { + $uibModalInstance.close(vm.changeManagement); + + var modalInstance = $uibModal.open({ + templateUrl: 'app/vid/scripts/modals/new-scheduler/new-scheduler.html', + controller: 'newSchedulerController', + controllerAs: 'vm', + resolve: { + changeManagement: function () { + return vm.changeManagement; + } + } + }); + + modalInstance.result.then(function (result) { + console.log("This is the result of the new change management modal.", result); + }) + }; + + vm.loadSubscribers = function () { + vm.subscribers = []; + AaiService.getSubscribers(function (response) { + vm.subscribers = response; + }); + }; + + vm.loadServiceTypes = function () { + vm.serviceTypes = []; + + AaiService.getSubscriberServiceTypes(vm.changeManagement.subscriberId) + .then(function (response) { + vm.serviceTypes = response.data; + }) + .catch(function (error) { + $log.error(error); + }); + }; + + vm.loadVNFTypes = function () { + vm.vnfTypes = []; + vm.vnfTypesTemp = []; + vm.serviceInstances = []; + + var instances = vm.changeManagement.serviceType["service-instances"]["service-instance"]; + // var promiseArrOfGetVnfs = preparePromiseArrOfGetVnfs(instances); + + vm.vnfs = []; + + AaiService.getVnfsByCustomerIdAndServiceType( + vm.changeManagement.subscriberId, + vm.changeManagement.serviceType["service-type"] + ).then(function (response) { + var vnfsData = response.data.results; + if (vnfsData) { + for (var i = 0; i < vnfsData.length; i++) { + if (vnfsData[i]) { + const nodeType = vnfsData[i]['node-type']; + if (nodeType === "generic-vnf") { + _.forEach(vnfsData[i]['related-to'], function (node) { + if (node['node-type'] === 'vserver') { + vm.vnfs.push(vnfsData[i]); + } + }) + } else if (nodeType === "service-instance") { + vm.serviceInstances.push(vnfsData[i]); + } + } + } + + vm.vnfs = _.flattenDeep( + _.remove(vm.vnfs, function (vnf) { + var nfRole = vnf.properties['nf-role']; + if (nfRole !== undefined) { + return nfRole !== 'null' && nfRole !== ''; + } + }) + ); + + var filteredVnfs = _.uniqBy(vm.vnfs, function (vnf) { + return vnf.properties['nf-role']; + }); + + _.forEach(filteredVnfs, function (vnf) { + vm.vnfTypes.push(vnf.properties['nf-role']) + }); + } + } + ); + }; + + vm.loadVNFVersions = function () { + vm.fromVNFVersions = []; + vm.serviceInstancesToGetVersions = []; + var versions = []; + _.forEach(vm.vnfs, function (vnf) { + if (vnf.properties['nf-role'] === vm.changeManagement['vnfType']) { + + vm.serviceInstancesToGetVersions.push(vnf); + + versions.push(vnf.properties["model-invariant-id"]); + + + } + }); + + AaiService.getVnfVersionsByInvariantId(versions).then(function (response) { + if (response.data) { + var key = response.data.model["0"]["model-invariant-id"]; + var value = response.data.model["0"]["model-vers"]["model-ver"]["0"]["model-version"]; + var element = {"key": key, "value": value}; + vm.fromVNFVersions.push(element); + } + //TODO promise all and call the new api to get the versions. + // vm.fromVNFVersions.push(response.data.model["0"]["model-vers"]["model-ver"]["0"]["model-version"]); + // if(vm.serviceInstancesToGetVersions.length > 0){ + // + // var promiseArrOfGetVnfs = preparePromiseArrOfGetVersions('a9a77d5a-123e-4ca2-9eb9-0b015d2ee0fb'); + // + // Promise.all(promiseArrOfGetVnfs).then(function (allData) { + // vm.vnfs = _.flattenDeep(_.without(allData, null)); + // var filteredVnfs = _.sortedUniqBy(vm.vnfs, function (vnf) { + // return vnf.properties.vnfType; + // }); + // + // _.forEach(filteredVnfs, function (vnf) { + // vm.vnfTypes.push(vnf.properties.vnfType) + // }); + // + // }).catch(function (error) { + // $log(error); + // }); + // } + }) + // debugger; + + }; + + // function preparePromiseArrOfGetVersions(serviceInstances) { + // var promiseArr = []; + // for (var i = 0; i < serviceInstances.length; i++) { + // var modelInvariantId = serviceInstances[i].properties["model-invariant-id"]; + // promiseArr.push( + // getVnfs(modelInvariantId) + // ); + // } + // return promiseArr; + // } + + function getVnfs(modelInvariantId) { + return new Promise(function (resolve, reject) { + AaiService.getVnfVersionsByInvariantId(modelInvariantId) + .then(function (response) { + if (response.data.httpCode !== null && + response.data.httpCode === 200) { + var vnfsData = response.data.t.results; + for (var i = 0; i < vnfsData.length; i++) { + if (vnfsData[i]) { + if (vnfsData[i].nodeType === "generic-vnf") { + resolve(vnfsData[i]); + } else if (vnfsData[i].nodeType === "service-instance") { + vm.serviceInstances.push(vnfsData[i]); + } + } + } + resolve(null); + } + resolve(null); + }) + .catch(function (error) { + reject(error); + }); + }); + } + + vm.loadVNFNames = function () { + vm.vnfNames = []; + + _.forEach(vm.vnfs, function (vnf) { + + if (vnf.properties['nf-role'] === vm.changeManagement.vnfType) { + var vServer = {}; + + _.forEach(vnf['related-to'], function (node) { + if (node['node-type'] === 'vserver') { + vServer = extractLcpRegionIdAndTenantId(node.url); + } + }); + + vm.vnfNames.push({ + "id": vnf.properties["vnf-id"], + "name": vnf.properties["vnf-name"], + "invariant-id": vnf.properties["model-invariant-id"], + "service-instance-node": _.filter(vm.serviceInstances, {id: vnf["related-to"][0].id}), + "modelVersionId": vnf.properties["model-version-id"], + "properties": vnf.properties, + 'cloudConfiguration': vServer, + "relatedTo": vnf['related-to'] + }); + } + }); + }; + + function extractLcpRegionIdAndTenantId(url) { + + var cloudConfiguration = { + lcpCloudRegionId: '', + tenantId: '' + }; + + var splitedUrlByDash = _.split(url, '/', 100); + + cloudConfiguration.lcpCloudRegionId = splitedUrlByDash[7]; + cloudConfiguration.tenantId = splitedUrlByDash[10]; + + return cloudConfiguration; + }; + + vm.loadWorkFlows = function () { + var vnfs = []; + angular.forEach(vm.changeManagement.vnfNames, function (vnfName) { + vnfs.push(vnfName.name) + }); + + //TODO: When we'll have the mappings, use the backend call to get the workflows + // changeManagementService.getWorkflows(vnfs) + // .then(function(response) { + // vm.workflows = response.data; + // }) + // .catch(function(error) { + // $log.error(error); + // }); + + vm.workflows = ["Update", "Replace"]; + }; + + //Must be $scope because we bind to the onchange of the html (cannot attached to vm variable). + $scope.selectFileForVNFName = function (fileInput) { + if (fileInput && fileInput.id) { + var vnfName = _.filter(vm.changeManagement.vnfNames, {"invariant-id": fileInput.id}); + var file = fileInput.files[0]; + var fileReader = new FileReader(); + fileReader.onload = function (load) { + try { + var lines = load.target.result; + vnfName[0].selectedFile = JSON.parse(lines); + } catch (error) { + $log.error(error); + } + }; + fileReader.readAsText(file); + } + }; + + vm.selectVersionForVNFName = function (vnfName) { + console.log("Will add version for selected vnf name: " + vnfName.name); + }; + + init(); + } +})();
\ No newline at end of file diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.css b/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.css new file mode 100644 index 000000000..9d270987a --- /dev/null +++ b/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.css @@ -0,0 +1,130 @@ +.btn-white { + font-family: "Open Sans"; + border-radius: 2px; + border: 1px solid #d8d8d8; + background-color: #ffffff; + width: 94px; + height: 30px; + color: #5a5a5a; + font-size: 13px; + font-weight: 400; + line-height: 36px; + text-align: center; + padding: 4px 12px !important; +} + +.btn-primary { + font-family: "Open Sans"; + border-radius: 2px; + border: 1px solid #0091c8; + background-color: #009fdb; + width: 94px; + height: 30px; + color: #ffffff; + font-size: 13px; + font-weight: 400; + line-height: 36px; + text-align: center; + padding: 4px 12px !important; +} + +.modal-header { + border: none!important; + padding: 15px 15px 0px 15px!important; +} + +.modal-header h3 { + font-family: "Open Sans"; + color: #191919; + font-size: 22px; + font-weight: 300; + line-height: 16px; + padding-bottom: 20px; + border-bottom: 3px solid #009fdb; + +} + +.control-label { + font-family: "Open Sans"; + color: #5a5a5a; + font-size: 13px; + font-weight: 400; +} + +.modal-footer { + background-color: #eaeaea; +} + +.modal-dialog { + width: 587px; + border-radius: 8px; +} + +.modal-content { + width: 587px; + border-radius: 8px; + background-color: #ffffff; +} + +button.dropdown-toggle { + text-align: left; +} + +button[disabled].dropdown-toggle { + opacity: 1; + cursor: not-allowed; + background-color: #eee; + border: 1px solid #aaa; + color: #a0a0a0; +} + +multiselect[disabled] { + cursor: not-allowed; +} + +a.item-unselected:before { + font-family: "icomoon"!important; + content: "\e90c"; + color: #4ca90c; +} + +.modal-close { + margin: -40px 5px 0 0; + color: #5a5a5a; + font-size: 20px; + cursor: pointer; +} + +.vnf-versions-container .table { + position: relative; + background-color: #f8f8f8; + background-clip: padding-box; + border-radius: 6px; + outline: 0; +} + +.vnf-versions-name { + padding-top: 6px; + font-family: "Open Sans"; + position: absolute; +} + +.vnf-versions-select-as-text { + font-family: "Open Sans"; + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + border: none; + overflow:hidden; + background-color: #f8f8f8; + height: 31px; +} + +.vnf-files-select { + z-index: 999; + opacity: 0.0; + position: absolute; + width: 23%; + cursor: pointer; + height:100%; +} diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.html b/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.html new file mode 100644 index 000000000..71c7eb331 --- /dev/null +++ b/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.html @@ -0,0 +1,68 @@ +<link rel="stylesheet" type="text/css" href="app/vid/scripts/modals/new-change-management/new-change-management.css" /> +<div class="modal-header"> + <h3 class="modal-title" id="modal-title">New VNF Change</h3> + <span ng-click="vm.close()" class="pull-right modal-close" aria-hidden="true">×</span> +</div> +<form name="newChangeManagement" ng-submit="vm.schedule()"> + <div class="modal-body"> + <div class="form-group"> + <label class="control-label">Subscriber</label> + <select class="form-control" ng-model="vm.changeManagement.subscriberId" ng-change="vm.loadServiceTypes()" name="subscriber" id="subscriber" data-tests-id="subscriberName" required> + <option value="" disabled>Select subscriber</option> + <option data-tests-id="subscriberNameOption" ng-repeat="item in vm.subscribers" ng-value="item['global-customer-id']">{{item['subscriber-name']}}</option> + </select> + </div> + <div class="form-group"> + <label class="control-label">Service type</label> + <select class="form-control" ng-model="vm.changeManagement.serviceType" ng-change="vm.loadVNFTypes()" name="serviceType" id="serviceType" ng-options="item['service-type'] for item in vm.serviceTypes" required data-ng-disabled="newChangeManagement.subscriber.$pristine"> + <option value="" disabled>Select service type</option> + </select> + </div> + <div class="form-group"> + <label class="control-label">VNF type</label> + <select class="form-control" ng-model="vm.changeManagement.vnfType" ng-change="vm.loadVNFVersions()" name="vnfType" id="vnfType" ng-options="item for item in vm.vnfTypes" required data-ng-disabled="newChangeManagement.serviceType.$pristine"> + <option value="" disabled>Select VNF type</option> + </select> + </div> + <div class="form-group"> + <label class="control-label">Source Version</label> + <select class="form-control" ng-model="vm.changeManagement.fromVNFVersion" ng-change="vm.loadVNFNames()" name="fromVNFVersion" id="fromVNFVersion" ng-options="item.key as item.value for item in vm.fromVNFVersions" required data-ng-disabled="newChangeManagement.vnfType.$pristine"> + <option value="" disabled>Select from VNF version</option> + </select> + </div> + <div class="form-group"> + <label class="control-label">VNF name</label> + <multiselect ng-model="vm.changeManagement.vnfNames" ng-change="vm.loadWorkFlows()" name="vnfName" id="vnfName" options="vm.vnfNames" display-prop="name" id-prop="id" required data-ng-disabled="newChangeManagement.fromVNFVersion.$pristine"></multiselect> + </div> + <div ng-show="vm.changeManagement.vnfNames && vm.changeManagement.vnfNames.length > 0" class="form-group vnf-versions-container"> + <table class="table table-bordered"> + <tbody> + <tr ng-repeat="vnfName in vm.changeManagement.vnfNames"> + <td class="col-md-6"><span class="vnf-versions-name">{{vnfName.name}}</span></td> + <td class="col-md-3"> + <select ng-model="vnfName.version" ng-change="vm.selectVersionForVNFName(vnfName)" class="vnf-versions-select-as-text"> + <option value="" disabled="" selected="selected">Select Target Version</option> + <option ng-repeat="version in vnfName.availableVersions">{{version.modelInfo.modelVersion}}</option> + </select> + </td> + <td class="col-md-3 vnf-versions-name"> + <input ng-model="vnfName.filePath" onchange="angular.element(this).scope().selectFileForVNFName(this)" type="file" id="{{vnfName['invariant-id']}}" class="vnf-files-select" /> + <span class="vnf-versions-name">Select File<span class="caret"></span></span></td> + </tr> + </tbody> + </table> + </div> + <div class="form-group"> + <label class="control-label">Workflow</label> + <select class="form-control" ng-model="vm.changeManagement.workflow" name="workflow" id="workflow" ng-options="item for item in vm.workflows" required data-ng-disabled="newChangeManagement.vnfName.$pristine"> + <option value="" disabled>Select workflow</option> + </select> + </div> + </div> + <div class="modal-footer"> + <div class="pull-right"> + <button type="submit" id="submit" name="submit" class="btn btn-primary" data-ng-disabled="newChangeManagement.$invalid">Schedule</button> + <button type="button" id="cancel" name="cancel" class="btn btn-white" ng-click="vm.close()">Cancel</button> + </div> + </div> +</form> |