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             for (let customFunction of data) {
 142                 this.customToscaFunctions.push(new CustomToscaFunction(customFunction));
 143             }
 144         });
 145     }
 146
 147     private loadInterfaceType() {
 148         this.componentServiceNg2.getInterfaceTypesByModel(this.modelName)
 149         .subscribe(response => {
 150             if (response) {
 151                 this.interfaceOperationMap = new Map<string, Array<string>>();
 152                 for (const interfaceType of Object.keys(response).sort()) {
 153                     const operationList = response[interfaceType];
 154                     operationList.sort();
 155                     this.interfaceOperationMap.set(interfaceType, operationList);
 156                     const operationDropDownOption: DropDownOption = new DropDownOption(interfaceType);
 157                     this.interfaceTypeOptions.push(operationDropDownOption);
 158                     if (this.interfaceType == interfaceType) {
 159                         this.selectedInterfaceType = operationDropDownOption;
 160                     }
 161                 }
 162                 this.loadInterfaceTypeOperations();
 163             }
 164         });
 165     }
 166
 167     loadInterfaceTypeOperations() {
 168         this.interfaceOperationOptions = new Array<DropDownOption>();
 169         const interfaceOperationList = this.interfaceOperationMap.get(this.interfaceType);
 170
 171         if (interfaceOperationList) {
 172             interfaceOperationList.forEach(operationName => {
 173                 const operationOption = new DropDownOption(operationName, operationName);
 174                 this.interfaceOperationOptions.push(operationOption);
 175                 if (this.operationToUpdate.name == operationName) {
 176                     this.selectedInterfaceOperation = operationOption
 177                 }
 178             });
 179         }
 180
 181         this.interfaceOperationDropDown.allOptions = this.interfaceOperationOptions;
 182     }
 183
 184     private loadInterfaceOperationImplementation() {
 185         this.toscaArtifactTypes = this.input.toscaArtifactTypes;
 186         if (this.operationToUpdate.implementation) {
 187             this.artifactVersion = this.operationToUpdate.implementation.artifactVersion;
 188             this.artifactName = this.operationToUpdate.implementation.artifactName;
 189             this.toscaArtifactTypeProperties = this.operationToUpdate.implementation.properties;
 190         }
 191         this.artifactTypeProperties = this.convertArtifactsPropertiesToInput();
 192         this.getArtifactTypesSelected();
 193     }
 194
 195     onDescriptionChange = (value: any): void => {
 196         this.operationToUpdate.description = value;
 197     }
 198
 199     onURIChange(value: string | undefined) {
 200         if(!this.operationToUpdate.implementation){
 201             let artifact = new ArtifactModel();
 202             this.operationToUpdate.implementation = artifact;
 203         }
 204         this.operationToUpdate.implementation.artifactName = value ? value : '';
 205     }
 206
 207     onPropertyValueChange = (propertyValue) => {
 208         this.emitter.emit(propertyValue);
 209     }
 210
 211     onMarkToAddArtifactToImplementation(event: boolean) {
 212         if (!event) {
 213             this.toscaArtifactTypeSelected = undefined;
 214             this.artifactVersion = undefined;
 215             if (this.operationToUpdate.implementation.artifactType) {
 216                 this.operationToUpdate.implementation.artifactVersion = '';
 217                 this.operationToUpdate.implementation.artifactType = '';
 218             }
 219             this.toscaArtifactTypeProperties = undefined;
 220             this.artifactTypeProperties = undefined;
 221         } else {
 222             this.getArtifactTypesSelected();
 223         }
 224         this.enableAddArtifactImplementation = event;
 225     }
 226
 227     onSelectToscaArtifactType(type: IDropDownOption) {
 228         if (type) {
 229             let toscaArtifactType = type.value;
 230             let artifact = new ArtifactModel();
 231             artifact.artifactName = this.operationToUpdate.implementation.artifactName;
 232             artifact.artifactVersion = this.operationToUpdate.implementation.artifactVersion;
 233             artifact.artifactType = toscaArtifactType.type;
 234             artifact.properties = toscaArtifactType.properties;
 235             this.toscaArtifactTypeProperties = artifact.properties;
 236             this.artifactTypeProperties = this.convertArtifactsPropertiesToInput();
 237             this.toscaArtifactTypeSelected = artifact.artifactType;
 238             this.operationToUpdate.implementation = artifact;
 239             this.getArtifactTypesSelected();
 240         }
 241     }
 242
 243     onArtifactVersionChange(value: string | undefined) {
 244             this.operationToUpdate.implementation.artifactVersion = value ? value : '';
 245     }
 246
 247     onAddInput(inputOperationParameter: InputOperationParameter) {
 248         this.addInput(inputOperationParameter);
 249     }
 250
 251     propertyValueValidation = (propertyValue): void => {
 252         this.onPropertyValueChange(propertyValue);
 253         this.propertyValueValid = propertyValue.isValid;
 254     }
 255
 256     onRemoveInput = (inputParam: InputOperationParameter): void => {
 257         let index = this.inputs.indexOf(inputParam);
 258         this.inputs.splice(index, 1);
 259     }
 260
 261     private removeImplementationQuote(): void {
 262         if (this.operationToUpdate.implementation) {
 263             if (!this.operationToUpdate.implementation
 264                 || !this.operationToUpdate.implementation.artifactName) {
 265                 return;
 266             }
 267
 268             let implementation = this.operationToUpdate.implementation.artifactName.trim();
 269
 270             if (implementation.startsWith("'") && implementation.endsWith("'")) {
 271                 this.operationToUpdate.implementation.artifactName = implementation.slice(1, -1);
 272             }
 273         }
 274     }
 275
 276     private getArtifactTypesSelected() {
 277         if (this.operationToUpdate.implementation && this.operationToUpdate.implementation.artifactType) {
 278             this.artifactName =
 279                 this.artifactName ? this.artifactName : this.operationToUpdate.implementation.artifactName;
 280             this.toscaArtifactTypeSelected = this.operationToUpdate.implementation.artifactType;
 281             this.artifactVersion =
 282                 this.artifactVersion ? this.artifactVersion : this.operationToUpdate.implementation.artifactVersion;
 283             this.toscaArtifactTypeProperties = this.operationToUpdate.implementation.properties;
 284             this.artifactTypeProperties = this.convertArtifactsPropertiesToInput();
 285             this.enableAddArtifactImplementation = true;
 286         }
 287     }
 288
 289     toDropDownOption(val: string) {
 290         return { value : val, label: val };
 291     }
 292
 293     /**
 294      * Handles the input value change event.
 295      * @param changedInput the changed input
 296      */
 297     onInputValueChange(changedInput: InputOperationParameter) {
 298         if (changedInput.value instanceof Object) {
 299             changedInput.value = JSON.stringify(changedInput.value);
 300         }
 301         const inputOperationParameter = this.inputs.find(value => value.name == changedInput.name);
 302         inputOperationParameter.value = changedInput.value;
 303     }
 304
 305     onArtifactPropertyValueChange(changedProperty: InputOperationParameter) {
 306         const property = this.toscaArtifactTypeProperties.find(artifactProperty => artifactProperty.name == changedProperty.name);
 307         if (changedProperty.value instanceof Object) {
 308             changedProperty.value = JSON.stringify(changedProperty.value);
 309         }
 310         property.toscaFunction = null;
 311         property.value = changedProperty.value;
 312         if (changedProperty.isToscaFunction()) {
 313             property.toscaFunction = changedProperty.toscaFunction;
 314             property.value = changedProperty.toscaFunction.buildValueString();
 315         }
 316     }
 317
 318     implementationPropsValidityChange(validImplementationProps: boolean) {
 319         this.validImplementationProps = validImplementationProps;
 320     }
 321
 322     /**
 323      * Handles the add input event.
 324      * @param input the input to add
 325      * @private
 326      */
 327     private addInput(input: InputOperationParameter) {
 328         this.operationToUpdate.inputs.listToscaDataDefinition.push(input);
 329         this.inputs = Array.from(this.operationToUpdate.inputs.listToscaDataDefinition);
 330     }
 331
 332     /**
 333      * Return a list with current input names.
 334      */
 335     collectInputNames() {
 336         return this.inputs.map((input) => input.name);
 337     }
 338
 339     /**
 340      * Handles the delete input event.
 341      * @param inputName the name of the input to be deleted
 342      */
 343     onInputDelete(inputName: string) {
 344         const currentInputs = this.operationToUpdate.inputs.listToscaDataDefinition;
 345         const input1 = currentInputs.find(value => value.name === inputName);
 346         const indexOfInput = currentInputs.indexOf(input1);
 347         if (indexOfInput === -1) {
 348             console.error(`Could delete input '${inputName}'. Input not found.`);
 349             return;
 350         }
 351         currentInputs.splice(currentInputs.indexOf(input1), 1);
 352         this.inputs = Array.from(currentInputs);
 353     }
 354
 355     private convertArtifactsPropertiesToInput(): Array<InputOperationParameter> {
 356         if (!this.toscaArtifactTypeProperties) {
 357             return [];
 358         }
 359         const inputList: Array<InputOperationParameter> = [];
 360         this.toscaArtifactTypeProperties.forEach(property => {
 361             const input = new InputOperationParameter();
 362             input.name = property.name;
 363             input.type = property.type;
 364             input.schema = property.schema;
 365             input.toscaDefaultValue = property.defaultValue;
 366             input.value = property.value;
 367             input.toscaFunction = property.toscaFunction;
 368             inputList.push(input);
 369         });
 370         return inputList;
 371     }
 372
 373     onSelectInterface(dropDownOption: DropDownOption) {
 374         if (dropDownOption) {
 375             this.setInterfaceType(dropDownOption);
 376         } else {
 377             this.setInterfaceType(undefined);
 378         }
 379         this.setInterfaceOperation(undefined);
 380         this.interfaceOperationDropDown.selectOption({} as IDropDownOption);
 381         this.loadInterfaceTypeOperations();
 382     }
 383
 384     onSelectOperation(dropDownOption: DropDownOption) {
 385         if (this.selectedInterfaceType && dropDownOption) {
 386             this.setInterfaceOperation(dropDownOption);
 387         }
 388     }
 389
 390     private setInterfaceType(dropDownOption: DropDownOption) {
 391         this.selectedInterfaceType = dropDownOption ? dropDownOption : undefined;
 392         this.interfaceType = dropDownOption ? dropDownOption.value : undefined;
 393         this.operationToUpdate.interfaceType = dropDownOption ? dropDownOption.value : undefined;
 394         this.operationToUpdate.interfaceId = dropDownOption ? dropDownOption.value : undefined;
 395     }
 396
 397     private setInterfaceOperation(dropDownOption: DropDownOption) {
 398         this.operationToUpdate.name = dropDownOption ? dropDownOption.value : undefined;
 399         this.operationToUpdate.operationType = dropDownOption ? dropDownOption.value : undefined;
 400         this.selectedInterfaceOperation = dropDownOption ? dropDownOption : undefined;
 401     }
 402 }
 403
 404 class DropDownOption implements IDropDownOption {
 405     value: string;
 406     label: string;
 407
 408     constructor(value: string, label?: string) {
 409         this.value = value;
 410         this.label = label || value;
 411     }
 412 }