Support for selection of capabilities

Change-Id: Ib1a3e3e1a59fc84c62620932c408e231acf77024
Issue-ID: SDC-3580
Signed-off-by: André Schmid <andre.schmid@est.tech>

4 files changed, 67 insertions, 16 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 3cab4b300f..8d2357d6ad 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
@@ -25,7 +25,8 @@ import {
     ZoneInstanceAssignmentType,
     ZoneInstanceMode,
     ZoneInstanceType,
-    Requirement
+    Requirement,
+    Capability
 } from 'app/models';
 import { ForwardingPath } from 'app/models/forwarding-path';
 import { CompositionCiServicePathLink } from 'app/models/graph/graph-links/composition-graph-links/composition-ci-service-path-link';
@@ -649,6 +650,14 @@ export class CompositionGraphComponent implements AfterViewInit {
                 .find(r => r.uniqueId === requirement.uniqueId).external = requirement.external;
         });
 
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_COMPONENT_INSTANCE_CAPABILITY_EXTERNAL_CHANGED,
+            (uniqueId: string, capability: Capability) => {
+                const graphCapability = this._cy.getElementById(uniqueId).data()
+                    .componentInstance.capabilities[capability.type].find(cap => cap.uniqueId === capability.uniqueId);
+                graphCapability.external = capability.external;
+            }
+        );
+
         this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE, (componentInstanceId: string) => {
             const nodeToDelete = this._cy.getElementById(componentInstanceId);
             this.nodesGraphUtils.deleteNode(this._cy, this.topologyTemplate, nodeToDelete);
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/req-capabilities-tab.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/req-capabilities-tab.component.html
index c73f69734f..ad25aabefd 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/req-capabilities-tab.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/req-capabilities-tab.component.html
@@ -5,6 +5,16 @@
                 <div *ngFor="let capability of capabilities" class="relations-details-container">
                     <div class="relations-name">{{capability.name}}&nbsp;</div>
                     <div class="relations-desc"> {{capability.type}} </div>
+                    <div class="checkbox-label-mark-as-external" *ngIf="isComponentInstanceSelected">
+                        <checkbox
+                            class="checkbox-label"
+                            [attr.data-tests-id]="'checkbox-external-cap-' + capability.name"
+                            [label]="'External'"
+                            (checkedChange)="onMarkCapabilityAsExternal(capability)"
+                            [(checked)]="capability.external"
+                            [disabled]="isViewOnly">
+                        </checkbox>
+                    </div>
                 </div>
             </sdc-accordion>
         </div>
@@ -19,10 +29,20 @@
     <ng-template #complexComponentTemplate>
         <sdc-accordion *ngIf="capabilitiesInstancesMap" [title]="'Capabilities'" [arrow-direction]="'right'" [testId]="'Capabilities-accordion'">
             <sdc-accordion *ngFor="let key of objectKeys(capabilitiesInstancesMap); let i = index" [title]="key">
-                    <div *ngFor="let capability of capabilitiesInstancesMap[key]" class="relations-details-container">
-                            <div class="relations-name">{{capability.name}}&nbsp;</div>
-                            <div class="relations-desc"> {{capability.type}} </div>
-                        </div>
+                <div *ngFor="let capability of capabilitiesInstancesMap[key]" class="relations-details-container">
+                    <div class="relations-name">{{capability.name}}&nbsp;</div>
+                    <div class="relations-desc"> {{capability.type}} </div>
+                    <div class="checkbox-label-mark-as-external" *ngIf="isComponentInstanceSelected">
+                        <checkbox
+                            class="checkbox-label"
+                            [attr.data-tests-id]="'checkbox-external-cap-' + capability.name"
+                            [label]="'External'"
+                            (checkedChange)="onMarkCapabilityAsExternal(capability)"
+                            [(checked)]="capability.external"
+                            [disabled]="isViewOnly">
+                        </checkbox>
+                    </div>
+                </div>
             </sdc-accordion>
         </sdc-accordion>
 
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/req-capabilities-tab.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/req-capabilities-tab.component.ts
index 7c91cbc4b8..7bb88c7f59 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/req-capabilities-tab.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/req-capabilities-tab.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, Input, OnDestroy } from '@angular/core';
-import { Component as TopologyTemplate, Capability, Requirement, CapabilitiesGroup, RequirementsGroup, ComponentInstance, FullComponentInstance } from "app/models";
+import { Component as TopologyTemplate, Capability, Requirement, CapabilitiesGroup, RequirementsGroup, FullComponentInstance } from "app/models";
 import { Store } from "@ngxs/store";
 import { GRAPH_EVENTS } from "app/utils";
 import { ComponentGenericResponse } from "app/ng2/services/responses/component-generic-response";
@@ -8,6 +8,7 @@ import { EventListenerService } from "app/services";
 import { WorkspaceService } from "app/ng2/pages/workspace/workspace.service";
 import { CompositionService } from "app/ng2/pages/composition/composition.service";
 import {SelectedComponentType, TogglePanelLoadingAction} from "../../../common/store/graph.actions";
+import {ComponentInstanceServiceNg2} from "../../../../../services/component-instance-services/component-instance.service";
 
 
 export class InstanceCapabilitiesMap {
@@ -42,7 +43,8 @@ export class ReqAndCapabilitiesTabComponent implements OnInit, OnDestroy {
         private topologyTemplateService:TopologyTemplateService,
         private workspaceService: WorkspaceService,
         private compositionService: CompositionService,
-        private eventListenerService:EventListenerService) { }
+        private eventListenerService:EventListenerService,
+        private componentInstanceService: ComponentInstanceServiceNg2) { }
 
     ngOnInit(): void {
 
@@ -112,13 +114,19 @@ export class ReqAndCapabilitiesTabComponent implements OnInit, OnDestroy {
     private initInstancesMap = ():void => {
 
         this.capabilitiesInstancesMap = new InstanceCapabilitiesMap();
-        _.forEach(this.capabilities, (capability:Capability) => {
-            if (this.capabilitiesInstancesMap[capability.ownerName]) {
-                this.capabilitiesInstancesMap[capability.ownerName] = this.capabilitiesInstancesMap[capability.ownerName].concat(capability);
-            } else {
-                this.capabilitiesInstancesMap[capability.ownerName] = new Array<Capability>(capability);
+        let capabilityList: Array<Capability> = this.capabilities;
+        if (capabilityList) {
+            if (!this.isComponentInstanceSelected) {
+                capabilityList = capabilityList.filter(value => value.external);
             }
-        });
+            capabilityList.forEach(capability => {
+                if (this.capabilitiesInstancesMap[capability.ownerName]) {
+                    this.capabilitiesInstancesMap[capability.ownerName] = this.capabilitiesInstancesMap[capability.ownerName].concat(capability);
+                } else {
+                    this.capabilitiesInstancesMap[capability.ownerName] = new Array<Capability>(capability);
+                }
+            });
+        }
 
         this.requirementsInstancesMap = new InstanceRequirementsMap();
         _.forEach(this.requirements, (requirement:Requirement) => {
@@ -161,7 +169,21 @@ export class ReqAndCapabilitiesTabComponent implements OnInit, OnDestroy {
     }
 
 
-
-
+    onMarkCapabilityAsExternal(capability: Capability) {
+        this.store.dispatch(new TogglePanelLoadingAction({isLoading: true}));
+        capability.external = !capability.external;
+        const componentId = this.workspaceService.metadata.uniqueId;
+        const componentInstanceId = this.component.uniqueId;
+        this.componentInstanceService
+        .updateInstanceCapability(this.workspaceService.metadata.getTypeUrl(), componentId, componentInstanceId, capability)
+        .subscribe(() => {
+            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_COMPONENT_INSTANCE_CAPABILITY_EXTERNAL_CHANGED, componentInstanceId, capability);
+            this.store.dispatch(new TogglePanelLoadingAction({isLoading: false}));
+        } , (error) => {
+            console.error("An error has occurred while setting capability '" + capability.name + "' external", error);
+            capability.external = !capability.external;
+            this.store.dispatch(new TogglePanelLoadingAction({isLoading: false}));
+        });
+    }
 }
 
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/requirement-list/requirement-list.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/requirement-list/requirement-list.component.html
index ebaed0441a..ee8277971b 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/requirement-list/requirement-list.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/requirement-list/requirement-list.component.html
@@ -17,7 +17,7 @@
                          *ngIf="isInstanceSelected">
                         <checkbox
                                 class="checkbox-label"
-                                [attr.data-tests-id]="'checkbox-mark-as-external-' + requirement.name"
+                                [attr.data-tests-id]="'checkbox-external-req-' + requirement.name"
                                 [label]="'External'"
                                 (checkedChange)="onMarkAsExternal(requirement)"
                                 [(checked)]="requirement.external"