Support TOSCA functions in Node Capability Filters

Adds support to use TOSCA functions as value in the node capability
filters.
Removes the current capability filter component to reuse, with a few
changes, the node property filters component.
Fixes problems with the edition and deletion of node capability
filters.

Change-Id: Ic91242d6cbc24e2ce0f60b84c63e104575bef8a9
Issue-ID: SDC-4173
Signed-off-by: André Schmid <andre.schmid@est.tech>

19 files changed, 478 insertions, 699 deletions

diff --git a/catalog-ui/src/app/models/capability-filter-constraint.ts b/catalog-ui/src/app/models/capability-filter-constraint.ts
deleted file mode 100644
index 64d9913a54..0000000000
--- a/catalog-ui/src/app/models/capability-filter-constraint.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-/*
-* ============LICENSE_START=======================================================
-* SDC
-* ================================================================================
-*  Copyright (C) 2020 Nordix Foundation. All rights reserved.
-*  ================================================================================
-*  Licensed under the Apache License, Version 2.0 (the "License");
-*  you may not use this file except in compliance with the License.
-*  You may obtain a copy of the License at
-*
-*        http://www.apache.org/licenses/LICENSE-2.0
-*  Unless required by applicable law or agreed to in writing, software
-*  distributed under the License is distributed on an "AS IS" BASIS,
-*  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-*  See the License for the specific language governing permissions and
-*  limitations under the License.
-*
-*  SPDX-License-Identifier: Apache-2.0
-*  ============LICENSE_END=========================================================
-*/
-
-export class CapabilityFilterConstraint {
-    capabilityName: string;
-    servicePropertyName: string;
-    constraintOperator: string;
-    sourceType: string;
-    sourceName: string;
-    value: string;
-
-    constructor(input?: any) {
-        if (input) {
-            this.capabilityName = input.capabilityName;
-            this.servicePropertyName = input.servicePropertyName;
-            this.constraintOperator = input.constraintOperator;
-            this.sourceType = input.sourceType;
-            this.sourceName = input.sourceName;
-            this.value = input.value;
-        }
-    }
-}
-
-export class CapabilityFilterConstraintUI extends CapabilityFilterConstraint {
-    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;
-    }
-}
diff --git a/catalog-ui/src/app/models/filter-constraint.ts b/catalog-ui/src/app/models/filter-constraint.ts
index a118c97d7b..69ad90cb90 100644
--- a/catalog-ui/src/app/models/filter-constraint.ts
+++ b/catalog-ui/src/app/models/filter-constraint.ts
@@ -1,4 +1,26 @@
+/*
+ * -
+ *  ============LICENSE_START=======================================================
+ *  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.
+ *  You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ *  SPDX-License-Identifier: Apache-2.0
+ *  ============LICENSE_END=========================================================
+ */
+
 export class FilterConstraint {
+    capabilityName: string;
     servicePropertyName: string;
     constraintOperator: string;
     sourceType: string;
@@ -7,6 +29,7 @@ export class FilterConstraint {
 
     constructor(input?: any) {
         if (input) {
+            this.capabilityName = input.capabilityName;
             this.servicePropertyName = input.servicePropertyName;
             this.constraintOperator = input.constraintOperator;
             this.sourceType = input.sourceType;
diff --git a/catalog-ui/src/app/models/ui-models/constraint-object-ui.ts b/catalog-ui/src/app/models/ui-models/constraint-object-ui.ts
deleted file mode 100644
index 48cf2abdc6..0000000000
--- a/catalog-ui/src/app/models/ui-models/constraint-object-ui.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import {FilterConstraint} from "../filter-constraint";
-
-export class ConstraintObjectUI extends FilterConstraint {
-    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() {
-        const isValidValue = this.isStatic() ? this.isValidValue : true;
-        return this.servicePropertyName != null && this.servicePropertyName !== ''
-            && this.value != null && this.value !== '' && isValidValue;
-    }
-
-    private isStatic() {
-        return this.sourceName === 'static';
-    }
-}
\ No newline at end of file
diff --git a/catalog-ui/src/app/models/ui-models/property-filter-constraint-ui.ts b/catalog-ui/src/app/models/ui-models/property-filter-constraint-ui.ts
new file mode 100644
index 0000000000..f47677bf5a
--- /dev/null
+++ b/catalog-ui/src/app/models/ui-models/property-filter-constraint-ui.ts
@@ -0,0 +1,47 @@
+/*
+ * -
+ *  ============LICENSE_START=======================================================
+ *  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.
+ *  You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ *  SPDX-License-Identifier: Apache-2.0
+ *  ============LICENSE_END=========================================================
+ */
+
+import {FilterConstraint} from "../filter-constraint";
+
+export class PropertyFilterConstraintUi extends FilterConstraint {
+    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() {
+        const isValidValue = this.isStatic() ? this.isValidValue : true;
+        return this.servicePropertyName != null && this.servicePropertyName !== ''
+            && this.value != null && this.value !== '' && isValidValue;
+    }
+
+    private isStatic() {
+        return this.sourceName === 'static';
+    }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/app.module.ts b/catalog-ui/src/app/ng2/app.module.ts
index 707e328a52..7153f0a841 100644
--- a/catalog-ui/src/app/ng2/app.module.ts
+++ b/catalog-ui/src/app/ng2/app.module.ts
@@ -20,18 +20,22 @@
 
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {BrowserModule} from '@angular/platform-browser';
-import { NgModule, APP_INITIALIZER } from '@angular/core';
+import {APP_INITIALIZER, forwardRef, NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import { forwardRef } from '@angular/core';
 import {AppComponent} from './app.component';
 import {UpgradeAdapter} from '@angular/upgrade';
 import {UpgradeModule} from '@angular/upgrade/static';
-import { SdcUiComponentsModule, SdcUiComponents } from 'onap-ui-angular';
+import {SdcUiComponentsModule} from 'onap-ui-angular';
 import {PropertiesAssignmentModule} from './pages/properties-assignment/properties-assignment.module';
 import {
-    DataTypesServiceProvider, CookieServiceProvider, StateServiceFactory,
-    StateParamsServiceFactory, ScopeServiceFactory,
-    NotificationServiceProvider, ComponentFactoryProvider
+  ComponentFactoryProvider,
+  CookieServiceProvider,
+  DataTypesServiceProvider,
+  ModalsHandlerProvider,
+  NotificationServiceProvider,
+  ScopeServiceFactory,
+  StateParamsServiceFactory,
+  StateServiceFactory
 } from './utils/ng1-upgraded-provider';
 import {ConfigService} from './services/config.service';
 import {AuthenticationService} from './services/authentication.service';
@@ -45,7 +49,9 @@ import {UiElementsModule} from './components/ui/ui-elements.module';
 import {ConnectionWizardModule} from './pages/composition/graph/connection-wizard/connection-wizard.module';
 import {InterfaceOperationModule} from './pages/interface-operation/interface-operation.module';
 import {OperationCreatorModule} from './pages/interface-operation/operation-creator/operation-creator.module';
-import {OperationCreatorInterfaceDefinitionModule} from './pages/interface-definition/operation-creator/operation-creator-interface-definition.module';
+import {
+  OperationCreatorInterfaceDefinitionModule
+} from './pages/interface-definition/operation-creator/operation-creator-interface-definition.module';
 import {LayoutModule} from './components/layout/layout.module';
 import {UserService} from './services/user.service';
 import {DynamicComponentService} from './services/dynamic-component.service';
@@ -56,13 +62,12 @@ import {TranslationServiceConfig} from './config/translation.service.config';
 import {MultilineEllipsisModule} from './shared/multiline-ellipsis/multiline-ellipsis.module';
 import {ServicePathCreatorModule} from './pages/composition/graph/service-path-creator/service-path-creator.module';
 import {ServicePathsListModule} from './pages/composition/graph/service-paths-list/service-paths-list.module';
-import { ServicePathSelectorModule } from 'app/ng2/pages/composition/graph/service-path-selector/service-path-selector.module';
-import { CompositionPanelModule } from 'app/ng2/pages/composition/panel/composition-panel.module';
+import {ServicePathSelectorModule} from 'app/ng2/pages/composition/graph/service-path-selector/service-path-selector.module';
+import {CompositionPanelModule} from 'app/ng2/pages/composition/panel/composition-panel.module';
 import {CatalogModule} from './pages/catalog/catalog.module';
 import {HomeModule} from './pages/home/home.module';
 import {WindowRef} from './services/window.service';
 import {CatalogService} from './services/catalog.service';
-import { ModalsHandlerProvider } from './utils/ng1-upgraded-provider';
 import {PluginFrameModule} from './components/ui/plugin/plugin-frame.module';
 import {PluginsService} from './services/plugins.service';
 import {EventBusService} from './services/event-bus.service';
@@ -72,7 +77,7 @@ import {AutomatedUpgradeService} from './pages/automated-upgrade/automated-upgra
 import {AutomatedUpgradeModule} from './pages/automated-upgrade/automated-upgrade.module';
 import {WorkspaceModule} from './pages/workspace/workspace.module';
 import {ModalsModule} from './components/modals/modals.module';
-import { SharingService, CacheService, HomeService } from 'app/services-ng2';
+import {CacheService, HomeService, SharingService} from 'app/services-ng2';
 import {ArtifactConfigService} from "./services/artifact-config.service";
 import {IUserProperties} from 'app/models';
 import {PluginsModule} from './pages/plugins/plugins-module';
@@ -94,14 +99,13 @@ import {ServiceDependenciesModule} from './components/logic/service-dependencies
 import {ServiceDependenciesEditorModule} from './pages/service-dependencies-editor/service-dependencies-editor.module';
 import {PropertyCreatorModule} from './pages/properties-assignment/property-creator/property-creator.module';
 import {DeclareListModule} from './pages/properties-assignment/declare-list/declare-list.module';
-import { ToscaFunctionModule } from "./pages/properties-assignment/tosca-function/tosca-function.module";
+import {ToscaFunctionModule} from "./pages/properties-assignment/tosca-function/tosca-function.module";
 import {WorkflowServiceNg2} from './services/workflow.service';
 import {ToscaTypesServiceNg2} from "./services/tosca-types.service";
-import {CapabilitiesFilterPropertiesEditorComponentModule} from "./pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.module";
 import {InterfaceOperationHandlerModule} from "./pages/composition/interface-operatons/operation-creator/interface-operation-handler.module";
 import {AttributesOutputsModule} from "./pages/attributes-outputs/attributes-outputs.module";
-import { ElementService } from "./services/element.service";
-import { ModelService } from "./services/model.service";
+import {ElementService} from "./services/element.service";
+import {ModelService} from "./services/model.service";
 import {ToscaArtifactService} from "./services/tosca-artifact.service";
 import {InterfaceDefinitionModule} from "./pages/interface-definition/interface-definition.module";
 
@@ -167,7 +171,6 @@ export function configServiceFactory(config: ConfigService, authService: Authent
     ServiceConsumptionCreatorModule,
     ServiceDependenciesModule,
     ServiceDependenciesEditorModule,
-    CapabilitiesFilterPropertiesEditorComponentModule,
     WorkspaceModule,
     ModalsModule,
     CatalogModule,
diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts
index 04c7a3a03b..50ea60e4ea 100644
--- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts
@@ -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.
@@ -13,25 +14,22 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
+
 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 {ServiceDependenciesEditorComponent} from 'app/ng2/pages/service-dependencies-editor/service-dependencies-editor.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 {
-    CapabilitiesFilterPropertiesEditorComponent
-} from "../../../pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component";
-import {CapabilityFilterConstraintUI} from "../../../../models/capability-filter-constraint";
 import {ToscaFilterConstraintType} from "../../../../models/tosca-filter-constraint-type.enum";
 import {CompositionService} from "../../../pages/composition/composition.service";
 import {FilterConstraint} from "app/models/filter-constraint";
-import {ConstraintObjectUI} from "../../../../models/ui-models/constraint-object-ui";
-import {FilterConstraintHelper, OPERATOR_TYPES} from "../../../../utils/filter-constraint-helper";
+import {PropertyFilterConstraintUi} from "../../../../models/ui-models/property-filter-constraint-ui";
+import {ConstraintOperatorType, FilterConstraintHelper} from "../../../../utils/filter-constraint-helper";
 
 export enum SourceType {
     STATIC = 'static',
@@ -93,7 +91,7 @@ export class ServiceDependenciesComponent implements OnInit, OnChanges {
     parentServiceProperties: PropertyBEModel[] = [];
     constraintProperties: FilterConstraint[] = [];
     constraintPropertyLabels: string[] = [];
-    constraintCapabilities: CapabilityFilterConstraintUI[] = [];
+    constraintCapabilities: PropertyFilterConstraintUi[] = [];
     constraintCapabilityLabels: string[] = [];
     operatorTypes: any[];
     capabilities: string = ToscaFilterConstraintType.CAPABILITIES;
@@ -110,7 +108,7 @@ export class ServiceDependenciesComponent implements OnInit, OnChanges {
     @Input() componentInstanceCapabilitiesMap: Map<string, PropertyModel[]>;
     @Output() updateRulesListEvent: EventEmitter<FilterConstraint[]> = new EventEmitter<FilterConstraint[]>();
     @Output() updateNodeFilterProperties: EventEmitter<FilterConstraint[]> = new EventEmitter<FilterConstraint[]>();
-    @Output() updateNodeFilterCapabilities: EventEmitter<CapabilityFilterConstraintUI[]> = new EventEmitter<CapabilityFilterConstraintUI[]>();
+    @Output() updateNodeFilterCapabilities: EventEmitter<PropertyFilterConstraintUi[]> = new EventEmitter<PropertyFilterConstraintUi[]>();
     @Output() loadRulesListEvent:EventEmitter<any> = new EventEmitter();
     @Output() dependencyStatus = new EventEmitter<boolean>();
 
@@ -123,11 +121,11 @@ export class ServiceDependenciesComponent implements OnInit, OnChanges {
     ngOnInit(): void {
         this.isLoading = false;
         this.operatorTypes = [
-            {label: FilterConstraintHelper.convertToSymbol(OPERATOR_TYPES.GREATER_THAN), value: OPERATOR_TYPES.GREATER_THAN},
-            {label: FilterConstraintHelper.convertToSymbol(OPERATOR_TYPES.LESS_THAN), value: OPERATOR_TYPES.LESS_THAN},
-            {label: FilterConstraintHelper.convertToSymbol(OPERATOR_TYPES.EQUAL), value: OPERATOR_TYPES.EQUAL},
-            {label: FilterConstraintHelper.convertToSymbol(OPERATOR_TYPES.GREATER_OR_EQUAL), value: OPERATOR_TYPES.GREATER_OR_EQUAL},
-            {label: FilterConstraintHelper.convertToSymbol(OPERATOR_TYPES.LESS_OR_EQUAL), value: OPERATOR_TYPES.LESS_OR_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}
         ];
         this.topologyTemplateService.getComponentInputsWithProperties(this.compositeService.componentType, this.compositeService.uniqueId)
         .subscribe((result: ComponentGenericResponse) => {
@@ -250,17 +248,17 @@ export class ServiceDependenciesComponent implements OnInit, OnChanges {
             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,
+                    'filterType': FilterType.PROPERTY,
                 }
             );
             this.modalInstance.instance.open();
@@ -275,17 +273,18 @@ export class ServiceDependenciesComponent implements OnInit, OnChanges {
             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();
@@ -314,7 +313,7 @@ export class ServiceDependenciesComponent implements OnInit, OnChanges {
         this.topologyTemplateService.createServiceFilterCapabilitiesConstraints(
             this.compositeService.uniqueId,
             this.currentServiceInstance.uniqueId,
-            new CapabilityFilterConstraintUI(this.modalInstance.instance.dynamicContent.instance.currentRule),
+            new PropertyFilterConstraintUi(this.modalInstance.instance.dynamicContent.instance.currentRule),
             this.compositeService.componentType,
             constraintType
         ).subscribe( (response) => {
@@ -331,20 +330,20 @@ export class ServiceDependenciesComponent implements OnInit, OnChanges {
         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 CapabilityFilterConstraintUI(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();
@@ -355,19 +354,19 @@ export class ServiceDependenciesComponent implements OnInit, OnChanges {
         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: this.constraintProperties.map(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,
+                'filterType': FilterType.PROPERTY
             }
         );
         this.modalInstance.instance.open();
@@ -400,7 +399,7 @@ export class ServiceDependenciesComponent implements OnInit, OnChanges {
         this.topologyTemplateService.updateServiceFilterCapabilitiesConstraint(
             this.compositeService.uniqueId,
             this.currentServiceInstance.uniqueId,
-            new CapabilityFilterConstraintUI(this.modalInstance.instance.dynamicContent.instance.currentRule),
+            new PropertyFilterConstraintUi(this.modalInstance.instance.dynamicContent.instance.currentRule),
             this.compositeService.componentType,
             constraintType,
             index
diff --git a/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.ts b/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.ts
index 53563e07a2..c1743e56c3 100644
--- a/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.ts
@@ -20,15 +20,15 @@
 import {Component, ComponentRef, EventEmitter, Input, OnChanges, OnInit, Output} from '@angular/core';
 import {ButtonModel, ComponentInstance, InputBEModel, ModalModel, PropertyBEModel,} 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 {FilterType, ServiceDependenciesEditorComponent} from 'app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component';
 import {ModalService} from 'app/ng2/services/modal.service';
 import {TranslateService} from 'app/ng2/shared/translator/translate.service';
 import {ComponentMetadata} from '../../../../models/component-metadata';
 import {TopologyTemplateService} from '../../../services/component-services/topology-template.service';
 import {ToscaFilterConstraintType} from "../../../../models/tosca-filter-constraint-type.enum";
 import {FilterConstraint} from "app/models/filter-constraint";
-import {ConstraintObjectUI} from "../../../../models/ui-models/constraint-object-ui";
-import {FilterConstraintHelper, OPERATOR_TYPES} from "../../../../utils/filter-constraint-helper";
+import {PropertyFilterConstraintUi} from "../../../../models/ui-models/property-filter-constraint-ui";
+import {FilterConstraintHelper, ConstraintOperatorType} from "../../../../utils/filter-constraint-helper";
 
 class I18nTexts {
   static addSubstitutionFilterTxt: string;
@@ -86,11 +86,11 @@ export class SubstitutionFilterComponent implements OnInit, OnChanges {
   ngOnInit(): void {
     this.isLoading = false;
     this.operatorTypes = [
-      {label: FilterConstraintHelper.convertToSymbol(OPERATOR_TYPES.GREATER_THAN), value: OPERATOR_TYPES.GREATER_THAN},
-      {label: FilterConstraintHelper.convertToSymbol(OPERATOR_TYPES.LESS_THAN), value: OPERATOR_TYPES.LESS_THAN},
-      {label: FilterConstraintHelper.convertToSymbol(OPERATOR_TYPES.EQUAL), value: OPERATOR_TYPES.EQUAL},
-      {label: FilterConstraintHelper.convertToSymbol(OPERATOR_TYPES.GREATER_OR_EQUAL), value: OPERATOR_TYPES.GREATER_OR_EQUAL},
-      {label: FilterConstraintHelper.convertToSymbol(OPERATOR_TYPES.LESS_OR_EQUAL), value: OPERATOR_TYPES.LESS_OR_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}
     ];
     this.loadSubstitutionFilter();
     this.translateService.languageChangedObservable.subscribe((lang) => {
@@ -123,16 +123,17 @@ export class SubstitutionFilterComponent implements OnInit, OnChanges {
     const saveButton: ButtonModel = new ButtonModel(I18nTexts.modalCreate, 'blue', () => this.createSubstitutionFilter(constraintType), this.getDisabled);
     const modalModel: ModalModel = new ModalModel('l', I18nTexts.addSubstitutionFilterTxt, '', [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.parentServiceProperties,
+          'currentServiceName': this.currentServiceInstance.name,
+          'operatorTypes': this.operatorTypes,
+          'compositeServiceName': this.compositeService.name,
+          'parentServiceInputs': this.parentServiceInputs,
+          'parentServiceProperties': this.parentServiceProperties,
+          'selectedInstanceProperties': this.selectedInstanceProperties,
+          'filterType': FilterType.PROPERTY
         }
     );
     this.modalInstance.instance.open();
@@ -161,18 +162,19 @@ export class SubstitutionFilterComponent implements OnInit, OnChanges {
     const updateButton: ButtonModel = new ButtonModel(I18nTexts.modalSave, 'blue', () => this.updateSubstitutionFilter(constraintType, index), this.getDisabled);
     const modalModel: ModalModel = new ModalModel('l', I18nTexts.updateSubstitutionFilterTxt, '', [updateButton, 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, (constraint) => new ConstraintObjectUI(constraint)),
-          currentServiceName: this.currentServiceInstance.name,
-          operatorTypes: this.operatorTypes,
-          compositeServiceName: this.compositeService.name,
-          parentServiceInputs: this.parentServiceInputs,
-          parentServiceProperties: this.parentServiceProperties,
-          selectedInstanceProperties: this.parentServiceProperties,
+          'filterConstraint': selectedFilterConstraint,
+          'currentServiceName': this.currentServiceInstance.name,
+          'operatorTypes': this.operatorTypes,
+          'compositeServiceName': this.compositeService.name,
+          'parentServiceInputs': this.parentServiceInputs,
+          'parentServiceProperties': this.parentServiceProperties,
+          'selectedInstanceProperties': this.selectedInstanceProperties,
+          'filterType': FilterType.PROPERTY
         }
     );
     this.modalInstance.instance.open();
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html
index 9dca01eb61..7095e02f60 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html
@@ -15,5 +15,5 @@
   -->
   
 <select name='{{name}}' [(ngModel)]="value" (change)="onChange()"  [ngClass]="{'disabled':readonly}" [attr.data-tests-id]="'value-' + testId">
-  <option *ngFor="let ddvalue of values" [ngValue]="ddvalue.label != undefined ? ddvalue.value : ddvalue" [hidden]="ddvalue.hidden" [selected] = "ddvalue.selected">{{ddvalue.label||ddvalue}}</option>
+  <option *ngFor="let ddvalue of values" [ngValue]="ddvalue.label != undefined ? ddvalue.value : ddvalue" [hidden]="ddvalue.hidden" [selected] = "ddvalue.selected || ddvalue.value === value">{{ddvalue.label||ddvalue}}</option>
 </select>
diff --git a/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.html b/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.html
deleted file mode 100644
index 1dcbc16c12..0000000000
--- a/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.html
+++ /dev/null
@@ -1,81 +0,0 @@
-<!--
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2020 Nordix Foundation. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
--->
-
-<div class="app-capabilities-filter-properties-editor">
-  <form class="w-sdc-form">
-    <loader [display]="isLoading" [size]="'large'" [relative]="true"></loader>
-    <div class="i-sdc-form-content">
-      <div class="rule-builder-content">
-        <div class="i-sdc-form-item rule-input-field">
-          <label class="i-sdc-form-label required">{{currentServiceName}} Capabilities</label>
-          <ui-element-dropdown class="i-sdc-form-select" class="rule-assigned-value"
-                               [(value)]="currentRule.capabilityName"
-                               [values]="capabilitiesNames"
-                               (elementChanged)="onCapabilityNameChanged($event.value)">
-          </ui-element-dropdown>
-        </div>
-
-        <div class="i-sdc-form-item rule-input-field">
-          <label class="i-sdc-form-label required">Capability Properties</label>
-          <ui-element-dropdown class="i-sdc-form-select" class="rule-assigned-value"
-                               [(value)]="this.currentRule.servicePropertyName"
-                               [values]="capabilityProperties"
-                               (change)="onServicePropertyChanged()">
-          </ui-element-dropdown>
-        </div>
-
-        <div class="i-sdc-form-item rule-input-field operator">
-          <ui-element-dropdown class="i-sdc-form-select"
-                               [values]="operatorTypes"
-                               [(value)]="currentRule.constraintOperator">
-          </ui-element-dropdown>
-        </div>
-
-        <div class="i-sdc-form-item rule-input-field">
-          <label class="i-sdc-form-label required" >Source</label>
-          <ui-element-dropdown class="i-sdc-form-select"
-                               [values]="sourceTypes"
-                               [(value)]="currentRule.sourceName"
-                               (change)="onSelectSourceType()">
-          </ui-element-dropdown>
-        </div>
-
-        <div class="rule-input-field assigned-value-field">
-          <label class="i-sdc-form-label required" >{{assignedValueLabel}}</label>
-          <dynamic-element
-              *ngIf="currentRule.sourceType === SOURCE_TYPES.STATIC.value"
-              [(value)]="currentRule.value"
-              class="rule-assigned-value"
-              data-tests-id="ruleAssignedValue"
-              (elementChanged)="onValueChange($event.isValid)"
-              [type]="selectedCapabilitiesPropertyObject ? selectedCapabilitiesPropertyObject.type : 'string'">
-          </dynamic-element>
-          <ui-element-dropdown *ngIf="currentRule.sourceType !== SOURCE_TYPES.STATIC.value"
-                               class="rule-assigned-value"
-                               data-tests-id="ruleAssignedValue"
-                               [(value)]="currentRule.value"
-                               [values]="listOfValuesToAssign">
-          </ui-element-dropdown>
-        </div>
-      </div>
-    </div>
-  </form>
-
-</div>
diff --git a/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.less b/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.less
deleted file mode 100644
index 188fb7b5ef..0000000000
--- a/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.less
+++ /dev/null
@@ -1,44 +0,0 @@
-@import './../../../../../assets/styles/variables.less';
-
-
-.sdc-modal-top-bar {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.i-sdc-form-content {
-  display: flex;
-  flex-direction: column;
-  margin-top: 10px;
-  padding-bottom: 20px;
-
-  .i-sdc-form-item {
-    width: 250px;
-    &.operation {
-      width: 60px;
-    }
-  }
-
-  .rule-builder-content {
-    display: flex;
-    align-items: flex-end;
-    .rule-input-field {
-      flex: 1;
-      &:not(:last-of-type) {
-        margin-right: 20px;
-      }
-      &.operator{
-        width: 55px;
-        flex: 0 1 auto;
-      }
-      &.assigned-value-field {
-        margin-bottom: 10px;
-      }
-      /deep/ ui-element-dropdown select,
-      /deep/ ui-element-input input {
-        height: 30px;
-      }
-    }
-
-  }
-}
diff --git a/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.ts b/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.ts
deleted file mode 100644
index b59591bd06..0000000000
--- a/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.ts
+++ /dev/null
@@ -1,218 +0,0 @@
-/*
-* ============LICENSE_START=======================================================
-* SDC
-* ================================================================================
-*  Copyright (C) 2020 Nordix Foundation. All rights reserved.
-*  ================================================================================
-*  Licensed under the Apache License, Version 2.0 (the "License");
-*  you may not use this file except in compliance with the License.
-*  You may obtain a copy of the License at
-*
-*        http://www.apache.org/licenses/LICENSE-2.0
-*  Unless required by applicable law or agreed to in writing, software
-*  distributed under the License is distributed on an "AS IS" BASIS,
-*  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-*  See the License for the specific language governing permissions and
-*  limitations under the License.
-*
-*  SPDX-License-Identifier: Apache-2.0
-*  ============LICENSE_END=========================================================
-*/
-
-import {Component} from '@angular/core';
-import {InputBEModel, PropertyBEModel, PropertyModel} from 'app/models';
-import {DropdownValue} from 'app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component';
-import {ServiceServiceNg2} from 'app/ng2/services/component-services/service.service';
-import {PROPERTY_DATA} from 'app/utils';
-import {ServiceInstanceObject} from '../../../../models/service-instance-properties-and-interfaces';
-import {CapabilityFilterConstraintUI} from "../../../../models/capability-filter-constraint";
-import {OPERATOR_TYPES} from "../../../../utils/filter-constraint-helper";
-
-export class UIDropDownSourceTypesElement extends DropdownValue {
-  options: any[];
-  assignedLabel: string;
-  type: string;
-
-  constructor(input?: any) {
-    super(input ? input.value || '' : "", input ? input.label || '' : "");
-    if (input) {
-      this.options = input.options;
-      this.assignedLabel = input.assignedLabel;
-      this.type = input.type;
-    }
-  }
-}
-
-@Component({
-  selector: 'app-capabilities-filter-properties-editor',
-  templateUrl: './capabilities-filter-properties-editor.component.html',
-  styleUrls: ['./capabilities-filter-properties-editor.component.less'],
-  providers: [ServiceServiceNg2]
-})
-export class CapabilitiesFilterPropertiesEditorComponent {
-
-  input: {
-    serviceRuleIndex: number,
-    serviceRules: CapabilityFilterConstraintUI[],
-    compositeServiceName: string,
-    currentServiceName: string,
-    parentServiceInputs: InputBEModel[],
-    selectedInstanceProperties: PropertyBEModel[],
-    operatorTypes: DropdownValue[],
-    selectedInstanceSiblings: ServiceInstanceObject[],
-    componentInstanceCapabilitiesMap: Map<string, PropertyModel[]>,
-  };
-  currentServiceName: string;
-  selectedServiceProperties: PropertyBEModel[];
-  operatorTypes: DropdownValue[];
-  sourceTypes: UIDropDownSourceTypesElement[] = [];
-  currentRule: CapabilityFilterConstraintUI;
-  currentIndex: number;
-  listOfValuesToAssign: DropdownValue[];
-  listOfSourceOptions: PropertyBEModel[];
-  assignedValueLabel: string;
-  serviceRulesList: CapabilityFilterConstraintUI[];
-
-  capabilitiesNames: string[];
-  selectedPropertiesByCapabilityName: Array<PropertyModel>;
-  selectedCapabilityName: string;
-  capabilityProperties: DropdownValue[];
-
-  selectedCapabilitiesPropertyObject: PropertyBEModel;
-
-  SOURCE_TYPES = {
-    STATIC: {label: 'Static', value: 'static'},
-    SERVICE_PROPERTY: {label: 'Service Property', value: 'property'},
-    CAPABILITY_NAME: {label: 'Name', value: 'name'}
-  };
-
-  ngOnInit() {
-    this.capabilitiesNames = Array.from(this.input.componentInstanceCapabilitiesMap.keys());
-    this.currentIndex = this.input.serviceRuleIndex;
-    this.serviceRulesList = this.input.serviceRules;
-    this.currentRule = this.serviceRulesList && this.input.serviceRuleIndex >= 0 ?
-        this.serviceRulesList[this.input.serviceRuleIndex] :
-        new CapabilityFilterConstraintUI({
-          capabilityName: this.SOURCE_TYPES.CAPABILITY_NAME.value,
-          sourceName: this.SOURCE_TYPES.STATIC.value,
-          sourceType: this.SOURCE_TYPES.STATIC.value, value: '',
-          constraintOperator: OPERATOR_TYPES.EQUAL
-        });
-    this.currentServiceName = this.input.currentServiceName;
-    this.operatorTypes = this.input.operatorTypes;
-
-    this.initSourceTypes();
-    this.syncRuleData();
-    this.updateSourceTypesRelatedValues();
-    this.onCapabilityNameChanged(this.currentRule.capabilityName)
-  }
-
-  initSourceTypes() {
-    this.sourceTypes.push({
-      label: this.SOURCE_TYPES.STATIC.label,
-      value: this.SOURCE_TYPES.STATIC.value,
-      options: [],
-      assignedLabel: this.SOURCE_TYPES.STATIC.label,
-      type: this.SOURCE_TYPES.STATIC.value
-    });
-    this.sourceTypes.push({
-      label: this.input.compositeServiceName,
-      value: this.input.compositeServiceName,
-      assignedLabel: this.SOURCE_TYPES.SERVICE_PROPERTY.label,
-      type: this.SOURCE_TYPES.SERVICE_PROPERTY.value,
-      options: this.input.parentServiceInputs
-    });
-    _.forEach(this.input.selectedInstanceSiblings, (sib) =>
-        this.sourceTypes.push({
-          label: sib.name,
-          value: sib.name,
-          options: sib.properties || [],
-          assignedLabel: this.SOURCE_TYPES.SERVICE_PROPERTY.label,
-          type: this.SOURCE_TYPES.SERVICE_PROPERTY.value
-        })
-    );
-  }
-
-  syncRuleData() {
-    if (!this.currentRule.sourceName && this.currentRule.sourceType === this.SOURCE_TYPES.STATIC.value) {
-      this.currentRule.sourceName = this.SOURCE_TYPES.STATIC.value;
-    }
-    if (this.input.componentInstanceCapabilitiesMap) {
-      this.selectedCapabilitiesPropertyObject = Array.from(this.input.componentInstanceCapabilitiesMap
-      .get(this.currentRule.capabilityName))
-      .find(property => property.name == this.currentRule.servicePropertyName);
-    }
-    this.updateOperatorTypesList();
-    this.updateSourceTypesRelatedValues();
-  }
-
-  updateOperatorTypesList() {
-    if (this.selectedCapabilitiesPropertyObject && PROPERTY_DATA.SIMPLE_TYPES_COMPARABLE.indexOf(this.selectedCapabilitiesPropertyObject.type) === -1) {
-      this.operatorTypes = [{label: '=', value: OPERATOR_TYPES.EQUAL}];
-      this.currentRule.constraintOperator = OPERATOR_TYPES.EQUAL;
-    } else {
-      this.operatorTypes = this.input.operatorTypes;
-    }
-  }
-
-  updateSourceTypesRelatedValues() {
-    if (this.currentRule.sourceName) {
-      const selectedSourceType: UIDropDownSourceTypesElement = this.sourceTypes.find(
-          (t) => t.value === this.currentRule.sourceName && t.type === this.currentRule.sourceType
-      );
-      if (selectedSourceType) {
-        this.listOfSourceOptions = selectedSourceType.options || [];
-        this.assignedValueLabel = selectedSourceType.assignedLabel || this.SOURCE_TYPES.STATIC.label;
-        this.filterOptionsByType();
-      }
-    }
-  }
-
-  onCapabilityNameChanged = (value: any): void => {
-    this.selectedPropertiesByCapabilityName = this.input.componentInstanceCapabilitiesMap.get(value);
-    this.capabilityProperties = _.map(this.selectedPropertiesByCapabilityName, (prop) => new DropdownValue(prop.name, prop.name));
-    this.selectedCapabilityName = value;
-    this.updateOperatorTypesList();
-    this.filterOptionsByType();
-  }
-
-  onServicePropertyChanged() { 
-    this.syncRuleData();
-    this.filterOptionsByType();
-    this.currentRule.value = '';
-  }
-
-  onSelectSourceType() {
-    this.currentRule.sourceType = this.currentRule.sourceName === this.SOURCE_TYPES.STATIC.value ?
-        this.SOURCE_TYPES.STATIC.value :
-        this.SOURCE_TYPES.SERVICE_PROPERTY.value;
-    this.updateSourceTypesRelatedValues();
-    this.currentRule.value = '';
-  }
-
-  filterOptionsByType() {
-    if (!this.selectedCapabilitiesPropertyObject) {
-      this.listOfValuesToAssign = [];
-      return;
-    }
-    this.listOfValuesToAssign = this.listOfSourceOptions.reduce((result, op: PropertyModel) => {
-      if (op.type === this.selectedCapabilitiesPropertyObject.type && (!op.schemaType || op.schemaType === this.selectedCapabilitiesPropertyObject.schemaType)) {
-        result.push(new DropdownValue(op.name, op.name));
-      }
-      return result;
-    }, []);
-  }
-
-  onValueChange(isValidValue) {
-    this.currentRule.updateValidity(isValidValue);
-  }
-
-  checkFormValidForSubmit() {
-    if (!this.serviceRulesList) {
-      const isStatic = this.currentRule.sourceName === this.SOURCE_TYPES.STATIC.value;
-      return this.currentRule.isValidRule(isStatic);
-    }
-    return this.serviceRulesList.every((rule) => rule.isValidRule(rule.sourceName === this.SOURCE_TYPES.STATIC.value));
-  }
-
-}
diff --git a/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.module.ts b/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.module.ts
deleted file mode 100644
index 27bcb8a4e0..0000000000
--- a/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.module.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
-* ============LICENSE_START=======================================================
-* SDC
-* ================================================================================
-*  Copyright (C) 2020 Nordix Foundation. All rights reserved.
-*  ================================================================================
-*  Licensed under the Apache License, Version 2.0 (the "License");
-*  you may not use this file except in compliance with the License.
-*  You may obtain a copy of the License at
-*
-*        http://www.apache.org/licenses/LICENSE-2.0
-*  Unless required by applicable law or agreed to in writing, software
-*  distributed under the License is distributed on an "AS IS" BASIS,
-*  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-*  See the License for the specific language governing permissions and
-*  limitations under the License.
-*
-*  SPDX-License-Identifier: Apache-2.0
-*  ============LICENSE_END=========================================================
-*/
-
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms';
-import {FormElementsModule} from 'app/ng2/components/ui/form-components/form-elements.module';
-import {UiElementsModule} from 'app/ng2/components/ui/ui-elements.module';
-import {CapabilitiesFilterPropertiesEditorComponent} from "./capabilities-filter-properties-editor.component";
-
-@NgModule({
-  declarations: [
-    CapabilitiesFilterPropertiesEditorComponent
-  ],
-  imports: [
-    CommonModule,
-    FormsModule,
-    FormElementsModule,
-    UiElementsModule
-  ],
-  exports: [],
-  entryComponents: [
-    CapabilitiesFilterPropertiesEditorComponent
-  ],
-  providers: []
-})
-export class CapabilitiesFilterPropertiesEditorComponentModule {
-}
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-dependencies-tab/service-dependencies-tab.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-dependencies-tab/service-dependencies-tab.component.ts
index ce1a43dd3b..7ca4604004 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-dependencies-tab/service-dependencies-tab.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-dependencies-tab/service-dependencies-tab.component.ts
@@ -1,4 +1,25 @@
-import {Component, Input} from '@angular/core';
+/*
+ * -
+ *  ============LICENSE_START=======================================================
+ *  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.
+ *  You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ *  SPDX-License-Identifier: Apache-2.0
+ *  ============LICENSE_END=========================================================
+ */
+
+import {Component, Input, OnInit} from '@angular/core';
 import {Store} from '@ngxs/store';
 import {
     CapabilitiesGroup, Capability,
@@ -16,7 +37,6 @@ import {ComponentGenericResponse} from '../../../../../services/responses/compon
 import {WorkspaceService} from '../../../../workspace/workspace.service';
 import {SelectedComponentType} from '../../../common/store/graph.actions';
 import {CompositionService} from '../../../composition.service';
-import {CapabilityFilterConstraint} from "../../../../../../models/capability-filter-constraint";
 import {FilterConstraint} from "../../../../../../models/filter-constraint";
 
 @Component({
@@ -24,7 +44,7 @@ import {FilterConstraint} from "../../../../../../models/filter-constraint";
     templateUrl: 'service-dependencies-tab.component.html',
     styleUrls: ['service-dependencies-tab.component.less']
 })
-export class ServiceDependenciesTabComponent {
+export class ServiceDependenciesTabComponent implements OnInit {
     isComponentInstanceSelected: boolean;
 
     selectedInstanceSiblings: ServiceInstanceObject[];
@@ -35,7 +55,6 @@ export class ServiceDependenciesTabComponent {
     componentInstanceCapabilityProperties: CapabilitiesGroup;
     metaData: ComponentMetadata;
     componentInstanceCapabilitiesMap : Map<string, PropertyModel[]> = new Map();
-    componentInstanceCapabilitiesNames: string[];
 
     @Input() isViewOnly: boolean;
     @Input() componentType: SelectedComponentType;
@@ -49,7 +68,7 @@ export class ServiceDependenciesTabComponent {
                 private eventListenerService: EventListenerService) {
     }
 
-    ngOnInit() {
+    ngOnInit(): void {
         this.metaData = this.workspaceService.metadata;
         this.isComponentInstanceSelected = this.componentType === SelectedComponentType.COMPONENT_INSTANCE;
         this.initInstancesWithProperties();
@@ -73,7 +92,7 @@ export class ServiceDependenciesTabComponent {
         this.selectedInstanceConstraints = this.componentInstancesConstraints[this.component.uniqueId].properties;
     }
 
-    public updateSelectedInstanceCapabilitiesConstraints = (constraintsList:Array<CapabilityFilterConstraint>):void => {
+    public updateSelectedInstanceCapabilitiesConstraints = (constraintsList:Array<FilterConstraint>):void => {
         this.componentInstancesConstraints[this.component.uniqueId].capabilities = constraintsList;
         this.selectedInstanceConstraints = this.componentInstancesConstraints[this.component.uniqueId].capabilities;
     }
@@ -97,7 +116,7 @@ export class ServiceDependenciesTabComponent {
         }
     }
 
-    private initInstancesWithCapabilityProperties = (): void => {
+    private initInstancesWithCapabilityProperties(): void {
         this.componentInstanceCapabilityProperties = this.component.capabilities;
         this.updateComponentInstanceCapabilities();
     }
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 4e6993a1e4..922cda6982 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
@@ -1,3 +1,25 @@
+<!--
+  ~ -
+  ~  ============LICENSE_START=======================================================
+  ~  Copyright (C) 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.
+  ~  You may obtain a copy of the License at
+  ~
+  ~       http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~  Unless required by applicable law or agreed to in writing, software
+  ~  distributed under the License is distributed on an "AS IS" BASIS,
+  ~  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~  See the License for the specific language governing permissions and
+  ~  limitations under the License.
+  ~
+  ~  SPDX-License-Identifier: Apache-2.0
+  ~  ============LICENSE_END=========================================================
+  -->
+
 <div class="service-dependencies-editor">
     <form class="w-sdc-form">
 
@@ -5,20 +27,31 @@
 
         <div class="i-sdc-form-content">
             <div class="rule-builder-content">
+                <div class="i-sdc-form-item rule-input-field property" *ngIf="filterType == FILTER_TYPE_CAPABILITY">
+                    <label class="i-sdc-form-label required">{{"CAPABILITY_LABEL" | translate}}</label>
+                    <ui-element-dropdown
+                        class="i-sdc-form-select"
+                        data-tests-id="servicePropertyName"
+                        [values]="capabilityDropdownList"
+                        [(value)]="currentRule.capabilityName"
+                        (change)="onCapabilityChange()">
+                    </ui-element-dropdown>
+                </div>
                 <div class="i-sdc-form-item rule-input-field property">
                     <label class="i-sdc-form-label required">{{"PROPERTY_LABEL" | translate}}</label>
                     <ui-element-dropdown
                             class="i-sdc-form-select"
                             data-tests-id="servicePropertyName"
-                            [values]="ddValueSelectedServicePropertiesNames"
+                            [values]="servicePropertyDropdownList"
                             [(value)]="currentRule.servicePropertyName"
-                            (change)="onServicePropertyChanged()">
+                            (change)="onPropertyChange()">
                     </ui-element-dropdown>
                 </div>
-
                 <div class="i-sdc-form-item rule-input-field operator">
                     <label class="i-sdc-form-label required">{{"OPERATOR_LABEL" | translate}}</label>
-                    <ui-element-dropdown class="i-sdc-form-select" data-tests-id="constraintOperator" [values]="operatorTypes" [(value)]="currentRule.constraintOperator"></ui-element-dropdown>
+                    <ui-element-dropdown class="i-sdc-form-select" data-tests-id="constraintOperator"
+                                         [testId]="'constraintOperator'"
+                                         [values]="operatorTypes" [(value)]="currentRule.constraintOperator"></ui-element-dropdown>
                 </div>
             </div>
             <div class="rule-builder-content">
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 ba7a4946ca..f8a2160374 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
@@ -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.
@@ -13,22 +14,20 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {Component, OnInit} from '@angular/core';
-import {InputBEModel, PropertyBEModel, PropertyFEModel} from 'app/models';
+import {Component, Input, OnInit} from '@angular/core';
+import {InputBEModel, PropertyBEModel, PropertyFEModel, PropertyModel} from 'app/models';
 import {SourceType} from 'app/ng2/components/logic/service-dependencies/service-dependencies.component';
 import {DropdownValue} from 'app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component';
 import {ServiceServiceNg2} from 'app/ng2/services/component-services/service.service';
 import {PROPERTY_DATA} from 'app/utils';
-import {ServiceInstanceObject} from '../../../models/service-instance-properties-and-interfaces';
 import {PropertiesUtils} from '../properties-assignment/services/properties.utils';
 import {ToscaFunctionValidationEvent} from "../properties-assignment/tosca-function/tosca-function.component";
 import {InstanceFeDetails} from "../../../models/instance-fe-details";
 import {CompositionService} from "../composition/composition.service";
 import {ToscaGetFunction} from "../../../models/tosca-get-function";
-import {ToscaFunction} from "../../../models/tosca-function";
-import {ToscaFunctionType} from "../../../models/tosca-function-type.enum";
-import {ConstraintObjectUI} from "../../../models/ui-models/constraint-object-ui";
-import {OPERATOR_TYPES} from "../../../utils/filter-constraint-helper";
+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";
 
 @Component({
   selector: 'service-dependencies-editor',
@@ -38,30 +37,42 @@ import {OPERATOR_TYPES} from "../../../utils/filter-constraint-helper";
 })
 export class ServiceDependenciesEditorComponent implements OnInit {
 
-  input: {
-    serviceRuleIndex: number,
-    serviceRules: ConstraintObjectUI[],
-    compositeServiceName: string,
-    currentServiceName: string,
-    parentServiceInputs: InputBEModel[],
-    parentServiceProperties: PropertyBEModel[];
-    selectedInstanceProperties: PropertyBEModel[],
-    operatorTypes: DropdownValue[],
-    selectedInstanceSiblings: ServiceInstanceObject[]
-  };
+  @Input() serviceRuleIndex: number;
+  @Input() serviceRules: PropertyFilterConstraintUi[];
+  @Input() compositeServiceName: string;
+  @Input() currentServiceName: string;
+  @Input() parentServiceInputs: InputBEModel[];
+  @Input() parentServiceProperties: PropertyBEModel[];
+  @Input() selectedInstanceProperties: PropertyBEModel[];
+  @Input() allowedOperators: ConstraintOperatorType[] = [
+      ConstraintOperatorType.GREATER_THAN,
+      ConstraintOperatorType.LESS_THAN,
+      ConstraintOperatorType.EQUAL,
+      ConstraintOperatorType.GREATER_OR_EQUAL,
+      ConstraintOperatorType.LESS_OR_EQUAL
+  ];
+  @Input() capabilityNameAndPropertiesMap: Map<string, PropertyModel[]>;
+  @Input() filterType: FilterType;
+  @Input() filterConstraint: PropertyFilterConstraintUi;
   //output
-  currentRule: ConstraintObjectUI;
-
-  currentServiceName: string;
-  selectedServiceProperties: PropertyBEModel[] = [];
-  ddValueSelectedServicePropertiesNames: DropdownValue[];
-  operatorTypes: DropdownValue[];
-  currentIndex: number;
-  serviceRulesList: ConstraintObjectUI[];
+  currentRule: PropertyFilterConstraintUi;
+
+  FILTER_TYPE_CAPABILITY: FilterType = FilterType.CAPABILITY
+
+  operatorTypes: DropdownValue[] = [
+    {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}
+  ];
+
+  servicePropertyDropdownList: DropdownValue[];
   isLoading: false;
   selectedProperty: PropertyFEModel;
   selectedSourceType: string;
   componentInstanceMap: Map<string, InstanceFeDetails> = new Map<string, InstanceFeDetails>();
+  capabilityDropdownList: DropdownValue[] = [];
 
   SOURCE_TYPES = {
     STATIC: {label: 'Static', value: SourceType.STATIC},
@@ -71,13 +82,6 @@ export class ServiceDependenciesEditorComponent implements OnInit {
   constructor(private propertiesUtils: PropertiesUtils, private compositionService: CompositionService) {}
 
   ngOnInit(): void {
-    this.currentIndex = this.input.serviceRuleIndex;
-    this.serviceRulesList = this.input.serviceRules;
-    if (this.input.selectedInstanceProperties) {
-      this.selectedServiceProperties = this.input.selectedInstanceProperties;
-    }
-    this.currentServiceName = this.input.currentServiceName;
-    this.operatorTypes = this.input.operatorTypes;
     if (this.compositionService.componentInstances) {
       this.compositionService.componentInstances.forEach(value => {
         this.componentInstanceMap.set(value.uniqueId, <InstanceFeDetails>{
@@ -85,15 +89,59 @@ export class ServiceDependenciesEditorComponent implements OnInit {
         });
       });
     }
+    this.initCapabilityDropdown();
     this.initCurrentRule();
+    this.initConstraintOperatorOptions();
     this.initSelectedSourceType();
-    this.selectedProperty = new PropertyFEModel(this.selectedServiceProperties.find(property => property.name === this.currentRule.servicePropertyName));
-    this.selectedProperty.toscaFunction = undefined;
-    this.selectedProperty.value = undefined;
-    this.ddValueSelectedServicePropertiesNames = _.map(this.input.selectedInstanceProperties, (prop) => new DropdownValue(prop.name, prop.name));
+    this.initPropertyDropdown();
     this.syncRuleData();
-    if (this.isValueToscaFunction(this.currentRule.value)) {
-      this.selectedProperty.toscaFunction = this.currentRule.value;
+  }
+
+
+  private initCapabilityDropdown(): void {
+    if (this.filterType == FilterType.CAPABILITY) {
+      this.capabilityDropdownList = [
+        new DropdownValue(undefined, 'Select'),
+        ...Array.from(this.capabilityNameAndPropertiesMap.keys()).map(capabilityName => new DropdownValue(capabilityName, capabilityName))
+      ];
+    }
+  }
+
+  private initPropertyDropdown(): void {
+    let propertyList: PropertyBEModel[] = [];
+    if (this.filterType == FilterType.CAPABILITY) {
+      if (this.currentRule.capabilityName) {
+        propertyList = this.capabilityNameAndPropertiesMap.get(this.currentRule.capabilityName);
+      }
+    } else {
+      propertyList = this.selectedInstanceProperties;
+    }
+    let selectLabel;
+    if (this.filterType == FilterType.CAPABILITY) {
+      selectLabel = this.currentRule.capabilityName ? 'Select' : 'Select a Capability';
+    } else {
+      selectLabel = 'Select';
+    }
+    this.servicePropertyDropdownList = [new DropdownValue(undefined, selectLabel), ...propertyList.map(prop => new DropdownValue(prop.name, prop.name))];
+  }
+
+  private initConstraintOperatorOptions(): void {
+    if (!this.selectedProperty) {
+      this.operatorTypes = [new DropdownValue(undefined, 'Select a Property')];
+      return;
+    }
+
+    if (PROPERTY_DATA.SIMPLE_TYPES_COMPARABLE.indexOf(this.selectedProperty.type) === -1) {
+      if (this.currentRule.constraintOperator !== ConstraintOperatorType.EQUAL) {
+        this.currentRule.constraintOperator = ConstraintOperatorType.EQUAL;
+      }
+      this.operatorTypes = [new DropdownValue(ConstraintOperatorType.EQUAL, FilterConstraintHelper.convertToSymbol(ConstraintOperatorType.EQUAL))];
+    } else {
+      const operatorList: DropdownValue[] = [];
+      this.allowedOperators.forEach(constraintOperatorType =>
+        operatorList.push(new DropdownValue(constraintOperatorType, FilterConstraintHelper.convertToSymbol(constraintOperatorType)))
+      );
+      this.operatorTypes = operatorList;
     }
   }
 
@@ -106,24 +154,29 @@ export class ServiceDependenciesEditorComponent implements OnInit {
   }
 
   private initCurrentRule(): void {
-    if (this.serviceRulesList && this.input.serviceRuleIndex >= 0) {
-      this.currentRule = new ConstraintObjectUI(this.serviceRulesList[this.input.serviceRuleIndex]);
+    if (this.filterConstraint) {
+      this.currentRule = new PropertyFilterConstraintUi(this.filterConstraint);
     } else {
-      this.currentRule = new ConstraintObjectUI({
+      this.currentRule = new PropertyFilterConstraintUi({
         sourceName: SourceType.STATIC,
         sourceType: SourceType.STATIC,
-        value: '',
-        constraintOperator: OPERATOR_TYPES.EQUAL
+        constraintOperator: ConstraintOperatorType.EQUAL,
+        value: undefined
       });
     }
   }
 
-  onServicePropertyChanged(): void {
+  onCapabilityChange(): void {
+    this.initPropertyDropdown();
+    this.resetSelectedProperty();
+  }
+
+  onPropertyChange(): void {
     this.currentRule.sourceName = undefined;
     this.currentRule.value = undefined;
-    this.selectedProperty = undefined;
+    this.onValueChange(false);
     this.updateSelectedProperty();
-    this.updateOperatorTypesList();
+    this.initConstraintOperatorOptions();
   }
 
   syncRuleData(): void {
@@ -132,16 +185,7 @@ export class ServiceDependenciesEditorComponent implements OnInit {
       this.currentRule.sourceType = SourceType.STATIC;
     }
     this.initSelectedProperty();
-    this.updateOperatorTypesList();
-  }
-
-  updateOperatorTypesList(): void {
-    if (this.selectedProperty && PROPERTY_DATA.SIMPLE_TYPES_COMPARABLE.indexOf(this.selectedProperty.type) === -1) {
-      this.operatorTypes = [{label: '=', value: OPERATOR_TYPES.EQUAL}];
-      this.currentRule.constraintOperator = OPERATOR_TYPES.EQUAL;
-    } else {
-      this.operatorTypes = this.input.operatorTypes;
-    }
+    this.initConstraintOperatorOptions();
   }
 
   onValueChange(isValidValue:any): void {
@@ -157,19 +201,27 @@ export class ServiceDependenciesEditorComponent implements OnInit {
       this.selectedProperty = undefined;
       return;
     }
-
-    const newProperty = new PropertyFEModel(this.selectedServiceProperties.find(property => property.name === this.currentRule.servicePropertyName));
+    let newProperty;
+    if (this.filterType === FilterType.CAPABILITY) {
+      const currentProperty = this.capabilityNameAndPropertiesMap.get(this.currentRule.capabilityName)
+        .find(property => property.name === this.currentRule.servicePropertyName);
+      newProperty = new PropertyFEModel(currentProperty);
+    } else {
+      newProperty = new PropertyFEModel(this.selectedInstanceProperties.find(property => property.name === this.currentRule.servicePropertyName));
+    }
     newProperty.value = undefined;
     newProperty.toscaFunction = undefined;
     if (typeof this.currentRule.value === 'string') {
       newProperty.value = this.currentRule.value;
-    } else if (this.isValueToscaFunction(newProperty.value)) {
-      newProperty.toscaFunction = this.currentRule.value;
-      newProperty.value = (<ToscaFunction>this.currentRule.value).buildValueString();
+      this.propertiesUtils.initValueObjectRef(newProperty);
+    } else if (ToscaFunctionHelper.isValueToscaFunction(this.currentRule.value)) {
+      newProperty.toscaFunction = ToscaFunctionHelper.convertObjectToToscaFunction(this.currentRule.value);
+      newProperty.value = newProperty.toscaFunction.buildValueString();
     } else {
       newProperty.value = JSON.stringify(this.currentRule.value);
+      this.propertiesUtils.initValueObjectRef(newProperty);
     }
-    this.propertiesUtils.initValueObjectRef(newProperty);
+
     this.selectedProperty = newProperty;
   }
 
@@ -179,21 +231,21 @@ export class ServiceDependenciesEditorComponent implements OnInit {
       return;
     }
 
-    const newProperty = new PropertyFEModel(this.selectedServiceProperties.find(property => property.name === this.currentRule.servicePropertyName));
+    let newProperty;
+    if (this.filterType === FilterType.CAPABILITY) {
+      const currentProperty = this.capabilityNameAndPropertiesMap.get(this.currentRule.capabilityName)
+        .find(property => property.name === this.currentRule.servicePropertyName);
+      newProperty = new PropertyFEModel(currentProperty);
+    } else {
+      newProperty = new PropertyFEModel(this.selectedInstanceProperties.find(property => property.name === this.currentRule.servicePropertyName));
+    }
     newProperty.value = undefined;
     newProperty.toscaFunction = undefined;
-    if (this.isValueToscaFunction(newProperty.value)) {
-      newProperty.toscaFunction = this.currentRule.value;
-    }
 
     this.propertiesUtils.initValueObjectRef(newProperty);
     this.selectedProperty = newProperty;
   }
 
-  isValueToscaFunction(value: any): boolean {
-    return value instanceof Object && 'type' in value && (<any>Object).values(ToscaFunctionType).includes(value.type);
-  }
-
   isStaticSource(): boolean {
     return this.selectedSourceType === SourceType.STATIC
   }
@@ -235,4 +287,15 @@ export class ServiceDependenciesEditorComponent implements OnInit {
     this.updateSelectedProperty();
   }
 
+  private resetSelectedProperty(): void {
+    this.currentRule.servicePropertyName = undefined;
+    this.selectedProperty = undefined;
+    this.onPropertyChange();
+  }
+
 }
+
+export enum FilterType {
+  CAPABILITY,
+  PROPERTY
+}
\ No newline at end of file
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 5f6f074f5e..b6eb857471 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
@@ -6,6 +6,7 @@
  * SDC
  * ================================================================================
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * 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.
@@ -57,7 +58,6 @@ import {ConsumptionInput} from "../../components/logic/service-consumption/servi
 import {PolicyInstance} from "../../../models/graph/zones/policy-instance";
 import {PropertyBEModel} from "../../../models/properties-inputs/property-be-model";
 import {map} from "rxjs/operators";
-import {CapabilityFilterConstraint} from "../../../models/capability-filter-constraint";
 import {BEInterfaceOperationModel, InterfaceOperationModel} from "../../../models/interfaceOperation";
 import {AttributeBEModel} from "../../../models/attributes-outputs/attribute-be-model";
 import {InstanceAttributesAPIMap} from "../../../models/attributes-outputs/attribute-fe-map";
@@ -481,7 +481,7 @@ export class TopologyTemplateService {
         return this.http.post<any>(this.baseUrl + this.getServerTypeUrl(componentType) + componentMetaDataId + '/componentInstance/' + componentInstanceId + '/' + constraintType + '/nodeFilter', constraint);
     }
 
-    createServiceFilterCapabilitiesConstraints(componentMetaDataId: string, componentInstanceId: string, constraint: CapabilityFilterConstraint, componentType: string, constraintType: string): Observable<any> {
+    createServiceFilterCapabilitiesConstraints(componentMetaDataId: string, componentInstanceId: string, constraint: FilterConstraint, componentType: string, constraintType: string): Observable<any> {
         return this.http.post<any>(this.baseUrl + this.getServerTypeUrl(componentType) + componentMetaDataId + '/componentInstance/' + componentInstanceId + '/' + constraintType + '/nodeFilter', constraint);
     }
 
@@ -489,7 +489,7 @@ export class TopologyTemplateService {
         return this.http.put<any>(this.baseUrl + this.getServerTypeUrl(componentType) + componentMetaDataId + '/componentInstance/' + componentInstanceId + '/' + constraintType + '/' + constraintIndex + '/nodeFilter', constraint)
     }
 
-    updateServiceFilterCapabilitiesConstraint(componentMetaDataId: string, componentInstanceId: string, constraints: CapabilityFilterConstraint, componentType: string, constraintType: string, constraintIndex: number):Observable<any>{
+    updateServiceFilterCapabilitiesConstraint(componentMetaDataId: string, componentInstanceId: string, constraints: FilterConstraint, componentType: string, constraintType: string, constraintIndex: number):Observable<any>{
         return this.http.put<any>(this.baseUrl + this.getServerTypeUrl(componentType) + componentMetaDataId + '/componentInstance/' + componentInstanceId + '/' + constraintType + '/' + constraintIndex + '/nodeFilter', constraints)
     }
 
diff --git a/catalog-ui/src/app/utils/filter-constraint-helper.ts b/catalog-ui/src/app/utils/filter-constraint-helper.ts
index bdb3f9ec7a..f1207084a7 100644
--- a/catalog-ui/src/app/utils/filter-constraint-helper.ts
+++ b/catalog-ui/src/app/utils/filter-constraint-helper.ts
@@ -1,37 +1,42 @@
+/*
+ * -
+ *  ============LICENSE_START=======================================================
+ *  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.
+ *  You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ *  SPDX-License-Identifier: Apache-2.0
+ *  ============LICENSE_END=========================================================
+ */
+
 import {FilterConstraint} from "../models/filter-constraint";
-import {ToscaFunctionType} from "../models/tosca-function-type.enum";
-import {ToscaConcatFunction} from "../models/tosca-concat-function";
-import {ToscaGetFunction} from "../models/tosca-get-function";
-import {YamlFunction} from "../models/yaml-function";
-import {CapabilityFilterConstraint} from "../models/capability-filter-constraint";
+import {ToscaFunctionHelper} from "./tosca-function-helper";
 
 export class FilterConstraintHelper {
 
-    public static buildFilterConstraintLabel(constraint: FilterConstraint | CapabilityFilterConstraint): string {
+    public static buildFilterConstraintLabel(constraint: FilterConstraint): string {
         let value;
-        if (this.isValueToscaFunction(constraint.value)) {
-            switch (constraint.value.type) {
-                case ToscaFunctionType.CONCAT:
-                    value = new ToscaConcatFunction(constraint.value).buildValueString();
-                    break;
-                case ToscaFunctionType.GET_PROPERTY:
-                case ToscaFunctionType.GET_INPUT:
-                case ToscaFunctionType.GET_ATTRIBUTE:
-                    value = new ToscaGetFunction(constraint.value).buildValueString();
-                    break;
-                case ToscaFunctionType.YAML:
-                    value = new YamlFunction(constraint.value).buildValueString();
-                    break;
-                case ToscaFunctionType.STRING:
-                    value = constraint.value.value;
-                    break;
-                default:
-                    value = JSON.stringify(constraint.value, null, 4);
+        if (ToscaFunctionHelper.isValueToscaFunction(constraint.value)) {
+            const toscaFunction = ToscaFunctionHelper.convertObjectToToscaFunction(constraint.value);
+            if (toscaFunction) {
+                value = toscaFunction.buildValueString();
+            } else {
+                value = JSON.stringify(constraint.value, null, 4);
             }
         } else {
             value = JSON.stringify(constraint.value, null, 4);
         }
-        if (constraint instanceof CapabilityFilterConstraint) {
+        if (constraint.capabilityName) {
             return `${constraint.capabilityName}: ${constraint.servicePropertyName} ${this.convertToSymbol(constraint.constraintOperator)} ${value}`;
         }
 
@@ -40,25 +45,21 @@ export class FilterConstraintHelper {
 
     public static convertToSymbol(constraintOperator: string) {
         switch (constraintOperator) {
-            case OPERATOR_TYPES.LESS_THAN: return '<';
-            case OPERATOR_TYPES.EQUAL: return '=';
-            case OPERATOR_TYPES.GREATER_THAN: return '>';
-            case OPERATOR_TYPES.GREATER_OR_EQUAL: return '>=';
-            case OPERATOR_TYPES.LESS_OR_EQUAL: return '<=';
+            case ConstraintOperatorType.LESS_THAN: return '<';
+            case ConstraintOperatorType.EQUAL: return '=';
+            case ConstraintOperatorType.GREATER_THAN: return '>';
+            case ConstraintOperatorType.GREATER_OR_EQUAL: return '>=';
+            case ConstraintOperatorType.LESS_OR_EQUAL: return '<=';
         }
     }
 
-    private static isValueToscaFunction(value: any): boolean {
-        return value instanceof Object && 'type' in value && (<any>Object).values(ToscaFunctionType).includes(value.type);
-    }
-
 }
 
-export const OPERATOR_TYPES = {
-    EQUAL: 'equal',
-    GREATER_THAN: 'greater_than',
-    LESS_THAN: 'less_than',
-    GREATER_OR_EQUAL: 'greater_or_equal',
-    LESS_OR_EQUAL: 'less_or_equal'
-};
+export enum ConstraintOperatorType {
+    EQUAL = 'equal',
+    GREATER_THAN = 'greater_than',
+    LESS_THAN = 'less_than',
+    GREATER_OR_EQUAL = 'greater_or_equal',
+    LESS_OR_EQUAL = 'less_or_equal'
+}
 
diff --git a/catalog-ui/src/app/utils/tosca-function-helper.ts b/catalog-ui/src/app/utils/tosca-function-helper.ts
new file mode 100644
index 0000000000..714f22ef57
--- /dev/null
+++ b/catalog-ui/src/app/utils/tosca-function-helper.ts
@@ -0,0 +1,64 @@
+/*
+ * -
+ *  ============LICENSE_START=======================================================
+ *  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.
+ *  You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ *  SPDX-License-Identifier: Apache-2.0
+ *  ============LICENSE_END=========================================================
+ */
+
+import {ToscaFunctionType} from "../models/tosca-function-type.enum";
+import {ToscaConcatFunction} from "../models/tosca-concat-function";
+import {ToscaGetFunction} from "../models/tosca-get-function";
+import {YamlFunction} from "../models/yaml-function";
+import {ToscaFunction} from "../models/tosca-function";
+
+export class ToscaFunctionHelper {
+
+    public static convertObjectToToscaFunction(value: any): ToscaFunction {
+        if (!value || !this.isValueToscaFunction(value)) {
+            return undefined;
+        }
+
+        switch (value.type) {
+            case ToscaFunctionType.CONCAT:
+                return new ToscaConcatFunction(value);
+            case ToscaFunctionType.GET_PROPERTY:
+            case ToscaFunctionType.GET_INPUT:
+            case ToscaFunctionType.GET_ATTRIBUTE:
+                return new ToscaGetFunction(value);
+            case ToscaFunctionType.YAML:
+                return new YamlFunction(value);
+            case ToscaFunctionType.STRING:
+                return <ToscaFunction> {
+                    type: ToscaFunctionType.STRING,
+                    value: value.value,
+                    buildValueString(): string {
+                        return this.value;
+                    },
+                    buildValueObject(): Object {
+                        return this.value;
+                    }
+                };
+            default:
+                return undefined;
+        }
+    }
+
+    public static isValueToscaFunction(value: any): boolean {
+        return value instanceof Object && 'type' in value && (<any>Object).values(ToscaFunctionType).includes(value.type);
+    }
+
+}
diff --git a/catalog-ui/src/assets/languages/en_US.json b/catalog-ui/src/assets/languages/en_US.json
index 13c8669dee..71f2b05efd 100644
--- a/catalog-ui/src/assets/languages/en_US.json
+++ b/catalog-ui/src/assets/languages/en_US.json
@@ -566,6 +566,7 @@
   "VALUE_LABEL": "Value",
   "VALUE_EXPRESSION_LABEL": "Value Expression",
   "OPERATOR_LABEL": "Operator",
+  "CAPABILITY_LABEL": "Capability",
   "=========== SERVICE IMPORT ===========": "",
   "IMPORT_FAILURE_MESSAGE_TEXT": "Import Failure - error reading CSAR"
 }