Add substitution filter UI support

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

7 files changed, 188 insertions, 4 deletions

diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.ts b/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.ts
index 69ca3faaf5..5467ecedbc 100644
--- a/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.ts
@@ -47,7 +47,7 @@ import { ServiceGenericResponse } from 'app/ng2/services/responses/service-gener
 import { WorkspaceState } from 'app/ng2/store/states/workspace.state';
 import { EventListenerService } from 'app/services';
 import { ComponentInstanceFactory, EVENTS, SdcElementType } from 'app/utils';
-import { ComponentType, GRAPH_EVENTS, GraphColors, DEPENDENCY_EVENTS } from 'app/utils/constants';
+import { ComponentType, GRAPH_EVENTS, GraphColors, DEPENDENCY_EVENTS , SUBSTITUTION_FILTER_EVENTS} from 'app/utils/constants';
 import * as _ from 'lodash';
 import { DndDropEvent } from 'ngx-drag-drop/ngx-drag-drop';
 import { SdcUiServices } from 'onap-ui-angular';
@@ -143,6 +143,7 @@ export class CompositionGraphComponent implements AfterViewInit {
         });
         this.eventListenerService.unRegisterObserver(EVENTS.ON_CHECKOUT);
         this.eventListenerService.unRegisterObserver(DEPENDENCY_EVENTS.ON_DEPENDENCY_CHANGE);
+        this.eventListenerService.unRegisterObserver(SUBSTITUTION_FILTER_EVENTS.ON_SUBSTITUTION_FILTER_CHANGE);
     }
 
     public isViewOnly = (): boolean => {
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 25a0c728a8..305086e8f3 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
@@ -157,7 +157,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.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 348dc9f8c1..bf8cc27bfb 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
@@ -38,6 +38,7 @@ import { OnSidebarOpenOrCloseAction } from '../common/store/graph.actions';
 import { CompositionStateModel, GraphState } from '../common/store/graph.state';
 import { ServiceConsumptionTabComponent } from './panel-tabs/service-consumption-tab/service-consumption-tab.component';
 import { ServiceDependenciesTabComponent } from './panel-tabs/service-dependencies-tab/service-dependencies-tab.component';
+import {SubstitutionFilterTabComponent} from "./panel-tabs/substitution-filter-tab/substitution-filter-tab.component";
 
 const tabs = {
     infoTab : {titleIcon: 'info-circle', component: InfoTabComponent, input: {}, isActive: true, tooltipText: 'Information'},
@@ -53,7 +54,8 @@ const tabs = {
     inputs: {titleIcon: 'inputs-o', component: PropertiesTabComponent, input: {title: 'Inputs'}, isActive: false, tooltipText: 'Inputs'},
     settings: {titleIcon: 'settings-o', component: PropertiesTabComponent, input: {}, isActive: false, tooltipText: 'Settings'},
     consumption: {titleIcon: 'api-o', component: ServiceConsumptionTabComponent, input: {title: 'OPERATION CONSUMPTION'}, isActive: false, tooltipText: 'Service Consumption'},
-    dependencies: {titleIcon: 'archive', component: ServiceDependenciesTabComponent, input: {title: 'DIRECTIVES AND NODE FILTER'}, isActive: false, tooltipText: 'Service Dependencies'}
+    dependencies: {titleIcon: 'archive', component: ServiceDependenciesTabComponent, input: {title: 'DIRECTIVES AND NODE FILTER'}, isActive: false, tooltipText: 'Service Dependencies'},
+    substitutionFilter: {titleIcon: 'composition-o', component: SubstitutionFilterTabComponent, input: {title: 'SUBSTITUTION FILTER'}, isActive: false, tooltipText: 'Substitution Filter'}
 };
 
 @Component({
@@ -144,6 +146,7 @@ export class CompositionPanelComponent {
         if (component.isService() && this.selectedComponentIsServiceProxyInstance()) {
             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/composition-panel.module.ts b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.module.ts
index 0fd1e51fa5..a89db21b04 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.module.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.module.ts
@@ -47,6 +47,8 @@ import { ServiceConsumptionTabComponent } from "./panel-tabs/service-consumption
 import { ServiceDependenciesTabComponent } from "./panel-tabs/service-dependencies-tab/service-dependencies-tab.component";
 import { ServiceDependenciesModule } from "../../../components/logic/service-dependencies/service-dependencies.module";
 import { ServiceConsumptionModule } from "../../../components/logic/service-consumption/service-consumption.module";
+import {SubstitutionFilterTabComponent} from "./panel-tabs/substitution-filter-tab/substitution-filter-tab.component";
+import {SubstitutionFilterModule} from "../../../components/logic/substitution-filter/substitution-filter.module";
 
 
 
@@ -63,6 +65,7 @@ import { ServiceConsumptionModule } from "../../../components/logic/service-cons
         ReqAndCapabilitiesTabComponent,
         ServiceConsumptionTabComponent,
         ServiceDependenciesTabComponent,
+        SubstitutionFilterTabComponent,
         RequirementListComponent,
         EnvParamsComponent
     ],
@@ -77,7 +80,8 @@ import { ServiceConsumptionModule } from "../../../components/logic/service-cons
         TranslateModule,
         NgxDatatableModule,
         ServiceDependenciesModule,
-        ServiceConsumptionModule
+        ServiceConsumptionModule,
+        SubstitutionFilterModule
         // EnvParamsModule
     ],
     entryComponents: [
@@ -91,6 +95,7 @@ import { ServiceConsumptionModule } from "../../../components/logic/service-cons
         ReqAndCapabilitiesTabComponent,
         ServiceConsumptionTabComponent,
         ServiceDependenciesTabComponent,
+        SubstitutionFilterTabComponent,
         RequirementListComponent,
         PanelTabComponent,
         EnvParamsComponent
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
new file mode 100644
index 0000000000..d0656959f8
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/substitution-filter-tab/substitution-filter-tab.component.html
@@ -0,0 +1,38 @@
+<!--
+ * ============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=========================================================
+-->
+
+<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>
+</ng2-expand-collapse>
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/substitution-filter-tab/substitution-filter-tab.component.less b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/substitution-filter-tab/substitution-filter-tab.component.less
new file mode 100644
index 0000000000..3edfbd951b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/substitution-filter-tab/substitution-filter-tab.component.less
@@ -0,0 +1,23 @@
+/*-
+ * ============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=========================================================
+ */
+
+:host /deep/ .expand-collapse-content {
+    padding: 0 0 10px;
+}
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
new file mode 100644
index 0000000000..20868e388b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/substitution-filter-tab/substitution-filter-tab.component.ts
@@ -0,0 +1,114 @@
+/*
+* ============LICENSE_START=======================================================
+*  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, 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';
+import { SUBSTITUTION_FILTER_EVENTS } from 'app/utils/constants';
+import { ComponentMetadata } from '../../../../../../models/component-metadata';
+import { ServiceInstanceObject } from '../../../../../../models/service-instance-properties-and-interfaces';
+import { EventListenerService } from '../../../../../../services/event-listener-service';
+import { ConstraintObject } from '../../../../../components/logic/service-dependencies/service-dependencies.component';
+import { TopologyTemplateService } from '../../../../../services/component-services/topology-template.service';
+import { ComponentGenericResponse } from '../../../../../services/responses/component-generic-response';
+import { WorkspaceService } from '../../../../workspace/workspace.service';
+import { SelectedComponentType } from '../../../common/store/graph.actions';
+import { CompositionService } from '../../../composition.service';
+
+@Component({
+    selector: 'substitution-filter-tab',
+    templateUrl: 'substitution-filter-tab.component.html',
+    styleUrls: ['substitution-filter-tab.component.less']
+})
+export class SubstitutionFilterTabComponent {
+    isComponentInstanceSelected: boolean;
+
+    selectedInstanceSiblings: ServiceInstanceObject[];
+    componentInstancesConstraints: any[];
+    selectedInstanceConstraints: ConstraintObject[];
+    selectedInstanceProperties: PropertyBEModel[];
+    componentInstanceProperties: PropertiesGroup;
+    metaData: ComponentMetadata;
+
+    @Input() isViewOnly: boolean;
+    @Input() componentType: SelectedComponentType;
+    @Input() component: FullComponentInstance | TopologyTemplate;
+    @Input() input: any;
+
+    constructor(private store: Store,
+                private topologyTemplateService: TopologyTemplateService,
+                private workspaceService: WorkspaceService,
+                private compositionService: CompositionService,
+                private eventListenerService: EventListenerService) {
+    }
+
+    ngOnInit() {
+        this.metaData = this.workspaceService.metadata;
+        this.isComponentInstanceSelected = this.componentType === SelectedComponentType.COMPONENT_INSTANCE;
+        this.initInstancesWithProperties();
+        this.loadConstraints();
+        this.initInstancesWithProperties();
+    }
+
+    public loadConstraints = (): void => {
+        this.topologyTemplateService.getSubstitutionFilterConstraints(this.metaData.componentType, this.metaData.uniqueId).subscribe((response) => {
+            this.componentInstancesConstraints = response.substitutionFilterForTopologyTemplate;
+        });
+    }
+
+    public notifyDependencyEventsObserver = (isChecked: boolean): void => {
+        this.eventListenerService.notifyObservers(SUBSTITUTION_FILTER_EVENTS.ON_SUBSTITUTION_FILTER_CHANGE, isChecked);
+    }
+
+    public updateSelectedInstanceConstraints = (constraintsList:Array<ConstraintObject>):void => {
+        this.componentInstancesConstraints[this.component.uniqueId].properties = constraintsList;
+        this.selectedInstanceConstraints = this.componentInstancesConstraints[this.component.uniqueId].properties;
+    }
+
+    private initInstancesWithProperties = (): void => {
+        this.topologyTemplateService.getComponentInstanceProperties(this.metaData.componentType, this.metaData.uniqueId).subscribe((genericResponse: ComponentGenericResponse) => {
+            this.componentInstanceProperties = genericResponse.componentInstancesProperties;
+            this.updateInstanceAttributes();
+        });
+    }
+
+
+    private updateInstanceAttributes = (): void => {
+        if (this.isComponentInstanceSelected && this.componentInstanceProperties) {
+            const instancesMappedList = this.compositionService.componentInstances.map((coInstance) => new ServiceInstanceObject({
+                id: coInstance.uniqueId,
+                name: coInstance.name,
+                properties: this.componentInstanceProperties[coInstance.uniqueId] || []
+            }));
+            this.selectedInstanceProperties = this.componentInstanceProperties[this.component.uniqueId];
+            this.selectedInstanceSiblings = instancesMappedList.filter((coInstance) => coInstance.id !== this.component.uniqueId);
+        }
+    }
+}