catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.ts

   1 /*
   2 * ============LICENSE_START=======================================================
   3 * SDC
   4 * ================================================================================
   5 *  Copyright (C) 2021 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, EventEmitter, Output, ViewChild} from '@angular/core';
  22 import {UIInterfaceModel} from "../interface-operations.component";
  23 import {InputOperationParameter, InterfaceOperationModel, IOperationParamsList} from "../../../../../models/interfaceOperation";
  24 import {TranslateService} from "../../../../shared/translator/translate.service";
  25 import {DropdownValue} from "../../../../components/ui/form-components/dropdown/ui-element-dropdown.component";
  26 import {ArtifactModel} from "../../../../../models/artifacts";
  27 import {PropertyBEModel} from "../../../../../models/properties-inputs/property-be-model";
  28 import {PropertyParamRowComponent} from "./property-param-row/property-param-row.component";
  29 import {PropertyFEModel} from "../../../../../models/properties-inputs/property-fe-model";
  30 import {IDropDownOption} from 'onap-ui-angular';
  31 import {ComponentServiceNg2} from "../../../../services/component-services/component.service";
  32 import {DropDownComponent} from "onap-ui-angular/dist/form-elements/dropdown/dropdown.component";
  33 import {DataTypeService} from "../../../../services/data-type.service";
  34 import {Observable} from "rxjs/Observable";
  35 import {DataTypeModel} from "../../../../../models/data-types";
  36 import {InstanceFeDetails} from "../../../../../models/instance-fe-details";
  37 import {TopologyTemplateService} from "app/ng2/services/component-services/topology-template.service";
  38 import {CustomToscaFunction} from "../../../../../models/default-custom-functions";
  39 import {ToscaFunctionType} from "../../../../../models/tosca-function-type.enum";
  40
  41 @Component({
  42     selector: 'operation-handler',
  43     templateUrl: './interface-operation-handler.component.html',
  44     styleUrls: ['./interface-operation-handler.component.less'],
  45     providers: [TranslateService]
  46 })
  47 export class InterfaceOperationHandlerComponent {
  48
  49     @Output('propertyChanged') emitter: EventEmitter<PropertyFEModel> = new EventEmitter<PropertyFEModel>();
  50     @ViewChild('interfaceOperationDropDown') interfaceOperationDropDown: DropDownComponent;
  51
  52     input: {
  53         componentInstanceMap: Map<string, InstanceFeDetails>;
  54         toscaArtifactTypes: Array<DropdownValue>;
  55         selectedInterface: UIInterfaceModel;
  56         selectedInterfaceOperation: InterfaceOperationModel;
  57         validityChangedCallback: Function;
  58         isViewOnly: boolean;
  59         isEdit: boolean;
  60         validImplementationProps:boolean;
  61         modelName: string;
  62     };
  63
  64     dataTypeMap$: Observable<Map<string, DataTypeModel>>;
  65     dataTypeMap: Map<string, DataTypeModel>;
  66     interfaceType: string;
  67     artifactVersion: string;
  68     artifactName: string;
  69     interfaceOperationName: string;
  70     operationToUpdate: InterfaceOperationModel;
  71     inputs: Array<InputOperationParameter> = [];
  72     properties: Array<PropertyParamRowComponent> = [];
  73     isLoading: boolean = false;
  74     isViewOnly: boolean;
  75     isEdit: boolean;
  76     validImplementationProps:boolean;
  77     interfaceTypes: Array<DropdownValue> = [];
  78     interfaceTypeOptions: Array<DropDownOption> = [];
  79     selectedInterfaceType: DropDownOption = undefined;
  80     interfaceOperationMap: Map<string, Array<string>> = new Map<string, Array<string>>();
  81     interfaceOperationOptions: Array<DropDownOption> = [];
  82     selectedInterfaceOperation: DropDownOption = undefined;
  83     modelName: string;
  84     toscaArtifactTypeSelected: string;
  85     toscaArtifactTypeProperties: Array<PropertyBEModel> = [];
  86     artifactTypeProperties: Array<InputOperationParameter> = [];
  87     toscaArtifactTypes: Array<DropdownValue> = [];
  88     componentInstanceMap: Map<string, InstanceFeDetails>;
  89     customToscaFunctions: Array<CustomToscaFunction>;
  90     enableAddArtifactImplementation: boolean;
  91     propertyValueValid: boolean = true;
  92     inputTypeOptions: any[];
  93
  94     constructor(private dataTypeService: DataTypeService,
  95                 private componentServiceNg2: ComponentServiceNg2,
  96                 private topologyTemplateService: TopologyTemplateService) {
  97     }
  98
  99     ngOnInit() {
 100         this.isViewOnly = this.input.isViewOnly;
 101         this.isEdit = this.input.isEdit;
 102         this.validImplementationProps = this.input.validImplementationProps;
 103         this.componentInstanceMap =  this.input.componentInstanceMap ? this.input.componentInstanceMap : null;
 104         this.interfaceType = this.input.selectedInterface.type;
 105         this.operationToUpdate = new InterfaceOperationModel(this.input.selectedInterfaceOperation);
 106         this.operationToUpdate.interfaceId = this.input.selectedInterface.uniqueId;
 107         this.operationToUpdate.interfaceType = this.input.selectedInterface.type;
 108         this.modelName = this.input.modelName;
 109         this.initCustomToscaFunctions();
 110         this.initInputs();
 111         this.removeImplementationQuote();
 112         this.loadInterfaceOperationImplementation();
 113
 114         this.dataTypeMap$ = new Observable<Map<string, DataTypeModel>>(subscriber => {
 115             this.dataTypeService.findAllDataTypesByModel(this.modelName)
 116             .then((dataTypesMap: Map<string, DataTypeModel>) => {
 117                 subscriber.next(dataTypesMap);
 118             });
 119         });
 120         this.dataTypeMap$.subscribe(value => {
 121             this.dataTypeMap = value;
 122         });
 123     }
 124
 125     private initInputs() {
 126         if (!this.operationToUpdate.inputs) {
 127             this.operationToUpdate.inputs = new class implements IOperationParamsList {
 128                 listToscaDataDefinition: Array<InputOperationParameter> = [];
 129             }
 130         }
 131
 132         this.inputs = Array.from(this.operationToUpdate.inputs.listToscaDataDefinition);
 133         this.removeImplementationQuote();
 134         this.loadInterfaceOperationImplementation();
 135         this.loadInterfaceType();
 136     }
 137
 138     private initCustomToscaFunctions() {
 139         this.customToscaFunctions = [];
 140         this.topologyTemplateService.getDefaultCustomFunction().toPromise().then((data) => {
 141             if (data) {
 142                 for (let customFunction of data) {
 143                     this.customToscaFunctions.push(new CustomToscaFunction(customFunction));
 144                 }
 145             }
 146         });
 147     }
 148
 149     private loadInterfaceType() {
 150         this.componentServiceNg2.getInterfaceTypesByModel(this.modelName)
 151         .subscribe(response => {
 152             if (response) {
 153                 this.interfaceOperationMap = new Map<string, Array<string>>();
 154                 for (const interfaceType of Object.keys(response).sort()) {
 155                     const operationList = response[interfaceType];
 156                     operationList.sort();
 157                     this.interfaceOperationMap.set(interfaceType, operationList);
 158                     const operationDropDownOption: DropDownOption = new DropDownOption(interfaceType);
 159                     this.interfaceTypeOptions.push(operationDropDownOption);
 160                     if (this.interfaceType == interfaceType) {
 161                         this.selectedInterfaceType = operationDropDownOption;
 162                     }
 163                 }
 164                 this.loadInterfaceTypeOperations();
 165             }
 166         });
 167     }
 168
 169     loadInterfaceTypeOperations() {
 170         this.interfaceOperationOptions = new Array<DropDownOption>();
 171         const interfaceOperationList = this.interfaceOperationMap.get(this.interfaceType);
 172
 173         if (interfaceOperationList) {
 174             interfaceOperationList.forEach(operationName => {
 175                 const operationOption = new DropDownOption(operationName, operationName);
 176                 this.interfaceOperationOptions.push(operationOption);
 177                 if (this.operationToUpdate.name == operationName) {
 178                     this.selectedInterfaceOperation = operationOption
 179                 }
 180             });
 181         }
 182
 183         this.interfaceOperationDropDown.allOptions = this.interfaceOperationOptions;
 184     }
 185
 186     private loadInterfaceOperationImplementation() {
 187         this.toscaArtifactTypes = this.input.toscaArtifactTypes;
 188         if (this.operationToUpdate.implementation) {
 189             this.artifactVersion = this.operationToUpdate.implementation.artifactVersion;
 190             this.artifactName = this.operationToUpdate.implementation.artifactName;
 191             this.toscaArtifactTypeProperties = this.operationToUpdate.implementation.properties;
 192         }
 193         this.artifactTypeProperties = this.convertArtifactsPropertiesToInput();
 194         this.getArtifactTypesSelected();
 195     }
 196
 197     onDescriptionChange = (value: any): void => {
 198         this.operationToUpdate.description = value;
 199     }
 200
 201     onURIChange(value: string | undefined) {
 202         if(!this.operationToUpdate.implementation){
 203             let artifact = new ArtifactModel();
 204             this.operationToUpdate.implementation = artifact;
 205         }
 206         this.operationToUpdate.implementation.artifactName = value ? value : '';
 207     }
 208
 209     onPropertyValueChange = (propertyValue) => {
 210         this.emitter.emit(propertyValue);
 211     }
 212
 213     onMarkToAddArtifactToImplementation(event: boolean) {
 214         if (!event) {
 215             this.toscaArtifactTypeSelected = undefined;
 216             this.artifactVersion = undefined;
 217             if (this.operationToUpdate.implementation.artifactType) {
 218                 this.operationToUpdate.implementation.artifactVersion = '';
 219                 this.operationToUpdate.implementation.artifactType = '';
 220             }
 221             this.toscaArtifactTypeProperties = undefined;
 222             this.artifactTypeProperties = undefined;
 223         } else {
 224             this.getArtifactTypesSelected();
 225         }
 226         this.enableAddArtifactImplementation = event;
 227     }
 228
 229     onSelectToscaArtifactType(type: IDropDownOption) {
 230         if (type) {
 231             let toscaArtifactType = type.value;
 232             let artifact = new ArtifactModel();
 233             artifact.artifactName = this.operationToUpdate.implementation.artifactName;
 234             artifact.artifactVersion = this.operationToUpdate.implementation.artifactVersion;
 235             artifact.artifactType = toscaArtifactType.type;
 236             artifact.properties = toscaArtifactType.properties;
 237             this.toscaArtifactTypeProperties = artifact.properties;
 238             this.artifactTypeProperties = this.convertArtifactsPropertiesToInput();
 239             this.toscaArtifactTypeSelected = artifact.artifactType;
 240             this.operationToUpdate.implementation = artifact;
 241             this.getArtifactTypesSelected();
 242         }
 243     }
 244
 245     onArtifactVersionChange(value: string | undefined) {
 246             this.operationToUpdate.implementation.artifactVersion = value ? value : '';
 247     }
 248
 249     onAddInput(inputOperationParameter: InputOperationParameter) {
 250         this.addInput(inputOperationParameter);
 251     }
 252
 253     propertyValueValidation = (propertyValue): void => {
 254         this.onPropertyValueChange(propertyValue);
 255         this.propertyValueValid = propertyValue.isValid;
 256     }
 257
 258     onRemoveInput = (inputParam: InputOperationParameter): void => {
 259         let index = this.inputs.indexOf(inputParam);
 260         this.inputs.splice(index, 1);
 261     }
 262
 263     private removeImplementationQuote(): void {
 264         if (this.operationToUpdate.implementation) {
 265             if (!this.operationToUpdate.implementation
 266                 || !this.operationToUpdate.implementation.artifactName) {
 267                 return;
 268             }
 269
 270             let implementation = this.operationToUpdate.implementation.artifactName.trim();
 271
 272             if (implementation.startsWith("'") && implementation.endsWith("'")) {
 273                 this.operationToUpdate.implementation.artifactName = implementation.slice(1, -1);
 274             }
 275         }
 276     }
 277
 278     private getArtifactTypesSelected() {
 279         if (this.operationToUpdate.implementation && this.operationToUpdate.implementation.artifactType) {
 280             this.artifactName =
 281                 this.artifactName ? this.artifactName : this.operationToUpdate.implementation.artifactName;
 282             this.toscaArtifactTypeSelected = this.operationToUpdate.implementation.artifactType;
 283             this.artifactVersion =
 284                 this.artifactVersion ? this.artifactVersion : this.operationToUpdate.implementation.artifactVersion;
 285             this.toscaArtifactTypeProperties = this.operationToUpdate.implementation.properties;
 286             this.artifactTypeProperties = this.convertArtifactsPropertiesToInput();
 287             this.enableAddArtifactImplementation = true;
 288         }
 289     }
 290
 291     toDropDownOption(val: string) {
 292         return { value : val, label: val };
 293     }
 294
 295     /**
 296      * Handles the input value change event.
 297      * @param changedInput the changed input
 298      */
 299     onInputValueChange(changedInput: InputOperationParameter) {
 300         if (changedInput.value instanceof Object) {
 301             changedInput.value = JSON.stringify(changedInput.value);
 302         }
 303         const inputOperationParameter = this.inputs.find(value => value.name == changedInput.name);
 304         inputOperationParameter.toscaFunction = null;
 305         inputOperationParameter.value = changedInput.value;
 306         if (changedInput.isToscaFunction()) {
 307             inputOperationParameter.toscaFunction = changedInput.toscaFunction;
 308             inputOperationParameter.value = changedInput.toscaFunction.buildValueString();
 309         }
 310     }
 311
 312     onArtifactPropertyValueChange(changedProperty: InputOperationParameter) {
 313         const property = this.toscaArtifactTypeProperties.find(artifactProperty => artifactProperty.name == changedProperty.name);
 314         if (changedProperty.value instanceof Object) {
 315             changedProperty.value = JSON.stringify(changedProperty.value);
 316         }
 317         property.toscaFunction = null;
 318         property.value = changedProperty.value;
 319         if (changedProperty.isToscaFunction()) {
 320             property.toscaFunction = changedProperty.toscaFunction;
 321             property.value = changedProperty.toscaFunction.buildValueString();
 322         }
 323     }
 324
 325     implementationPropsValidityChange(validImplementationProps: boolean) {
 326         this.validImplementationProps = validImplementationProps;
 327     }
 328
 329     /**
 330      * Handles the add input event.
 331      * @param input the input to add
 332      * @private
 333      */
 334     private addInput(input: InputOperationParameter) {
 335         this.operationToUpdate.inputs.listToscaDataDefinition.push(input);
 336         this.inputs = Array.from(this.operationToUpdate.inputs.listToscaDataDefinition);
 337     }
 338
 339     /**
 340      * Return a list with current input names.
 341      */
 342     collectInputNames() {
 343         return this.inputs.map((input) => input.name);
 344     }
 345
 346     /**
 347      * Handles the delete input event.
 348      * @param inputName the name of the input to be deleted
 349      */
 350     onInputDelete(inputName: string) {
 351         const currentInputs = this.operationToUpdate.inputs.listToscaDataDefinition;
 352         const input1 = currentInputs.find(value => value.name === inputName);
 353         const indexOfInput = currentInputs.indexOf(input1);
 354         if (indexOfInput === -1) {
 355             console.error(`Could not delete input '${inputName}'. Input not found.`);
 356             return;
 357         }
 358         currentInputs.splice(currentInputs.indexOf(input1), 1);
 359         this.inputs = Array.from(currentInputs);
 360     }
 361
 362     private convertArtifactsPropertiesToInput(): Array<InputOperationParameter> {
 363         if (!this.toscaArtifactTypeProperties) {
 364             return [];
 365         }
 366         const inputList: Array<InputOperationParameter> = [];
 367         this.toscaArtifactTypeProperties.forEach(property => {
 368             const input = new InputOperationParameter();
 369             input.name = property.name;
 370             input.type = property.type;
 371             input.schema = property.schema;
 372             input.toscaDefaultValue = property.defaultValue;
 373             input.value = property.value;
 374             input.toscaFunction = property.toscaFunction;
 375             inputList.push(input);
 376         });
 377         return inputList;
 378     }
 379
 380     onSelectInterface(dropDownOption: DropDownOption) {
 381         if (dropDownOption) {
 382             this.setInterfaceType(dropDownOption);
 383         } else {
 384             this.setInterfaceType(undefined);
 385         }
 386         this.setInterfaceOperation(undefined);
 387         this.interfaceOperationDropDown.selectOption({} as IDropDownOption);
 388         this.loadInterfaceTypeOperations();
 389     }
 390
 391     onSelectOperation(dropDownOption: DropDownOption) {
 392         if (this.selectedInterfaceType && dropDownOption) {
 393             this.setInterfaceOperation(dropDownOption);
 394         }
 395     }
 396
 397     private setInterfaceType(dropDownOption: DropDownOption) {
 398         this.selectedInterfaceType = dropDownOption ? dropDownOption : undefined;
 399         this.interfaceType = dropDownOption ? dropDownOption.value : undefined;
 400         this.operationToUpdate.interfaceType = dropDownOption ? dropDownOption.value : undefined;
 401         this.operationToUpdate.interfaceId = dropDownOption ? dropDownOption.value : undefined;
 402     }
 403
 404     private setInterfaceOperation(dropDownOption: DropDownOption) {
 405         this.operationToUpdate.name = dropDownOption ? dropDownOption.value : undefined;
 406         this.operationToUpdate.operationType = dropDownOption ? dropDownOption.value : undefined;
 407         this.selectedInterfaceOperation = dropDownOption ? dropDownOption : undefined;
 408     }
 409 }
 410
 411 class DropDownOption implements IDropDownOption {
 412     value: string;
 413     label: string;
 414
 415     constructor(value: string, label?: string) {
 416         this.value = value;
 417         this.label = label || value;
 418     }
 419 }