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