Interface Operation tab and screens

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

14 files changed, 661 insertions, 2 deletions

diff --git a/catalog-ui/src/app/ng2/app.module.ts b/catalog-ui/src/app/ng2/app.module.ts
index 727f0fe8f5..194d2e0095 100644
--- a/catalog-ui/src/app/ng2/app.module.ts
+++ b/catalog-ui/src/app/ng2/app.module.ts
@@ -43,6 +43,8 @@ import {ComponentInstanceServiceNg2} from "./services/component-instance-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 {LayoutModule} from "./components/layout/layout.module";
 import {UserService} from "./services/user.service";
 import {PoliciesService} from "./services/policies.service";
@@ -85,6 +87,8 @@ export function configServiceFactory(config:ConfigService) {
         ConnectionWizardModule,
         PropertiesAssignmentModule,
         PluginFrameModule,
+        InterfaceOperationModule,
+        OperationCreatorModule,
         ServicePathCreatorModule,
         ServicePathsListModule,
         ServicePathModule,
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
new file mode 100644
index 0000000000..caf6a3f528
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.module.ts
@@ -0,0 +1,19 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {InterfaceOperationComponent} from "./interface-operation.page.component";
+
+@NgModule({
+    declarations: [
+        InterfaceOperationComponent
+    ],
+    imports: [
+        CommonModule
+    ],
+    exports: [],
+    entryComponents: [
+        InterfaceOperationComponent
+    ],
+    providers: []
+})
+
+export class InterfaceOperationModule {}
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
new file mode 100644
index 0000000000..25e8672db8
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.html
@@ -0,0 +1,38 @@
+<div class="interface-operation">
+    <div
+        class="add-btn"
+        [ngClass]="{'disabled': readonly}"
+        data-tests-id="addInterfaceOperation"
+        (click)="onAddOperation()">
+        Add Operation
+    </div>
+
+    <div class="operation-list" [ngClass]="{'disabled': readonly}">
+
+        <div
+            class="operation-row"
+            *ngFor="let operation of operationList"
+            (click)="onEditOperation(operation)">
+
+            <span class="operation-info-container">
+                <span class="operation-title">
+                    <p class="operation-text" data-tests-id="interfaceOperationType">{{operation.operationType}}</p>
+                </span>
+
+                <span class="operation-description">
+                    <p class="operation-text" data-tests-id="interfaceOperationDescription">{{operation.description}}</p>
+                </span>
+            </span>
+
+            <span class="operation-dumbo">
+                <span
+                    class="sprite-new delete-item-icon"
+                    data-tests-id="deleteInterfaceOperation"
+                    (click)="onRemoveOperation($event, operation)">
+                </span>
+            </span>
+
+        </div>
+    </div>
+
+</div>
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.less b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.less
new file mode 100644
index 0000000000..435502066e
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.less
@@ -0,0 +1,88 @@
+@import '../../../../assets/styles/variables.less';
+
+.interface-operation {
+    .add-btn {
+        position: relative;
+        top: -31px;
+        text-transform: uppercase;
+        font-size: 14px;
+    }
+
+    a:not(.disabled) {
+        &:hover {
+            cursor: pointer;
+        }
+    }
+
+    .operation-list {
+        border-top: 1px solid @main_color_o;
+        padding-top: 25px;
+
+        .operation-row {
+            width: 100%;
+            border: 1px solid @main_color_o;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            height: 100px;
+
+            &:hover {
+                border-color: @main_color_c;
+                cursor: pointer;
+            }
+
+            &:not(:first-child) {
+                margin-top: 20px;
+            }
+
+            .operation-info-container {
+                height: 100%;
+                display: flex;
+                align-items: center;
+                margin-right: 60px;
+
+                .operation-title, .operation-description {
+                    display: flex;
+                    align-items: center;
+
+                    .operation-text {
+                        overflow: hidden;
+                        margin-bottom: 0;
+                        max-height: 5rem;
+                    }
+                }
+
+                .operation-title {
+                    flex-shrink: 0;
+                    width: 200px;
+                    height: calc(100% - 13px);
+                    border-right: 1px solid @main_color_o;
+                    margin: 4px 0;
+                    padding: 0 30px;
+
+                    .operation-text {
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                    }
+                }
+
+                .operation-description {
+                    padding-left: 30px;
+                    text-align: left;
+                    font-family: @font-opensans-regular;
+
+                    .operation-text {
+                        word-break: break-word;
+                    }
+                }
+            }
+
+            .operation-dumbo {
+                padding-right: 20px;
+                display: flex;
+                flex-direction: column;
+                align-items: left;
+            }
+        }
+    }
+}
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
new file mode 100644
index 0000000000..c58e1de135
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts
@@ -0,0 +1,176 @@
+import * as _ from "lodash";
+import {Component, Input, ComponentRef, Inject} from '@angular/core';
+import {Component as IComponent} from 'app/models/components/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 {OperationCreatorComponent} from './operation-creator/operation-creator.component';
+
+@Component({
+    selector: 'interface-operation',
+    templateUrl: './interface-operation.page.component.html',
+    styleUrls: ['interface-operation.page.component.less'],
+    providers: [ModalService]
+})
+
+export class InterfaceOperationComponent {
+
+    modalInstance: ComponentRef<ModalComponent>;
+    operationList: Array<OperationModel> = [];
+    openOperation: OperationModel;
+
+    @Input() component: IComponent;
+    @Input() readonly: boolean;
+
+    constructor(
+        @Inject('$state') private $state:ng.ui.IStateService,
+        private ComponentServiceNg2: ComponentServiceNg2,
+        private ModalServiceNg2: ModalService,
+    ) {}
+
+    ngOnInit(): void {
+        this.ComponentServiceNg2.getInterfaceOperations(this.component).subscribe((response: ComponentGenericResponse) => {
+            let {interfaceOperations} = response;
+            this.component.interfaceOperations = interfaceOperations;
+            this.operationList = _.toArray(interfaceOperations);
+        });
+    }
+
+    getDisabled = (): boolean => {
+        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 => {
+        const modalMap = {
+            create: {
+                modalTitle: 'Create a New Operation',
+                saveBtnText: 'Create',
+                submitCallback: this.createOperation,
+            },
+            edit: {
+                modalTitle: 'Edit Operation',
+                saveBtnText: 'Save',
+                submitCallback: this.updateOperation,
+            }
+        };
+
+        const modalData = operation ? modalMap.edit : modalMap.create;
+
+        if (this.openOperation) {
+            if (operation ? operation.uniqueId === this.openOperation.uniqueId : !this.openOperation.uniqueId) {
+                operation = this.openOperation;
+            }
+        }
+
+        this.ComponentServiceNg2.getComponentInputs(this.component).subscribe((response: ComponentGenericResponse) => {
+
+            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} = this.modalInstance.instance.dynamicContent.instance;
+                    this.openOperation = operation;
+                    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();
+        });
+    }
+
+    onRemoveOperation = (event: Event, operation: OperationModel): void => {
+        event.stopPropagation();
+
+        const confirmCallback = () => {
+            this.ModalServiceNg2.closeCurrentModal();
+            this.ComponentServiceNg2
+                .deleteInterfaceOperation(this.component, operation)
+                .subscribe(() => {
+                    const index = _.findIndex(this.operationList, el => el.uniqueId === operation.uniqueId);
+                    this.operationList.splice(index, 1);
+                    this.component.interfaceOperations = this.operationList;
+                });
+        }
+
+        this.modalInstance = this.ModalServiceNg2.createActionModal(
+            operation.operationType,
+            'Are you sure you want to delete this operation?',
+            'Delete',
+            confirmCallback,
+            'Cancel',
+        );
+
+        this.modalInstance.instance.open();
+    }
+
+    private createOperation = (operation: OperationModel): any => {
+        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
+            });
+
+        });
+    }
+
+    private updateOperation = (operation: OperationModel): any => {
+        this.ComponentServiceNg2.updateInterfaceOperation(this.component, operation).subscribe(newOperation => {
+            this.openOperation = null;
+            const index = _.findIndex(this.operationList, el => el.uniqueId === operation.uniqueId);
+            this.operationList.splice(index, 1, newOperation);
+            this.component.interfaceOperations = this.operationList;
+        });
+    }
+
+}
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
new file mode 100644
index 0000000000..9e47cd5cef
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html
@@ -0,0 +1,59 @@
+<div class="operation-creator">
+    <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" />
+            </div>
+
+            <div class="i-sdc-form-item" >
+                <label class="i-sdc-form-label">Description</label>
+                <input
+                    type="text"
+                    data-tests-id="operationDescription"
+                    name="description"
+                    [(ngModel)]="operation.description"
+                    [attr.maxLength]="200" />
+            </div>
+        </div>
+
+        <div class="separator-buttons">
+            <span class="input-param-title">Input Parameters</span>
+            <a
+                class="add-param-link"
+                data-tests-id="addInputParameter"
+                [ngClass]="{'disabled':!isAddAllowed()}"
+                (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>
+            </div>
+
+            <div class="empty-msg data-row" *ngIf="inputParams.length === 0">
+                No data to display.
+            </div>
+
+            <param-row
+                *ngFor="let param of inputParams; let idx=index"
+                class="data-row"
+                [param]="param"
+                [inputProps]="inputProperties"
+                [onRemoveParam]="onRemoveParam">
+            </param-row>
+        </div>
+
+    </form>
+</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
new file mode 100644
index 0000000000..289dd5b452
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less
@@ -0,0 +1,69 @@
+@import '../../../../../assets/styles/variables.less';
+
+.operation-creator {
+    font-family: @font-opensans-regular;
+    user-select: none;
+    padding-top: 12px;
+    padding-bottom: 20px;
+
+    .i-sdc-form-label {
+        font-size: 12px;
+    }
+
+    .w-sdc-form .i-sdc-form-item {
+        margin-bottom: 15px;
+    }
+
+    .side-by-side {
+        display: flex;
+
+        .i-sdc-form-item {
+            flex-basis: 100%;
+
+            &:first-child {
+                flex-basis: 40%;
+                margin-right: 10px;
+            }
+        }
+    }
+
+    .input-param-title {
+        font-size: 16px;
+        text-transform: uppercase;
+    }
+
+    .separator-buttons {
+        margin: 10px 0;
+        display: flex;
+        justify-content: space-between;
+
+        .add-param-link {
+            &:not(.disabled):hover {
+                cursor: pointer;
+            }
+        }
+    }
+
+    .generic-table {
+        max-height: 233px;
+
+        .header-row .header-cell {
+            &:last-child {
+                padding: 0;
+            }
+        }
+
+        .data-row {
+            &.empty-msg {
+                padding: 6px 14px;
+            }
+        }
+
+        /deep/ .cell {
+            &:last-child {
+                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
new file mode 100644
index 0000000000..cc7b5feaf3
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts
@@ -0,0 +1,68 @@
+import * as _ from "lodash";
+import {Component} from '@angular/core';
+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'],
+})
+
+export class OperationCreatorComponent {
+
+    inputProperties: Array<DropdownValue>;
+    input: any;
+    inputParams: Array<OperationParam> = [];
+    operation: OperationModel;
+    isEditMode: boolean = false;
+
+    ngOnInit() {
+        this.operation = new OperationModel(this.input.operation || {});
+
+        if (this.input.operation) {
+            let {inputParams} = this.input.operation;
+
+            if (inputParams) {
+                _.forEach(inputParams.listToscaDataDefinition, (input: OperationParam) => {
+                    this.addParam(input);
+                });
+            }
+
+            if (this.input.operation.uniqueId) {
+                this.isEditMode = true;
+            }
+        }
+
+        this.inputProperties = _.map(this.input.inputProperties,
+            (input: InputModel) => new DropdownValue(input.uniqueId, input.name)
+        );
+    }
+
+    addParam(param?: OperationParam): void {
+        this.inputParams.push(new OperationParam(param));
+    }
+
+    isAddAllowed(): boolean {
+        if (this.inputParams.length === 0) {
+            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);
+    }
+
+    createInputParamList(): void {
+        this.operation.createInputParamsList(this.inputParams);
+    }
+
+    checkFormValidForSubmit(): boolean {
+        return this.operation.operationType && this.operation.operationType.length > 0 && this.isAddAllowed();
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.module.ts b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.module.ts
new file mode 100644
index 0000000000..9128e74641
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.module.ts
@@ -0,0 +1,27 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {OperationCreatorComponent} from "./operation-creator.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 {ParamRowComponent} from './param-row/param-row.component';
+
+@NgModule({
+    declarations: [
+        OperationCreatorComponent,
+        ParamRowComponent
+    ],
+    imports: [
+        CommonModule,
+        FormsModule,
+        FormElementsModule,
+        UiElementsModule
+    ],
+    exports: [],
+    entryComponents: [
+        OperationCreatorComponent
+    ],
+    providers: []
+})
+
+export class OperationCreatorModule {}
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
new file mode 100644
index 0000000000..86d7628c17
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html
@@ -0,0 +1,21 @@
+<div class="cell">
+    <input
+        type="text"
+        data-tests-id="inputParamName"
+        [(ngModel)]="param.paramName" />
+</div>
+
+<ui-element-dropdown
+    class="cell"
+    data-tests-id="inputParamProperty"
+    [values]="inputProps"
+    [(value)]="param.paramId">
+</ui-element-dropdown>
+
+<div class="cell remove">
+    <span
+        class="sprite-new delete-item-icon"
+        data-tests-id="removeInputParam"
+        (click)="onRemoveParam(param)">
+    </span>
+</div>
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
new file mode 100644
index 0000000000..9abd7c7681
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less
@@ -0,0 +1,29 @@
+@import '../../../../../../assets/styles/variables.less';
+
+.remove {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .delete-item-icon {
+        &:hover {
+            cursor: pointer;
+        }
+    }
+}
+
+
+.cell {
+    padding: 0;
+
+    /deep/ select {
+        height: 30px;
+        border: none;
+    }
+
+    input {
+        height: 30px;
+        border: none;
+        padding-left: 10px;
+    }
+}
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
new file mode 100644
index 0000000000..01e0629942
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts
@@ -0,0 +1,15 @@
+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';
+
+@Component({
+    selector: 'param-row',
+    templateUrl: './param-row.component.html',
+    styleUrls: ['./param-row.component.less']
+})
+
+export class ParamRowComponent {
+    @Input() param: OperationParam;
+    @Input() inputProps: Array<DropdownValue>;
+    @Input() onRemoveParam: Function;
+}
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 9c3f78a444..381995d91c 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
@@ -24,7 +24,7 @@ import {Observable} from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/toPromise';
 import {Response, URLSearchParams} from '@angular/http';
-import { Component, InputBEModel, InstancePropertiesAPIMap, FilterPropertiesAssignmentData} from "app/models";
+import { Component, InputBEModel, InstancePropertiesAPIMap, FilterPropertiesAssignmentData, OperationModel, CreateOperationResponse} from "app/models";
 import {COMPONENT_FIELDS} from "app/utils";
 import {ComponentGenericResponse} from "../responses/component-generic-response";
 import {InstanceBePropertiesMap} from "../../../models/properties-inputs/property-fe-map";
@@ -114,6 +114,48 @@ export class ComponentServiceNg2 {
         return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_PROPERTIES]);
     }
 
+    getInterfaceOperations(component:Component):Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INTERFACE_OPERATIONS]);
+    }
+
+    getInterfaceOperation(component:Component, operation:OperationModel):Observable<OperationModel> {
+        return this.http.get(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/interfaceOperations/' + operation.uniqueId)
+            .map((res:Response) => {
+                return res.json();
+            });
+    }
+
+    createInterfaceOperation(component:Component, operation:OperationModel):Observable<CreateOperationResponse> {
+        const operationList = {
+            'interfaceOperations': {
+                [operation.operationType]: operation
+            }
+        };
+        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/interfaceOperations', operationList)
+            .map((res:Response) => {
+                return res.json();
+            });
+    }
+
+    updateInterfaceOperation(component:Component, operation:OperationModel):Observable<CreateOperationResponse> {
+        const operationList = {
+            'interfaceOperations': {
+                [operation.operationType]: operation
+            }
+        };
+        return this.http.put(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/interfaceOperations', operationList)
+            .map((res:Response) => {
+                return res.json();
+            });
+    }
+
+    deleteInterfaceOperation(component:Component, operation:OperationModel):Observable<OperationModel> {
+        return this.http.delete(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/interfaceOperations/' + operation.uniqueId)
+            .map((res:Response) => {
+                return res.json();
+            });
+    }
+
     getCapabilitiesAndRequirements(componentType: string, componentId:string):Observable<ComponentGenericResponse> {
         return this.getComponentDataByFieldsName(componentType, componentId, [COMPONENT_FIELDS.COMPONENT_REQUIREMENTS, COMPONENT_FIELDS.COMPONENT_CAPABILITIES]);
     }
diff --git a/catalog-ui/src/app/ng2/services/responses/component-generic-response.ts b/catalog-ui/src/app/ng2/services/responses/component-generic-response.ts
index e7c88a0ab8..5036a10a9d 100644
--- a/catalog-ui/src/app/ng2/services/responses/component-generic-response.ts
+++ b/catalog-ui/src/app/ng2/services/responses/component-generic-response.ts
@@ -22,7 +22,7 @@
  * Created by ob0695 on 4/18/2017.
  */
 
-import { ArtifactGroupModel, PropertyModel, PropertiesGroup, AttributeModel, AttributesGroup, ComponentInstance,
+import { ArtifactGroupModel, PropertyModel, PropertiesGroup, AttributeModel, AttributesGroup, ComponentInstance, OperationModel,
     InputBEModel, Module, ComponentMetadata, RelationshipModel, RequirementsGroup, CapabilitiesGroup,InputFEModel} from "app/models";
 import {CommonUtils} from "app/utils";
 import {Serializable} from "../utils/serializable";
@@ -47,6 +47,7 @@ export class ComponentGenericResponse  implements Serializable<ComponentGenericR
     public policies:Array<PolicyInstance>;
     public groups:Array<Module>;
     public interfaces:any;
+    public interfaceOperations:Array<OperationModel>;
     public additionalInformation:any;
     public derivedList:Array<any>;
 
@@ -88,6 +89,9 @@ export class ComponentGenericResponse  implements Serializable<ComponentGenericR
         if(response.toscaArtifacts) {
             this.toscaArtifacts = new ArtifactGroupModel(response.toscaArtifacts);
         }
+        if(response.interfaces) {
+            this.interfaceOperations = CommonUtils.initInterfaceOperations(response.interfaces);
+        }
         if(response.metadata) {
             this.metadata = new ComponentMetadata().deserialize(response.metadata);
         }