2 files changed, 28 insertions, 12 deletions
diff --git a/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view-model.ts b/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view-model.ts
index c438c7ace6..f752e3dba7 100644
--- a/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view-model.ts
+++ b/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view-model.ts
@@ -23,6 +23,10 @@ import {ModalsHandler} from "app/utils";
 import {PropertyModel, DisplayModule, Component, ComponentInstance, Tab, Module} from "app/models";
 import {ExpandCollapseListData} from "app/directives/utils/expand-collapse-list-header/expand-collapse-list-header";
 
+interface IComponentInstancesMap {
+    [key:string]: ComponentInstance
+}
+
 export interface IHierarchyScope extends ng.IScope {
     component:Component;
     selectedIndex:number;
@@ -32,8 +36,9 @@ export interface IHierarchyScope extends ng.IScope {
     expandCollapseArtifactsList:ExpandCollapseListData;
     expandCollapsePropertiesList:ExpandCollapseListData;
     selectedInstanceId:string;
+    componentInstancesMap:IComponentInstancesMap;
 
-    onModuleSelected(moduleId:string, selectedIndex:number):void;
+    onModuleSelected(module:Module, selectedIndex:number, componentInstanceId?:string):void;
     onModuleNameChanged(module:DisplayModule):void;
     updateHeatName():void;
     loadInstanceModules(instance:ComponentInstance):ng.IPromise<boolean>;
@@ -53,6 +58,7 @@ export class HierarchyViewModel {
         this.$scope.isLoading = false;
         this.$scope.expandCollapseArtifactsList = new ExpandCollapseListData();
         this.$scope.expandCollapsePropertiesList = new ExpandCollapseListData();
+        this.$scope.componentInstancesMap = <IComponentInstancesMap>{};
         this.initScopeMethods();
     }
 
@@ -65,7 +71,7 @@ export class HierarchyViewModel {
             this.$scope.expandCollapsePropertiesList.orderByField = "name";
         };
 
-        this.$scope.onModuleSelected = (moduleId:string, selectedIndex:number, componentInstanceId?:string):void => {
+        this.$scope.onModuleSelected = (module:Module, selectedIndex:number, componentInstanceId?:string):void => {
 
             let onSuccess = (module:DisplayModule) => {
                 console.log("Module Loaded: ", module);
@@ -79,15 +85,25 @@ export class HierarchyViewModel {
             };
 
             this.$scope.selectedIndex = selectedIndex;
-            if (!this.$scope.selectedModule || (this.$scope.selectedModule && this.$scope.selectedModule.uniqueId != moduleId)) {
+            if (!this.$scope.selectedModule || (this.$scope.selectedModule && this.$scope.selectedModule.uniqueId != module.uniqueId)) {
                 this.$scope.isLoading = true;
                 if (this.$scope.component.isService()) {
                     this.$scope.selectedInstanceId = componentInstanceId;
-                    this.$scope.component.getModuleInstanceForDisplay(componentInstanceId, moduleId).then(onSuccess, onFailed);
+                    this.$scope.component.getModuleInstanceForDisplay(componentInstanceId, module.uniqueId).then(onSuccess, onFailed);
                 } else {
-                    this.$scope.component.getModuleForDisplay(moduleId).then(onSuccess, onFailed);
+                    this.$scope.component.getModuleForDisplay(module.uniqueId).then(onSuccess, onFailed);
                 }
             }
+
+            const componentInstances: Array<ComponentInstance> = this.$scope.component.componentInstances || [];
+            (<string[]>_.values(module.members)).forEach((memberId) => {
+                if (!(memberId in this.$scope.componentInstancesMap)) {
+                    const compInstance = componentInstances.find((c) => c.uniqueId === memberId);
+                    if (compInstance) {
+                        this.$scope.componentInstancesMap[compInstance.uniqueId] = compInstance;
+                    }
+                }
+            });
         };
 
         this.$scope.updateHeatName = () => {
diff --git a/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view.html b/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view.html
index 3b7b5fc36a..7a3874ee08 100644
--- a/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view.html
+++ b/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view.html
@@ -11,8 +11,8 @@
                 <expand-collapse expanded-selector=".hierarchy-module-member-list.{{$index}}"
                                  class="general-tab-expand-collapse" is-close-on-init="true"
                                  data-tests-id="hierarchy-module-{{$index}}"
-                                 data-ng-repeat-start="module in component.groups">
-                    <div class="expand-collapse-title first-level" data-tests-id="hierarchy-module-{{$index}}-title" ng-class="{'selected': selectedIndex === $index}" data-ng-click="onModuleSelected(module.uniqueId, $index)">
+                                 data-ng-repeat-start="module in component.modules">
+                    <div class="expand-collapse-title first-level" data-tests-id="hierarchy-module-{{$index}}-title" ng-class="{'selected': selectedIndex === $index}" data-ng-click="onModuleSelected(module, $index)">
                         <div class="expand-collapse-title-icon"></div>
                         <span class="expand-collapse-title-text" data-ng-bind="module.name" tooltips
                               tooltip-content="{{module.name}}"></span>
@@ -21,8 +21,8 @@
                 </expand-collapse>
 
                 <div data-ng-repeat-end="" class="hierarchy-module-member-list {{$index}}">
-                    <div ng-repeat="(memberName, value) in ::module.members track by $index">
-                        <div class="expand-collapse-sub-title"  tooltips tooltip-content="{{memberName}}">{{memberName}}</div>
+                    <div ng-repeat="memberId in ::module.members track by $index">
+                        <div class="expand-collapse-sub-title"  tooltips tooltip-content="{{componentInstancesMap[memberId].name}}">{{componentInstancesMap[memberId].name}}</div>
                     </div>
                 </div>
             </perfect-scrollbar>
@@ -48,7 +48,7 @@
                                      class="general-tab-expand-collapse" is-close-on-init="true"
                                      data-tests-id="hierarchy-module-{{$index}}"
                                      data-ng-repeat-start="module in instance.groupInstances">
-                        <div class="expand-collapse-title second-level" data-tests-id="hierarchy-module-{{$index}}-title" ng-class="{'selected': selectedIndex === $index && selectedInstanceId === instance.uniqueId}" data-ng-click="onModuleSelected(module.uniqueId, $index, instance.uniqueId)">
+                        <div class="expand-collapse-title second-level" data-tests-id="hierarchy-module-{{$index}}-title" ng-class="{'selected': selectedIndex === $index && selectedInstanceId === instance.uniqueId}" data-ng-click="onModuleSelected(module, $index, instance.uniqueId)">
                             <div class="expand-collapse-title-icon"></div>
                         <span class="expand-collapse-title-text" data-ng-bind="module.name" tooltips tooltip-content="{{module.name}}"></span>
 
@@ -56,8 +56,8 @@
                     </expand-collapse>
 
                     <div data-ng-repeat-end="" class="outer-index-{{$parent.$index}} hierarchy-module-member-list {{$index}}">
-                        <div ng-repeat="(memberName, value) in ::module.members track by $index">
-                            <div class="expand-collapse-sub-title"  tooltips tooltip-content="{{memberName}}">{{memberName}}</div>
+                        <div ng-repeat="memberId in ::module.members track by $index">
+                            <div class="expand-collapse-sub-title"  tooltips tooltip-content="{{componentInstancesMap[memberId].name}}">{{componentInstancesMap[memberId].name}}</div>
                         </div>
                     </div>
                 </div>