1 files changed, 116 insertions, 68 deletions
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.ts
index ab659a3b8f..90a98147e9 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.ts
@@ -18,64 +18,70 @@
  * ============LICENSE_END=========================================================
  */
 
-import { Component,  Input,  AfterViewInit, SimpleChanges, OnInit, OnChanges } from "@angular/core";
-import {  SdcUiComponents } from "sdc-ui/lib/angular";
-import { IModalConfig } from 'sdc-ui/lib/angular/modals/models/modal-config';
-import { ZoneInstanceType } from 'app/models/graph/zones/zone-instance';
-import { ValueEditComponent } from './../../../../components/ui/forms/value-edit/value-edit.component';
-import { Component as TopologyTemplate, ComponentInstance, IAppMenu } from "app/models";
-import { PoliciesService } from '../../../../services/policies.service';
-import { GroupsService } from '../../../../services/groups.service';
-import {IZoneService} from "../../../../../models/graph/zones/zone";
-import { EventListenerService, LoaderService } from "../../../../../services";
-import { GRAPH_EVENTS, EVENTS } from "../../../../../utils";
+import { Component, Input, OnInit } from "@angular/core";
+import { SdcUiComponents, SdcUiCommon, SdcUiServices } from "onap-ui-angular";
+import { EditNameModalComponent } from "app/ng2/pages/composition/panel/panel-header/edit-name-modal/edit-name-modal.component";
+import {Component as TopologyTemplate, FullComponentInstance, GroupInstance, PolicyInstance, Requirement, Capability, ComponentInstance} from "app/models";
+import { Select } from "@ngxs/store";
+import { Observable } from "rxjs/Observable";
+import { Subscription } from "rxjs";
+import {GRAPH_EVENTS} from "../../../../../utils/constants";
+import { CompositionService } from "app/ng2/pages/composition/composition.service";
+import {EventListenerService} from "../../../../../services/event-listener-service";
+import { ComponentInstanceServiceNg2 } from "app/ng2/services/component-instance-services/component-instance.service";
+import { WorkspaceService } from "app/ng2/pages/workspace/workspace.service";
+import { GroupsService, PoliciesService } from "app/services-ng2";
 import { UIZoneInstanceObject } from "../../../../../models/ui-models/ui-zone-instance-object";
-import { ModalButtonComponent } from "sdc-ui/lib/angular/components";
+import {SelectedComponentType} from "../../common/store/graph.actions";
+import * as _ from 'lodash';
+import {GraphState} from "../../common/store/graph.state";
+
 
 @Component({
     selector: 'ng2-composition-panel-header',
     templateUrl: './panel-header.component.html',
     styleUrls: ['./panel-header.component.less']
 })
-export class CompositionPanelHeaderComponent implements OnInit, OnChanges {
-
-    @Input() topologyTemplate: TopologyTemplate;
-    @Input() selectedZoneInstanceType: ZoneInstanceType;
-    @Input() selectedZoneInstanceId: string;
-    @Input() name: string;
-    @Input() nonCertified: boolean;
+export class CompositionPanelHeaderComponent implements OnInit {
     @Input() isViewOnly: boolean;
-    @Input() isLoading: boolean;
+    @Input() selectedComponent: FullComponentInstance | TopologyTemplate | GroupInstance | PolicyInstance;
+    @Select(GraphState.getSelectedComponentType) selectedComponentType$:Observable<SelectedComponentType>;
+
 
-    constructor(private groupsService:GroupsService, private policiesService: PoliciesService, 
-                private modalService:SdcUiComponents.ModalService, private eventListenerService:EventListenerService) { }
+    constructor(private modalService: SdcUiServices.ModalService,
+                private groupService: GroupsService,
+                private policiesService: PoliciesService,
+                private eventListenerService: EventListenerService,
+                private compositionService: CompositionService,
+                private workspaceService: WorkspaceService,
+                private componentInstanceService: ComponentInstanceServiceNg2) { }
 
-    private service:IZoneService;
     private iconClassName: string;
+    private valueEditModalInstance: SdcUiComponents.ModalComponent;
+    private isTopologyTemplateSelected: boolean;
+    private componentTypeSubscription: Subscription;
 
     ngOnInit(): void {
-        this.init();
-    }
+        this.componentTypeSubscription = this.selectedComponentType$.subscribe((newComponentType) => {
 
-    ngOnChanges (changes:SimpleChanges):void {
-        if(changes.selectedZoneInstanceId){
-            this.init();
-        }
+            this.initClasses(newComponentType);
+            this.isTopologyTemplateSelected = (newComponentType === SelectedComponentType.TOPOLOGY_TEMPLATE) ? true : false;
+        });
     }
 
     ngOnDestroy() {
-        
-        
+        if(this.componentTypeSubscription) {
+            this.componentTypeSubscription.unsubscribe();
+        }
     }
-    private init = (): void => {
-        if (this.selectedZoneInstanceType === ZoneInstanceType.POLICY) {
+
+    private initClasses = (componentType:SelectedComponentType): void => {
+        if (componentType === SelectedComponentType.POLICY) {
             this.iconClassName = "sprite-policy-icons policy";
-            this.service = this.policiesService;
-        } else if (this.selectedZoneInstanceType === ZoneInstanceType.GROUP) {
+        } else if (componentType === SelectedComponentType.GROUP) {
             this.iconClassName = "sprite-group-icons group";
-            this.service = this.groupsService;
         } else {
-            this.iconClassName = "sprite-resource-icons defaulticon";
+            this.iconClassName = undefined;
         }
     }
 
@@ -83,53 +89,95 @@ export class CompositionPanelHeaderComponent implements OnInit, OnChanges {
         const modalConfig = {
             title: "Edit Name",
             size: "sm",
-            type: "custom",
+            type: SdcUiCommon.ModalType.custom,
             testId: "renameInstanceModal",
             buttons: [
                 {id: 'saveButton', text: 'OK', size: 'xsm', callback: this.saveInstanceName, closeModal: false},
-                {id: 'cancelButton', text: 'Cancel', size: 'sm', closeModal: true} 
-            ] as ModalButtonComponent[]
-        } as IModalConfig;
-        this.modalService.openCustomModal(modalConfig, ValueEditComponent, {name: this.name, validityChangedCallback: this.enableOrDisableSaveButton});
+                {id: 'cancelButton', text: 'Cancel', size: 'sm', closeModal: true}
+            ] as SdcUiCommon.IModalButtonComponent[]
+        } as SdcUiCommon.IModalConfig;
+        this.valueEditModalInstance = this.modalService.openCustomModal(modalConfig, EditNameModalComponent, {name: this.selectedComponent.name, validityChangedCallback: this.enableOrDisableSaveButton});
     };
 
     private enableOrDisableSaveButton = (shouldEnable: boolean): void => {
-        let saveButton: ModalButtonComponent = this.modalService.getCurrentInstance().getButtonById('saveButton');
+        let saveButton: SdcUiComponents.ModalButtonComponent = this.valueEditModalInstance.getButtonById('saveButton');
         saveButton.disabled = !shouldEnable;
     }
 
     private saveInstanceName = ():void => {
-        let currentModal = this.modalService.getCurrentInstance();
-        let nameFromModal:string = currentModal.innerModalContent.instance.name;
-
-        if(nameFromModal != this.name){
-            currentModal.buttons[0].disabled = true;
-            this.service.updateName(this.topologyTemplate.componentType, this.topologyTemplate.uniqueId, this.selectedZoneInstanceId, nameFromModal).subscribe((success)=>{
-                this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_ZONE_INSTANCE_NAME_CHANGED, nameFromModal);
-                this.modalService.closeModal();
-            }, (error)=> {
-                currentModal.buttons[0].disabled = false;
-            });
-        } else {
-            this.modalService.closeModal();
+        let nameFromModal:string = this.valueEditModalInstance.innerModalContent.instance.name;
+
+        if(nameFromModal != this.selectedComponent.name){
+            let oldName = this.selectedComponent.name;
+            this.selectedComponent.name = nameFromModal;
+            this.valueEditModalInstance.buttons[0].disabled = true;
+
+            let onFailed = (error) => { 
+                this.selectedComponent.name = oldName;
+                this.valueEditModalInstance.buttons[0].disabled = false;
+            };
+
+            if(this.selectedComponent instanceof FullComponentInstance){
+                let onSuccess = (componentInstance:ComponentInstance) => {
+                    //update requirements and capabilities owner name
+                    _.forEach((<FullComponentInstance>this.selectedComponent).requirements, (requirementsArray:Array<Requirement>) => {
+                        _.forEach(requirementsArray, (requirement:Requirement):void => {
+                            requirement.ownerName = componentInstance.name;
+                        });
+                    });
+
+                    _.forEach((<FullComponentInstance>this.selectedComponent).capabilities, (capabilitiesArray:Array<Capability>) => {
+                        _.forEach(capabilitiesArray, (capability:Capability):void => {
+                            capability.ownerName = componentInstance.name;
+                        });
+                    });
+                    this.valueEditModalInstance.closeModal();
+                    this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_COMPONENT_INSTANCE_NAME_CHANGED, this.selectedComponent);
+                };
+
+                this.componentInstanceService.updateComponentInstance(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, new ComponentInstance(this.selectedComponent))
+                    .subscribe(onSuccess, onFailed);
+            } else if (this.selectedComponent instanceof PolicyInstance) {
+                this.policiesService.updateName(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.selectedComponent.uniqueId, nameFromModal).subscribe((success)=>{
+                    this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_POLICY_INSTANCE_UPDATE, this.selectedComponent);
+                    this.valueEditModalInstance.closeModal();
+                }, onFailed);
+            } else if (this.selectedComponent instanceof GroupInstance){
+                this.groupService.updateName(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.selectedComponent.uniqueId, nameFromModal).subscribe((success)=>{
+                    this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_GROUP_INSTANCE_UPDATE, this.selectedComponent);
+                    this.valueEditModalInstance.closeModal();
+                }, onFailed);
+            }
+        }  else {
+            this.valueEditModalInstance.closeModal();
         }
     };
-    
+
     private deleteInstance = (): void => {
         let title:string = "Delete Confirmation";
-        let message:string = "Are you sure you would like to delete "+ this.name + "?";
-        this.modalService.openAlertModal(title, message, "OK", this.deleteInstanceConfirmed, "deleteInstanceModal");
+        let message:string = "Are you sure you would like to delete "+ this.selectedComponent.name + "?";
+        const okButton = {testId: "OK", text: "OK", type: SdcUiCommon.ButtonType.warning, callback: this.deleteInstanceConfirmed, closeModal: true} as SdcUiComponents.ModalButtonComponent;
+        this.modalService.openWarningModal(title, message, "delete-modal", [okButton]);
     };
 
-    private deleteInstanceConfirmed = () => {
-        this.eventListenerService.notifyObservers(EVENTS.SHOW_LOADER_EVENT + 'composition-graph');
-        this.service.deleteZoneInstance(this.topologyTemplate.componentType, this.topologyTemplate.uniqueId, this.selectedZoneInstanceId).finally(()=> {
-            this.eventListenerService.notifyObservers(EVENTS.HIDE_LOADER_EVENT + 'composition-graph');
-        }).subscribe(()=> {
-            let deletedItem:UIZoneInstanceObject = new UIZoneInstanceObject(this.selectedZoneInstanceId, this.selectedZoneInstanceType, this.name);
-            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DELETE_ZONE_INSTANCE, deletedItem);
-        });
-    };
+    private deleteInstanceConfirmed: Function = () => {
+        if(this.selectedComponent instanceof FullComponentInstance){
+            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE , this.selectedComponent.uniqueId);
+        }
+        else if(this.selectedComponent instanceof PolicyInstance){
+            this.policiesService.deletePolicy(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.selectedComponent.uniqueId).subscribe((success)=>{
+                this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DELETE_ZONE_INSTANCE ,
+                    new UIZoneInstanceObject(this.selectedComponent.uniqueId, 1));
+            }, (err) => {});
+
+        }
+        else if(this.selectedComponent instanceof GroupInstance){
+            this.groupService.deleteGroup(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.selectedComponent.uniqueId).subscribe((success)=>{
+                this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DELETE_ZONE_INSTANCE ,
+                    new UIZoneInstanceObject(this.selectedComponent.uniqueId, 0));
+            }, (err) => {});
 
+        }
+    };
 }