aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function
diff options
context:
space:
mode:
authorandre.schmid <andre.schmid@est.tech>2022-05-18 22:09:25 +0100
committerMichael Morris <michael.morris@est.tech>2022-05-30 12:38:12 +0000
commitb43eb22f91ffdc1e2ba5d82b3dc1a2c4250d06e0 (patch)
tree3161ca6acc065c8aeacc37e650279ee392612fa8 /catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function
parentc64297165be8ea0a07ba762dfcdb156e3f08e956 (diff)
Support of get_property in property assignment
Refactors the current way store a get_input function allowing to support different get functions (get_property in this case). The information stored allows recreating and correctly validating the get function. Fix get function schema validation, the schema was being ignored. Improve validation error status and messages. Improve tosca get function dialog. Change-Id: I5de5f96dfba3c7a0fbb458885af5528bea7835aa Issue-ID: SDC-4014 Signed-off-by: andre.schmid <andre.schmid@est.tech>
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function')
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html11
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts169
2 files changed, 130 insertions, 50 deletions
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 ea52f20e91..851d7b6e77 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
@@ -27,12 +27,13 @@
[ngValue]="toscaFunction">{{toscaFunction}}</option>
</select>
</div>
- <div *ngIf="selectToscaFunction" class="i-sdc-form-item">
+ <div *ngIf="showDropdown()" class="i-sdc-form-item">
<label class="i-sdc-form-label required">{{dropdownValuesLabel}}</label>
- <select [(ngModel)]="selectValue" name="selectValue">
- <option *ngFor="let value of dropdownValues"
- [ngValue]="value">{{value.name}}</option>
- </select>
+ <select [(ngModel)]="selectedProperty" name="selectedProperty">
+ <option *ngFor="let value of propertyDropdownList" [ngValue]="value">{{value.propertyLabel}}</option>
+ </select>
</div>
+ <div *ngIf="dropDownErrorMsg">{{dropDownErrorMsg}}</div>
</form>
+ <loader [display]="isLoading" [size]="'medium'" [relative]="true"></loader>
</div>
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 22fb8cc358..6e013d7169 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
@@ -17,35 +17,35 @@
* ============LICENSE_END=========================================================
*/
-import {Component} from '@angular/core';
-import {
- ComponentMetadata, DataTypeModel, PropertyBEModel
-} from 'app/models';
+import {Component, Input} from '@angular/core';
+import {ComponentMetadata, DataTypeModel, PropertyBEModel} from 'app/models';
import {TopologyTemplateService} from "../../../services/component-services/topology-template.service";
import {WorkspaceService} from "../../workspace/workspace.service";
import {PropertiesService} from "../../../services/properties.service";
import {PROPERTY_DATA} from "../../../../utils/constants";
import {DataTypeService} from "../../../services/data-type.service";
-import {ToscaGetFunctionType} from "../../../../models/tosca-get-function-type.enum";
+import {ToscaGetFunctionType} from "../../../../models/tosca-get-function-type";
import {TranslateService} from "../../../shared/translator/translate.service";
+import {ComponentGenericResponse} from '../../../services/responses/component-generic-response';
+import {Observable} from 'rxjs/Observable';
@Component({
selector: 'tosca-function',
templateUrl: './tosca-function.component.html',
styleUrls: ['./tosca-function.component.less'],
})
-
export class ToscaFunctionComponent {
+ @Input() property: PropertyBEModel;
+
selectToscaFunction;
- selectValue;
- isLoading: boolean;
- propertyType: string;
- dropdownValues: Array<PropertyBEModel> = [];
+ selectedProperty: PropertyDropdownValue;
+ isLoading: boolean = false;
+ propertyDropdownList: Array<PropertyDropdownValue> = [];
toscaFunctions: Array<string> = [];
dropdownValuesLabel: string;
+ dropDownErrorMsg: string;
- private dataTypeProperties: Array<PropertyBEModel> = [];
private componentMetadata: ComponentMetadata;
constructor(private topologyTemplateService: TopologyTemplateService,
@@ -57,12 +57,12 @@ export class ToscaFunctionComponent {
ngOnInit() {
this.componentMetadata = this.workspaceService.metadata;
- this.propertyType = this.propertiesService.getCheckedPropertyType();
this.loadToscaFunctions();
}
private loadToscaFunctions(): void {
this.toscaFunctions.push(ToscaGetFunctionType.GET_INPUT.toLowerCase());
+ this.toscaFunctions.push(ToscaGetFunctionType.GET_PROPERTY.toLowerCase());
}
onToscaFunctionChange(): void {
@@ -71,50 +71,129 @@ export class ToscaFunctionComponent {
}
private loadDropdownValueLabel(): void {
- if (this.selectToscaFunction) {
- if (this.selectToscaFunction === ToscaGetFunctionType.GET_INPUT.toLowerCase()) {
- this.dropdownValuesLabel = this.translateService.translate('INPUT_DROPDOWN_LABEL');
- }
+ if (!this.selectToscaFunction) {
+ return;
+ }
+ if (this.isGetInputSelected()) {
+ this.dropdownValuesLabel = this.translateService.translate('INPUT_DROPDOWN_LABEL');
+ } else if (this.isGetPropertySelected()) {
+ this.dropdownValuesLabel = this.translateService.translate('TOSCA_FUNCTION_PROPERTY_DROPDOWN_LABEL');
}
}
private loadDropdownValues(): void {
- if (this.selectToscaFunction) {
- this.dropdownValues = [];
- if (this.selectToscaFunction === ToscaGetFunctionType.GET_INPUT.toLowerCase()) {
- this.loadInputValues(this.propertyType);
- }
+ if (!this.selectToscaFunction) {
+ return;
}
+ this.resetDropDown();
+ this.loadPropertiesInDropdown();
}
- private loadInputValues(propertyType: string): void {
- this.isLoading = true;
- this.topologyTemplateService.getComponentInputsValues(this.componentMetadata.componentType, this.componentMetadata.uniqueId)
- .subscribe((response) => {
- response.inputs.forEach((inputProperty: any) => {
- if (propertyType === inputProperty.type) {
- this.dropdownValues.push(inputProperty);
- } else if (PROPERTY_DATA.SIMPLE_TYPES.indexOf(inputProperty.type) === -1 && inputProperty.type !== propertyType) {
- this.buildInputDataForComplexType(inputProperty, propertyType);
- }
- });
- }, () => {
- //error ignored
- }, () => {
- this.isLoading = false;
- });
+ private resetDropDown() {
+ this.dropDownErrorMsg = undefined;
+ this.propertyDropdownList = [];
}
- private buildInputDataForComplexType(inputProperty: PropertyBEModel, propertyType: string) {
- let dataTypeFound: DataTypeModel = this.dataTypeService.getDataTypeByModelAndTypeName(this.componentMetadata.model, inputProperty.type);
- if (dataTypeFound && dataTypeFound.properties) {
- dataTypeFound.properties.forEach(dataTypeProperty => {
- let inputData = inputProperty.name + "->" + dataTypeProperty.name;
- dataTypeProperty.name = inputData;
- if (this.dataTypeProperties.indexOf(dataTypeProperty) === -1 && dataTypeProperty.type === propertyType) {
- this.dropdownValues.push(dataTypeProperty);
+ private loadPropertiesInDropdown() {
+ this.startLoading();
+ let propertiesObservable: Observable<ComponentGenericResponse>
+ if (this.isGetInputSelected()) {
+ propertiesObservable = this.topologyTemplateService.getComponentInputsValues(this.componentMetadata.componentType, this.componentMetadata.uniqueId);
+ } else if (this.isGetPropertySelected()) {
+ propertiesObservable = this.topologyTemplateService.findAllComponentProperties(this.componentMetadata.componentType, this.componentMetadata.uniqueId);
+ }
+ propertiesObservable
+ .subscribe( (response: ComponentGenericResponse) => {
+ let properties: PropertyBEModel[] = this.isGetInputSelected() ? response.inputs : response.properties;
+ if (!properties || properties.length === 0) {
+ const msgCode = this.isGetInputSelected() ? 'TOSCA_FUNCTION_NO_INPUT_FOUND' : 'TOSCA_FUNCTION_NO_PROPERTY_FOUND';
+ this.dropDownErrorMsg = this.translateService.translate(msgCode, {type: this.property.type});
+ return;
}
+ this.addPropertiesToDropdown(properties);
+ if (this.propertyDropdownList.length == 0) {
+ const msgCode = this.isGetInputSelected() ? 'TOSCA_FUNCTION_NO_INPUT_FOUND' : 'TOSCA_FUNCTION_NO_PROPERTY_FOUND';
+ this.dropDownErrorMsg = this.translateService.translate(msgCode, {type: this.property.type});
+ }
+ }, (error) => {
+ console.error('An error occurred while loading properties.', error);
+ }, () => {
+ this.stopLoading();
});
+ }
+
+ private addPropertyToDropdown(propertyDropdownValue: PropertyDropdownValue) {
+ this.propertyDropdownList.push(propertyDropdownValue);
+ this.propertyDropdownList.sort((a, b) => a.propertyLabel.localeCompare(b.propertyLabel));
+ }
+
+ private addPropertiesToDropdown(properties: PropertyBEModel[]) {
+ for (const property of properties) {
+ if (this.property.type === property.type) {
+ this.addPropertyToDropdown({
+ propertyName: property.name,
+ propertyId: property.uniqueId,
+ propertyLabel: property.name,
+ toscaFunction: this.selectToscaFunction,
+ propertyPath: [property.name]
+ });
+ } else if (this.isComplexType(property.type)) {
+ this.fillPropertyDropdownWithMatchingChildProperties(property);
+ }
}
}
+
+ private fillPropertyDropdownWithMatchingChildProperties(inputProperty: PropertyBEModel, parentPropertyList: Array<PropertyBEModel> = []) {
+ const dataTypeFound: DataTypeModel = this.dataTypeService.getDataTypeByModelAndTypeName(this.componentMetadata.model, inputProperty.type);
+ if (!dataTypeFound || !dataTypeFound.properties) {
+ return;
+ }
+ parentPropertyList.push(inputProperty);
+ dataTypeFound.properties.forEach(dataTypeProperty => {
+ if (dataTypeProperty.type === this.property.type) {
+ this.addPropertyToDropdown({
+ propertyName: dataTypeProperty.name,
+ propertyId: parentPropertyList[0].uniqueId,
+ propertyLabel: parentPropertyList.map(property => property.name).join('->') + '->' + dataTypeProperty.name,
+ toscaFunction: this.selectToscaFunction,
+ propertyPath: [...parentPropertyList.map(property => property.name), dataTypeProperty.name]
+ });
+ } else if (PROPERTY_DATA.SIMPLE_TYPES.indexOf(dataTypeProperty.type) === -1) {
+ this.fillPropertyDropdownWithMatchingChildProperties(dataTypeProperty, [...parentPropertyList])
+ }
+ });
+ }
+
+ private isGetPropertySelected() {
+ return this.selectToscaFunction === ToscaGetFunctionType.GET_PROPERTY.toLowerCase();
+ }
+
+ private isGetInputSelected() {
+ return this.selectToscaFunction === ToscaGetFunctionType.GET_INPUT.toLowerCase();
+ }
+
+ private isComplexType(propertyType: string) {
+ return PROPERTY_DATA.SIMPLE_TYPES.indexOf(propertyType) === -1;
+ }
+
+ private stopLoading() {
+ this.isLoading = false;
+ }
+
+ private startLoading() {
+ this.isLoading = true;
+ }
+
+ showDropdown(): boolean {
+ return this.selectToscaFunction && !this.isLoading && !this.dropDownErrorMsg;
+ }
+
+}
+
+export interface PropertyDropdownValue {
+ propertyName: string;
+ propertyId: string;
+ propertyLabel: string;
+ toscaFunction: ToscaGetFunctionType;
+ propertyPath: Array<string>;
}