From ff76b5ed0aa91d5fdf9dc4f95e8b20f91ed9d072 Mon Sep 17 00:00:00 2001 From: "Sonsino, Ofir (os0695)" Date: Tue, 10 Jul 2018 15:57:37 +0300 Subject: New Angular UI from 1806 Change-Id: I39c160db0e0a6ec2e587ccf007ee1b23c6a08666 Issue-ID: VID-208 Signed-off-by: Sonsino, Ofir (os0695) --- .../vnf-instance-details.component.ts | 275 +++++++++++++++++++++ 1 file changed, 275 insertions(+) create mode 100644 vid-webpack-master/src/app/components/vnf-popup/vnf-instance-details/vnf-instance-details.component.ts (limited to 'vid-webpack-master/src/app/components/vnf-popup/vnf-instance-details/vnf-instance-details.component.ts') diff --git a/vid-webpack-master/src/app/components/vnf-popup/vnf-instance-details/vnf-instance-details.component.ts b/vid-webpack-master/src/app/components/vnf-popup/vnf-instance-details/vnf-instance-details.component.ts new file mode 100644 index 000000000..725e44293 --- /dev/null +++ b/vid-webpack-master/src/app/components/vnf-popup/vnf-instance-details/vnf-instance-details.component.ts @@ -0,0 +1,275 @@ +import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core'; +import {FormControl, FormGroup, Validators} from "@angular/forms"; +import {VNFPopupDataModel} from './vnfPopupDataModel'; +import {AaiService} from '../../../services/aaiService/aai.service'; +import { createVFModuleInstance, updateVFModuleInstance, updateVNFInstance } from '../../../service.actions'; +import {VnfInstance} from "../../../shared/models/vnfInstance"; +import {ServiceInstance} from "../../../shared/models/serviceInstance"; +import {VNFModel} from "../../../shared/models/vnfModel"; +import {InputType} from "../../../shared/models/inputTypes"; +import {ModelInfo} from "../../../shared/models/modelInfo"; +import {VfModuleInstance} from "../../../shared/models/vfModuleInstance"; +import {NgRedux, select} from "@angular-redux/store"; +import {AppState} from "../../../store/reducers"; +import {SelectOptionInterface} from "../../../shared/models/selectOption"; +import {Observable} from "rxjs/Observable"; +import {loadProductFamiliesAction} from "../../../services/aaiService/aai.actions"; +import {VnfInstanceDetailsService} from "./vnf-instance-details.service"; +import {isNullOrUndefined} from 'util'; +import {NumbersLettersUnderscoreValidator} from '../../../shared/components/validators/numbersLettersUnderscore/numbersLettersUnderscore.validator'; +import * as _ from "lodash"; +import {ServiceNodeTypes} from "../../../shared/models/ServiceNodeTypes"; + +@Component({ + selector: 'vnf-instance-details', + templateUrl: 'vnf-instance-details.html', + styleUrls: ['vnf-instance-details.scss'], + providers: [AaiService] +}) + +export class VnfInstanceDetailsComponent implements OnInit { + @ViewChild('vnfForm') vnfForm: 'VnfForm'; + _vnfModel: VNFModel; + @Input () + set vnfModel(vnfModel: VNFModel) { + this._vnfModel = vnfModel; + this.updateFormGroupControlsFromVNFModel(); + } + @Input() vnfInstance: any; + @Input() serviceInstance: ServiceInstance; + @Input() dynamicInputs; + @Input() modelName: string; + @Input() serviceUuid: string; + @Input() userProvidedNaming: boolean; + _modelType: string; + @Input() + set modelType(modelType: string) { + this._modelType = modelType; + this.updateFormGroupControlsFromVNFModel(); + } + + @Input() parentModelName: string; + @Input() isNewVfModule : boolean; + + + @Output() onSubmitClick: EventEmitter = new EventEmitter(); + @Output() onServiceInstanceNameChanged : EventEmitter = new EventEmitter(); + @Output() onVolumeGroupNameChanged : EventEmitter = new EventEmitter(); + +@Output() onDataChanged: EventEmitter = new EventEmitter(); + @select(['service','productFamilies']) + readonly productFamilies : Observable; + + vnfPopupDataModel: VNFPopupDataModel = new VNFPopupDataModel(); + lcpRegionsThatEnableLegacyRegionField = ['AAIAIC25', 'rdm3', 'rdm5a']; + shouldShowLegacyRegion: boolean; + instanceFormGroup: FormGroup = null; + inputType = InputType; + isNotUniqueInstanceName : boolean = false; + isNotUniqueVolumeGroupName : boolean = false; + + constructor(private _aaiService: AaiService, private store: NgRedux, + private _vnfInstanceDetailsService : VnfInstanceDetailsService) { + this.store.subscribe(() => { + this.updateFormData() + }); + } + + ngOnInit() { + this.updateFormGroup(); + this.subscribeToFormChanges(); + this._aaiService.getCategoryParameters(null).subscribe(); + this._aaiService.getLcpRegionsAndTenants(this.serviceInstance.globalSubscriberId, this.serviceInstance.subscriptionServiceType).subscribe(); + this.updateLegacyRegionVisibility(); + this.store.dispatch(loadProductFamiliesAction()); + } + + isInputShouldBeShown(inputType: any) { + let vnfInputs = [InputType.LCP_REGION, InputType.LOB, InputType.TENANT, InputType.PRODUCT_FAMILY, InputType.PLATFORM, InputType.ROLLBACK]; + let vfInputs = [InputType.VG]; + let exist = false; + if (this._modelType === 'VF') { + exist = vnfInputs.indexOf(inputType) > -1; + } + else { + exist = vfInputs.indexOf(inputType) > -1; + } + return exist; + } + + updateFormGroupControlsFromVNFModel() { + if (this._vnfModel && this._modelType) { + if (this._modelType === ServiceNodeTypes.VF) { + const vnfInstance = this.vnfInstance; + if (this.instanceFormGroup && this.userProvidedNaming + && !this.instanceFormGroup.get('instanceName')) { + const initialInstanceName = vnfInstance.instanceName || (!isNullOrUndefined(this._vnfModel.name) ? this._vnfModel.name.replace(/[-]/g, "") : this._vnfModel.name); + this.instanceFormGroup.addControl('instanceName', new FormControl(initialInstanceName, Validators.compose([Validators.required, NumbersLettersUnderscoreValidator.valid]))) + } + } + else if (this._modelType === ServiceNodeTypes.VFmodule) { + const vfInstance = this.vnfInstance; + if (this.instanceFormGroup && this.userProvidedNaming && !this.instanceFormGroup.get('instanceName')) { + this.instanceFormGroup.addControl('instanceName', new FormControl(vfInstance.instanceName, Validators.required)); + + let vfModule = this.extractVfAccordingToVfModuleUuid(this.store.getState(), this._vnfModel.uuid); + if (vfModule.volumeGroupAllowed && !this.instanceFormGroup.get('volumeGroupName')) { + this.instanceFormGroup.addControl('volumeGroupName', new FormControl(vfInstance.volumeGroupName)); + } + } + } + } + } + + updateFormGroup() { + const tenantDisabled = !this.vnfInstance.lcpCloudRegionId; + + if (this._modelType === ServiceNodeTypes.VF) { + const vnfInstance = this.vnfInstance; + this.instanceFormGroup = new FormGroup({ + productFamilyId: new FormControl(vnfInstance.productFamilyId), + lcpCloudRegionId: new FormControl(vnfInstance.lcpCloudRegionId, Validators.required), + tenantId: new FormControl({value: vnfInstance.tenantId, disabled: tenantDisabled}, Validators.required), + legacyRegion: new FormControl(vnfInstance.legacyRegion), + lineOfBusiness: new FormControl(vnfInstance.lineOfBusiness), + platformName: new FormControl(vnfInstance.platformName, Validators.required), + }); + } + else if (this._modelType === ServiceNodeTypes.VFmodule) { + const vfInstance = this.vnfInstance; + this.instanceFormGroup = new FormGroup({ + }); + } + + this.instanceFormGroup.valueChanges.subscribe(()=> { + this.checkForUniqueInstanceName(); + this.onDataChanged.next(); + }); + + this.updateFormGroupControlsFromVNFModel(); + } + + private getParentVnfModel(): VNFModel { + const rawModel = _.get(this.store.getState().service.serviceHierarchy[this.serviceUuid], ['vnfs', this.parentModelName]); + return new VNFModel(rawModel); + } + + extractVfAccordingToVfModuleUuid(state : any,vfModuleUuid : string) { + const vnfs = this.store.getState().service.serviceHierarchy[this.serviceUuid].vnfs; + const vnfsArray = Object.values(vnfs); + for (let i = 0; i { + this.setDisabledState(val, 'tenantId'); + this.updateTenantList(val); + this.updateLegacyRegionVisibility(); + this.onDataChanged.next(); + }); + } + } + + setDisabledState(val, field: string): void { + if (val) { + this.instanceFormGroup.controls[field].enable(); + } + } + + updateLegacyRegionVisibility() { + if (this.instanceFormGroup.get('lcpCloudRegionId') !== null) { + this.shouldShowLegacyRegion = this.lcpRegionsThatEnableLegacyRegionField.indexOf(this.instanceFormGroup.get('lcpCloudRegionId').value) > -1; + if (!this.shouldShowLegacyRegion) { + this.instanceFormGroup.controls.legacyRegion.setValue(undefined); + } + } + } + + updateTenantList(cloudRegionId) { + this.resetTenantSelection(); + const tenantsForCloudRegionId = this.store.getState().service.lcpRegionsAndTenants.lcpRegionsTenantsMap[cloudRegionId]; + console.log('tenants for selected cloud region id: ' + JSON.stringify(tenantsForCloudRegionId)); + this.vnfPopupDataModel.tenants = tenantsForCloudRegionId; + } + + resetTenantSelection() { + this.instanceFormGroup.controls.tenantId.setValue(undefined); + } + + checkForUniqueInstanceName() { + let currentName = !isNullOrUndefined(this.instanceFormGroup.get('instanceName')) ? this.instanceFormGroup.get('instanceName').value : null; + + if(currentName && !this._vnfInstanceDetailsService.isUnique(this.store.getState().service.serviceInstance, this.serviceUuid, currentName, currentName === this.serviceInstance.instanceName) && this.userProvidedNaming){ + this.isNotUniqueInstanceName = true; + this.onServiceInstanceNameChanged.emit(true); + }else { + this.isNotUniqueInstanceName = false; + this.onServiceInstanceNameChanged.emit(false); + } + } + + checkForUniqueGroupName(){ + let currentName = this.instanceFormGroup.get('volumeGroupName').value; + if( !this._vnfInstanceDetailsService.isUnique(this.store.getState().service.serviceInstance, this.serviceUuid, currentName, currentName === this.serviceInstance['volumeGroupName'])){ + this.isNotUniqueVolumeGroupName = true; + this.onVolumeGroupNameChanged.emit(true); + }else { + this.isNotUniqueVolumeGroupName = false; + this.onVolumeGroupNameChanged.emit(false); + } + } + + onSubmit(formValues): void { + formValues.modelInfo = new ModelInfo(this._vnfModel); + if (this._modelType === 'VFmodule') { + let dynamicFields: { [dynamicField: string]: string; }; + dynamicFields = {}; + if(!_.isEmpty(this.dynamicInputs)) { + this.dynamicInputs.map(function (x) { + let dynamicField: string = x.id; + dynamicFields[dynamicField] = formValues[dynamicField]; + delete formValues[dynamicField]; + }); + } + formValues.instanceParams = []; + formValues.instanceParams.push(dynamicFields); + if(this.isNewVfModule){ + this.store.dispatch(createVFModuleInstance(formValues, this.modelName, this.serviceUuid)); + }else { + this.store.dispatch(updateVFModuleInstance(formValues, this.modelName, this.serviceUuid)); + } + + } + else { + formValues.isUserProvidedNaming = this.userProvidedNaming; + this.store.dispatch(updateVNFInstance(formValues, this.modelName, this.serviceUuid)); + } + window.parent.postMessage({ + eventId: 'submitIframe', + data: { + serviceModelId: this.serviceUuid + } + }, "*"); + this.onSubmitClick.emit(this.serviceUuid); + } +} -- cgit 1.2.3-korg