Support Capability Properties

This change includes following changes
1. Get capability properties from global types- BE
2. Show capability properties in cap/req screen
3. Support Capability Properties in assingment, operation and consumption screens

Change-Id: Ieb4fa5705007c8bed3d82eb4fe4604572aa202d7
Issue-ID: SDC-2294
Signed-off-by: Mojahidul Islam <mojahidul.islam@amdocs.com>

5 files changed, 81 insertions, 18 deletions

diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts
index 9db24b6071..c2a9582ed4 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts
@@ -9,14 +9,20 @@ import {Observable} from "rxjs/Observable";
 
 import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component';
 import {ModalService} from 'app/ng2/services/modal.service';
-import {ModalModel, ButtonModel, InputBEModel, OperationModel, InterfaceModel, WORKFLOW_ASSOCIATION_OPTIONS} from 'app/models';
+import {
+    InputBEModel,
+    OperationModel,
+    InterfaceModel,
+    WORKFLOW_ASSOCIATION_OPTIONS,
+    CapabilitiesGroup,
+    Capability
+} from 'app/models';
 
 import {IModalConfig, IModalButtonComponent} from "sdc-ui/lib/angular/modals/models/modal-config";
 import {SdcUiComponents} from "sdc-ui/lib/angular";
 import {ModalButtonComponent} from "sdc-ui/lib/angular/components";
 
 import {ComponentServiceNg2} from 'app/ng2/services/component-services/component.service';
-import {ComponentGenericResponse} from 'app/ng2/services/responses/component-generic-response';
 import {WorkflowServiceNg2} from 'app/ng2/services/workflow.service';
 import {PluginsService} from "app/ng2/services/plugins.service";
 
@@ -114,6 +120,7 @@ export class InterfaceOperationComponent {
     modalTranslation: ModalTranslation;
     workflowIsOnline: boolean;
     workflows: Array<any>;
+    capabilities: CapabilitiesGroup;
 
     @Input() component: IComponent;
     @Input() readonly: boolean;
@@ -141,7 +148,8 @@ export class InterfaceOperationComponent {
         Observable.forkJoin(
             this.ComponentServiceNg2.getInterfaces(this.component),
             this.ComponentServiceNg2.getComponentInputs(this.component),
-            this.ComponentServiceNg2.getInterfaceTypes(this.component)
+            this.ComponentServiceNg2.getInterfaceTypes(this.component),
+            this.ComponentServiceNg2.getCapabilitiesAndRequirements(this.component.componentType, this.component.uniqueId)
         ).subscribe((response: Array<any>) => {
             const callback = (workflows) => {
                 this.isLoading = false;
@@ -150,6 +158,7 @@ export class InterfaceOperationComponent {
                 this.inputs = response[1].inputs;
                 this.interfaceTypes = response[2];
                 this.workflows = workflows;
+                this.capabilities = response[3].capabilities;
             };
             if (this.enableWorkflowAssociation && this.workflowIsOnline) {
                 this.WorkflowServiceNg2.getWorkflows().subscribe(
@@ -267,7 +276,8 @@ export class InterfaceOperationComponent {
             readonly: this.readonly,
             interfaceTypes: this.interfaceTypes,
             validityChangedCallback: this.enableOrDisableSaveButton,
-            workflowIsOnline: this.workflowIsOnline
+            workflowIsOnline: this.workflowIsOnline,
+            capabilities: _.filter(CapabilitiesGroup.getFlattenedCapabilities(this.capabilities), (capability: Capability) => capability.ownerId === this.component.uniqueId)
         };
 
         const modalConfig: IModalConfig = {
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html
index 8f70f7f584..ec056ad6f2 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html
@@ -184,16 +184,17 @@
             </div>
 
             <param-row
-                *ngFor="let param of tableParameters"
-                class="data-row"
-                [isInputParam]="currentTab === TYPE_INPUT"
-                [isAssociateWorkflow]="isUsingExistingWF()"
-                [param]="param"
-                [inputProps]="inputProperties"
-                [operationOutputs]="operationOutputs"
-                [onRemoveParam]="onRemoveParam"
-                [readonly]="readonly"
-                [validityChanged]="validityChanged">
+                    *ngFor="let param of tableParameters"
+                    class="data-row"
+                    [isInputParam]="currentTab === TYPE_INPUT"
+                    [isAssociateWorkflow]="isUsingExistingWF()"
+                    [param]="param"
+                    [inputProps]="inputProperties"
+                    [capabilitiesProps]="componentCapabilities"
+                    [operationOutputs]="operationOutputs"
+                    [onRemoveParam]="onRemoveParam"
+                    [readonly]="readonly"
+                    [validityChanged]="validityChanged">
             </param-row>
         </div>
 
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts
index a574460478..e12905654b 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts
@@ -5,7 +5,15 @@ import {Subscription} from "rxjs/Subscription";
 
 import {TranslateService} from "app/ng2/shared/translator/translate.service";
 import {WorkflowServiceNg2} from 'app/ng2/services/workflow.service';
-import {InterfaceModel, OperationModel, OperationParameter, InputBEModel, RadioButtonModel, WORKFLOW_ASSOCIATION_OPTIONS} from 'app/models';
+import {
+    InterfaceModel,
+    OperationModel,
+    OperationParameter,
+    InputBEModel,
+    RadioButtonModel,
+    WORKFLOW_ASSOCIATION_OPTIONS,
+    Capability
+} from 'app/models';
 
 import {IDropDownOption} from "sdc-ui/lib/angular/form-elements/dropdown/dropdown-models";
 import {Tabs, Tab} from "app/ng2/components/ui/tabs/tabs.component";
@@ -39,7 +47,8 @@ export interface OperationCreatorInput {
     readonly: boolean,
     interfaceTypes: { [interfaceType: string]: Array<string> },
     validityChangedCallback: Function,
-    workflowIsOnline: boolean;
+    workflowIsOnline: boolean,
+    capabilities: Array<Capability>
 }
 
 @Component({
@@ -59,6 +68,7 @@ export class OperationCreatorComponent implements OperationCreatorInput {
     interfaceTypes: { [interfaceType: string]: Array<string> };
     operationNames: Array<TypedDropDownOption> = [];
     validityChangedCallback: Function;
+    capabilities: Array<Capability>;
 
     allWorkflows: Array<any>;
     workflows: Array<DropdownValue> = [];
@@ -73,6 +83,7 @@ export class OperationCreatorComponent implements OperationCreatorInput {
     outputParameters: Array<OperationParameter> = [];
     noAssignOutputParameters: Array<OperationParameter> = [];
     assignOutputParameters: { [key: string]: { [key: string]: Array<OperationParameter>; }; } = {};
+    componentCapabilities: Array<Capability> = [];
 
     tableParameters: Array<OperationParameter> = [];
     operationOutputs: Array<OperationModel> = [];
@@ -171,6 +182,7 @@ export class OperationCreatorComponent implements OperationCreatorInput {
             }
         }
         this.reconstructOperation();
+        this.filterCapabilities();
         this.validityChanged();
         this.updateTable();
     }
@@ -217,6 +229,10 @@ export class OperationCreatorComponent implements OperationCreatorInput {
 
     }
 
+    filterCapabilities() {
+        this.componentCapabilities = _.filter(this.capabilities, (cap: Capability) => cap.properties);
+    }
+
     buildParams = () => {
 
         if (this.inputOperation.outputs) {
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html
index 3ac9328487..4a4782eaee 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html
@@ -58,6 +58,15 @@
                 {{output.label}}
             </option>
         </optgroup>
+        <optgroup
+                *ngFor="let cap of filteredCapabilitiesProps"
+                label="{{cap.capabilityName}}">
+            <option
+                    *ngFor="let prop of cap.properties"
+                    [ngValue]="prop.value">
+                {{prop.label}}
+            </option>
+        </optgroup>
     </select>
     <span
         *ngIf="!filteredInputProps.length && !operationOutputCats.length && isAssociateWorkflow"
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts
index bdf1003a64..c18fb82094 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts
@@ -1,7 +1,6 @@
 import {Component, Input} from '@angular/core';
 import {DataTypeService} from "app/ng2/services/data-type.service";
-import {OperationModel, OperationParameter, InputBEModel, DataTypeModel} from 'app/models';
-import {DropDownOption} from "../operation-creator.component";
+import {OperationModel, OperationParameter, InputBEModel, DataTypeModel, Capability} from 'app/models';
 import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
 
 class DropdownValueType extends DropdownValue {
@@ -25,6 +24,7 @@ export class ParamRowComponent {
     @Input() param: OperationParameter;
     @Input() inputProps: Array<InputBEModel>;
     @Input() operationOutputs: Array<OperationModel>;
+    @Input() capabilitiesProps: Array<Capability>;
     @Input() onRemoveParam: Function;
     @Input() isAssociateWorkflow: boolean;
     @Input() readonly: boolean;
@@ -34,6 +34,7 @@ export class ParamRowComponent {
     propTypeEnum: Array<string> = [];
     operationOutputCats: Array<{ operationName: string, outputs: Array<DropdownValueType> }> = [];
     filteredInputProps: Array<DropdownValue> = [];
+    filteredCapabilitiesProps: Array<{capabilityName: string, properties: Array<DropdownValueType>}> = [];
 
     constructor(private dataTypeService: DataTypeService) {}
 
@@ -113,6 +114,26 @@ export class ParamRowComponent {
             category => category.outputs.length > 0
         );
 
+        this.filteredCapabilitiesProps = _.filter(
+            _.map(
+                this.capabilitiesProps,
+                cap => {
+                    return {
+                        capabilityName: cap.name,
+                        properties: _.map(
+                            _.filter(cap.properties, prop => !this.param.type || prop.type === this.param.type),
+                            prop => new DropdownValueType(
+                                prop.uniqueId,
+                                prop.name,
+                                prop.type
+                            )
+                        )
+                    };
+                }
+            ),
+            capability => capability.properties.length > 0
+        );
+
         if (this.param.inputId) {
             const selProp = this.getSelectedProp();
             if (selProp && selProp.type === this.param.type) {
@@ -181,6 +202,12 @@ export class ParamRowComponent {
                 (acc, cat) => [...acc, ...cat.outputs],
             []),
             (out: DropdownValueType) => this.param.inputId === out.value
+            ) || _.find(
+                _.reduce(
+                    this.filteredCapabilitiesProps,
+                    (acc, cap) => [...acc, ...cap.properties],
+                    []),
+                (prop: DropdownValueType) => this.param.inputId === prop.value
         );
     }