Fix for substitution filter properties

Issue-ID: SDC-3325
Change-Id: If26bf895a0a2f914fb9c2b36e53466df9b7999fe
Signed-off-by: KrupaNagabhushan <krupa.nagabhushan@est.tech>

10 files changed, 160 insertions, 114 deletions

diff --git a/catalog-ui/src/app/models/tosca-filter-constraint-type.enum.ts b/catalog-ui/src/app/models/tosca-filter-constraint-type.enum.ts
new file mode 100644
index 0000000000..0a0cbeb4bf
--- /dev/null
+++ b/catalog-ui/src/app/models/tosca-filter-constraint-type.enum.ts
@@ -0,0 +1,22 @@
+/*
+ * ============LICENSE_START=======================================================
+ *  Copyright (C) 2020 Nordix Foundation
+ *  ================================================================================
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ *  SPDX-License-Identifier: Apache-2.0
+ *  ============LICENSE_END=========================================================
+ */
+
+export enum ToscaFilterConstraintType {
+  PROPERTIES = 'properties'
+}
diff --git a/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.html b/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.html
index f781e6c89b..01329b70d1 100644
--- a/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.html
@@ -19,32 +19,39 @@
 -->
 
 <div class="substitution-filter">
+  <loader [display]="isLoading" [size]="'medium'" [relative]="true"></loader>
+  <div class="w-sdc-designer-sidebar-section">
+    <sdc-accordion [title]="'Substitution Filter Properties'" [arrow-direction]="'right'" [open]="true">
+      <div class="i-sdc-designer-sidebar-section-content-substitution-filter-section">
 
-  <div *ngIf="compositeService.isService()"
-       class="i-sdc-designer-sidebar-section-content-item-rules-section">
+        <div class="i-sdc-designer-sidebar-section-content-substitution-filter"
+             [ngClass]="{'hand': !readonly}"
+             *ngFor="let property of constraintProperties; let i = index">
+          <div class="rule-details" [ngClass]="{'readonly': readonly}">
+            <div class="rule-desc" (click)="!readonly && onSelectSubstitutionFilter(PROPERTIES, i)"
+                 tooltips
+                 tooltip="{{property.servicePropertyName + ' ' + getSymbol(property.constraintOperator) + ' '
+             + (property.sourceName ? property.sourceName + ':' : '') + property.value}}">
+              {{property.servicePropertyName + ' ' + getSymbol(property.constraintOperator)
+            + ' '
+            + (property.sourceName ? property.sourceName + ':' : '') + property.value}}
+            </div>
+            <span *ngIf="!readonly" class="sprite-new delete-btn delete-icon"
+                  (click)="openDeleteModal(PROPERTIES, i)"
+                  data-tests-id="delete-input-button"></span>
+          </div>
+        </div>
 
-    <div class="i-sdc-designer-sidebar-section-content-item-rule" [ngClass]="{'hand': !readonly}"
-         *ngFor="let constraint of constraintObjects; let i = index">
-      <div class="rule-details" [ngClass]="{'readonly': readonly}">
-        <div class="rule-desc" (click)="!readonly && onSelectFilter(i)" tooltips
-             tooltip="{{constraint.servicePropertyName + ' ' + getSymbol(constraint.constraintOperator) + ' '
-             + (constraint.sourceName ? constraint.sourceName + ':' : '') + constraint.value}}">
-          {{constraint.servicePropertyName + ' ' + getSymbol(constraint.constraintOperator) + ' '
-        + (constraint.sourceName ? constraint.sourceName + ':' : '') + constraint.value}}
+        <div class="w-sdc-designer-sidebar-section-substitution-filter-footer">
+          <button
+                  class="w-sdc-designer-sidebar-section-substitution-filter-footer-action add-rule-btn tlv-btn blue"
+                  data-tests-id="add-rule-button"
+                  (click)="onAddSubstitutionFilter(PROPERTIES)"
+                  [disabled]="readonly">
+            {{'ADD_SUBSTITUTION_FILTER' | translate}}
+          </button>
         </div>
-        <span *ngIf="!readonly" class="sprite-new delete-btn delete-icon"
-              (click)="openDeleteModal(i)" data-tests-id="delete-input-button"></span>
       </div>
-    </div>
-
-    <div *ngIf="!isSubstitutionFilterSet()" class="w-sdc-designer-sidebar-section-footer">
-      <button
-          class="w-sdc-designer-sidebar-section-footer-action tlv-btn blue"
-          data-tests-id="add-rule-button"
-          (click)="onAddSubstitutionFilter()"
-          [disabled]="readonly">
-        {{'ADD_SUBSTITUTION_FILTER' | translate}}
-      </button>
-    </div>
+    </sdc-accordion>
   </div>
 </div>
diff --git a/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.less b/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.less
index cc41c3a69a..f0464774b5 100644
--- a/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.less
@@ -25,8 +25,8 @@
 
 .substitution-filter {
 
-  .i-sdc-designer-sidebar-section-content-item-rules-section {
-    .i-sdc-designer-sidebar-section-content-item-rule {
+  .i-sdc-designer-sidebar-section-content-substitution-filter-section {
+    .i-sdc-designer-sidebar-section-content-substitution-filter {
       border-bottom: 1px solid @main_color_o;
       padding: 5px 10px 5px 18px;
       position: relative;
@@ -65,13 +65,44 @@
 
     }
   }
-  .w-sdc-designer-sidebar-section-footer {
+  .w-sdc-designer-sidebar-section-substitution-filter-footer {
     margin-top: 10px;
+    margin-bottom: 10px;
     text-align: center;
     width: 100%;
   }
-  .w-sdc-designer-sidebar-section-footer-action {
+  .w-sdc-designer-sidebar-section-substitution-filter-footer-action {
     width: 180px;
     margin-top: 10px;
   }
 }
+
+/deep/.sdc-accordion {
+  margin-bottom: 0;
+  display: grid;
+
+  .sdc-accordion-header {
+    background-color: #e6f6fb;
+    border-left: solid #009fdb 4px;
+    box-shadow: 0 0px 3px -1px rgba(0, 0, 0, 0.3);
+    margin-bottom: 2px;
+    width: auto;
+    height: auto;
+    padding: 10px;
+    color: #666666;
+    font-family: OpenSans-Semibold, sans-serif;
+    font-size: 14px;
+  }
+
+  .sdc-accordion-body.open {
+    padding-left: 0;
+    padding-top: 0;
+    .sdc-accordion-header { /*Second level - nested accordion */
+      background-color: #f8f8f8;
+      padding: 4px 20px 4px 37px;
+      border-bottom: 1px solid #d2d2d2;
+      border-left:none;
+      height: 30px;
+    }
+  }
+}
diff --git a/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.ts b/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.ts
index a0fa2bb20b..aade8d8b73 100644
--- a/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.ts
@@ -28,11 +28,11 @@ import {
 import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component';
 import {ServiceDependenciesEditorComponent} from 'app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component';
 import {ModalService} from 'app/ng2/services/modal.service';
-import {ComponentGenericResponse} from 'app/ng2/services/responses/component-generic-response';
 import {TranslateService} from 'app/ng2/shared/translator/translate.service';
 import {ComponentMetadata} from '../../../../models/component-metadata';
 import {ServiceInstanceObject} from '../../../../models/service-instance-properties-and-interfaces';
 import {TopologyTemplateService} from '../../../services/component-services/topology-template.service';
+import {ToscaFilterConstraintType} from "../../../../models/tosca-filter-constraint-type.enum";
 
 export class ConstraintObject {
   servicePropertyName: string;
@@ -114,7 +114,8 @@ export class SubstitutionFilterComponent {
   isLoading: boolean;
   parentServiceInputs: InputBEModel[] = [];
   operatorTypes: any[];
-  constraintObjects: ConstraintObject[] = [];
+  constraintProperties: ConstraintObject[] = [];
+  PROPERTIES: string = ToscaFilterConstraintType.PROPERTIES;
 
   @Input() readonly: boolean;
   @Input() compositeService: ComponentMetadata;
@@ -122,6 +123,7 @@ export class SubstitutionFilterComponent {
   @Input() selectedInstanceSiblings: ServiceInstanceObject[];
   @Input() selectedInstanceConstraints: ConstraintObject[] = [];
   @Input() selectedInstanceProperties: PropertyBEModel[] = [];
+  @Output() updateSubstitutionFilterProperties: EventEmitter<ConstraintObject[]> = new EventEmitter<ConstraintObject[]>();
   @Output() updateConstraintListEvent: EventEmitter<ConstraintObject[]> = new EventEmitter<ConstraintObject[]>();
   @Output() loadConstraintListEvent: EventEmitter<any> = new EventEmitter();
   @Output() hasSubstitutionFilter = new EventEmitter<boolean>();
@@ -136,34 +138,35 @@ export class SubstitutionFilterComponent {
       {label: '<', value: OPERATOR_TYPES.LESS_THAN},
       {label: '=', value: OPERATOR_TYPES.EQUAL}
     ];
-    this.topologyTemplateService.getComponentInputsWithProperties(this.compositeService.componentType, this.compositeService.uniqueId).subscribe((result: ComponentGenericResponse) => {
-      this.parentServiceInputs = result.inputs;
-    });
-    this.loadAllInstances();
+    this.loadSubstitutionFilter();
     this.translateService.languageChangedObservable.subscribe((lang) => {
       I18nTexts.translateTexts(this.translateService);
     });
   }
 
   ngOnChanges(changes) {
-    if (changes.currentServiceInstance) {
-      this.currentServiceInstance = changes.currentServiceInstance.currentValue;
+    if (changes.compositeService) {
+      this.compositeService = changes.compositeService.currentValue;
     }
     if (changes.selectedInstanceConstraints && changes.selectedInstanceConstraints.currentValue !== changes.selectedInstanceConstraints.previousValue) {
       this.selectedInstanceConstraints = changes.selectedInstanceConstraints.currentValue;
-      this.loadAllInstances();
+      this.loadSubstitutionFilter();
     }
   }
 
-  public loadAllInstances = (): void => {
-    this.topologyTemplateService.getComponentCompositionData(this.compositeService.uniqueId, this.compositeService.componentType).subscribe((response) => {
-      response.componentInstances.forEach(componentInstance => this.getSubstitutionFilter(componentInstance))
-    })
+  private loadSubstitutionFilter = (): void => {
+    this.topologyTemplateService.getSubstitutionFilterConstraints(this.compositeService.componentType, this.compositeService.uniqueId)
+    .subscribe((response) => {
+      if (response.substitutionFilterForTopologyTemplate && response.substitutionFilterForTopologyTemplate[this.compositeService.uniqueId]) {
+             this.constraintProperties = response.
+                 substitutionFilterForTopologyTemplate[this.compositeService.uniqueId].properties;
+      }
+    });
   }
 
-  onAddSubstitutionFilter() {
+  onAddSubstitutionFilter = (constraintType: string) => {
     const cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'outline white', this.modalServiceNg2.closeCurrentModal);
-    const saveButton: ButtonModel = new ButtonModel(I18nTexts.modalCreate, 'blue', this.createSubstitutionFilter, this.getDisabled);
+    const saveButton: ButtonModel = new ButtonModel(I18nTexts.modalCreate, 'blue', () => this.createSubstitutionFilter(constraintType), this.getDisabled);
     const modalModel: ModalModel = new ModalModel('l', I18nTexts.addSubstitutionFilterTxt, '', [saveButton, cancelButton], 'standard');
     this.modalInstance = this.modalServiceNg2.createCustomModal(modalModel);
     this.modalServiceNg2.addDynamicContentToModal(
@@ -181,27 +184,27 @@ export class SubstitutionFilterComponent {
     this.modalInstance.instance.open();
   }
 
-  createSubstitutionFilter = (): void => {
+  createSubstitutionFilter = (constraintType: string) => {
     const newSubstitutionFilter: ConstraintObject = new ConstraintObject(this.modalInstance.instance.dynamicContent.instance.currentRule);
     this.isLoading = true;
     this.topologyTemplateService.createSubstitutionFilterConstraints(
         this.compositeService.uniqueId,
-        this.currentServiceInstance.uniqueId,
         newSubstitutionFilter,
-        this.compositeService.componentType
+        this.compositeService.componentType,
+        constraintType
     ).subscribe((response) => {
-      this.updateConstraintListEvent.emit(response.properties);
+      this.emitEventOnChanges(constraintType, response);
       this.isLoading = false;
-    }, () => {
+    }, (err) => {
       console.error("Failed to Create Substitution Filter on the component with id: ", this.compositeService.uniqueId);
       this.isLoading = false;
     });
     this.modalServiceNg2.closeCurrentModal();
   }
 
-  onSelectFilter(index: number) {
+  onSelectSubstitutionFilter(constraintType: string, index: number) {
     const cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'outline white', this.modalServiceNg2.closeCurrentModal);
-    const updateButton: ButtonModel = new ButtonModel(I18nTexts.modalSave, 'blue', () => this.updateSubstitutionFilter(), this.getDisabled);
+    const updateButton: ButtonModel = new ButtonModel(I18nTexts.modalSave, 'blue', () => this.updateSubstitutionFilter(constraintType), this.getDisabled);
     const modalModel: ModalModel = new ModalModel('l', I18nTexts.updateSubstitutionFilterTxt, '', [updateButton, cancelButton], 'standard');
     this.modalInstance = this.modalServiceNg2.createCustomModal(modalModel);
     this.modalServiceNg2.addDynamicContentToModal(
@@ -209,7 +212,7 @@ export class SubstitutionFilterComponent {
         ServiceDependenciesEditorComponent,
         {
           serviceRuleIndex: index,
-          serviceRules: _.map(this.constraintObjects, (constraint) => new ConstraintObjectUI(constraint)),
+          serviceRules: _.map(this.constraintProperties, (constraint) => new ConstraintObjectUI(constraint)),
           currentServiceName: this.currentServiceInstance.name,
           operatorTypes: this.operatorTypes,
           compositeServiceName: this.compositeService.name,
@@ -221,17 +224,16 @@ export class SubstitutionFilterComponent {
     this.modalInstance.instance.open();
   }
 
-  updateSubstitutionFilter = (): void => {
-    const constraintToUpdate: ConstraintObject = this.modalInstance.instance.dynamicContent.instance.serviceRulesList.map((rule) => new ConstraintObject(rule));
+  updateSubstitutionFilter = (constraintType: string): void => {
+    const constraintToUpdate: ConstraintObject[] = this.modalInstance.instance.dynamicContent.instance.serviceRulesList.map((rule) => new ConstraintObject(rule));
     this.isLoading = true;
     this.topologyTemplateService.updateSubstitutionFilterConstraints(
         this.compositeService.uniqueId,
-        this.currentServiceInstance.uniqueId,
         constraintToUpdate,
-        this.compositeService.componentType
+        this.compositeService.componentType,
+        constraintType
     ).subscribe((response) => {
-      this.hasSubstitutionFilter.emit(this.isSubstitutionFilterSet());
-      this.updateConstraintListEvent.emit(response.properties);
+      this.emitEventOnChanges(constraintType, response);
       this.isLoading = false;
     }, () => {
       console.error("Failed to Update Substitution Filter on the component with id: ", this.compositeService.uniqueId);
@@ -240,22 +242,21 @@ export class SubstitutionFilterComponent {
     this.modalServiceNg2.closeCurrentModal();
   }
 
-  onDeleteSubstitutionFilter = (index: number) => {
+  onDeleteSubstitutionFilter = (constraintType: string, index: number) => {
     this.isLoading = true;
     this.topologyTemplateService.deleteSubstitutionFilterConstraints(
         this.compositeService.uniqueId,
-        this.currentServiceInstance.uniqueId,
         index,
-        this.compositeService.componentType
+        this.compositeService.componentType,
+        constraintType
     ).subscribe((response) => {
-      console.log("on Delete - Response Properties: ", response.properties);
-      this.updateConstraintListEvent.emit(response.properties);
+      this.emitEventOnChanges(constraintType, response);
       this.isLoading = false;
-    }, () => {
-      console.error("Failed to Delete Substitution Filter on the component with id: ", this.compositeService.uniqueId);
+    }, (error) => {
+      console.error("Failed to Delete Substitution Filter on the component with id: ",
+          this.compositeService.uniqueId, error);
       this.isLoading = false;
     });
-    this.constraintObjects = [];
     this.modalServiceNg2.closeCurrentModal();
   }
 
@@ -274,23 +275,15 @@ export class SubstitutionFilterComponent {
     }
   }
 
-  openDeleteModal = (index: number) => {
+  openDeleteModal = (constraintType: string, index: number) => {
     this.modalServiceNg2.createActionModal(I18nTexts.deleteSubstitutionFilterTxt, I18nTexts.deleteSubstitutionFilterMsg,
-        I18nTexts.modalDelete, () => this.onDeleteSubstitutionFilter(index), I18nTexts.modalCancel).instance.open();
+        I18nTexts.modalDelete, () => this.onDeleteSubstitutionFilter(constraintType, index), I18nTexts.modalCancel).instance.open();
   }
 
-  private getSubstitutionFilter = (componentInstance: ComponentInstance): void => {
-    this.topologyTemplateService.getSubstitutionFilterConstraints(this.compositeService.componentType, this.compositeService.uniqueId).subscribe((response) => {
-      const substitutionFilter: ConstraintObject[] = response.substitutionFilterForTopologyTemplate[componentInstance.uniqueId].properties;
-      if (substitutionFilter) {
-        this.currentServiceInstance = componentInstance;
-        this.constraintObjects = substitutionFilter;
+  private emitEventOnChanges(constraintType: string, response) {
+      if (ToscaFilterConstraintType.PROPERTIES === constraintType) {
+              this.updateSubstitutionFilterProperties.emit(response.properties);
+              this.constraintProperties = response.properties;
       }
-    });
-  }
-
-  private isSubstitutionFilterSet = (): boolean => {
-    return Array.isArray(this.constraintObjects) && this.constraintObjects.length > 0;
   }
-
 }
diff --git a/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.module.ts b/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.module.ts
index 9ea7c0c5a0..34648f0931 100644
--- a/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.module.ts
+++ b/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.module.ts
@@ -22,6 +22,7 @@ import { NgModule } from '@angular/core';
 import { UiElementsModule } from 'app/ng2/components/ui/ui-elements.module';
 import { TranslateModule } from 'app/ng2/shared/translator/translate.module';
 import { SubstitutionFilterComponent } from "./substitution-filter.component";
+import {AccordionModule} from "onap-ui-angular/dist/accordion/accordion.module";
 
 @NgModule({
     declarations: [
@@ -30,7 +31,8 @@ import { SubstitutionFilterComponent } from "./substitution-filter.component";
     imports: [
         CommonModule,
         UiElementsModule,
-        TranslateModule
+        TranslateModule,
+        AccordionModule
     ],
     exports: [
         SubstitutionFilterComponent
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.spec.ts b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.spec.ts
index 305086e8f3..75fab9abe7 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.spec.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.spec.ts
@@ -108,7 +108,7 @@ describe('composition-panel component', () => {
         fixture.componentInstance.ngOnInit();
 
         // Expect that
-        expect (fixture.componentInstance.tabs.length).toBe(5);
+        expect (fixture.componentInstance.tabs.length).toBe(6);
         expect (fixture.componentInstance.tabs[0]).toEqual(tabs.infoTab);
         expect (fixture.componentInstance.tabs[1]).toEqual(tabs.deploymentArtifacts);
         expect (fixture.componentInstance.tabs[2]).toEqual(tabs.inputs);
@@ -157,7 +157,7 @@ describe('composition-panel component', () => {
         fixture.componentInstance.ngOnInit();
 
         // Expect that
-        expect (fixture.componentInstance.tabs.length).toBe(6);
+        expect (fixture.componentInstance.tabs.length).toBe(5);
         expect (fixture.componentInstance.tabs[0]).toEqual(tabs.infoTab);
         expect (fixture.componentInstance.tabs[1]).toEqual(tabs.properties);
         expect (fixture.componentInstance.tabs[2]).toEqual(tabs.reqAndCapabilities);
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.ts
index 89634ef000..53c569be11 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.ts
@@ -142,11 +142,11 @@ export class CompositionPanelComponent {
 
         if (component.isService() && !this.selectedComponentIsServiceProxyInstance() && !this.selectedComponentIsServiceSubstitutionInstance()) {
             this.tabs.push(tabs.apiArtifacts);
+            this.tabs.push(tabs.substitutionFilter);
         }
         if (component.isService() && (this.selectedComponentIsServiceProxyInstance() || this.selectedComponentIsServiceSubstitutionInstance())) {
             this.tabs.push(tabs.consumption);
             this.tabs.push(tabs.dependencies);
-            this.tabs.push(tabs.substitutionFilter)
         } else if (component.isResource() && this.selectedComponentIsVfcInstance()) {
             this.tabs.push(tabs.dependencies);
         }
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/substitution-filter-tab/substitution-filter-tab.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/substitution-filter-tab/substitution-filter-tab.component.html
index d0656959f8..c8845deece 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/substitution-filter-tab/substitution-filter-tab.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/substitution-filter-tab/substitution-filter-tab.component.html
@@ -20,19 +20,15 @@
 
 <ng2-expand-collapse state="0">
     <header sdc-tooltip tooltip-text="{{input.title}}">{{input.title}}</header>
-    <content>
-        <div *ngIf="isComponentInstanceSelected">
-                <substitution-filter
-                    [compositeService]="metaData"
-                    [currentServiceInstance]="component"
-                    [selectedInstanceProperties]="selectedInstanceProperties"
-                    [selectedInstanceSiblings]="selectedInstanceSiblings"
-                    [selectedInstanceConstraints]="selectedInstanceConstraints"
-                    [readonly]="isViewOnly"
-                    (hasSubstitutionFilter)="notifyDependencyEventsObserver($event)"
-                    (updateConstraintListEvent)="updateSelectedInstanceConstraints($event)"
-                    (loadConstraintListEvent)="loadConstraints()">
-                </substitution-filter>
-        </div>
-    </content>
+    <substitution-filter
+            [compositeService]="metaData"
+            [currentServiceInstance]="component"
+            [selectedInstanceProperties]="selectedInstanceProperties"
+            [selectedInstanceSiblings]="selectedInstanceSiblings"
+            [selectedInstanceConstraints]="selectedInstanceConstraints"
+            [readonly]="isViewOnly"
+            (hasSubstitutionFilter)="notifyDependencyEventsObserver($event)"
+            (updateConstraintListEvent)="updateSelectedInstanceConstraints($event)"
+            (loadConstraintListEvent)="loadConstraints()">
+    </substitution-filter>
 </ng2-expand-collapse>
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/substitution-filter-tab/substitution-filter-tab.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/substitution-filter-tab/substitution-filter-tab.component.ts
index 20868e388b..2b5648c27f 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/substitution-filter-tab/substitution-filter-tab.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/substitution-filter-tab/substitution-filter-tab.component.ts
@@ -20,14 +20,8 @@
 import { Component, Input } from '@angular/core';
 import { Store } from '@ngxs/store';
 import {
-    CapabilitiesGroup,
-    Capability,
     Component as TopologyTemplate,
-    ComponentInstance,
     FullComponentInstance,
-    InputBEModel,
-    InputsGroup,
-    InterfaceModel,
     PropertiesGroup,
     PropertyBEModel,
 } from 'app/models';
@@ -73,8 +67,6 @@ export class SubstitutionFilterTabComponent {
         this.metaData = this.workspaceService.metadata;
         this.isComponentInstanceSelected = this.componentType === SelectedComponentType.COMPONENT_INSTANCE;
         this.initInstancesWithProperties();
-        this.loadConstraints();
-        this.initInstancesWithProperties();
     }
 
     public loadConstraints = (): void => {
@@ -93,13 +85,12 @@ export class SubstitutionFilterTabComponent {
     }
 
     private initInstancesWithProperties = (): void => {
-        this.topologyTemplateService.getComponentInstanceProperties(this.metaData.componentType, this.metaData.uniqueId).subscribe((genericResponse: ComponentGenericResponse) => {
-            this.componentInstanceProperties = genericResponse.componentInstancesProperties;
+        this.topologyTemplateService.getComponentPropertiesSubstitutionFilter(this.metaData.componentType, this.metaData.uniqueId).subscribe((genericResponse: ComponentGenericResponse) => {
+            this.selectedInstanceProperties = genericResponse.properties;
             this.updateInstanceAttributes();
         });
     }
 
-
     private updateInstanceAttributes = (): void => {
         if (this.isComponentInstanceSelected && this.componentInstanceProperties) {
             const instancesMappedList = this.compositionService.componentInstances.map((coInstance) => new ServiceInstanceObject({
diff --git a/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts b/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts
index 01b8ead595..1933b3dba8 100644
--- a/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts
+++ b/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts
@@ -401,16 +401,20 @@ export class TopologyTemplateService {
         return this.http.delete<any>(this.baseUrl + this.getServerTypeUrl(componentType) + componentMetaDataId + '/resourceInstances/' + componentInstanceId + '/nodeFilter/' + constraintType + "/" + constraintIndex)
     }
 
-    createSubstitutionFilterConstraints(componentMetaDataId: string, componentInstanceId: string, constraint: ConstraintObject, componentType: string): Observable<any> {
-        return this.http.post<any>(this.baseUrl + this.getServerTypeUrl(componentType) + componentMetaDataId + '/resourceInstances/' + componentInstanceId + '/substitutionFilter', constraint);
+    getComponentPropertiesSubstitutionFilter(componentType: string, componentId: string): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(componentType, componentId, [COMPONENT_FIELDS.COMPONENT_PROPERTIES]);
     }
 
-    updateSubstitutionFilterConstraints(componentMetaDataId: string, componentInstanceId: string, constraint: ConstraintObject, componentType: string): Observable<any> {
-        return this.http.put<any>(this.baseUrl + this.getServerTypeUrl(componentType) + componentMetaDataId + '/resourceInstances/' + componentInstanceId + '/substitutionFilter', constraint);
+    createSubstitutionFilterConstraints(componentMetaDataId: string, constraint: ConstraintObject, componentType: string, constraintType: string): Observable<any> {
+        return this.http.post<any>(this.baseUrl + this.getServerTypeUrl(componentType) + componentMetaDataId + '/substitutionFilter/' + constraintType, constraint);
     }
 
-    deleteSubstitutionFilterConstraints(componentMetaDataId: string, componentInstanceId: string, constraintIndex: number, componentType: string): Observable<any>{
-        return this.http.delete<any>(this.baseUrl + this.getServerTypeUrl(componentType) + componentMetaDataId + '/resourceInstances/' + componentInstanceId + '/substitutionFilter/' + constraintIndex)
+    updateSubstitutionFilterConstraints(componentMetaDataId: string, constraint: ConstraintObject[], componentType: string, constraintType: string): Observable<any>{
+        return this.http.put<any>(this.baseUrl + this.getServerTypeUrl(componentType) + componentMetaDataId + '/substitutionFilter/' + constraintType, constraint);
+    }
+
+    deleteSubstitutionFilterConstraints(componentMetaDataId: string, constraintIndex: number, componentType: string, constraintType: string): Observable<any>{
+        return this.http.delete<any>(this.baseUrl + this.getServerTypeUrl(componentType) + componentMetaDataId + '/substitutionFilter/' + constraintType + "/" + constraintIndex)
     }
 
     deletePolicy(component: Component, policy: PolicyInstance): Observable<PolicyInstance> {