catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.html

   1 <!--
   2  * ============LICENSE_START=======================================================
   3  * SDC
   4  * ================================================================================
   5  * Copyright (C) 2022 Nordix Foundation. All rights reserved.
   6  * ================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *      http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ============LICENSE_END=========================================================
  19 -->
  20 <div class="interface-definition">
  21   <loader [display]="isLoading" [size]="'large'" [relative]="true"></loader>
  22   <div class="left-column">
  23     <div *ngIf="isInterfaceListEmpty()">
  24       <div class="interface-empty-msg">
  25         <div>{{ 'INTERFACE_DATA_EMPTY' | translate }}</div>
  26       </div>
  27     </div>
  28     <div class="top-add-btn add-btn" [ngClass]="{'disabled': readonly}" *ngIf="!component.isService()" data-tests-id="add-operation" (click)="onSelectInterfaceOperation(undefined, undefined)">
  29     {{ 'INTERFACE_ADD_OPERATION' | translate }}
  30     </div>
  31     <div class="operation-list">
  32       <div *ngIf="!isInterfaceListEmpty()">
  33         <div class="expand-collapse" *ngIf="isOperationListEmpty()">
  34           <a class="link"
  35             [ngClass]="{'disabled': isAllExpanded()}"
  36             (click)="collapseAll(false)">{{ 'INTERFACE_EXPAND_ALL' | translate }}
  37           </a> |
  38           <a class="link"
  39             [ngClass]="{'disabled': isAllCollapsed()}"
  40             (click)="collapseAll()">
  41             {{ 'INTERFACE_COLLAPSE_ALL' | translate }}
  42           </a>
  43         </div>
  44
  45         <div class="interface-row" *ngFor="let interface1 of interfaces">
  46           <div class="interface-accordion" (click)="interface1.toggleCollapse()">
  47             <span
  48                 class="chevron-container"
  49                 [ngClass]="{'isCollapsed': interface1.isCollapsed}"
  50                 *ngIf="isOperationListEmpty()">
  51                 <svg-icon
  52                     name="caret1-down-o"
  53                     mode="primary"
  54                     size="small">
  55                 </svg-icon>
  56             </span>
  57             <span class="interface-name">{{interface1.type}}</span>
  58           </div>
  59
  60           <div class="generic-table" *ngIf="!interface1.isCollapsed && isOperationListEmpty()">
  61             <div class="header-row table-row">
  62               <span
  63                   class="cell header-cell field-name header-name">
  64                   {{ 'INTERFACE_HEADER_NAME' | translate }}
  65               </span>
  66               <span class="cell header-cell field-description header-description">
  67                 {{ 'INTERFACE_HEADER_DESCRIPTION' | translate }}
  68               </span>
  69               <span class="cell field-delete" *ngIf="!readonly"><span class="delete-col-header"></span></span>
  70             </div>
  71             <div class="data-row" *ngFor="let operation of interface1.operations">
  72               <span class="cell field-name"
  73                     (click)="onSelectInterfaceOperation(interface1, operation)">{{operation.name}}</span>
  74               <span class="cell field-description" (click)="onSelectInterfaceOperation(interface1, operation)"
  75                     [ngClass]="{'collapsed': operation.isCollapsed}">{{operation.getDescriptionEllipsis()}}
  76                 <span class="more-or-less link" (click)="operation.toggleCollapsed($event)">
  77                     {{!operation.isEllipsis ? '' : operation.isCollapsed ? 'More' : 'Less'}}
  78                 </span>
  79               </span>
  80               <span class="cell field-delete" *ngIf="!readonly">
  81                 <button class="table-delete-btn" (click)="onRemoveOperation(operation)"></button>
  82               </span>
  83             </div>
  84           </div>
  85         </div>
  86       </div>
  87     </div>
  88   </div>
  89   <div class="right-column" *ngIf="component.isService()">
  90     <div class="add-btn" [ngClass]="{'disabled': disableFlag}" data-tests-id="add-operation" (click)="onSelectInterfaceOperation(undefined, undefined)">
  91       {{ 'INTERFACE_ADD_OPERATION' | translate }}
  92     </div>
  93     <tabs #hierarchyNavTabs tabStyle="simple-tabs" class="gray-border">
  94         <tab tabTitle="Composition">
  95             <div class="hierarchy-nav-container">
  96                 <loader [display]="loadingInstances" [size]="'medium'" [relative]="true" [loaderDelay]="500"></loader>
  97                 <div class="hierarchy-header white-sub-header">
  98                     <span tooltip="{{component.name}}">{{component.name}}</span>
  99                 </div>
 100                 <div *ngIf="!instancesNavigationData || instancesNavigationData.length === 0">No data to display</div>
 101                 <hierarchy-navigation class="hierarchy-nav"
 102                         (updateSelected)="onInstanceSelectedUpdate($event)"
 103                         [displayData]="instancesNavigationData"
 104                         [selectedItem]="selectedInstanceData?.uniqueId"
 105                         [displayOptions]="hierarchyInstancesDisplayOptions"></hierarchy-navigation>
 106             </div>
 107         </tab>
 108     </tabs>
 109   </div>
 110 </div>