1 files changed, 139 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/hierarchy-tab/hierarchy-tab.component.ts b/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/hierarchy-tab/hierarchy-tab.component.ts
new file mode 100644
index 0000000000..604b194283
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/hierarchy-tab/hierarchy-tab.component.ts
@@ -0,0 +1,139 @@
+import {Component, Input} from "@angular/core";
+import {Component as TopologyTemplate, ComponentInstance, DisplayModule, Module, PropertyModel} from "app/models";
+import {TranslateService} from "app/ng2/shared/translator/translate.service";
+import {ComponentType} from "app/utils/constants";
+import {WorkspaceService} from "../../../../workspace.service";
+import {ModulesService} from "../../../../../../services/modules.service";
+import * as _ from "lodash";
+import {ModalsHandler} from "../../../../../../../utils/modals-handler";
+import {ComponentFactory} from "../../../../../../../utils/component-factory";
+import {Select, Store} from "@ngxs/store";
+import { SdcUiServices } from "onap-ui-angular";
+import { EditModuleName } from "../edit-module-name/edit-module-name.component";
+import {GraphState} from "../../../../../composition/common/store/graph.state";
+import {DeploymentGraphService} from "../../../../../composition/deployment/deployment-graph.service";
+import {OnSidebarOpenOrCloseAction} from "../../../../../composition/common/store/graph.actions";
+
+@   Component({
+    selector: 'hierarchy-tab',
+    templateUrl: './hierarchy-tab.component.html',
+    styleUrls: ['./hierarchy-tab.component.less'],
+})
+export class HierarchyTabComponent {
+
+    @Select(GraphState.withSidebar) withSidebar$: boolean;
+    @Input() isViewOnly: boolean;
+    public selectedIndex: number;
+    public selectedModule: DisplayModule;
+    public isLoading: boolean;
+    public topologyTemplateName: string;
+    public topologyTemplateType: string;
+    public modules: Array<Module> = [];
+    public componentInstances: Array<ComponentInstance> = [];
+    private editPropertyModalTopologyTemplate: TopologyTemplate;
+
+    constructor(private translateService: TranslateService,
+                private workspaceService: WorkspaceService,
+                private deploymentService: DeploymentGraphService,
+                private modulesService: ModulesService,
+                private ModalsHandler: ModalsHandler,
+                private componentFactory: ComponentFactory,
+                private store: Store,
+                private popoverService: SdcUiServices.PopoverService) {
+        this.isLoading = false;
+        this.topologyTemplateName = this.workspaceService.metadata.name;
+        this.topologyTemplateType = this.workspaceService.metadata.componentType;
+    }
+
+    ngOnInit() {
+        this.modules = this.deploymentService.modules;
+        this.componentInstances = this.deploymentService.componentInstances;
+        this.editPropertyModalTopologyTemplate = this.componentFactory.createEmptyComponent(this.topologyTemplateType);
+        this.editPropertyModalTopologyTemplate.componentInstances = this.deploymentService.componentInstances;
+    }
+
+    onModuleSelected(module: Module, componentInstanceId?: string): void {
+
+        let onSuccess = (module: DisplayModule) => {
+            console.log("Module Loaded: ", module);
+            this.selectedModule = module;
+            this.isLoading = false;
+        };
+
+        let onFailed = () => {
+            this.isLoading = false;
+        };
+
+        if (!this.selectedModule || (this.selectedModule && this.selectedModule.uniqueId != module.uniqueId)) {
+            this.isLoading = true;
+            if (this.topologyTemplateType == ComponentType.SERVICE) {
+                // this.selectedInstanceId = componentInstanceId;
+                this.modulesService.getComponentInstanceModule(this.topologyTemplateType, this.workspaceService.metadata.uniqueId, componentInstanceId, module.uniqueId).subscribe((resultModule: DisplayModule) => {
+                    onSuccess(resultModule);
+                }, () => {
+                    onFailed();
+                });
+            } else {
+                this.modulesService.getModuleForDisplay(this.topologyTemplateType, this.workspaceService.metadata.uniqueId, module.uniqueId).subscribe((resultModule: DisplayModule) => {
+                    onSuccess(resultModule);
+                }, () => {
+                    onFailed();
+                });
+            }
+        }
+    }
+
+    updateHeatName(): void {
+        this.isLoading = true;
+        let originalName: string = this.selectedModule.name;
+       
+        this.selectedModule.updateName();
+        let moduleIndex: number = _.indexOf(this.modules, _.find(this.modules, (module: Module) => {
+            return module.uniqueId === this.selectedModule.uniqueId;
+        }));
+        
+        if (moduleIndex !== -1) {
+            this.modules[moduleIndex].name = this.selectedModule.name;
+            this.modulesService.updateModuleMetadata(this.topologyTemplateType, this.workspaceService.metadata.uniqueId, this.modules[moduleIndex]).subscribe(() => {
+                this.isLoading = false;
+            }, () => {
+                this.updateOriginalHeatName(originalName, moduleIndex);
+                this.modules[moduleIndex].name = originalName;
+            });
+        } else {
+                this.updateOriginalHeatName(originalName, moduleIndex);
+        }
+    };
+
+    private updateOriginalHeatName(originalName: string, moduleIndex: number){
+        this.isLoading = false;
+        this.selectedModule.name = originalName;
+        this.selectedModule.heatName = this.selectedModule.name.split('..')[1];
+    }
+
+    openEditPropertyModal(property: PropertyModel): void {
+        this.editPropertyModalTopologyTemplate.setComponentMetadata(this.workspaceService.metadata);
+        this.ModalsHandler.openEditModulePropertyModal(property, this.editPropertyModalTopologyTemplate, this.selectedModule, this.selectedModule.properties).then(() => {
+        });
+    }
+
+    private getKeys(map: Map<any, any>) {
+        return _.keys(map);
+    }
+
+    private toggleSidebarDisplay = () => {
+        // this.withSidebar = !this.withSidebar;
+        this.store.dispatch(new OnSidebarOpenOrCloseAction());
+    }
+
+    public openEditModuleNamePopup($event) {
+        const editModuleNameInstance = this.popoverService.createPopOverWithInnerComponent('Edit Module Name', '', {x:$event.x , y:$event.y }, EditModuleName, {selectModule: _.cloneDeep(this.selectedModule)}, 'top');
+        editModuleNameInstance.innerPopoverContent.instance.clickButtonEvent.subscribe((newHeatName) => {
+            if(newHeatName != null){
+                this.selectedModule.heatName = newHeatName;
+                this.updateHeatName();
+            }
+            editModuleNameInstance.closePopover();
+        })
+    }
+}