catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html

   1 <!--
   2  * ============LICENSE_START=======================================================
   3  * SDC
   4  * ================================================================================
   5  * Copyright (C) 2021 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
  21 <div class="operation-handler">
  22     <loader [display]="isLoading" [size]="'large'" [relative]="true"></loader>
  23
  24     <form class="w-sdc-form">
  25
  26         <div class="side-by-side">
  27             <div class="form-item">
  28                 <sdc-input
  29                     label="{{ 'OPERATION_INTERFACE_TYPE' | translate }}"
  30                     [(value)]="interfaceType"
  31                     [disabled]="true">
  32                 </sdc-input>
  33             </div>
  34
  35             <div class="form-item">
  36                 <sdc-input
  37                     label="{{ 'OPERATION_NAME' | translate }}"
  38                     [(value)]="operationToUpdate.name"
  39                     [disabled]="true">
  40                 </sdc-input>
  41             </div>
  42         </div>
  43
  44         <div class="i-sdc-form-item">
  45             <sdc-input
  46                 label="{{'OPERATION_DESCRIPTION' | translate}}"
  47                 [(value)]="operationToUpdate.description"
  48                 testId="interface-operation-description"
  49                 (valueChange)="onDescriptionChange($event)">
  50             </sdc-input>
  51         </div>
  52
  53         <div class="i-sdc-form-item">
  54             <sdc-input
  55                 label="{{'IMPLEMENTATION_NAME' | translate}}"
  56                 testId="interface-operation-implementation-name"
  57                 [(value)]="operationToUpdate.implementation.artifactName">
  58             </sdc-input>
  59         </div>
  60
  61         <div class="separator-buttons">
  62             <tab tabTitle="Inputs"></tab>
  63             <a class="add-param-link add-btn"
  64                [ngClass]="{'disabled': readonly}"
  65                (click)="onAddInput()">{{'OPERATION_ADD_INPUT' | translate}}
  66             </a>
  67         </div>
  68
  69         <div class="generic-table">
  70             <div class="header-row table-row">
  71                 <span class="cell header-cell field-input-name">{{ 'OPERATION_PARAM_NAME' | translate }}</span>
  72                 <span class="cell header-cell field-input-value">{{ 'OPERATION_INPUT_VALUE' | translate }}</span>
  73                 <span class="cell header-cell remove">●●●</span>
  74             </div>
  75             <div class="empty-msg data-row" *ngIf="!inputs.length">
  76                 <div>{{ 'OPERATION_INPUT_EMPTY' | translate }}</div>
  77             </div>
  78             <input-param-row
  79                 *ngFor="let inputParameter of inputs"
  80                 class="data-row"
  81                 [input]="inputParameter"
  82                 [onRemoveInput]="onRemoveInput"
  83                 [validityChanged]="validityChanged">
  84             </input-param-row>
  85         </div>
  86
  87     </form>
  88 </div>