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="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="group-with-border content-row">
  54             <label class="occurrences-label"> {{ 'INTERFACE_OPERATION_IMPLEMENTATION' | translate}}</label>
  55             <div class="form-item">
  56                 <checkbox [label]="'Add Artifact To Implementation'"
  57                           [(checked)]="enableAddArtifactImplementation"
  58                           (checkedChange)="onMarkToAddArtifactToImplementation($event)">
  59                 </checkbox>
  60             </div>
  61             <div class="form-item" *ngIf="!enableAddArtifactImplementation">
  62                 <sdc-input
  63                     label="{{'INTERFACE_OPERATION_IMPLEMENTATION_NAME' | translate}}"
  64                     testId="interface-operation-implementation-name"
  65                     [(value)]="artifactName"
  66                     (valueChange)="onImplementationNameChange($event)">
  67                 </sdc-input>
  68             </div>
  69
  70             <div class="side-by-side" *ngIf="enableAddArtifactImplementation">
  71                 <div class="form-item" *ngIf="toscaArtifactTypes">
  72                     <sdc-dropdown
  73                         label="{{ 'TOSCA_ARTIFACT_TYPE' | translate }}"
  74                         testId="selectToscaArtifactType"
  75                         [required]="true"
  76                         [selectedOption]="toscaArtifactTypeSelected"
  77                         placeHolder="{{toscaArtifactTypeSelected != undefined ? toscaArtifactTypeSelected : 'Select...'}}"
  78                         (changed)="onSelectToscaArtifactType($event)"
  79                         [options]="toscaArtifactTypes">
  80                     </sdc-dropdown>
  81                 </div>
  82                 <div class="form-item" *ngIf="toscaArtifactTypeSelected && enableAddArtifactImplementation">
  83                     <sdc-input
  84                         label="{{ 'INTERFACE_OPERATION_IMPLEMENTATION_FILE' | translate }}"
  85                         data-tests-id="artifactFile"
  86                         [(value)]="artifactName"
  87                         [required]="true"
  88                         (valueChange)="onArtifactFileChange($event)">
  89                     </sdc-input>
  90                 </div>
  91                 <div class="form-item">
  92                     <sdc-input
  93                         label="{{ 'ARTIFACT_VERSION' | translate }}"
  94                         data-tests-id="artifactVersion"
  95                         [(value)]="artifactVersion"
  96                         (valueChange)="onArtifactVersionChange($event)">
  97                     </sdc-input>
  98                 </div>
  99             </div>
 100             <div class="form-item" *ngIf="toscaArtifactTypeSelected && enableAddArtifactImplementation">
 101                 <label class="sdc-input__label">{{ 'ENTITY_VIEWER_PROPERTIES_TAB' | translate }}</label>
 102                 <div class="generic-table">
 103                     <div class="header-row table-row">
 104                         <span class="cell header-cell field-input-name">{{ 'IMPLEMENTATION_ARTIFACT_PROPERTY_NAME' | translate }}</span>
 105                         <span class="cell header-cell field-input-type">{{ 'IMPLEMENTATION_ARTIFACT_PROPERTY_TYPE' | translate }}</span>
 106                         <span class="cell header-cell field-input-value">{{ 'IMPLEMENTATION_ARTIFACT_PROPERTY_VALUE' | translate }}</span>
 107                     </div>
 108
 109                     <div class="empty-msg data-row" *ngIf="!toscaArtifactTypeProperties.length">
 110                         <div>{{ 'EMPTY_PARAM_TABLE_HEADER' | translate }}</div>
 111                     </div>
 112                     <property-param-row
 113                         *ngFor="let property of toscaArtifactTypeProperties"
 114                         class="data-row"
 115                         [artifactProperty]="property"
 116                         [isPropertyValueValid]="propertyValueValidation">
 117                     </property-param-row>
 118                 </div>
 119             </div>
 120         </div>
 121
 122         <div class="separator-buttons">
 123             <tab tabTitle="Inputs"></tab>
 124             <a class="add-param-link add-btn"
 125                [ngClass]="{'disabled': readonly}"
 126                (click)="onAddInput()">{{'OPERATION_ADD_INPUT' | translate}}
 127             </a>
 128         </div>
 129
 130         <div class="generic-table">
 131             <div class="header-row table-row">
 132                 <span class="cell header-cell field-input-name">{{ 'OPERATION_PARAM_NAME' | translate }}</span>
 133                 <span class="cell header-cell field-input-value">{{ 'OPERATION_INPUT_VALUE' | translate }}</span>
 134                 <span class="cell header-cell remove">●●●</span>
 135             </div>
 136             <div class="empty-msg data-row" *ngIf="!inputs.length">
 137                 <div>{{ 'OPERATION_INPUT_EMPTY' | translate }}</div>
 138             </div>
 139             <input-param-row
 140                 *ngFor="let inputParameter of inputs"
 141                 class="data-row"
 142                 [input]="inputParameter"
 143                 [onRemoveInput]="onRemoveInput"
 144                 [validityChanged]="validityChanged">
 145             </input-param-row>
 146         </div>
 147
 148     </form>
 149 </div>