Fix node filter capability filters

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

7 files changed, 411 insertions, 10 deletions

diff --git a/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.html b/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.html
new file mode 100644
index 0000000000..1dcbc16c12
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.html
@@ -0,0 +1,81 @@
+<!--
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2020 Nordix Foundation. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+-->
+
+<div class="app-capabilities-filter-properties-editor">
+  <form class="w-sdc-form">
+    <loader [display]="isLoading" [size]="'large'" [relative]="true"></loader>
+    <div class="i-sdc-form-content">
+      <div class="rule-builder-content">
+        <div class="i-sdc-form-item rule-input-field">
+          <label class="i-sdc-form-label required">{{currentServiceName}} Capabilities</label>
+          <ui-element-dropdown class="i-sdc-form-select" class="rule-assigned-value"
+                               [(value)]="currentRule.capabilityName"
+                               [values]="capabilitiesNames"
+                               (elementChanged)="onCapabilityNameChanged($event.value)">
+          </ui-element-dropdown>
+        </div>
+
+        <div class="i-sdc-form-item rule-input-field">
+          <label class="i-sdc-form-label required">Capability Properties</label>
+          <ui-element-dropdown class="i-sdc-form-select" class="rule-assigned-value"
+                               [(value)]="this.currentRule.servicePropertyName"
+                               [values]="capabilityProperties"
+                               (change)="onServicePropertyChanged()">
+          </ui-element-dropdown>
+        </div>
+
+        <div class="i-sdc-form-item rule-input-field operator">
+          <ui-element-dropdown class="i-sdc-form-select"
+                               [values]="operatorTypes"
+                               [(value)]="currentRule.constraintOperator">
+          </ui-element-dropdown>
+        </div>
+
+        <div class="i-sdc-form-item rule-input-field">
+          <label class="i-sdc-form-label required" >Source</label>
+          <ui-element-dropdown class="i-sdc-form-select"
+                               [values]="sourceTypes"
+                               [(value)]="currentRule.sourceName"
+                               (change)="onSelectSourceType()">
+          </ui-element-dropdown>
+        </div>
+
+        <div class="rule-input-field assigned-value-field">
+          <label class="i-sdc-form-label required" >{{assignedValueLabel}}</label>
+          <dynamic-element
+              *ngIf="currentRule.sourceType === SOURCE_TYPES.STATIC.value"
+              [(value)]="currentRule.value"
+              class="rule-assigned-value"
+              data-tests-id="ruleAssignedValue"
+              (elementChanged)="onValueChange($event.isValid)"
+              [type]="selectedCapabilitiesPropertyObject ? selectedCapabilitiesPropertyObject.type : 'string'">
+          </dynamic-element>
+          <ui-element-dropdown *ngIf="currentRule.sourceType !== SOURCE_TYPES.STATIC.value"
+                               class="rule-assigned-value"
+                               data-tests-id="ruleAssignedValue"
+                               [(value)]="currentRule.value"
+                               [values]="listOfValuesToAssign">
+          </ui-element-dropdown>
+        </div>
+      </div>
+    </div>
+  </form>
+
+</div>
diff --git a/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.less b/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.less
new file mode 100644
index 0000000000..188fb7b5ef
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.less
@@ -0,0 +1,44 @@
+@import './../../../../../assets/styles/variables.less';
+
+
+.sdc-modal-top-bar {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.i-sdc-form-content {
+  display: flex;
+  flex-direction: column;
+  margin-top: 10px;
+  padding-bottom: 20px;
+
+  .i-sdc-form-item {
+    width: 250px;
+    &.operation {
+      width: 60px;
+    }
+  }
+
+  .rule-builder-content {
+    display: flex;
+    align-items: flex-end;
+    .rule-input-field {
+      flex: 1;
+      &:not(:last-of-type) {
+        margin-right: 20px;
+      }
+      &.operator{
+        width: 55px;
+        flex: 0 1 auto;
+      }
+      &.assigned-value-field {
+        margin-bottom: 10px;
+      }
+      /deep/ ui-element-dropdown select,
+      /deep/ ui-element-input input {
+        height: 30px;
+      }
+    }
+
+  }
+}
diff --git a/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.ts b/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.ts
new file mode 100644
index 0000000000..1205556ee0
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.ts
@@ -0,0 +1,214 @@
+/*
+* ============LICENSE_START=======================================================
+* SDC
+* ================================================================================
+*  Copyright (C) 2020 Nordix Foundation. All rights reserved.
+*  ================================================================================
+*  Licensed under the Apache License, Version 2.0 (the "License");
+*  you may not use this file except in compliance with the License.
+*  You may obtain a copy of the License at
+*
+*        http://www.apache.org/licenses/LICENSE-2.0
+*  Unless required by applicable law or agreed to in writing, software
+*  distributed under the License is distributed on an "AS IS" BASIS,
+*  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+*  See the License for the specific language governing permissions and
+*  limitations under the License.
+*
+*  SPDX-License-Identifier: Apache-2.0
+*  ============LICENSE_END=========================================================
+*/
+
+import { Component } from '@angular/core';
+import {InputBEModel, PropertyBEModel, PropertyModel} from 'app/models';
+import { OPERATOR_TYPES } from 'app/ng2/components/logic/service-dependencies/service-dependencies.component';
+import { DropdownValue } from 'app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component';
+import { ServiceServiceNg2 } from 'app/ng2/services/component-services/service.service';
+import { PROPERTY_DATA } from 'app/utils';
+import { ServiceInstanceObject } from '../../../../models/service-instance-properties-and-interfaces';
+import {CapabilitiesConstraintObjectUI} from "../../../components/logic/capabilities-constraint/capabilities-constraint.component";
+
+export class UIDropDownSourceTypesElement extends DropdownValue {
+  options: any[];
+  assignedLabel: string;
+  type: string;
+  constructor(input?: any) {
+    if (input) {
+      const value = input.value || '';
+      const label = input.label || '';
+      super(value, label);
+      this.options = input.options;
+      this.assignedLabel = input.assignedLabel;
+      this.type = input.type;
+    }
+  }
+}
+
+@Component({
+  selector: 'app-capabilities-filter-properties-editor',
+  templateUrl: './capabilities-filter-properties-editor.component.html',
+  styleUrls: ['./capabilities-filter-properties-editor.component.less'],
+  providers: [ServiceServiceNg2]
+})
+export class CapabilitiesFilterPropertiesEditorComponent {
+
+  constructor() {
+  }
+
+  input: {
+    serviceRuleIndex: number,
+    serviceRules: CapabilitiesConstraintObjectUI[],
+    compositeServiceName: string,
+    currentServiceName: string,
+    parentServiceInputs: InputBEModel[],
+    selectedInstanceProperties: PropertyBEModel[],
+    operatorTypes: DropdownValue[],
+    selectedInstanceSiblings: ServiceInstanceObject[],
+    componentInstanceCapabilitiesMap: Map<string, PropertyModel[]>,
+  };
+  currentServiceName: string;
+  selectedServiceProperties: PropertyBEModel[];
+  operatorTypes: DropdownValue[];
+  sourceTypes: UIDropDownSourceTypesElement[] = [];
+  currentRule: CapabilitiesConstraintObjectUI;
+  currentIndex: number;
+  listOfValuesToAssign: DropdownValue[];
+  listOfSourceOptions: PropertyBEModel[];
+  assignedValueLabel: string;
+  serviceRulesList: CapabilitiesConstraintObjectUI[];
+
+  capabilitiesNames: string[];
+  selectedPropertiesByCapabilityName: Array<PropertyModel>;
+  selectedCapabilityName: string;
+  capabilityProperties: DropdownValue[];
+
+  selectedCapabilitiesPropertyObject: PropertyBEModel;
+
+  SOURCE_TYPES = {
+    STATIC: {label: 'Static', value: 'static'},
+    SERVICE_PROPERTY: {label: 'Service Property', value: 'property'},
+    CAPABILITY_NAME: {label: 'Name', value: 'name'}
+  };
+
+  ngOnInit() {
+    this.capabilitiesNames = Array.from(this.input.componentInstanceCapabilitiesMap.keys());
+    this.currentIndex = this.input.serviceRuleIndex;
+    this.serviceRulesList = this.input.serviceRules;
+    this.currentRule = this.serviceRulesList && this.input.serviceRuleIndex >= 0 ?
+        this.serviceRulesList[this.input.serviceRuleIndex] :
+        new CapabilitiesConstraintObjectUI({
+          capabilityName: this.SOURCE_TYPES.CAPABILITY_NAME.value,
+          sourceName: this.SOURCE_TYPES.STATIC.value,
+          sourceType: this.SOURCE_TYPES.STATIC.value, value: '',
+          constraintOperator: OPERATOR_TYPES.EQUAL});
+    this.currentServiceName = this.input.currentServiceName;
+    this.operatorTypes = this.input.operatorTypes;
+
+    this.initSourceTypes();
+    this.syncRuleData();
+    this.updateSourceTypesRelatedValues();
+    this.onCapabilityNameChanged(this.currentRule.capabilityName)
+  }
+
+  initSourceTypes() {
+    this.sourceTypes.push({label: this.SOURCE_TYPES.STATIC.label, value: this.SOURCE_TYPES.STATIC.value,
+      options: [], assignedLabel: this.SOURCE_TYPES.STATIC.label, type: this.SOURCE_TYPES.STATIC.value});
+    this.sourceTypes.push({
+      label: this.input.compositeServiceName,
+      value: this.input.compositeServiceName,
+      assignedLabel: this.SOURCE_TYPES.SERVICE_PROPERTY.label,
+      type: this.SOURCE_TYPES.SERVICE_PROPERTY.value,
+      options: this.input.parentServiceInputs
+    });
+    _.forEach(this.input.selectedInstanceSiblings, (sib) =>
+        this.sourceTypes.push({
+          label: sib.name,
+          value: sib.name,
+          options: sib.properties || [],
+          assignedLabel: this.SOURCE_TYPES.SERVICE_PROPERTY.label,
+          type: this.SOURCE_TYPES.SERVICE_PROPERTY.value
+        })
+    );
+  }
+
+  syncRuleData() {
+    if (!this.currentRule.sourceName && this.currentRule.sourceType === this.SOURCE_TYPES.STATIC.value) {
+      this.currentRule.sourceName = this.SOURCE_TYPES.STATIC.value;
+    }
+    this.selectedCapabilitiesPropertyObject = Array.from(this.input.componentInstanceCapabilitiesMap
+    .get(this.currentRule.capabilityName))
+    .find(property => property.name == this.currentRule.servicePropertyName);
+    this.updateOperatorTypesList();
+    this.updateSourceTypesRelatedValues();
+  }
+
+  updateOperatorTypesList() {
+    if (this.selectedCapabilitiesPropertyObject && PROPERTY_DATA.SIMPLE_TYPES_COMPARABLE.indexOf(this.selectedCapabilitiesPropertyObject.type) === -1) {
+      this.operatorTypes = [{label: '=', value: OPERATOR_TYPES.EQUAL}];
+      this.currentRule.constraintOperator = OPERATOR_TYPES.EQUAL;
+    } else {
+      this.operatorTypes = this.input.operatorTypes;
+    }
+  }
+
+  updateSourceTypesRelatedValues() {
+    if (this.currentRule.sourceName) {
+      const selectedSourceType: UIDropDownSourceTypesElement = this.sourceTypes.find(
+          (t) => t.value === this.currentRule.sourceName && t.type === this.currentRule.sourceType
+      );
+      if(selectedSourceType) {
+        this.listOfSourceOptions = selectedSourceType.options || [];
+        this.assignedValueLabel = selectedSourceType.assignedLabel || this.SOURCE_TYPES.STATIC.label;
+        this.filterOptionsByType();
+      }
+    }
+  }
+
+  onCapabilityNameChanged= (value: any): void => {
+    this.selectedPropertiesByCapabilityName = this.input.componentInstanceCapabilitiesMap.get(value);
+    this.capabilityProperties = _.map(this.selectedPropertiesByCapabilityName, (prop) => new DropdownValue(prop.name, prop.name));
+    this.selectedCapabilityName = value;
+    this.updateOperatorTypesList();
+    this.filterOptionsByType();
+  }
+
+  onServicePropertyChanged() {
+    this.updateOperatorTypesList();
+    this.filterOptionsByType();
+    this.currentRule.value = '';
+  }
+
+  onSelectSourceType() {
+    this.currentRule.sourceType = this.currentRule.sourceName === this.SOURCE_TYPES.STATIC.value ?
+        this.SOURCE_TYPES.STATIC.value :
+        this.SOURCE_TYPES.SERVICE_PROPERTY.value;
+    this.updateSourceTypesRelatedValues();
+    this.currentRule.value = '';
+  }
+
+  filterOptionsByType() {
+    if (!this.selectedCapabilitiesPropertyObject) {
+      this.listOfValuesToAssign = [];
+      return;
+    }
+    this.listOfValuesToAssign =  this.listOfSourceOptions.reduce((result, op: PropertyModel) => {
+      if (op.type === this.selectedCapabilitiesPropertyObject.type && (!op.schemaType || op.schemaType === this.selectedCapabilitiesPropertyObject.schemaType)) {
+        result.push(new DropdownValue(op.name, op.name));
+      }
+      return result;
+    }, []);
+  }
+
+  onValueChange(isValidValue) {
+    this.currentRule.updateValidity(isValidValue);
+  }
+
+  checkFormValidForSubmit() {
+    if (!this.serviceRulesList) {
+      const isStatic = this.currentRule.sourceName === this.SOURCE_TYPES.STATIC.value;
+      return this.currentRule.isValidRule(isStatic);
+    }
+    return this.serviceRulesList.every((rule) => rule.isValidRule(rule.sourceName === this.SOURCE_TYPES.STATIC.value));
+  }
+
+}
diff --git a/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.module.ts b/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.module.ts
new file mode 100644
index 0000000000..27bcb8a4e0
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.module.ts
@@ -0,0 +1,46 @@
+/*
+* ============LICENSE_START=======================================================
+* SDC
+* ================================================================================
+*  Copyright (C) 2020 Nordix Foundation. All rights reserved.
+*  ================================================================================
+*  Licensed under the Apache License, Version 2.0 (the "License");
+*  you may not use this file except in compliance with the License.
+*  You may obtain a copy of the License at
+*
+*        http://www.apache.org/licenses/LICENSE-2.0
+*  Unless required by applicable law or agreed to in writing, software
+*  distributed under the License is distributed on an "AS IS" BASIS,
+*  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+*  See the License for the specific language governing permissions and
+*  limitations under the License.
+*
+*  SPDX-License-Identifier: Apache-2.0
+*  ============LICENSE_END=========================================================
+*/
+
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {FormElementsModule} from 'app/ng2/components/ui/form-components/form-elements.module';
+import {UiElementsModule} from 'app/ng2/components/ui/ui-elements.module';
+import {CapabilitiesFilterPropertiesEditorComponent} from "./capabilities-filter-properties-editor.component";
+
+@NgModule({
+  declarations: [
+    CapabilitiesFilterPropertiesEditorComponent
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    FormElementsModule,
+    UiElementsModule
+  ],
+  exports: [],
+  entryComponents: [
+    CapabilitiesFilterPropertiesEditorComponent
+  ],
+  providers: []
+})
+export class CapabilitiesFilterPropertiesEditorComponentModule {
+}
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-dependencies-tab/service-dependencies-tab.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-dependencies-tab/service-dependencies-tab.component.html
index 508584d486..588ac8359b 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-dependencies-tab/service-dependencies-tab.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-dependencies-tab/service-dependencies-tab.component.html
@@ -6,6 +6,7 @@
                     [compositeService]="metaData"
                     [currentServiceInstance]="component"
                     [selectedInstanceProperties]="selectedInstanceProperties"
+                    [componentInstanceCapabilitiesMap]="componentInstanceCapabilitiesMap"
                     [selectedInstanceSiblings]="selectedInstanceSiblings"
                     [selectedInstanceConstraints]="selectedInstanceConstraints"
                     [readonly]="isViewOnly"
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-dependencies-tab/service-dependencies-tab.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-dependencies-tab/service-dependencies-tab.component.ts
index 43c38b58b0..f844dfae4c 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-dependencies-tab/service-dependencies-tab.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-dependencies-tab/service-dependencies-tab.component.ts
@@ -1,10 +1,11 @@
 import {Component, Input} from '@angular/core';
 import {Store} from '@ngxs/store';
 import {
+    CapabilitiesGroup, Capability,
     Component as TopologyTemplate,
     FullComponentInstance,
     PropertiesGroup,
-    PropertyBEModel,
+    PropertyBEModel, PropertyModel,
 } from 'app/models';
 import {DEPENDENCY_EVENTS} from 'app/utils/constants';
 import {ComponentMetadata} from '../../../../../../models/component-metadata';
@@ -16,6 +17,7 @@ import {ComponentGenericResponse} from '../../../../../services/responses/compon
 import {WorkspaceService} from '../../../../workspace/workspace.service';
 import {SelectedComponentType} from '../../../common/store/graph.actions';
 import {CompositionService} from '../../../composition.service';
+import {CapabilitiesConstraintObject} from "../../../../../components/logic/capabilities-constraint/capabilities-constraint.component";
 
 @Component({
     selector: 'service-dependencies-tab',
@@ -30,7 +32,10 @@ export class ServiceDependenciesTabComponent {
     selectedInstanceConstraints: ConstraintObject[];
     selectedInstanceProperties: PropertyBEModel[];
     componentInstanceProperties: PropertiesGroup;
+    componentInstanceCapabilityProperties: CapabilitiesGroup;
     metaData: ComponentMetadata;
+    componentInstanceCapabilitiesMap : Map<string, PropertyModel[]> = new Map();
+    componentInstanceCapabilitiesNames: string[];
 
     @Input() isViewOnly: boolean;
     @Input() componentType: SelectedComponentType;
@@ -50,6 +55,7 @@ export class ServiceDependenciesTabComponent {
         this.initInstancesWithProperties();
         this.loadConstraints();
         this.initInstancesWithProperties();
+        this.initInstancesWithCapabilityProperties()
     }
 
     public loadConstraints = (): void => {
@@ -67,7 +73,7 @@ export class ServiceDependenciesTabComponent {
         this.selectedInstanceConstraints = this.componentInstancesConstraints[this.component.uniqueId].properties;
     }
 
-    public updateSelectedInstanceCapabilitiesConstraints = (constraintsList:Array<ConstraintObject>):void => {
+    public updateSelectedInstanceCapabilitiesConstraints = (constraintsList:Array<CapabilitiesConstraintObject>):void => {
         this.componentInstancesConstraints[this.component.uniqueId].capabilities = constraintsList;
         this.selectedInstanceConstraints = this.componentInstancesConstraints[this.component.uniqueId].capabilities;
     }
@@ -90,4 +96,20 @@ export class ServiceDependenciesTabComponent {
             this.selectedInstanceSiblings = instancesMappedList.filter((coInstance) => coInstance.id !== this.component.uniqueId);
         }
     }
+
+    private initInstancesWithCapabilityProperties = (): void => {
+        this.componentInstanceCapabilityProperties = this.component.capabilities;
+        this.updateComponentInstanceCapabilities();
+    }
+
+    private updateComponentInstanceCapabilities = (): void => {
+        if (this.isComponentInstanceSelected && this.componentInstanceCapabilityProperties) {
+            _.forEach(_.flatten(_.values(this.componentInstanceCapabilityProperties)), (capability: Capability) => {
+                if (capability.properties) {
+                    this.componentInstanceCapabilitiesMap.set(capability.name, capability.properties);
+                }
+            });
+        }
+    }
+
 }
diff --git a/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.html b/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.html
index f22e454332..4b23568a06 100644
--- a/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.html
+++ b/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.html
@@ -1,13 +1,6 @@
 <div class="service-dependencies-editor">
     <form class="w-sdc-form">
 
-        <div class="sdc-modal-top-bar">
-            <div class="sdc-modal-top-bar-buttons" *ngIf="currentIndex >= 0">
-                <span (click)="onChangePage(currentIndex - 1)" [ngClass]="{'disabled' : currentIndex === 0}" class="sprite-new left-arrow" data-tests-id="get-prev-rule" tooltip="Previous"></span>
-                <span (click)="onChangePage(currentIndex + 1)" [ngClass]="{'disabled' : currentIndex === input.serviceRules.length - 1}" class="sprite-new right-arrow" data-tests-id="get-next-rule" tooltip="Next"></span>
-            </div>
-        </div>
-
         <loader [display]="isLoading" [size]="'large'" [relative]="true"></loader>
 
         <div class="i-sdc-form-content">
@@ -53,4 +46,4 @@
         </div>
     </form>
 
-</div>
\ No newline at end of file
+</div>