Fail to import service with node filter using 'in_range'
[sdc.git] / catalog-ui / src / app / ng2 / components / logic / service-dependencies / service-dependencies.component.ts
index 35e80dc..e5f1f6f 100644 (file)
@@ -1,5 +1,6 @@
-/*!
+/*
  * Copyright © 2016-2018 European Support Limited
+ * Modification Copyright (C) 2022 Nordix Foundation.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import { Component, ComponentRef, EventEmitter, Input, Output } from '@angular/core';
-import {
-    ButtonModel,
-    ComponentInstance,
-    InputBEModel,
-    ModalModel,
-    PropertyBEModel,
-    PropertyModel,
-} from 'app/models';
-import { ModalComponent } from 'app/ng2/components/ui/modal/modal.component';
-import { ServiceDependenciesEditorComponent } from 'app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component';
-import { ModalService } from 'app/ng2/services/modal.service';
-import { ComponentGenericResponse } from 'app/ng2/services/responses/component-generic-response';
-import { TranslateService } from 'app/ng2/shared/translator/translate.service';
-import { ComponentMetadata } from '../../../../models/component-metadata';
-import { ServiceInstanceObject } from '../../../../models/service-instance-properties-and-interfaces';
-import { TopologyTemplateService } from '../../../services/component-services/topology-template.service';
-import {CapabilitiesFilterPropertiesEditorComponent} from "../../../pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component";
-import {CapabilitiesConstraintObject} from "../capabilities-constraint/capabilities-constraint.component";
-import {ToscaFilterConstraintType} from "../../../../models/tosca-filter-constraint-type.enum";
-
-export class ConstraintObject {
-    servicePropertyName: string;
-    constraintOperator: string;
-    sourceType: string;
-    sourceName: string;
-    value: string;
-
-    constructor(input?: any) {
-        if (input) {
-            this.servicePropertyName = input.servicePropertyName;
-            this.constraintOperator = input.constraintOperator;
-            this.sourceType = input.sourceType;
-            this.sourceName = input.sourceName;
-            this.value = input.value;
-        }
-    }
-}
-
-// tslint:disable-next-line:max-classes-per-file
-export class ConstraintObjectUI extends ConstraintObject{
-    isValidValue: boolean;
 
-    constructor(input?: any) {
-        super(input);
-        if (input) {
-            this.isValidValue = input.isValidValue ? input.isValidValue : input.value !== '';
-        }
-    }
-
-    public updateValidity(isValidValue: boolean) {
-        this.isValidValue = isValidValue;
-    }
-
-    public isValidRule(isStatic) {
-        const isValidValue = isStatic ? this.isValidValue : true;
-        return this.servicePropertyName != null && this.servicePropertyName !== ''
-            && this.value != null && this.value !== '' && isValidValue;
-    }
+import {Component, ComponentRef, EventEmitter, Input, OnChanges, OnInit, Output} from '@angular/core';
+import {ButtonModel, ComponentInstance, InputBEModel, ModalModel, PropertyBEModel, PropertyModel,} from 'app/models';
+import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component';
+import {FilterType, ServiceDependenciesEditorComponent} from 'app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component';
+import {ModalService} from 'app/ng2/services/modal.service';
+import {ComponentGenericResponse} from 'app/ng2/services/responses/component-generic-response';
+import {TranslateService} from 'app/ng2/shared/translator/translate.service';
+import {ComponentMetadata} from '../../../../models/component-metadata';
+import {ServiceInstanceObject} from '../../../../models/service-instance-properties-and-interfaces';
+import {TopologyTemplateService} from '../../../services/component-services/topology-template.service';
+import {ToscaFilterConstraintType} from "../../../../models/tosca-filter-constraint-type.enum";
+import {CompositionService} from "../../../pages/composition/composition.service";
+import {FilterConstraint} from "app/models/filter-constraint";
+import {PropertyFilterConstraintUi} from "../../../../models/ui-models/property-filter-constraint-ui";
+import {ConstraintOperatorType, FilterConstraintHelper} from "../../../../utils/filter-constraint-helper";
+import {CustomToscaFunction} from "../../../../models/default-custom-functions";
+
+export enum SourceType {
+    STATIC = 'static',
+    SEVERAL = 'several',
+    TOSCA_FUNCTION = 'tosca_function',
+    TOSCA_FUNCTION_LIST = 'tosca_function_list'
 }
 
-export const OPERATOR_TYPES = {
-    EQUAL: 'equal',
-    GREATER_THAN: 'greater_than',
-    LESS_THAN: 'less_than'
-};
-
-// tslint:disable-next-line:max-classes-per-file
 class I18nTexts {
     static removeDirectiveModalTitle: string;
     static removeDirectiveModalText: string;
@@ -121,7 +79,6 @@ class I18nTexts {
     }
 }
 
-// tslint:disable-next-line:max-classes-per-file
 @Component({
     selector: 'service-dependencies',
     templateUrl: './service-dependencies.component.html',
@@ -129,63 +86,80 @@ class I18nTexts {
     providers: [ModalService, TranslateService]
 })
 
-export class ServiceDependenciesComponent {
+export class ServiceDependenciesComponent implements OnInit, OnChanges {
     modalInstance: ComponentRef<ModalComponent>;
     isDependent: boolean;
     isLoading: boolean;
     parentServiceInputs: InputBEModel[] = [];
     parentServiceProperties: PropertyBEModel[] = [];
-    constraintProperties: ConstraintObject[] = [];
-    constraintCapabilities: CapabilitiesConstraintObject[] = [];
+    constraintProperties: FilterConstraint[] = [];
+    constraintPropertyLabels: string[] = [];
+    constraintCapabilities: PropertyFilterConstraintUi[] = [];
+    constraintCapabilityLabels: string[] = [];
     operatorTypes: any[];
     capabilities: string = ToscaFilterConstraintType.CAPABILITIES;
     properties: string = ToscaFilterConstraintType.PROPERTIES;
-    private componentInstancesConstraints: ConstraintObject[] = [];
-    directiveOptions: string[];
+    private componentInstancesConstraints: FilterConstraint[] = [];
+    isEditable: boolean;
+    customToscaFunctions: Array<CustomToscaFunction>;
 
     @Input() readonly: boolean;
     @Input() compositeService: ComponentMetadata;
     @Input() currentServiceInstance: ComponentInstance;
     @Input() selectedInstanceSiblings: ServiceInstanceObject[];
-    @Input() selectedInstanceConstraints: ConstraintObject[] = [];
+    @Input() selectedInstanceConstraints: FilterConstraint[] = [];
     @Input() selectedInstanceProperties: PropertyBEModel[] = [];
-    @Output() updateRulesListEvent: EventEmitter<ConstraintObject[]> = new EventEmitter<ConstraintObject[]>();
-    @Output() updateNodeFilterProperties: EventEmitter<ConstraintObject[]> = new EventEmitter<ConstraintObject[]>();
-    @Output() updateNodeFilterCapabilities: EventEmitter<CapabilitiesConstraintObject[]> = new EventEmitter<CapabilitiesConstraintObject[]>();
+    @Input() componentInstanceCapabilitiesMap: Map<string, PropertyModel[]>;
+    @Output() updateRulesListEvent: EventEmitter<FilterConstraint[]> = new EventEmitter<FilterConstraint[]>();
+    @Output() updateNodeFilterProperties: EventEmitter<FilterConstraint[]> = new EventEmitter<FilterConstraint[]>();
+    @Output() updateNodeFilterCapabilities: EventEmitter<PropertyFilterConstraintUi[]> = new EventEmitter<PropertyFilterConstraintUi[]>();
     @Output() loadRulesListEvent:EventEmitter<any> = new EventEmitter();
     @Output() dependencyStatus = new EventEmitter<boolean>();
 
-    @Input() componentInstanceCapabilitiesMap: Map<string, PropertyModel[]>;
-
-    constructor(private topologyTemplateService: TopologyTemplateService, private modalServiceNg2: ModalService, private translateService: TranslateService) {
+    constructor(private topologyTemplateService: TopologyTemplateService,
+                private modalServiceNg2: ModalService,
+                private translateService: TranslateService,
+                private compositionService: CompositionService) {
     }
 
-    ngOnInit() {
-        this.loadDirectives();
+    ngOnInit(): void {
         this.isLoading = false;
         this.operatorTypes = [
-            {label: '>', value: OPERATOR_TYPES.GREATER_THAN},
-            {label: '<', value: OPERATOR_TYPES.LESS_THAN},
-            {label: '=', value: OPERATOR_TYPES.EQUAL}
+            {label: FilterConstraintHelper.convertToSymbol(ConstraintOperatorType.GREATER_THAN), value: ConstraintOperatorType.GREATER_THAN},
+            {label: FilterConstraintHelper.convertToSymbol(ConstraintOperatorType.LESS_THAN), value: ConstraintOperatorType.LESS_THAN},
+            {label: FilterConstraintHelper.convertToSymbol(ConstraintOperatorType.EQUAL), value: ConstraintOperatorType.EQUAL},
+            {label: FilterConstraintHelper.convertToSymbol(ConstraintOperatorType.GREATER_OR_EQUAL), value: ConstraintOperatorType.GREATER_OR_EQUAL},
+            {label: FilterConstraintHelper.convertToSymbol(ConstraintOperatorType.LESS_OR_EQUAL), value: ConstraintOperatorType.LESS_OR_EQUAL},
+            {label: FilterConstraintHelper.convertToSymbol(ConstraintOperatorType.LENGTH), value: ConstraintOperatorType.LENGTH},
+            {label: FilterConstraintHelper.convertToSymbol(ConstraintOperatorType.IN_RANGE), value: ConstraintOperatorType.IN_RANGE},
+            {label: FilterConstraintHelper.convertToSymbol(ConstraintOperatorType.MIN_LENGTH), value: ConstraintOperatorType.MIN_LENGTH},
+            {label: FilterConstraintHelper.convertToSymbol(ConstraintOperatorType.MAX_LENGTH), value: ConstraintOperatorType.MAX_LENGTH},
+            {label: FilterConstraintHelper.convertToSymbol(ConstraintOperatorType.PATTERN), value: ConstraintOperatorType.PATTERN}
         ];
         this.topologyTemplateService.getComponentInputsWithProperties(this.compositeService.componentType, this.compositeService.uniqueId)
         .subscribe((result: ComponentGenericResponse) => {
             this.parentServiceInputs = result.inputs;
             this.parentServiceProperties = result.properties;
         });
+        this.initCustomToscaFunctions();
         this.loadNodeFilter();
         this.translateService.languageChangedObservable.subscribe((lang) => {
             I18nTexts.translateTexts(this.translateService);
         });
     }
 
-    loadDirectives() {
-        this.topologyTemplateService.getDirectiveList().subscribe((data: string[]) => {
-            this.directiveOptions = data;
-        })
+    private initCustomToscaFunctions() {
+        if (!this.customToscaFunctions) {
+            this.customToscaFunctions = [];
+            this.topologyTemplateService.getDefaultCustomFunction().toPromise().then((data) => {
+                for (let customFunction of data) {
+                    this.customToscaFunctions.push(new CustomToscaFunction(customFunction));
+                }
+            });
+        }
     }
 
-    ngOnChanges(changes) {
+    ngOnChanges(changes): void {
         if (changes.currentServiceInstance) {
             this.currentServiceInstance = changes.currentServiceInstance.currentValue;
             this.isDependent = this.currentServiceInstance.isDependent();
@@ -196,9 +170,10 @@ export class ServiceDependenciesComponent {
         }
     }
 
-    private getActualDirectiveValue = (): string => {
-        return this.currentServiceInstance.directives.length > 0 ? this.currentServiceInstance.directives[0] : "";
+    private getActualDirectiveValue = (): string[] => {
+        return this.currentServiceInstance.directives.length > 0 ? this.currentServiceInstance.directives : [];
     }
+
     public openRemoveDependencyModal = (): ComponentRef<ModalComponent> => {
         const actionButton: ButtonModel = new ButtonModel(I18nTexts.modalApprove, 'blue', this.onUncheckDependency);
         const cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'grey', this.onCloseRemoveDependencyModal);
@@ -208,27 +183,19 @@ export class ServiceDependenciesComponent {
         return this.modalServiceNg2.createCustomModal(modalModel);
     }
 
-    public openUpdateDependencyModal = (): ComponentRef<ModalComponent> => {
-        const actionButton: ButtonModel = new ButtonModel(I18nTexts.modalApprove, 'blue', this.onUncheckDependency);
-        const cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'grey', this.onCloseRemoveDependencyModal);
-        const modalModel: ModalModel = new ModalModel('sm', I18nTexts.updateDirectiveModalTitle,
-            I18nTexts.updateDirectiveModalText, [actionButton, cancelButton]);
-        return this.modalServiceNg2.createCustomModal(modalModel);
-    }
-
     private loadNodeFilter = (): void => {
         this.topologyTemplateService.getServiceFilterConstraints(this.compositeService.componentType, this.compositeService.uniqueId).subscribe((response) => {
             if (response.nodeFilterforNode && response.nodeFilterforNode[this.currentServiceInstance.uniqueId]) {
                 this.componentInstancesConstraints = response.nodeFilterforNode;
-                const nodeFilterPropertiesResponse: ConstraintObject[] = response.nodeFilterforNode[this.currentServiceInstance.uniqueId].properties;
-                this.constraintProperties = nodeFilterPropertiesResponse;
-                const nodeFilterCapabilitiesResponse: CapabilitiesConstraintObject[] = response.nodeFilterforNode[this.currentServiceInstance.uniqueId].capabilities;
-                this.constraintCapabilities = nodeFilterCapabilitiesResponse;
+                this.constraintProperties = response.nodeFilterforNode[this.currentServiceInstance.uniqueId].properties;
+                this.buildConstraintPropertyLabels();
+                this.constraintCapabilities = response.nodeFilterforNode[this.currentServiceInstance.uniqueId].capabilities;
+                this.buildCapabilityFilterConstraintLabels();
             }
         });
     }
 
-    onUncheckDependency = () => {
+    onUncheckDependency = (): void => {
         this.modalServiceNg2.closeCurrentModal();
         this.isLoading = true;
         const isDepOrig = this.isDependent;
@@ -237,41 +204,48 @@ export class ServiceDependenciesComponent {
         this.updateComponentInstance(isDepOrig, rulesListOrig);
     }
 
-    onCloseRemoveDependencyModal = () => {
+    onCloseRemoveDependencyModal = (): void => {
         this.isDependent = true;
         this.modalServiceNg2.closeCurrentModal();
     }
 
-    onOptionsSelected(event: any) {
-        const newDirectiveValue = event.target.value;
-        if (newDirectiveValue.toLowerCase() !== this.getActualDirectiveValue()) {
-            const rulesListOrig = this.componentInstancesConstraints;
-            this.setDirectiveValue(newDirectiveValue);
-            this.constraintProperties = [];
-            this.constraintCapabilities = [];
-            this.updateComponentInstance(this.isDependent, rulesListOrig);
-        }
+    onAddDirectives(directives: string[]): void {
+        this.isEditable = false;
+        this.setDirectiveValue(directives);
+        const rulesListOrig = this.componentInstancesConstraints;
+        this.constraintProperties = [];
+        this.constraintPropertyLabels = [];
+        this.constraintCapabilities = [];
+        this.constraintCapabilityLabels = [];
+        this.loadNodeFilter();
+        this.updateComponentInstance(this.isDependent, rulesListOrig);
     }
 
-    private onRemoveDirective() {
+    private onRemoveDirective(): void {
         this.openRemoveDependencyModal().instance.open();
         this.constraintProperties = [];
+        this.constraintPropertyLabels = [];
         this.constraintCapabilities = [];
+        this.constraintCapabilityLabels = [];
     }
 
-    private setDirectiveValue(newDirectiveValue: string) {
-        if (this.isDependent) {
-            this.openUpdateDependencyModal().instance.open();
-        }
-        this.currentServiceInstance.setDirectiveValue(newDirectiveValue);
+    private onEditDirectives(): void {
+        this.isEditable = true;
+    }
+
+    private setDirectiveValue(newDirectiveValues: string[]): void {
+        this.currentServiceInstance.setDirectiveValue(newDirectiveValues);
     }
 
-    updateComponentInstance(isDependentOrigVal: boolean, rulesListOrig: ConstraintObject[]) {
+    updateComponentInstance(isDependentOrigVal: boolean, rulesListOrig: FilterConstraint[]): void {
         this.isLoading = true;
         this.topologyTemplateService.updateComponentInstance(this.compositeService.uniqueId,
                                                              this.compositeService.componentType,
                                                              this.currentServiceInstance)
                                                              .subscribe((updatedServiceIns: ComponentInstance) => {
+            const selectedComponentInstance = this.compositionService.getComponentInstances()
+            .find(componentInstance => componentInstance.uniqueId == this.currentServiceInstance.uniqueId);
+            selectedComponentInstance.directives = updatedServiceIns.directives;
             this.currentServiceInstance = new ComponentInstance(updatedServiceIns);
             this.isDependent = this.currentServiceInstance.isDependent();
             this.dependencyStatus.emit(this.isDependent);
@@ -283,11 +257,11 @@ export class ServiceDependenciesComponent {
             this.isDependent = isDependentOrigVal;
             this.componentInstancesConstraints = rulesListOrig;
             this.isLoading = false;
-            console.log('An error has occurred.');
+            console.error('An error has occurred.', err);
         });
     }
 
-    onAddNodeFilter = () => {
+    onAddNodeFilter = (): void => {
         if (!this.selectedInstanceProperties) {
             this.modalServiceNg2.openAlertModal(I18nTexts.validateNodePropertiesTxt, I18nTexts.validateNodePropertiesMsg);
         } else {
@@ -295,24 +269,25 @@ export class ServiceDependenciesComponent {
             const saveButton: ButtonModel = new ButtonModel(I18nTexts.modalCreate, 'blue', () => this.createNodeFilter(this.properties), this.getDisabled);
             const modalModel: ModalModel = new ModalModel('l', I18nTexts.addNodeFilterTxt, '', [saveButton, cancelButton], 'standard');
             this.modalInstance = this.modalServiceNg2.createCustomModal(modalModel);
-            this.modalServiceNg2.addDynamicContentToModal(
+            this.modalServiceNg2.addDynamicContentToModalAndBindInputs(
                 this.modalInstance,
                 ServiceDependenciesEditorComponent,
                 {
-                    currentServiceName: this.currentServiceInstance.name,
-                    operatorTypes: this.operatorTypes,
-                    compositeServiceName: this.compositeService.name,
-                    parentServiceInputs: this.parentServiceInputs,
-                    parentServiceProperties: this.parentServiceProperties,
-                    selectedInstanceProperties: this.selectedInstanceProperties,
-                    selectedInstanceSiblings: this.selectedInstanceSiblings
+                    'currentServiceName': this.currentServiceInstance.name,
+                    'operatorTypes': this.operatorTypes,
+                    'compositeServiceName': this.compositeService.name,
+                    'parentServiceInputs': this.parentServiceInputs,
+                    'parentServiceProperties': this.parentServiceProperties,
+                    'selectedInstanceProperties': this.selectedInstanceProperties,
+                    'customToscaFunctions': this.customToscaFunctions,
+                    'filterType': FilterType.PROPERTY,
                 }
             );
             this.modalInstance.instance.open();
         }
     }
 
-    onAddNodeFilterCapabilities = () => {
+    onAddNodeFilterCapabilities = (): void => {
         if (this.componentInstanceCapabilitiesMap.size == 0) {
             this.modalServiceNg2.openAlertModal(I18nTexts.validateCapabilitiesTxt, I18nTexts.validateCapabilitiesMsg);
         } else {
@@ -320,29 +295,31 @@ export class ServiceDependenciesComponent {
             const saveButton: ButtonModel = new ButtonModel(I18nTexts.modalCreate, 'blue', () => this.createNodeFilterCapabilities(this.capabilities), this.getDisabled);
             const modalModel: ModalModel = new ModalModel('l', I18nTexts.addNodeFilterTxt, '', [saveButton, cancelButton], 'standard');
             this.modalInstance = this.modalServiceNg2.createCustomModal(modalModel);
-            this.modalServiceNg2.addDynamicContentToModal(
+            this.modalServiceNg2.addDynamicContentToModalAndBindInputs(
                 this.modalInstance,
-                CapabilitiesFilterPropertiesEditorComponent,
+                ServiceDependenciesEditorComponent,
                 {
-                    currentServiceName: this.currentServiceInstance.name,
-                    operatorTypes: this.operatorTypes,
-                    compositeServiceName: this.compositeService.name,
-                    parentServiceInputs: this.parentServiceInputs,
-                    selectedInstanceProperties: this.selectedInstanceProperties,
-                    selectedInstanceSiblings: this.selectedInstanceSiblings,
-                    componentInstanceCapabilitiesMap: this.componentInstanceCapabilitiesMap
+                    'currentServiceName': this.currentServiceInstance.name,
+                    'operatorTypes': this.operatorTypes,
+                    'compositeServiceName': this.compositeService.name,
+                    'parentServiceInputs': this.parentServiceInputs,
+                    'parentServiceProperties': this.parentServiceProperties,
+                    'selectedInstanceProperties': this.selectedInstanceProperties,
+                    'capabilityNameAndPropertiesMap': this.componentInstanceCapabilitiesMap,
+                    'filterType': FilterType.CAPABILITY,
                 }
             );
             this.modalInstance.instance.open();
         }
     }
 
-    createNodeFilter = (constraintType: string) => {
+    createNodeFilter = (constraintType: string): void => {
+        this.customToscaFunctions = this.modalInstance.instance.dynamicContent.instance.customToscaFunctions;
         this.isLoading = true;
         this.topologyTemplateService.createServiceFilterConstraints(
             this.compositeService.uniqueId,
             this.currentServiceInstance.uniqueId,
-            new ConstraintObject(this.modalInstance.instance.dynamicContent.instance.currentRule),
+            new FilterConstraint(this.modalInstance.instance.dynamicContent.instance.currentRule),
             this.compositeService.componentType,
             constraintType
         ).subscribe( (response) => {
@@ -354,12 +331,12 @@ export class ServiceDependenciesComponent {
         this.modalServiceNg2.closeCurrentModal();
     }
 
-    createNodeFilterCapabilities = (constraintType: string) => {
+    createNodeFilterCapabilities = (constraintType: string): void => {
         this.isLoading = true;
         this.topologyTemplateService.createServiceFilterCapabilitiesConstraints(
             this.compositeService.uniqueId,
             this.currentServiceInstance.uniqueId,
-            new CapabilitiesConstraintObject(this.modalInstance.instance.dynamicContent.instance.currentRule),
+            new PropertyFilterConstraintUi(this.modalInstance.instance.dynamicContent.instance.currentRule),
             this.compositeService.componentType,
             constraintType
         ).subscribe( (response) => {
@@ -371,50 +348,52 @@ export class ServiceDependenciesComponent {
         this.modalServiceNg2.closeCurrentModal();
     }
 
-    onSelectNodeFilterCapability(constraintType: string, index: number) {
+    onSelectNodeFilterCapability(constraintType: string, index: number): void {
         const cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'outline white', this.modalServiceNg2.closeCurrentModal);
         const saveButton: ButtonModel = new ButtonModel(I18nTexts.modalSave, 'blue', () => this.updateNodeFilterCapability(constraintType, index), this.getDisabled);
         const modalModel: ModalModel = new ModalModel('l', I18nTexts.updateNodeFilterTxt, '', [saveButton, cancelButton], 'standard');
         this.modalInstance = this.modalServiceNg2.createCustomModal(modalModel);
-
-        this.modalServiceNg2.addDynamicContentToModal(
+        const selectedFilterConstraint = new PropertyFilterConstraintUi(this.constraintCapabilities[index]);
+        this.modalServiceNg2.addDynamicContentToModalAndBindInputs(
             this.modalInstance,
-            CapabilitiesFilterPropertiesEditorComponent,
+            ServiceDependenciesEditorComponent,
             {
-                serviceRuleIndex: index,
-                serviceRules: _.map(this.constraintCapabilities, (rule) => new CapabilitiesConstraintObject(rule)),
-                currentServiceName: this.currentServiceInstance.name,
-                operatorTypes: this.operatorTypes,
-                compositeServiceName: this.compositeService.name,
-                parentServiceInputs: this.parentServiceInputs,
-                selectedInstanceProperties: this.selectedInstanceProperties,
-                selectedInstanceSiblings: this.selectedInstanceSiblings,
-                componentInstanceCapabilitiesMap: this.componentInstanceCapabilitiesMap
+                'filterConstraint': selectedFilterConstraint,
+                'currentServiceName': this.currentServiceInstance.name,
+                'operatorTypes': this.operatorTypes,
+                'compositeServiceName': this.compositeService.name,
+                'parentServiceInputs': this.parentServiceInputs,
+                'parentServiceProperties': this.parentServiceProperties,
+                'selectedInstanceProperties': this.selectedInstanceProperties,
+                'capabilityNameAndPropertiesMap': this.componentInstanceCapabilitiesMap,
+                'filterType': FilterType.CAPABILITY,
             }
         );
         this.modalInstance.instance.open();
     }
 
-    onSelectNodeFilter(constraintType: string, index: number) {
+    onSelectNodeFilter(constraintType: string, index: number): void {
         const cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'outline white', this.modalServiceNg2.closeCurrentModal);
         const saveButton: ButtonModel = new ButtonModel(I18nTexts.modalSave, 'blue', () => this.updateNodeFilter(constraintType, index), this.getDisabled);
         const modalModel: ModalModel = new ModalModel('l', I18nTexts.updateNodeFilterTxt, '', [saveButton, cancelButton], 'standard');
         this.modalInstance = this.modalServiceNg2.createCustomModal(modalModel);
-        this.modalServiceNg2.addDynamicContentToModal(
+        const selectedFilterConstraint = new PropertyFilterConstraintUi(this.constraintProperties[index]);
+        this.modalServiceNg2.addDynamicContentToModalAndBindInputs(
             this.modalInstance,
             ServiceDependenciesEditorComponent,
             {
-                serviceRuleIndex: index,
-                serviceRules: _.map(this.constraintProperties, (rule) => new ConstraintObjectUI(rule)),
-                currentServiceName: this.currentServiceInstance.name,
-                operatorTypes: this.operatorTypes,
-                compositeServiceName: this.compositeService.name,
-                parentServiceInputs: this.parentServiceInputs,
-                parentServiceProperties: this.parentServiceProperties,
-                selectedInstanceProperties: this.selectedInstanceProperties,
-                selectedInstanceSiblings: this.selectedInstanceSiblings
+                'filterConstraint': selectedFilterConstraint,
+                'currentServiceName': this.currentServiceInstance.name,
+                'operatorTypes': this.operatorTypes,
+                'compositeServiceName': this.compositeService.name,
+                'parentServiceInputs': this.parentServiceInputs,
+                'parentServiceProperties': this.parentServiceProperties,
+                'selectedInstanceProperties': this.selectedInstanceProperties,
+                'customToscaFunctions': this.customToscaFunctions,
+                'filterType': FilterType.PROPERTY
             }
         );
+
         this.modalInstance.instance.open();
     }
 
@@ -422,12 +401,12 @@ export class ServiceDependenciesComponent {
         return !this.modalInstance.instance.dynamicContent.instance.checkFormValidForSubmit();
     }
 
-    updateNodeFilter = (constraintType: string, index: number) => {
+    updateNodeFilter = (constraintType: string, index: number): void => {
         this.isLoading = true;
         this.topologyTemplateService.updateServiceFilterConstraints(
             this.compositeService.uniqueId,
             this.currentServiceInstance.uniqueId,
-            new ConstraintObject(this.modalInstance.instance.dynamicContent.instance.currentRule),
+            new FilterConstraint(this.modalInstance.instance.dynamicContent.instance.currentRule),
             this.compositeService.componentType,
             constraintType,
             index
@@ -440,12 +419,12 @@ export class ServiceDependenciesComponent {
         this.modalServiceNg2.closeCurrentModal();
     }
 
-    updateNodeFilterCapability= (constraintType: string, index: number) => {
+    updateNodeFilterCapability = (constraintType: string, index: number): void => {
         this.isLoading = true;
         this.topologyTemplateService.updateServiceFilterCapabilitiesConstraint(
             this.compositeService.uniqueId,
             this.currentServiceInstance.uniqueId,
-            new CapabilitiesConstraintObject(this.modalInstance.instance.dynamicContent.instance.currentRule),
+            new PropertyFilterConstraintUi(this.modalInstance.instance.dynamicContent.instance.currentRule),
             this.compositeService.componentType,
             constraintType,
             index
@@ -458,15 +437,7 @@ export class ServiceDependenciesComponent {
         this.modalServiceNg2.closeCurrentModal();
     }
 
-    getSymbol(constraintOperator) {
-        switch (constraintOperator) {
-            case OPERATOR_TYPES.LESS_THAN: return '<';
-            case OPERATOR_TYPES.EQUAL: return '=';
-            case OPERATOR_TYPES.GREATER_THAN: return '>';
-        }
-    }
-
-    onDeleteNodeFilter = (constraintType: string, index: number) => {
+    onDeleteNodeFilter = (constraintType: string, index: number): void => {
         this.isLoading = true;
         this.topologyTemplateService.deleteServiceFilterConstraints(
             this.compositeService.uniqueId,
@@ -487,15 +458,37 @@ export class ServiceDependenciesComponent {
         if (this.properties === constraintType) {
             this.updateNodeFilterProperties.emit(response.properties);
             this.constraintProperties = response.properties;
+            this.buildConstraintPropertyLabels();
         } else {
             this.updateNodeFilterCapabilities.emit(response.capabilities);
             this.constraintCapabilities = response.capabilities;
+            this.buildCapabilityFilterConstraintLabels();
         }
     }
 
-    openDeleteModal = (constraintType: string, index: number) => {
+    openDeleteModal = (constraintType: string, index: number): void => {
         this.modalServiceNg2.createActionModal(I18nTexts.deleteNodeFilterTxt, I18nTexts.deleteNodeFilterMsg,
             I18nTexts.modalDelete, () => this.onDeleteNodeFilter(constraintType, index), I18nTexts.modalCancel).instance.open();
     }
 
+    private buildConstraintPropertyLabels(): void {
+        this.constraintPropertyLabels = [];
+        if (!this.constraintProperties) {
+            return;
+        }
+        this.constraintProperties.forEach(
+            constraint => this.constraintPropertyLabels.push(FilterConstraintHelper.buildFilterConstraintLabel(constraint))
+        )
+    }
+
+    private buildCapabilityFilterConstraintLabels(): void {
+        this.constraintCapabilityLabels = [];
+        if (!this.constraintCapabilities) {
+            return;
+        }
+        this.constraintCapabilities.forEach(
+            constraint => this.constraintCapabilityLabels.push(FilterConstraintHelper.buildFilterConstraintLabel(constraint))
+        )
+    }
+
 }