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, Input, Inject, ComponentRef} from '@angular/core';
  22 import {Component as IComponent } from 'app/models/components/component';
  23
  24 import { SdcConfigToken, ISdcConfig } from "app/ng2/config/sdc-config.config";
  25 import {TranslateService } from "app/ng2/shared/translator/translate.service";
  26
  27 import { ModalComponent } from 'app/ng2/components/ui/modal/modal.component';
  28 import {ModalService } from 'app/ng2/services/modal.service';
  29 import {
  30     OperationModel,
  31     InterfaceModel,
  32     CapabilitiesGroup,
  33     ButtonModel, ModalModel
  34 } from 'app/models';
  35
  36 import {ComponentServiceNg2 } from 'app/ng2/services/component-services/component.service';
  37
  38 import { SdcUiServices } from 'onap-ui-angular';
  39 import {TopologyTemplateService} from "../../services/component-services/topology-template.service";
  40 import {InputOperationParameter, InterfaceOperationModel} from "../../../models/interfaceOperation";
  41 import {PropertyParamRowComponent} from "../composition/interface-operatons/operation-creator/property-param-row/property-param-row.component";
  42 import {InterfaceOperationHandlerComponent} from "../composition/interface-operatons/operation-creator/interface-operation-handler.component";
  43 import {DropdownValue} from "../../components/ui/form-components/dropdown/ui-element-dropdown.component";
  44
  45 export class UIOperationModel extends OperationModel {
  46     isCollapsed: boolean = true;
  47     isEllipsis: boolean;
  48     MAX_LENGTH = 75;
  49
  50     constructor(operation: OperationModel) {
  51         super(operation);
  52
  53         if (!operation.description) {
  54             this.description = '';
  55         }
  56
  57         if (this.description.length > this.MAX_LENGTH) {
  58             this.isEllipsis = true;
  59         } else {
  60             this.isEllipsis = false;
  61         }
  62     }
  63
  64     getDescriptionEllipsis(): string {
  65         if (this.isCollapsed && this.description.length > this.MAX_LENGTH) {
  66             return this.description.substr(0, this.MAX_LENGTH - 3) + '...';
  67         }
  68         return this.description;
  69     }
  70
  71     toggleCollapsed(e) {
  72         e.stopPropagation();
  73         this.isCollapsed = !this.isCollapsed;
  74     }
  75 }
  76
  77 // tslint:disable-next-line:max-classes-per-file
  78 class ModalTranslation {
  79     CREATE_TITLE: string;
  80     EDIT_TITLE: string;
  81     DELETE_TITLE: string;
  82     CANCEL_BUTTON: string;
  83     SAVE_BUTTON: string;
  84     CREATE_BUTTON: string;
  85     DELETE_BUTTON: string;
  86     deleteText: Function;
  87
  88     constructor(private TranslateService: TranslateService) {
  89         this.TranslateService.languageChangedObservable.subscribe(lang => {
  90             this.CREATE_TITLE = this.TranslateService.translate("INTERFACE_CREATE_TITLE");
  91             this.EDIT_TITLE = this.TranslateService.translate('INTERFACE_EDIT_TITLE');
  92             this.DELETE_TITLE = this.TranslateService.translate("INTERFACE_DELETE_TITLE");
  93             this.CANCEL_BUTTON = this.TranslateService.translate("INTERFACE_CANCEL_BUTTON");
  94             this.SAVE_BUTTON = this.TranslateService.translate("INTERFACE_SAVE_BUTTON");
  95             this.CREATE_BUTTON = this.TranslateService.translate("INTERFACE_CREATE_BUTTON");
  96             this.DELETE_BUTTON = this.TranslateService.translate("INTERFACE_DELETE_BUTTON");
  97             this.deleteText = (operationName) => this.TranslateService.translate("INTERFACE_DELETE_TEXT", {operationName});
  98         });
  99     }
 100 }
 101
 102 // tslint:disable-next-line:max-classes-per-file
 103 export class UIInterfaceModel extends InterfaceModel {
 104     isCollapsed: boolean = false;
 105
 106     constructor(interfaceData?: any) {
 107         super(interfaceData);
 108         this.operations = _.map(
 109             this.operations,
 110             (operation) => new UIOperationModel(operation)
 111         );
 112     }
 113
 114     toggleCollapse() {
 115         this.isCollapsed = !this.isCollapsed;
 116     }
 117 }
 118
 119 // tslint:disable-next-line:max-classes-per-file
 120 @Component({
 121     selector: 'interface-definition',
 122     templateUrl: './interface-definition.page.component.html',
 123     styleUrls: ['interface-definition.page.component.less'],
 124     providers: [ModalService, TranslateService]
 125 })
 126
 127 export class InterfaceDefinitionComponent {
 128
 129     modalInstance: ComponentRef<ModalComponent>;
 130     interfaces: UIInterfaceModel[];
 131     inputs: Array<InputOperationParameter> = [];
 132
 133     properties: Array<PropertyParamRowComponent> = [];
 134     deploymentArtifactsFilePath: Array<DropdownValue> = [];
 135
 136     toscaArtifactTypes: Array<DropdownValue> = [];
 137
 138     isLoading: boolean;
 139     interfaceTypes: { [interfaceType: string]: string[] };
 140     modalTranslation: ModalTranslation;
 141     workflows: any[];
 142     capabilities: CapabilitiesGroup;
 143
 144     @Input() component: IComponent;
 145     @Input() readonly: boolean;
 146     @Input() enableMenuItems: Function;
 147     @Input() disableMenuItems: Function;
 148
 149     constructor(
 150         @Inject(SdcConfigToken) private sdcConfig: ISdcConfig,
 151         @Inject("$state") private $state: ng.ui.IStateService,
 152         private translateService: TranslateService,
 153         private componentServiceNg2: ComponentServiceNg2,
 154         private modalServiceNg2: ModalService,
 155         private modalServiceSdcUI: SdcUiServices.ModalService,
 156         private topologyTemplateService: TopologyTemplateService
 157     ) {
 158         this.modalTranslation = new ModalTranslation(translateService);
 159     }
 160
 161     ngOnInit(): void {
 162         if(this.component) {
 163             this.initInterfaceDefinition();
 164         }
 165     }
 166
 167     private cancelAndCloseModal = () => {
 168         return this.modalServiceNg2.closeCurrentModal();
 169     }
 170
 171     private enableOrDisableSaveButton = (): boolean => {
 172         return true;
 173     }
 174
 175     onSelectInterfaceOperation(interfaceModel: UIInterfaceModel, operation: InterfaceOperationModel) {
 176         const cancelButton: ButtonModel = new ButtonModel(this.modalTranslation.CANCEL_BUTTON, 'outline white', this.cancelAndCloseModal);
 177         const saveButton: ButtonModel = new ButtonModel(this.modalTranslation.SAVE_BUTTON, 'blue', () =>
 178         null, this.enableOrDisableSaveButton);
 179         const interfaceDataModal: ModalModel =
 180             new ModalModel('l', this.modalTranslation.EDIT_TITLE, '', [saveButton, cancelButton], 'custom');
 181         this.modalInstance = this.modalServiceNg2.createCustomModal(interfaceDataModal);
 182
 183         this.modalServiceNg2.addDynamicContentToModal(
 184             this.modalInstance,
 185             InterfaceOperationHandlerComponent,
 186             {
 187                 deploymentArtifactsFilePath: this.deploymentArtifactsFilePath,
 188                 toscaArtifactTypes: this.toscaArtifactTypes,
 189                 selectedInterface: interfaceModel,
 190                 selectedInterfaceOperation: operation,
 191                 validityChangedCallback: this.enableOrDisableSaveButton,
 192                 isViewOnly: true
 193             }
 194         );
 195         this.modalInstance.instance.open();
 196     }
 197
 198     private initInterfaceDefinition() {
 199         this.isLoading = true;
 200         this.interfaces = [];
 201         this.topologyTemplateService.getComponentInterfaceOperations(this.component.componentType, this.component.uniqueId)
 202         .subscribe((response) => {
 203             if (response.interfaces) {
 204                 this.interfaces = _.map(response.interfaces, (interfaceModel) => new UIInterfaceModel(interfaceModel));
 205             }
 206             this.isLoading = false;
 207         });
 208     }
 209
 210     collapseAll(value: boolean = true): void {
 211         _.forEach(this.interfaces, (interfaceData) => {
 212             interfaceData.isCollapsed = value;
 213         });
 214     }
 215
 216     isAllCollapsed(): boolean {
 217         return _.every(this.interfaces, (interfaceData) => interfaceData.isCollapsed);
 218     }
 219
 220     isAllExpanded(): boolean {
 221         return _.every(this.interfaces, (interfaceData) => !interfaceData.isCollapsed);
 222     }
 223
 224     isInterfaceListEmpty(): boolean {
 225         return this.interfaces.length === 0;
 226     }
 227
 228     isOperationListEmpty(): boolean {
 229         return _.filter(this.interfaces, (interfaceData) =>
 230             interfaceData.operations && interfaceData.operations.length > 0).length > 0;
 231     }
 232
 233 }