catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.ts

   1 /*
   2 * ============LICENSE_START=======================================================
   3 * SDC
   4 * ================================================================================
   5 *  Copyright (C) 2022 Nordix Foundation. All rights reserved.
   6 *  ================================================================================
   7 *  Licensed under the Apache License, Version 2.0 (the "License");
   8 *  you may not use this file except in compliance with the License.
   9 *  You may obtain a copy of the License at
  10 *
  11 *        http://www.apache.org/licenses/LICENSE-2.0
  12 *  Unless required by applicable law or agreed to in writing, software
  13 *  distributed under the License is distributed on an "AS IS" BASIS,
  14 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15 *  See the License for the specific language governing permissions and
  16 *  limitations under the License.
  17 *
  18 *  SPDX-License-Identifier: Apache-2.0
  19 *  ============LICENSE_END=========================================================
  20 */
  21 import {Component, ComponentRef, Inject, Input} from '@angular/core';
  22 import {Component as IComponent} from 'app/models/components/component';
  23 import {WorkflowServiceNg2} from 'app/ng2/services/workflow.service';
  24 import {HierarchyDisplayOptions} from "../../components/logic/hierarchy-navigtion/hierarchy-display-options";
  25 import {ISdcConfig, SdcConfigToken} from "app/ng2/config/sdc-config.config";
  26 import {TranslateService} from "app/ng2/shared/translator/translate.service";
  27 import {IModalButtonComponent, SdcUiServices} from 'onap-ui-angular';
  28 import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component';
  29
  30 import {ModalService} from 'app/ng2/services/modal.service';
  31 import {
  32     ArtifactModel,
  33     ButtonModel,
  34     CapabilitiesGroup,
  35     InputBEModel,
  36     InterfaceModel,
  37     ComponentInstance,
  38     ModalModel,
  39     OperationModel,
  40     WORKFLOW_ASSOCIATION_OPTIONS
  41 } from 'app/models';
  42
  43 import {ComponentServiceNg2} from 'app/ng2/services/component-services/component.service';
  44 import {TopologyTemplateService} from "../../services/component-services/topology-template.service";
  45 import {InterfaceOperationModel} from "../../../models/interfaceOperation";
  46 import {InterfaceOperationHandlerComponent} from "../composition/interface-operatons/operation-creator/interface-operation-handler.component";
  47 import {DropdownValue} from "../../components/ui/form-components/dropdown/ui-element-dropdown.component";
  48 import {ToscaArtifactModel} from "../../../models/toscaArtifact";
  49 import {ToscaArtifactService} from "../../services/tosca-artifact.service";
  50 import {InterfaceOperationComponent} from "../interface-operation/interface-operation.page.component";
  51 import {Observable} from "rxjs/Observable";
  52 import {PluginsService} from 'app/ng2/services/plugins.service';
  53 import { InstanceFeDetails } from 'app/models/instance-fe-details';
  54
  55 export class UIOperationModel extends OperationModel {
  56     isCollapsed: boolean = true;
  57     isEllipsis: boolean;
  58     MAX_LENGTH = 75;
  59
  60     constructor(operation: OperationModel) {
  61         super(operation);
  62         if (!operation.description) {
  63             this.description = '';
  64         }
  65
  66         if (this.description.length > this.MAX_LENGTH) {
  67             this.isEllipsis = true;
  68         } else {
  69             this.isEllipsis = false;
  70         }
  71     }
  72
  73     getDescriptionEllipsis(): string {
  74         if (this.isCollapsed && this.description.length > this.MAX_LENGTH) {
  75             return this.description.substr(0, this.MAX_LENGTH - 3) + '...';
  76         }
  77         return this.description;
  78     }
  79
  80     toggleCollapsed(e) {
  81         e.stopPropagation();
  82         this.isCollapsed = !this.isCollapsed;
  83     }
  84 }
  85
  86 class ModalTranslation {
  87     CREATE_TITLE: string;
  88     EDIT_TITLE: string;
  89     DELETE_TITLE: string;
  90     CANCEL_BUTTON: string;
  91     SAVE_BUTTON: string;
  92     CREATE_BUTTON: string;
  93     DELETE_BUTTON: string;
  94     deleteText: Function;
  95
  96     constructor(private TranslateService: TranslateService) {
  97         this.TranslateService.languageChangedObservable.subscribe(lang => {
  98             this.CREATE_TITLE = this.TranslateService.translate("INTERFACE_CREATE_TITLE");
  99             this.EDIT_TITLE = this.TranslateService.translate('INTERFACE_EDIT_TITLE');
 100             this.DELETE_TITLE = this.TranslateService.translate("INTERFACE_DELETE_TITLE");
 101             this.CANCEL_BUTTON = this.TranslateService.translate("INTERFACE_CANCEL_BUTTON");
 102             this.SAVE_BUTTON = this.TranslateService.translate("INTERFACE_SAVE_BUTTON");
 103             this.CREATE_BUTTON = this.TranslateService.translate("INTERFACE_CREATE_BUTTON");
 104             this.DELETE_BUTTON = this.TranslateService.translate("INTERFACE_DELETE_BUTTON");
 105             this.deleteText = (operationName) => this.TranslateService.translate("INTERFACE_DELETE_TEXT", {operationName});
 106         });
 107     }
 108 }
 109
 110 export class UIInterfaceModel extends InterfaceModel {
 111     isCollapsed: boolean = false;
 112
 113     constructor(interf?: any) {
 114         super(interf);
 115         if (this.operations) {
 116             this.operations = this.operations.map((operation) => new UIOperationModel(operation));
 117         }
 118     }
 119
 120     toggleCollapse() {
 121         this.isCollapsed = !this.isCollapsed;
 122     }
 123 }
 124
 125 @Component({
 126     selector: 'interface-definition',
 127     templateUrl: './interface-definition.page.component.html',
 128     styleUrls: ['interface-definition.page.component.less'],
 129     providers: [ModalService, TranslateService, InterfaceOperationComponent]
 130 })
 131 export class InterfaceDefinitionComponent {
 132
 133     modalInstance: ComponentRef<ModalComponent>;
 134     interfaces: UIInterfaceModel[];
 135     inputs: InputBEModel[];
 136
 137     instancesNavigationData = [];
 138     instances: any = [];
 139     loadingInstances: boolean = false;
 140     selectedInstanceData: any = null;
 141     hierarchyInstancesDisplayOptions: HierarchyDisplayOptions = new HierarchyDisplayOptions('uniqueId', 'name', 'archived', null, 'iconClass');
 142     disableFlag : boolean = true;
 143
 144     deploymentArtifactsFilePath: Array<DropdownValue> = [];
 145
 146     toscaArtifactTypes: Array<DropdownValue> = [];
 147     interfaceTypesTest: Array<DropdownValue> = [];
 148     interfaceTypesMap: Map<string, string[]>;
 149
 150     isLoading: boolean;
 151     interfaceTypes: { [interfaceType: string]: string[] };
 152     modalTranslation: ModalTranslation;
 153     workflows: any[];
 154     capabilities: CapabilitiesGroup;
 155
 156     openOperation: OperationModel;
 157     enableWorkflowAssociation: boolean;
 158     workflowIsOnline: boolean;
 159     validImplementationProps: boolean = true;
 160     validMilestoneActivities: boolean = true;
 161     validMilestoneFilters: boolean = true;
 162     serviceInterfaces: InterfaceModel[];
 163
 164     @Input() component: IComponent;
 165     @Input() readonly: boolean;
 166     @Input() enableMenuItems: Function;
 167     @Input() disableMenuItems: Function;
 168
 169     constructor(
 170         @Inject(SdcConfigToken) private sdcConfig: ISdcConfig,
 171         @Inject("$state") private $state: ng.ui.IStateService,
 172         @Inject("Notification") private notification: any,
 173         private translateService: TranslateService,
 174         private componentServiceNg2: ComponentServiceNg2,
 175         private modalServiceNg2: ModalService,
 176         private modalServiceSdcUI: SdcUiServices.ModalService,
 177         private topologyTemplateService: TopologyTemplateService,
 178         private toscaArtifactService: ToscaArtifactService,
 179         private ComponentServiceNg2: ComponentServiceNg2,
 180         private WorkflowServiceNg2: WorkflowServiceNg2,
 181         private ModalServiceSdcUI: SdcUiServices.ModalService,
 182         private PluginsService: PluginsService
 183     ) {
 184         this.modalTranslation = new ModalTranslation(translateService);
 185         this.interfaceTypesMap = new Map<string, string[]>();
 186     }
 187
 188     ngOnInit(): void {
 189         this.isLoading = true;
 190         this.interfaces = [];
 191         this.workflowIsOnline = !_.isUndefined(this.PluginsService.getPluginByStateUrl('workflowDesigner'));
 192         Observable.forkJoin(
 193             this.ComponentServiceNg2.getInterfaceOperations(this.component),
 194             this.ComponentServiceNg2.getComponentInputs(this.component),
 195             this.ComponentServiceNg2.getInterfaceTypes(this.component),
 196             this.ComponentServiceNg2.getCapabilitiesAndRequirements(this.component.componentType, this.component.uniqueId),
 197             this.componentServiceNg2.getComponentResourcePropertiesData(this.component)
 198         ).subscribe((response: any[]) => {
 199             const callback = (workflows) => {
 200                 this.isLoading = false;
 201                 this.serviceInterfaces = response[0].interfaces;
 202                 this.initInterfaces(response[0].interfaces);
 203                 this.sortInterfaces();
 204                 this.inputs = response[1].inputs;
 205                 this.interfaceTypes = response[2];
 206                 this.workflows = (workflows.items) ? workflows.items : workflows;
 207                 this.capabilities = response[3].capabilities;
 208                 this.instances = response[4].componentInstances;
 209                 const serviceInstance = new ComponentInstance();
 210                 serviceInstance.name = "SELF";
 211                 serviceInstance.uniqueId = this.component.uniqueId;
 212                 if (this.instances != null) {
 213                     this.instances.unshift(serviceInstance);
 214                 } else {
 215                     this.instances = [serviceInstance];
 216                 }
 217                 _.forEach(this.instances, (instance) => {
 218                     this.instancesNavigationData.push(instance);
 219                 });
 220                 this.onInstanceSelectedUpdate(this.instancesNavigationData[0]);
 221                 this.loadingInstances = false;
 222
 223             };
 224             if (this.enableWorkflowAssociation && this.workflowIsOnline) {
 225                 this.WorkflowServiceNg2.getWorkflows().subscribe(
 226                     callback,
 227                     (err) => {
 228                         this.workflowIsOnline = false;
 229                         callback([]);
 230                     }
 231                 );
 232             } else {
 233                 callback([]);
 234             }
 235         });
 236
 237         this.loadToscaArtifacts();
 238     }
 239
 240     onInstanceSelectedUpdate = (instance: any) => {
 241         this.selectedInstanceData = instance;
 242         if (instance.name != "SELF") {
 243             this.disableFlag = true;
 244             let newInterfaces : InterfaceModel[] = [];
 245             if (instance.interfaces instanceof Array) {
 246                 instance.interfaces.forEach(result => {
 247                     let interfaceObj = new InterfaceModel();
 248                     interfaceObj.type = result.type;
 249                     interfaceObj.uniqueId = result.uniqueId;
 250                     if (result.operations instanceof Array) {
 251                         interfaceObj.operations = result.operations;
 252                     } else if (!_.isEmpty(result.operations)) {
 253                         interfaceObj.operations = [];
 254                         Object.keys(result.operations).forEach(name => {
 255                             interfaceObj.operations.push(result.operations[name]);
 256                         });
 257                     }
 258                     newInterfaces.push(interfaceObj);
 259                 });
 260             } else {
 261                 Object.keys(instance.interfaces).forEach(key => {
 262                     let obj = instance.interfaces[key];
 263                     let interfaceObj = new InterfaceModel();
 264                     interfaceObj.type = obj.type;
 265                     interfaceObj.uniqueId = obj.uniqueId;
 266                     if (obj.operations instanceof Array) {
 267                         interfaceObj.operations = obj.operations;
 268                     } else if (!_.isEmpty(obj.operations)) {
 269                         interfaceObj.operations = [];
 270                         Object.keys(obj.operations).forEach(name => {
 271                             interfaceObj.operations.push(obj.operations[name]);
 272                         });
 273                     }
 274                     newInterfaces.push(interfaceObj);
 275                 });
 276             }
 277             this.interfaces = newInterfaces.map((interf) => new UIInterfaceModel(interf));
 278         } else {
 279             this.interfaces = this.serviceInterfaces.map((interf) => new UIInterfaceModel(interf));
 280         }
 281         this.sortInterfaces();
 282     }
 283
 284     initInterfaces(interfaces: InterfaceModel[]): void {
 285         if (interfaces) {
 286             this.interfaces = interfaces.map((interf) => new UIInterfaceModel(interf));
 287         }
 288     }
 289
 290     private cancelAndCloseModal = () => {
 291         return this.modalServiceNg2.closeCurrentModal();
 292     }
 293
 294     private disableSaveButton = (): boolean => {
 295         let disable:boolean = true;
 296         if(this.readonly) {
 297             return disable;
 298         }
 299         if (this.component.isService()) {
 300             return disable;
 301         }
 302         const validMilestoneActivities = this.modalInstance.instance.dynamicContent.instance.validMilestoneActivities;
 303         const validMilestoneFilters = this.modalInstance.instance.dynamicContent.instance.validMilestoneFilters;
 304         if (!validMilestoneActivities || !validMilestoneFilters) {
 305             return disable;
 306         }
 307
 308         let selectedInterfaceOperation = this.modalInstance.instance.dynamicContent.instance.selectedInterfaceOperation;
 309         let isInterfaceOperation:boolean = !(typeof selectedInterfaceOperation == 'undefined' || _.isEmpty(selectedInterfaceOperation));
 310         let selectedInterfaceType = this.modalInstance.instance.dynamicContent.instance.selectedInterfaceType;
 311         let isInterfaceType:boolean = !(typeof selectedInterfaceType == 'undefined' || _.isEmpty(selectedInterfaceType));
 312         let bothSet: boolean = isInterfaceOperation && isInterfaceType;
 313
 314         let enableAddArtifactImplementation = this.modalInstance.instance.dynamicContent.instance.enableAddArtifactImplementation;
 315         if(enableAddArtifactImplementation) {
 316             let validImplementationProps = this.modalInstance.instance.dynamicContent.instance.validImplementationProps;
 317             let toscaArtifactTypeSelected = this.modalInstance.instance.dynamicContent.instance.toscaArtifactTypeSelected;
 318             let isToscaArtifactType:boolean = !(typeof toscaArtifactTypeSelected == 'undefined' || _.isEmpty(toscaArtifactTypeSelected));
 319             disable = !bothSet || !isToscaArtifactType || !validImplementationProps;
 320             return disable;
 321         }
 322         disable = !bothSet;
 323         return disable;
 324     }
 325
 326     onSelectInterfaceOperation(interfaceModel: UIInterfaceModel, operation: InterfaceOperationModel) {
 327         const isEdit = operation !== undefined;
 328         const modalButtons = [];
 329         if (!this.readonly) {
 330             const saveButton: ButtonModel = new ButtonModel(this.modalTranslation.SAVE_BUTTON, 'blue',
 331                 () => isEdit ? this.updateOperation() : this.createOperationCallback(),
 332                 this.disableSaveButton
 333             );
 334             modalButtons.push(saveButton);
 335         }
 336         modalButtons.push(new ButtonModel(this.modalTranslation.CANCEL_BUTTON, 'outline white', this.cancelAndCloseModal));
 337         const interfaceDataModal: ModalModel =
 338             new ModalModel('l', this.modalTranslation.EDIT_TITLE, '', modalButtons, 'custom');
 339         this.modalInstance = this.modalServiceNg2.createCustomModal(interfaceDataModal);
 340
 341         this.modalServiceNg2.addDynamicContentToModal(
 342             this.modalInstance,
 343             InterfaceOperationHandlerComponent,
 344             {
 345                 deploymentArtifactsFilePath: this.deploymentArtifactsFilePath,
 346                 toscaArtifactTypes: this.toscaArtifactTypes,
 347                 selectedInterface: interfaceModel ? interfaceModel : new UIInterfaceModel(),
 348                 selectedInterfaceOperation: operation ? operation : new InterfaceOperationModel(),
 349                 validityChangedCallback: this.disableSaveButton,
 350                 isViewOnly: this.readonly,
 351                 validImplementationProps: this.validImplementationProps,
 352                 validMilestoneActivities: this.validMilestoneActivities,
 353                 validMilestoneFilters: this.validMilestoneFilters,
 354                 'isEdit': isEdit,
 355                 interfaceTypesMap: this.interfaceTypesMap,
 356                 modelName: this.component.model
 357             }
 358         );
 359         this.modalInstance.instance.open();
 360     }
 361
 362     private updateOperation = (): void => {
 363         this.modalServiceNg2.currentModal.instance.dynamicContent.instance.isLoading = true;
 364         const interfaceOperationHandlerComponentInstance: InterfaceOperationHandlerComponent = this.modalInstance.instance.dynamicContent.instance;
 365         const operationToUpdate = this.modalInstance.instance.dynamicContent.instance.operationToUpdate;
 366         let timeout = null;
 367         if (operationToUpdate.implementation && operationToUpdate.implementation.timeout != null) {
 368             timeout = operationToUpdate.implementation.timeout;
 369         }
 370         const isArtifactChecked = interfaceOperationHandlerComponentInstance.enableAddArtifactImplementation;
 371         if (!isArtifactChecked) {
 372             const artifactName = interfaceOperationHandlerComponentInstance.artifactName ?
 373                 interfaceOperationHandlerComponentInstance.artifactName : '';
 374             operationToUpdate.implementation = new ArtifactModel({'artifactName': artifactName, 'artifactVersion': ''} as ArtifactModel);
 375         }
 376         if (timeout != null) {
 377             operationToUpdate.implementation.timeout = timeout;
 378         }
 379         this.componentServiceNg2.updateComponentInterfaceOperation(this.component.uniqueId, operationToUpdate)
 380         .subscribe((newOperation: InterfaceOperationModel) => {
 381             let oldOpIndex;
 382             let oldInterf;
 383             this.interfaces.forEach(interf => {
 384                 interf.operations.forEach(op => {
 385                     if (op.uniqueId === newOperation.uniqueId) {
 386                         oldInterf = interf;
 387                         oldOpIndex = interf.operations.findIndex((el) => el.uniqueId === op.uniqueId);
 388                     }
 389                 });
 390             });
 391             oldInterf.operations.splice(oldOpIndex, 1);
 392             oldInterf.operations.push(new InterfaceOperationModel(newOperation));
 393         }, error => {
 394             this.modalServiceNg2.currentModal.instance.dynamicContent.instance.isLoading = false;
 395         }, () => {
 396             this.sortInterfaces();
 397             this.modalServiceNg2.currentModal.instance.dynamicContent.instance.isLoading = false;
 398             this.modalServiceNg2.closeCurrentModal();
 399         });
 400     }
 401
 402     private createOperationCallback(): void {
 403         this.modalServiceNg2.currentModal.instance.dynamicContent.instance.isLoading = true;
 404         const operationToUpdate = this.modalInstance.instance.dynamicContent.instance.operationToUpdate;
 405         console.log('createOperationCallback', operationToUpdate);
 406         console.log('this.component', this.component);
 407         this.componentServiceNg2.createComponentInterfaceOperation(this.component.uniqueId, this.component.getTypeUrl(), operationToUpdate)
 408         .subscribe((newOperation: InterfaceOperationModel) => {
 409             const foundInterface = this.interfaces.find(value => value.type === newOperation.interfaceType);
 410             if (foundInterface) {
 411                 foundInterface.operations.push(new UIOperationModel(new OperationModel(newOperation)));
 412             } else {
 413                 const uiInterfaceModel = new UIInterfaceModel();
 414                 uiInterfaceModel.type = newOperation.interfaceType;
 415                 uiInterfaceModel.uniqueId = newOperation.interfaceType;
 416                 uiInterfaceModel.operations = [];
 417                 uiInterfaceModel.operations.push(new UIOperationModel(new OperationModel(newOperation)));
 418                 this.interfaces.push(uiInterfaceModel);
 419             }
 420         }, error => {
 421             this.modalServiceNg2.currentModal.instance.dynamicContent.instance.isLoading = false;
 422         }, () => {
 423             this.modalServiceNg2.currentModal.instance.dynamicContent.instance.isLoading = false;
 424             this.modalServiceNg2.closeCurrentModal();
 425         });
 426     }
 427
 428     private handleEnableAddArtifactImplementation = (newOperation: InterfaceOperationModel): InterfaceOperationModel => {
 429         if (!this.isEnableAddArtifactImplementation()) {
 430             newOperation.implementation.artifactType = null;
 431             newOperation.implementation.artifactVersion = null;
 432         }
 433         return newOperation;
 434     }
 435
 436     private isEnableAddArtifactImplementation = (): boolean => {
 437         return this.modalInstance.instance.dynamicContent.enableAddArtifactImplementation;
 438     }
 439
 440     private initInterfaceDefinition() {
 441         this.isLoading = true;
 442         this.interfaces = [];
 443         this.topologyTemplateService.getComponentInterfaceOperations(this.component.componentType, this.component.uniqueId)
 444         .subscribe((response) => {
 445             if (response.interfaces) {
 446                 this.interfaces = response.interfaces.map((interfaceModel) => new UIInterfaceModel(interfaceModel));
 447             }
 448             this.isLoading = false;
 449         });
 450     }
 451
 452     private loadToscaArtifacts() {
 453         this.toscaArtifactService.getToscaArtifacts(this.component.model).subscribe(response => {
 454             if (response) {
 455                 let toscaArtifactsFound = <ToscaArtifactModel[]>_.values(response);
 456                 toscaArtifactsFound.forEach(value => this.toscaArtifactTypes.push(new DropdownValue(value, value.type)));
 457             }
 458         }, error => {
 459             this.notification.error({
 460                 message: 'Failed to Load Tosca Artifacts:' + error,
 461                 title: 'Failure'
 462             });
 463         });
 464     }
 465
 466     private loadInterfaceTypes() {
 467         this.componentServiceNg2.getInterfaceTypes(this.component).subscribe(response => {
 468             if (response) {
 469                 console.info("loadInterfaceTypes ", response);
 470                 for (const interfaceType in response) {
 471                     this.interfaceTypesMap.set(interfaceType, response[interfaceType]);
 472                     this.interfaceTypesTest.push(new DropdownValue(interfaceType, interfaceType));
 473                 }
 474             }
 475         }, error => {
 476             this.notification.error({
 477                 message: 'Failed to Load Interface Types:' + error,
 478                 title: 'Failure'
 479             });
 480         });
 481     }
 482
 483     collapseAll(value: boolean = true): void {
 484         this.interfaces.forEach(interfaceData => {
 485             interfaceData.isCollapsed = value;
 486         });
 487     }
 488
 489     isAllCollapsed(): boolean {
 490         return this.interfaces.every((interfaceData) => interfaceData.isCollapsed);
 491     }
 492
 493     isAllExpanded(): boolean {
 494         return this.interfaces.every((interfaceData) => !interfaceData.isCollapsed);
 495     }
 496
 497     isInterfaceListEmpty(): boolean {
 498         return this.interfaces.length === 0;
 499     }
 500
 501     isOperationListEmpty(): boolean {
 502         return this.interfaces.filter((interfaceData) => interfaceData.operations && interfaceData.operations.length > 0).length > 0;
 503     }
 504
 505     onRemoveOperation(operation: OperationModel): void {
 506         if (this.readonly) {
 507             return;
 508         }
 509
 510         const deleteButton: IModalButtonComponent = {
 511             id: 'deleteButton',
 512             text: this.modalTranslation.DELETE_BUTTON,
 513             type: 'primary',
 514             size: 'small',
 515             closeModal: true,
 516             callback: () => {
 517                 this.ComponentServiceNg2
 518                 .deleteInterfaceOperation(this.component, operation)
 519                 .subscribe(() => {
 520                     const curInterf = this.interfaces.find((interf) => interf.type === operation.interfaceType);
 521                     const index = curInterf.operations.findIndex((el) => el.uniqueId === operation.uniqueId);
 522                     curInterf.operations.splice(index, 1);
 523                     if (!curInterf.operations.length) {
 524                         const interfIndex = this.interfaces.findIndex((interf) => interf.type === operation.interfaceType);
 525                         this.interfaces.splice(interfIndex, 1);
 526                     }
 527                 });
 528             }
 529         };
 530
 531         const cancelButton: IModalButtonComponent = {
 532             id: 'cancelButton',
 533             text: this.modalTranslation.CANCEL_BUTTON,
 534             type: 'secondary',
 535             size: 'small',
 536             closeModal: true,
 537             callback: () => {
 538                 this.openOperation = null;
 539             },
 540         };
 541
 542         this.ModalServiceSdcUI.openWarningModal(
 543             this.modalTranslation.DELETE_TITLE,
 544             this.modalTranslation.deleteText(operation.name),
 545             'deleteOperationModal',
 546             [deleteButton, cancelButton],
 547         );
 548     }
 549
 550     private createOperation = (operation: OperationModel): void => {
 551         this.ComponentServiceNg2.createInterfaceOperation(this.component, operation).subscribe((response: OperationModel) => {
 552             this.openOperation = null;
 553
 554             let curInterf = this.interfaces.find((interf) => interf.type === operation.interfaceType);
 555
 556             if (!curInterf) {
 557                 curInterf = new UIInterfaceModel({
 558                     type: response.interfaceType,
 559                     uniqueId: response.uniqueId,
 560                     operations: []
 561                 });
 562                 this.interfaces.push(curInterf);
 563             }
 564
 565             const newOpModel = new UIOperationModel(response);
 566             curInterf.operations.push(newOpModel);
 567             this.sortInterfaces();
 568
 569             if (operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.EXTERNAL && operation.artifactData) {
 570                 this.ComponentServiceNg2.uploadInterfaceOperationArtifact(this.component, newOpModel, operation).subscribe();
 571             } else if (response.workflowId && operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.EXISTING) {
 572                 this.WorkflowServiceNg2.associateWorkflowArtifact(this.component, response).subscribe();
 573             } else if (operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.NEW) {
 574                 this.$state.go('workspace.plugins', {path: 'workflowDesigner'});
 575             }
 576         });
 577     }
 578
 579     private enableOrDisableSaveButton = (shouldEnable: boolean): void => {
 580         const saveButton = this.modalInstance.instance.dynamicContent.getButtonById('saveButton');
 581         saveButton.disabled = !shouldEnable;
 582     }
 583
 584     private sortInterfaces(): void {
 585         this.interfaces = this.interfaces.filter((interf) => interf.operations && interf.operations.length > 0); // remove empty interfaces
 586         this.interfaces.sort((a, b) => a.type.localeCompare(b.type)); // sort interfaces alphabetically
 587         this.interfaces.forEach((interf) => {
 588             interf.operations.sort((a, b) => a.name.localeCompare(b.name)); // sort operations alphabetically
 589         });
 590     }
 591
 592 }