diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/properties-assignment')
8 files changed, 113 insertions, 18 deletions
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts index 0e3e13917a..a987564df4 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts @@ -71,6 +71,8 @@ import {TranslateService} from "../../shared/translator/translate.service"; import {ToscaFunction} from "../../../models/tosca-function"; import {SubPropertyToscaFunction} from "../../../models/sub-property-tosca-function"; import {DeclareInputComponent} from "./declare-input/declare-input.component"; +import {CustomToscaFunction} from "../../../models/default-custom-functions"; +import {ToscaFunctionType} from "../../../models/tosca-function-type.enum"; const SERVICE_SELF_TITLE = "SELF"; @Component({ @@ -83,6 +85,7 @@ export class PropertiesAssignmentComponent { component: ComponentData; componentInstanceNamesMap: { [key: string]: InstanceFeDetails } = {}; //key is the instance uniqueId componentInstanceMap: Map<string, InstanceFeDetails> = new Map<string, InstanceFeDetails>(); //key is the instance uniqueId + customToscaFunctions: Array<CustomToscaFunction> = []; propertiesNavigationData = []; instancesNavigationData = []; @@ -179,6 +182,13 @@ export class PropertiesAssignmentComponent { }, error => { }); //ignore error + + this.topologyTemplateService.getDefaultCustomFunction().toPromise().then((data) => { + for (let customFunction of data) { + this.customToscaFunctions.push(new CustomToscaFunction(customFunction)); + } + }); + this.componentServiceNg2 .getComponentResourcePropertiesData(this.component) .subscribe(response => { @@ -577,7 +587,8 @@ export class PropertiesAssignmentComponent { this.modalService.addDynamicContentToModalAndBindInputs(modal, ToscaFunctionComponent, { 'property': checkedInstanceProperty, - 'componentInstanceMap': this.componentInstanceMap + 'componentInstanceMap': this.componentInstanceMap, + 'customToscaFunctions': this.customToscaFunctions }); modal.instance.dynamicContent.instance.onValidityChange.subscribe((validationEvent: ToscaFunctionValidationEvent) => { disableSaveButtonFlag = !validationEvent.isValid; diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-concat-function/tosca-concat-function.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-concat-function/tosca-concat-function.component.html index 6320058d9d..bde29b8552 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-concat-function/tosca-concat-function.component.html +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-concat-function/tosca-concat-function.component.html @@ -30,7 +30,7 @@ <input type="text" [formControlName]="idx" [value]="parameter.value"/><br/> </ng-container> <ng-container *ngIf="parameter.type !== STRING_FUNCTION_TYPE"> - <tosca-function [property]="propertyInputList[idx]" [componentInstanceMap]="componentInstanceMap" [allowClear]="false" + <tosca-function [property]="propertyInputList[idx]" [customToscaFunctions]="customToscaFunctions" [componentInstanceMap]="componentInstanceMap" [allowClear]="false" (onValidityChange)="onFunctionValidityChange($event, idx)"> </tosca-function> </ng-container> diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-concat-function/tosca-concat-function.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-concat-function/tosca-concat-function.component.ts index ef45211ea0..dde2bc156b 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-concat-function/tosca-concat-function.component.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-concat-function/tosca-concat-function.component.ts @@ -9,6 +9,7 @@ import {PROPERTY_TYPES} from "../../../../../utils/constants"; import {InstanceFeDetails} from "../../../../../models/instance-fe-details"; import {ToscaFunctionValidationEvent} from "../tosca-function.component"; import {ToscaFunction} from "../../../../../models/tosca-function"; +import {CustomToscaFunction} from "../../../../../models/default-custom-functions"; @Component({ selector: 'app-tosca-concat-function', @@ -19,6 +20,7 @@ export class ToscaConcatFunctionComponent implements OnInit { @Input() toscaConcatFunction: ToscaConcatFunction; @Input() componentInstanceMap: Map<string, InstanceFeDetails> = new Map<string, InstanceFeDetails>(); + @Input() customToscaFunctions: Array<CustomToscaFunction> = []; @Output() onValidFunction: EventEmitter<ToscaConcatFunction> = new EventEmitter<ToscaConcatFunction>(); @Output() onValidityChange: EventEmitter<ToscaConcatFunctionValidationEvent> = new EventEmitter<ToscaConcatFunctionValidationEvent>(); diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-custom-function/tosca-custom-function.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-custom-function/tosca-custom-function.component.html index a67364cd60..f77af54c77 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-custom-function/tosca-custom-function.component.html +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-custom-function/tosca-custom-function.component.html @@ -21,8 +21,12 @@ <div class="component-container"> <ng-container [formGroup]="formGroup"> - <label>Custom function name: </label> - <input type="text" formControlName="customName" [value]="name" required/><br/><br/> + <div *ngIf="!isDefaultCustomFunction" class="i-sdc-form-item"> + <label>Custom function name: </label> + <div class="i-sdc-form-item"> + <input type="text" formControlName="customName" [value]="name" (input)="name = $event.target.value" required/> + </div> + </div> <div formArrayName="customParameterList"> <div *ngFor="let parameter of parameters; let idx = index"> <div *ngIf="idx > 0" class="text-center"><span class="custom-plus-icon"></span></div> @@ -32,7 +36,7 @@ <input type="text" [formControlName]="idx" [value]="parameter.value"/><br/> </ng-container> <ng-container *ngIf="parameter.type !== STRING_FUNCTION_TYPE"> - <tosca-function [property]="propertyInputList[idx]" [componentInstanceMap]="componentInstanceMap" [allowClear]="false" + <tosca-function [property]="propertyInputList[idx]" [customToscaFunctions]="customToscaFunctions" [componentInstanceMap]="componentInstanceMap" [allowClear]="false" (onValidityChange)="onFunctionValidityChange($event, idx)"> </tosca-function> </ng-container> diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-custom-function/tosca-custom-function.component.spec.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-custom-function/tosca-custom-function.component.spec.ts index 9c3c188711..c64547a9c7 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-custom-function/tosca-custom-function.component.spec.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-custom-function/tosca-custom-function.component.spec.ts @@ -29,12 +29,19 @@ import {TranslateModule} from "../../../../shared/translator/translate.module"; import {ToscaGetFunctionComponent} from "../tosca-get-function/tosca-get-function.component"; import {UiElementsModule} from "../../../../components/ui/ui-elements.module"; import {YamlFunctionComponent} from "../yaml-function/yaml-function.component"; +import {TopologyTemplateService} from "../../../../services/component-services/topology-template.service"; +import {Observable} from "rxjs/Observable"; +import {defaultCustomFunctionsMock} from "../../../../../../jest/mocks/default-custom-tosca-function.mock"; describe('ToscaCustomFunctionComponent', () => { let component: ToscaCustomFunctionComponent; let fixture: ComponentFixture<ToscaCustomFunctionComponent>; + let topologyTemplateServiceMock: Partial<TopologyTemplateService>; beforeEach(async(() => { + topologyTemplateServiceMock = { + getDefaultCustomFunction: jest.fn().mockImplementation(() => Observable.of(defaultCustomFunctionsMock)) + }; TestBed.configureTestingModule({ declarations: [ ToscaCustomFunctionComponent, @@ -47,6 +54,9 @@ describe('ToscaCustomFunctionComponent', () => { ReactiveFormsModule, TranslateModule, UiElementsModule + ], + providers: [ + {provide: TopologyTemplateService, useValue: topologyTemplateServiceMock} ] }) .compileComponents(); diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-custom-function/tosca-custom-function.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-custom-function/tosca-custom-function.component.ts index f3687880f2..7746d3845f 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-custom-function/tosca-custom-function.component.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-custom-function/tosca-custom-function.component.ts @@ -30,6 +30,7 @@ import {PROPERTY_TYPES} from "../../../../../utils/constants"; import {InstanceFeDetails} from "../../../../../models/instance-fe-details"; import {ToscaFunctionValidationEvent} from "../tosca-function.component"; import {ToscaFunction} from "../../../../../models/tosca-function"; +import {CustomToscaFunction} from "../../../../../models/default-custom-functions"; @Component({ selector: 'app-tosca-custom-function', @@ -40,10 +41,12 @@ export class ToscaCustomFunctionComponent implements OnInit { @Input() toscaCustomFunction: ToscaCustomFunction; @Input() componentInstanceMap: Map<string, InstanceFeDetails> = new Map<string, InstanceFeDetails>(); + @Input() customToscaFunctions: Array<CustomToscaFunction> = []; + @Input() name: string; + @Input() isDefaultCustomFunction: boolean; @Output() onValidFunction: EventEmitter<ToscaCustomFunction> = new EventEmitter<ToscaCustomFunction>(); @Output() onValidityChange: EventEmitter<ToscaCustomFunctionValidationEvent> = new EventEmitter<ToscaCustomFunctionValidationEvent>(); - name: string = ''; customFunctionFormName: FormControl = new FormControl('', [Validators.required, Validators.minLength(1)]); customParameterFormArray: FormArray = new FormArray([], Validators.minLength(1)); formGroup: FormGroup = new FormGroup( @@ -62,12 +65,18 @@ export class ToscaCustomFunctionComponent implements OnInit { this.initForm(); } + ngOnChanges() { + if (this.name && this.isDefaultCustomFunction) { + this.customFunctionFormName.setValue(this.name); + this.emitOnValidityChange(); + } else { + this.name = ""; + } + } + private initForm(): void { this.formGroup.valueChanges.subscribe(() => { - this.onValidityChange.emit({ - isValid: this.formGroup.valid, - toscaCustomFunction: this.formGroup.valid ? this.buildCustomFunctionFromForm() : undefined - }) + this.emitOnValidityChange(); if (this.formGroup.valid) { this.onValidFunction.emit(this.buildCustomFunctionFromForm()); } @@ -114,6 +123,13 @@ export class ToscaCustomFunctionComponent implements OnInit { return toscaCustomFunction1; } + private emitOnValidityChange() { + this.onValidityChange.emit({ + isValid: this.formGroup.valid, + toscaCustomFunction: this.formGroup.valid ? this.buildCustomFunctionFromForm() : undefined + }) + } + addFunction(): void { this.propertyInputList.push(this.createProperty()); this.parameters.push({} as ToscaFunctionParameter); diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html index 3ec3fa45dc..898b189746 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html @@ -22,17 +22,24 @@ <div class="i-sdc-form-item"> <label class="i-sdc-form-label">{{'TOSCA_FUNCTION_LABEL' | translate}}</label> <select formControlName="toscaFunctionType" (change)="onFunctionTypeChange()"> - <option *ngFor="let toscaFunction of toscaFunctions" + <optgroup label="Standard"> + <option *ngFor="let toscaFunction of toscaFunctions" [ngValue]="toscaFunction">{{toscaFunction | lowercase}}</option> + </optgroup> + <optgroup *ngIf="toscaCustomFunctions" label="Custom"> + <option *ngFor="let toscaCustomFunction of toscaCustomFunctions" + [ngValue]="toscaCustomFunction">{{toscaCustomFunction | lowercase}}</option> + </optgroup> + <option value="YAML">yaml</option> </select> </div> <div *ngIf="isConcatSelected()"> - <app-tosca-concat-function [toscaConcatFunction]="toscaFunction" [componentInstanceMap]="componentInstanceMap" + <app-tosca-concat-function [toscaConcatFunction]="toscaFunction" [customToscaFunctions]="customToscaFunctions" [componentInstanceMap]="componentInstanceMap" (onValidityChange)="onConcatFunctionValidityChange($event)"></app-tosca-concat-function> </div> <div *ngIf="isCustomSelected()"> - <app-tosca-custom-function [toscaCustomFunction]="toscaFunction" [componentInstanceMap]="componentInstanceMap" - (onValidityChange)="onCustomFunctionValidityChange($event)"></app-tosca-custom-function> + <app-tosca-custom-function [toscaCustomFunction]="toscaFunction" [customToscaFunctions]="customToscaFunctions" [name]="getCustomFunctionName()" [componentInstanceMap]="componentInstanceMap" + [isDefaultCustomFunction]="isDefaultCustomFunction()" (onValidityChange)="onCustomFunctionValidityChange($event)"></app-tosca-custom-function> </div> <div *ngIf="isGetFunctionSelected()"> <app-tosca-get-function [property]="property" [toscaGetFunction]="toscaFunction" diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts index 6783f5b13c..81696944c7 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts @@ -35,6 +35,7 @@ import {YamlFunctionValidationEvent} from "./yaml-function/yaml-function.compone import {ToscaConcatFunction} from "../../../../models/tosca-concat-function"; import {ToscaCustomFunction} from "../../../../models/tosca-custom-function"; import {YamlFunction} from "../../../../models/yaml-function"; +import {CustomToscaFunction} from "../../../../models/default-custom-functions"; @Component({ selector: 'tosca-function', @@ -45,6 +46,7 @@ export class ToscaFunctionComponent implements OnInit, OnChanges { @Input() property: PropertyBEModel; @Input() componentInstanceMap: Map<string, InstanceFeDetails> = new Map<string, InstanceFeDetails>(); + @Input() customToscaFunctions: Array<CustomToscaFunction> = []; @Input() allowClear: boolean = true; @Input() compositionMap: boolean = false; @Input() compositionMapKey: string = ""; @@ -61,6 +63,7 @@ export class ToscaFunctionComponent implements OnInit, OnChanges { isLoading: boolean = false; toscaFunction: ToscaFunction; toscaFunctions: Array<string> = []; + toscaCustomFunctions: Array<String> = []; private isInitialized: boolean = false; private componentMetadata: ComponentMetadata; @@ -132,7 +135,18 @@ export class ToscaFunctionComponent implements OnInit, OnChanges { return; } this.toscaFunctionForm.setValue(this.property.toscaFunction); - this.toscaFunctionTypeForm.setValue(this.property.toscaFunction.type); + let type = this.property.toscaFunction.type; + if (type == ToscaFunctionType.CUSTOM) { + let name = (this.property.toscaFunction as ToscaCustomFunction).name; + let test = this.customToscaFunctions.find(custToscFunc => _.isEqual(custToscFunc.name, name)) + if (test) { + this.toscaFunctionTypeForm.setValue(name); + } else { + this.toscaFunctionTypeForm.setValue("other"); + } + } else { + this.toscaFunctionTypeForm.setValue(type); + } } private areEqual(array1: string[], array2: string[]): boolean { @@ -144,11 +158,41 @@ export class ToscaFunctionComponent implements OnInit, OnChanges { this.toscaFunctions.push(ToscaFunctionType.GET_ATTRIBUTE); this.toscaFunctions.push(ToscaFunctionType.GET_INPUT); this.toscaFunctions.push(ToscaFunctionType.GET_PROPERTY); - this.toscaFunctions.push(ToscaFunctionType.CUSTOM); if (this.property.type === PROPERTY_TYPES.STRING || this.property.type === PROPERTY_TYPES.ANY) { this.toscaFunctions.push(ToscaFunctionType.CONCAT); } - this.toscaFunctions.push(ToscaFunctionType.YAML); + this.loadCustomToscaFunctions(); + } + + private loadCustomToscaFunctions(): void { + if (!this.customToscaFunctions.find(custToscFunc => _.isEqual(custToscFunc.name, "other"))) { + let other = new CustomToscaFunction(); + other.name = "other"; + other.type = ToscaFunctionType.CUSTOM; + this.customToscaFunctions.push(other); + } + this.toscaCustomFunctions = []; + for (let func of this.customToscaFunctions) { + this.toscaCustomFunctions.push(func.name); + } + } + + getCustomToscaFunction(): CustomToscaFunction { + let funcName = this.formGroup.get('toscaFunctionType').value; + return this.customToscaFunctions.find(custToscFunc => _.isEqual(custToscFunc.name, funcName)); + } + + getCustomFunctionName():string { + let toscaFunctionType: CustomToscaFunction = this.getCustomToscaFunction(); + return toscaFunctionType.name; + } + + isDefaultCustomFunction(): boolean { + let toscaFunctionType: CustomToscaFunction = this.getCustomToscaFunction(); + if (toscaFunctionType.name === "other") { + return false; + } + return this.customToscaFunctions.filter(e => e.name === toscaFunctionType.name).length > 0; } private resetForm(): void { @@ -173,7 +217,8 @@ export class ToscaFunctionComponent implements OnInit, OnChanges { } isCustomSelected(): boolean { - return this.formGroup.get('toscaFunctionType').value === ToscaFunctionType.CUSTOM; + let toscaFunctionType: CustomToscaFunction = this.getCustomToscaFunction(); + return toscaFunctionType && toscaFunctionType.type === ToscaFunctionType.CUSTOM; } isGetFunctionSelected(): boolean { |