aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app
diff options
context:
space:
mode:
authorimamSidero <imam.hussain@est.tech>2023-01-11 18:13:25 +0000
committerMichael Morris <michael.morris@est.tech>2023-01-13 13:22:26 +0000
commita8d208b231237fc9f05f83c2b33fa207d58f1480 (patch)
treee58cac7c4a5e81e5fd042ed244539d4981947434 /catalog-ui/src/app
parentaa92493c97b43075c18696d79f7d1bf62aa4805a (diff)
Provide tosca function as map primitive type entry values in composition view
Providing the capability to add tosca function as the primitive type entry values of map in composition view Issue-ID: SDC-4319 Signed-off-by: Imam hussain <imam.hussain@est.tech> Change-Id: I5cf67bc94ac5c72be6a962e07160329cd07d302c
Diffstat (limited to 'catalog-ui/src/app')
-rw-r--r--catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html21
-rw-r--r--catalog-ui/src/app/directives/property-types/type-map/type-map-directive.less12
-rw-r--r--catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts87
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html2
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts13
-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.ts16
-rw-r--r--catalog-ui/src/app/view-models/forms/property-forms/base-property-form/property-form-base.less2
-rw-r--r--catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html4
-rw-r--r--catalog-ui/src/app/view-models/forms/property-forms/select-datatype-modal/select-datatype-modal.less2
10 files changed, 145 insertions, 16 deletions
diff --git a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html
index d84ec821de..5c895115e5 100644
--- a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html
+++ b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html
@@ -41,9 +41,14 @@
</div>
<div data-ng-if="!isSchemaTypeDataType" class="i-sdc-form-item map-item-field" data-ng-class="{error:(parentFormObj['mapValue'+fieldsPrefixName+$index].$dirty && parentFormObj['mapValue'+fieldsPrefixName+$index].$invalid)}">
<label class="i-sdc-form-label required">Value</label>
-
+ <form class="temp-form">
+ <input type="radio" name="hasToscaFunction-{{fieldsPrefixName}}-{{$index}}" data-ng-checked="{{showToscaFunction[$index] == false}}" data-ng-click="onEnableTosca(false,$index)"/>
+ Value
+ <input type="radio" name="hasToscaFunction-{{fieldsPrefixName}}-{{$index}}" data-ng-checked="{{showToscaFunction[$index]}}" data-ng-click="onEnableTosca(true,$index)" ng-disabled="mapKeys[$index] == '' || mapKeys[$index] == null"/>
+ {{'TOSCA_FUNCTION_LABEL' | translate}}
+ </form>
<input class="i-sdc-form-input"
- ng-if="!constraints && !((schemaProperty.simpleType||schemaProperty.type) == 'boolean')"
+ ng-if="!constraints && !((schemaProperty.simpleType||schemaProperty.type) == 'boolean') && showToscaFunction[$index] == false"
data-ng-readonly="readOnly"
data-ng-model="valueObjRef[mapKeys[$index]]"
type="text"
@@ -58,7 +63,7 @@
autofocus />
<select class="i-sdc-form-select"
data-tests-id="mapValue{{fieldsPrefixName}}{{$index}}"
- ng-if="!constraints && (schemaProperty.simpleType||schemaProperty.type) == 'boolean'"
+ ng-if="!constraints && (schemaProperty.simpleType||schemaProperty.type) == 'boolean' && showToscaFunction[$index] == false"
data-ng-disabled="readOnly"
name="mapValue{{fieldsPrefixName}}{{$index}}"
data-ng-model="valueObjRef[mapKeys[$index]]"
@@ -66,6 +71,16 @@
<option value="true">true</option>
<option value="false">false</option>
</select>
+ <div data-ng-if="showToscaFunction[$index]" class="div-tosca-function">
+ <tosca-function [property]="parentProperty"
+ [component-instance-map]="componentInstanceMap"
+ [allow-clear]="false"
+ [composition-map]="true"
+ [composition-map-key]="mapKeys[$index]"
+ (on-valid-function)="onGetToscaFunction($event,mapKeys[$index])"
+ >
+ </tosca-function>
+ </div>
<select class="i-sdc-form-select"
diff --git a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.less b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.less
index 9c2984e3ce..1714178c9f 100644
--- a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.less
+++ b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.less
@@ -90,3 +90,15 @@
.type-map {
display: inline-block;
}
+
+.tosca-function {
+ max-width: 165px;
+}
+
+.tosca-error {
+ max-width: 165px;
+}
+
+.temp-form {
+ all: unset;
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts
index ceb2fa0bb9..ce8b997035 100644
--- a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts
+++ b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts
@@ -24,11 +24,16 @@
'use strict';
import {ValidationUtils, PROPERTY_TYPES} from "app/utils";
import {DataTypesService} from "app/services";
-import {SchemaProperty} from "app/models";
+import {SchemaProperty, PropertyModel} from "app/models";
+import {InstanceFeDetails} from "app/models/instance-fe-details";
+import {ToscaGetFunction} from "app/models/tosca-get-function";
+import {SubPropertyToscaFunction} from "app/models/sub-property-tosca-function";
export interface ITypeMapScope extends ng.IScope {
parentFormObj:ng.IFormController;
schemaProperty:SchemaProperty;
+ parentProperty:PropertyModel;
+ componentInstanceMap: Map<string, InstanceFeDetails>;
isMapKeysUnique:boolean;
isSchemaTypeDataType:boolean;
valueObjRef:any;
@@ -41,6 +46,7 @@ export interface ITypeMapScope extends ng.IScope {
maxLength:number;
constraints:string[];
showAddBtn: boolean;
+ showToscaFunction: Array<boolean>;
getValidationPattern(type:string):RegExp;
validateIntRange(value:string):boolean;
@@ -49,6 +55,9 @@ export interface ITypeMapScope extends ng.IScope {
addMapItemFields():void;
parseToCorrectType(objectOfValues:any, locationInObj:string, type:string):void;
getNumber(num:number):Array<any>;
+ validateSubToscaFunction(key:string):boolean;
+ onEnableTosca(toscaFlag:boolean,index:number);
+ onGetToscaFunction(toscaGetFunction: ToscaGetFunction, key:string);
}
@@ -62,6 +71,7 @@ export class TypeMapDirective implements ng.IDirective {
scope = {
valueObjRef: '=',//ref to map object in the parent value object
+ componentInstanceMap: '=',
schemaProperty: '=',//get the schema.property object
parentFormObj: '=',//ref to parent form (get angular form object)
fieldsPrefixName: '=',//prefix for form fields names
@@ -69,7 +79,8 @@ export class TypeMapDirective implements ng.IDirective {
defaultValue: '@',//this map default value
maxLength: '=',
constraints: '=',
- showAddBtn: '=?'
+ showAddBtn: '=?',
+ parentProperty: '='
};
restrict = 'E';
@@ -82,6 +93,20 @@ export class TypeMapDirective implements ng.IDirective {
scope.showAddBtn = angular.isDefined(scope.showAddBtn) ? scope.showAddBtn : true;
scope.MapKeyValidationPattern = this.MapKeyValidationPattern;
scope.isMapKeysUnique = true;
+ if (scope.mapKeys === undefined) {
+ scope.mapKeys = Object.keys(scope.valueObjRef);
+ }
+ scope.showToscaFunction = new Array(scope.mapKeys.length);
+ scope.mapKeys.forEach((key, index) => {
+ scope.showToscaFunction[index] = false;
+ if (scope.parentProperty.subPropertyToscaFunctions != null) {
+ scope.parentProperty.subPropertyToscaFunctions.forEach(SubPropertyToscaFunction => {
+ if (SubPropertyToscaFunction.subPropertyPath.indexOf(key) != -1) {
+ scope.showToscaFunction[index] = true;
+ }
+ });
+ }
+ });
//reset valueObjRef and mapKeys when schema type is changed
scope.$watchCollection('schemaProperty.type', (newData:any):void => {
@@ -153,8 +178,19 @@ export class TypeMapDirective implements ng.IDirective {
};
scope.deleteMapItem = (index:number):void=> {
+ const keyToChange = scope.mapKeys[index];
delete scope.valueObjRef[scope.mapKeys[index]];
scope.mapKeys.splice(index, 1);
+ scope.showToscaFunction.splice(index, 1);
+ if (scope.parentProperty.subPropertyToscaFunctions != null) {
+ let subToscaFunctionList : Array<SubPropertyToscaFunction> = [];
+ scope.parentProperty.subPropertyToscaFunctions.forEach((SubPropertyToscaFunction, index) => {
+ if (SubPropertyToscaFunction.subPropertyPath.indexOf(keyToChange) == -1) {
+ subToscaFunctionList.push(SubPropertyToscaFunction);
+ }
+ });
+ scope.parentProperty.subPropertyToscaFunctions = subToscaFunctionList;
+ }
if (!scope.mapKeys.length) {//only when user removes all pairs of key-value fields - put the default
if (scope.mapDefaultValue) {
angular.copy(scope.mapDefaultValue, scope.valueObjRef);
@@ -163,9 +199,45 @@ export class TypeMapDirective implements ng.IDirective {
}
};
+ scope.onEnableTosca = (toscaFlag:boolean,flagIndex:number):void => {
+ scope.showToscaFunction[flagIndex] = toscaFlag;
+ scope.valueObjRef[scope.mapKeys[flagIndex]] = null;
+ if (!toscaFlag) {
+ if (scope.parentProperty.subPropertyToscaFunctions != null) {
+ let subToscaFunctionList : Array<SubPropertyToscaFunction> = [];
+ scope.parentProperty.subPropertyToscaFunctions.forEach((SubPropertyToscaFunction, index) => {
+ if (SubPropertyToscaFunction.subPropertyPath.indexOf(scope.mapKeys[flagIndex]) == -1) {
+ subToscaFunctionList.push(SubPropertyToscaFunction);
+ }
+ });
+ scope.parentProperty.subPropertyToscaFunctions = subToscaFunctionList;
+ }
+ }
+ };
+
+ scope.onGetToscaFunction = (toscaGetFunction: ToscaGetFunction, key:string): void => {
+ if (scope.parentProperty.subPropertyToscaFunctions != null) {
+ scope.parentProperty.subPropertyToscaFunctions.forEach(SubPropertyToscaFunction => {
+ if (SubPropertyToscaFunction.subPropertyPath.indexOf(key) != -1) {
+ SubPropertyToscaFunction.toscaFunction = toscaGetFunction;
+ return;
+ }
+ });
+
+ }
+ if (scope.parentProperty.subPropertyToscaFunctions == null){
+ scope.parentProperty.subPropertyToscaFunctions = [];
+ }
+ let subPropertyToscaFunction = new SubPropertyToscaFunction();
+ subPropertyToscaFunction.toscaFunction = toscaGetFunction;
+ subPropertyToscaFunction.subPropertyPath = [key];
+ scope.parentProperty.subPropertyToscaFunctions.push(subPropertyToscaFunction);
+ }
+
scope.addMapItemFields = ():void => {
scope.valueObjRef[''] = null;
scope.mapKeys = Object.keys(scope.valueObjRef);
+ scope.showToscaFunction.push(false);
};
scope.parseToCorrectType = (objectOfValues:any, locationInObj:string, type:string):void => {
@@ -173,6 +245,17 @@ export class TypeMapDirective implements ng.IDirective {
objectOfValues[locationInObj] = JSON.parse(objectOfValues[locationInObj]);
}
}
+
+ scope.validateSubToscaFunction = (key:string):boolean => {
+ if (scope.parentProperty.subPropertyToscaFunctions != null) {
+ scope.parentProperty.subPropertyToscaFunctions.forEach(SubPropertyToscaFunction => {
+ if (SubPropertyToscaFunction.subPropertyPath.indexOf(key) != -1) {
+ return true;
+ }
+ });
+ }
+ return false;
+ }
};
public static factory = (DataTypesService:DataTypesService,
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 8ee253e5dc..74a06baa53 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
@@ -34,6 +34,8 @@
<app-tosca-get-function [property]="property" [toscaGetFunction]="toscaFunction"
[componentInstanceMap]="componentInstanceMap"
[functionType]="toscaFunctionTypeForm.value"
+ [compositionMap]="compositionMap"
+ [compositionMapKey]="compositionMapKey"
(onValidityChange)="onGetFunctionValidityChange($event)"></app-tosca-get-function>
</div>
<div *ngIf="isYamlFunctionSelected()">
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 6b43cb014d..f697eed027 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
@@ -44,6 +44,8 @@ export class ToscaFunctionComponent implements OnInit, OnChanges {
@Input() property: PropertyBEModel;
@Input() componentInstanceMap: Map<string, InstanceFeDetails> = new Map<string, InstanceFeDetails>();
@Input() allowClear: boolean = true;
+ @Input() compositionMap: boolean = false;
+ @Input() compositionMapKey: string = "";
@Output() onValidFunction: EventEmitter<ToscaGetFunction> = new EventEmitter<ToscaGetFunction>();
@Output() onValidityChange: EventEmitter<ToscaFunctionValidationEvent> = new EventEmitter<ToscaFunctionValidationEvent>();
@@ -98,6 +100,17 @@ export class ToscaFunctionComponent implements OnInit, OnChanges {
}
private initToscaFunction(): void {
+ if (this.compositionMap && this.property.subPropertyToscaFunctions) {
+ let keyToFind = [this.compositionMapKey];
+ let subPropertyToscaFunction = this.property.subPropertyToscaFunctions.find(subPropertyToscaFunction => this.areEqual(subPropertyToscaFunction.subPropertyPath, keyToFind));
+
+ if (subPropertyToscaFunction){
+ this.toscaFunction = subPropertyToscaFunction.toscaFunction;
+ this.toscaFunctionForm.setValue(this.toscaFunction);
+ this.toscaFunctionTypeForm.setValue(this.toscaFunction.type);
+ }
+ return;
+ }
if (this.property instanceof PropertyDeclareAPIModel && this.property.subPropertyToscaFunctions && (<PropertyDeclareAPIModel> this.property).propertiesName){
let propertiesPath = (<PropertyDeclareAPIModel> this.property).propertiesName.split("#");
if (propertiesPath.length > 1){
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 6f19d5eff4..62cd697f8c 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
@@ -32,7 +32,7 @@
<option *ngFor="let value of propertyDropdownList" [ngValue]="value">{{value.propertyLabel}}</option>
</select>
</div>
- <div *ngIf="dropDownErrorMsg">{{dropDownErrorMsg}}</div>
+ <div *ngIf="dropDownErrorMsg" class="tosca-error">{{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-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 84018fd546..9fdc8c19aa 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
@@ -45,6 +45,8 @@ export class ToscaGetFunctionComponent implements OnInit, OnChanges {
@Input() toscaGetFunction: ToscaGetFunction;
@Input() componentInstanceMap: Map<string, InstanceFeDetails> = new Map<string, InstanceFeDetails>();
@Input() functionType: ToscaGetFunctionType;
+ @Input() compositionMap: boolean;
+ @Input() compositionMapKey: string;
@Output() onValidFunction: EventEmitter<ToscaGetFunction> = new EventEmitter<ToscaGetFunction>();
@Output() onValidityChange: EventEmitter<ToscaGetFunctionValidationEvent> = new EventEmitter<ToscaGetFunctionValidationEvent>();
@@ -262,10 +264,10 @@ export class ToscaGetFunctionComponent implements OnInit, OnChanges {
private propertyTypeToString() {
if (this.isSubProperty()){
- if (this.typeHasSchema(this.property.type) && this.property instanceof PropertyDeclareAPIModel &&
- (<PropertyDeclareAPIModel> this.property).input instanceof DerivedFEProperty) {
- if(this.isComplexType(this.property.schemaType)){
- return this.property.input.type;
+ if ((this.typeHasSchema(this.property.type) && this.property instanceof PropertyDeclareAPIModel &&
+ (<PropertyDeclareAPIModel> this.property).input instanceof DerivedFEProperty) || this.compositionMap) {
+ if(this.isComplexType(this.property.schemaType) && !this.compositionMap){
+ return (<PropertyDeclareAPIModel> this.property).input.type;
}else{
return this.property.schema.property.type;
}
@@ -375,9 +377,9 @@ export class ToscaGetFunctionComponent implements OnInit, OnChanges {
private hasSameType(property: PropertyBEModel | AttributeBEModel): boolean {
if (this.typeHasSchema(this.property.type)) {
- if (this.property instanceof PropertyDeclareAPIModel && (<PropertyDeclareAPIModel> this.property).input instanceof DerivedFEProperty) {
- if(this.isComplexType(this.property.schemaType)){
- return property.type === this.property.input.type;
+ if ((this.property instanceof PropertyDeclareAPIModel && (<PropertyDeclareAPIModel> this.property).input instanceof DerivedFEProperty) || this.compositionMap) {
+ if(this.isComplexType(this.property.schemaType) && !this.compositionMap){
+ return property.type === (<PropertyDeclareAPIModel> this.property).input.type;
}else{
return property.type === this.property.schema.property.type;
}
diff --git a/catalog-ui/src/app/view-models/forms/property-forms/base-property-form/property-form-base.less b/catalog-ui/src/app/view-models/forms/property-forms/base-property-form/property-form-base.less
index 8682dd79fe..1c1c0c9c52 100644
--- a/catalog-ui/src/app/view-models/forms/property-forms/base-property-form/property-form-base.less
+++ b/catalog-ui/src/app/view-models/forms/property-forms/base-property-form/property-form-base.less
@@ -1,6 +1,6 @@
.sdc-edit-property-container {
.scrollbar-container{
- height: 415px;
+ height: 475px;
width: 830px;
.perfect-scrollbar;
}
diff --git a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html
index d605cb95e8..48a85e4fcc 100644
--- a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html
+++ b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html
@@ -146,7 +146,7 @@
<input type="radio" name="hasGetFunctionValue"
ng-model="editPropertyModel.hasGetFunctionValue"
ng-value="false"
- ng-change="onValueTypeChange()"/> Value
+ ng-change="onValueTypeChange()"/> Entries
<input type="radio" name="hasGetFunctionValue"
ng-model="editPropertyModel.hasGetFunctionValue"
ng-value="true"
@@ -176,6 +176,8 @@
<div ng-switch-when="map">
<type-map value-obj-ref="myValue"
schema-property="editPropertyModel.property.schema.property"
+ parent-property="editPropertyModel.property"
+ component-instance-map="componentInstanceMap"
parent-form-obj="forms.editForm"
fields-prefix-name="currentPropertyIndex"
read-only="(editPropertyModel.property.readonly && !isPropertyValueOwner) || isVnfConfiguration"
diff --git a/catalog-ui/src/app/view-models/forms/property-forms/select-datatype-modal/select-datatype-modal.less b/catalog-ui/src/app/view-models/forms/property-forms/select-datatype-modal/select-datatype-modal.less
index 15e30af4ee..02b7612671 100644
--- a/catalog-ui/src/app/view-models/forms/property-forms/select-datatype-modal/select-datatype-modal.less
+++ b/catalog-ui/src/app/view-models/forms/property-forms/select-datatype-modal/select-datatype-modal.less
@@ -1,6 +1,6 @@
.sdc-edit-property-container {
.scrollbar-container{
- height: 415px;
+ height: 475px;
width: 830px;
.perfect-scrollbar;
}