diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.html')
-rw-r--r-- | catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.html | 131 |
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> |