catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.ts

   1 import { Component, Input, OnInit } from '@angular/core';
   2 import { Store } from '@ngxs/store';
   3 import {
   4     AttributeModel,
   5     AttributesGroup,
   6     Component as TopologyTemplate,
   7     ComponentMetadata,
   8     FullComponentInstance,
   9     PropertiesGroup,
  10     PropertyModel
  11 } from 'app/models';
  12 import { CompositionService } from 'app/ng2/pages/composition/composition.service';
  13 import { WorkspaceService } from 'app/ng2/pages/workspace/workspace.service';
  14 import { GroupByPipe } from 'app/ng2/pipes/groupBy.pipe';
  15 import { ResourceNamePipe } from 'app/ng2/pipes/resource-name.pipe';
  16 import { TopologyTemplateService } from 'app/ng2/services/component-services/topology-template.service';
  17 import { ComponentGenericResponse } from 'app/ng2/services/responses/component-generic-response';
  18 import { TranslateService } from 'app/ng2/shared/translator/translate.service';
  19 import { ModalsHandler } from 'app/utils';
  20 import { SdcUiCommon, SdcUiComponents, SdcUiServices } from 'onap-ui-angular';
  21 import {SelectedComponentType, TogglePanelLoadingAction} from "../../../common/store/graph.actions";
  22
  23 @Component({
  24     selector: 'properties-tab',
  25     templateUrl: './properties-tab.component.html',
  26     styleUrls: ['./properties-tab.component.less']
  27 })
  28 export class PropertiesTabComponent implements OnInit {
  29     attributes: AttributesGroup;
  30     isComponentInstanceSelected: boolean;
  31     properties: PropertiesGroup;
  32     groupPropertiesByInstance: boolean;
  33     propertiesMessage: string;
  34     metadata: ComponentMetadata;
  35     objectKeys = Object.keys;
  36
  37     @Input() isViewOnly: boolean;
  38     @Input() componentType: SelectedComponentType;
  39     @Input() component: FullComponentInstance | TopologyTemplate;
  40     @Input() input: {title: string};
  41
  42     constructor(private store: Store,
  43                 private workspaceService: WorkspaceService,
  44                 private compositionService: CompositionService,
  45                 private modalsHandler: ModalsHandler,
  46                 private topologyTemplateService: TopologyTemplateService,
  47                 private modalService: SdcUiServices.ModalService,
  48                 private translateService: TranslateService,
  49                 private groupByPipe: GroupByPipe) {
  50     }
  51
  52     ngOnInit() {
  53         this.metadata = this.workspaceService.metadata;
  54         this.isComponentInstanceSelected = this.componentType === SelectedComponentType.COMPONENT_INSTANCE;
  55         this.getComponentInstancesPropertiesAndAttributes();
  56     }
  57
  58     public isPropertyOwner = (): boolean => {
  59         return this.component instanceof TopologyTemplate && this.component.isResource();
  60     }
  61
  62     public updateProperty = (property: PropertyModel): void => {
  63         this.openEditPropertyModal(property);
  64     }
  65
  66     public deleteProperty = (property: PropertyModel): void => {
  67
  68         const onOk: Function = (): void => {
  69             this.store.dispatch(new TogglePanelLoadingAction({isLoading: true}));
  70             this.topologyTemplateService.deleteProperty(this.component.componentType, this.component.uniqueId, property.uniqueId)
  71                 .subscribe((response) => {
  72                     this.store.dispatch(new TogglePanelLoadingAction({isLoading: false}));
  73                     this.component.properties = this.component.properties.filter((prop) => prop.uniqueId !==  property.uniqueId);
  74                     this.initComponentProperties();
  75                 }, () => {
  76                     this.store.dispatch(new TogglePanelLoadingAction({isLoading: false}));
  77                 });
  78         };
  79
  80         const title: string = this.translateService.translate('PROPERTY_VIEW_DELETE_MODAL_TITLE');
  81         const message: string = this.translateService.translate('PROPERTY_VIEW_DELETE_MODAL_TEXT', {name: property.name});
  82         const okButton = {
  83             testId: 'OK',
  84             text: 'OK',
  85             type: SdcUiCommon.ButtonType.info,
  86             callback: onOk,
  87             closeModal: true} as SdcUiComponents.ModalButtonComponent;
  88         this.modalService.openInfoModal(title, message, 'delete-modal', [okButton]);
  89     }
  90
  91     public groupNameByKey = (key: string): string => {
  92         switch (key) {
  93             case 'derived':
  94                 return 'Derived';
  95
  96             case this.metadata.uniqueId:
  97                 return ResourceNamePipe.getDisplayName(this.metadata.name);
  98
  99             default:
 100                 return this.getComponentInstanceNameFromInstanceByKey(key);
 101         }
 102     }
 103
 104     public getComponentInstanceNameFromInstanceByKey = (key: string): string => {
 105         let instanceName: string = '';
 106         const componentInstance = this.compositionService.getComponentInstances().find((item) => item.uniqueId === key);
 107         if (key !== undefined && componentInstance) {
 108
 109             instanceName = ResourceNamePipe.getDisplayName(componentInstance.name);
 110         }
 111         return instanceName;
 112     }
 113
 114     private getComponentInstancesPropertiesAndAttributes = () => {
 115         this.topologyTemplateService.getComponentInstanceAttributesAndProperties(
 116             this.workspaceService.metadata.uniqueId,
 117             this.workspaceService.metadata.componentType)
 118             .subscribe((genericResponse: ComponentGenericResponse) => {
 119                 this.compositionService.componentInstancesAttributes = genericResponse.componentInstancesAttributes || new AttributesGroup();
 120                 this.compositionService.componentInstancesProperties = genericResponse.componentInstancesProperties;
 121                 this.initPropertiesAndAttributes();
 122             });
 123     }
 124
 125     private initComponentProperties = (): void => {
 126         let result: PropertiesGroup = {};
 127
 128         this.propertiesMessage = undefined;
 129         this.groupPropertiesByInstance = false;
 130         if (this.component instanceof FullComponentInstance) {
 131             result[this.component.uniqueId] = _.orderBy(this.compositionService.componentInstancesProperties[this.component.uniqueId], ['name']);
 132             if (this.component.originType === 'VF') {
 133                 this.groupPropertiesByInstance = true;
 134                 result[this.component.uniqueId] = Array.from(this.groupByPipe.transform(result[this.component.uniqueId], 'path'));
 135             }
 136         } else if (this.metadata.isService()) {
 137             // Temporally fix to hide properties for service (UI stack when there are many properties)
 138             result = this.compositionService.componentInstancesProperties;
 139             this.propertiesMessage = 'Note: properties for service are disabled';
 140         } else {
 141             const componentUid = this.component.uniqueId;
 142             result[componentUid] = Array<PropertyModel>();
 143             const derived = Array<PropertyModel>();
 144             _.forEach(this.component.properties, (property: PropertyModel) => {
 145                 if (componentUid === property.parentUniqueId) {
 146                     result[componentUid].push(property);
 147                 } else {
 148                     property.readonly = true;
 149                     derived.push(property);
 150                 }
 151             });
 152             if (derived.length) {
 153                 result['derived'] = derived;
 154             }
 155             this.objectKeys(result).forEach((key) => { result[key] =  _.orderBy(result[key], ['name']); });
 156         }
 157         this.properties = result;
 158     }
 159
 160     private initComponentAttributes = (): void => {
 161         let result: AttributesGroup = {};
 162
 163         if (this.component) {
 164             if (this.component instanceof FullComponentInstance) {
 165                 result[this.component.uniqueId] = this.compositionService.componentInstancesAttributes[this.component.uniqueId] || [];
 166             } else if (this.metadata.isService()) {
 167                 result = this.compositionService.componentInstancesAttributes;
 168             } else {
 169                 result[this.component.uniqueId] = (this.component as TopologyTemplate).attributes;
 170             }
 171             this.attributes = result;
 172             this.objectKeys(this.attributes).forEach((key) => {
 173                 this.attributes[key] =  _.orderBy(this.attributes[key], ['name']);
 174             });
 175
 176         }
 177     }
 178
 179     /**
 180      * This function is checking if the component is the value owner of the current property
 181      * in order to notify the edit property modal which fields to disable
 182      */
 183     private isPropertyValueOwner = (): boolean => {
 184         return this.metadata.isService() || !!this.component;
 185     }
 186
 187     /**
 188      *  The function opens the edit property modal.
 189      *  It checks if the property is from the VF or from one of it's resource instances and sends the needed property list.
 190      *  For create property reasons an empty array is transferd
 191      *
 192      * @param property the wanted property to edit/create
 193      */
 194     private openEditPropertyModal = (property: PropertyModel): void => {
 195         this.modalsHandler.newOpenEditPropertyModal(property,
 196             (this.isPropertyOwner() ?
 197                 this.properties[property.parentUniqueId] :
 198                 this.properties[property.resourceInstanceUniqueId]) || [],
 199             this.isPropertyValueOwner(), 'component', property.resourceInstanceUniqueId).then((updatedProperty: PropertyModel) => {
 200                 if (updatedProperty) {
 201                     const oldProp = _.find(this.properties[updatedProperty.resourceInstanceUniqueId],
 202                                  (prop: PropertyModel) => prop.uniqueId === updatedProperty.uniqueId);
 203                     oldProp.value = updatedProperty.value;
 204                 }
 205         });
 206     }
 207
 208     private initPropertiesAndAttributes = (): void => {
 209         this.initComponentProperties();
 210         this.initComponentAttributes();
 211     }
 212 }