Support additional operands for node filters

Issue-ID: SDC-4395
Signed-off-by: franciscovila <javier.paradela.vila@est.tech>
Change-Id: I66b172d100ffd2757de88bc7640761f31fd20c28

22 files changed, 812 insertions, 61 deletions

diff --git a/catalog-ui/src/app/models/filter-constraint.ts b/catalog-ui/src/app/models/filter-constraint.ts
index 69ad90cb90..5f4a9432cf 100644
--- a/catalog-ui/src/app/models/filter-constraint.ts
+++ b/catalog-ui/src/app/models/filter-constraint.ts
@@ -26,6 +26,7 @@ export class FilterConstraint {
     sourceType: string;
     sourceName: string;
     value: any;
+    originalType: string;
 
     constructor(input?: any) {
         if (input) {
@@ -35,6 +36,7 @@ export class FilterConstraint {
             this.sourceType = input.sourceType;
             this.sourceName = input.sourceName;
             this.value = input.value;
+            this.originalType = input.originalType;
         }
     }
 }
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
index f47677bf5a..c1acbee07e 100644
--- 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
@@ -20,6 +20,9 @@
  */
 
 import {FilterConstraint} from "../filter-constraint";
+import {ConstraintOperatorType} from "../../utils/filter-constraint-helper";
+import {ToscaGetFunction} from "../tosca-get-function";
+import {ToscaFunction} from "../tosca-function";
 
 export class PropertyFilterConstraintUi extends FilterConstraint {
     isValidValue: boolean;
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html
index 58303a9319..c4a3893423 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html
@@ -44,7 +44,7 @@
     <!-- RIGHT CELL OR FULL WIDTH CELL-->
     <ng-container *ngIf="propType == derivedPropertyTypes.SIMPLE || property.isDeclared || (property.isToscaFunction() && !property.isChildOfListOrMap) || (property.isChildOfListOrMap && propType == derivedPropertyTypes.MAP && property.schema.property.isSimpleType)">
         <div class="table-cell">
-            <checkbox class="{{propType == derivedPropertyTypes.MAP ? 'inline-checkBox' : 'inline-checkBox-List'}}" *ngIf="(property.isChildOfListOrMap && property.schema.property.isSimpleType)" [(checked)]="property.isSelected" [disabled]="property.isDisabled || readonly || property.mapKey == '' || checkboxDisabled" (checkedChange)="toggleTosca.emit(property)" ></checkbox>
+            <checkbox class="{{propType == derivedPropertyTypes.MAP ? 'inline-checkBox' : 'inline-checkBox-List'}}" *ngIf="hideCheckBox === false && (property.isChildOfListOrMap && property.schema.property.isSimpleType)" [(checked)]="property.isSelected" [disabled]="property.isDisabled || readonly || property.mapKey == '' || checkboxDisabled" (checkedChange)="toggleTosca.emit(property)" ></checkbox>
             <dynamic-element class="value-input"
                 pattern="validationUtils.getValidationPattern(property.type)"
                 [value]="(property.isDeclared || property.isToscaFunction()) ? property.value : property.valueObj"
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts
index b632dddf6f..82c5af4ada 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts
@@ -55,6 +55,7 @@ export class DynamicPropertyComponent {
     @Input() hasChildren: boolean;
     @Input() hasDeclareOption:boolean;
     @Input() disablePropertyValue: boolean;
+    @Input() hideCheckBox: boolean;
     @Input() rootProperty: PropertyFEModel;
 
     @Output('propertyChanged') emitter: EventEmitter<void> = new EventEmitter<void>();
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 50ea60e4ea..9a63dff739 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
@@ -33,7 +33,8 @@ import {ConstraintOperatorType, FilterConstraintHelper} from "../../../../utils/
 
 export enum SourceType {
     STATIC = 'static',
-    TOSCA_FUNCTION = 'tosca_function'
+    TOSCA_FUNCTION = 'tosca_function',
+    TOSCA_FUNCTION_LIST = 'tosca_function_list'
 }
 
 class I18nTexts {
@@ -125,7 +126,12 @@ export class ServiceDependenciesComponent implements OnInit, OnChanges {
             {label: FilterConstraintHelper.convertToSymbol(ConstraintOperatorType.LESS_THAN), value: ConstraintOperatorType.LESS_THAN},
             {label: FilterConstraintHelper.convertToSymbol(ConstraintOperatorType.EQUAL), value: ConstraintOperatorType.EQUAL},
             {label: FilterConstraintHelper.convertToSymbol(ConstraintOperatorType.GREATER_OR_EQUAL), value: ConstraintOperatorType.GREATER_OR_EQUAL},
-            {label: FilterConstraintHelper.convertToSymbol(ConstraintOperatorType.LESS_OR_EQUAL), value: ConstraintOperatorType.LESS_OR_EQUAL}
+            {label: FilterConstraintHelper.convertToSymbol(ConstraintOperatorType.LESS_OR_EQUAL), value: ConstraintOperatorType.LESS_OR_EQUAL},
+            {label: FilterConstraintHelper.convertToSymbol(ConstraintOperatorType.LENGTH), value: ConstraintOperatorType.LENGTH},
+            {label: FilterConstraintHelper.convertToSymbol(ConstraintOperatorType.IN_RANGE), value: ConstraintOperatorType.IN_RANGE},
+            {label: FilterConstraintHelper.convertToSymbol(ConstraintOperatorType.MIN_LENGTH), value: ConstraintOperatorType.MIN_LENGTH},
+            {label: FilterConstraintHelper.convertToSymbol(ConstraintOperatorType.MAX_LENGTH), value: ConstraintOperatorType.MAX_LENGTH},
+            {label: FilterConstraintHelper.convertToSymbol(ConstraintOperatorType.PATTERN), value: ConstraintOperatorType.PATTERN}
         ];
         this.topologyTemplateService.getComponentInputsWithProperties(this.compositeService.componentType, this.compositeService.uniqueId)
         .subscribe((result: ComponentGenericResponse) => {
diff --git a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts
index 50c77d3f53..2cf3c79e11 100644
--- a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts
@@ -22,13 +22,15 @@
 
 import * as _ from "lodash";
 import { Component, Compiler, EventEmitter, ViewContainerRef, ViewChild, Input, Output, ElementRef, ComponentRef, ComponentFactoryResolver } from '@angular/core'
-import {ValidationConfiguration, PropertyFEModel} from "app/models";
+import {ValidationConfiguration} from "app/models";
 import {IUiElementChangeEvent} from "../form-components/ui-element-base.component";
 import {UiElementInputComponent} from "../form-components/input/ui-element-input.component";
 import {UiElementPopoverInputComponent} from "../form-components/popover-input/ui-element-popover-input.component";
 import {UiElementIntegerInputComponent} from "../form-components/integer-input/ui-element-integer-input.component";
 import {UiElementDropDownComponent, DropdownValue} from "../form-components/dropdown/ui-element-dropdown.component";
 import {PROPERTY_DATA, PROPERTY_TYPES} from "../../../../utils/constants";
+import {UiElementValidValuesInputComponent} from "../form-components/valid-values-input/ui-element-valid-values-input.component";
+import {UiElementRangeInputComponent} from "../form-components/range-input/ui-element-range-input.component";
 
 enum DynamicElementComponentCreatorIdentifier {
     STRING,
@@ -39,7 +41,9 @@ enum DynamicElementComponentCreatorIdentifier {
     ENUM,
     LIST,
     DEFAULT,
-    TIMESTAMP
+    TIMESTAMP,
+    RANGE,
+    VALID_VALUES
 }
 
 @Component({
@@ -51,13 +55,16 @@ enum DynamicElementComponentCreatorIdentifier {
         UiElementInputComponent,
         UiElementDropDownComponent,
         UiElementPopoverInputComponent,
-        UiElementIntegerInputComponent
+        UiElementIntegerInputComponent,
+        UiElementRangeInputComponent,
+        UiElementValidValuesInputComponent
     ]
 })
 export class DynamicElementComponent {
 
     @ViewChild('target', { read: ViewContainerRef }) target: any;
     @Input() type: any;
+    @Input() operator: any;
     @Input() childType: any;
     @Input() name: string;
     @Input() testId: string;
@@ -92,28 +99,37 @@ export class DynamicElementComponent {
         // Factory to create component based on type or other property attributes.
         const prevElementCreatorIdentifier: DynamicElementComponentCreatorIdentifier = this.elementCreatorIdentifier;
         switch(true) {
-            case this.path && this.path.toUpperCase().indexOf("SUBNETPOOLID") !== -1:
+            case this.path && this.path.toUpperCase().indexOf("SUBNETPOOLID") !== -1 && this.operator != 'valid_values':
                 this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.SUBNETPOOLID;
                 break;
             case this.getValidValues() !== undefined && this.getValidValues() !== null:
                 this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.ENUM;
                 break;
-            case this.type === 'integer':
+            case this.operator === 'length' || this.operator === 'min_length' || this.operator === 'max_length':
                 this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.INTEGER;
                 break;
-            case this.type === 'float':
+            case this.type === 'integer' && this.operator != 'valid_values' && this.operator != 'in_range':
+                this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.INTEGER;
+                break;
+            case this.type === 'float' && this.operator != 'valid_values' && this.operator != 'in_range':
                 this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.FLOAT;
                 break;
-            case PROPERTY_DATA.SCALAR_TYPES.indexOf(this.type) > -1:
-            case this.type === 'string':
+            case PROPERTY_DATA.SCALAR_TYPES.indexOf(this.type) > -1 && this.operator != 'valid_values' && this.operator != 'in_range':
+            case this.type === 'string' && this.operator != 'valid_values' && this.operator != 'in_range' && this.operator != 'length' && this.operator != 'min_length' && this.operator != 'max_length':
                 this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.STRING;
                 break;
-            case this.type === PROPERTY_TYPES.TIMESTAMP:
+            case this.type === PROPERTY_TYPES.TIMESTAMP && this.operator != 'valid_values' && this.operator != 'in_range':
                 this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.TIMESTAMP;
                 break;
-            case this.type === 'boolean':
+            case this.type === 'boolean' && this.operator != 'valid_values':
                 this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.BOOLEAN;
                 break;
+            case this.type === 'range' || this.operator === 'in_range':
+                this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.RANGE;
+                break;
+            case this.operator === 'valid_values':
+                this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.VALID_VALUES;
+                break;
           case this.type === 'map':
                 this.createElementCreatorIdentifierForChild();
                 break;
@@ -156,6 +172,12 @@ export class DynamicElementComponent {
         case 'boolean':
           this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.BOOLEAN;
           break;
+        case 'range':
+          this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.RANGE;
+          break;
+          case 'valid-values':
+              this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.VALID_VALUES;
+              break;
         default:
           this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.DEFAULT;
       }
@@ -201,6 +223,15 @@ export class DynamicElementComponent {
                     this.createComponent(UiElementInputComponent);
                     break;
 
+                case DynamicElementComponentCreatorIdentifier.RANGE:
+                    this.createComponent(UiElementRangeInputComponent);
+                    break;
+
+                case DynamicElementComponentCreatorIdentifier.VALID_VALUES:
+                    this.createComponent(UiElementValidValuesInputComponent);
+                    this.cmpRef.instance.type = this.type;
+                    break;
+
                 case DynamicElementComponentCreatorIdentifier.BOOLEAN:
                     this.createComponent(UiElementDropDownComponent);
 
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts b/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts
index b35d3ae3f4..d7f134b008 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts
@@ -14,6 +14,8 @@ import { UiElementIntegerInputComponent } from './integer-input/ui-element-integ
 import { UiElementPopoverInputComponent } from './popover-input/ui-element-popover-input.component';
 import { RadioButtonComponent } from './radio-buttons/radio-buttons.component';
 import { UiElementBase } from './ui-element-base.component';
+import {UiElementRangeInputComponent} from "./range-input/ui-element-range-input.component";
+import {UiElementValidValuesInputComponent} from "./valid-values-input/ui-element-valid-values-input.component";
 
 @NgModule({
     imports: [
@@ -29,12 +31,16 @@ import { UiElementBase } from './ui-element-base.component';
         UiElementInputComponent,
         UiElementIntegerInputComponent,
         UiElementPopoverInputComponent,
+        UiElementRangeInputComponent,
+        UiElementValidValuesInputComponent,
         UiElementBase,
         RadioButtonComponent],
 
     exports: [UiElementDropDownComponent,
         UiElementInputComponent,
         UiElementIntegerInputComponent,
+        UiElementRangeInputComponent,
+        UiElementValidValuesInputComponent,
         UiElementPopoverInputComponent,
         RadioButtonComponent,
         TooltipModule,
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html
index d5ef08b126..4ab0a689a8 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html
@@ -17,7 +17,7 @@
 <input
     class="value-input"
     [ngClass]="{'error': control.invalid, 'disabled':readonly}"
-    type="text"
+    type="{{type === 'integer' ? 'number' : 'text' }}"
     [name]="name"
     [(ngModel)]="value"
     (input)="onChange()"
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/range-input/ui-element-range-input.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/range-input/ui-element-range-input.component.html
new file mode 100644
index 0000000000..970492ebf5
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/range-input/ui-element-range-input.component.html
@@ -0,0 +1,81 @@
+<!--
+*  ============LICENSE_START=======================================================
+*  Copyright (C) 2023 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="w-sdc-form-columns-wrapper">
+    <div class="w-sdc-form-column">
+
+            <input *ngIf="isFloatType()"
+                class="value-input"
+                [ngClass]="{'error': control.invalid, 'disabled':readonly}"
+                type="number"
+                step="0.01"
+                [name]="name"
+                [(ngModel)]="lowerBound"
+                [value]="getInRangeValue(0)"
+                (input)="onChangeMin()"
+                [attr.maxlength]="validation.propertyValue.max"
+                [attr.minlength]="validation.propertyValue.min"
+                [formControl]="control"
+                [attr.data-tests-id]="'valueMin-' + testId"
+                />
+        <input *ngIf="isIntegerType()"
+               class="value-input"
+               [ngClass]="{'error': control.invalid, 'disabled':readonly}"
+               type="number"
+               [name]="name"
+               [(ngModel)]="lowerBound"
+               [value]="getInRangeValue(0)"
+               (input)="onChangeMin()"
+               [attr.maxlength]="validation.propertyValue.max"
+               [attr.minlength]="validation.propertyValue.min"
+               [formControl]="control"
+               [attr.data-tests-id]="'valueMin-' + testId"
+        />
+        <input *ngIf="isStringType()"
+               class="value-input"
+               [ngClass]="{'error': control.invalid, 'disabled':readonly}"
+               type="text"
+               [name]="name"
+               [(ngModel)]="lowerBound"
+               [value]="getInRangeValue(0)"
+               (input)="onChangeMin()"
+               [attr.maxlength]="validation.propertyValue.max"
+               [attr.minlength]="validation.propertyValue.min"
+               [formControl]="control"
+               [attr.data-tests-id]="'valueMin-' + testId"
+        />
+    </div>
+    <div class="w-sdc-form-column">
+            <input
+                    class="value-input"
+                    [ngClass]="{'error': control.invalid, 'disabled':readonly}"
+                    [type]="isIntegerType() || isFloatType() ? 'number' : 'text'"
+                    [name]="name"
+                    [(ngModel)]="upperBound"
+                    [value]="getInRangeValue(1)"
+                    (input)="onChangeMax()"
+                    [attr.maxlength]="validation.propertyValue.max"
+                    [attr.minlength]="validation.propertyValue.min"
+
+                    [formControl]="control"
+                    [attr.data-tests-id]="'valueMax-' + testId"
+            />
+
+    </div>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/range-input/ui-element-range-input.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/range-input/ui-element-range-input.component.less
new file mode 100644
index 0000000000..c393024899
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/range-input/ui-element-range-input.component.less
@@ -0,0 +1,37 @@
+/*
+ * -
+ *  ============LICENSE_START=======================================================
+ *  Copyright (C) 2023 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 '../../../../../../assets/styles/variables';
+
+/deep/ ui-element-range-input {
+
+    input {
+        text-indent: 6px;
+        border: solid 1px @main_color_o;
+    }
+
+    .error {
+        border: solid 1px @func_color_q;
+        color: @func_color_q;
+        outline: none;
+        box-sizing: border-box;
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/range-input/ui-element-range-input.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/range-input/ui-element-range-input.component.ts
new file mode 100644
index 0000000000..65c5bd72e3
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/range-input/ui-element-range-input.component.ts
@@ -0,0 +1,112 @@
+/*
+ * -
+ *  ============LICENSE_START=======================================================
+ *  Copyright (C) 2023 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} from '@angular/core';
+import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component';
+import {PROPERTY_DATA} from "../../../../../utils/constants";
+
+@Component({
+    selector: 'ui-element-range-input',
+    templateUrl: './ui-element-range-input.component.html',
+    styleUrls: ['./ui-element-range-input.component.less'],
+})
+export class UiElementRangeInputComponent extends UiElementBase implements UiElementBaseInterface {
+    @Input() lowerBound: any;
+    @Input() upperBound: any;
+    step: number;
+    constructor() {
+        super();
+        this.pattern = this.validation.validationPatterns.comment;
+        this.value = new Array(2);
+        this.value[0] = this.lowerBound;
+        this.value[1] = this.upperBound;
+    }
+
+    ngOnInit(){
+        this.step = 0;
+        if (this.type === 'float') {
+            this.step = 0.01;
+        }
+        if (this.type === 'integer') {
+            this.step = 0;
+        }
+    }
+
+    isFloatType(): boolean {
+        return this.type === 'float';
+    }
+
+    isIntegerType(): boolean {
+        return this.type === 'integer' || this.type === 'range' || this.type === 'timestamp';
+    }
+
+    isStringType(): boolean {
+        return this.type === 'string' || PROPERTY_DATA.SCALAR_TYPES.indexOf(this.type) > -1;
+    }
+
+    onChangeMin() {
+        if (!this.value) {
+            this.value = new Array(2);
+        }
+        this.value.splice(0, 1, this.lowerBound);
+        this.baseEmitter.emit({
+            value: this.value ,
+            isValid: this.isValidRange()
+        });
+    }
+
+    onChangeMax() {
+        if (!this.value) {
+            this.value = new Array(2);
+        }
+        this.value.splice(1, 1, this.upperBound);
+        this.baseEmitter.emit({
+            value: this.value,
+            isValid: this.isValidRange()
+        });
+    }
+
+    getInRangeValue(valueIndex: number): string {
+        if(!this.value || !this.value[valueIndex]) {
+            return "";
+        }
+        return this.value[valueIndex];
+    }
+
+    isNumber(value: string | number): boolean
+    {
+        return ((value != undefined) &&
+            (value != null) &&
+            (value !== '') &&
+            !isNaN(Number(value.toString())));
+    }
+
+    isValidRange(): boolean
+    {
+        if (this.isStringType()) {
+            return this.getInRangeValue(0) <= this.getInRangeValue(1);
+        }
+        return this.isNumber(this.value[0])
+        && (this.getInRangeValue(1) === "UNBOUNDED"
+                || (this.isNumber(this.value[1])
+                    && this.getInRangeValue(0) <= this.getInRangeValue(1)));
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/valid-values-input/ui-element-valid-values-input.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/valid-values-input/ui-element-valid-values-input.component.html
new file mode 100644
index 0000000000..ff4d6d1353
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/valid-values-input/ui-element-valid-values-input.component.html
@@ -0,0 +1,39 @@
+<!--
+*  ============LICENSE_START=======================================================
+*  Copyright (C) 2023 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="add-btn"
+             (click)="addToList()">Add to List
+    </div>
+    <div class="w-sdc-form-columns-wrapper" *ngFor="let val of value; let valueIndex = index; trackBy:trackByFn">
+        <div class="w-sdc-form-column">
+            <input type="text" class="i-sdc-form-input" *ngIf="showStringField()"
+                   [value]="val"
+                   (input)="onChangeConstrainValueIndex($event.target.value, valueIndex)"/>
+            <input type="number" class="i-sdc-form-input" *ngIf="showIntegerField()"
+                   [value]="val"
+                   (input)="onChangeConstrainValueIndex($event.target.value, valueIndex)"/>
+            <input type="number" class="i-sdc-form-input" step="0.01" *ngIf="type == 'float'"
+                   [value]="val"
+                   (input)="onChangeConstrainValueIndex($event.target.value, valueIndex)"/>
+        </div>
+        <div class="w-sdc-form-column">
+            <span class="sprite-new delete-btn" (click)="removeFromList(valueIndex)"></span>
+        </div>
+    </div>
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/valid-values-input/ui-element-valid-values-input.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/valid-values-input/ui-element-valid-values-input.component.less
new file mode 100644
index 0000000000..c393024899
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/valid-values-input/ui-element-valid-values-input.component.less
@@ -0,0 +1,37 @@
+/*
+ * -
+ *  ============LICENSE_START=======================================================
+ *  Copyright (C) 2023 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 '../../../../../../assets/styles/variables';
+
+/deep/ ui-element-range-input {
+
+    input {
+        text-indent: 6px;
+        border: solid 1px @main_color_o;
+    }
+
+    .error {
+        border: solid 1px @func_color_q;
+        color: @func_color_q;
+        outline: none;
+        box-sizing: border-box;
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/valid-values-input/ui-element-valid-values-input.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/valid-values-input/ui-element-valid-values-input.component.ts
new file mode 100644
index 0000000000..079fdeba1c
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/valid-values-input/ui-element-valid-values-input.component.ts
@@ -0,0 +1,102 @@
+/*
+ * -
+ *  ============LICENSE_START=======================================================
+ *  Copyright (C) 2023 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, Output, EventEmitter} from '@angular/core';
+import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component';
+import {ConstraintTypes} from "../../../../pages/properties-assignment/constraints/constraints.component";
+import {PROPERTY_DATA, PROPERTY_TYPES} from "../../../../../utils/constants";
+
+@Component({
+    selector: 'ui-element-valid-values-input',
+    templateUrl: './ui-element-valid-values-input.component.html',
+    styleUrls: ['./ui-element-valid-values-input.component.less'],
+})
+export class UiElementValidValuesInputComponent extends UiElementBase implements UiElementBaseInterface {
+    @Output() onConstraintChange: EventEmitter<any> = new EventEmitter<any>();
+    constructor() {
+        super();
+        this.pattern = this.validation.validationPatterns.comment;
+    }
+
+    showStringField(): boolean {
+        return this.type === PROPERTY_TYPES.STRING || PROPERTY_DATA.SCALAR_TYPES.indexOf(this.type) > -1;
+    }
+
+    showIntegerField(): boolean {
+        return this.type === PROPERTY_TYPES.INTEGER || this.type === PROPERTY_TYPES.TIMESTAMP;
+    }
+
+    addToList(){
+        if (!this.value) {
+            this.value = new Array();
+        }
+        this.value.push("");
+        this.baseEmitter.emit({
+            value: this.value,
+            isValid: false
+        });
+        this.emitOnConstraintChange()
+    }
+
+    onChangeConstrainValueIndex(newValue: any, valueIndex: number) {
+        if(!this.value) {
+            this.value = new Array();
+        }
+        this.value[valueIndex] = newValue;
+        this.baseEmitter.emit({
+            value: this.value,
+            isValid: newValue != "" && !this.doesArrayContaintEmptyValues(this.value)
+        });
+        this.emitOnConstraintChange();
+    }
+
+    private emitOnConstraintChange(): void {
+        this.onConstraintChange.emit({
+            valid: this.validateConstraints()
+        });
+    }
+    private validateConstraints(): boolean {
+        if (Array.isArray(this.value)) {
+            return !(this.value.length == 0 || this.doesArrayContaintEmptyValues(this.value));
+        }
+        return this.value && this.type != ConstraintTypes.null
+    }
+
+    removeFromList(valueIndex: number){
+        this.value.splice(valueIndex, 1);
+        this.baseEmitter.emit({
+            value: this.value,
+            isValid: !this.doesArrayContaintEmptyValues(this.value)
+        });
+        this.emitOnConstraintChange()
+    }
+
+    trackByFn(index) {
+        return index;
+    }
+
+    private doesArrayContaintEmptyValues(arr) {
+        for(const element of arr) {
+            if(element === "") return true;
+        }
+        return false;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/services/properties.utils.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/services/properties.utils.ts
index 8dd4ca96ec..6a27622638 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/services/properties.utils.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/services/properties.utils.ts
@@ -181,6 +181,8 @@ export class PropertiesUtils {
                     property.childPropUpdated(childProp);
                 });
 
+            } else if (property.derivedDataType === DerivedPropertyType.RANGE) {
+                property.valueObj = JSON.stringify(property.getValueObj());
             }
         }
         property.updateValueObjOrig();
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html
index 898b189746..65a024cde4 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html
@@ -43,6 +43,7 @@
     </div>
     <div *ngIf="isGetFunctionSelected()">
       <app-tosca-get-function [property]="property" [toscaGetFunction]="toscaFunction"
+                              [overridingType] = "overridingType"
                               [componentInstanceMap]="componentInstanceMap"
                               [functionType]="toscaFunctionTypeForm.value"
                               [compositionMap]="compositionMap"
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts
index 81696944c7..ecaff252d3 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts
@@ -30,7 +30,7 @@ import {ToscaGetFunctionValidationEvent} from "./tosca-get-function/tosca-get-fu
 import {ToscaFunction} from "../../../../models/tosca-function";
 import {ToscaConcatFunctionValidationEvent} from "./tosca-concat-function/tosca-concat-function.component";
 import {ToscaCustomFunctionValidationEvent} from "./tosca-custom-function/tosca-custom-function.component";
-import {PROPERTY_TYPES, PROPERTY_DATA} from "../../../../utils/constants";
+import {PROPERTY_TYPES} from "../../../../utils/constants";
 import {YamlFunctionValidationEvent} from "./yaml-function/yaml-function.component";
 import {ToscaConcatFunction} from "../../../../models/tosca-concat-function";
 import {ToscaCustomFunction} from "../../../../models/tosca-custom-function";
@@ -45,6 +45,8 @@ import {CustomToscaFunction} from "../../../../models/default-custom-functions";
 export class ToscaFunctionComponent implements OnInit, OnChanges {
 
     @Input() property: PropertyBEModel;
+    @Input() overridingType: PROPERTY_TYPES;
+    @Input() inToscaFunction: ToscaFunction;
     @Input() componentInstanceMap: Map<string, InstanceFeDetails> = new Map<string, InstanceFeDetails>();
     @Input() customToscaFunctions: Array<CustomToscaFunction> = [];
     @Input() allowClear: boolean = true;
@@ -74,7 +76,7 @@ export class ToscaFunctionComponent implements OnInit, OnChanges {
 
     ngOnInit(): void {
         this.componentMetadata = this.workspaceService.metadata;
-        this.toscaFunction = this.property.toscaFunction ? this.property.toscaFunction : undefined;
+        this.toscaFunction = this.inToscaFunction ? this.inToscaFunction : this.property.toscaFunction ? this.property.toscaFunction : undefined;
         this.loadToscaFunctions();
         this.formGroup.valueChanges.subscribe(() => {
             if (!this.isInitialized) {
@@ -93,7 +95,7 @@ export class ToscaFunctionComponent implements OnInit, OnChanges {
     ngOnChanges(changes: SimpleChanges): void {
         if (changes.property) {
             this.resetForm();
-            this.toscaFunction = this.property.toscaFunction ? this.property.toscaFunction : undefined;
+            this.toscaFunction = this.inToscaFunction ? this.inToscaFunction : this.property.toscaFunction ? this.property.toscaFunction : undefined;
             this.initToscaFunction();
             this.loadToscaFunctions();
             this.emitValidityChange();
@@ -130,11 +132,11 @@ export class ToscaFunctionComponent implements OnInit, OnChanges {
                 return;
             }
         }
-
         if (!this.property.isToscaFunction()) {
             return;
         }
-        this.toscaFunctionForm.setValue(this.property.toscaFunction);
+
+        this.toscaFunctionForm.setValue(this.inToscaFunction ? this.inToscaFunction : this.property.toscaFunction);
         let type = this.property.toscaFunction.type;
         if (type == ToscaFunctionType.CUSTOM) {
             let name = (this.property.toscaFunction as ToscaCustomFunction).name;
@@ -145,7 +147,7 @@ export class ToscaFunctionComponent implements OnInit, OnChanges {
                 this.toscaFunctionTypeForm.setValue("other");
             }
         } else {
-            this.toscaFunctionTypeForm.setValue(type);
+            this.toscaFunctionTypeForm.setValue(this.inToscaFunction ? this.inToscaFunction.type : type);
         }
     }
 
@@ -159,6 +161,9 @@ export class ToscaFunctionComponent implements OnInit, OnChanges {
         this.toscaFunctions.push(ToscaFunctionType.GET_INPUT);
         this.toscaFunctions.push(ToscaFunctionType.GET_PROPERTY);
         if (this.property.type === PROPERTY_TYPES.STRING || this.property.type === PROPERTY_TYPES.ANY) {
+            this.toscaFunctions.push(ToscaFunctionType.CUSTOM);
+        }
+        if ((this.property.type === PROPERTY_TYPES.STRING || this.property.type === PROPERTY_TYPES.ANY) && this.overridingType === undefined) {
             this.toscaFunctions.push(ToscaFunctionType.CONCAT);
         }
         this.loadCustomToscaFunctions();
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.ts
index fe6f2f143c..284c559c55 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.ts
@@ -42,6 +42,7 @@ import {ToscaGetFunctionTypeConverter} from "../../../../../models/tosca-get-fun
 export class ToscaGetFunctionComponent implements OnInit, OnChanges {
 
     @Input() property: PropertyBEModel;
+    @Input() overridingType: PROPERTY_TYPES;
     @Input() toscaGetFunction: ToscaGetFunction;
     @Input() componentInstanceMap: Map<string, InstanceFeDetails> = new Map<string, InstanceFeDetails>();
     @Input() functionType: ToscaGetFunctionType;
@@ -243,13 +244,13 @@ export class ToscaGetFunctionComponent implements OnInit, OnChanges {
             const properties: Array<PropertyBEModel | AttributeBEModel> = this.extractProperties(response);
             if (!properties || properties.length === 0) {
                 const msgCode = this.getNotFoundMsgCode();
-                this.dropDownErrorMsg = this.translateService.translate(msgCode, {type: this.propertyTypeToString()});
+                this.dropDownErrorMsg = this.translateService.translate(msgCode, {type: this.overridingType != undefined ? this.overridingType : this.propertyTypeToString()});
                 return;
             }
             this.addPropertiesToDropdown(properties);
             if (this.propertyDropdownList.length == 0) {
                 const msgCode = this.getNotFoundMsgCode();
-                this.dropDownErrorMsg = this.translateService.translate(msgCode, {type: this.propertyTypeToString()});
+                this.dropDownErrorMsg = this.translateService.translate(msgCode, {type: this.overridingType != undefined ? this.overridingType : this.propertyTypeToString()});
             }
         }, (error) => {
             console.error('An error occurred while loading properties.', error);
@@ -403,6 +404,9 @@ export class ToscaGetFunctionComponent implements OnInit, OnChanges {
     }
 
     private hasSameType(property: PropertyBEModel | AttributeBEModel): boolean {
+        if (this.overridingType != undefined) {
+            return property.type === this.overridingType;
+        }
         if (this.property.type === PROPERTY_TYPES.ANY) {
             return true;
         }
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 8024eb1615..c90cfd8210 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
@@ -51,7 +51,10 @@
                     <label class="i-sdc-form-label required">{{"OPERATOR_LABEL" | translate}}</label>
                     <ui-element-dropdown class="i-sdc-form-select" data-tests-id="constraintOperator"
                                          [testId]="'constraintOperator'"
-                                         [values]="operatorTypes" [(value)]="currentRule.constraintOperator"></ui-element-dropdown>
+                                         (change)="onSourceTypeChange()"
+                                         [values]="operatorTypes" [(value)]="currentRule.constraintOperator"
+                                         >
+                    </ui-element-dropdown>
                 </div>
             </div>
             <div class="rule-builder-content">
@@ -61,17 +64,28 @@
                            data-tests-id="value-type-static"
                            [(ngModel)]="selectedSourceType"
                            [value]="SOURCE_TYPES.STATIC.value"
-                           (ngModelChange)="onSourceTypeChange()"/> {{"VALUE_LABEL" | translate}}
+                           (ngModelChange)="onSourceTypeChange($event)"/> {{"VALUE_LABEL" | translate}}
                     <input type="radio" name="sourceType"
                            data-tests-id="value-type-tosca-function"
                            [(ngModel)]="selectedSourceType"
-                           [value]="SOURCE_TYPES.TOSCA_FUNCTION.value"
-                           (ngModelChange)="onSourceTypeChange()"/> {{"VALUE_EXPRESSION_LABEL" | translate}}
+                           [value]="isValidValuesOperator() || isRangeType() || isInRangeOperator() ? SOURCE_TYPES.TOSCA_FUNCTION_LIST.value: SOURCE_TYPES.TOSCA_FUNCTION.value"
+                           (ngModelChange)="onSourceTypeChange($event)"/> {{"VALUE_EXPRESSION_LABEL" | translate}}
                 </div>
             </div>
             <div class="rule-builder-content" *ngIf="isToscaFunctionSource() && selectedProperty">
                 <div class="i-sdc-form-item rule-input-field">
                     <tosca-function [property]="selectedProperty"
+                                    [overridingType] = "isLengthOperator() ? overridingType : undefined"
+                                    [componentInstanceMap]="componentInstanceMap"
+                                    [allowClear]="false"
+                                    (onValidityChange)="onToscaFunctionValidityChange($event)"
+                    >
+                    </tosca-function>
+                </div>
+            </div>
+            <div class="rule-builder-content" *ngIf="isToscaFunctionSource() && selectedProperty && (isRangeType() || isInRangeOperator())">
+                <div class="i-sdc-form-item rule-input-field">
+                    <tosca-function [property]="selectedProperty"
                                     [componentInstanceMap]="componentInstanceMap"
                                     [customToscaFunctions]="customToscaFunctions"
                                     [allowClear]="false"
@@ -80,29 +94,97 @@
                     </tosca-function>
                 </div>
             </div>
+
+            <div class="rule-builder-content" *ngIf="isToscaFunctionListSource() && selectedProperty && (isRangeType() || isInRangeOperator())">
+
+                <div class="i-sdc-form-item rule-input-field">
+                    <div class="w-sdc-form-columns-wrapper" *ngFor="let val of rangeToscaFunctionList; let valueIndex = index; trackBy:trackByFn">
+                        <div class="w-sdc-form-column" style="border-width:3px; border-style:solid; border-color:#009fdb; padding: 1em;">
+                            <tosca-function [property]="selectedProperty"
+                                            [inToscaFunction]="val"
+                                            [componentInstanceMap]="componentInstanceMap"
+                                            [allowClear]="false"
+                                            (onValidityChange)="onToscaRangeFunctionListValidityChange($event, valueIndex)"
+                            >
+                            </tosca-function>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="rule-builder-content" *ngIf="isToscaFunctionListSource() && selectedProperty && isValidValuesOperator()">
+
+                <div class="i-sdc-form-item rule-input-field">
+                    <div class="add-btn"
+                         (click)="addToList()">Add to List
+                    </div>
+                    <div class="w-sdc-form-columns-wrapper" *ngFor="let val of this.validValuesToscaFunctionList; let valueIndex = index; trackBy:trackByFn">
+                        <div class="w-sdc-form-column" style="border-width:3px; border-style:solid; border-color:#009fdb; padding: 1em;">
+                            <tosca-function [property]="selectedProperty"
+                                            [inToscaFunction]="val"
+                                            [componentInstanceMap]="componentInstanceMap"
+                                            [allowClear]="false"
+                                            (onValidityChange)="onToscaFunctionListValidityChange($event, valueIndex)"
+                            >
+                            </tosca-function>
+                        </div>
+                        <div class="w-sdc-form-column">
+                            <span class="sprite-new delete-btn" (click)="removeFromList(valueIndex)"></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
             <div *ngIf="isToscaFunctionSource() && !selectedProperty">
                 {{"NODE_FILTER_SELECT_PROPERTY" | translate}}
             </div>
             <div class="rule-builder-content" *ngIf="isStaticSource()">
                 <div class="i-sdc-form-item rule-input-field complex-input-field">
                     <dynamic-property
-                        *ngIf="isComplexListMapType()"
+                            *ngIf="isComplexListMapType() && !isRangeType() && !isValidValuesOperator() && !isLengthOperator()"
                         [selectedPropertyId]="selectedProperty.uniqueId"
                         [property]="selectedProperty"
                         [expandedChildId]="selectedProperty.expandedChildPropertyId ?
                                 selectedProperty.expandedChildPropertyId : selectedProperty.name"
                         [canBeDeclared]="true"
+                        [hideCheckBox]="true"
                         (propertyChanged)="updateComplexListMapTypeRuleValue()"
                         [rootProperty]="selectedProperty"
                         (expandChild)="selectedProperty.updateExpandedChildPropertyId($event)">
                     </dynamic-property>
                     <dynamic-element
-                        *ngIf="!isComplexListMapType()"
+                        *ngIf="!isComplexListMapType() && !isValidValuesOperator()"
                         [(value)]="currentRule.value"
                         class="rule-assigned-value"
                         data-tests-id="ruleAssignedValue"
                         (elementChanged)="onValueChange($event.isValid)"
-                        [type]="selectedProperty ? selectedProperty.type : 'string'">
+                        [type]="isLengthOperator() ? 'integer' : selectedProperty ? selectedProperty.type : 'string'"
+                        [operator]="currentRule.constraintOperator">
+                    </dynamic-element>
+                    <dynamic-element
+                            *ngIf="isComplexListMapType() && isLengthOperator()"
+                            [(value)]="currentRule.value"
+                            class="rule-assigned-value"
+                            data-tests-id="ruleAssignedValue"
+                            (elementChanged)="onValueChange($event.isValid)"
+                            [type]="isLengthOperator() ? 'integer' : selectedProperty ? selectedProperty.type : 'string'"
+                            [operator]="currentRule.constraintOperator">
+                    </dynamic-element>
+                    <dynamic-element
+                            *ngIf="isRangeType()"
+                            [(value)]="currentRule.value"
+                            class="rule-assigned-value"
+                            data-tests-id="ruleAssignedValue"
+                            (elementChanged)="onValueChange($event.isValid)"
+                            [type]="selectedProperty ? selectedProperty.type : 'string'">
+                    </dynamic-element>
+                    <dynamic-element
+                            *ngIf="isValidValuesOperator()"
+                            [(value)]="currentRule.value"
+                            class="rule-assigned-value"
+                            data-tests-id="ruleAssignedValue"
+                            (elementChanged)="onValueChange($event.isValid)"
+                            [type]="selectedProperty ? selectedProperty.type : 'string'"
+                            [operator]="currentRule.constraintOperator">
                     </dynamic-element>
                 </div>
             </div>
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 39609a5fbd..5897f272b3 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
@@ -19,7 +19,7 @@ import {InputBEModel, PropertyBEModel, PropertyFEModel, PropertyModel} from 'app
 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 {PROPERTY_DATA, PROPERTY_TYPES} from 'app/utils';
 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";
@@ -30,7 +30,7 @@ import {ConstraintOperatorType, FilterConstraintHelper} from "../../../utils/fil
 import {ToscaFunctionHelper} from "../../../utils/tosca-function-helper";
 import {TopologyTemplateService} from "app/ng2/services/component-services/topology-template.service";
 import {CustomToscaFunction} from "../../../models/default-custom-functions";
-import {ToscaFunctionType} from "../../../models/tosca-function-type.enum";
+import {ToscaFunction} from "../../../models/tosca-function";
 
 @Component({
   selector: 'service-dependencies-editor',
@@ -52,8 +52,23 @@ export class ServiceDependenciesEditorComponent implements OnInit {
       ConstraintOperatorType.LESS_THAN,
       ConstraintOperatorType.EQUAL,
       ConstraintOperatorType.GREATER_OR_EQUAL,
-      ConstraintOperatorType.LESS_OR_EQUAL
+      ConstraintOperatorType.LESS_OR_EQUAL,
+      ConstraintOperatorType.IN_RANGE,
+      ConstraintOperatorType.VALID_VALUES,
+      ConstraintOperatorType.LENGTH,
+      ConstraintOperatorType.MIN_LENGTH,
+      ConstraintOperatorType.MAX_LENGTH,
+      ConstraintOperatorType.PATTERN
   ];
+    @Input() comparableAllowedOperators: ConstraintOperatorType[] = [
+        ConstraintOperatorType.GREATER_THAN,
+        ConstraintOperatorType.LESS_THAN,
+        ConstraintOperatorType.EQUAL,
+        ConstraintOperatorType.GREATER_OR_EQUAL,
+        ConstraintOperatorType.LESS_OR_EQUAL,
+        ConstraintOperatorType.IN_RANGE,
+        ConstraintOperatorType.VALID_VALUES,
+    ];
   @Input() capabilityNameAndPropertiesMap: Map<string, PropertyModel[]>;
   @Input() filterType: FilterType;
   @Input() filterConstraint: PropertyFilterConstraintUi;
@@ -62,6 +77,13 @@ export class ServiceDependenciesEditorComponent implements OnInit {
 
   FILTER_TYPE_CAPABILITY: FilterType = FilterType.CAPABILITY
 
+  listAllowedOperators: ConstraintOperatorType[] = [
+        ConstraintOperatorType.EQUAL,
+        ConstraintOperatorType.LENGTH,
+        ConstraintOperatorType.MIN_LENGTH,
+        ConstraintOperatorType.MAX_LENGTH
+    ];
+
   operatorTypes: DropdownValue[] = [
     {label: FilterConstraintHelper.convertToSymbol(ConstraintOperatorType.GREATER_THAN), value: ConstraintOperatorType.GREATER_THAN},
     {label: FilterConstraintHelper.convertToSymbol(ConstraintOperatorType.LESS_THAN), value: ConstraintOperatorType.LESS_THAN},
@@ -69,6 +91,9 @@ export class ServiceDependenciesEditorComponent implements OnInit {
     {label: FilterConstraintHelper.convertToSymbol(ConstraintOperatorType.GREATER_OR_EQUAL), value: ConstraintOperatorType.GREATER_OR_EQUAL},
     {label: FilterConstraintHelper.convertToSymbol(ConstraintOperatorType.LESS_OR_EQUAL), value: ConstraintOperatorType.LESS_OR_EQUAL}
   ];
+  lengthArray: string[] = [ConstraintOperatorType.LENGTH,
+      ConstraintOperatorType.MIN_LENGTH,
+      ConstraintOperatorType.MAX_LENGTH];
 
   servicePropertyDropdownList: DropdownValue[];
   isLoading: false;
@@ -77,10 +102,14 @@ export class ServiceDependenciesEditorComponent implements OnInit {
   componentInstanceMap: Map<string, InstanceFeDetails> = new Map<string, InstanceFeDetails>();
   customToscaFunctions: Array<CustomToscaFunction>;
   capabilityDropdownList: DropdownValue[] = [];
+  validValuesToscaFunctionList: ToscaFunction[];
+  rangeToscaFunctionList: ToscaFunction[];
+  overridingType = PROPERTY_TYPES.INTEGER;
 
   SOURCE_TYPES = {
     STATIC: {label: 'Static', value: SourceType.STATIC},
-    TOSCA_FUNCTION: {label: 'Tosca Function', value: SourceType.TOSCA_FUNCTION}
+    TOSCA_FUNCTION: {label: 'Tosca Function', value: SourceType.TOSCA_FUNCTION},
+    TOSCA_FUNCTION_LIST: {label: 'Tosca Function List', value: SourceType.TOSCA_FUNCTION_LIST}
   };
 
   constructor(private propertiesUtils: PropertiesUtils, private compositionService: CompositionService, private topologyTemplateService: TopologyTemplateService) {}
@@ -100,6 +129,7 @@ export class ServiceDependenciesEditorComponent implements OnInit {
     this.initSelectedSourceType();
     this.initPropertyDropdown();
     this.syncRuleData();
+    this.generateRangeToscaFunctionList();
   }
 
   private initCustomToscaFunctions() {
@@ -138,43 +168,87 @@ export class ServiceDependenciesEditorComponent implements OnInit {
     this.servicePropertyDropdownList = [new DropdownValue(undefined, selectLabel), ...propertyList.map(prop => new DropdownValue(prop.name, prop.name)).sort((prop1, prop2) => prop1.value.localeCompare(prop2.value))];
   }
 
-  private initConstraintOperatorOptions(): void {
-    if (!this.selectedProperty) {
-      this.operatorTypes = [new DropdownValue(undefined, 'Select a Property')];
-      return;
+    private initConstraintOperatorOptions(): void {
+        if (!this.selectedProperty) {
+            this.operatorTypes = [this.setOperatorDropdownValue(undefined)];
+            return;
+        }
+        const operatorList: DropdownValue[] = [];
+        switch (true) {
+            case this.selectedProperty.type === PROPERTY_TYPES.RANGE:
+                if (this.currentRule.constraintOperator !== ConstraintOperatorType.IN_RANGE) {
+                    this.currentRule.constraintOperator = ConstraintOperatorType.IN_RANGE;
+                }
+                this.operatorTypes = [this.setOperatorDropdownValue(ConstraintOperatorType.IN_RANGE)];
+                break;
+            case this.selectedProperty.type === PROPERTY_TYPES.STRING:
+                this.allowedOperators.forEach(constraintOperatorType =>
+                    operatorList.push(this.setOperatorDropdownValue(constraintOperatorType))
+                );
+                this.operatorTypes = operatorList;
+                break;
+            case  this.selectedProperty.type != PROPERTY_TYPES.STRING &&
+            ((PROPERTY_DATA.SIMPLE_TYPES_COMPARABLE.indexOf(this.selectedProperty.type) > -1) ||
+            (PROPERTY_DATA.COMPARABLE_TYPES.indexOf(this.selectedProperty.type) > -1)):
+                this.comparableAllowedOperators.forEach(constraintOperatorType =>
+                    operatorList.push(this.setOperatorDropdownValue(constraintOperatorType))
+                );
+                this.operatorTypes = operatorList;
+                break;
+            case this.selectedProperty.type === PROPERTY_TYPES.LIST:
+                this.listAllowedOperators.forEach(constraintOperatorType =>
+                    operatorList.push(this.setOperatorDropdownValue(constraintOperatorType))
+                );
+                this.operatorTypes = operatorList;
+                break;
+            default:
+                if (this.currentRule.constraintOperator !== ConstraintOperatorType.EQUAL) {
+                    this.currentRule.constraintOperator = ConstraintOperatorType.EQUAL;
+                }
+                this.operatorTypes = [this.setOperatorDropdownValue(ConstraintOperatorType.EQUAL)];
+                break;
+        }
     }
 
-    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;
+    private setOperatorDropdownValue(constraintOperatorType: ConstraintOperatorType) {
+        if (constraintOperatorType === undefined) {
+            return new DropdownValue(undefined, 'Select a Property');
+        }
+        return new DropdownValue(constraintOperatorType, FilterConstraintHelper.convertToSymbol(constraintOperatorType));
     }
-  }
 
-  private initSelectedSourceType(): void {
+    private initSelectedSourceType(): void {
     if (!this.currentRule.sourceType || this.currentRule.sourceType === SourceType.STATIC) {
       this.selectedSourceType = SourceType.STATIC;
     } else {
-      this.selectedSourceType = SourceType.TOSCA_FUNCTION;
+        if (!this.isValidValuesOperator() && !this.isRangeType() && !this.isInRangeOperator()){
+          this.selectedSourceType = SourceType.TOSCA_FUNCTION;
+        }
+        else {
+          this.selectedSourceType = SourceType.TOSCA_FUNCTION_LIST;
+        }
     }
   }
 
   private initCurrentRule(): void {
+      let propertyList: PropertyBEModel[] = [];
+      if (this.filterType == FilterType.CAPABILITY) {
+          if (this.currentRule.capabilityName) {
+              propertyList = this.capabilityNameAndPropertiesMap.get(this.currentRule.capabilityName);
+          }
+      } else {
+          propertyList = this.selectedInstanceProperties;
+      }
     if (this.filterConstraint) {
+        this.filterConstraint.originalType = propertyList.find(prop=>prop.name==this.filterConstraint.servicePropertyName).type;
       this.currentRule = new PropertyFilterConstraintUi(this.filterConstraint);
     } else {
       this.currentRule = new PropertyFilterConstraintUi({
         sourceName: SourceType.STATIC,
         sourceType: SourceType.STATIC,
         constraintOperator: ConstraintOperatorType.EQUAL,
-        value: undefined
+        value: undefined,
+        originalType: undefined
       });
     }
   }
@@ -223,18 +297,26 @@ export class ServiceDependenciesEditorComponent implements OnInit {
     }
     newProperty.value = undefined;
     newProperty.toscaFunction = undefined;
+
     if (typeof this.currentRule.value === 'string') {
       newProperty.value = this.currentRule.value;
       this.propertiesUtils.initValueObjectRef(newProperty);
     } else if (ToscaFunctionHelper.isValueToscaFunction(this.currentRule.value)) {
       newProperty.toscaFunction = ToscaFunctionHelper.convertObjectToToscaFunction(this.currentRule.value);
       newProperty.value = newProperty.toscaFunction.buildValueString();
+    } else if (Array.isArray(this.currentRule.value) &&
+        typeof this.currentRule.value[0] === "object" &&
+        this.currentRule.value[0]['propertySource'] != undefined) {
+            this.validValuesToscaFunctionList = this.currentRule.value;
+            this.rangeToscaFunctionList = this.currentRule.value;
+            newProperty.toscaFunction = this.currentRule.value;
     } else {
       newProperty.value = JSON.stringify(this.currentRule.value);
       this.propertiesUtils.initValueObjectRef(newProperty);
     }
 
     this.selectedProperty = newProperty;
+      this.currentRule.originalType = this.selectedProperty.type;
   }
 
   updateSelectedProperty(): void {
@@ -256,6 +338,7 @@ export class ServiceDependenciesEditorComponent implements OnInit {
 
     this.propertiesUtils.initValueObjectRef(newProperty);
     this.selectedProperty = newProperty;
+    this.currentRule.originalType = this.selectedProperty.type;
   }
 
   isStaticSource(): boolean {
@@ -266,10 +349,30 @@ export class ServiceDependenciesEditorComponent implements OnInit {
     return this.selectedSourceType === SourceType.TOSCA_FUNCTION
   }
 
+  isToscaFunctionListSource(): boolean {
+    return this.selectedSourceType === SourceType.TOSCA_FUNCTION_LIST
+  }
+
   isComplexListMapType(): boolean {
     return this.selectedProperty && this.selectedProperty.derivedDataType > 0;
   }
 
+  isRangeType(): boolean {
+    return this.selectedProperty && this.selectedProperty.derivedDataType == 4;
+  }
+
+  isLengthOperator(): boolean {
+      return this.lengthArray.indexOf(this.currentRule.constraintOperator) > -1;
+  }
+
+  isInRangeOperator(): boolean {
+    return this.currentRule.constraintOperator && this.currentRule.constraintOperator === ConstraintOperatorType.IN_RANGE;
+  }
+
+  isValidValuesOperator(): boolean {
+    return this.currentRule.constraintOperator && this.currentRule.constraintOperator === ConstraintOperatorType.VALID_VALUES;
+  }
+
   updateComplexListMapTypeRuleValue(): void {
     this.currentRule.value = PropertyFEModel.cleanValueObj(this.selectedProperty.valueObj);
     this.onValueChange(this.selectedProperty.valueObjIsValid);
@@ -277,11 +380,23 @@ export class ServiceDependenciesEditorComponent implements OnInit {
 
   onToscaFunctionValidityChange(validationEvent: ToscaFunctionValidationEvent): void {
     if (validationEvent.isValid && validationEvent.toscaFunction) {
-      this.currentRule.value = validationEvent.toscaFunction;
-      this.currentRule.sourceType = validationEvent.toscaFunction.type
-      if (validationEvent.toscaFunction instanceof ToscaGetFunction) {
-        this.currentRule.sourceName = validationEvent.toscaFunction.sourceName;
-      }
+        if (this.isValidValuesOperator()) {
+            this.currentRule.value = this.validValuesToscaFunctionList;
+            this.currentRule.sourceType = SourceType.TOSCA_FUNCTION_LIST;
+            if (validationEvent.toscaFunction instanceof ToscaGetFunction) {
+                this.currentRule.sourceName = SourceType.TOSCA_FUNCTION_LIST;
+            }
+        }
+        else {
+            if (this.isLengthOperator()) {
+                this.overridingType = PROPERTY_TYPES.INTEGER;
+            }
+            this.currentRule.value = validationEvent.toscaFunction;
+            this.currentRule.sourceType = validationEvent.toscaFunction.type
+            if (validationEvent.toscaFunction instanceof ToscaGetFunction) {
+                this.currentRule.sourceName = validationEvent.toscaFunction.sourceName;
+            }
+        }
     } else {
       this.currentRule.updateValidity(false);
       this.currentRule.value = undefined;
@@ -290,12 +405,50 @@ export class ServiceDependenciesEditorComponent implements OnInit {
     }
   }
 
+    onToscaFunctionListValidityChange(validationEvent: ToscaFunctionValidationEvent, valueIndex: number): void {
+        if (validationEvent.isValid && validationEvent.toscaFunction) {
+            this.validValuesToscaFunctionList.splice(this.validValuesToscaFunctionList.length -1, 1, validationEvent.toscaFunction);
+            this.currentRule.value = this.validValuesToscaFunctionList;
+            this.currentRule.sourceType = 'SEVERAL';
+            if (validationEvent.toscaFunction instanceof ToscaGetFunction) {
+                this.currentRule.sourceName = validationEvent.toscaFunction.sourceName;
+            }
+        } else {
+            this.currentRule.updateValidity(false);
+            this.currentRule.value = undefined;
+            this.currentRule.sourceType = undefined;
+            this.currentRule.sourceName = undefined;
+        }
+    }
+
+    onToscaRangeFunctionListValidityChange(validationEvent: ToscaFunctionValidationEvent, valueIndex: number): void {
+        if (validationEvent.isValid && validationEvent.toscaFunction) {
+            this.rangeToscaFunctionList.splice(valueIndex, 1, validationEvent.toscaFunction);
+            this.currentRule.value = this.rangeToscaFunctionList;
+            this.currentRule.sourceType = 'SEVERAL';
+            if (validationEvent.toscaFunction instanceof ToscaGetFunction) {
+                this.currentRule.sourceName = validationEvent.toscaFunction.sourceName;
+            }
+        } else {
+            this.currentRule.updateValidity(false);
+            this.currentRule.value = undefined;
+            this.currentRule.sourceType = undefined;
+            this.currentRule.sourceName = undefined;
+        }
+    }
+
   onSourceTypeChange(): void {
     this.currentRule.value = undefined;
+    if (!this.isStaticSource() && (this.isValidValuesOperator() || this.isRangeType() || this.isInRangeOperator())) {
+        this.selectedSourceType = SourceType.TOSCA_FUNCTION_LIST;
+    }
     this.currentRule.sourceType = this.selectedSourceType;
     if (this.isStaticSource()) {
       this.currentRule.sourceName = SourceType.STATIC;
     }
+    if (this.isToscaFunctionListSource()) {
+      this.currentRule.sourceName = SourceType.TOSCA_FUNCTION_LIST;
+    }
     this.updateSelectedProperty();
   }
 
@@ -305,6 +458,41 @@ export class ServiceDependenciesEditorComponent implements OnInit {
     this.onPropertyChange();
   }
 
+  addToList(){
+      if (!this.validValuesToscaFunctionList) {
+          this.validValuesToscaFunctionList = new Array();
+      }
+      this.validValuesToscaFunctionList.push(ToscaFunctionHelper.convertObjectToToscaFunction(undefined));
+  }
+
+  generateRangeToscaFunctionList() {
+      if (!this.rangeToscaFunctionList) {
+          this.rangeToscaFunctionList = new Array();
+          this.rangeToscaFunctionList.push(ToscaFunctionHelper.convertObjectToToscaFunction(undefined));
+          this.rangeToscaFunctionList.push(ToscaFunctionHelper.convertObjectToToscaFunction(undefined));
+      }
+  }
+
+  trackByFn(index) {
+    return index;
+  }
+
+  removeFromList(valueIndex: number){
+    this.validValuesToscaFunctionList.splice(valueIndex, 1);
+      this.currentRule.updateValidity(!this.doesArrayContainsEmptyValues(this.validValuesToscaFunctionList) && !(this.validValuesToscaFunctionList.length === 0));
+      if (this.doesArrayContainsEmptyValues(this.validValuesToscaFunctionList) || (this.validValuesToscaFunctionList.length === 0)) {
+          this.currentRule.value = undefined;
+          this.currentRule.sourceType = undefined;
+          this.currentRule.sourceName = undefined;
+      }
+  }
+
+  private doesArrayContainsEmptyValues(arr) {
+    for(const element of arr) {
+      if(element === undefined) return true;
+    }
+      return false;
+  }
 }
 
 export enum FilterType {
diff --git a/catalog-ui/src/app/utils/constants.ts b/catalog-ui/src/app/utils/constants.ts
index 927c778df6..8c62cec739 100644
--- a/catalog-ui/src/app/utils/constants.ts
+++ b/catalog-ui/src/app/utils/constants.ts
@@ -164,6 +164,7 @@ export class PROPERTY_TYPES {
     public static SCALAR_FREQUENCY = 'scalar-unit.frequency';
     public static SCALAR_SIZE = 'scalar-unit.size';
     public static SCALAR_TIME = 'scalar-unit.time';
+    public static SCALAR_UNIT = 'scalar-unit';
 }
 
 export class SOURCES {
@@ -177,12 +178,12 @@ export class PROPERTY_DATA {
     public static SIMPLE_TYPES = [PROPERTY_TYPES.STRING, PROPERTY_TYPES.INTEGER, PROPERTY_TYPES.TIMESTAMP, PROPERTY_TYPES.FLOAT, PROPERTY_TYPES.BOOLEAN, PROPERTY_TYPES.JSON, PROPERTY_TYPES.SCALAR_BITRATE, PROPERTY_TYPES.SCALAR_FREQUENCY, PROPERTY_TYPES.SCALAR_SIZE, PROPERTY_TYPES.SCALAR_TIME];
     public static SIMPLE_TYPES_COMPARABLE = [PROPERTY_TYPES.STRING, PROPERTY_TYPES.INTEGER, PROPERTY_TYPES.FLOAT];
     public static SCHEMA_TYPES = [PROPERTY_TYPES.LIST, PROPERTY_TYPES.MAP];
-    public static SCALAR_TYPES = [PROPERTY_TYPES.SCALAR_BITRATE, PROPERTY_TYPES.SCALAR_FREQUENCY, PROPERTY_TYPES.SCALAR_SIZE, PROPERTY_TYPES.SCALAR_TIME];
+    public static SCALAR_TYPES = [PROPERTY_TYPES.SCALAR_BITRATE, PROPERTY_TYPES.SCALAR_FREQUENCY, PROPERTY_TYPES.SCALAR_SIZE, PROPERTY_TYPES.SCALAR_TIME, PROPERTY_TYPES.SCALAR_UNIT];
     public static ROOT_DATA_TYPE = "tosca.datatypes.Root";
     public static OPENECOMP_ROOT = "org.openecomp.datatypes.Root";
     public static SUPPLEMENTAL_DATA = "supplemental_data";
     public static SOURCES = [SOURCES.A_AND_AI, SOURCES.ORDER, SOURCES.RUNTIME];
-    public static COMPARABLE_TYPES = [PROPERTY_TYPES.STRING, PROPERTY_TYPES.INTEGER, PROPERTY_TYPES.FLOAT, PROPERTY_TYPES.TIMESTAMP, PROPERTY_TYPES.SCALAR_BITRATE, PROPERTY_TYPES.SCALAR_FREQUENCY, PROPERTY_TYPES.SCALAR_SIZE, PROPERTY_TYPES.SCALAR_TIME];
+    public static COMPARABLE_TYPES = [PROPERTY_TYPES.STRING, PROPERTY_TYPES.INTEGER, PROPERTY_TYPES.FLOAT, PROPERTY_TYPES.TIMESTAMP, PROPERTY_TYPES.SCALAR_BITRATE, PROPERTY_TYPES.SCALAR_FREQUENCY, PROPERTY_TYPES.SCALAR_SIZE, PROPERTY_TYPES.SCALAR_TIME, PROPERTY_TYPES.SCALAR_UNIT];
 }
 
 export class PROPERTY_VALUE_CONSTRAINTS {
diff --git a/catalog-ui/src/app/utils/filter-constraint-helper.ts b/catalog-ui/src/app/utils/filter-constraint-helper.ts
index f1207084a7..7ee9d27efe 100644
--- a/catalog-ui/src/app/utils/filter-constraint-helper.ts
+++ b/catalog-ui/src/app/utils/filter-constraint-helper.ts
@@ -50,9 +50,14 @@ export class FilterConstraintHelper {
             case ConstraintOperatorType.GREATER_THAN: return '>';
             case ConstraintOperatorType.GREATER_OR_EQUAL: return '>=';
             case ConstraintOperatorType.LESS_OR_EQUAL: return '<=';
+            case ConstraintOperatorType.IN_RANGE: return 'in range';
+            case ConstraintOperatorType.VALID_VALUES: return 'valid values';
+            case ConstraintOperatorType.LENGTH: return 'length';
+            case ConstraintOperatorType.MIN_LENGTH: return 'minimum length';
+            case ConstraintOperatorType.MAX_LENGTH: return 'maximum length';
+            case ConstraintOperatorType.PATTERN: return 'pattern';
         }
     }
-
 }
 
 export enum ConstraintOperatorType {
@@ -60,6 +65,12 @@ export enum ConstraintOperatorType {
     GREATER_THAN = 'greater_than',
     LESS_THAN = 'less_than',
     GREATER_OR_EQUAL = 'greater_or_equal',
-    LESS_OR_EQUAL = 'less_or_equal'
+    LESS_OR_EQUAL = 'less_or_equal',
+    IN_RANGE = 'in_range',
+    VALID_VALUES = 'valid_values',
+    LENGTH = 'length',
+    MIN_LENGTH = 'min_length',
+    MAX_LENGTH = 'max_length',
+    PATTERN = 'pattern'
 }