catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/hierarchy-tab/hierarchy-tab.component.ts

   1 import {Component, Input} from "@angular/core";
   2 import {Component as TopologyTemplate, ComponentInstance, DisplayModule, Module, PropertyModel} from "app/models";
   3 import {TranslateService} from "app/ng2/shared/translator/translate.service";
   4 import {ComponentType} from "app/utils/constants";
   5 import {WorkspaceService} from "../../../../workspace.service";
   6 import {ModulesService} from "../../../../../../services/modules.service";
   7 import * as _ from "lodash";
   8 import {ModalsHandler} from "../../../../../../../utils/modals-handler";
   9 import {ComponentFactory} from "../../../../../../../utils/component-factory";
  10 import {Select, Store} from "@ngxs/store";
  11 import { SdcUiServices } from "onap-ui-angular";
  12 import { EditModuleName } from "../edit-module-name/edit-module-name.component";
  13 import {GraphState} from "../../../../../composition/common/store/graph.state";
  14 import {DeploymentGraphService} from "../../../../../composition/deployment/deployment-graph.service";
  15 import {OnSidebarOpenOrCloseAction} from "../../../../../composition/common/store/graph.actions";
  16
  17 @   Component({
  18     selector: 'hierarchy-tab',
  19     templateUrl: './hierarchy-tab.component.html',
  20     styleUrls: ['./hierarchy-tab.component.less'],
  21 })
  22 export class HierarchyTabComponent {
  23
  24     @Select(GraphState.withSidebar) withSidebar$: boolean;
  25     @Input() isViewOnly: boolean;
  26     public selectedIndex: number;
  27     public selectedModule: DisplayModule;
  28     public isLoading: boolean;
  29     public topologyTemplateName: string;
  30     public topologyTemplateType: string;
  31     public modules: Array<Module> = [];
  32     public componentInstances: Array<ComponentInstance> = [];
  33     private editPropertyModalTopologyTemplate: TopologyTemplate;
  34
  35     constructor(private translateService: TranslateService,
  36                 private workspaceService: WorkspaceService,
  37                 private deploymentService: DeploymentGraphService,
  38                 private modulesService: ModulesService,
  39                 private ModalsHandler: ModalsHandler,
  40                 private componentFactory: ComponentFactory,
  41                 private store: Store,
  42                 private popoverService: SdcUiServices.PopoverService) {
  43         this.isLoading = false;
  44         this.topologyTemplateName = this.workspaceService.metadata.name;
  45         this.topologyTemplateType = this.workspaceService.metadata.componentType;
  46     }
  47
  48     ngOnInit() {
  49         this.modules = this.deploymentService.modules;
  50         this.componentInstances = this.deploymentService.componentInstances;
  51         this.editPropertyModalTopologyTemplate = this.componentFactory.createEmptyComponent(this.topologyTemplateType);
  52         this.editPropertyModalTopologyTemplate.componentInstances = this.deploymentService.componentInstances;
  53     }
  54
  55     onModuleSelected(module: Module, componentInstanceId?: string): void {
  56
  57         let onSuccess = (module: DisplayModule) => {
  58             console.log("Module Loaded: ", module);
  59             this.selectedModule = module;
  60             this.isLoading = false;
  61         };
  62
  63         let onFailed = () => {
  64             this.isLoading = false;
  65         };
  66
  67         if (!this.selectedModule || (this.selectedModule && this.selectedModule.uniqueId != module.uniqueId)) {
  68             this.isLoading = true;
  69             if (this.topologyTemplateType == ComponentType.SERVICE) {
  70                 // this.selectedInstanceId = componentInstanceId;
  71                 this.modulesService.getComponentInstanceModule(this.topologyTemplateType, this.workspaceService.metadata.uniqueId, componentInstanceId, module.uniqueId).subscribe((resultModule: DisplayModule) => {
  72                     onSuccess(resultModule);
  73                 }, () => {
  74                     onFailed();
  75                 });
  76             } else {
  77                 this.modulesService.getModuleForDisplay(this.topologyTemplateType, this.workspaceService.metadata.uniqueId, module.uniqueId).subscribe((resultModule: DisplayModule) => {
  78                     onSuccess(resultModule);
  79                 }, () => {
  80                     onFailed();
  81                 });
  82             }
  83         }
  84     }
  85
  86     updateHeatName(): void {
  87         this.isLoading = true;
  88         let originalName: string = this.selectedModule.name;
  89
  90         this.selectedModule.updateName();
  91         let moduleIndex: number = _.indexOf(this.modules, _.find(this.modules, (module: Module) => {
  92             return module.uniqueId === this.selectedModule.uniqueId;
  93         }));
  94
  95         if (moduleIndex !== -1) {
  96             this.modules[moduleIndex].name = this.selectedModule.name;
  97             this.modulesService.updateModuleMetadata(this.topologyTemplateType, this.workspaceService.metadata.uniqueId, this.modules[moduleIndex]).subscribe(() => {
  98                 this.isLoading = false;
  99             }, () => {
 100                 this.updateOriginalHeatName(originalName, moduleIndex);
 101                 this.modules[moduleIndex].name = originalName;
 102             });
 103         } else {
 104                 this.updateOriginalHeatName(originalName, moduleIndex);
 105         }
 106     };
 107
 108     private updateOriginalHeatName(originalName: string, moduleIndex: number){
 109         this.isLoading = false;
 110         this.selectedModule.name = originalName;
 111         this.selectedModule.heatName = this.selectedModule.name.split('..')[1];
 112     }
 113
 114     openEditPropertyModal(property: PropertyModel): void {
 115         this.editPropertyModalTopologyTemplate.setComponentMetadata(this.workspaceService.metadata);
 116         this.ModalsHandler.openEditModulePropertyModal(property, this.editPropertyModalTopologyTemplate, this.selectedModule, this.selectedModule.properties).then(() => {
 117         });
 118     }
 119
 120     private getKeys(map: Map<any, any>) {
 121         return _.keys(map);
 122     }
 123
 124     private toggleSidebarDisplay = () => {
 125         // this.withSidebar = !this.withSidebar;
 126         this.store.dispatch(new OnSidebarOpenOrCloseAction());
 127     }
 128
 129     public openEditModuleNamePopup($event) {
 130         const editModuleNameInstance = this.popoverService.createPopOverWithInnerComponent('Edit Module Name', '', {x:$event.x , y:$event.y }, EditModuleName, {selectModule: _.cloneDeep(this.selectedModule)}, 'top');
 131         editModuleNameInstance.innerPopoverContent.instance.clickButtonEvent.subscribe((newHeatName) => {
 132             if(newHeatName != null){
 133                 this.selectedModule.heatName = newHeatName;
 134                 this.updateHeatName();
 135             }
 136             editModuleNameInstance.closePopover();
 137         })
 138     }
 139 }