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>

7 files changed, 197 insertions, 471 deletions

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