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-dropdown
  29                     label="{{ 'OPERATION_INTERFACE_TYPE' | translate }}"
  30                     [required]="true"
  31                     [testId]="'interface-name'"
  32                     [selectedOption]="selectedInterfaceType"
  33                     [placeHolder]="'Select...'"
  34                     [disabled]="isViewOnly || isEdit"
  35                     (changed)="onSelectInterface($event)"
  36                     [options]="interfaceTypeOptions">
  37                 </sdc-dropdown>
  38             </div>
  39
  40             <div class="form-item">
  41                 <sdc-dropdown
  42                     #interfaceOperationDropDown
  43                     label="{{ 'OPERATION_NAME' | translate }}"
  44                     [required]="true"
  45                     [testId]="'operation-name'"
  46                     [selectedOption]="selectedInterfaceOperation"
  47                     [placeHolder]="'Select...'"
  48                     [disabled]="isViewOnly || isEdit"
  49                     (changed)="onSelectOperation($event)"
  50                     [options]="interfaceOperationOptions">
  51                 </sdc-dropdown>
  52             </div>
  53         </div>
  54
  55         <div class="form-item">
  56             <sdc-input
  57                 label="{{'OPERATION_DESCRIPTION' | translate}}"
  58                 [(value)]="operationToUpdate.description"
  59                 testId="interface-operation-description"
  60                 (valueChange)="onDescriptionChange($event)"
  61                 [disabled]=isViewOnly>
  62             </sdc-input>
  63         </div>
  64
  65         <div class="group-with-border content-row">
  66             <label class="occurrences-label"> {{ 'INTERFACE_OPERATION_IMPLEMENTATION' | translate}}</label>
  67             <div class="form-item">
  68                 <sdc-input
  69                     label="{{'INTERFACE_OPERATION_IMPLEMENTATION_ARTIFACT_URI' | translate}}"
  70                     testId="interface-operation-implementation-name"
  71                     [(value)]="artifactName"
  72                     (valueChange)="onURIChange($event)"
  73                     [disabled]=isViewOnly>
  74                 </sdc-input>
  75             </div>
  76             <br>
  77             <div class="form-item">
  78                 <checkbox [label]="'ADD_ARTIFACT_DETAILS' | translate"
  79                     [(checked)]="enableAddArtifactImplementation"
  80                     (checkedChange)="onMarkToAddArtifactToImplementation($event)"
  81                     [disabled]=isViewOnly>
  82                 </checkbox>
  83             </div>
  84             <div class="form-item" *ngIf="toscaArtifactTypes && enableAddArtifactImplementation">
  85                 <br>
  86                 <sdc-dropdown
  87                     label="{{ 'TOSCA_ARTIFACT_TYPE' | translate }}"
  88                     testId="selectToscaArtifactType"
  89                     [required]="true"
  90                     [selectedOption]="toscaArtifactTypeSelected"
  91                     placeHolder="{{toscaArtifactTypeSelected != undefined ? toscaArtifactTypeSelected : 'Select...'}}"
  92                     (changed)="onSelectToscaArtifactType($event)"
  93                     [options]="toscaArtifactTypes"
  94                     [disabled]=isViewOnly>
  95                 </sdc-dropdown>
  96             </div>
  97             <div class="form-item" *ngIf="enableAddArtifactImplementation">
  98                 <sdc-input
  99                     label="{{ 'ARTIFACT_VERSION' | translate }}"
 100                     data-tests-id="artifactVersion"
 101                     [(value)]="artifactVersion"
 102                     (valueChange)="onArtifactVersionChange($event)"
 103                     [disabled]=isViewOnly>
 104                 </sdc-input>
 105             </div>
 106             <div class="form-item" *ngIf="toscaArtifactTypeSelected && enableAddArtifactImplementation">
 107                 <br>
 108                 <input-list
 109                     *ngIf="artifactTypeProperties && dataTypeMap"
 110                     [title]="'ARTIFACT_PROPERTY_LIST_TITLE' | translate"
 111                     [emptyMessage]="'ARTIFACT_PROPERTY_LIST_EMPTY' | translate"
 112                     [inputs]="artifactTypeProperties"
 113                     [dataTypeMap]="dataTypeMap"
 114                     [isViewOnly]="isViewOnly"
 115                     [showToscaFunctionOption]="true"
 116                     [componentInstanceMap]="componentInstanceMap"
 117                     [allowDeletion]="false"
 118                     [customToscaFunctions]="customToscaFunctions"
 119                     (onInputsValidityChange)="implementationPropsValidityChange($event)"
 120                     (onValueChange)="onArtifactPropertyValueChange($event)"
 121                 >
 122                 </input-list>
 123             </div>
 124         </div>
 125         <div class="group-with-border content-row" *ngIf="dataTypeMap">
 126             <input-list
 127                 [title]="'INPUT_LIST_TITLE' | translate"
 128                 [emptyMessage]="'INPUT_LIST_EMPTY' | translate"
 129                 [inputs]="inputs"
 130                 [dataTypeMap]="dataTypeMap"
 131                 [isViewOnly]="isViewOnly"
 132                 [allowDeletion]="true"
 133                 [componentInstanceMap]="componentInstanceMap"
 134                 [showToscaFunctionOption]="true"
 135                 (onValueChange)="onInputValueChange($event)"
 136                 (onDelete)="onInputDelete($event)"
 137             >
 138             </input-list>
 139         </div>
 140         <div class="group-with-border content-row">
 141             <app-add-input
 142                 [dataTypeMap]="dataTypeMap$"
 143                 [isView]="isViewOnly"
 144                 [existingInputNames]="collectInputNames()"
 145                 (onAddInput)="onAddInput($event)"
 146             >
 147             </app-add-input>
 148         </div>
 149         <div class="group-with-border content-row">
 150             <label class="sdc-timeout-label">Timeout : </label>
 151             <input class="sdc-timeout" type="number" [formControl]="timeoutValue" oninput="this.value = this.valueAsNumber" [ngClass]="{'disabled':isViewOnly}" (change)="timeoutConversion()"/>
 152             <select class="sdc-timeout-select" [formControl]="timeoutType" (change)="timeoutConversion()" [ngClass]="{'disabled':isViewOnly}">
 153                 <option value="sec">Seconds</option>
 154                 <option value="hour">Hours</option>
 155                 <option value="day">Days</option>
 156               </select>
 157         </div>
 158     </form>
 159 </div>