summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/pages/connection-wizard
diff options
context:
space:
mode:
authorTal Gitelman <tg851x@intl.att.com>2017-12-10 18:55:03 +0200
committerTal Gitelman <tg851x@intl.att.com>2017-12-10 19:33:38 +0200
commit51d50f0ef642e0f996a1c8b8d2ef4838bdfec892 (patch)
tree3ac236a864d74d19b0f5c9020891a7a7e5c31b44 /catalog-ui/src/app/ng2/pages/connection-wizard
parentb5cc2e0695f195716d6ccdc65e73807a6632ec70 (diff)
Final commit to master merge from
Change-Id: Ib464f9a8828437c86fe6def8af238aaf83473507 Issue-ID: SDC-714 Signed-off-by: Tal Gitelman <tg851x@intl.att.com>
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/connection-wizard')
-rw-r--r--catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.html4
-rw-r--r--catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.less4
-rw-r--r--catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.ts10
-rw-r--r--catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.html36
-rw-r--r--catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.less53
-rw-r--r--catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.ts37
-rw-r--r--catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard.module.ts43
-rw-r--r--catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard.service.ts67
-rw-r--r--catalog-ui/src/app/ng2/pages/connection-wizard/from-node-step/from-node-step.component.html8
-rw-r--r--catalog-ui/src/app/ng2/pages/connection-wizard/from-node-step/from-node-step.component.ts49
-rw-r--r--catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.html13
-rw-r--r--catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.less15
-rw-r--r--catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.ts67
-rw-r--r--catalog-ui/src/app/ng2/pages/connection-wizard/to-node-step/to-node-step.component.html9
-rw-r--r--catalog-ui/src/app/ng2/pages/connection-wizard/to-node-step/to-node-step.component.ts69
15 files changed, 484 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.html b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.html
new file mode 100644
index 0000000000..02e7694eb0
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.html
@@ -0,0 +1,4 @@
+<div>
+ <connection-wizard-header currentStepIndex="2"></connection-wizard-header>
+ <properties-step></properties-step>
+</div>
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.less b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.less
new file mode 100644
index 0000000000..07f9aa2135
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.less
@@ -0,0 +1,4 @@
+connection-wizard-header {
+ display: block;
+ margin-bottom: 15px;
+}
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.ts b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.ts
new file mode 100644
index 0000000000..5abb879013
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.ts
@@ -0,0 +1,10 @@
+import {Component} from "@angular/core";
+
+
+@Component({
+ selector: 'connection-properties-view',
+ templateUrl: './connection-properties-view.component.html',
+ styleUrls:['./connection-properties-view.component.less']
+})
+export class ConnectionPropertiesViewComponent {
+}
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.html b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.html
new file mode 100644
index 0000000000..369ab50cad
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.html
@@ -0,0 +1,36 @@
+<div class="header-main-container">
+ <div class="inner-container">
+ <div class="node from-node" [ngClass]="{'selected':currentStepIndex == 0}">
+ <div class="text">
+ <div class="node-name">
+ {{connectWizardService.connectRelationModel.fromNode.componentInstance.name}}
+ </div>
+ <div class="selected-req-or-cap" [ngClass]="{'selected': currentStepIndex == 2 && !connectWizardService.selectedMatch.isFromTo}">
+ {{getSelectedReqOrCapName(true)}}
+ </div>
+ </div>
+ <div class="icon">
+ <div class="small medium {{connectWizardService.connectRelationModel.fromNode.componentInstance.iconSprite}} {{connectWizardService.connectRelationModel.fromNode.componentInstance.icon}}">
+ </div>
+ </div>
+ </div>
+ <div class="connection">
+
+ </div>
+ <div class="node to-node" [ngClass]="{'selected':currentStepIndex == 1}">
+ <div class="icon">
+ <div class="small medium {{connectWizardService.connectRelationModel.toNode.componentInstance.iconSprite}} {{connectWizardService.connectRelationModel.toNode.componentInstance.icon}}">
+ </div>
+ </div>
+
+ <div class="text">
+ <div class="node-name">
+ {{connectWizardService.connectRelationModel.toNode.componentInstance.name}}
+ </div>
+ <div class="selected-req-or-cap" [ngClass]="{'selected': currentStepIndex == 2 && connectWizardService.selectedMatch.isFromTo}">
+ {{getSelectedReqOrCapName(false)}}
+ </div>
+ </div>
+ </div>
+ </div>
+</div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.less b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.less
new file mode 100644
index 0000000000..72fa6e813f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.less
@@ -0,0 +1,53 @@
+@import '../../../../../assets/styles/sprite-proxy-services-icons';
+@import '../../../../../assets/styles/variables';
+.header-main-container{
+ background-color: #f8f8f8;
+ width: 100%;
+ height: 100px;
+ display: flex;
+ .inner-container{
+ margin: 0 auto;
+ display: flex;
+ }
+}
+.selected {
+ color: @main_color_a;
+}
+.node{
+ display: flex;
+ &.from-node{
+ text-align: right;
+ }
+ &.to-node{
+ text-align: left;
+ }
+ &.selected{
+ .icon{
+ border: solid 3px @main_color_a;
+ padding: 4px;
+ border-radius: 50%;
+ background-color: @main_color_p;
+ }
+ }
+ .icon{
+ margin: auto 0;
+ display: flex;
+ }
+ .text{
+ font-family: @font-opensans-medium;
+ margin: auto 10px;
+ min-width: 450px;
+ .node-name{
+ font-size: 11px;
+ }
+ .selected-req-or-cap{
+ font-size: 14px;
+ }
+ }
+}
+.connection{
+ width: 67px;
+ height: 0px;
+ border-bottom: dashed 2px #979797;
+ margin: auto 0;
+}
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.ts b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.ts
new file mode 100644
index 0000000000..f5bc3b7ca4
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.ts
@@ -0,0 +1,37 @@
+/**
+ * Created by rc2122 on 9/27/2017.
+ */
+import {Component, Inject, forwardRef} from "@angular/core";
+import {ConnectionWizardService} from "../connection-wizard.service";
+import {WizardHeaderBaseComponent} from "app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard-header-base.component";
+
+@Component({
+ selector: 'connection-wizard-header',
+ templateUrl: './connection-wizard-header.component.html',
+ styleUrls:['./connection-wizard-header.component.less']
+})
+
+export class ConnectionWizardHeaderComponent extends WizardHeaderBaseComponent{
+
+ constructor(@Inject(forwardRef(() => ConnectionWizardService)) public connectWizardService: ConnectionWizardService) {
+ super();
+ }
+
+ private _getReqOrCapName(isFromNode:boolean) {
+ const attributeReqOrCap:string = isFromNode ? 'requirement' : 'capability';
+ if (this.connectWizardService.selectedMatch[attributeReqOrCap]) {
+ return this.connectWizardService.selectedMatch[attributeReqOrCap].getTitle();
+ } else if (this.connectWizardService.selectedMatch.relationship) {
+ return this.connectWizardService.selectedMatch.relationship.relation[attributeReqOrCap];
+ }
+ return '';
+ }
+
+ private getSelectedReqOrCapName = (isFromNode:boolean):string => {
+ if(!this.connectWizardService.selectedMatch){
+ return '';
+ }
+ return this._getReqOrCapName(this.connectWizardService.selectedMatch.isFromTo ? isFromNode : !isFromNode);
+ }
+}
+
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard.module.ts b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard.module.ts
new file mode 100644
index 0000000000..6b4b4128c1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard.module.ts
@@ -0,0 +1,43 @@
+import {ToNodeStepComponent} from "./to-node-step/to-node-step.component";
+import {NgModule} from "@angular/core";
+import {FromNodeStepComponent} from "./from-node-step/from-node-step.component";
+import {PropertiesStepComponent} from "./properties-step/properties-step.component";
+import {ConnectionWizardService} from "./connection-wizard.service";
+import {SelectRequirementOrCapabilityModule} from "../../components/logic/select-requirement-or-capability/select-requirement-or-capability.module";
+import {PropertyTableModule} from "../../components/logic/properties-table/property-table.module";
+import {FormElementsModule} from "../../components/ui/form-components/form-elements.module";
+import {ConnectionWizardHeaderComponent} from "./connection-wizard-header/connection-wizard-header.component";
+import {ConnectionPropertiesViewComponent} from "./connection-properties-view/connection-properties-view.component";
+import {BrowserModule} from "@angular/platform-browser";
+
+@NgModule({
+ declarations: [
+ FromNodeStepComponent,
+ ToNodeStepComponent,
+ PropertiesStepComponent,
+ ConnectionWizardHeaderComponent,
+ ConnectionPropertiesViewComponent
+ ],
+ imports: [
+ FormElementsModule,
+ PropertyTableModule,
+ SelectRequirementOrCapabilityModule,
+ BrowserModule
+ ],
+ exports: [
+ FromNodeStepComponent,
+ ToNodeStepComponent,
+ PropertiesStepComponent,
+ ConnectionWizardHeaderComponent,
+ ConnectionPropertiesViewComponent
+ ],
+ entryComponents: [FromNodeStepComponent,
+ ToNodeStepComponent,
+ PropertiesStepComponent,
+ ConnectionWizardHeaderComponent,
+ ConnectionPropertiesViewComponent
+ ],
+ providers: [ConnectionWizardService]
+})
+export class ConnectionWizardModule {
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard.service.ts b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard.service.ts
new file mode 100644
index 0000000000..a097fb04ea
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard.service.ts
@@ -0,0 +1,67 @@
+import {ConnectRelationModel} from "../../../models/graph/connectRelationModel";
+import {Injectable} from "@angular/core";
+import { Requirement, Capability} from "app/models";
+import {Dictionary} from "lodash";
+import {Match, Component, PropertyFEModel} from "app/models";
+
+@Injectable()
+export class ConnectionWizardService {
+
+ connectRelationModel:ConnectRelationModel;
+ currentComponent:Component;
+ selectedMatch:Match;
+ changedCapabilityProperties:PropertyFEModel[];
+
+ constructor() {
+ this.changedCapabilityProperties = [];
+ }
+
+ public setRelationMenuDirectiveObj = (connectRelationModel:ConnectRelationModel) => {
+ this.connectRelationModel = connectRelationModel;
+ // this.selectedCapability = rel
+ }
+
+
+ // getComponentInstanceIdOfSelectedCapability = (): string => {
+ // if(this.selectedMatch.capability){
+ // if(this.selectedMatch.isFromTo) {
+ // return this.selectedMatch.toNode;
+ // } else {
+ // return this.selectedMatch.fromNode;
+ // }
+ // }
+ // return '';
+ //
+ // }
+
+ getOptionalRequirementsByInstanceUniqueId = (isFromTo: boolean, matchWith?:Capability): Dictionary<Requirement[]> => {
+ let requirements: Array<Requirement> = [];
+ _.forEach(this.connectRelationModel.possibleRelations, (match: Match) => {
+ if(!matchWith || match.capability.uniqueId == matchWith.uniqueId){
+ if(match.isFromTo == isFromTo){
+ requirements.push(match.requirement);
+ }
+ }
+ });
+ requirements = _.uniqBy(requirements, (req:Requirement)=>{
+ return req.ownerId + req.uniqueId + req.name;
+ });
+ return _.groupBy(requirements, 'capability');
+ }
+
+ getOptionalCapabilitiesByInstanceUniqueId = (isFromTo: boolean, matchWith?:Requirement): Dictionary<Capability[]> => {
+ let capabilities: Array<Capability> = [];
+ _.forEach(this.connectRelationModel.possibleRelations, (match: Match) => {
+ if(!matchWith || match.requirement.uniqueId == matchWith.uniqueId){
+ if(match.isFromTo == isFromTo){
+ capabilities.push(match.capability);
+ }
+ }
+ });
+ capabilities = _.uniqBy(capabilities, (cap:Capability)=>{
+ return cap.ownerId + cap.uniqueId + cap.name;
+ });
+ return _.groupBy(capabilities, 'type');
+ }
+}
+
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/from-node-step/from-node-step.component.html b/catalog-ui/src/app/ng2/pages/connection-wizard/from-node-step/from-node-step.component.html
new file mode 100644
index 0000000000..0c9d9e6e26
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/connection-wizard/from-node-step/from-node-step.component.html
@@ -0,0 +1,8 @@
+<select-requirement-or-capability [optionalRequirementsMap]="optionalRequirementsMap"
+ [optionalCapabilitiesMap]="optionalCapabilitiesMap"
+ [selectedReqOrCapModel]="connectWizardService.selectedMatch && (connectWizardService.selectedMatch.isFromTo ? connectWizardService.selectedMatch.requirement : connectWizardService.selectedMatch.capability)"
+ [currentComponent]="connectWizardService.currentComponent"
+ [componentInstanceId]="connectWizardService.connectRelationModel.fromNode.componentInstance.uniqueId"
+ (updateSelectedReqOrCap)="updateSelectedReqOrCap($event)"
+ (updateCapabilityProperties)="onCapabilityPropertiesUpdate($event)">
+</select-requirement-or-capability> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/from-node-step/from-node-step.component.ts b/catalog-ui/src/app/ng2/pages/connection-wizard/from-node-step/from-node-step.component.ts
new file mode 100644
index 0000000000..edbbf8a0a3
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/connection-wizard/from-node-step/from-node-step.component.ts
@@ -0,0 +1,49 @@
+import {Component, OnInit, Inject, forwardRef} from "@angular/core";
+import {IStepComponent} from "../../../../models/wizard-step";
+import {Dictionary} from "lodash";
+import { Match} from "app/models";
+import {ConnectionWizardService} from "../connection-wizard.service";
+import {Requirement} from "../../../../models/requirement";
+import {Capability} from "../../../../models/capability";
+import {PropertyModel} from "../../../../models/properties";
+
+@Component({
+ selector: 'from-node-step',
+ templateUrl: './from-node-step.component.html'
+})
+
+export class FromNodeStepComponent implements IStepComponent, OnInit{
+
+ constructor(@Inject(forwardRef(() => ConnectionWizardService)) public connectWizardService: ConnectionWizardService) {}
+
+ optionalRequirementsMap: Dictionary<Requirement[]>;
+ optionalCapabilitiesMap: Dictionary<Capability[]>;
+
+ ngOnInit(){
+ this.optionalRequirementsMap = this.connectWizardService.getOptionalRequirementsByInstanceUniqueId(true);
+ this.optionalCapabilitiesMap = this.connectWizardService.getOptionalCapabilitiesByInstanceUniqueId(false);
+ }
+
+ preventNext = ():boolean => {
+ return !this.connectWizardService.selectedMatch || (!this.connectWizardService.selectedMatch.capability && !this.connectWizardService.selectedMatch.requirement);
+ }
+
+ preventBack = ():boolean => {
+ return true;
+ }
+
+ onCapabilityPropertiesUpdate(capabilityProperties:Array<PropertyModel>) {
+ this.connectWizardService.selectedMatch.capabilityProperties = capabilityProperties;
+ }
+
+ private updateSelectedReqOrCap = (selected:Requirement|Capability):void => {
+ if(!selected){
+ this.connectWizardService.selectedMatch = null;
+ } else if(selected instanceof Requirement){
+ this.connectWizardService.selectedMatch = new Match(<Requirement>selected, null, true, this.connectWizardService.connectRelationModel.fromNode.componentInstance.uniqueId, null);
+ } else{
+ this.connectWizardService.selectedMatch = new Match(null,<Capability>selected , false, null, this.connectWizardService.connectRelationModel.fromNode.componentInstance.uniqueId);
+ }
+ }
+
+}
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.html b/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.html
new file mode 100644
index 0000000000..9e34893272
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.html
@@ -0,0 +1,13 @@
+<div class="title">
+ <span class="capability-name">
+ {{(connectWizardService.selectedMatch.capability && connectWizardService.selectedMatch.capability.getTitle()) || connectWizardService.selectedMatch.relationship.relation.capability}}
+ </span>
+</div>
+<div class="properties-table-container">
+ <properties-table class="properties-table"
+ (valueChanged)="propertyValueChanged($event)"
+ [fePropertiesMap]="capabilityPropertiesMap"
+ [selectedPropertyId]="''"
+ [hidePropertyType]="true">
+ </properties-table>
+</div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.less b/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.less
new file mode 100644
index 0000000000..8e9e07c0d5
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.less
@@ -0,0 +1,15 @@
+@import '../../../../../assets/styles/variables';
+.title{
+ margin-bottom: 20px;
+ .capability-name-label{
+ font-size: 13px;
+ }
+ .capability-name{
+ font-family: @font-opensans-medium;
+ color: @main_color_a;
+ }
+}
+.properties-table-container{
+ height: 362px;
+ overflow-y: auto;
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.ts b/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.ts
new file mode 100644
index 0000000000..3e48785a3c
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.ts
@@ -0,0 +1,67 @@
+/**
+ * Created by ob0695 on 9/4/2017.
+ */
+/**
+ * Created by rc2122 on 9/4/2017.
+ */
+import {Component, Inject, forwardRef} from '@angular/core';
+import {IStepComponent} from "app/models"
+import {ConnectionWizardService} from "../connection-wizard.service";
+import {PropertyFEModel} from "../../../../models/properties-inputs/property-fe-model";
+import {InstanceFePropertiesMap} from "../../../../models/properties-inputs/property-fe-map";
+import {PropertiesUtils} from "../../properties-assignment/services/properties.utils";
+import {ComponentInstanceServiceNg2} from "../../../services/component-instance-services/component-instance.service";
+
+@Component({
+ selector: 'properties-step',
+ templateUrl: './properties-step.component.html',
+ styleUrls: ['./properties-step.component.less']
+})
+
+export class PropertiesStepComponent implements IStepComponent{
+
+ capabilityPropertiesMap: InstanceFePropertiesMap;
+ savingProperty:boolean = false;
+
+ constructor(@Inject(forwardRef(() => ConnectionWizardService)) public connectWizardService: ConnectionWizardService, private componentInstanceServiceNg2:ComponentInstanceServiceNg2, private propertiesUtils:PropertiesUtils) {
+
+ this.capabilityPropertiesMap = this.propertiesUtils.convertPropertiesMapToFEAndCreateChildren({'capability' : connectWizardService.selectedMatch.capabilityProperties}, false);
+ }
+
+ ngOnInit() {
+ this.connectWizardService.changedCapabilityProperties = [];
+ }
+
+ onPropertySelectedUpdate = ($event) => {
+ console.log("==>" + 'PROPERTY VALUE SELECTED');
+ // this.selectedFlatProperty = $event;
+ // let parentProperty:PropertyFEModel = this.propertiesService.getParentPropertyFEModelFromPath(this.instanceFePropertiesMap[this.selectedFlatProperty.instanceName], this.selectedFlatProperty.path);
+ // parentProperty.expandedChildPropertyId = this.selectedFlatProperty.path;
+ };
+
+ propertyValueChanged = (property: PropertyFEModel) => {
+ if (!property.isDeclared) {
+ const propChangedIdx = this.connectWizardService.changedCapabilityProperties.indexOf(property);
+ if (this.componentInstanceServiceNg2.hasPropertyChanged(property)) {
+ console.log("==>" + this.constructor.name + ": propertyValueChanged " + property);
+ if (propChangedIdx === -1) {
+ this.connectWizardService.changedCapabilityProperties.push(property);
+ }
+ }
+ else {
+ if (propChangedIdx !== -1) {
+ console.log("==>" + this.constructor.name + ": propertyValueChanged (reset to original) " + property);
+ this.connectWizardService.changedCapabilityProperties.splice(propChangedIdx, 1);
+ }
+ }
+ }
+ };
+
+ preventNext = ():boolean => {
+ return false;
+ }
+
+ preventBack = ():boolean => {
+ return this.savingProperty;
+ }
+}
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/to-node-step/to-node-step.component.html b/catalog-ui/src/app/ng2/pages/connection-wizard/to-node-step/to-node-step.component.html
new file mode 100644
index 0000000000..67bb12e6fc
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/connection-wizard/to-node-step/to-node-step.component.html
@@ -0,0 +1,9 @@
+<select-requirement-or-capability [optionalRequirementsMap]="optionalRequirementsMap"
+ [optionalCapabilitiesMap]="optionalCapabilitiesMap"
+ [selectedReqOrCapModel]="connectWizardService.selectedMatch.isFromTo ? connectWizardService.selectedMatch.capability : connectWizardService.selectedMatch.requirement"
+ [selectedReqOrCapOption]="displayRequirementsOrCapabilities"
+ [currentComponent]="connectWizardService.currentComponent"
+ [componentInstanceId]="connectWizardService.connectRelationModel.toNode.componentInstance.uniqueId"
+ (updateSelectedReqOrCap)="updateSelectedReqOrCap($event)"
+ (updateCapabilityProperties)="onCapabilityPropertiesUpdate($event)">
+</select-requirement-or-capability> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/to-node-step/to-node-step.component.ts b/catalog-ui/src/app/ng2/pages/connection-wizard/to-node-step/to-node-step.component.ts
new file mode 100644
index 0000000000..9c7bf4dfe6
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/connection-wizard/to-node-step/to-node-step.component.ts
@@ -0,0 +1,69 @@
+import {Component, forwardRef, Inject} from '@angular/core';
+import {IStepComponent} from "app/models"
+import {Dictionary} from "lodash";
+import {ConnectionWizardService} from "../connection-wizard.service";
+import {Match} from "../../../../models/graph/match-relation";
+import {Requirement} from "../../../../models/requirement";
+import {Capability} from "../../../../models/capability";
+import {PropertyModel} from "../../../../models/properties";
+
+@Component({
+ selector: 'to-node-step',
+ templateUrl: './to-node-step.component.html'
+})
+
+export class ToNodeStepComponent implements IStepComponent{
+
+ displayRequirementsOrCapabilities:string; //get 'Requirement' or 'Capability'
+ optionalRequirementsMap: Dictionary<Requirement[]> = {};
+ optionalCapabilitiesMap: Dictionary<Capability[]> ={};
+
+ constructor(@Inject(forwardRef(() => ConnectionWizardService)) public connectWizardService: ConnectionWizardService) {
+ }
+
+ ngOnInit(){
+ if(this.connectWizardService.selectedMatch.isFromTo){
+ this.displayRequirementsOrCapabilities = 'Capability';
+ this.optionalRequirementsMap = {};
+ this.optionalCapabilitiesMap = this.connectWizardService.getOptionalCapabilitiesByInstanceUniqueId(true, this.connectWizardService.selectedMatch.requirement);
+ }else{
+ this.displayRequirementsOrCapabilities = 'Requirement';
+ this.optionalRequirementsMap = this.connectWizardService.getOptionalRequirementsByInstanceUniqueId(false, this.connectWizardService.selectedMatch.capability);
+ this.optionalCapabilitiesMap = {}
+ }
+
+
+ }
+
+ preventNext = ():boolean => {
+ return !this.connectWizardService.selectedMatch.capability || !this.connectWizardService.selectedMatch.requirement;
+ }
+
+ preventBack = ():boolean => {
+ return false;
+ }
+
+ onCapabilityPropertiesUpdate(capabilityProperties:Array<PropertyModel>) {
+ this.connectWizardService.selectedMatch.capabilityProperties = capabilityProperties;
+ }
+
+ private updateSelectedReqOrCap = (selected:Requirement|Capability):void => {
+ if (!selected) {
+ if (this.connectWizardService.selectedMatch.isFromTo) {
+ this.connectWizardService.selectedMatch.capability = undefined;
+ this.connectWizardService.selectedMatch.toNode = undefined;
+ } else {
+ this.connectWizardService.selectedMatch.requirement = undefined;
+ this.connectWizardService.selectedMatch.fromNode = undefined;
+ }
+ } else if (selected instanceof Requirement) {
+ this.connectWizardService.selectedMatch.requirement = <Requirement>selected;
+ this.connectWizardService.selectedMatch.fromNode = this.connectWizardService.connectRelationModel.toNode.componentInstance.uniqueId;
+ } else {
+ this.connectWizardService.selectedMatch.capability = <Capability>selected;
+ this.connectWizardService.selectedMatch.toNode = this.connectWizardService.connectRelationModel.toNode.componentInstance.uniqueId;
+ }
+ this.connectWizardService.selectedMatch.relationship = undefined;
+ }
+
+}