Retrieve node_filter capabilities

Issue-ID: SDC-3270
Signed-off-by: aribeiro <anderson.ribeiro@est.tech>
Change-Id: Ieb1b3c4d31a50e73112fc34cdd8d5fd9ba9e6a30

5 files changed, 163 insertions, 92 deletions

diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.html b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.html
index 4238a4e96f..c3d4817a39 100644
--- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.html
@@ -1,6 +1,6 @@
 <div class="service-dependencies">
   <loader [display]="isLoading" [size]="'medium'" [relative]="true"></loader>
-  <div *ngIf="!isDependent"  class="checkbox-label-mark-as-dependent">
+  <div *ngIf="!isDependent" class="checkbox-label-mark-as-dependent">
     <select name="singleSelect" id="singleSelect" ng-model="data.singleSelect"
             (change)='onOptionsSelected($event)'>
       <option>Select Directive</option>
@@ -11,34 +11,77 @@
   <div *ngIf="isDependent" class="checkbox-label-mark-as-dependent">
     <label class="i-sdc-form-label">Directive: {{getActualDirectiveValue().toUpperCase()}}</label>
     <span class="sprite-new delete-btn delete-icon"
-         (click)="onRemoveDirective()" data-tests-id="delete-input-button">
+          (click)="onRemoveDirective()" data-tests-id="delete-input-button">
     </span>
   </div>
 
-  <div class="i-sdc-designer-sidebar-section-content-item-rules-section" *ngIf="isDependent">
+  <div *ngIf="isDependent">
+    <div class="w-sdc-designer-sidebar-section">
+      <sdc-accordion [title]="'Node Filter Capabilities'" [arrow-direction]="'right'" [open]="true">
+        <div class="i-sdc-designer-sidebar-section-content-node-filter-section">
 
-    <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 && onSelectRule(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="i-sdc-designer-sidebar-section-content-node-filter"
+               [ngClass]="{'hand': !readonly}"
+               *ngFor="let capability of constraintCapabilities; let i = index">
+            <div class="filter-details" [ngClass]="{'readonly': readonly}">
+              <div class="filter-desc" (click)="!readonly && onSelectNodeFilter(capabilities, i)"
+                   tooltips
+                   tooltip="{{capability.servicePropertyName + ' ' + getSymbol(capability.constraintOperator) + ' '
+             + (capability.sourceName ? capability.sourceName + ':' : '') + capability.value}}">
+                {{capability.servicePropertyName + ' ' + getSymbol(capability.constraintOperator)
+              + ' '
+              + (capability.sourceName ? capability.sourceName + ':' : '') + capability.value}}
+              </div>
+              <span *ngIf="!readonly" class="sprite-new delete-btn delete-icon"
+                    (click)="openDeleteModal(capabilities, i)"
+                    data-tests-id="delete-input-button"></span>
+            </div>
+          </div>
+
+          <div class="w-sdc-designer-sidebar-section-node-filter-footer">
+            <button
+                class="w-sdc-designer-sidebar-section-node-filter-footer-action add-rule-btn tlv-btn blue"
+                data-tests-id="add-rule-button"
+                (click)="onAddNodeFilter(capabilities)"
+                [disabled]="readonly">
+              {{'DIRECTIVES_AND_NODE_FILTER_ADD_NODE_FILTER' | translate}}
+            </button>
+          </div>
         </div>
-        <span *ngIf="!readonly" class="sprite-new delete-btn delete-icon"
-              (click)="openDeleteModal(i)" data-tests-id="delete-input-button"></span>
-      </div>
-    </div>
+      </sdc-accordion>
+
+      <sdc-accordion [title]="'Node Filter Properties'" [arrow-direction]="'right'" [open]="true">
+        <div class="i-sdc-designer-sidebar-section-content-node-filter-section">
 
-    <div class="w-sdc-designer-sidebar-section-footer">
-      <button
-          class="w-sdc-designer-sidebar-section-footer-action add-rule-btn tlv-btn blue"
-          data-tests-id="add-rule-button"
-          (click)="onAddRule()"
-          [disabled]="readonly">
-        {{'DIRECTIVES_AND_NODE_FILTER_ADD_NODE_FILTER' | translate}}
-      </button>
+          <div class="i-sdc-designer-sidebar-section-content-node-filter"
+               [ngClass]="{'hand': !readonly}"
+               *ngFor="let property of constraintProperties; let i = index">
+            <div class="filter-details" [ngClass]="{'readonly': readonly}">
+              <div class="filter-desc" (click)="!readonly && onSelectNodeFilter(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="w-sdc-designer-sidebar-section-node-filter-footer">
+            <button
+                class="w-sdc-designer-sidebar-section-node-filter-footer-action add-rule-btn tlv-btn blue"
+                data-tests-id="add-rule-button"
+                (click)="onAddNodeFilter(properties)"
+                [disabled]="readonly">
+              {{'DIRECTIVES_AND_NODE_FILTER_ADD_NODE_FILTER' | translate}}
+            </button>
+          </div>
+        </div>
+      </sdc-accordion>
     </div>
   </div>
 </div>
diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less
index 21c2b3aadc..00be76c8ca 100644
--- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less
@@ -32,9 +32,8 @@
     }
   }
 
-
-  .i-sdc-designer-sidebar-section-content-item-rules-section {
-    .i-sdc-designer-sidebar-section-content-item-rule {
+  .i-sdc-designer-sidebar-section-content-node-filter-section {
+    .i-sdc-designer-sidebar-section-content-node-filter {
       border-bottom: 1px solid @main_color_o;
       padding: 5px 10px 5px 18px;
       position: relative;
@@ -43,7 +42,7 @@
       align-items: center;
       justify-content: space-between;
 
-      .rule-details {
+      .filter-details {
         // .s_1;
         display: flex;
         flex: 1;
@@ -64,7 +63,7 @@
           opacity: 0.5;
         }
       }
-      .rule-desc {
+      .filter-desc {
         .sdc-ellipsis;
         width: 220px;
         position: relative;
@@ -73,13 +72,44 @@
 
     }
   }
-  .w-sdc-designer-sidebar-section-footer {
+  .w-sdc-designer-sidebar-section-node-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-node-filter-footer-action {
     width: 180px;
     margin-top: 10px;
   }
-}
\ No newline at end of file
+}
+
+/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/service-dependencies/service-dependencies.component.ts b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts
index 55c933c38d..90f82f8983 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
@@ -123,8 +123,12 @@ export class ServiceDependenciesComponent {
     isDependent: boolean;
     isLoading: boolean;
     parentServiceInputs: InputBEModel[] = [];
-    constraintObjects: ConstraintObject[] = [];
+    constraintProperties: ConstraintObject[] = [];
+    constraintCapabilities: ConstraintObject[] = [];
     operatorTypes: any[];
+    capabilities: string = 'capabilities';
+    properties: string = 'properties';
+    private componentInstancesConstraints: ConstraintObject[] = [];
 
     @Input() readonly: boolean;
     @Input() compositeService: ComponentMetadata;
@@ -133,7 +137,8 @@ export class ServiceDependenciesComponent {
     @Input() selectedInstanceConstraints: ConstraintObject[] = [];
     @Input() selectedInstanceProperties: PropertyBEModel[] = [];
     @Input() directiveValues: any = DirectiveValue;
-    @Output() updateRulesListEvent: EventEmitter<ConstraintObject[]> = new EventEmitter<ConstraintObject[]>();
+    @Output() updateNodeFilterProperties: EventEmitter<ConstraintObject[]> = new EventEmitter<ConstraintObject[]>();
+    @Output() updateNodeFilterCapabilities: EventEmitter<ConstraintObject[]> = new EventEmitter<ConstraintObject[]>();
     @Output() loadRulesListEvent:EventEmitter<any> = new EventEmitter();
     @Output() dependencyStatus = new EventEmitter<boolean>();
 
@@ -175,6 +180,7 @@ export class ServiceDependenciesComponent {
         const cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'grey', this.onCloseRemoveDependencyModal);
         const modalModel: ModalModel = new ModalModel('sm', I18nTexts.removeDirectiveModalTitle,
             I18nTexts.removeDirectiveModalText, [actionButton, cancelButton]);
+        this.loadNodeFilter();
         return this.modalServiceNg2.createCustomModal(modalModel);
     }
 
@@ -188,11 +194,12 @@ export class ServiceDependenciesComponent {
 
     private loadNodeFilter = (): void => {
         this.topologyTemplateService.getServiceFilterConstraints(this.compositeService.componentType, this.compositeService.uniqueId).subscribe((response) => {
-            if (response.nodeFilterforNode) {
-                const nodeFilterResponse: ConstraintObject[] = response.nodeFilterforNode[this.currentServiceInstance.uniqueId].properties;
-                if (nodeFilterResponse) {
-                    this.constraintObjects = nodeFilterResponse;
-                }
+            if (response.nodeFilterforNode && response.nodeFilterforNode[this.currentServiceInstance.uniqueId]) {
+                this.componentInstancesConstraints = response.nodeFilterforNode;
+                const nodeFilterPropertiesResponse: ConstraintObject[] = response.nodeFilterforNode[this.currentServiceInstance.uniqueId].properties;
+                this.constraintProperties = nodeFilterPropertiesResponse;
+                const nodeFilterCapabilitiesResponse: ConstraintObject[] = response.nodeFilterforNode[this.currentServiceInstance.uniqueId].capabilities;
+                this.constraintCapabilities = nodeFilterCapabilitiesResponse;
             }
         });
     }
@@ -201,7 +208,7 @@ export class ServiceDependenciesComponent {
         this.modalServiceNg2.closeCurrentModal();
         this.isLoading = true;
         const isDepOrig = this.isDependent;
-        const rulesListOrig = this.constraintObjects;
+        const rulesListOrig = this.componentInstancesConstraints;
         this.currentServiceInstance.unmarkAsDependent(this.getActualDirectiveValue());
         this.updateComponentInstance(isDepOrig, rulesListOrig);
     }
@@ -214,16 +221,18 @@ export class ServiceDependenciesComponent {
     onOptionsSelected(event: any) {
         const newDirectiveValue = event.target.value;
         if (newDirectiveValue.toLowerCase() !== this.getActualDirectiveValue()) {
-            const rulesListOrig = this.constraintObjects;
+            const rulesListOrig = this.componentInstancesConstraints;
             this.setDirectiveValue(newDirectiveValue);
-            this.constraintObjects = [];
+            this.constraintProperties = [];
+            this.constraintCapabilities = [];
             this.updateComponentInstance(this.isDependent, rulesListOrig);
         }
     }
 
     private onRemoveDirective() {
         this.openRemoveDependencyModal().instance.open();
-        this.constraintObjects = [];
+        this.constraintProperties = [];
+        this.constraintCapabilities = [];
     }
 
     private setDirectiveValue(newDirectiveValue: string) {
@@ -253,15 +262,16 @@ export class ServiceDependenciesComponent {
             this.isLoading = false;
         }, (err) => {
             this.isDependent = isDependentOrigVal;
-            this.constraintObjects = rulesListOrig;
+            this.componentInstancesConstraints = rulesListOrig;
             this.isLoading = false;
             console.log('An error has occurred.');
         });
     }
 
-    onAddRule() {
+    onAddNodeFilter = (constraintType: string) => {
+        console.info("constraintType: ", constraintType);
         const cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'outline white', this.modalServiceNg2.closeCurrentModal);
-        const saveButton: ButtonModel = new ButtonModel(I18nTexts.modalCreate, 'blue', this.createRule, this.getDisabled);
+        const saveButton: ButtonModel = new ButtonModel(I18nTexts.modalCreate, 'blue', () => this.createNodeFilter(constraintType), this.getDisabled);
         const modalModel: ModalModel = new ModalModel('l', I18nTexts.addNodeFilterTxt, '', [saveButton, cancelButton], 'standard');
         this.modalInstance = this.modalServiceNg2.createCustomModal(modalModel);
         this.modalServiceNg2.addDynamicContentToModal(
@@ -279,9 +289,9 @@ export class ServiceDependenciesComponent {
         this.modalInstance.instance.open();
     }
 
-    onSelectRule(index: number) {
+    onSelectNodeFilter(constraintType: string, index: number) {
         const cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'outline white', this.modalServiceNg2.closeCurrentModal);
-        const saveButton: ButtonModel = new ButtonModel(I18nTexts.modalSave, 'blue', () => this.updateRules(), this.getDisabled);
+        const saveButton: ButtonModel = new ButtonModel(I18nTexts.modalSave, 'blue', () => this.updateNodeFilter(constraintType), this.getDisabled);
         const modalModel: ModalModel = new ModalModel('l', I18nTexts.updateNodeFilterTxt, '', [saveButton, cancelButton], 'standard');
         this.modalInstance = this.modalServiceNg2.createCustomModal(modalModel);
         this.modalServiceNg2.addDynamicContentToModal(
@@ -289,7 +299,8 @@ export class ServiceDependenciesComponent {
             ServiceDependenciesEditorComponent,
             {
                 serviceRuleIndex: index,
-                serviceRules: _.map(this.constraintObjects, (rule) => new ConstraintObjectUI(rule)),
+                serviceRules: _.map(this.properties == constraintType ? this.constraintProperties :
+                    this.constraintCapabilities, (rule) => new ConstraintObjectUI(rule)),
                 currentServiceName: this.currentServiceInstance.name,
                 operatorTypes: this.operatorTypes,
                 compositeServiceName: this.compositeService.name,
@@ -305,16 +316,17 @@ export class ServiceDependenciesComponent {
         return !this.modalInstance.instance.dynamicContent.instance.checkFormValidForSubmit();
     }
 
-    createRule  = (): void => {
+    createNodeFilter = (constraintType: string) => {
         const newRuleToCreate: ConstraintObject = new ConstraintObject(this.modalInstance.instance.dynamicContent.instance.currentRule);
         this.isLoading = true;
         this.topologyTemplateService.createServiceFilterConstraints(
             this.compositeService.uniqueId,
             this.currentServiceInstance.uniqueId,
             newRuleToCreate,
-            this.compositeService.componentType
+            this.compositeService.componentType,
+            constraintType
         ).subscribe( (response) => {
-            this.updateRulesListEvent.emit(response.properties);
+            this.emitEventOnChanges(constraintType, response);
             this.isLoading = false;
         }, (err) => {
             this.isLoading = false;
@@ -322,16 +334,17 @@ export class ServiceDependenciesComponent {
         this.modalServiceNg2.closeCurrentModal();
     }
 
-    updateRules = (): void => {
+    updateNodeFilter = (constraintType: string) => {
         const allRulesToUpdate: ConstraintObject[] = this.modalInstance.instance.dynamicContent.instance.serviceRulesList.map((rule) => new ConstraintObject(rule));
         this.isLoading = true;
         this.topologyTemplateService.updateServiceFilterConstraints(
             this.compositeService.uniqueId,
             this.currentServiceInstance.uniqueId,
             allRulesToUpdate,
-            this.compositeService.componentType
+            this.compositeService.componentType,
+            constraintType
         ).subscribe((response) => {
-            this.updateRulesListEvent.emit(response.properties);
+            this.emitEventOnChanges(constraintType, response);
             this.isLoading = false;
         }, (err) => {
             this.isLoading = false;
@@ -347,15 +360,16 @@ export class ServiceDependenciesComponent {
         }
     }
 
-    onDeleteRule = (index: number) => {
+    onDeleteNodeFilter = (constraintType: string, index: number) => {
         this.isLoading = true;
         this.topologyTemplateService.deleteServiceFilterConstraints(
             this.compositeService.uniqueId,
             this.currentServiceInstance.uniqueId,
             index,
-            this.compositeService.componentType
+            this.compositeService.componentType,
+            constraintType
         ).subscribe( (response) => {
-            this.updateRulesListEvent.emit(response.properties);
+            this.emitEventOnChanges(constraintType, response);
             this.isLoading = false;
         }, (err) => {
             this.isLoading = false;
@@ -363,9 +377,19 @@ export class ServiceDependenciesComponent {
         this.modalServiceNg2.closeCurrentModal();
     }
 
-    openDeleteModal = (index: number) => {
+    private emitEventOnChanges(constraintType: string, response) {
+        if (this.properties === constraintType) {
+            this.updateNodeFilterProperties.emit(response.properties);
+            this.constraintProperties = response.properties;
+        } else {
+            this.updateNodeFilterCapabilities.emit(response.capabilities);
+            this.constraintCapabilities = response.capabilities;
+        }
+    }
+
+    openDeleteModal = (constraintType: string, index: number) => {
         this.modalServiceNg2.createActionModal(I18nTexts.deleteNodeFilterTxt, I18nTexts.deleteNodeFilterMsg,
-            I18nTexts.modalDelete, () => this.onDeleteRule(index), I18nTexts.modalCancel).instance.open();
+            I18nTexts.modalDelete, () => this.onDeleteNodeFilter(constraintType, index), I18nTexts.modalCancel).instance.open();
     }
 
 }
diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts
index 10cd141a87..bb98f57d5c 100644
--- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts
+++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts
@@ -3,16 +3,18 @@ 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 { ServiceDependenciesComponent } from './service-dependencies.component';
+import {AccordionModule} from "onap-ui-angular/dist/accordion/accordion.module";
 
 @NgModule({
     declarations: [
         ServiceDependenciesComponent
     ],
-    imports: [
-        CommonModule,
-        UiElementsModule,
-        TranslateModule
-    ],
+  imports: [
+    CommonModule,
+    UiElementsModule,
+    TranslateModule,
+    AccordionModule
+  ],
     exports: [
         ServiceDependenciesComponent
     ],
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 2d9b2646af..cc41c3a69a 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,34 +25,6 @@
 
 .substitution-filter {
 
-  /deep/ .checkbox-label-mark-as-dependent {
-    padding: 7px 18px;
-    position: relative;
-    height: 61px;
-    color: @main_color_a;
-    box-shadow: 0 2px 7px @main_color_o;
-    border-bottom: 1px solid @main_color_o;
-    .checkbox-label {
-      margin-top: 14px;
-      .checkbox-label-content {
-        font-size: 14px;
-      }
-    }
-    .checkbox-container input[type=checkbox].checkbox-hidden[disabled] ~ .checkbox-label-content {
-      opacity: 0.5;
-    }
-    .delete-btn {
-      background-position: -137px -415px;
-      width: 24px;
-      height: 24px
-    }
-
-    loader {
-      top: 20px;
-    }
-  }
-
-
   .i-sdc-designer-sidebar-section-content-item-rules-section {
     .i-sdc-designer-sidebar-section-content-item-rule {
       border-bottom: 1px solid @main_color_o;