Fix 'Upgrading a node does not bring its new capabilities'-bug 95/135195/11
authorvasraz <vasyl.razinkov@est.tech>
Tue, 27 Jun 2023 14:13:27 +0000 (15:13 +0100)
committerMichael Morris <michael.morris@est.tech>
Wed, 19 Jul 2023 13:34:32 +0000 (13:34 +0000)
Signed-off-by: Vasyl Razinkov <vasyl.razinkov@est.tech>
Change-Id: I9a719fb6a0b6ccd455af087c728c9dc66088038f
Issue-ID: SDC-4556

catalog-ui/src/app/models/componentsInstances/fullComponentInstance.ts
catalog-ui/src/app/ng2/pages/composition/graph/common/style/component-instances-nodes-style.ts
catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.spec.ts
catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.ts

index 269663f..f2c1a0a 100644 (file)
@@ -1,23 +1,33 @@
-import { ComponentInstance, Component, ArtifactGroupModel, Service, Resource, IMainCategory, ArtifactModel, AttributeModel } from "app/models";
-import { ComponentType } from '../../utils/constants';
+import {
+    ArtifactGroupModel,
+    AttributeModel,
+    CapabilitiesGroup,
+    Component,
+    ComponentInstance,
+    IMainCategory,
+    RequirementsGroup,
+    Resource,
+    Service
+} from "app/models";
+import {ComponentType} from '../../utils/constants';
 import * as _ from 'lodash';
 
 
 export class FullComponentInstance extends ComponentInstance {
     public contactId: string;
     public componentType: string;
-    public interfaces:any;
-    public tags:Array<string>;
-    public version:string;
-    public allVersions:any;
-    public highestVersion:boolean;
-    public categories:Array<IMainCategory>;
-    public creationDate:number;
-    public creatorFullName:string;
-    public vendorName:string;
-    public vendorRelease:string;
-    public systemName:string;
-    public uuid:string;
+    public interfaces: any;
+    public tags: Array<string>;
+    public version: string;
+    public allVersions: any;
+    public highestVersion: boolean;
+    public categories: Array<IMainCategory>;
+    public creationDate: number;
+    public creatorFullName: string;
+    public vendorName: string;
+    public vendorRelease: string;
+    public systemName: string;
+    public uuid: string;
     public lifecycleState: string;
     public isArchived: boolean;
 
@@ -26,22 +36,24 @@ export class FullComponentInstance extends ComponentInstance {
     public directives: string[];
 
     //service
-    public serviceApiArtifacts:ArtifactGroupModel;
-    public serviceType:string;
-    public serviceRole:string;
+    public serviceApiArtifacts: ArtifactGroupModel;
+    public serviceType: string;
+    public serviceRole: string;
 
     //resource
-    public csarUUID:string;
+    public csarUUID: string;
     public isCsarComponent: boolean;
-    public csarVersion:string;
-    public csarPackageType:string;
-    public packageId:string;
-    public resourceType:string;
-    public resourceVendorModelNumber:string;
+    public csarVersion: string;
+    public csarPackageType: string;
+    public packageId: string;
+    public resourceType: string;
+    public resourceVendorModelNumber: string;
+    public capabilities: CapabilitiesGroup;
+    public requirements: RequirementsGroup;
 
     public attributes: Array<AttributeModel>;
 
-    constructor(componentInstance:ComponentInstance, originComponent:Component) {
+    constructor(componentInstance: ComponentInstance, originComponent: Component) {
         super(componentInstance);
 
         this.componentType = originComponent.componentType;
@@ -65,15 +77,17 @@ export class FullComponentInstance extends ComponentInstance {
         this.attributes = originComponent.attributes;
         this.directives = componentInstance.directives;
 
+        this.capabilities = new CapabilitiesGroup(originComponent.capabilities);
+        this.requirements = new RequirementsGroup(originComponent.requirements);
 
-        if(originComponent.componentType === ComponentType.SERVICE || originComponent.componentType
+        if (originComponent.componentType === ComponentType.SERVICE || originComponent.componentType
             === ComponentType.SERVICE_PROXY || originComponent.componentType === ComponentType.SERVICE_SUBSTITUTION) {
             this.isServiceInstance = true;
             this.serviceApiArtifacts = (<Service>originComponent).serviceApiArtifacts;
             this.serviceType = (<Service>originComponent).serviceType;
             this.serviceRole = (<Service>originComponent).serviceRole;
         }
-        if(originComponent.componentType === ComponentType.RESOURCE) {
+        if (originComponent.componentType === ComponentType.RESOURCE) {
             this.isResourceInstance = true;
             this.csarUUID = (<Resource>originComponent).csarUUID;
             this.isCsarComponent = !!this.csarUUID;
@@ -82,12 +96,12 @@ export class FullComponentInstance extends ComponentInstance {
         }
     }
 
-    public isResource = ():boolean => {
+    public isResource = (): boolean => {
         return this.isResourceInstance;
     }
 
-    public isService = ():boolean => {
+    public isService = (): boolean => {
         return this.isServiceInstance;
     }
 
-}
\ No newline at end of file
+}
index 4a975da..a74fdc5 100644 (file)
@@ -252,9 +252,6 @@ export class ComponentInstanceNodesStyle {
                 selector: '.dependent',
                 css: {
                     'shape': 'rectangle',
-                    'background-image': (ele:Cy.Collection) => {
-                        return ele.data().initDependentImage(ele, GraphUIObjects.NODE_OVERLAP_MIN_SIZE)
-                    },
                     'border-width': 0
                 }
             },
index 76e84a2..34a2529 100644 (file)
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed, async } from '@angular/core/testing';
-import { CompositionService } from 'app/ng2/pages/composition/composition.service';
-import { EventListenerService } from '../../../../../services/event-listener-service';
-import { ComponentInstanceServiceNg2 } from 'app/ng2/services/component-instance-services/component-instance.service';
-import { WorkspaceService } from 'app/ng2/pages/workspace/workspace.service';
-import { GroupsService } from 'app/services-ng2';
-import { PoliciesService } from 'app/services-ng2';
-import { CompositionPanelHeaderComponent } from './panel-header.component';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {CompositionService} from 'app/ng2/pages/composition/composition.service';
+import {EventListenerService} from '../../../../../services/event-listener-service';
+import {ComponentInstanceServiceNg2} from 'app/ng2/services/component-instance-services/component-instance.service';
+import {WorkspaceService} from 'app/ng2/pages/workspace/workspace.service';
+import {GroupsService, PoliciesService} from 'app/services-ng2';
+import {CompositionPanelHeaderComponent} from './panel-header.component';
 import {SdcUiServices} from 'onap-ui-angular';
-import { Capability, Requirement, RequirementsGroup, CapabilitiesGroup, ComponentInstance, Component, FullComponentInstance, PolicyInstance, GroupInstance } from "app/models";
-import { of, Observable } from "rxjs";
+import {
+    CapabilitiesGroup,
+    Capability,
+    Component,
+    ComponentInstance,
+    FullComponentInstance,
+    GroupInstance,
+    PolicyInstance,
+    Requirement,
+    RequirementsGroup
+} from "app/models";
+import {Observable, of} from "rxjs";
 
 describe('CompositionPanelHeaderComponent', () => {
-  let component: CompositionPanelHeaderComponent;
-  let fixture: ComponentFixture<CompositionPanelHeaderComponent>;
-  const componentInstanceServiceNg2Stub = {
-    updateComponentInstance: jest.fn()
-  };
-  const valueEditModalInstance = {
-    innerModalContent : {
-      instance: { name : "VF Test" }
-    },
-    buttons: [{id: 'saveButton', text: 'OK', size: 'xsm', callback: jest.fn(), closeModal: false}],
-    closeModal : jest.fn()
-  };
+    let component: CompositionPanelHeaderComponent;
+    let fixture: ComponentFixture<CompositionPanelHeaderComponent>;
+    const componentInstanceServiceNg2Stub = {
+        updateComponentInstance: jest.fn()
+    };
+    const valueEditModalInstance = {
+        innerModalContent: {
+            instance: {name: "VF Test"}
+        },
+        buttons: [{id: 'saveButton', text: 'OK', size: 'xsm', callback: jest.fn(), closeModal: false}],
+        closeModal: jest.fn()
+    };
 
-  beforeEach(
-    () => {
-      const compositionServiceStub = {};
-      const eventListenerServiceStub = {};
+    beforeEach(
+        () => {
+            const compositionServiceStub = {};
+            const eventListenerServiceStub = {};
 
-      const workspaceServiceStub = {
-        metadata: {
-          componentType: "SERVICE",
-          uniqueId: "123"
+            const workspaceServiceStub = {
+                metadata: {
+                    componentType: "SERVICE",
+                    uniqueId: "123"
+                }
+            };
+            const groupsServiceStub = {
+                updateName: jest.fn()
+            };
+            const policiesServiceStub = {
+                updateName: jest.fn()
+            };
+
+            TestBed.configureTestingModule({
+                schemas: [NO_ERRORS_SCHEMA],
+                declarations: [CompositionPanelHeaderComponent],
+                providers: [
+                    {provide: CompositionService, useValue: compositionServiceStub},
+                    {provide: EventListenerService, useValue: eventListenerServiceStub},
+                    {
+                        provide: ComponentInstanceServiceNg2,
+                        useValue: componentInstanceServiceNg2Stub
+                    },
+                    {provide: WorkspaceService, useValue: workspaceServiceStub},
+                    {provide: GroupsService, useValue: groupsServiceStub},
+                    {provide: PoliciesService, useValue: policiesServiceStub},
+                    {provide: SdcUiServices.ModalService, useValue: {}}
+                ]
+            });
+            fixture = TestBed.createComponent(CompositionPanelHeaderComponent);
+            component = fixture.componentInstance;
         }
-      };
-      const groupsServiceStub = {
-        updateName: jest.fn()
-      };
-      const policiesServiceStub = {
-        updateName: jest.fn()
-      };
+    );
 
-      TestBed.configureTestingModule({
-        schemas: [NO_ERRORS_SCHEMA],
-        declarations: [CompositionPanelHeaderComponent],
-        providers: [
-          { provide: CompositionService, useValue: compositionServiceStub },
-          { provide: EventListenerService, useValue: eventListenerServiceStub },
-          {
-            provide: ComponentInstanceServiceNg2,
-            useValue: componentInstanceServiceNg2Stub
-          },
-          { provide: WorkspaceService, useValue: workspaceServiceStub },
-          { provide: GroupsService, useValue: groupsServiceStub },
-          { provide: PoliciesService, useValue: policiesServiceStub },
-          { provide: SdcUiServices.ModalService, useValue: {}}
-        ]
-      });
-      fixture = TestBed.createComponent(CompositionPanelHeaderComponent);
-      component = fixture.componentInstance;
-    }
-  );
+    it('can load instance', () => {
+        expect(component).toBeTruthy();
+    });
 
-  it('can load instance', () => {
-    expect(component).toBeTruthy();
-  });
+    it('should close the modal without saving if the name has not changed', () => {
+        component.selectedComponent = <FullComponentInstance>{name: "VF Test"};
+        component.valueEditModalInstance = valueEditModalInstance;
 
-  it('should close the modal without saving if the name has not changed', () => {
-    component.selectedComponent = <FullComponentInstance>{name: "VF Test"};
-    component.valueEditModalInstance = valueEditModalInstance;
+        component.saveInstanceName();
+        expect(component.componentInstanceService.updateComponentInstance).not.toHaveBeenCalled();
+        expect(component.valueEditModalInstance.closeModal).toHaveBeenCalled();
+    });
 
-    component.saveInstanceName();
-    expect(component.componentInstanceService.updateComponentInstance).not.toHaveBeenCalled();
-    expect(component.valueEditModalInstance.closeModal).toHaveBeenCalled();
-  });
+    it('after editing instance name, capabilities/requirements should be updated with new name', () => {
+        const newName = "New VF NAME";
+        component.selectedComponent = new FullComponentInstance(<ComponentInstance>{
+            name: "VF Test",
+            requirements: new RequirementsGroup(),
+            capabilities: new CapabilitiesGroup()
+        }, <Component>{});
+        component.selectedComponent.requirements['key'] = [<Requirement>{ownerName: "VF Test"}, <Requirement>{ownerName: "VF Test"}];
+        component.selectedComponent.capabilities['key'] = [<Capability>{ownerName: "VF Test"}];
+        component.valueEditModalInstance = valueEditModalInstance;
+        component.valueEditModalInstance.innerModalContent.instance.name = newName;
+        jest.spyOn(component.componentInstanceService, 'updateComponentInstance').mockReturnValue(of(<ComponentInstance>{name: newName}));
+        component.saveInstanceName();
 
-  it('after editing instance name, capabilities/requirements should be updated with new name', () => {
-    const newName = "New VF NAME";
-    component.selectedComponent = new FullComponentInstance(<ComponentInstance>{
-      name: "VF Test",
-      requirements: <RequirementsGroup>{"key": [<Requirement>{ownerName: "VF Test"}, <Requirement>{ownerName: "VF Test"}]},
-      capabilities: new CapabilitiesGroup()
-    }, <Component>{});
-    component.selectedComponent.capabilities['key'] =  [<Capability>{ownerName: "VF Test"}];      
-    component.valueEditModalInstance = valueEditModalInstance;
-    component.valueEditModalInstance.innerModalContent.instance.name = newName;
-    jest.spyOn(component.componentInstanceService, 'updateComponentInstance').mockReturnValue(of(<ComponentInstance>{name: newName}));
-    component.saveInstanceName();
-    
-    expect(component.selectedComponent.name).toBe(newName);
-    expect(component.selectedComponent.requirements['key'][0].ownerName).toEqual(newName);
-    expect(component.selectedComponent.requirements['key'][1].ownerName).toEqual(newName);
-    expect(component.selectedComponent.capabilities['key'][0].ownerName).toEqual(newName);
-  });
+        expect(component.selectedComponent.name).toBe(newName);
+        expect(component.selectedComponent.requirements['key'][0].ownerName).toEqual(newName);
+        expect(component.selectedComponent.requirements['key'][1].ownerName).toEqual(newName);
+        expect(component.selectedComponent.capabilities['key'][0].ownerName).toEqual(newName);
+    });
 
-  it('if update fails, name is reverted to old value', () => { 
-    component.selectedComponent = new GroupInstance(<GroupInstance>{name: "GROUP NAME"});
-    component.valueEditModalInstance = valueEditModalInstance;
-    jest.spyOn(component.groupService, 'updateName').mockReturnValue(Observable.throw(new Error('Error')));
-    component.saveInstanceName();
-    expect(component.selectedComponent.name).toEqual("GROUP NAME");
-  });
+    it('if update fails, name is reverted to old value', () => {
+        component.selectedComponent = new GroupInstance(<GroupInstance>{name: "GROUP NAME"});
+        component.valueEditModalInstance = valueEditModalInstance;
+        jest.spyOn(component.groupService, 'updateName').mockReturnValue(Observable.throw(new Error('Error')));
+        component.saveInstanceName();
+        expect(component.selectedComponent.name).toEqual("GROUP NAME");
+    });
 
-  it('policy instance uses policies service for update name', () => { 
-    component.selectedComponent = new PolicyInstance(<PolicyInstance>{name: "Policy OLD NAME"});
-    component.valueEditModalInstance = valueEditModalInstance;
-    jest.spyOn(component.policiesService, 'updateName').mockReturnValue(of(true));
-    component.saveInstanceName();
-    expect(component.policiesService.updateName).toHaveBeenCalledTimes(1);
-  });
+    it('policy instance uses policies service for update name', () => {
+        component.selectedComponent = new PolicyInstance(<PolicyInstance>{name: "Policy OLD NAME"});
+        component.valueEditModalInstance = valueEditModalInstance;
+        jest.spyOn(component.policiesService, 'updateName').mockReturnValue(of(true));
+        component.saveInstanceName();
+        expect(component.policiesService.updateName).toHaveBeenCalledTimes(1);
+    });
 
-  it('group instance uses groups service for update name', () => { 
-    component.selectedComponent = new GroupInstance(<GroupInstance>{name: "GROUP NAME"});
-    component.valueEditModalInstance = valueEditModalInstance;
-    jest.spyOn(component.groupService, 'updateName').mockReturnValue(of(true));
-    component.saveInstanceName();
-    expect(component.groupService.updateName).toHaveBeenCalledTimes(1);
-  });
+    it('group instance uses groups service for update name', () => {
+        component.selectedComponent = new GroupInstance(<GroupInstance>{name: "GROUP NAME"});
+        component.valueEditModalInstance = valueEditModalInstance;
+        jest.spyOn(component.groupService, 'updateName').mockReturnValue(of(true));
+        component.saveInstanceName();
+        expect(component.groupService.updateName).toHaveBeenCalledTimes(1);
+    });
 
 });
index d560285..5f26bd7 100644 (file)
@@ -33,33 +33,33 @@ import {CustomToscaFunction} from "../../../models/default-custom-functions";
 import {ToscaFunction} from "../../../models/tosca-function";
 
 @Component({
-  selector: 'service-dependencies-editor',
-  templateUrl: './service-dependencies-editor.component.html',
-  styleUrls: ['./service-dependencies-editor.component.less'],
-  providers: [ServiceServiceNg2]
+    selector: 'service-dependencies-editor',
+    templateUrl: './service-dependencies-editor.component.html',
+    styleUrls: ['./service-dependencies-editor.component.less'],
+    providers: [ServiceServiceNg2]
 })
 export class ServiceDependenciesEditorComponent implements OnInit {
 
-  @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,
-      ConstraintOperatorType.IN_RANGE,
-      ConstraintOperatorType.VALID_VALUES,
-      ConstraintOperatorType.LENGTH,
-      ConstraintOperatorType.MIN_LENGTH,
-      ConstraintOperatorType.MAX_LENGTH,
-      ConstraintOperatorType.PATTERN
-  ];
+    @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,
+        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,
@@ -69,71 +69,72 @@ export class ServiceDependenciesEditorComponent implements OnInit {
         ConstraintOperatorType.IN_RANGE,
         ConstraintOperatorType.VALID_VALUES,
     ];
-  @Input() capabilityNameAndPropertiesMap: Map<string, PropertyModel[]>;
-  @Input() filterType: FilterType;
-  @Input() filterConstraint: PropertyFilterConstraintUi;
+    @Input() capabilityNameAndPropertiesMap: Map<string, PropertyModel[]>;
+    @Input() filterType: FilterType;
+    @Input() filterConstraint: PropertyFilterConstraintUi;
   @Input() customToscaFunctions: Array<CustomToscaFunction>;
-  //output
-  currentRule: PropertyFilterConstraintUi;
+    //output
+    currentRule: PropertyFilterConstraintUi;
 
-  FILTER_TYPE_CAPABILITY: FilterType = FilterType.CAPABILITY
+    FILTER_TYPE_CAPABILITY: FilterType = FilterType.CAPABILITY
 
-  listAllowedOperators: ConstraintOperatorType[] = [
+    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},
-    {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}
-  ];
-  lengthArray: string[] = [ConstraintOperatorType.LENGTH,
-      ConstraintOperatorType.MIN_LENGTH,
-      ConstraintOperatorType.MAX_LENGTH];
-
-  servicePropertyDropdownList: DropdownValue[];
-  isLoading: false;
-  selectedProperty: PropertyFEModel;
-  selectedSourceType: string;
-  componentInstanceMap: Map<string, InstanceFeDetails> = new Map<string, InstanceFeDetails>();
-
-  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_LIST: {label: 'Tosca Function List', value: SourceType.TOSCA_FUNCTION_LIST}
-  };
-
-  constructor(private propertiesUtils: PropertiesUtils, private compositionService: CompositionService, private topologyTemplateService: TopologyTemplateService) {}
-
-  ngOnInit(): void {
-    if (this.compositionService.componentInstances) {
-      this.compositionService.componentInstances.forEach(value => {
-        this.componentInstanceMap.set(value.uniqueId, <InstanceFeDetails>{
-          name: value.name
-        });
-      });
-    }
-    this.initCustomToscaFunctions();
-    this.initCapabilityDropdown();
-    this.initCurrentRule();
-    this.initConstraintOperatorOptions();
-    this.initSelectedSourceType();
-    this.initPropertyDropdown();
-    this.syncRuleData();
-    this.generateRangeToscaFunctionList();
-  }
-
-  private initCustomToscaFunctions() {
+    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}
+    ];
+    lengthArray: string[] = [ConstraintOperatorType.LENGTH,
+        ConstraintOperatorType.MIN_LENGTH,
+        ConstraintOperatorType.MAX_LENGTH];
+
+    servicePropertyDropdownList: DropdownValue[];
+    isLoading: false;
+    selectedProperty: PropertyFEModel;
+    selectedSourceType: string;
+    componentInstanceMap: Map<string, InstanceFeDetails> = new Map<string, InstanceFeDetails>();
+
+    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_LIST: {label: 'Tosca Function List', value: SourceType.TOSCA_FUNCTION_LIST}
+    };
+
+    constructor(private propertiesUtils: PropertiesUtils, private compositionService: CompositionService, private topologyTemplateService: TopologyTemplateService) {
+    }
+
+    ngOnInit(): void {
+        if (this.compositionService.componentInstances) {
+            this.compositionService.componentInstances.forEach(value => {
+                this.componentInstanceMap.set(value.uniqueId, <InstanceFeDetails>{
+                    name: value.name
+                });
+            });
+        }
+        this.initCustomToscaFunctions();
+        this.initCapabilityDropdown();
+        this.initCurrentRule();
+        this.initConstraintOperatorOptions();
+        this.initSelectedSourceType();
+        this.initPropertyDropdown();
+        this.syncRuleData();
+        this.generateRangeToscaFunctionList();
+    }
+
+    private initCustomToscaFunctions() {
       if (!this.customToscaFunctions) {
           this.customToscaFunctions = [];
           this.topologyTemplateService.getDefaultCustomFunction().toPromise().then((data) => {
@@ -144,32 +145,32 @@ export class ServiceDependenciesEditorComponent implements OnInit {
       }
  }
 
-  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 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';
+    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)).sort((prop1, prop2) => prop1.value.localeCompare(prop2.value))];
     }
-    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) {
@@ -192,7 +193,7 @@ export class ServiceDependenciesEditorComponent implements OnInit {
                 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)):
+                (PROPERTY_DATA.COMPARABLE_TYPES.indexOf(this.selectedProperty.type) > -1)):
                 this.comparableAllowedOperators.forEach(constraintOperatorType =>
                     operatorList.push(this.setOperatorDropdownValue(constraintOperatorType))
                 );
@@ -221,196 +222,196 @@ export class ServiceDependenciesEditorComponent implements OnInit {
     }
 
     private initSelectedSourceType(): void {
-    if (!this.currentRule.sourceType || this.currentRule.sourceType === SourceType.STATIC) {
-      this.selectedSourceType = SourceType.STATIC;
-    } else {
-        if (!this.isValidValuesOperator() && !this.isRangeType() && !this.isInRangeOperator()){
-          this.selectedSourceType = SourceType.TOSCA_FUNCTION;
+        if (!this.currentRule.sourceType || this.currentRule.sourceType === SourceType.STATIC) {
+            this.selectedSourceType = SourceType.STATIC;
+        } else {
+            if (!this.isValidValuesOperator() && !this.isRangeType() && !this.isInRangeOperator()) {
+                this.selectedSourceType = SourceType.TOSCA_FUNCTION;
+            } else {
+                this.selectedSourceType = SourceType.TOSCA_FUNCTION_LIST;
+            }
         }
-        else {
-          this.selectedSourceType = SourceType.TOSCA_FUNCTION_LIST;
+    }
+
+    private initCurrentRule(): void {
+        if (this.filterConstraint) {
+            this.currentRule = new PropertyFilterConstraintUi(this.filterConstraint);
+        } else {
+            this.currentRule = new PropertyFilterConstraintUi({
+                sourceName: SourceType.STATIC,
+                sourceType: SourceType.STATIC,
+                constraintOperator: ConstraintOperatorType.EQUAL,
+                value: undefined,
+                originalType: undefined
+            });
+        }
+        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;
         }
     }
-  }
 
-  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,
-        originalType: undefined
-      });
-    }
-  }
-
-  onCapabilityChange(): void {
-    this.initPropertyDropdown();
-    this.resetSelectedProperty();
-  }
-
-  onPropertyChange(): void {
-    this.currentRule.value = undefined;
-    this.onValueChange(false);
-    this.updateSelectedProperty();
-    this.initConstraintOperatorOptions();
-  }
-
-  syncRuleData(): void {
-    if (!this.currentRule.sourceName || this.currentRule.sourceType === SourceType.STATIC) {
-      this.currentRule.sourceName = SourceType.STATIC;
-      this.currentRule.sourceType = SourceType.STATIC;
-    }
-    this.initSelectedProperty();
-    this.initConstraintOperatorOptions();
-  }
-
-  onValueChange(isValidValue:any): void {
-    this.currentRule.updateValidity(isValidValue);
-  }
-
-  checkFormValidForSubmit(): boolean {
-    return this.currentRule.isValidRule();
-  }
-
-  initSelectedProperty(): void {
-    if (!this.currentRule.servicePropertyName) {
-      this.selectedProperty = undefined;
-      return;
-    }
-    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;
-      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) {
+    onCapabilityChange(): void {
+        this.initPropertyDropdown();
+        this.resetSelectedProperty();
+    }
+
+    onPropertyChange(): void {
+        this.currentRule.value = undefined;
+        this.onValueChange(false);
+        this.updateSelectedProperty();
+        this.initConstraintOperatorOptions();
+    }
+
+    syncRuleData(): void {
+        if (!this.currentRule.sourceName || this.currentRule.sourceType === SourceType.STATIC) {
+            this.currentRule.sourceName = SourceType.STATIC;
+            this.currentRule.sourceType = SourceType.STATIC;
+        }
+        this.initSelectedProperty();
+        this.initConstraintOperatorOptions();
+    }
+
+    onValueChange(isValidValue: any): void {
+        this.currentRule.updateValidity(isValidValue);
+    }
+
+    checkFormValidForSubmit(): boolean {
+        return this.currentRule.isValidRule();
+    }
+
+    initSelectedProperty(): void {
+        if (!this.currentRule.servicePropertyName) {
+            this.selectedProperty = undefined;
+            return;
+        }
+        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;
+            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);
+        } else {
+            newProperty.value = JSON.stringify(this.currentRule.value);
+            this.propertiesUtils.initValueObjectRef(newProperty);
+        }
+
+        this.selectedProperty = newProperty;
+        this.currentRule.originalType = this.selectedProperty.type;
     }
 
-    this.selectedProperty = newProperty;
-      this.currentRule.originalType = this.selectedProperty.type;
-  }
+    updateSelectedProperty(): void {
+        this.selectedProperty = undefined;
+        if (!this.currentRule.servicePropertyName) {
+            return;
+        }
 
-  updateSelectedProperty(): void {
-    this.selectedProperty = undefined;
-    if (!this.currentRule.servicePropertyName) {
-      return;
-    }
+        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;
 
-    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));
+        this.propertiesUtils.initValueObjectRef(newProperty);
+        this.selectedProperty = newProperty;
+        this.currentRule.originalType = this.selectedProperty.type;
     }
-    newProperty.value = undefined;
-    newProperty.toscaFunction = undefined;
-
-    this.propertiesUtils.initValueObjectRef(newProperty);
-    this.selectedProperty = newProperty;
-    this.currentRule.originalType = this.selectedProperty.type;
-  }
 
-  isStaticSource(): boolean {
-    return this.selectedSourceType === SourceType.STATIC
-  }
+    isStaticSource(): boolean {
+        return this.selectedSourceType === SourceType.STATIC
+    }
 
-  isToscaFunctionSource(): boolean {
-    return this.selectedSourceType === SourceType.TOSCA_FUNCTION
-  }
+    isToscaFunctionSource(): boolean {
+        return this.selectedSourceType === SourceType.TOSCA_FUNCTION
+    }
 
-  isToscaFunctionListSource(): boolean {
-    return this.selectedSourceType === SourceType.TOSCA_FUNCTION_LIST
-  }
+    isToscaFunctionListSource(): boolean {
+        return this.selectedSourceType === SourceType.TOSCA_FUNCTION_LIST
+    }
 
-  isComplexListMapType(): boolean {
-    return this.selectedProperty && this.selectedProperty.derivedDataType > 0;
-  }
+    isComplexListMapType(): boolean {
+        return this.selectedProperty && this.selectedProperty.derivedDataType > 0;
+    }
 
-  isRangeType(): boolean {
-    return this.selectedProperty && this.selectedProperty.derivedDataType == 4;
-  }
+    isRangeType(): boolean {
+        return this.selectedProperty && this.selectedProperty.derivedDataType == 4;
+    }
 
-  isLengthOperator(): boolean {
-      return this.lengthArray.indexOf(this.currentRule.constraintOperator) > -1;
-  }
+    isLengthOperator(): boolean {
+        return this.lengthArray.indexOf(this.currentRule.constraintOperator) > -1;
+    }
 
-  isInRangeOperator(): boolean {
-    return this.currentRule.constraintOperator && this.currentRule.constraintOperator === ConstraintOperatorType.IN_RANGE;
-  }
+    isInRangeOperator(): boolean {
+        return this.currentRule.constraintOperator && this.currentRule.constraintOperator === ConstraintOperatorType.IN_RANGE;
+    }
 
-  isValidValuesOperator(): boolean {
-    return this.currentRule.constraintOperator && this.currentRule.constraintOperator === ConstraintOperatorType.VALID_VALUES;
-  }
+    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);
-  }
+    updateComplexListMapTypeRuleValue(): void {
+        this.currentRule.value = PropertyFEModel.cleanValueObj(this.selectedProperty.valueObj);
+        this.onValueChange(this.selectedProperty.valueObjIsValid);
+    }
 
-  onToscaFunctionValidityChange(validationEvent: ToscaFunctionValidationEvent): void {
-    if (validationEvent.isValid && validationEvent.toscaFunction) {
-        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;
+    onToscaFunctionValidityChange(validationEvent: ToscaFunctionValidationEvent): void {
+        if (validationEvent.isValid && validationEvent.toscaFunction) {
+            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;
+            this.currentRule.sourceType = undefined;
+            this.currentRule.sourceName = undefined;
         }
-    } else {
-      this.currentRule.updateValidity(false);
-      this.currentRule.value = undefined;
-      this.currentRule.sourceType = undefined;
-      this.currentRule.sourceName = undefined;
     }
-  }
 
     onToscaFunctionListValidityChange(validationEvent: ToscaFunctionValidationEvent, valueIndex: number): void {
         if (validationEvent.isValid && validationEvent.toscaFunction) {
-            this.validValuesToscaFunctionList.splice(this.validValuesToscaFunctionList.length -1, 1, 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) {
@@ -440,65 +441,65 @@ export class ServiceDependenciesEditorComponent implements OnInit {
         }
     }
 
-  onSourceTypeChange(): void {
-    this.currentRule.value = undefined;
-    if (!this.isStaticSource() && (this.isValidValuesOperator() || this.isRangeType() || this.isInRangeOperator())) {
-        this.selectedSourceType = SourceType.TOSCA_FUNCTION_LIST;
+    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();
+    }
+
+    private resetSelectedProperty(): void {
+        this.currentRule.servicePropertyName = undefined;
+        this.selectedProperty = undefined;
+        this.onPropertyChange();
     }
-    this.currentRule.sourceType = this.selectedSourceType;
-    if (this.isStaticSource()) {
-      this.currentRule.sourceName = SourceType.STATIC;
+
+    addToList() {
+        if (!this.validValuesToscaFunctionList) {
+            this.validValuesToscaFunctionList = new Array();
+        }
+        this.validValuesToscaFunctionList.push(ToscaFunctionHelper.convertObjectToToscaFunction(undefined));
     }
-    if (this.isToscaFunctionListSource()) {
-      this.currentRule.sourceName = SourceType.TOSCA_FUNCTION_LIST;
+
+    generateRangeToscaFunctionList() {
+        if (!this.rangeToscaFunctionList) {
+            this.rangeToscaFunctionList = new Array();
+            this.rangeToscaFunctionList.push(ToscaFunctionHelper.convertObjectToToscaFunction(undefined));
+            this.rangeToscaFunctionList.push(ToscaFunctionHelper.convertObjectToToscaFunction(undefined));
+        }
     }
-    this.updateSelectedProperty();
-  }
 
-  private resetSelectedProperty(): void {
-    this.currentRule.servicePropertyName = undefined;
-    this.selectedProperty = undefined;
-    this.onPropertyChange();
-  }
+    trackByFn(index) {
+        return index;
+    }
 
-  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;
-      }
-  }
+    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;
+    private doesArrayContainsEmptyValues(arr) {
+        for (const element of arr) {
+            if (element === undefined) return true;
+        }
+        return false;
     }
-      return false;
-  }
 }
 
 export enum FilterType {
-  CAPABILITY,
-  PROPERTY
-}
\ No newline at end of file
+    CAPABILITY,
+    PROPERTY
+}