Enhance operations to associate workflows

Change-Id: Iacf74ee333a3bc2e76e764c28ae660322bc9e6e4
Issue-ID: SDC-1535
Signed-off-by: Arielk <Ariel.Kenan@amdocs.com>

15 files changed, 511 insertions, 151 deletions

diff --git a/catalog-ui/configurations/dev.js b/catalog-ui/configurations/dev.js
index 7e67dbbcb3..1dc8c81c3e 100644
--- a/catalog-ui/configurations/dev.js
+++ b/catalog-ui/configurations/dev.js
@@ -48,6 +48,8 @@ const SDC_CONFIG = {
 		"GET_lifecycle_state_UNDOCHECKOUT":"lifecycleState/UNDOCHECKOUT",
 		"root": "/sdc1/feProxy/rest",
         "no_proxy_root": "/sdc1/rest",
+		"workflow_root": "/sdc1/feProxy/wf",
+		"POST_workflow_artifact": "/v1/catalog",
 		"PUT_service": "/v1/catalog/services/:id/metadata",
 		"GET_download_artifact": "/v1/catalog/",
         "GET_SDC_Version": "/version",
diff --git a/catalog-ui/configurations/prod.js b/catalog-ui/configurations/prod.js
index adbd650378..cd94f53c13 100644
--- a/catalog-ui/configurations/prod.js
+++ b/catalog-ui/configurations/prod.js
@@ -48,6 +48,8 @@ const SDC_CONFIG = {
 		"GET_lifecycle_state_UNDOCHECKOUT":"lifecycleState/UNDOCHECKOUT",
 		"root": "/sdc1/feProxy/rest",
         "no_proxy_root": "/sdc1/rest",
+		"workflow_root": "/sdc1/feProxy/wf",
+		"POST_workflow_artifact": "/v1/catalog",
 		"PUT_service": "/v1/catalog/services/:id/metadata",
 		"GET_download_artifact": "/v1/catalog/",
         "GET_SDC_Version": "/version",
diff --git a/catalog-ui/src/app/models/operation.ts b/catalog-ui/src/app/models/operation.ts
index 55fcd82320..2a5298c3b0 100644
--- a/catalog-ui/src/app/models/operation.ts
+++ b/catalog-ui/src/app/models/operation.ts
@@ -1,27 +1,43 @@
 'use strict';
 
-export class OperationParam {
-    paramName: string = '';
-    paramId: string = '';
+export class OperationParameter {
+    name: string;
+    type: string;
+    property: string;
+    mandatory: boolean;
 
-    constructor(param?: OperationParam) {
+    constructor(param?: OperationParameter) {
         if (param) {
-            this.paramId = param.paramId;
-            this.paramName = param.paramName;
+            this.name = param.name;
+            this.type = param.type;
+            this.property = param.property;
+            this.mandatory = param.mandatory;
         }
     }
 }
 
 export interface IOperationParamsList {
-    listToscaDataDefinition: Array<OperationParam>;
+    listToscaDataDefinition: Array<OperationParameter>;
 }
 
 export class OperationModel {
+    operationType: string;
     description: string;
+    uniqueId: string;
+
     inputParams: IOperationParamsList;
-    operationType: string;
     outputParams: IOperationParamsList;
-    uniqueId: string;
+
+    workflowId: string;
+    workflowVersionId: string;
+
+    protected OperationTypeEnum: Array<String> = [
+        'Create',
+        'Delete',
+        'Instantiate',
+        'Start',
+        'Stop'
+    ];
 
     constructor(operation?: any) {
         if (operation) {
@@ -30,16 +46,18 @@ export class OperationModel {
             this.operationType = operation.operationType;
             this.outputParams = operation.outputParams;
             this.uniqueId = operation.uniqueId;
+            this.workflowId = operation.workflowId;
+            this.workflowVersionId = operation.workflowVersionId;
         }
     }
 
-    public createInputParamsList(inputParams: Array<OperationParam>): void {
+    public createInputParamsList(inputParams: Array<OperationParameter>): void {
         this.inputParams = {
             listToscaDataDefinition: inputParams
         };
     }
 
-    public createOutputParamsList(outputParams: Array<OperationParam>): void {
+    public createOutputParamsList(outputParams: Array<OperationParameter>): void {
         this.outputParams = {
             listToscaDataDefinition: outputParams
         };
diff --git a/catalog-ui/src/app/ng2/app.module.ts b/catalog-ui/src/app/ng2/app.module.ts
index c949a73248..7a845ef159 100644
--- a/catalog-ui/src/app/ng2/app.module.ts
+++ b/catalog-ui/src/app/ng2/app.module.ts
@@ -41,11 +41,12 @@ import { ComponentServiceNg2 } from "./services/component-services/component.ser
 import { ComponentServiceFactoryNg2 } from "./services/component-services/component.service.factory";
 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 { ModalService } from "./services/modal.service";
 import { UiElementsModule } from "./components/ui/ui-elements.module";
 import { ConnectionWizardModule } from "./pages/connection-wizard/connection-wizard.module";
-import {InterfaceOperationModule} from "./pages/interface-operation/interface-operation.module";
-import {OperationCreatorModule} from "./pages/interface-operation/operation-creator/operation-creator.module";
+import { InterfaceOperationModule } from "./pages/interface-operation/interface-operation.module";
+import { OperationCreatorModule } from "./pages/interface-operation/operation-creator/operation-creator.module";
 import { LayoutModule } from "./components/layout/layout.module";
 import { UserService } from "./services/user.service";
 import { DynamicComponentService } from "./services/dynamic-component.service";
@@ -135,6 +136,7 @@ export function configServiceFactory(config: ConfigService) {
         ModalService,
         ServiceServiceNg2,
         AutomatedUpgradeService,
+        WorkflowServiceNg2,
         HttpService,
         UserService,
         PoliciesService,
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 c58e1de135..010a1f9dda 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
@@ -1,11 +1,15 @@
 import * as _ from "lodash";
 import {Component, Input, ComponentRef, Inject} from '@angular/core';
 import {Component as IComponent} from 'app/models/components/component';
+
+import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component';
 import {ModalService} from 'app/ng2/services/modal.service';
 import {ModalModel, ButtonModel, InputModel, OperationModel, CreateOperationResponse} from 'app/models';
-import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component';
+
 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 {OperationCreatorComponent} from './operation-creator/operation-creator.component';
 
 @Component({
@@ -27,6 +31,7 @@ export class InterfaceOperationComponent {
     constructor(
         @Inject('$state') private $state:ng.ui.IStateService,
         private ComponentServiceNg2: ComponentServiceNg2,
+        private WorkflowServiceNg2: WorkflowServiceNg2,
         private ModalServiceNg2: ModalService,
     ) {}
 
@@ -87,8 +92,15 @@ export class InterfaceOperationComponent {
                 () => {
                     this.modalInstance.instance.dynamicContent.instance.createInputParamList();
                     this.ModalServiceNg2.closeCurrentModal();
-                    const {operation} = this.modalInstance.instance.dynamicContent.instance;
-                    this.openOperation = operation;
+
+                    const {operation, isAssociateWorkflow} = this.modalInstance.instance.dynamicContent.instance;
+                    this.openOperation = {...operation};
+
+                    if (!isAssociateWorkflow) {
+                        operation.workflowId = null;
+                        operation.workflowVersionId = null;
+                    }
+
                     modalData.submitCallback(operation);
                 },
                 this.getDisabled,
@@ -103,6 +115,7 @@ export class InterfaceOperationComponent {
             );
 
             this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel);
+
             this.ModalServiceNg2.addDynamicContentToModal(
                 this.modalInstance,
                 OperationCreatorComponent,
@@ -145,22 +158,15 @@ export class InterfaceOperationComponent {
         this.ComponentServiceNg2.createInterfaceOperation(this.component, operation).subscribe((response: CreateOperationResponse) => {
             this.openOperation = null;
 
-            const workflowId = response.artifactUUID;
-            const operationId = response.uniqueId;
-            const resourceId = this.component.uuid;
-
-            const queryParams = {
-                id: workflowId,
-                operationID: operationId,
-                uuid: resourceId,
-                displayMode: 'create',
-            };
-
-            this.$state.go('workspace.plugins', {
-                path: 'workflowDesigner',
-                queryParams
-            });
+            if (response.workflowId) {
+                const resourceId = this.component.uuid;
+                const operationId = response.uniqueId;
+                const workflowId = response.workflowId;
+                const versionId = response.workflowVersionId;
+                const artifactId = response.artifactUUID;
 
+                this.WorkflowServiceNg2.associateWorkflowArtifact(resourceId, operationId, workflowId, versionId, artifactId);
+            }
         });
     }
 
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 9e47cd5cef..c0a6966ceb 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
@@ -1,16 +1,17 @@
 <div class="operation-creator">
+    <loader [display]="isLoading" [size]="'large'" [relative]="true"></loader>
+
     <form class="w-sdc-form">
 
         <div class="side-by-side">
             <div class="i-sdc-form-item">
-                <label class="i-sdc-form-label">Operation Type</label>
-                <input
-                    type="text"
-                    data-tests-id="operationType"
-                    name="operationType"
-                    [(ngModel)]="operation.operationType"
-                    [attr.maxLength]="200"
-                    [disabled]="isEditMode" />
+                <label class="i-sdc-form-label" [ngClass]="{'required': !isEditMode}">Operation Type</label>
+                <ui-element-dropdown
+                    data-tests-id="operationTypeDropdown"
+                    [values]="operation.OperationTypeEnum"
+                    [(value)]="operation.operationType"
+                    [readonly]="isEditMode">
+                </ui-element-dropdown>
             </div>
 
             <div class="i-sdc-form-item" >
@@ -24,33 +25,85 @@
             </div>
         </div>
 
+        <div class="i-sdc-form-item">
+            <checkbox
+                [label]="'Assign Workflow'"
+                [(checked)]="isAssociateWorkflow"
+                (checkedChange)="toggleAssociateWorkflow()"
+                data-tests-id="checkbox-assign-workflow">
+            </checkbox>
+        </div>
+
+        <div class="side-by-side" *ngIf="isAssociateWorkflow">
+            <div class="i-sdc-form-item">
+                <label class="i-sdc-form-label required">Workflow</label>
+                <ui-element-dropdown
+                    data-tests-id="associated-workflow"
+                    [values]="workflows"
+                    [(value)]="operation.workflowId"
+                    (valueChange)="onSelectWorkflow()">
+                </ui-element-dropdown>
+            </div>
+
+            <div class="i-sdc-form-item">
+                <label class="i-sdc-form-label required">Workflow Version</label>
+                <ui-element-dropdown
+                    data-tests-id="associated-workflow-version"
+                    [ngClass]="{'disabled': !operation.workflowId}"
+                    [values]="workflowVersions"
+                    [(value)]="operation.workflowVersionId"
+                    (valueChange)="changeWorkflowVersion()">
+                </ui-element-dropdown>
+            </div>
+        </div>
+
         <div class="separator-buttons">
             <span class="input-param-title">Input Parameters</span>
             <a
-                class="add-param-link"
+                class="add-param-link add-btn"
+                *ngIf="!isAssociateWorkflow"
                 data-tests-id="addInputParameter"
-                [ngClass]="{'disabled':!isAddAllowed()}"
-                (click)="addParam()">
-                Add Input Parameter
-            </a>
+                [ngClass]="{'disabled':!isParamsValid()}"
+                (click)="addParam()">Add Input Parameter</a>
         </div>
 
         <div class="generic-table">
             <div class="header-row table-row">
-                <span class="cell header-cell">Name</span>
-                <span class="cell header-cell">Property Name</span>
-                <span class="cell header-cell"></span>
+                <span class="cell header-cell field-name">Name</span>
+                <span class="cell header-cell">Type</span>
+                <span class="cell header-cell field-property">
+                    Property
+                    <span
+                        *ngIf="!isAssociateWorkflow"
+                        class="sprite-new info-icon"
+                        tooltip="{{propertyTooltipText}}"
+                        tooltipDelay="0">
+                    </span>
+                </span>
+                <span class="cell header-cell field-mandatory" *ngIf="!isAssociateWorkflow">Mandatory</span>
+                <span class="cell header-cell remove" *ngIf="!isAssociateWorkflow">●●●</span>
             </div>
 
-            <div class="empty-msg data-row" *ngIf="inputParams.length === 0">
-                No data to display.
+            <div class="empty-msg data-row" *ngIf="inputParameters.length === 0">
+                <div>NO PARAMETERS TO SHOW</div>
+                <div *ngIf="isAssociateWorkflow && !operation.workflowVersionId">
+                    <div *ngIf="workflows.length">
+                        <span class="bold-message">Select Workflow and Workflow Version above</span>
+                        <span>in order to see the parameters</span>
+                    </div>
+                    <div *ngIf="!workflows.length">
+                        Only <span class="bold-message">certified</span> workflow versions can be assigned to an operation
+                    </div>
+                </div>
             </div>
 
             <param-row
-                *ngFor="let param of inputParams; let idx=index"
+                *ngFor="let param of inputParameters; let idx=index"
                 class="data-row"
+                [isAssociateWorkflow]="isAssociateWorkflow"
                 [param]="param"
                 [inputProps]="inputProperties"
+                [propTypes]="inputPropertyTypes"
                 [onRemoveParam]="onRemoveParam">
             </param-row>
         </div>
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less
index 289dd5b452..f962bc2dca 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less
@@ -48,19 +48,59 @@
         max-height: 233px;
 
         .header-row .header-cell {
-            &:last-child {
-                padding: 0;
+            &.remove {
+                padding: 8px;
+            }
+            .info-icon {
+                float: right;
+            }
+            .tooltip-inner {
+                &.tooltip-inner {
+                    &.tooltip-inner {
+                        max-width: 230px;
+                    }
+                }
             }
         }
 
         .data-row {
             &.empty-msg {
-                padding: 6px 14px;
+                .bold-message {
+                    font-weight: 600;
+                }
+
+                :first-child {
+                    &:not(:only-child) {
+                        margin: 6px 0;
+                    }
+                }
+
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                padding: 11px 0;
             }
         }
 
         /deep/ .cell {
-            &:last-child {
+            &.field-name {
+                flex: 2;
+            }
+
+
+            &.field-mandatory {
+                flex: 0.5;
+                text-align: center;
+            }
+
+            &.field-property {
+                &, &:last-child {
+                    flex: 1;
+                }
+            }
+
+            &.remove {
                 min-width: 40px;
             }
         }
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 cc7b5feaf3..8d26055feb 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
@@ -1,68 +1,179 @@
 import * as _ from "lodash";
 import {Component} from '@angular/core';
+
+import {Subscription} from "rxjs/Subscription";
+
+import {TranslateService} from "app/ng2/shared/translator/translate.service";
+import {WorkflowServiceNg2} from 'app/ng2/services/workflow.service';
+import {InputModel, OperationModel, OperationParameter} from 'app/models';
+
 import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
-import {InputModel, OperationModel, OperationParam} from 'app/models';
 
 @Component({
     selector: 'operation-creator',
     templateUrl: './operation-creator.component.html',
     styleUrls:['./operation-creator.component.less'],
+    providers: [TranslateService]
 })
 
 export class OperationCreatorComponent {
 
-    inputProperties: Array<DropdownValue>;
     input: any;
-    inputParams: Array<OperationParam> = [];
     operation: OperationModel;
+
+    workflows: Array<DropdownValue> = [];
+    workflowVersions: Array<DropdownValue> = [];
+    inputProperties: Array<DropdownValue> = [];
+    inputPropertyTypes: {};
+
+    inputParameters: Array<OperationParameter> = [];
+    noAssignInputParameters: Array<OperationParameter> = [];
+    assignInputParameters: { [key: string]: { [key: string]: Array<OperationParameter>; }; } = {};
+
+    isAssociateWorkflow: boolean = false;
     isEditMode: boolean = false;
+    isLoading: boolean = false;
+
+    propertyTooltipText: String;
+
+    constructor(private workflowServiceNg2: WorkflowServiceNg2, private translateService: TranslateService) {
+        this.translateService.languageChangedObservable.subscribe(lang => {
+            this.propertyTooltipText = this.translateService.translate("OPERATION_PROPERTY_TOOLTIP_TEXT");
+        });
+    }
 
     ngOnInit() {
-        this.operation = new OperationModel(this.input.operation || {});
 
-        if (this.input.operation) {
-            let {inputParams} = this.input.operation;
+        this.inputProperties = _.map(this.input.inputProperties,
+            (input: InputModel) => new DropdownValue(input.uniqueId, input.name)
+        );
+
+        this.inputPropertyTypes = {};
+        _.forEach(this.input.inputProperties, (input: InputModel) => {
+            this.inputPropertyTypes[input.uniqueId] = input.type;
+        });
 
-            if (inputParams) {
-                _.forEach(inputParams.listToscaDataDefinition, (input: OperationParam) => {
+        const inputOperation = <OperationModel>this.input.operation;
+        this.operation = new OperationModel(inputOperation || {});
+
+        const buildInputParams = () => {
+            if (inputOperation.inputParams) {
+                this.inputParameters = [];
+                _.forEach(inputOperation.inputParams.listToscaDataDefinition, (input: OperationParameter) => {
                     this.addParam(input);
                 });
             }
+        }
+
+        this.isLoading = true;
+        this.workflowServiceNg2.getWorkflows().subscribe(workflows => {
+            this.isLoading = false;
+
+            this.workflows = _.map(workflows, (workflow: any) => {
+                return new DropdownValue(workflow.id, workflow.name);
+            });
+
+            if (inputOperation) {
+                if (inputOperation.workflowVersionId) {
+                    this.isAssociateWorkflow = true;
+                    this.onSelectWorkflow(inputOperation.workflowVersionId).add(buildInputParams);
+                } else {
+                    this.inputParameters = this.noAssignInputParameters;
+                    this.isAssociateWorkflow = false;
+                    buildInputParams();
+                }
+
+                if (inputOperation.uniqueId) {
+                    this.isEditMode = true;
+                }
+            }
+        });
 
-            if (this.input.operation.uniqueId) {
-                this.isEditMode = true;
+
+    }
+
+    onSelectWorkflow(selectedVersionId?: string): Subscription {
+
+        this.operation.workflowVersionId = selectedVersionId || null;
+        if (!this.assignInputParameters[this.operation.workflowId]) {
+            this.assignInputParameters[this.operation.workflowId] = {};
+        }
+
+        this.isLoading = true;
+        return this.workflowServiceNg2.getWorkflowVersions(this.operation.workflowId).subscribe((versions: Array<any>) => {
+            this.isLoading = false;
+
+            this.workflowVersions = _.map(
+                _.filter(versions, version => version.state === this.workflowServiceNg2.VERSION_STATE_CERTIFIED),
+                (version: any) => {
+                    if (!this.assignInputParameters[this.operation.workflowId][version.id]) {
+                        this.assignInputParameters[this.operation.workflowId][version.id] = _.map(version.inputs, (input: any) => {
+                            return new OperationParameter({
+                                name: input.name,
+                                type: input.type && input.type.toLowerCase(),
+                                property: null,
+                                mandatory: input.mandatory,
+                            });
+                        });
+                    }
+                    return new DropdownValue(version.id, `v. ${version.name}`);
+                }
+            );
+
+            if (!selectedVersionId && versions.length) {
+                this.operation.workflowVersionId = _.last(versions.sort()).id;
+            }
+            this.changeWorkflowVersion();
+        });
+
+    }
+
+    changeWorkflowVersion() {
+        this.inputParameters = this.assignInputParameters[this.operation.workflowId][this.operation.workflowVersionId];
+    }
+
+    toggleAssociateWorkflow() {
+
+        if (!this.isAssociateWorkflow) {
+            this.inputParameters = this.noAssignInputParameters;
+        } else {
+            if (!this.operation.workflowId || !this.operation.workflowVersionId) {
+                this.inputParameters = [];
+            } else {
+                this.inputParameters = this.assignInputParameters[this.operation.workflowId][this.operation.workflowVersionId];
             }
         }
 
-        this.inputProperties = _.map(this.input.inputProperties,
-            (input: InputModel) => new DropdownValue(input.uniqueId, input.name)
-        );
     }
 
-    addParam(param?: OperationParam): void {
-        this.inputParams.push(new OperationParam(param));
+    addParam(param?: OperationParameter): void {
+        this.inputParameters.push(new OperationParameter(param));
     }
 
-    isAddAllowed(): boolean {
-        if (this.inputParams.length === 0) {
-            return true;
+    isParamsValid(): boolean {
+
+        for (let ctr=0; ctr<this.inputParameters.length; ctr++) {
+            if (!this.inputParameters[ctr].name || !this.inputParameters[ctr].property) {
+                return false;
+            }
         }
+        return true;
 
-        const {paramId, paramName} = _.last(this.inputParams);
-        return paramId && paramName.length > 0;
     }
 
-    onRemoveParam = (param: OperationParam): void  => {
-        let index = _.indexOf(this.inputParams, param);
-        this.inputParams.splice(index, 1);
+    onRemoveParam = (param: OperationParameter): void => {
+        let index = _.indexOf(this.inputParameters, param);
+        this.inputParameters.splice(index, 1);
     }
 
     createInputParamList(): void {
-        this.operation.createInputParamsList(this.inputParams);
+        this.operation.createInputParamsList(this.inputParameters);
     }
 
     checkFormValidForSubmit(): boolean {
-        return this.operation.operationType && this.operation.operationType.length > 0 && this.isAddAllowed();
+        return this.operation.operationType &&
+            (!this.isAssociateWorkflow || this.operation.workflowVersionId) &&
+            this.isParamsValid();
     }
 
 }
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 86d7628c17..2a72177621 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
@@ -1,18 +1,40 @@
-<div class="cell">
+<div class="cell field-name">
     <input
+        *ngIf="!isAssociateWorkflow"
         type="text"
-        data-tests-id="inputParamName"
-        [(ngModel)]="param.paramName" />
+        data-tests-id="paramName"
+        [(ngModel)]="param.name" />
+    <span *ngIf="isAssociateWorkflow">{{param.name}}</span>
 </div>
 
-<ui-element-dropdown
-    class="cell"
-    data-tests-id="inputParamProperty"
-    [values]="inputProps"
-    [(value)]="param.paramId">
-</ui-element-dropdown>
+<div class="cell field-type">
+    <ui-element-dropdown
+        *ngIf="!isAssociateWorkflow"
+        data-tests-id="paramType"
+        [values]="propTypeEnum"
+        [(value)]="param.type"
+        (valueChange)="onChangeType()">
+    </ui-element-dropdown>
+    <span *ngIf="isAssociateWorkflow">{{param.type}}</span>
+</div>
+
+<div class="cell field-property">
+    <ui-element-dropdown
+        data-tests-id="paramProperty"
+        [values]="filteredInputProps"
+        [(value)]="param.property">
+    </ui-element-dropdown>
+</div>
+
+<div class="cell field-mandatory" *ngIf="!isAssociateWorkflow">
+    <checkbox
+        *ngIf="!isAssociateWorkflow"
+        data-tests-id="paramMandatory"
+        [(checked)]="param.mandatory">
+    </checkbox>
+</div>
 
-<div class="cell remove">
+<div class="cell remove" *ngIf="!isAssociateWorkflow">
     <span
         class="sprite-new delete-item-icon"
         data-tests-id="removeInputParam"
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less
index 9abd7c7681..8795d22e8d 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less
@@ -5,7 +5,7 @@
     align-items: center;
     justify-content: center;
 
-    .delete-item-icon {
+    .delete-btn {
         &:hover {
             cursor: pointer;
         }
@@ -14,16 +14,26 @@
 
 
 .cell {
-    padding: 0;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+
+    > * {
+        flex-basis: 100%;
+    }
 
     /deep/ select {
         height: 30px;
-        border: none;
     }
 
     input {
         height: 30px;
-        border: none;
         padding-left: 10px;
     }
+
+    &.field-property {
+        &:last-child {
+            flex: 1;
+        }
+    }
 }
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 01e0629942..75d4fcf7d2 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,6 +1,6 @@
 import {Component, Input} from '@angular/core';
 import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
-import {OperationParam} from 'app/models';
+import {OperationParameter} from 'app/models';
 
 @Component({
     selector: 'param-row',
@@ -9,7 +9,22 @@ import {OperationParam} from 'app/models';
 })
 
 export class ParamRowComponent {
-    @Input() param: OperationParam;
+    @Input() param: OperationParameter;
     @Input() inputProps: Array<DropdownValue>;
+    @Input() propTypes: {};
     @Input() onRemoveParam: Function;
+    @Input() isAssociateWorkflow: boolean;
+
+    propTypeEnum: Array<string> = ['boolean', 'float', 'integer', 'string'];
+    filteredInputProps: Array<DropdownValue> = [];
+
+    ngOnInit() {
+        this.onChangeType();
+    }
+
+    onChangeType() {
+        this.filteredInputProps = _.filter(this.inputProps, prop => {
+            return this.propTypes[prop.value] === this.param.type;
+        });
+    }
 }
diff --git a/catalog-ui/src/app/ng2/services/workflow.service.ts b/catalog-ui/src/app/ng2/services/workflow.service.ts
new file mode 100644
index 0000000000..7e596e1eda
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/workflow.service.ts
@@ -0,0 +1,52 @@
+import { Injectable, Inject } from "@angular/core";
+import { Response } from "@angular/http";
+import { Observable } from "rxjs/Observable";
+import { HttpService } from "./http.service";
+import { SdcConfigToken, ISdcConfig } from "../config/sdc-config.config";
+
+@Injectable()
+export class WorkflowServiceNg2 {
+
+    protected baseUrl;
+    protected catalogBaseUrl;
+
+    VERSION_STATE_CERTIFIED = 'CERTIFIED';
+
+    constructor(private http: HttpService, @Inject(SdcConfigToken) sdcConfig:ISdcConfig) {
+        this.baseUrl = sdcConfig.api.workflow_root;
+        this.catalogBaseUrl = sdcConfig.api.POST_workflow_artifact;
+    }
+
+    public getWorkflows(filterCertified: boolean = true): Observable<any> {
+        return this.http.get(this.baseUrl + '/workflows' + (filterCertified ? '?versionState=' + this.VERSION_STATE_CERTIFIED : ''))
+            .map((res:Response) => {
+                return res.json().results;
+            });
+    }
+
+    public getWorkflowVersions(workflowId: string, filterCertified: boolean = true): Observable<any> {
+        return this.http.get(this.baseUrl + '/workflows/' + workflowId + '/versions' + (filterCertified ? '?state=' + this.VERSION_STATE_CERTIFIED : ''))
+            .map((res:Response) => {
+                return res.json().results;
+            });
+    }
+
+    public updateWorkflowVersion(workflowId: string, versionId: string, payload: any): Observable<any> {
+        return this.http.put(this.baseUrl + '/workflows/' + workflowId + '/versions/' + versionId, payload)
+            .map((res:Response) => {
+                return res;
+            });
+    }
+
+    public associateWorkflowArtifact(resourceUuid, operationId, workflowId, workflowVersionId, artifactUuid): Observable<any> {
+        return this.http.post(this.baseUrl + '/workflows/' + workflowId + '/versions/' + workflowVersionId + '/artifact-deliveries',
+            {
+                endpoint: this.catalogBaseUrl + '/resources/' + resourceUuid + '/interfaces/' + operationId + '/artifacts/' + artifactUuid,
+                method: 'POST'
+            })
+            .map((res:Response) => {
+                return res.json();
+            });
+    }
+
+}
diff --git a/catalog-ui/src/app/utils/common-utils.ts b/catalog-ui/src/app/utils/common-utils.ts
index d215183fa9..0c6a8b6a54 100644
--- a/catalog-ui/src/app/utils/common-utils.ts
+++ b/catalog-ui/src/app/utils/common-utils.ts
@@ -153,13 +153,23 @@ export class CommonUtils {
                         });
                         if (inputs) {
                             const inputParams = _.map(inputs.listToscaDataDefinition, (input:any) => {
-                                return {paramName: input.name, paramId: input.inputId};
+                                return {
+                                    name: input.name,
+                                    property: input.inputId,
+                                    type: input.type,
+                                    mandatory: input.mandatory
+                                };
                             });
                             operation.createInputParamsList(inputParams);
                         }
                         if (outputs) {
                             const outputParams = _.map(outputs.listToscaDataDefinition, (output:any) => {
-                                return {paramName: output.name, paramId: output.outputId};
+                                return {
+                                    name: output.name,
+                                    property: output.inputId,
+                                    type: output.type,
+                                    mandatory: output.mandatory
+                                };
                             });
                             operation.createOutputParamsList(outputParams);
                         }
diff --git a/catalog-ui/src/assets/languages/en_US.json b/catalog-ui/src/assets/languages/en_US.json
index 612d14e707..64be28506b 100644
--- a/catalog-ui/src/assets/languages/en_US.json
+++ b/catalog-ui/src/assets/languages/en_US.json
@@ -451,6 +451,9 @@
     "SERVICE_PATH_SELECTOR_HIDE_ALL_VALUE" : "⚊ Hide all ⚊",
     "SERVICE_PATH_SELECTOR_SHOW_ALL_VALUE" : "⚊ Show all ⚊",
 
+    "=========== OPERATION CREATOR ============": "",
+    "OPERATION_PROPERTY_TOOLTIP_TEXT": "VNF properties are defined by the input parameter type. In case you can't find a certain parameter, it might be due to a wrong type selection.",
+
     "=========== PLUGIN NOT CONNECTED ===========": "",
     "PLUGIN_NOT_CONNECTED_ERROR_MAIN": "The \"{{pluginName}}\" plugin is currently unavailable.",
     "PLUGIN_NOT_CONNECTED_ERROR_SUB": "Please try again later.",
diff --git a/catalog-ui/webpack.server.js b/catalog-ui/webpack.server.js
index a0f6fb1a24..b8821cd9d1 100644
--- a/catalog-ui/webpack.server.js
+++ b/catalog-ui/webpack.server.js
@@ -4,7 +4,7 @@ const mockApis = require('./configurations/mock.json').sdcConfig;
 const proxy = require('http-proxy-middleware');
 const devPort = 9000;
 const fePort = 8181;
-const loclahost = "192.168.33.10"; // "localhost"
+const localhost = "localhost";
 
 module.exports = function(env) {
 
@@ -25,65 +25,79 @@ module.exports = function(env) {
 			exclude: ['node_modules']
 		},
 		setup: server => {
-		let userType = mockApis.userTypes[env.role];
+			let userType = mockApis.userTypes[env.role];
 
-	let middlewares = [
-		(req, res, next) => {
-		res.cookie(mockApis.cookie.userIdSuffix, req.headers[mockApis.cookie.userIdSuffix] || userType.userId);
-	res.cookie(mockApis.cookie.userEmail, req.headers[mockApis.cookie.userEmail] || userType.email);
-	res.cookie(mockApis.cookie.userFirstName, req.headers[mockApis.cookie.userFirstName] || userType.firstName);
-	res.cookie(mockApis.cookie.userLastName, req.headers[mockApis.cookie.userLastName] || userType.lastName);
-	next();
-}
-];
+			let middlewares = [
+				(req, res, next) => {
+					res.cookie(mockApis.cookie.userIdSuffix, req.headers[mockApis.cookie.userIdSuffix] || userType.userId);
+					res.cookie(mockApis.cookie.userEmail, req.headers[mockApis.cookie.userEmail] || userType.email);
+					res.cookie(mockApis.cookie.userFirstName, req.headers[mockApis.cookie.userFirstName] || userType.firstName);
+					res.cookie(mockApis.cookie.userLastName, req.headers[mockApis.cookie.userLastName] || userType.lastName);
+					next();
+				}
+			];
 
-	// Redirect all '/sdc1/feProxy/rest' to feHost
-	middlewares.push(
-		proxy(['/sdc1/feProxy/rest'],{
-			target: 'http://' + loclahost + ':' + fePort,
-			changeOrigin: true,
-			secure: false
-		}));
+			// Redirect all '/sdc1/feProxy/rest' to feHost
+			middlewares.push(
+				proxy(['/sdc1/feProxy/rest'], {
+					target: 'http://' + localhost + ':' + fePort,
+					changeOrigin: true,
+					secure: false
+				}));
 
-	// Redirect all '/sdc1/rest' to feHost
-	middlewares.push(
-		proxy(['/sdc1/rest'],{
-			target: 'http://' + loclahost + ':' + fePort,
-			changeOrigin: true,
-			secure: false
-		}));
+			// Redirect all '/sdc1/rest' to feHost
+			middlewares.push(
+				proxy(['/sdc1/rest'],{
+					target: 'http://' + localhost + ':' + fePort,
+					changeOrigin: true,
+					secure: false
+				}));
 
-	// Redirect dcae urls to feHost
-	middlewares.push(
-		proxy(['/dcae','/sdc1/feProxy/dcae-api'],{
-			target: 'http://' + loclahost + ':' + fePort,
-			changeOrigin: true,
-			secure: false,
-			onProxyRes: (proxyRes, req, res) => {
-			let setCookie = proxyRes.headers['set-cookie'];
-	if (setCookie) {
-		setCookie[0] = setCookie[0].replace(/\bSecure\b(; )?/, '');
-	}
-}
-}));
+			// Redirect dcae urls to feHost
+			middlewares.push(
+				proxy(['/dcae','/sdc1/feProxy/dcae-api'], {
+					target: 'http://' + localhost + ':' + fePort,
+					changeOrigin: true,
+					secure: false,
+					onProxyRes: (proxyRes, req, res) => {
+						let setCookie = proxyRes.headers['set-cookie'];
+						if (setCookie) {
+							setCookie[0] = setCookie[0].replace(/\bSecure\b(; )?/, '');
+						}
+					}
+			}));
 
-	// Redirect onboarding urls to feHost
-	middlewares.push(
-		proxy(['/onboarding','/sdc1/feProxy/onboarding-api'],{
-			target: 'http://' + loclahost + ':' + fePort,
-			changeOrigin: true,
-			secure: false,
-			onProxyRes: (proxyRes, req, res) => {
-			let setCookie = proxyRes.headers['set-cookie'];
-	if (setCookie) {
-		setCookie[0] = setCookie[0].replace(/\bSecure\b(; )?/, '');
-	}
-}
-}));
+			// Redirect onboarding urls to feHost
+			middlewares.push(
+				proxy(['/onboarding', '/sdc1/feProxy/onboarding-api'], {
+					target: 'http://' + localhost + ':' + fePort,
+					changeOrigin: true,
+					secure: false,
+					onProxyRes: (proxyRes, req, res) => {
+						let setCookie = proxyRes.headers['set-cookie'];
+						if (setCookie) {
+							setCookie[0] = setCookie[0].replace(/\bSecure\b(; )?/, '');
+						}
+					}
+			}));
 
-	server.use(middlewares);
-}
-};
+			// Redirect workflow urls to feHost
+			middlewares.push(
+				proxy(['/sdc1/feProxy/wf', '/wf'], {
+					target: 'http://' + localhost + ':' + fePort,
+					changeOrigin: true,
+					secure: false,
+					onProxyRes: (proxyRes, req, res) => {
+						let setCookie = proxyRes.headers['set-cookie'];
+						if (setCookie) {
+							setCookie[0] = setCookie[0].replace(/\bSecure\b(; )?/, '');
+						}
+					}
+			}));
+
+			server.use(middlewares);
+		}
+	};
 
 	return ServerConfig;
 }