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