1 files changed, 75 insertions, 56 deletions
diff --git a/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.html b/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.html
index bf36df0593..15fe65a784 100644
--- a/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.html
+++ b/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.html
@@ -19,73 +19,92 @@
 -->
 <div class="interface-definition">
   <loader [display]="isLoading" [size]="'large'" [relative]="true"></loader>
-  <div *ngIf="isInterfaceListEmpty()">
-    <div class="interface-empty-msg">
-      <div>{{ 'INTERFACE_DATA_EMPTY' | translate }}</div>
+  <div class="left-column">
+    <div *ngIf="isInterfaceListEmpty()">
+      <div class="interface-empty-msg">
+        <div>{{ 'INTERFACE_DATA_EMPTY' | translate }}</div>
+      </div>
     </div>
-  </div>
-  <div
-      class="top-add-btn add-btn"
-      [ngClass]="{'disabled': readonly}"
-      data-tests-id="add-operation"
-      (click)="onSelectInterfaceOperation(undefined, undefined)">
+    <div class="top-add-btn add-btn" [ngClass]="{'disabled': readonly}" *ngIf="!component.isService()" data-tests-id="add-operation" (click)="onSelectInterfaceOperation(undefined, undefined)">
     {{ 'INTERFACE_ADD_OPERATION' | translate }}
-  </div>
-  <div class="operation-list">
-    <div *ngIf="!isInterfaceListEmpty()">
-      <div class="expand-collapse" *ngIf="isOperationListEmpty()">
-        <a class="link"
-           [ngClass]="{'disabled': isAllExpanded()}"
-           (click)="collapseAll(false)">{{ 'INTERFACE_EXPAND_ALL' | translate }}
-        </a> |
-        <a class="link"
-           [ngClass]="{'disabled': isAllCollapsed()}"
-           (click)="collapseAll()">
-          {{ 'INTERFACE_COLLAPSE_ALL' | translate }}
-        </a>
-      </div>
-
-      <div class="interface-row" *ngFor="let interface1 of interfaces">
-        <div class="interface-accordion" (click)="interface1.toggleCollapse()">
-          <span
-              class="chevron-container"
-              [ngClass]="{'isCollapsed': interface1.isCollapsed}"
-              *ngIf="isOperationListEmpty()">
-              <svg-icon
-                  name="caret1-down-o"
-                  mode="primary"
-                  size="small">
-              </svg-icon>
-          </span>
-          <span class="interface-name">{{interface1.type}}</span>
+    </div>
+    <div class="operation-list">
+      <div *ngIf="!isInterfaceListEmpty()">
+        <div class="expand-collapse" *ngIf="isOperationListEmpty()">
+          <a class="link"
+            [ngClass]="{'disabled': isAllExpanded()}"
+            (click)="collapseAll(false)">{{ 'INTERFACE_EXPAND_ALL' | translate }}
+          </a> |
+          <a class="link"
+            [ngClass]="{'disabled': isAllCollapsed()}"
+            (click)="collapseAll()">
+            {{ 'INTERFACE_COLLAPSE_ALL' | translate }}
+          </a>
         </div>
 
-        <div class="generic-table" *ngIf="!interface1.isCollapsed && isOperationListEmpty()">
-          <div class="header-row table-row">
+        <div class="interface-row" *ngFor="let interface1 of interfaces">
+          <div class="interface-accordion" (click)="interface1.toggleCollapse()">
             <span
-                class="cell header-cell field-name header-name">
-                {{ 'INTERFACE_HEADER_NAME' | translate }}
+                class="chevron-container"
+                [ngClass]="{'isCollapsed': interface1.isCollapsed}"
+                *ngIf="isOperationListEmpty()">
+                <svg-icon
+                    name="caret1-down-o"
+                    mode="primary"
+                    size="small">
+                </svg-icon>
             </span>
-            <span class="cell header-cell field-description header-description">
-              {{ 'INTERFACE_HEADER_DESCRIPTION' | translate }}
-            </span>
-            <span class="cell field-delete" *ngIf="!readonly"><span class="delete-col-header"></span></span>
+            <span class="interface-name">{{interface1.type}}</span>
           </div>
-          <div class="data-row" *ngFor="let operation of interface1.operations">
-            <span class="cell field-name"
-                  (click)="onSelectInterfaceOperation(interface1, operation)">{{operation.name}}</span>
-            <span class="cell field-description" (click)="onSelectInterfaceOperation(interface1, operation)"
-                  [ngClass]="{'collapsed': operation.isCollapsed}">{{operation.getDescriptionEllipsis()}}
-              <span class="more-or-less link" (click)="operation.toggleCollapsed($event)">
-                  {{!operation.isEllipsis ? '' : operation.isCollapsed ? 'More' : 'Less'}}
+
+          <div class="generic-table" *ngIf="!interface1.isCollapsed && isOperationListEmpty()">
+            <div class="header-row table-row">
+              <span
+                  class="cell header-cell field-name header-name">
+                  {{ 'INTERFACE_HEADER_NAME' | translate }}
               </span>
-            </span>
-            <span class="cell field-delete" *ngIf="!readonly">
-              <button class="table-delete-btn" (click)="onRemoveOperation(operation)"></button>
-            </span>
+              <span class="cell header-cell field-description header-description">
+                {{ 'INTERFACE_HEADER_DESCRIPTION' | translate }}
+              </span>
+              <span class="cell field-delete" *ngIf="!readonly"><span class="delete-col-header"></span></span>
+            </div>
+            <div class="data-row" *ngFor="let operation of interface1.operations">
+              <span class="cell field-name"
+                    (click)="onSelectInterfaceOperation(interface1, operation)">{{operation.name}}</span>
+              <span class="cell field-description" (click)="onSelectInterfaceOperation(interface1, operation)"
+                    [ngClass]="{'collapsed': operation.isCollapsed}">{{operation.getDescriptionEllipsis()}}
+                <span class="more-or-less link" (click)="operation.toggleCollapsed($event)">
+                    {{!operation.isEllipsis ? '' : operation.isCollapsed ? 'More' : 'Less'}}
+                </span>
+              </span>
+              <span class="cell field-delete" *ngIf="!readonly">
+                <button class="table-delete-btn" (click)="onRemoveOperation(operation)"></button>
+              </span>
+            </div>
           </div>
         </div>
       </div>
     </div>
   </div>
+  <div class="right-column" *ngIf="component.isService()">
+    <div class="add-btn" [ngClass]="{'disabled': disableFlag}" data-tests-id="add-operation" (click)="onSelectInterfaceOperation(undefined, undefined)">
+      {{ 'INTERFACE_ADD_OPERATION' | translate }}
+    </div>
+    <tabs #hierarchyNavTabs tabStyle="simple-tabs" class="gray-border">
+        <tab tabTitle="Composition">
+            <div class="hierarchy-nav-container">
+                <loader [display]="loadingInstances" [size]="'medium'" [relative]="true" [loaderDelay]="500"></loader>
+                <div class="hierarchy-header white-sub-header">
+                    <span tooltip="{{component.name}}">{{component.name}}</span>
+                </div>
+                <div *ngIf="!instancesNavigationData || instancesNavigationData.length === 0">No data to display</div>
+                <hierarchy-navigation class="hierarchy-nav"
+                        (updateSelected)="onInstanceSelectedUpdate($event)"
+                        [displayData]="instancesNavigationData"
+                        [selectedItem]="selectedInstanceData?.uniqueId"
+                        [displayOptions]="hierarchyInstancesDisplayOptions"></hierarchy-navigation>
+            </div>
+        </tab>
+    </tabs>
+  </div>
 </div>