catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.ts

   1 /*-
   2  * ============LICENSE_START=======================================================
   3  * SDC
   4  * ================================================================================
   5  * Copyright (C) 2017 AT&T Intellectual Property. 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  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ============LICENSE_END=========================================================
  19  */
  20
  21 import { Component, Input, OnInit } from "@angular/core";
  22 import { SdcUiComponents, SdcUiCommon, SdcUiServices } from "onap-ui-angular";
  23 import { EditNameModalComponent } from "app/ng2/pages/composition/panel/panel-header/edit-name-modal/edit-name-modal.component";
  24 import {Component as TopologyTemplate, FullComponentInstance, GroupInstance, PolicyInstance, Requirement, Capability, ComponentInstance} from "app/models";
  25 import { Select } from "@ngxs/store";
  26 import { Observable } from "rxjs/Observable";
  27 import { Subscription } from "rxjs";
  28 import {GRAPH_EVENTS} from "../../../../../utils/constants";
  29 import { CompositionService } from "app/ng2/pages/composition/composition.service";
  30 import {EventListenerService} from "../../../../../services/event-listener-service";
  31 import { ComponentInstanceServiceNg2 } from "app/ng2/services/component-instance-services/component-instance.service";
  32 import { WorkspaceService } from "app/ng2/pages/workspace/workspace.service";
  33 import { GroupsService, PoliciesService } from "app/services-ng2";
  34 import { UIZoneInstanceObject } from "../../../../../models/ui-models/ui-zone-instance-object";
  35 import {SelectedComponentType} from "../../common/store/graph.actions";
  36 import * as _ from 'lodash';
  37 import {GraphState} from "../../common/store/graph.state";
  38
  39
  40 @Component({
  41     selector: 'ng2-composition-panel-header',
  42     templateUrl: './panel-header.component.html',
  43     styleUrls: ['./panel-header.component.less']
  44 })
  45 export class CompositionPanelHeaderComponent implements OnInit {
  46     @Input() isViewOnly: boolean;
  47     @Input() selectedComponent: FullComponentInstance | TopologyTemplate | GroupInstance | PolicyInstance;
  48     @Select(GraphState.getSelectedComponentType) selectedComponentType$:Observable<SelectedComponentType>;
  49
  50
  51     constructor(private modalService: SdcUiServices.ModalService,
  52                 private groupService: GroupsService,
  53                 private policiesService: PoliciesService,
  54                 private eventListenerService: EventListenerService,
  55                 private compositionService: CompositionService,
  56                 private workspaceService: WorkspaceService,
  57                 private componentInstanceService: ComponentInstanceServiceNg2) { }
  58
  59     private iconClassName: string;
  60     private valueEditModalInstance: SdcUiComponents.ModalComponent;
  61     private isTopologyTemplateSelected: boolean;
  62     private componentTypeSubscription: Subscription;
  63
  64     ngOnInit(): void {
  65         this.componentTypeSubscription = this.selectedComponentType$.subscribe((newComponentType) => {
  66
  67             this.initClasses(newComponentType);
  68             this.isTopologyTemplateSelected = (newComponentType === SelectedComponentType.TOPOLOGY_TEMPLATE) ? true : false;
  69         });
  70     }
  71
  72     ngOnDestroy() {
  73         if(this.componentTypeSubscription) {
  74             this.componentTypeSubscription.unsubscribe();
  75         }
  76     }
  77
  78     private initClasses = (componentType:SelectedComponentType): void => {
  79         if (componentType === SelectedComponentType.POLICY) {
  80             this.iconClassName = "sprite-policy-icons policy";
  81         } else if (componentType === SelectedComponentType.GROUP) {
  82             this.iconClassName = "sprite-group-icons group";
  83         } else {
  84             this.iconClassName = undefined;
  85         }
  86     }
  87
  88     private renameInstance = (): void => {
  89         const modalConfig = {
  90             title: "Edit Name",
  91             size: "sm",
  92             type: SdcUiCommon.ModalType.custom,
  93             testId: "renameInstanceModal",
  94             buttons: [
  95                 {id: 'saveButton', text: 'OK', size: 'xsm', callback: this.saveInstanceName, closeModal: false},
  96                 {id: 'cancelButton', text: 'Cancel', size: 'sm', closeModal: true}
  97             ] as SdcUiCommon.IModalButtonComponent[]
  98         } as SdcUiCommon.IModalConfig;
  99         this.valueEditModalInstance = this.modalService.openCustomModal(modalConfig, EditNameModalComponent, {name: this.selectedComponent.name, validityChangedCallback: this.enableOrDisableSaveButton});
 100     };
 101
 102     private enableOrDisableSaveButton = (shouldEnable: boolean): void => {
 103         let saveButton: SdcUiComponents.ModalButtonComponent = this.valueEditModalInstance.getButtonById('saveButton');
 104         saveButton.disabled = !shouldEnable;
 105     }
 106
 107     private saveInstanceName = ():void => {
 108         let nameFromModal:string = this.valueEditModalInstance.innerModalContent.instance.name;
 109
 110         if(nameFromModal != this.selectedComponent.name){
 111             let oldName = this.selectedComponent.name;
 112             this.selectedComponent.name = nameFromModal;
 113             this.valueEditModalInstance.buttons[0].disabled = true;
 114
 115             let onFailed = (error) => {
 116                 this.selectedComponent.name = oldName;
 117                 this.valueEditModalInstance.buttons[0].disabled = false;
 118             };
 119
 120             if(this.selectedComponent instanceof FullComponentInstance){
 121                 let onSuccess = (componentInstance:ComponentInstance) => {
 122                     //update requirements and capabilities owner name
 123                     _.forEach((<FullComponentInstance>this.selectedComponent).requirements, (requirementsArray:Array<Requirement>) => {
 124                         _.forEach(requirementsArray, (requirement:Requirement):void => {
 125                             requirement.ownerName = componentInstance.name;
 126                         });
 127                     });
 128
 129                     _.forEach((<FullComponentInstance>this.selectedComponent).capabilities, (capabilitiesArray:Array<Capability>) => {
 130                         _.forEach(capabilitiesArray, (capability:Capability):void => {
 131                             capability.ownerName = componentInstance.name;
 132                         });
 133                     });
 134                     this.valueEditModalInstance.closeModal();
 135                     this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_COMPONENT_INSTANCE_NAME_CHANGED, this.selectedComponent);
 136                 };
 137
 138                 this.componentInstanceService.updateComponentInstance(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, new ComponentInstance(this.selectedComponent))
 139                     .subscribe(onSuccess, onFailed);
 140             } else if (this.selectedComponent instanceof PolicyInstance) {
 141                 this.policiesService.updateName(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.selectedComponent.uniqueId, nameFromModal).subscribe((success)=>{
 142                     this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_POLICY_INSTANCE_UPDATE, this.selectedComponent);
 143                     this.valueEditModalInstance.closeModal();
 144                 }, onFailed);
 145             } else if (this.selectedComponent instanceof GroupInstance){
 146                 this.groupService.updateName(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.selectedComponent.uniqueId, nameFromModal).subscribe((success)=>{
 147                     this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_GROUP_INSTANCE_UPDATE, this.selectedComponent);
 148                     this.valueEditModalInstance.closeModal();
 149                 }, onFailed);
 150             }
 151         }  else {
 152             this.valueEditModalInstance.closeModal();
 153         }
 154     };
 155
 156     private deleteInstance = (): void => {
 157         let title:string = "Delete Confirmation";
 158         let message:string = "Are you sure you would like to delete "+ this.selectedComponent.name + "?";
 159         const okButton = {testId: "OK", text: "OK", type: SdcUiCommon.ButtonType.warning, callback: this.deleteInstanceConfirmed, closeModal: true} as SdcUiComponents.ModalButtonComponent;
 160         this.modalService.openWarningModal(title, message, "delete-modal", [okButton]);
 161     };
 162
 163     private deleteInstanceConfirmed: Function = () => {
 164         if(this.selectedComponent instanceof FullComponentInstance){
 165             this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE , this.selectedComponent.uniqueId);
 166         }
 167         else if(this.selectedComponent instanceof PolicyInstance){
 168             this.policiesService.deletePolicy(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.selectedComponent.uniqueId).subscribe((success)=>{
 169                 this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DELETE_ZONE_INSTANCE ,
 170                     new UIZoneInstanceObject(this.selectedComponent.uniqueId, 1));
 171             }, (err) => {});
 172
 173         }
 174         else if(this.selectedComponent instanceof GroupInstance){
 175             this.groupService.deleteGroup(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.selectedComponent.uniqueId).subscribe((success)=>{
 176                 this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DELETE_ZONE_INSTANCE ,
 177                     new UIZoneInstanceObject(this.selectedComponent.uniqueId, 0));
 178             }, (err) => {});
 179
 180         }
 181     };
 182 }
 183