aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src
diff options
context:
space:
mode:
authorJvD_Ericsson <jeff.van.dam@est.tech>2023-05-04 13:27:26 +0100
committerMichael Morris <michael.morris@est.tech>2023-05-18 10:41:07 +0000
commitbc7dd3ad94acace55a2910abc22cc5cb64e0862d (patch)
tree43948e332fa27ea7cecc70ba19388bb63e1069d0 /catalog-ui/src
parent38eaf2ddd678a837e2bfed25d5b4b45d72fce338 (diff)
UI support for default custom function names with get_input structure
Issue-ID: SDC-4493 Signed-off-by: JvD_Ericsson <jeff.van.dam@est.tech> Change-Id: Iba3eda9bb5d57aabbe86045b6150564e17a0ff3e
Diffstat (limited to 'catalog-ui/src')
-rw-r--r--catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html1
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-custom-function/tosca-custom-function.component.html20
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-custom-function/tosca-custom-function.component.ts76
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html15
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts7
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.html2
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.ts12
7 files changed, 105 insertions, 28 deletions
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html
index 526ccf21ce..b348d81353 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html
@@ -46,7 +46,6 @@
<div class="table-row" *ngFor="let property of fePropertiesMap[instanceId] | searchFilter:'name':searchTerm | propertiesOrderBy:{path: path, direction: direction}; trackBy:property?.name "
(click)="onClickPropertyRow(property, instanceId, $event)" [ngClass]="{'selected': selectedPropertyId && selectedPropertyId === property.name, 'readonly': property.isDisabled || property.isDeclared}">
-
<div class="table-cell col1" [ngClass]="{'filtered':property.name === propertyNameSearchText}" [class.round-checkbox]="property.isDeclared">
<!-- Property Name -->
<div class="property-name">
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 f77af54c77..831ce49de8 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
@@ -29,26 +29,36 @@
</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>
- <div class="parameter-card">
+ <div *ngIf="idx > 0 && type != GET_INPUT" class="text-center"><span class="custom-plus-icon"></span></div>
+ <div class="parameter-card" *ngIf="type != GET_INPUT">
<div class="card-content">
<ng-container *ngIf="parameter.type === STRING_FUNCTION_TYPE">
<input type="text" [formControlName]="idx" [value]="parameter.value"/><br/>
</ng-container>
<ng-container *ngIf="parameter.type !== STRING_FUNCTION_TYPE">
- <tosca-function [property]="propertyInputList[idx]" [customToscaFunctions]="customToscaFunctions" [componentInstanceMap]="componentInstanceMap" [allowClear]="false"
+ <tosca-function [property]="propertyInputList[idx]"
+ [customToscaFunctions]="customToscaFunctions"
+ [componentInstanceMap]="componentInstanceMap"
+ [allowClear]="false"
(onValidityChange)="onFunctionValidityChange($event, idx)">
</tosca-function>
</ng-container>
- <div class="buttons-container">
+ <div *ngIf="type != GET_INPUT" class="buttons-container">
<span class="delete-icon" (click)="removeParameter(idx)"></span>
</div>
</div>
</div>
+ <ng-container *ngIf="type === GET_INPUT">
+ <app-tosca-get-function [property]="propertyInputList[idx]" [toscaGetFunction]="toscaGetFunction"
+ [componentInstanceMap]="componentInstanceMap"
+ [functionType]="GET_INPUT"
+ (onValidityChange)="onGetFunctionValidityChange($event, idx)">
+ </app-tosca-get-function>
+ </ng-container>
</div>
</div>
</ng-container>
- <div class="buttons-container">
+ <div *ngIf="type != GET_INPUT" class="buttons-container">
<a class="add-link" (click)="addStringParameter()">String Value</a> <a class="add-link" (click)="addFunction()">TOSCA Function Expression</a>
</div>
</div>
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 7746d3845f..35f1649ec6 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,7 +30,9 @@ 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 {ToscaGetFunction} from "../../../../../models/tosca-get-function";
import {CustomToscaFunction} from "../../../../../models/default-custom-functions";
+import {ToscaGetFunctionValidationEvent} from "../tosca-get-function/tosca-get-function.component";
@Component({
selector: 'app-tosca-custom-function',
@@ -43,10 +45,14 @@ export class ToscaCustomFunctionComponent implements OnInit {
@Input() componentInstanceMap: Map<string, InstanceFeDetails> = new Map<string, InstanceFeDetails>();
@Input() customToscaFunctions: Array<CustomToscaFunction> = [];
@Input() name: string;
+ @Input() type: ToscaFunctionType;
+ @Input() propertyType: string;
+ @Input() propertySchemaType: string = undefined;
@Input() isDefaultCustomFunction: boolean;
@Output() onValidFunction: EventEmitter<ToscaCustomFunction> = new EventEmitter<ToscaCustomFunction>();
@Output() onValidityChange: EventEmitter<ToscaCustomFunctionValidationEvent> = new EventEmitter<ToscaCustomFunctionValidationEvent>();
+ toscaGetFunction: ToscaFunction;
customFunctionFormName: FormControl = new FormControl('', [Validators.required, Validators.minLength(1)]);
customParameterFormArray: FormArray = new FormArray([], Validators.minLength(1));
formGroup: FormGroup = new FormGroup(
@@ -58,20 +64,29 @@ export class ToscaCustomFunctionComponent implements OnInit {
parameters: ToscaFunctionParameter[] = [];
propertyInputList: Array<PropertyBEModel> = [];
+ previousType: ToscaFunctionType;
- STRING_FUNCTION_TYPE = ToscaFunctionType.STRING
+ STRING_FUNCTION_TYPE = ToscaFunctionType.STRING;
+ GET_INPUT = ToscaFunctionType.GET_INPUT;
ngOnInit() {
this.initForm();
}
ngOnChanges() {
+ if (this.previousType && this.previousType != this.type) {
+ this.propertyInputList = [];
+ this.customParameterFormArray = new FormArray([], Validators.minLength(1));
+ this.parameters = [];
+ }
+ this.fillVariables();
if (this.name && this.isDefaultCustomFunction) {
this.customFunctionFormName.setValue(this.name);
this.emitOnValidityChange();
} else {
- this.name = "";
+ this.name = '';
}
+ this.previousType = this.type;
}
private initForm(): void {
@@ -81,7 +96,13 @@ export class ToscaCustomFunctionComponent implements OnInit {
this.onValidFunction.emit(this.buildCustomFunctionFromForm());
}
});
+ }
+
+ private fillVariables() {
if (!this.toscaCustomFunction) {
+ if (this.type === this.GET_INPUT && this.parameters.length < 1) {
+ this.addFunction();
+ }
return;
}
if (this.toscaCustomFunction.parameters) {
@@ -89,13 +110,13 @@ export class ToscaCustomFunctionComponent implements OnInit {
this.customFunctionFormName.setValue(this.name)
this.parameters = Array.from(this.toscaCustomFunction.parameters);
for (const parameter of this.parameters) {
+ if (this.type === this.GET_INPUT) {
+ this.toscaGetFunction = parameter as ToscaGetFunction;
+ this.addToscaFunctionToParameters(parameter);
+ return;
+ }
if (parameter.type !== PROPERTY_TYPES.STRING) {
- const propertyBEModel = this.createProperty(parameter.value);
- propertyBEModel.toscaFunction = <ToscaFunction> parameter;
- this.propertyInputList.push(propertyBEModel);
- this.customParameterFormArray.push(
- new FormControl(parameter, [Validators.required, Validators.minLength(1)])
- );
+ this.addToscaFunctionToParameters(parameter);
} else {
this.propertyInputList.push(undefined);
this.customParameterFormArray.push(
@@ -104,6 +125,18 @@ export class ToscaCustomFunctionComponent implements OnInit {
}
}
}
+ if (this.type === this.GET_INPUT && this.parameters.length < 1) {
+ this.addFunction();
+ }
+ }
+
+ private addToscaFunctionToParameters(parameter: ToscaFunctionParameter) {
+ const propertyBEModel = this.createProperty(parameter.value);
+ propertyBEModel.toscaFunction = <ToscaFunction> parameter;
+ this.propertyInputList.push(propertyBEModel);
+ this.customParameterFormArray.push(
+ new FormControl(parameter, [Validators.required, Validators.minLength(1)])
+ );
}
private buildCustomFunctionFromForm(): ToscaCustomFunction {
@@ -111,6 +144,9 @@ export class ToscaCustomFunctionComponent implements OnInit {
toscaCustomFunction1.name = this.customFunctionFormName.value;
this.customParameterFormArray.controls.forEach(control => {
const value = control.value;
+ if (!value) {
+ return;
+ }
if (typeof value === 'string') {
const stringParameter = new ToscaStringParameter();
stringParameter.value = value;
@@ -140,12 +176,13 @@ export class ToscaCustomFunctionComponent implements OnInit {
addStringParameter(): void {
const toscaStringParameter = new ToscaStringParameter();
- toscaStringParameter.value = ''
- this.parameters.push(toscaStringParameter);
+ toscaStringParameter.value = '';
this.propertyInputList.push(undefined);
this.customParameterFormArray.push(
new FormControl('', [Validators.required, Validators.minLength(1)])
);
+ this.parameters.push(toscaStringParameter);
+ console.log(this.customParameterFormArray)
}
removeParameter(position): void {
@@ -156,7 +193,15 @@ export class ToscaCustomFunctionComponent implements OnInit {
createProperty(value?: any): PropertyBEModel {
const property = new PropertyBEModel();
- property.type = PROPERTY_TYPES.ANY;
+ if (this.type === this.GET_INPUT) {
+ property.type = this.propertyType;
+ if (this.propertySchemaType) {
+ property.schemaType = this.propertySchemaType;
+ }
+ } else {
+ property.type = PROPERTY_TYPES.ANY;
+ }
+
property.value = value ? value : undefined;
return property;
}
@@ -168,6 +213,15 @@ export class ToscaCustomFunctionComponent implements OnInit {
this.customParameterFormArray.controls[index].setValue(undefined);
}
}
+
+ onGetFunctionValidityChange(event: ToscaGetFunctionValidationEvent, index: number): void {
+ if (event.isValid && event.toscaGetFunction) {
+ this.customParameterFormArray.controls[index].setValue(event.toscaGetFunction);
+ } else {
+ this.customParameterFormArray.controls[index].setValue(undefined);
+ }
+ this.emitOnValidityChange();
+ }
}
export interface ToscaCustomFunctionValidationEvent {
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 65a024cde4..0d5a4973da 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
@@ -38,8 +38,16 @@
(onValidityChange)="onConcatFunctionValidityChange($event)"></app-tosca-concat-function>
</div>
<div *ngIf="isCustomSelected()">
- <app-tosca-custom-function [toscaCustomFunction]="toscaFunction" [customToscaFunctions]="customToscaFunctions" [name]="getCustomFunctionName()" [componentInstanceMap]="componentInstanceMap"
- [isDefaultCustomFunction]="isDefaultCustomFunction()" (onValidityChange)="onCustomFunctionValidityChange($event)"></app-tosca-custom-function>
+ <app-tosca-custom-function [toscaCustomFunction]="toscaFunction"
+ [customToscaFunctions]="customToscaFunctions"
+ [name]="getCustomFunctionName()"
+ [type]="getCustomFunctionType()"
+ [propertyType]="property.type"
+ [propertySchemaType]="property.schemaType"
+ [componentInstanceMap]="componentInstanceMap"
+ [isDefaultCustomFunction]="isDefaultCustomFunction()"
+ (onValidityChange)="onCustomFunctionValidityChange($event)">
+ </app-tosca-custom-function>
</div>
<div *ngIf="isGetFunctionSelected()">
<app-tosca-get-function [property]="property" [toscaGetFunction]="toscaFunction"
@@ -48,7 +56,8 @@
[functionType]="toscaFunctionTypeForm.value"
[compositionMap]="compositionMap"
[compositionMapKey]="compositionMapKey"
- (onValidityChange)="onGetFunctionValidityChange($event)"></app-tosca-get-function>
+ (onValidityChange)="onGetFunctionValidityChange($event)">
+ </app-tosca-get-function>
</div>
<div *ngIf="isYamlFunctionSelected()">
<app-yaml-function [yamlFunction]="toscaFunction" (onValidityChange)="onYamlFunctionValidityChange($event)"></app-yaml-function>
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 ecaff252d3..b9559838f4 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
@@ -192,6 +192,11 @@ export class ToscaFunctionComponent implements OnInit, OnChanges {
return toscaFunctionType.name;
}
+ getCustomFunctionType():string {
+ let toscaFunctionType: CustomToscaFunction = this.getCustomToscaFunction();
+ return toscaFunctionType.type;
+ }
+
isDefaultCustomFunction(): boolean {
let toscaFunctionType: CustomToscaFunction = this.getCustomToscaFunction();
if (toscaFunctionType.name === "other") {
@@ -223,7 +228,7 @@ export class ToscaFunctionComponent implements OnInit, OnChanges {
isCustomSelected(): boolean {
let toscaFunctionType: CustomToscaFunction = this.getCustomToscaFunction();
- return toscaFunctionType && toscaFunctionType.type === ToscaFunctionType.CUSTOM;
+ return toscaFunctionType && (toscaFunctionType.type === ToscaFunctionType.CUSTOM || toscaFunctionType.type === ToscaFunctionType.GET_INPUT);
}
isGetFunctionSelected(): boolean {
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.html
index 387bb5cbcb..4a9e110982 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.html
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.html
@@ -17,7 +17,7 @@
~ ============LICENSE_END=========================================================
-->
-<div class="tosca-function">
+<div>
<form class="w-sdc-form" [formGroup]="formGroup">
<div class="i-sdc-form-item" *ngIf="showPropertySourceDropdown()">
<label class="i-sdc-form-label required">{{'TOSCA_FUNCTION_PROPERTY_SOURCE_LABEL' | translate}}</label>
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.ts
index 284c559c55..1b0a1a34ee 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.ts
@@ -100,7 +100,6 @@ export class ToscaGetFunctionComponent implements OnInit, OnChanges {
this.initToscaGetFunction().subscribe(() => {
this.isInitialized = true;
});
-
}
ngOnChanges(_changes: SimpleChanges): void {
@@ -410,7 +409,8 @@ export class ToscaGetFunctionComponent implements OnInit, OnChanges {
if (this.property.type === PROPERTY_TYPES.ANY) {
return true;
}
- let validPropertyType = property.type === PROPERTY_TYPES.LIST ? property.schemaType : property.type;
+ let validPropertyType = property.type;
+ let validPropertyTypeSchema = property.schemaType;
if (this.typeHasSchema(this.property.type)) {
if ((this.property instanceof PropertyDeclareAPIModel && (<PropertyDeclareAPIModel> this.property).input instanceof DerivedFEProperty) || this.compositionMap) {
let childObject : DerivedFEProperty = (<DerivedFEProperty>(<PropertyDeclareAPIModel> this.property).input);
@@ -421,13 +421,13 @@ export class ToscaGetFunctionComponent implements OnInit, OnChanges {
}
return validPropertyType === childObject.type;
}else{
- return validPropertyType === this.property.schema.property.type;
+ return validPropertyType === this.property.schemaType;
}
}
if (!property.schema || !property.schema.property) {
return false;
}
- return validPropertyType === this.property.type && this.property.schema.property.type === property.schema.property.type;
+ return validPropertyType === this.property.type && this.property.schemaType === validPropertyTypeSchema;
}
if (this.property.schema.property.isDataType && this.property instanceof PropertyDeclareAPIModel && (<PropertyDeclareAPIModel>this.property).propertiesName){
let typeToMatch = (<PropertyDeclareAPIModel> this.property).input.type;
@@ -438,7 +438,7 @@ export class ToscaGetFunctionComponent implements OnInit, OnChanges {
return validPropertyType === typeToMatch;
}
- return validPropertyType === this.property.type;
+ return validPropertyType === this.property.type || (validPropertyType === PROPERTY_TYPES.LIST && validPropertyTypeSchema === this.property.type);
}
private getType(propertyPath:string[], type: string): string {
@@ -499,7 +499,7 @@ export class ToscaGetFunctionComponent implements OnInit, OnChanges {
this.toscaIndexFlag = false;
this.toscaIndex.reset();
const selectedProperty: PropertyDropdownValue = this.selectedProperty.value;
- if (selectedProperty.isList) {
+ if (selectedProperty.isList && this.property.type != PROPERTY_TYPES.LIST) {
this.toscaIndexFlag = true;
}
}