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 | 85 |
1 files changed, 85 insertions, 0 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 new file mode 100644 index 0000000000..25ccf111a1 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.html @@ -0,0 +1,85 @@ +<!-- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2022 Nordix Foundation. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= +--> +<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> + </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 interface of interfaces"> + <div class="interface-accordion" (click)="interface.toggleCollapse()"> + <span + class="chevron-container" + [ngClass]="{'isCollapsed': interface.isCollapsed}" + *ngIf="isOperationListEmpty()"> + <svg-icon + name="caret1-down-o" + mode="primary" + size="small"> + </svg-icon> + </span> + <span class="interface-name">{{interface.type}}</span> + </div> + + <div class="generic-table" *ngIf="!interface.isCollapsed && isOperationListEmpty()"> + <div class="header-row table-row"> + <span + class="cell header-cell field-name header-name"> + {{ 'INTERFACE_HEADER_NAME' | translate }} + </span> + <span class="cell header-cell field-description header-description"> + {{ 'INTERFACE_HEADER_DESCRIPTION' | translate }} + </span> + </div> + + <div class="data-row" *ngFor="let operation of interface.operations" + (click)="onSelectInterfaceOperation(interface, operation)"> + <span + class="cell field-name"> + {{operation.name}} + </span> + <span class="cell field-description" + [ngClass]="{'collapsed': operation.isCollapsed}"> + {{operation.getDescriptionEllipsis()}} + <span class="more-or-less link" (click)="operation.toggleCollapsed($event)"> + {{!operation.isEllipsis ? '' : operation.isCollapsed ? 'More' : 'Less'}} + </span> + </span> + </div> + </div> + </div> + </div> + </div> +</div> |