UI support for default custom function names

Issue-ID: SDC-4473
Signed-off-by: JvD_Ericsson <jeff.van.dam@est.tech>
Change-Id: Ie4d002989857029300f0cc88123a5616a453aef0

18 files changed, 161 insertions, 20 deletions

diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.html b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.html
index 6a5bd5a007..44db3b0d00 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.html
@@ -47,6 +47,7 @@
                             [property]="property"
                             [allowClear]="false"
                             [componentInstanceMap]="componentInstanceMap"
+                            [customToscaFunctions]="customToscaFunctions"
                             (onValidityChange)="onToscaFunctionValidityChange($event)">
             </tosca-function>
           </div>
@@ -54,6 +55,7 @@
             <tosca-function
                             [property]="property"
                             [allowClear]="false"
+                            [customToscaFunctions]="customToscaFunctions"
                             (onValidityChange)="onToscaFunctionValidityChange($event)">
             </tosca-function>
           </div>
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.ts
index 145aad687c..103fc5c4f1 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.ts
@@ -28,6 +28,7 @@ import {ToscaFunction} from '../../../../../../../models/tosca-function';
 import {ToscaFunctionValidationEvent} from "../../../../../properties-assignment/tosca-function/tosca-function.component";
 import {InstanceFeDetails} from "../../../../../../../models/instance-fe-details";
 import {ToscaTypeHelper} from "app/utils/tosca-type-helper";
+import {CustomToscaFunction} from "../../../../../../../models/default-custom-functions";
 
 @Component({
   selector: 'app-input-list-item',
@@ -51,6 +52,7 @@ export class InputListItemComponent implements OnInit {
   @Input() allowDeletion: boolean = false;
   @Input() toscaFunction: ToscaFunction;
   @Input() componentInstanceMap: Map<string, InstanceFeDetails> = new Map();
+  @Input() customToscaFunctions: Array<CustomToscaFunction> = [];
   @Output('onValueChange') onValueChangeEvent: EventEmitter<any> = new EventEmitter<any>();
   @Output('onDelete') onDeleteEvent: EventEmitter<string> = new EventEmitter<string>();
   @Output('onChildListItemDelete') onChildListItemDeleteEvent: EventEmitter<number> = new EventEmitter<number>();
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.html b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.html
index 9a2d1f3936..d4b70f9be5 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.html
@@ -36,6 +36,7 @@
         [isViewOnly]="isViewOnly"
         [allowDeletion]="allowDeletion"
         [componentInstanceMap]="componentInstanceMap"
+        [customToscaFunctions]="customToscaFunctions"
         (onValueChange)="onValueChange($event)"
         (onDelete)="onDelete($event)">
     </app-input-list-item>
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.spec.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.spec.ts
index c98f2bb9af..3230306e68 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.spec.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.spec.ts
@@ -28,6 +28,7 @@ import {DataTypeModel} from '../../../../../../models/data-types';
 import {TranslateService} from '../../../../../shared/translator/translate.service';
 import {ToscaFunction} from '../../../../../../models/tosca-function';
 import {InstanceFeDetails} from "../../../../../../models/instance-fe-details";
+import {CustomToscaFunction} from "../../../../../../models/default-custom-functions";
 
 @Component({selector: 'app-input-list-item', template: ''})
 class InputListItemStubComponent {
@@ -41,6 +42,7 @@ class InputListItemStubComponent {
   @Input() toscaFunction: ToscaFunction;
   @Input() showToscaFunctionOption: boolean;
   @Input() componentInstanceMap: Map<string, InstanceFeDetails> = null;
+  @Input() customToscaFunctions: Array<CustomToscaFunction> = [];
 }
 
 const translateServiceMock: Partial<TranslateService> = {
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.ts
index fa06c3eabc..208c0030f6 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.ts
@@ -25,6 +25,7 @@ import {DataTypeModel} from "../../../../../../models/data-types";
 import {DerivedPropertyType} from "../../../../../../models/properties-inputs/property-be-model";
 import {PROPERTY_DATA, PROPERTY_TYPES} from "../../../../../../utils/constants";
 import {InstanceFeDetails} from "../../../../../../models/instance-fe-details";
+import {CustomToscaFunction} from "../../../../../../models/default-custom-functions";
 
 @Component({
   selector: 'input-list',
@@ -51,6 +52,7 @@ export class InputListComponent {
   @Input() showToscaFunctionOption: boolean = false;
   @Input() allowDeletion: boolean = false;
   @Input() componentInstanceMap: Map<string, InstanceFeDetails> = new Map();
+  @Input() customToscaFunctions: Array<CustomToscaFunction> = [];
   @Output('onInputsValidityChange') inputsValidityChangeEvent: EventEmitter<boolean> = new EventEmitter<boolean>();
   @Output('onValueChange') inputValueChangeEvent: EventEmitter<InputOperationParameter> = new EventEmitter<InputOperationParameter>();
   @Output('onDelete') inputDeleteEvent: EventEmitter<string> = new EventEmitter<string>();
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html
index a3885747d3..8ab1b97cda 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html
@@ -115,6 +115,7 @@
                     [showToscaFunctionOption]="true"
                     [componentInstanceMap]="componentInstanceMap"
                     [allowDeletion]="false"
+                    [customToscaFunctions]="customToscaFunctions"
                     (onInputsValidityChange)="implementationPropsValidityChange($event)"
                     (onValueChange)="onArtifactPropertyValueChange($event)"
                 >
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.ts
index a1f72ac46e..ab9cad0a39 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.ts
@@ -34,6 +34,9 @@ import {DataTypeService} from "../../../../services/data-type.service";
 import {Observable} from "rxjs/Observable";
 import {DataTypeModel} from "../../../../../models/data-types";
 import {InstanceFeDetails} from "../../../../../models/instance-fe-details";
+import {TopologyTemplateService} from "app/ng2/services/component-services/topology-template.service";
+import {CustomToscaFunction} from "../../../../../models/default-custom-functions";
+import {ToscaFunctionType} from "../../../../../models/tosca-function-type.enum";
 
 @Component({
     selector: 'operation-handler',
@@ -83,11 +86,14 @@ export class InterfaceOperationHandlerComponent {
     artifactTypeProperties: Array<InputOperationParameter> = [];
     toscaArtifactTypes: Array<DropdownValue> = [];
     componentInstanceMap: Map<string, InstanceFeDetails>;
+    customToscaFunctions: Array<CustomToscaFunction>;
     enableAddArtifactImplementation: boolean;
     propertyValueValid: boolean = true;
     inputTypeOptions: any[];
 
-    constructor(private dataTypeService: DataTypeService, private componentServiceNg2: ComponentServiceNg2) {
+    constructor(private dataTypeService: DataTypeService,
+                private componentServiceNg2: ComponentServiceNg2,
+                private topologyTemplateService: TopologyTemplateService) {
     }
 
     ngOnInit() {
@@ -100,6 +106,7 @@ export class InterfaceOperationHandlerComponent {
         this.operationToUpdate.interfaceId = this.input.selectedInterface.uniqueId;
         this.operationToUpdate.interfaceType = this.input.selectedInterface.type;
         this.modelName = this.input.modelName;
+        this.initCustomToscaFunctions();
         this.initInputs();
         this.removeImplementationQuote();
         this.loadInterfaceOperationImplementation();
@@ -128,6 +135,15 @@ export class InterfaceOperationHandlerComponent {
         this.loadInterfaceType();
     }
 
+    private initCustomToscaFunctions() {
+        this.customToscaFunctions = [];
+        this.topologyTemplateService.getDefaultCustomFunction().toPromise().then((data) => {
+            for (let customFunction of data) {
+                this.customToscaFunctions.push(new CustomToscaFunction(customFunction));
+            }
+        });
+    }
+
     private loadInterfaceType() {
         this.componentServiceNg2.getInterfaceTypesByModel(this.modelName)
         .subscribe(response => {
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 {
diff --git a/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.html b/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.html
index 922cda6982..8024eb1615 100644
--- a/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.html
+++ b/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.html
@@ -73,6 +73,7 @@
                 <div class="i-sdc-form-item rule-input-field">
                     <tosca-function [property]="selectedProperty"
                                     [componentInstanceMap]="componentInstanceMap"
+                                    [customToscaFunctions]="customToscaFunctions"
                                     [allowClear]="false"
                                     (onValidityChange)="onToscaFunctionValidityChange($event)"
                     >
diff --git a/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.ts b/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.ts
index 5666bf595b..39609a5fbd 100644
--- a/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.ts
+++ b/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.ts
@@ -28,6 +28,9 @@ import {ToscaGetFunction} from "../../../models/tosca-get-function";
 import {PropertyFilterConstraintUi} from "../../../models/ui-models/property-filter-constraint-ui";
 import {ConstraintOperatorType, FilterConstraintHelper} from "../../../utils/filter-constraint-helper";
 import {ToscaFunctionHelper} from "../../../utils/tosca-function-helper";
+import {TopologyTemplateService} from "app/ng2/services/component-services/topology-template.service";
+import {CustomToscaFunction} from "../../../models/default-custom-functions";
+import {ToscaFunctionType} from "../../../models/tosca-function-type.enum";
 
 @Component({
   selector: 'service-dependencies-editor',
@@ -72,6 +75,7 @@ export class ServiceDependenciesEditorComponent implements OnInit {
   selectedProperty: PropertyFEModel;
   selectedSourceType: string;
   componentInstanceMap: Map<string, InstanceFeDetails> = new Map<string, InstanceFeDetails>();
+  customToscaFunctions: Array<CustomToscaFunction>;
   capabilityDropdownList: DropdownValue[] = [];
 
   SOURCE_TYPES = {
@@ -79,7 +83,7 @@ export class ServiceDependenciesEditorComponent implements OnInit {
     TOSCA_FUNCTION: {label: 'Tosca Function', value: SourceType.TOSCA_FUNCTION}
   };
 
-  constructor(private propertiesUtils: PropertiesUtils, private compositionService: CompositionService) {}
+  constructor(private propertiesUtils: PropertiesUtils, private compositionService: CompositionService, private topologyTemplateService: TopologyTemplateService) {}
 
   ngOnInit(): void {
     if (this.compositionService.componentInstances) {
@@ -89,6 +93,7 @@ export class ServiceDependenciesEditorComponent implements OnInit {
         });
       });
     }
+    this.initCustomToscaFunctions();
     this.initCapabilityDropdown();
     this.initCurrentRule();
     this.initConstraintOperatorOptions();
@@ -97,6 +102,14 @@ export class ServiceDependenciesEditorComponent implements OnInit {
     this.syncRuleData();
   }
 
+  private initCustomToscaFunctions() {
+    this.customToscaFunctions = [];
+    this.topologyTemplateService.getDefaultCustomFunction().toPromise().then((data) => {
+        for (let customFunction of data) {
+            this.customToscaFunctions.push(new CustomToscaFunction(customFunction));
+        }
+    });
+}
 
   private initCapabilityDropdown(): void {
     if (this.filterType == FilterType.CAPABILITY) {
diff --git a/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts b/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts
index b6eb857471..0003f53403 100644
--- a/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts
+++ b/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts
@@ -62,6 +62,7 @@ import {BEInterfaceOperationModel, InterfaceOperationModel} from "../../../model
 import {AttributeBEModel} from "../../../models/attributes-outputs/attribute-be-model";
 import {InstanceAttributesAPIMap} from "../../../models/attributes-outputs/attribute-fe-map";
 import {FilterConstraint} from "../../../models/filter-constraint";
+import {CustomToscaFunction, DefaultCustomFunctions} from "../../../models/default-custom-functions";
 
 /* we need to use this service from now, we will remove component.service when we finish remove the angular1.
  The service is duplicated since we can not use downgrades service with NGXS*/
@@ -656,4 +657,9 @@ export class TopologyTemplateService {
         .getServerTypeUrl(componentMetaDataType) + componentMetaDataId + '/componentInstance/' + componentInstanceId + '/interfaceOperation', operationList);
     }
 
+    getDefaultCustomFunction(type='ALL'): Observable<CustomToscaFunction[]> {
+        return this.http.get<DefaultCustomFunctions>(this.baseUrl + "customToscaFunctions/" + type)
+        .pipe(map(response => response.defaultCustomToscaFunction ? response.defaultCustomToscaFunction : undefined));
+    }
+
 }