summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app
diff options
context:
space:
mode:
authorArielk <Ariel.Kenan@amdocs.com>2018-10-14 16:50:17 +0300
committerAvi Gaffa <avi.gaffa@amdocs.com>2018-10-16 07:35:59 +0000
commitaefe3914447a6dfd0973a75cb517b338c088e37b (patch)
tree51e7a019a65fb596f5165b13a8bde32450ef45f2 /catalog-ui/src/app
parent2c68d1753250178027ea577df394b2ae0ed76f4f (diff)
Operation WF association UI
Change-Id: Id390261074721966ad85f881ae8c9e39b5022fad Issue-ID: SDC-1814 Signed-off-by: Arielk <Ariel.Kenan@amdocs.com>
Diffstat (limited to 'catalog-ui/src/app')
-rw-r--r--catalog-ui/src/app/models/operation.ts16
-rw-r--r--catalog-ui/src/app/modules/directive-module.ts2
-rw-r--r--catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts36
-rw-r--r--catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html17
-rw-r--r--catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts94
-rw-r--r--catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.module.ts4
-rw-r--r--catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html6
-rw-r--r--catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less5
-rw-r--r--catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts14
-rw-r--r--catalog-ui/src/app/utils/common-utils.ts3
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/interface-operation/interface-operation-view.html4
11 files changed, 91 insertions, 110 deletions
diff --git a/catalog-ui/src/app/models/operation.ts b/catalog-ui/src/app/models/operation.ts
index f15f0b13b5..2aa1332f06 100644
--- a/catalog-ui/src/app/models/operation.ts
+++ b/catalog-ui/src/app/models/operation.ts
@@ -2,7 +2,7 @@
export class OperationParameter {
name: string;
- type: string;
+ type: String;
property: string;
mandatory: boolean;
@@ -20,6 +20,12 @@ export interface IOperationParamsList {
listToscaDataDefinition: Array<OperationParameter>;
}
+export class WORKFLOW_ASSOCIATION_OPTIONS {
+ static NONE = 'NONE';
+ static NEW = 'NEW';
+ static EXISTING = 'EXISTING';
+}
+
export class OperationModel {
operationType: string;
description: string;
@@ -28,16 +34,20 @@ export class OperationModel {
inputParams: IOperationParamsList;
outputParams: IOperationParamsList;
+ workflowAssociationType: string;
workflowId: string;
workflowVersionId: string;
constructor(operation?: any) {
if (operation) {
+ this.operationType = operation.operationType;
this.description = operation.description;
+ this.uniqueId = operation.uniqueId;
+
this.inputParams = operation.inputParams;
- this.operationType = operation.operationType;
this.outputParams = operation.outputParams;
- this.uniqueId = operation.uniqueId;
+
+ this.workflowAssociationType = operation.workflowAssociationType;
this.workflowId = operation.workflowId;
this.workflowVersionId = operation.workflowVersionId;
}
diff --git a/catalog-ui/src/app/modules/directive-module.ts b/catalog-ui/src/app/modules/directive-module.ts
index e7acb1ccf6..683a3344ca 100644
--- a/catalog-ui/src/app/modules/directive-module.ts
+++ b/catalog-ui/src/app/modules/directive-module.ts
@@ -245,7 +245,7 @@ directiveModule.directive('ng2ServicePathSelector', downgradeComponent({
outputs: []
}) as angular.IDirectiveFactory);
-directiveModule.directive('ng2InterfaceOperation', downgradeComponent({
+directiveModule.directive('interfaceOperation', downgradeComponent({
component: InterfaceOperationComponent,
inputs: ['component', 'readonly'],
outputs: []
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 f23f66a5ff..2dff6a833d 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
@@ -4,9 +4,11 @@ import {Component as IComponent} from 'app/models/components/component';
import {SdcConfigToken, ISdcConfig} from "app/ng2/config/sdc-config.config";
+import {Observable} from "rxjs/Observable";
+
import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component';
import {ModalService} from 'app/ng2/services/modal.service';
-import {ModalModel, ButtonModel, InputBEModel, OperationModel, CreateOperationResponse} from 'app/models';
+import {ModalModel, ButtonModel, InputBEModel, OperationModel, CreateOperationResponse, WORKFLOW_ASSOCIATION_OPTIONS} from 'app/models';
import {ComponentServiceNg2} from 'app/ng2/services/component-services/component.service';
import {ComponentGenericResponse} from 'app/ng2/services/responses/component-generic-response';
@@ -47,26 +49,14 @@ export class InterfaceOperationComponent {
ngOnInit(): void {
this.isLoading = true;
- let gotOperations = false;
- let gotInputs = false;
-
- this.ComponentServiceNg2.getInterfaceOperations(this.component).subscribe((response: ComponentGenericResponse) => {
- if (gotInputs) {
- this.isLoading = false;
- } else {
- gotOperations = true;
- }
- this.component.interfaceOperations = response.interfaceOperations;
- this.operationList = _.toArray(response.interfaceOperations).sort((a, b) => a.operationType.localeCompare(b.operationType));
- });
-
- this.ComponentServiceNg2.getComponentInputs(this.component).subscribe((response: ComponentGenericResponse) => {
- if (gotOperations) {
- this.isLoading = false;
- } else {
- gotInputs = true;
- }
- this.inputs = response.inputs;
+ Observable.forkJoin(
+ this.ComponentServiceNg2.getInterfaceOperations(this.component),
+ this.ComponentServiceNg2.getComponentInputs(this.component)
+ ).subscribe((response) => {
+ this.isLoading = false;
+ this.component.interfaceOperations = response[0].interfaceOperations;
+ this.operationList = _.toArray(response[0].interfaceOperations).sort((a, b) => a.operationType.localeCompare(b.operationType));
+ this.inputs = response[1].inputs;
});
}
@@ -183,14 +173,14 @@ export class InterfaceOperationComponent {
this.operationList.push(new OperationModel(response));
this.operationList.sort((a, b) => a.operationType.localeCompare(b.operationType));
- if (response.workflowId) {
+ if (response.workflowId && operation.workflowAssociationType === 'EXISTING') {
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).subscribe();
- } else {
+ } else if (operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.NEW) {
this.$state.go('workspace.plugins', { path: 'workflowDesigner' });
}
});
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 5c511c15f3..6d5fd8d72f 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
@@ -47,7 +47,8 @@
<div class="i-sdc-form-item" *ngIf="enableWorkflowAssociation">
<label class="i-sdc-form-label">Workflow Assignment</label>
<ui-element-dropdown
- [(value)]="workflowAssociationType"
+ data-tests-id="association-type"
+ [(value)]="operation.workflowAssociationType"
[values]="associationOptions"
(valueChange)="toggleAssociateWorkflow()"
[readonly]="readonly">
@@ -56,7 +57,7 @@
<div></div>
</div>
- <div class="side-by-side" *ngIf="workflowAssociationType == WORKFLOW_ASSOCIATION_OPTIONS.EXISTING">
+ <div class="side-by-side" *ngIf="isUsingExistingWF()">
<div class="i-sdc-form-item">
<label class="i-sdc-form-label required">Workflow</label>
<ui-element-dropdown
@@ -87,7 +88,7 @@
</tabs>
<a
class="add-param-link add-btn"
- *ngIf="workflowAssociationType != WORKFLOW_ASSOCIATION_OPTIONS.EXISTING && !readonly"
+ *ngIf="!isUsingExistingWF() && !readonly"
data-tests-id="addInputParameter"
[ngClass]="{'disabled':!isParamsValid()}"
(click)="addParam()">Add Parameter</a>
@@ -100,19 +101,19 @@
<span class="cell header-cell field-property" *ngIf="currentTab == TYPE_INPUT">
Property
<span
- *ngIf="workflowAssociationType != WORKFLOW_ASSOCIATION_OPTIONS.EXISTING"
+ *ngIf="!isUsingExistingWF()"
class="sprite-new info-icon"
tooltip="{{propertyTooltipText}}"
tooltipDelay="0">
</span>
</span>
- <span class="cell header-cell field-mandatory" *ngIf="workflowAssociationType != WORKFLOW_ASSOCIATION_OPTIONS.EXISTING">Mandatory</span>
- <span class="cell header-cell remove" *ngIf="workflowAssociationType != WORKFLOW_ASSOCIATION_OPTIONS.EXISTING && !readonly">●●●</span>
+ <span class="cell header-cell field-mandatory" *ngIf="!isUsingExistingWF()">Mandatory</span>
+ <span class="cell header-cell remove" *ngIf="!isUsingExistingWF() && !readonly">●●●</span>
</div>
<div class="empty-msg data-row" *ngIf="tableParameters.length === 0">
<div>NO PARAMETERS TO SHOW</div>
- <div *ngIf="workflowAssociationType == WORKFLOW_ASSOCIATION_OPTIONS.EXISTING && !operation.workflowVersionId">
+ <div *ngIf="isUsingExistingWF() && !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>
@@ -127,7 +128,7 @@
*ngFor="let param of tableParameters"
class="data-row"
[isInputParam]="currentTab == TYPE_INPUT"
- [isAssociateWorkflow]="workflowAssociationType == WORKFLOW_ASSOCIATION_OPTIONS.EXISTING"
+ [isAssociateWorkflow]="isUsingExistingWF()"
[param]="param"
[inputProps]="inputProperties"
[propTypes]="inputPropertyTypes"
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 42f95d577c..207bfa9f55 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts
@@ -5,7 +5,7 @@ import {Subscription} from "rxjs/Subscription";
import {TranslateService} from "app/ng2/shared/translator/translate.service";
import {WorkflowServiceNg2} from 'app/ng2/services/workflow.service';
-import {OperationModel, OperationParameter, InputBEModel, RadioButtonModel} from 'app/models';
+import {OperationModel, OperationParameter, InputBEModel, RadioButtonModel, WORKFLOW_ASSOCIATION_OPTIONS} from 'app/models';
import {Tabs, Tab} from "app/ng2/components/ui/tabs/tabs.component";
import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
@@ -47,7 +47,6 @@ export class OperationCreatorComponent {
tableParameters: Array<OperationParameter> = [];
associationOptions: Array<DropdownValue>;
- workflowAssociationType: String;
enableWorkflowAssociation: boolean;
isEditMode: boolean = false;
@@ -57,12 +56,6 @@ export class OperationCreatorComponent {
propertyTooltipText: String;
- WORKFLOW_ASSOCIATION_OPTIONS = {
- NONE: 'No Workflow',
- NEW: 'New Workflow',
- EXISTING: 'Existing Workflow'
- }
-
TYPE_INPUT = 'Inputs';
TYPE_OUTPUT = 'Outputs';
@@ -72,15 +65,14 @@ export class OperationCreatorComponent {
constructor(private workflowServiceNg2: WorkflowServiceNg2, private translateService: TranslateService) {
this.translateService.languageChangedObservable.subscribe(lang => {
this.propertyTooltipText = this.translateService.translate("OPERATION_PROPERTY_TOOLTIP_TEXT");
+
+ this.associationOptions = [
+ new DropdownValue(WORKFLOW_ASSOCIATION_OPTIONS.NONE, this.translateService.translate("NO_WORKFLOW_ASSOCIATION")),
+ new DropdownValue(WORKFLOW_ASSOCIATION_OPTIONS.EXISTING, this.translateService.translate("EXISTING_WORKFLOW_ASSOCIATION"))
+ ];
});
- this.currentTab = this.TYPE_INPUT;
- this.associationOptions = [
- new DropdownValue(this.WORKFLOW_ASSOCIATION_OPTIONS.NONE, this.WORKFLOW_ASSOCIATION_OPTIONS.NONE),
- new DropdownValue(this.WORKFLOW_ASSOCIATION_OPTIONS.NEW, this.WORKFLOW_ASSOCIATION_OPTIONS.NEW),
- new DropdownValue(this.WORKFLOW_ASSOCIATION_OPTIONS.EXISTING, this.WORKFLOW_ASSOCIATION_OPTIONS.EXISTING)
- ];
- this.workflowAssociationType = this.WORKFLOW_ASSOCIATION_OPTIONS.NONE;
+ this.currentTab = this.TYPE_INPUT;
}
ngOnInit() {
@@ -100,6 +92,7 @@ export class OperationCreatorComponent {
const inputOperation = this.input.operation;
this.operation = new OperationModel(inputOperation || {});
+ this.operation.workflowAssociationType = inputOperation ? inputOperation.workflowAssociationType : WORKFLOW_ASSOCIATION_OPTIONS.NONE;
if (this.enableWorkflowAssociation) {
this.isLoading = true;
@@ -125,7 +118,7 @@ export class OperationCreatorComponent {
this.buildParams();
this.updateTable();
} else {
- this.workflowAssociationType = this.WORKFLOW_ASSOCIATION_OPTIONS.EXISTING;
+ this.operation.workflowAssociationType = WORKFLOW_ASSOCIATION_OPTIONS.EXISTING;
this.onSelectWorkflow(inputOperation.workflowVersionId).add(() => {
this.buildParams();
this.updateTable();
@@ -179,26 +172,19 @@ export class OperationCreatorComponent {
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) => {
- return new OperationParameter({
- name: input.name,
- type: input.type && input.type.toLowerCase(),
- property: null,
- mandatory: input.mandatory,
- });
+ if (!this.assignInputParameters[this.operation.workflowId][version.id] && !selectedVersionId) {
+ this.assignInputParameters[this.operation.workflowId][version.id] = _.map(version.inputs, (input: OperationParameter) => {
+ return new OperationParameter({...input, type: input.type.toLowerCase()});
})
.sort((a, b) => a.name.localeCompare(b.name));
- this.assignOutputParameters[this.operation.workflowId][version.id] = _.map(version.outputs, (output: any) => {
- return new OperationParameter({
- name: output.name,
- type: output.type && output.type.toLowerCase(),
- property: null,
- mandatory: output.mandatory,
- });
+ this.assignOutputParameters[this.operation.workflowId][version.id] = _.map(version.outputs, (output: OperationParameter) => {
+ return new OperationParameter({...output, type: output.type.toLowerCase()});
})
.sort((a, b) => a.name.localeCompare(b.name));
+ } else if (selectedVersionId) {
+ this.assignInputParameters[this.operation.workflowId][version.id] = [];
+ this.assignOutputParameters[this.operation.workflowId][version.id] = [];
}
return new DropdownValue(version.id, `V ${version.name}`);
}
@@ -207,6 +193,7 @@ export class OperationCreatorComponent {
if (!selectedVersionId && this.workflowVersions.length) {
this.operation.workflowVersionId = _.last(this.workflowVersions).value;
}
+
this.changeWorkflowVersion();
});
@@ -220,7 +207,7 @@ export class OperationCreatorComponent {
toggleAssociateWorkflow() {
- if (this.workflowAssociationType !== this.WORKFLOW_ASSOCIATION_OPTIONS.EXISTING) {
+ if (!this.isUsingExistingWF()) {
this.inputParameters = this.noAssignInputParameters;
this.outputParameters = this.noAssignOutputParameters;
} else {
@@ -258,16 +245,13 @@ export class OperationCreatorComponent {
}
isParamsValid(): boolean {
-
- for (let ctr=0; ctr<this.tableParameters.length; ctr++) {
- if (!this.tableParameters[ctr].name ||
- (this.currentTab == this.TYPE_INPUT && !this.tableParameters[ctr].property)
- ) {
- return false;
+ let valid = true;
+ _.forEach(this.tableParameters, param => {
+ if (!param.name || (this.currentTab == this.TYPE_INPUT && !param.property)) {
+ valid = false;
}
- }
- return true;
-
+ });
+ return valid;
}
onRemoveParam = (param: OperationParameter): void => {
@@ -276,27 +260,21 @@ export class OperationCreatorComponent {
}
createParamLists(): void {
- this.operation.createInputParamsList(_.map(this.inputParameters, input => {
- return {
- name: input.name,
- type: input.type,
- property: input.property,
- mandatory: Boolean(input.mandatory)
- }
- }));
- this.operation.createOutputParamsList(_.map(this.outputParameters, output => {
- return {
- name: output.name,
- type: output.type,
- property: output.property,
- mandatory: Boolean(output.mandatory)
- }
- }));
+ this.operation.createInputParamsList(this.inputParameters);
+ this.operation.createOutputParamsList(this.outputParameters);
+ }
+
+ isUsingExistingWF(): boolean {
+ return this.operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.EXISTING;
+ }
+
+ shouldCreateWF(): boolean {
+ return this.operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.NEW;
}
checkFormValidForSubmit(): boolean {
return this.operation.operationType &&
- (this.workflowAssociationType !== this.WORKFLOW_ASSOCIATION_OPTIONS.EXISTING || this.operation.workflowVersionId) &&
+ (!this.isUsingExistingWF() || this.operation.workflowVersionId) &&
this.isParamsValid();
}
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
index 9128e74641..461a35e4d1 100644
--- 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
@@ -1,9 +1,11 @@
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 {OperationCreatorComponent} from "./operation-creator.component";
import {ParamRowComponent} from './param-row/param-row.component';
@NgModule({
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 8382f1e842..29e8a3508b 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
@@ -38,11 +38,17 @@
<div class="cell field-property" *ngIf="isInputParam">
<ui-element-dropdown
+ *ngIf="filteredInputProps.length > 0"
data-tests-id="paramProperty"
[values]="filteredInputProps"
[(value)]="param.property"
[readonly]="readonly">
</ui-element-dropdown>
+ <span
+ *ngIf="filteredInputProps.length == 0"
+ class="no-properties-error">
+ No available properties of this type.
+ </span>
</div>
<div class="cell field-mandatory" *ngIf="!isAssociateWorkflow">
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 81a1832c21..28932eb90f 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
@@ -36,5 +36,10 @@
&:last-child {
flex: 1;
}
+
+ .no-properties-error {
+ color: red;
+ font-style: italic;
+ }
}
}
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 9f7f4230ee..8844cf65bb 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,5 +1,4 @@
import {Component, Input} from '@angular/core';
-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";
@@ -22,19 +21,8 @@ export class ParamRowComponent {
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.propTypeEnum = _.uniq(_.toArray(this.propTypes));
this.onChangeType();
}
diff --git a/catalog-ui/src/app/utils/common-utils.ts b/catalog-ui/src/app/utils/common-utils.ts
index f195e2dc96..7ba50fdcf1 100644
--- a/catalog-ui/src/app/utils/common-utils.ts
+++ b/catalog-ui/src/app/utils/common-utils.ts
@@ -145,11 +145,12 @@ export class CommonUtils {
return acc.concat(
_.map(interf.operations,
- ({description, name, uniqueId, inputs, outputs, workflowId, workflowVersionId}) => {
+ ({description, name, uniqueId, inputs, outputs, workflowId, workflowVersionId, workflowAssociationType}) => {
const operation = new OperationModel({
description,
operationType: name,
uniqueId,
+ workflowAssociationType,
workflowId,
workflowVersionId
});
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/interface-operation/interface-operation-view.html b/catalog-ui/src/app/view-models/workspace/tabs/interface-operation/interface-operation-view.html
index a92fca2a1c..0e7c355c47 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/interface-operation/interface-operation-view.html
+++ b/catalog-ui/src/app/view-models/workspace/tabs/interface-operation/interface-operation-view.html
@@ -15,10 +15,10 @@
-->
<div class="workspace-interface-operation">
- <ng2-interface-operation
+ <interface-operation
[component]="component"
[readonly]="isViewMode() || !isDesigner()"
[disableMenuItems]="disableMenuItems"
[enableMenuItems]="enableMenuItems">
- </ng2-interface-operation>
+ </interface-operation>
</div>