Service operation UI merge

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

10 files changed, 221 insertions, 139 deletions

diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.module.ts b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.module.ts
index caf6a3f528..3414769e62 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.module.ts
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.module.ts
@@ -1,13 +1,15 @@
 import {NgModule} from "@angular/core";
 import {CommonModule} from "@angular/common";
 import {InterfaceOperationComponent} from "./interface-operation.page.component";
+import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
 
 @NgModule({
     declarations: [
         InterfaceOperationComponent
     ],
     imports: [
-        CommonModule
+        CommonModule,
+        UiElementsModule
     ],
     exports: [],
     entryComponents: [
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.html b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.html
index 25e8672db8..e3bce5ec11 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.html
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.html
@@ -3,11 +3,13 @@
         class="add-btn"
         [ngClass]="{'disabled': readonly}"
         data-tests-id="addInterfaceOperation"
-        (click)="onAddOperation()">
+        (click)="onEditOperation()">
         Add Operation
     </div>
 
-    <div class="operation-list" [ngClass]="{'disabled': readonly}">
+    <div class="operation-list">
+
+        <loader [display]="isLoading" [size]="'large'" [relative]="true"></loader>
 
         <div
             class="operation-row"
@@ -24,7 +26,7 @@
                 </span>
             </span>
 
-            <span class="operation-dumbo">
+            <span class="operation-dumbo" *ngIf="!readonly">
                 <span
                     class="sprite-new delete-item-icon"
                     data-tests-id="deleteInterfaceOperation"
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 b3e06c33cf..21ac60981a 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
@@ -2,15 +2,17 @@ import * as _ from "lodash";
 import {Component, Input, ComponentRef, Inject} from '@angular/core';
 import {Component as IComponent} from 'app/models/components/component';
 
+import {SdcConfigToken, ISdcConfig} from "app/ng2/config/sdc-config.config";
+
 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 {ModalModel, ButtonModel, InputBEModel, OperationModel, CreateOperationResponse} from 'app/models';
 
 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';
+import {OperationCreatorComponent, OperationCreatorInput} from './operation-creator/operation-creator.component';
 
 @Component({
     selector: 'interface-operation',
@@ -24,22 +26,37 @@ export class InterfaceOperationComponent {
     modalInstance: ComponentRef<ModalComponent>;
     operationList: Array<OperationModel> = [];
     openOperation: OperationModel;
+    enableWorkflowAssociation: boolean;
+    inputs: Array<InputBEModel>;
+    isLoading: boolean;
 
     @Input() component: IComponent;
     @Input() readonly: boolean;
 
     constructor(
-        @Inject('$state') private $state:ng.ui.IStateService,
+        @Inject(SdcConfigToken) sdcConfig: ISdcConfig,
         private ComponentServiceNg2: ComponentServiceNg2,
         private WorkflowServiceNg2: WorkflowServiceNg2,
         private ModalServiceNg2: ModalService,
-    ) {}
+    ) {
+        this.enableWorkflowAssociation = sdcConfig.enableWorkflowAssociation;
+    }
 
     ngOnInit(): void {
+        this.isLoading = true;
         this.ComponentServiceNg2.getInterfaceOperations(this.component).subscribe((response: ComponentGenericResponse) => {
+            if (this.inputs) {
+                this.isLoading = false;
+            }
             let {interfaceOperations} = response;
             this.component.interfaceOperations = interfaceOperations;
-            this.operationList = _.toArray(interfaceOperations);
+            this.operationList = _.toArray(interfaceOperations).sort((a, b) => a.operationType.localeCompare(b.operationType));
+        });
+        this.ComponentServiceNg2.getComponentInputs(this.component).subscribe((response: ComponentGenericResponse) => {
+            if (this.component.interfaceOperations) {
+                this.isLoading = false;
+            }
+            this.inputs = response.inputs;
         });
     }
 
@@ -47,13 +64,7 @@ export class InterfaceOperationComponent {
         return !this.modalInstance.instance.dynamicContent.instance.checkFormValidForSubmit();
     }
 
-    onEditOperation = (operation: OperationModel): void => {
-        this.ComponentServiceNg2
-            .getInterfaceOperation(this.component, operation)
-            .subscribe(op => this.onAddOperation(op));
-    }
-
-    onAddOperation = (operation?: OperationModel): void => {
+    onEditOperation = (operation?: OperationModel): void => {
         const modalMap = {
             create: {
                 modalTitle: 'Create a New Operation',
@@ -75,58 +86,60 @@ export class InterfaceOperationComponent {
             }
         }
 
-        this.ComponentServiceNg2.getComponentInputs(this.component).subscribe((response: ComponentGenericResponse) => {
+        const cancelButton: ButtonModel = new ButtonModel(
+            'Cancel',
+            'outline white',
+            () => {
+                this.openOperation = null;
+                this.ModalServiceNg2.closeCurrentModal();
+            },
+        );
 
-            const cancelButton: ButtonModel = new ButtonModel(
-                'Cancel',
-                'outline white',
-                () => {
-                    this.openOperation = null;
-                    this.ModalServiceNg2.closeCurrentModal();
-                },
-            );
-
-            const saveButton: ButtonModel = new ButtonModel(
-                modalData.saveBtnText,
-                'blue',
-                () => {
-                    this.modalInstance.instance.dynamicContent.instance.createInputParamList();
-                    this.ModalServiceNg2.closeCurrentModal();
-
-                    const {operation, isAssociateWorkflow} = this.modalInstance.instance.dynamicContent.instance;
-                    this.openOperation = {...operation};
-
-                    if (!isAssociateWorkflow) {
-                        operation.workflowId = null;
-                        operation.workflowVersionId = null;
-                    }
-
-                    modalData.submitCallback(operation);
-                },
-                this.getDisabled,
-            );
-
-            const modalModel: ModalModel = new ModalModel(
-                'l',
-                modalData.modalTitle,
-                '',
-                [saveButton, cancelButton],
-                'standard',
-            );
-
-            this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel);
-
-            this.ModalServiceNg2.addDynamicContentToModal(
-                this.modalInstance,
-                OperationCreatorComponent,
-                {
-                    operation,
-                    inputProperties: response.inputs,
-                },
-            );
-
-            this.modalInstance.instance.open();
-        });
+        const saveButton: ButtonModel = new ButtonModel(
+            modalData.saveBtnText,
+            'blue',
+            () => {
+                this.modalInstance.instance.dynamicContent.instance.createInputParamList();
+                this.ModalServiceNg2.closeCurrentModal();
+
+                const {operation, isAssociateWorkflow} = this.modalInstance.instance.dynamicContent.instance;
+                this.openOperation = {...operation};
+
+                if (!this.enableWorkflowAssociation && !isAssociateWorkflow) {
+                    operation.workflowId = null;
+                    operation.workflowVersionId = null;
+                }
+
+                modalData.submitCallback(operation);
+            },
+            this.getDisabled,
+        );
+
+        const modalModel: ModalModel = new ModalModel(
+            'l',
+            modalData.modalTitle,
+            '',
+            [saveButton, cancelButton],
+            'standard',
+        );
+
+        this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel);
+
+        let input: OperationCreatorInput = {
+            operation,
+            inputProperties: this.inputs,
+            enableWorkflowAssociation: this.enableWorkflowAssociation,
+            readonly: this.readonly,
+            isService: this.component.isService()
+        }
+
+        this.ModalServiceNg2.addDynamicContentToModal(
+            this.modalInstance,
+            OperationCreatorComponent,
+            input,
+        );
+
+        this.modalInstance.instance.open();
     }
 
     onRemoveOperation = (event: Event, operation: OperationModel): void => {
@@ -158,6 +171,8 @@ export class InterfaceOperationComponent {
         this.ComponentServiceNg2.createInterfaceOperation(this.component, operation).subscribe((response: CreateOperationResponse) => {
             this.openOperation = null;
             this.operationList.push(new OperationModel(response));
+            this.operationList.sort((a, b) => a.operationType.localeCompare(b.operationType));
+
             if (response.workflowId) {
                 const resourceId = this.component.uuid;
                 const operationId = response.uniqueId;
@@ -175,6 +190,15 @@ export class InterfaceOperationComponent {
             const index = _.findIndex(this.operationList, el => el.uniqueId === operation.uniqueId);
             this.operationList.splice(index, 1, newOperation);
             this.component.interfaceOperations = this.operationList;
+
+            if (newOperation.workflowId) {
+                const resourceId = this.component.uuid;
+                const operationId = newOperation.uniqueId;
+                const workflowId = newOperation.workflowId;
+                const versionId = newOperation.workflowVersionId;
+                const artifactId = newOperation.artifactUUID;
+                this.WorkflowServiceNg2.associateWorkflowArtifact(resourceId, operationId, workflowId, versionId, artifactId).subscribe();
+            }
         });
     }
 
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 c0a6966ceb..84f3910c9b 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
@@ -5,13 +5,14 @@
 
         <div class="side-by-side">
             <div class="i-sdc-form-item">
-                <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>
+                <label class="i-sdc-form-label" [ngClass]="{'required': !isEditMode}">Operation Name</label>
+                <input
+                    type="text"
+                    name="type"
+                    data-tests-id="operationType"
+                    [(ngModel)]="operation.operationType"
+                    [attr.maxLength]="200"
+                    [ngClass]="{'disabled':isEditMode}" />
             </div>
 
             <div class="i-sdc-form-item" >
@@ -20,16 +21,18 @@
                     type="text"
                     data-tests-id="operationDescription"
                     name="description"
+                    [ngClass]="{'disabled': readonly}"
                     [(ngModel)]="operation.description"
                     [attr.maxLength]="200" />
             </div>
         </div>
 
-        <div class="i-sdc-form-item">
+        <div class="i-sdc-form-item" *ngIf="enableWorkflowAssociation">
             <checkbox
                 [label]="'Assign Workflow'"
                 [(checked)]="isAssociateWorkflow"
                 (checkedChange)="toggleAssociateWorkflow()"
+                [ngClass]="{'disabled': readonly}"
                 data-tests-id="checkbox-assign-workflow">
             </checkbox>
         </div>
@@ -39,6 +42,7 @@
                 <label class="i-sdc-form-label required">Workflow</label>
                 <ui-element-dropdown
                     data-tests-id="associated-workflow"
+                    [readonly]="readonly"
                     [values]="workflows"
                     [(value)]="operation.workflowId"
                     (valueChange)="onSelectWorkflow()">
@@ -49,7 +53,7 @@
                 <label class="i-sdc-form-label required">Workflow Version</label>
                 <ui-element-dropdown
                     data-tests-id="associated-workflow-version"
-                    [ngClass]="{'disabled': !operation.workflowId}"
+                    [readonly]="!operation.workflowId || readonly"
                     [values]="workflowVersions"
                     [(value)]="operation.workflowVersionId"
                     (valueChange)="changeWorkflowVersion()">
@@ -61,7 +65,7 @@
             <span class="input-param-title">Input Parameters</span>
             <a
                 class="add-param-link add-btn"
-                *ngIf="!isAssociateWorkflow"
+                *ngIf="!isAssociateWorkflow && !readonly"
                 data-tests-id="addInputParameter"
                 [ngClass]="{'disabled':!isParamsValid()}"
                 (click)="addParam()">Add Input Parameter</a>
@@ -70,7 +74,7 @@
         <div class="generic-table">
             <div class="header-row table-row">
                 <span class="cell header-cell field-name">Name</span>
-                <span class="cell header-cell">Type</span>
+                <span class="cell header-cell field-type">Type</span>
                 <span class="cell header-cell field-property">
                     Property
                     <span
@@ -81,7 +85,7 @@
                     </span>
                 </span>
                 <span class="cell header-cell field-mandatory" *ngIf="!isAssociateWorkflow">Mandatory</span>
-                <span class="cell header-cell remove" *ngIf="!isAssociateWorkflow">●●●</span>
+                <span class="cell header-cell remove" *ngIf="!isAssociateWorkflow && !readonly">●●●</span>
             </div>
 
             <div class="empty-msg data-row" *ngIf="inputParameters.length === 0">
@@ -98,13 +102,14 @@
             </div>
 
             <param-row
-                *ngFor="let param of inputParameters; let idx=index"
+                *ngFor="let param of inputParameters"
                 class="data-row"
                 [isAssociateWorkflow]="isAssociateWorkflow"
                 [param]="param"
                 [inputProps]="inputProperties"
                 [propTypes]="inputPropertyTypes"
-                [onRemoveParam]="onRemoveParam">
+                [onRemoveParam]="onRemoveParam"
+                [readonly]="readonly">
             </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 f962bc2dca..e2b53bee65 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
@@ -84,14 +84,8 @@
         }
 
         /deep/ .cell {
-            &.field-name {
-                flex: 2;
-            }
-
-
-            &.field-mandatory {
-                flex: 0.5;
-                text-align: center;
+            &.field-name, &.field-type {
+                flex: 1;
             }
 
             &.field-property {
@@ -100,6 +94,11 @@
                 }
             }
 
+            &.field-mandatory {
+                flex: 0.5;
+                text-align: center;
+            }
+
             &.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 8d26055feb..d2bad5f02d 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,34 +5,45 @@ 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 {OperationModel, OperationParameter, InputBEModel} from 'app/models';
 
 import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
 
+export interface OperationCreatorInput {
+    operation: OperationModel,
+    inputProperties: Array<InputBEModel>,
+    enableWorkflowAssociation: boolean,
+    readonly: boolean,
+    isService: boolean
+}
+
 @Component({
     selector: 'operation-creator',
     templateUrl: './operation-creator.component.html',
-    styleUrls:['./operation-creator.component.less'],
+    styleUrls: ['./operation-creator.component.less'],
     providers: [TranslateService]
 })
 
 export class OperationCreatorComponent {
 
-    input: any;
+    input: OperationCreatorInput;
     operation: OperationModel;
 
     workflows: Array<DropdownValue> = [];
     workflowVersions: Array<DropdownValue> = [];
     inputProperties: Array<DropdownValue> = [];
-    inputPropertyTypes: {};
+    inputPropertyTypes: { [key: string]: string };
 
     inputParameters: Array<OperationParameter> = [];
     noAssignInputParameters: Array<OperationParameter> = [];
     assignInputParameters: { [key: string]: { [key: string]: Array<OperationParameter>; }; } = {};
 
-    isAssociateWorkflow: boolean = false;
+    enableWorkflowAssociation: boolean;
+    isAssociateWorkflow: boolean;
     isEditMode: boolean = false;
     isLoading: boolean = false;
+    readonly: boolean;
+    isService: boolean;
 
     propertyTooltipText: String;
 
@@ -44,52 +55,64 @@ export class OperationCreatorComponent {
 
     ngOnInit() {
 
+        this.readonly = this.input.readonly;
+        this.isService = this.input.isService;
+        this.enableWorkflowAssociation = this.input.enableWorkflowAssociation && !this.isService;
+
         this.inputProperties = _.map(this.input.inputProperties,
-            (input: InputModel) => new DropdownValue(input.uniqueId, input.name)
+            (input: InputBEModel) => new DropdownValue(input.uniqueId, input.name)
         );
 
         this.inputPropertyTypes = {};
-        _.forEach(this.input.inputProperties, (input: InputModel) => {
+        _.forEach(this.input.inputProperties, (input: InputBEModel) => {
             this.inputPropertyTypes[input.uniqueId] = input.type;
         });
 
-        const inputOperation = <OperationModel>this.input.operation;
+        const inputOperation = this.input.operation;
         this.operation = new OperationModel(inputOperation || {});
 
-        const buildInputParams = () => {
-            if (inputOperation.inputParams) {
-                this.inputParameters = [];
-                _.forEach(inputOperation.inputParams.listToscaDataDefinition, (input: OperationParameter) => {
-                    this.addParam(input);
+        if (this.enableWorkflowAssociation) {
+            this.isLoading = true;
+            this.workflowServiceNg2.getWorkflows().subscribe(workflows => {
+                this.isLoading = false;
+                this.workflows = _.map(workflows, (workflow: any) => {
+                    return new DropdownValue(workflow.id, workflow.name);
                 });
-            }
-        }
-
-        this.isLoading = true;
-        this.workflowServiceNg2.getWorkflows().subscribe(workflows => {
-            this.isLoading = false;
-
-            this.workflows = _.map(workflows, (workflow: any) => {
-                return new DropdownValue(workflow.id, workflow.name);
+                this.reconstructOperation();
             });
+        } else {
+            this.reconstructOperation();
+        }
 
-            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;
-                }
+    reconstructOperation = () => {
+        const inputOperation = this.input.operation;
+        if (inputOperation) {
+            if (!this.enableWorkflowAssociation || !inputOperation.workflowVersionId || this.isService) {
+                this.inputParameters = this.noAssignInputParameters;
+                this.isAssociateWorkflow = false;
+                this.buildInputParams();
+            } else {
+                this.isAssociateWorkflow = true;
+                this.onSelectWorkflow(inputOperation.workflowVersionId).add(this.buildInputParams);
             }
-        });
 
+            if (inputOperation.uniqueId) {
+                this.isEditMode = true;
+            }
+        }
+    }
 
+    buildInputParams = () => {
+        if (this.input.operation.inputParams) {
+            _.forEach(
+                [...this.input.operation.inputParams.listToscaDataDefinition].sort((a, b) => a.name.localeCompare(b.name)),
+                (input: OperationParameter) => {
+                    this.addParam(input);
+                }
+            );
+        }
     }
 
     onSelectWorkflow(selectedVersionId?: string): Subscription {
@@ -104,7 +127,9 @@ export class OperationCreatorComponent {
             this.isLoading = false;
 
             this.workflowVersions = _.map(
-                _.filter(versions, version => version.state === this.workflowServiceNg2.VERSION_STATE_CERTIFIED),
+                _.filter(
+                    versions, version => version.state === this.workflowServiceNg2.VERSION_STATE_CERTIFIED
+                ).sort((a, b) => a.name.localeCompare(b.name)),
                 (version: any) => {
                     if (!this.assignInputParameters[this.operation.workflowId][version.id]) {
                         this.assignInputParameters[this.operation.workflowId][version.id] = _.map(version.inputs, (input: any) => {
@@ -114,14 +139,15 @@ export class OperationCreatorComponent {
                                 property: null,
                                 mandatory: input.mandatory,
                             });
-                        });
+                        })
+                        .sort((a, b) => a.name.localeCompare(b.name));
                     }
-                    return new DropdownValue(version.id, `v. ${version.name}`);
+                    return new DropdownValue(version.id, `V ${version.name}`);
                 }
             );
 
-            if (!selectedVersionId && versions.length) {
-                this.operation.workflowVersionId = _.last(versions.sort()).id;
+            if (!selectedVersionId && this.workflowVersions.length) {
+                this.operation.workflowVersionId = _.last(this.workflowVersions).value;
             }
             this.changeWorkflowVersion();
         });
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 2a72177621..25ecd2932e 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,9 +1,10 @@
 <div class="cell field-name">
-    <input
+    <ui-element-input
         *ngIf="!isAssociateWorkflow"
-        type="text"
         data-tests-id="paramName"
-        [(ngModel)]="param.name" />
+        [(value)]="param.name"
+        [readonly]="readonly">
+    </ui-element-input>
     <span *ngIf="isAssociateWorkflow">{{param.name}}</span>
 </div>
 
@@ -13,7 +14,8 @@
         data-tests-id="paramType"
         [values]="propTypeEnum"
         [(value)]="param.type"
-        (valueChange)="onChangeType()">
+        (valueChange)="onChangeType()"
+        [readonly]="readonly">
     </ui-element-dropdown>
     <span *ngIf="isAssociateWorkflow">{{param.type}}</span>
 </div>
@@ -22,7 +24,8 @@
     <ui-element-dropdown
         data-tests-id="paramProperty"
         [values]="filteredInputProps"
-        [(value)]="param.property">
+        [(value)]="param.property"
+        [readonly]="readonly">
     </ui-element-dropdown>
 </div>
 
@@ -30,11 +33,12 @@
     <checkbox
         *ngIf="!isAssociateWorkflow"
         data-tests-id="paramMandatory"
-        [(checked)]="param.mandatory">
+        [(checked)]="param.mandatory"
+        [ngClass]="{'disabled':readonly}">
     </checkbox>
 </div>
 
-<div class="cell remove" *ngIf="!isAssociateWorkflow">
+<div class="cell remove" *ngIf="!isAssociateWorkflow && !readonly">
     <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.ts b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts
index 75d4fcf7d2..53dcffddd3 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,8 @@
 import {Component, Input} from '@angular/core';
-import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
+import {PROPERTY_DATA} from "app/utils";
+import {DataTypeService} from "app/ng2/services/data-type.service";
 import {OperationParameter} from 'app/models';
+import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
 
 @Component({
     selector: 'param-row',
@@ -11,14 +13,27 @@ import {OperationParameter} from 'app/models';
 export class ParamRowComponent {
     @Input() param: OperationParameter;
     @Input() inputProps: Array<DropdownValue>;
-    @Input() propTypes: {};
+    @Input() propTypes: { [key: string]: string };
     @Input() onRemoveParam: Function;
     @Input() isAssociateWorkflow: boolean;
+    @Input() readonly: boolean;
 
-    propTypeEnum: Array<string> = ['boolean', 'float', 'integer', 'string'];
+    propTypeEnum: Array<String> = [];
     filteredInputProps: Array<DropdownValue> = [];
 
+    constructor(private dataTypeService:DataTypeService) {}
+
     ngOnInit() {
+        const types = PROPERTY_DATA.TYPES.concat(
+            _.filter(
+                Object.keys(this.dataTypeService.getAllDataTypes()),
+                type => PROPERTY_DATA.TYPES.indexOf(type) === -1
+            )
+        );
+        this.propTypeEnum = _.filter(
+            types,
+            type => _.toArray(this.propTypes).indexOf(type) > -1
+        );
         this.onChangeType();
     }
 
diff --git a/catalog-ui/src/app/ng2/services/data-type.service.ts b/catalog-ui/src/app/ng2/services/data-type.service.ts
index d79cfc621f..cabaccd1d5 100644
--- a/catalog-ui/src/app/ng2/services/data-type.service.ts
+++ b/catalog-ui/src/app/ng2/services/data-type.service.ts
@@ -43,6 +43,10 @@ export class DataTypeService {
         return this.dataTypes[typeName];
     }
 
+    public getAllDataTypes(): DataTypesMap {
+        return this.dataTypes;
+    }
+
 
     public getDerivedDataTypeProperties(dataTypeObj: DataTypeModel, propertiesArray: Array<DerivedFEProperty>, parentName: string) {
         //push all child properties to array
diff --git a/catalog-ui/src/assets/languages/en_US.json b/catalog-ui/src/assets/languages/en_US.json
index 64be28506b..48751c9f73 100644
--- a/catalog-ui/src/assets/languages/en_US.json
+++ b/catalog-ui/src/assets/languages/en_US.json
@@ -453,6 +453,7 @@
 
     "=========== 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.",
+    "SERVICE_OPERATION_PROPERTY_TOOLTIP_TEXT": "Service 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.",