catalog-ui/src/app/ng2/components/logic/outputs-table/outputs-table.component.html

   1 <!--
   2 ============LICENSE_START=======================================================
   3 *  Copyright (C) 2021 Nordix Foundation
   4 *  ================================================================================
   5 *  Licensed under the Apache License, Version 2.0 (the "License");
   6 *  you may not use this file except in compliance with the License.
   7 *  You may obtain a copy of the License at
   8 *
   9 *        http://www.apache.org/licenses/LICENSE-2.0
  10 *  Unless required by applicable law or agreed to in writing, software
  11 *  distributed under the License is distributed on an "AS IS" BASIS,
  12 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13 *  See the License for the specific language governing permissions and
  14 *  limitations under the License.
  15 *
  16 *  SPDX-License-Identifier: Apache-2.0
  17 *  ============LICENSE_END=========================================================
  18 -->
  19
  20 <div class="output-attributes-table">
  21   <loader [display]="isLoading" [size]="'large'" [relative]="true"></loader>
  22   <div class="table-header">
  23     <div class="table-cell col-output-attribute-name" (click)="sort('name')">Output Name
  24       <span *ngIf="sortBy === 'name'" class="table-header-sort-arrow"
  25             [ngClass]="{'down': reverse, 'up':!reverse}"></span>
  26     </div>
  27     <div class="table-cell col-output-attribute-instance" (click)="sort('instanceUniqueId')">From
  28       Instance
  29       <span *ngIf="sortBy === 'instanceUniqueId'" class="table-header-sort-arrow"
  30             [ngClass]="{'down': reverse, 'up':!reverse}"></span>
  31     </div>
  32     <div class="table-cell col-output-attribute-type" (click)="sort('type')">Type
  33       <span *ngIf="sortBy === 'type'" class="table-header-sort-arrow"
  34             [ngClass]="{'down': reverse, 'up':!reverse}">
  35             </span>
  36     </div>
  37     <div class="table-cell col-output-attribute-required" (click)="sort('required')"
  38          *ngIf="componentType == 'SERVICE'">
  39       <span tooltip="Required in Runtime" tooltipDelay="400">Req. in RT</span>
  40     </div>
  41     <div class="table-cell col-output-attribute-value">Value</div>
  42   </div>
  43   <div class="table-body">
  44     <div class="no-data" *ngIf="!outputs || !outputs.length">No data to display</div>
  45     <div>
  46       <div class="table-row" *ngFor="let output of outputs">
  47         <!-- attribute Name -->
  48         <div class="table-cell col-output-attribute-name">
  49           <div class="output-inner-cell-div">
  50             <span class="attribute-name" tooltip="{{output.name}}">{{output.name}}</span>
  51           </div>
  52           <span *ngIf="output.description"
  53                 class="attribute-description-icon sprite-new show-desc"
  54                 tooltip="{{output.description}}" tooltipDelay="0"></span>
  55         </div>
  56         <!-- From Instance -->
  57         <div class="table-cell col-output-attribute-instance">
  58           <div class="output-inner-cell-div"
  59                tooltip="{{instanceNamesMap[output.instanceUniqueId]?.name}}">
  60             <span>{{instanceNamesMap[output.instanceUniqueId]?.name}}</span>
  61           </div>
  62         </div>
  63         <!-- Type -->
  64         <div class="table-cell col-output-attribute-type">
  65           <div class="output-inner-cell-div" tooltip="{{output.type | contentAfterLastDot}}">
  66             <span>{{output.type | contentAfterLastDot}}</span>
  67           </div>
  68         </div>
  69         <!-- Required in runtime -->
  70         <div class="table-cell col-output-attribute-required" *ngIf="componentType == 'SERVICE'">
  71           <sdc-checkbox [(checked)]="output.required"
  72                         (checkedChange)="onRequiredChanged(output, $event)"
  73                         [disabled]="readonly"></sdc-checkbox>
  74         </div>
  75         <!-- Value -->
  76         <div class="table-cell col-output-attribute-value output-value-col"
  77              [class.inner-table-container]="!output.isSimpleType">
  78           <dynamic-element class="value-output"
  79                            *ngIf="checkInstanceFeAttributesMapIsFilled()"
  80                            pattern="null"
  81                            [value]="output.value"
  82                            [type]="'string'"
  83                            [name]="output.name"
  84                            (elementChanged)="onOutputChanged(output, $event)"
  85                            [readonly]="true"
  86                            [testId]="'output-' + output.name"
  87                            [constraints]="getConstraints(output)">
  88           </dynamic-element>
  89           <div class="delete-button-container">
  90             <span [attr.data-tests-id]="'delete-'+output.name" *ngIf="output.instanceUniqueId && !readonly" class="sprite-new delete-btn" (click)="openDeleteModal(output)"></span>
  91           </div>
  92         </div>
  93       </div>
  94     </div>
  95   </div>
  96 </div>