diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/pages')
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}} </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}} </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}} </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" |