Add 'Req & Cap' screen for VF/PNF/Service - UI

 Issue-ID: SDC-2142

Change-Id: I23a2de18862e18389f801cbec3e452d7094df8e9
Signed-off-by: miriame <miriam.eini@amdocs.com>

11 files changed, 595 insertions, 3 deletions

diff --git a/catalog-ui/src/app/ng2/app.module.ts b/catalog-ui/src/app/ng2/app.module.ts
index 1ae2df2d82..0ff9378949 100644
--- a/catalog-ui/src/app/ng2/app.module.ts
+++ b/catalog-ui/src/app/ng2/app.module.ts
@@ -43,6 +43,7 @@ import { ComponentServiceFactoryNg2 } from "./services/component-services/compon
 import { ServiceServiceNg2 } from "./services/component-services/service.service";
 import { ComponentInstanceServiceNg2 } from "./services/component-instance-services/component-instance.service";
 import { WorkflowServiceNg2 } from './services/workflow.service';
+import {ToscaTypesServiceNg2} from "./services/tosca-types.service";
 import { ModalService } from "./services/modal.service";
 import { UiElementsModule } from "./components/ui/ui-elements.module";
 import { ConnectionWizardModule } from "./pages/connection-wizard/connection-wizard.module";
@@ -73,6 +74,8 @@ import {GroupsService} from "./services/groups.service";
 import {PoliciesService} from "./services/policies.service";
 import {AutomatedUpgradeService} from "./pages/automated-upgrade/automated-upgrade.service";
 import {AutomatedUpgradeModule} from "./pages/automated-upgrade/automated-upgrade.module";
+import {RequirementsEditorModule} from "./pages/req-and-capabilities-editor/requirements-editor/requirements-editor.module"
+import {CapabilitiesEditorModule} from "./pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.module"
 
 export const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule));
 
@@ -114,12 +117,14 @@ export function configServiceFactory(config: ConfigService) {
         ServicePathModule,
         ServicePathSelectorModule,
         ServiceDependenciesModule,
-        ServiceDependenciesEditorModule
+        ServiceDependenciesEditorModule,
+        RequirementsEditorModule,
+        CapabilitiesEditorModule
     ],
     exports: [],
     entryComponents: [
         // *** sdc-ui components to be used as downgraded:
-        // SdcUiComponents.ButtonComponent
+        SdcUiComponents.SvgIconComponent
     ],
     providers: [
         WindowRef,
@@ -143,6 +148,7 @@ export function configServiceFactory(config: ConfigService) {
         ServiceServiceNg2,
         AutomatedUpgradeService,
         WorkflowServiceNg2,
+        ToscaTypesServiceNg2,
         HttpService,
         UserService,
         PoliciesService,
diff --git a/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.component.html b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.component.html
new file mode 100644
index 0000000000..c0bfc8a1a5
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.component.html
@@ -0,0 +1,92 @@
+<div class="capability-editor">
+    <form class="w-sdc-form">
+        <div class="i-sdc-form-content-capability-content">
+            <div class="content-row">
+                <div class="i-sdc-form-item">
+                    <sdc-input
+                            label="{{ 'CAP_NAME' | translate}}"
+                            required="true"
+                            class="i-sdc-form-input"
+                            testId="capName"
+                            [disabled]="isReadonly"
+                            [(value)]="capabilityData.name"
+                            (valueChange)="validityChanged()">
+                    </sdc-input>
+                </div>
+            </div>
+
+            <div class="group-with-border">
+                <div class="content-row i-sdc-form-item">
+                    <sdc-dropdown
+                            label="{{ 'CAP_TYPE' | translate}}"
+                            required="true"
+                            class="i-sdc-form-select"
+                            testId="capType"
+                            [disabled]="isReadonly"
+                            [options]="capabilityTypesMappedList"
+                            selectedOption="{{capabilityData.type}}"
+                            (changed)="onSelectCapabilityType($event)">
+                    </sdc-dropdown>
+                </div>
+                <div class="content-row i-sdc-form-item">
+                    <label class="i-sdc-form-label"> {{ 'CAP_DESCRIPTION' | translate}} </label>
+                    <textarea
+                            rows="3"
+                            class="i-sdc-form-input description"
+                            data-tests-id="capDesc"
+                            disabled
+                            value="{{capabilityData.description}}">
+                    </textarea>
+                </div>
+                <div class="content-row i-sdc-form-item">
+                    <label class="i-sdc-form-label valid-source-label"> {{ 'CAP_VALID_SOURCE' | translate}} </label>
+                    <textarea
+                            rows="2"
+                            class="i-sdc-form-input"
+                            data-tests-id="capValidSrc"
+                            disabled
+                            value="{{capabilityData.validSourceTypes}}">
+                    </textarea>
+                </div>
+            </div>
+
+            <label class="i-sdc-form-label occurrences-label"> {{ 'REQ_CAP_OCCURRENCES' | translate}} </label>
+            <div class="content-row occurrences-section">
+                <div class="min-occurrences-value">
+                    <sdc-input
+                            label="{{ 'REQ_CAP_OCCURRENCES_MIN' | translate}}"
+                            class="i-sdc-form-input"
+                            testId="capOccurrencesMin"
+                            [disabled]="isReadonly"
+                            [(value)]="capabilityData.minOccurrences"
+                            (valueChange)="validityChanged()"
+                            type="number">
+                    </sdc-input>
+                </div>
+                <div class="sdc-input">
+                    <label class="sdc-input__label"> {{ 'REQ_CAP_OCCURRENCES_MAX' | translate}} </label>
+                    <div class="max-occurrences-value">
+                        <sdc-checkbox
+                                class="checkbox-label unbounded-value"
+                                testId="capOccurrencesMaxUnbounded"
+                                label="{{translatedUnboundTxt.toLowerCase()}}"
+                                (checkedChange)="onUnboundedChanged()"
+                                [checked]="isUnboundedChecked"
+                                [disabled]="isReadonly">
+                        </sdc-checkbox>
+
+                        <sdc-input
+                                *ngIf="!isUnboundedChecked"
+                                class="i-sdc-form-input"
+                                testId="capOccurrencesMax"
+                                [disabled]="isReadonly"
+                                [(value)]="capabilityData.maxOccurrences"
+                                (valueChange)="validityChanged()"
+                                type="number">
+                        </sdc-input>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.component.less b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.component.less
new file mode 100644
index 0000000000..915628117e
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.component.less
@@ -0,0 +1,38 @@
+@import '../../../../../assets/styles/variables.less';
+
+.capability-editor {
+  .i-sdc-form-content-capability-content {
+    padding: 10px 25px;
+    .group-with-border {
+      margin: 25px 0;
+      padding: 15px 0;
+      border-top: 1px solid @tlv_color_u;
+      border-bottom: 1px solid @tlv_color_u;
+      .content-row:not(:last-of-type) {
+        padding-bottom: 13px;
+      }
+    }
+
+    .occurrences-label {
+      font-family: @font-opensans-bold;
+      margin-bottom: 19px;
+    }
+    .occurrences-section, /deep/ .max-occurrences-value {
+      display: flex;
+      .min-occurrences-value {
+        padding-right: 30px;
+      }
+      .unbounded-value {
+        padding-top: 7px;
+        padding-right: 20px;
+        .sdc-checkbox__label {
+          text-transform: capitalize;
+        }
+      }
+    }
+    textarea {
+      min-height: unset;
+      height: unset;
+    }
+  }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.component.ts b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.component.ts
new file mode 100644
index 0000000000..82e2e464cc
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.component.ts
@@ -0,0 +1,73 @@
+import {Component} from '@angular/core';
+import {ServiceServiceNg2} from "app/ng2/services/component-services/service.service";
+import {Capability, CapabilityTypeModel} from 'app/models';
+import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
+import {TranslateService} from 'app/ng2/shared/translator/translate.service';
+
+@Component({
+    selector: 'capabilities-editor',
+    templateUrl: './capabilities-editor.component.html',
+    styleUrls: ['./capabilities-editor.component.less'],
+    providers: [ServiceServiceNg2]
+})
+
+export class CapabilitiesEditorComponent {
+    input: {
+        capability: Capability,
+        capabilityTypesList: Array<CapabilityTypeModel>,
+        isReadonly: boolean;
+        validityChangedCallback: Function;
+    };
+    capabilityData: Capability;
+    capabilityTypesMappedList: Array<DropdownValue>;
+    isUnboundedChecked: boolean;
+    isReadonly: boolean;
+    translatedUnboundTxt: string;
+
+    constructor(private translateService: TranslateService) {
+    }
+
+    ngOnInit() {
+        this.capabilityData = new Capability(this.input.capability);
+        this.translatedUnboundTxt = '';
+        this.capabilityData.minOccurrences = this.capabilityData.minOccurrences || 0;
+        this.translateService.languageChangedObservable.subscribe(lang => {
+            this.translatedUnboundTxt = this.translateService.translate('REQ_CAP_OCCURRENCES_UNBOUNDED');
+            this.capabilityData.maxOccurrences = this.capabilityData.maxOccurrences || this.translatedUnboundTxt;
+            this.isUnboundedChecked = this.capabilityData.maxOccurrences === this.translatedUnboundTxt;
+        });
+        this.capabilityTypesMappedList = _.map(this.input.capabilityTypesList, capType => new DropdownValue(capType.toscaPresentation.type, capType.toscaPresentation.type));
+        this.isReadonly = this.input.isReadonly;
+        this.validityChanged();
+    }
+
+    onUnboundedChanged() {
+        this.isUnboundedChecked = !this.isUnboundedChecked;
+        this.capabilityData.maxOccurrences = this.isUnboundedChecked ? this.translatedUnboundTxt : null;
+        this.validityChanged();
+    }
+
+    checkFormValidForSubmit() {
+        return this.capabilityData.name && this.capabilityData.name.length &&
+            this.capabilityData.type && this.capabilityData.type.length && !_.isEqual(this.capabilityData.minOccurrences, "") && this.capabilityData.minOccurrences >= 0 &&
+            (
+                this.isUnboundedChecked ||
+                (this.capabilityData.maxOccurrences && (this.capabilityData.minOccurrences <= parseInt(this.capabilityData.maxOccurrences)))
+            );
+    }
+
+    onSelectCapabilityType(selectedCapType: DropdownValue) {
+        this.capabilityData.type = selectedCapType && selectedCapType.value;
+        if (selectedCapType && selectedCapType.value) {
+            let selectedCapabilityTypeObj: CapabilityTypeModel = this.input.capabilityTypesList.find(capType => capType.toscaPresentation.type === selectedCapType.value);
+            this.capabilityData.description = selectedCapabilityTypeObj.toscaPresentation.description;
+            this.capabilityData.validSourceTypes = selectedCapabilityTypeObj.toscaPresentation.validTargetTypes;
+        }
+        this.validityChanged();
+    }
+
+    validityChanged = () => {
+        let validState = this.checkFormValidForSubmit();
+        this.input.validityChangedCallback(validState);
+    }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.module.ts b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.module.ts
new file mode 100644
index 0000000000..1e767a5690
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.module.ts
@@ -0,0 +1,28 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {CapabilitiesEditorComponent} from "./capabilities-editor.component";
+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 {TranslateModule} from 'app/ng2/shared/translator/translate.module';
+import {SdcUiComponentsModule} from "sdc-ui/lib/angular/index";
+
+@NgModule({
+    declarations: [
+        CapabilitiesEditorComponent
+    ],
+    imports: [CommonModule,
+        FormsModule,
+        FormElementsModule,
+        UiElementsModule,
+        TranslateModule,
+        SdcUiComponentsModule
+    ],
+    exports: [],
+    entryComponents: [
+        CapabilitiesEditorComponent
+    ],
+    providers: []
+})
+export class CapabilitiesEditorModule {
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/requirements-editor/requirements-editor.component.html b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/requirements-editor/requirements-editor.component.html
new file mode 100644
index 0000000000..0fe326efb9
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/requirements-editor/requirements-editor.component.html
@@ -0,0 +1,88 @@
+<div class="requirement-editor">
+    <form class="w-sdc-form">
+        <div class="i-sdc-form-content-requirement-content">
+            <div class="content-row">
+                <div class="i-sdc-form-item">
+                    <sdc-input
+                            label="{{ 'REQ_NAME' | translate}}"
+                            required="true"
+                            testId="reqName"
+                            [disabled]="isReadonly"
+                            [(value)]="requirementData.name"
+                            (valueChange)="validityChanged()">
+                    </sdc-input>
+                </div>
+            </div>
+
+            <div class="group-with-border">
+                <div class="content-row i-sdc-form-item">
+                    <sdc-dropdown
+                            label="{{ 'REQ_RELATED_CAPABILITY' | translate}}"
+                            testId="reqRelatedCapability"
+                            required="true"
+                            [disabled]="isReadonly"
+                            [options]="capabilityTypesMappedList"
+                            selectedOption="{{requirementData.capability}}"
+                            (changed)="onCapabilityChanged($event)">
+                    </sdc-dropdown>
+                </div>
+                <div class="content-row i-sdc-form-item">
+                    <sdc-dropdown
+                            label="{{ 'REQ_NODE' | translate}}"
+                            testId="reqNode"
+                            [disabled]="isReadonly"
+                            [options]="nodeTypesMappedList"
+                            selectedOption="{{requirementData.node}}"
+                            (changed)="onNodeChanged($event)">
+                    </sdc-dropdown>
+                </div>
+                <div class="content-row i-sdc-form-item">
+                    <sdc-dropdown
+                            label="{{ 'REQ_RELATIONSHIP' | translate}}"
+                            testId="reqRelationship"
+                            [disabled]="isReadonly"
+                            [options]="relationshipTypesMappedList"
+                            selectedOption="{{requirementData.relationship}}"
+                            (changed)="onRelationshipChanged($event)">
+                    </sdc-dropdown>
+                </div>
+            </div>
+
+            <label class="i-sdc-form-label occurrences-label"> {{ 'REQ_CAP_OCCURRENCES' | translate}} </label>
+            <div class="content-row occurrences-section">
+                <div class="min-occurrences-value">
+                    <sdc-input
+                            label="{{ 'REQ_CAP_OCCURRENCES_MIN' | translate}}"
+                            testId="reqOccurrencesMin"
+                            [disabled]="isReadonly"
+                            [(value)]="requirementData.minOccurrences"
+                            (valueChange)="validityChanged()"
+                            type="number">
+                    </sdc-input>
+                </div>
+                <div class="sdc-input">
+                    <label class="sdc-input__label"> {{ 'REQ_CAP_OCCURRENCES_MAX' | translate}} </label>
+                    <div class="max-occurrences-value">
+                        <sdc-checkbox
+                                class="checkbox-label unbounded-value"
+                                testId="reqOccurrencesMaxUnbounded"
+                                label="{{translatedUnboundTxt.toLowerCase()}}"
+                                (checkedChange)="onUnboundedChanged()"
+                                [checked]="isUnboundedChecked"
+                                [disabled]="isReadonly">
+                        </sdc-checkbox>
+                        <sdc-input
+                                *ngIf="!isUnboundedChecked"
+                                testId="reqOccurrencesMax"
+                                [disabled]="isReadonly"
+                                [(value)]="requirementData.maxOccurrences"
+                                (valueChange)="validityChanged()"
+                                type="number">
+                        </sdc-input>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </form>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/requirements-editor/requirements-editor.component.less b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/requirements-editor/requirements-editor.component.less
new file mode 100644
index 0000000000..f0ae3bf3ac
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/requirements-editor/requirements-editor.component.less
@@ -0,0 +1,35 @@
+@import '../../../../../assets/styles/variables.less';
+
+.requirement-editor {
+  .i-sdc-form-content-requirement-content {
+    padding: 10px 25px;
+
+    .group-with-border {
+      margin: 25px 0;
+      padding: 15px 0;
+      border-top: 1px solid @tlv_color_u;
+      border-bottom: 1px solid @tlv_color_u;
+      .content-row:not(:last-of-type) {
+        padding-bottom: 13px;
+      }
+    }
+
+    .occurrences-label {
+      font-family: @font-opensans-bold;
+      margin-bottom: 19px;
+    }
+    .occurrences-section, /deep/ .max-occurrences-value {
+      display: flex;
+      .min-occurrences-value {
+        padding-right: 30px;
+      }
+      .unbounded-value {
+        padding-top: 7px;
+        padding-right: 20px;
+        .sdc-checkbox__label {
+          text-transform: capitalize;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/requirements-editor/requirements-editor.component.ts b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/requirements-editor/requirements-editor.component.ts
new file mode 100644
index 0000000000..464b581997
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/requirements-editor/requirements-editor.component.ts
@@ -0,0 +1,88 @@
+import {Component} from '@angular/core';
+import {ServiceServiceNg2} from "app/ng2/services/component-services/service.service";
+import {Requirement, RelationshipTypeModel, NodeTypeModel, CapabilityTypeModel} from 'app/models';
+import {TranslateService} from 'app/ng2/shared/translator/translate.service';
+import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
+
+@Component({
+    selector: 'requirements-editor',
+    templateUrl: 'requirements-editor.component.html',
+    styleUrls: ['requirements-editor.component.less'],
+    providers: [ServiceServiceNg2, TranslateService]
+})
+
+export class RequirementsEditorComponent {
+
+    input: {
+        requirement: Requirement,
+        relationshipTypesList: Array<RelationshipTypeModel>;
+        nodeTypesList: Array<NodeTypeModel>;
+        capabilityTypesList: Array<CapabilityTypeModel>;
+        isReadonly: boolean;
+        validityChangedCallback: Function;
+    };
+    requirementData: Requirement;
+    capabilityTypesMappedList: Array<DropdownValue>;
+    relationshipTypesMappedList: Array<DropdownValue>;
+    nodeTypesMappedList: Array<DropdownValue>;
+    isUnboundedChecked: boolean;
+    isReadonly: boolean;
+    translatedUnboundTxt: string;
+
+    constructor(private translateService: TranslateService) {
+    }
+
+    ngOnInit() {
+        this.requirementData = new Requirement(this.input.requirement);
+        this.requirementData.minOccurrences = this.requirementData.minOccurrences || 0;
+        this.translatedUnboundTxt = '';
+        this.capabilityTypesMappedList = _.map(this.input.capabilityTypesList, capType => new DropdownValue(capType.toscaPresentation.type, capType.toscaPresentation.type));
+        this.relationshipTypesMappedList = _.map(this.input.relationshipTypesList, rType => new DropdownValue(rType.toscaPresentation.type, rType.toscaPresentation.type));
+        this.nodeTypesMappedList = _.map(this.input.nodeTypesList, nodeType => {
+            return new DropdownValue(
+                nodeType.componentMetadataDefinition.componentMetadataDataDefinition.toscaResourceName,
+                nodeType.componentMetadataDefinition.componentMetadataDataDefinition.toscaResourceName)
+        });
+        this.translateService.languageChangedObservable.subscribe(lang => {
+            this.translatedUnboundTxt = this.translateService.translate('REQ_CAP_OCCURRENCES_UNBOUNDED');
+            this.requirementData.maxOccurrences = this.requirementData.maxOccurrences || this.translatedUnboundTxt;
+            this.isUnboundedChecked = this.requirementData.maxOccurrences === this.translatedUnboundTxt;
+        });
+        this.isReadonly = this.input.isReadonly;
+        this.validityChanged();
+    }
+
+    onUnboundedChanged() {
+        this.isUnboundedChecked = !this.isUnboundedChecked;
+        this.requirementData.maxOccurrences = this.isUnboundedChecked ? this.translatedUnboundTxt : null;
+        this.validityChanged();
+    }
+
+    onCapabilityChanged(selectedCapability: DropdownValue) {
+        this.requirementData.capability = selectedCapability && selectedCapability.value;
+        this.validityChanged();
+    }
+
+    onNodeChanged(selectedNode: DropdownValue) {
+        this.requirementData.node = selectedNode && selectedNode.value;
+    }
+
+    onRelationshipChanged(selectedRelationship: DropdownValue) {
+        this.requirementData.relationship = selectedRelationship && selectedRelationship.value;
+    }
+
+    checkFormValidForSubmit() {
+        return this.requirementData.name && this.requirementData.name.length &&
+            this.requirementData.capability && this.requirementData.capability.length && !_.isEqual(this.requirementData.minOccurrences, "") && this.requirementData.minOccurrences >= 0 &&
+            (
+                this.isUnboundedChecked ||
+                (this.requirementData.maxOccurrences && (this.requirementData.minOccurrences <= parseInt(this.requirementData.maxOccurrences)))
+            );
+    }
+
+    validityChanged = () => {
+        let validState = this.checkFormValidForSubmit();
+        this.input.validityChangedCallback(validState);
+    }
+
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/requirements-editor/requirements-editor.module.ts b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/requirements-editor/requirements-editor.module.ts
new file mode 100644
index 0000000000..1be8be51af
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/requirements-editor/requirements-editor.module.ts
@@ -0,0 +1,26 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {RequirementsEditorComponent} from "./requirements-editor.component";
+import {FormsModule} from "@angular/forms";
+import {FormElementsModule} from "../../../components/ui/form-components/form-elements.module";
+import {TranslateModule} from 'app/ng2/shared/translator/translate.module';
+import {SdcUiComponentsModule} from "sdc-ui/lib/angular/index";
+
+@NgModule({
+    declarations: [
+        RequirementsEditorComponent
+    ],
+    imports: [CommonModule,
+        FormsModule,
+        FormElementsModule,
+        TranslateModule,
+        SdcUiComponentsModule
+    ],
+    exports: [],
+    entryComponents: [
+        RequirementsEditorComponent
+    ],
+    providers: []
+})
+export class RequirementsEditorModule {
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/services/component-services/component.service.ts b/catalog-ui/src/app/ng2/services/component-services/component.service.ts
index 41bfc4e088..46dfe01992 100644
--- a/catalog-ui/src/app/ng2/services/component-services/component.service.ts
+++ b/catalog-ui/src/app/ng2/services/component-services/component.service.ts
@@ -25,7 +25,8 @@ import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/toPromise';
 import {Response, URLSearchParams} from '@angular/http';
 import { Component, ComponentInstance, InputBEModel, InstancePropertiesAPIMap, FilterPropertiesAssignmentData,
-    PropertyBEModel, OperationModel, BEOperationModel} from "app/models";
+    PropertyBEModel, OperationModel, BEOperationModel, Capability, Requirement
+} from "app/models";
 import {downgradeInjectable} from '@angular/upgrade/static';
 import {COMPONENT_FIELDS, CommonUtils, SERVICE_FIELDS} from "app/utils";
 import {ComponentGenericResponse} from "../responses/component-generic-response";
@@ -207,6 +208,68 @@ export class ComponentServiceNg2 {
         return this.getComponentDataByFieldsName(componentType, componentId, [COMPONENT_FIELDS.COMPONENT_REQUIREMENTS, COMPONENT_FIELDS.COMPONENT_CAPABILITIES]);
     }
 
+    createCapability(component: Component, capabilityData: Capability): Observable<Array<Capability>> {
+        let capBEObj = {
+            'capabilities': {
+                [capabilityData.type]: [capabilityData]
+            }
+        };
+        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/capabilities', capBEObj)
+            .map((res: Response) => {
+                return res.json();
+            });
+    }
+
+    updateCapability(component: Component, capabilityData: Capability): Observable<Array<Capability>> {
+        let capBEObj = {
+            'capabilities': {
+                [capabilityData.type]: [capabilityData]
+            }
+        };
+        return this.http.put(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/capabilities', capBEObj)
+            .map((res: Response) => {
+                return res.json();
+            });
+    }
+
+    deleteCapability(component: Component, capId: string): Observable<Capability> {
+        return this.http.delete(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/capabilities/' + capId)
+            .map((res: Response) => {
+                return res.json();
+            });
+    }
+
+    createRequirement(component: Component, requirementData: Requirement): Observable<any> {
+        let reqBEObj = {
+            'requirements': {
+                [requirementData.capability]: [requirementData]
+            }
+        };
+        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/requirements', reqBEObj)
+            .map((res: Response) => {
+                return res.json();
+            });
+    }
+
+    updateRequirement(component: Component, requirementData: Requirement): Observable<any> {
+        let reqBEObj = {
+            'requirements': {
+                [requirementData.capability]: [requirementData]
+            }
+        };
+        return this.http.put(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/requirements', reqBEObj)
+            .map((res: Response) => {
+                return res.json();
+            });
+    }
+
+    deleteRequirement(component: Component, reqId: string): Observable<Requirement> {
+        return this.http.delete(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/requirements/' + reqId)
+            .map((res: Response) => {
+                return res.json();
+            });
+    }
+
     getDeploymentGraphData(component:Component):Observable<ComponentGenericResponse> {
         return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INSTANCES_RELATION, COMPONENT_FIELDS.COMPONENT_INSTANCES, COMPONENT_FIELDS.COMPONENT_GROUPS]);
     }
diff --git a/catalog-ui/src/app/ng2/services/tosca-types.service.ts b/catalog-ui/src/app/ng2/services/tosca-types.service.ts
new file mode 100644
index 0000000000..66826c0fef
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/tosca-types.service.ts
@@ -0,0 +1,55 @@
+/*!
+ * Copyright © 2016-2018 European Support Limited
+ *
+ * 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.
+ */
+
+import {Injectable, Inject} from '@angular/core';
+import {Observable} from 'rxjs/Observable';
+import {HttpService} from './http.service';
+import {SdcConfigToken, ISdcConfig} from "../config/sdc-config.config";
+import {CapabilityTypesMap, NodeTypesMap, RelationshipTypesMap} from "app/models";
+import {Response} from '@angular/http';
+
+declare var angular: angular.IAngularStatic;
+
+@Injectable()
+export class ToscaTypesServiceNg2 {
+
+    protected baseUrl;
+
+    constructor(protected http: HttpService, @Inject(SdcConfigToken) sdcConfig: ISdcConfig) {
+        this.baseUrl = sdcConfig.api.root + sdcConfig.api.component_api_root;
+    }
+
+    fetchRelationshipTypes(): Observable<RelationshipTypesMap> {
+        return this.http.get(this.baseUrl + 'relationshipTypes')
+            .map((res: Response) => {
+                return res.json();
+            });
+    }
+
+    fetchNodeTypes(): Observable<NodeTypesMap> {
+        return this.http.get(this.baseUrl + 'nodeTypes')
+            .map((res: Response) => {
+                return res.json();
+            });
+    }
+
+    fetchCapabilityTypes(): Observable<CapabilityTypesMap> {
+        return this.http.get(this.baseUrl + 'capabilityTypes')
+            .map((res: Response) => {
+                return res.json();
+            });
+    }
+}