diff options
Diffstat (limited to 'vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management')
3 files changed, 174 insertions, 234 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 index 14ca43b5..f0b85a6e 100644 --- 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 @@ -1,11 +1,16 @@ (function () { 'use strict'; - appDS2.controller("newChangeManagementModalController", ["$uibModalInstance", "$uibModal", "AaiService", "changeManagementService", - "$log", "$scope", "_", newChangeManagementModalController]); + appDS2.controller("newChangeManagementModalController", ["$uibModalInstance", "$uibModal",'$q', "AaiService", "changeManagementService", "Upload", + "$log", "$scope", "_", "COMPONENT", "VIDCONFIGURATION", newChangeManagementModalController]); + + function newChangeManagementModalController($uibModalInstance, $uibModal,$q, AaiService, changeManagementService, Upload, $log, $scope, _, COMPONENT, VIDCONFIGURATION) { - function newChangeManagementModalController($uibModalInstance, $uibModal, AaiService, changeManagementService, $log, $scope, _) { var vm = this; + vm.configUpdatePatternError = "Invalid file type. Please select a file with a CSV extension."; + vm.configUpdateContentError = "Invalid file structure."; + + vm.softwareVersionRegex = "[-a-zA-Z0-9\.]+"; var init = function () { vm.changeManagement = {}; @@ -46,8 +51,8 @@ availableVersions.push(extractVNFModel(vnf, response.data.service, newVNFName)); } }); - var versions = _.uniqBy(availableVersions, ['modelInfo.modelVersion']); - newVNFName.availableVersions = _.uniq(versions, response.data.service, true); + var versions = _.uniqBy(availableVersions, 'modelInfo.modelVersion'); + newVNFName.availableVersions = _.sortBy(_.uniq(versions, response.data.service, true),"modelInfo.modelVersion"); }).catch(function (error) { $log.error(error); }); @@ -107,23 +112,41 @@ $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; - } - } + vm.uploadConfigFile = function (file) { + var defer = $q.defer(); + Upload.upload({ + url: "change-management/uploadConfigUpdateFile", + file: file, + transformResponse: [function (data) { + return data; + }] + }) + .then(function (configUpdateResponse) { + vm.changeManagement.configUpdateFile = configUpdateResponse && JSON.parse(configUpdateResponse.data).payload; + defer.resolve(true); + }) + .catch(function (error) { + defer.resolve(false); }); + return defer.promise; + }; - modalInstance.result.then(function (result) { - console.log("This is the result of the new change management modal.", result); - }) + + vm.openModal = function () { + $scope.widgetParameter = ""; // needed by the scheduler? + + // properties needed by the scheduler so it knows whether to show + // policy or sniro related features on the scheduler UI or not. + vm.changeManagement.policyYN = "Y"; + vm.changeManagement.sniroYN = "Y"; + + var data = { + widgetName: 'Portal-Common-Scheduler', + widgetData: vm.changeManagement, + widgetParameter: $scope.widgetParameter + }; + + window.parent.postMessage(data, VIDCONFIGURATION.SCHEDULER_PORTAL_URL); }; vm.loadSubscribers = function () { @@ -165,11 +188,11 @@ 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]); - } - }) + if (_.find(vnfsData[i]['related-to'], function (node) { + return node['node-type'] === 'vserver' + }) !== undefined) { + vm.vnfs.push(vnfsData[i]); + } } else if (nodeType === "service-instance") { vm.serviceInstances.push(vnfsData[i]); } @@ -197,63 +220,50 @@ ); }; + var fromVNFVersions = []; + vm.loadVNFVersions = function () { - vm.fromVNFVersions = []; + 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"]); - + vm.serviceInstancesToGetVersions.push({ + "model-invariant-id": vnf.properties["model-invariant-id"], + "model-version-id": vnf.properties["model-version-id"] } + ); + 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; + if (versions.length > 0) { + AaiService.getVnfVersionsByInvariantId(versions).then(function (response) { + if (response.data) { + + $log.debug("getVnfVersionsByInvariantId: response", response); + + fromVNFVersions = vm.serviceInstancesToGetVersions + .map(function (serviceInstanceToGetVersion) { + const model = _.find(response.data.model, {'model-invariant-id': serviceInstanceToGetVersion['model-invariant-id']}); + $log.debug("getVnfVersionsByInvariantId: model for " + serviceInstanceToGetVersion['model-invariant-id'], model); + + const modelVer = _.find(model["model-vers"]["model-ver"], {'model-version-id': serviceInstanceToGetVersion['model-version-id']}); + $log.debug("getVnfVersionsByInvariantId: modelVer for " + serviceInstanceToGetVersion['model-version-id'], modelVer); + + var modelVersionId = serviceInstanceToGetVersion["model-version-id"]; + var modelVersion = modelVer["model-version"]; + return {"key": modelVersionId, "value": modelVersion}; + }); + + vm.fromVNFVersions = _.uniqBy(fromVNFVersions, 'value'); + } + }) + } }; - // 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) { @@ -281,12 +291,20 @@ }); } + var getVersionNameForId = function(versionId) { + var version = _.find(fromVNFVersions, {"key": versionId}); + return version.value; + }; + vm.loadVNFNames = function () { vm.vnfNames = []; + const vnfs = vm.changeManagement.fromVNFVersion ? vm.vnfs : []; + _.forEach(vnfs, function (vnf) { - _.forEach(vm.vnfs, function (vnf) { + var selectedVersionNumber = getVersionNameForId(vm.changeManagement.fromVNFVersion); - if (vnf.properties['nf-role'] === vm.changeManagement.vnfType) { + if (vnf.properties['nf-role'] === vm.changeManagement.vnfType && + selectedVersionNumber === getVersionNameForId(vnf.properties["model-version-id"])) { var vServer = {}; _.forEach(vnf['related-to'], function (node) { @@ -295,11 +313,27 @@ } }); + var serviceInstancesIds = + _.filter(vnf['related-to'], {'node-type': 'service-instance'}) + .map(function (serviceInstance) { return serviceInstance.id }); + + var serviceInstances = _.filter(vm.serviceInstances, function(serviceInstance) { + return _.includes(serviceInstancesIds, serviceInstance.id); + }); + + // logging only + if (serviceInstancesIds.length === 0) { + $log.error("loadVNFNames: no serviceInstancesIds for vnf", vnf); + } else { + $log.debug("loadVNFNames: serviceInstancesIds", serviceInstancesIds); + $log.debug("loadVNFNames: serviceInstances", serviceInstances); + } + 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}), + "service-instance-node": serviceInstances, "modelVersionId": vnf.properties["model-version-id"], "properties": vnf.properties, 'cloudConfiguration': vServer, @@ -316,30 +350,32 @@ tenantId: '' }; - var splitedUrlByDash = _.split(url, '/', 100); + /* + e.g., in both URLs below - + - lcpCloudRegionId == 'rdm5b' + - tenantId == '0675e0709bd7444a9e13eba8b40edb3c' - cloudConfiguration.lcpCloudRegionId = splitedUrlByDash[7]; - cloudConfiguration.tenantId = splitedUrlByDash[10]; + "url": "https://aai-conexus-e2e.ecomp.cci.att.com:8443/aai/v10/cloud-infrastructure/cloud-regions/cloud-region/att-aic/rdm5b/tenants/tenant/0675e0709bd7444a9e13eba8b40edb3c/vservers/vserver/932b330d-733e-427d-a519-14eebd261f70" + "url": "/aai/v11/cloud-infrastructure/cloud-regions/cloud-region/att-aic/rdm5b/tenants/tenant/0675e0709bd7444a9e13eba8b40edb3c/vservers/vserver/932b330d-733e-427d-a519-14eebd261f70" + */ + + var cloudRegionMatch = url.match(/\/cloud-regions\/cloud-region\/[^\/]+\/([^\/]+)/); + var tenantMatch = url.match(/\/tenants\/tenant\/([^\/]+)/); + + cloudConfiguration.lcpCloudRegionId = cloudRegionMatch[1]; + cloudConfiguration.tenantId = tenantMatch[1]; 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"]; + changeManagementService.getWorkflows(vm.changeManagement.vnfNames) + .then(function(response) { + vm.workflows = response.data.workflows; + }) + .catch(function(error) { + $log.error(error); + }); }; //Must be $scope because we bind to the onchange of the html (cannot attached to vm variable). @@ -364,6 +400,14 @@ console.log("Will add version for selected vnf name: " + vnfName.name); }; + vm.isConfigUpdate = function () { + return vm.changeManagement.workflow === COMPONENT.WORKFLOWS.vnfConfigUpdate; + } + + vm.shouldShowVnfInPlaceFields = function () { + return vm.changeManagement.workflow === COMPONENT.WORKFLOWS.vnfInPlace; + }; + 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 deleted file mode 100644 index 9d270987..00000000 --- a/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.css +++ /dev/null @@ -1,130 +0,0 @@ -.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 index 71c7eb33..4473ee3b 100644 --- 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 @@ -1,51 +1,51 @@ -<link rel="stylesheet" type="text/css" href="app/vid/scripts/modals/new-change-management/new-change-management.css" /> +<link rel="stylesheet" type="text/css" href="app/vid/styles/modal-create-new.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()"> +<form class="form-create" name="newChangeManagement" ng-submit="vm.openModal();vm.close();" novalidate> <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> + <option data-tests-id="subscriberNameOption" class="subscriberNameOption" ng-repeat="item in vm.subscribers" ng-value="item['global-customer-id']" ng-disabled="!(item['is-permitted'])">{{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"> + <select class="form-control" ng-model="vm.changeManagement.serviceType" ng-change="vm.loadVNFTypes()" name="serviceType" id="serviceType" ng-options="item['service-type'] disable when !(item['is-permitted']) for item in vm.serviceTypes" required data-ng-disabled="newChangeManagement.subscriber.$pristine" data-tests-id="serviceType"> <option value="" disabled>Select service type</option> </select> </div> <div class="form-group"> - <label class="control-label">VNF type</label> + <label class="control-label">NF Role</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> + <option value="" disabled>NF Role</option> </select> </div> <div class="form-group"> - <label class="control-label">Source Version</label> + <label class="control-label">Source VNF Model 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> + <option value="" disabled>Select VNF Model Version</option> </select> </div> <div class="form-group"> - <label class="control-label">VNF name</label> + <label class="control-label">Available VNF</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> + <td class="col-md-2"><span class="vnf-versions-name">{{vnfName.name}}</span></td> + <td class="col-md-2"> + <select ng-model="vnfName.version" ng-change="vm.selectVersionForVNFName(vnfName)" class="vnf-versions-select-as-text" id="{{vnfName['invariant-id']}}-target-version-select"> + <option value="" disabled="" selected="selected">Select Target VNF Model Version</option> <option ng-repeat="version in vnfName.availableVersions">{{version.modelInfo.modelVersion}}</option> </select> </td> - <td class="col-md-3 vnf-versions-name"> + <td class="col-md-1 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> @@ -58,6 +58,32 @@ <option value="" disabled>Select workflow</option> </select> </div> + <div class="form-group" ng-if="vm.isConfigUpdate()"> + <label class="control-label">Attach configuration file</label> + <div class="file-wrapper"> + <input id="config-update-input" class="file-input" type="file" ngf-select ng-model="vm.configUpdateFile" ngf-validate-async-fn="vm.uploadConfigFile($file)" name="configUpdateFile" + accept=".csv" ngf-pattern=".csv" required> </input> + <label id="config-update-label" class="file-input-label">{{vm.configUpdateFile&&vm.configUpdateFile.name||"Select File"}} </label> + <label for="config-update-input"><span class="icon-browse"></span></label> + </div> + <label id="errorLabel" class="icon-alert error" ng-if="newChangeManagement.configUpdateFile.$error.pattern">{{vm.configUpdatePatternError}}</label> + <label id="errorContentLabel" class="icon-alert error" ng-if="newChangeManagement.configUpdateFile.$error.validateAsyncFn">{{vm.configUpdateContentError}}</label> + </div> + <div ng-if="vm.shouldShowVnfInPlaceFields()"> + <div class="form-group"> + <label class="control-label">operations-timeout</label> + <input class="form-control" ng-model="vm.changeManagement.operationTimeout" name="operationTimeout" type="text" id="operations-timeout" pattern="[0-9]+" required> + </div> + <div class="form-group"> + <label class="control-label">existing-software-version</label> + <input class="form-control" ng-model="vm.changeManagement.existingSoftwareVersion" name="existingSoftwareVersion" type="text" id="existing-software-version" pattern="{{vm.softwareVersionRegex}}" required> + </div> + <div class="form-group"> + <label class="control-label">new-software-version</label> + <input class="form-control" ng-model="vm.changeManagement.newSoftwareVersion" name="newSoftwareVersion" type="text" id="new-software-version" pattern="{{vm.softwareVersionRegex}}" required> + </div> + + </div> </div> <div class="modal-footer"> <div class="pull-right"> |