catalog-ui/src/app/ng2/pages/interface-definition/operation-creator/operation-creator-interface-definition.component.html

   1 <!--
   2  * ============LICENSE_START=======================================================
   3  * SDC
   4  * ================================================================================
   5  * Copyright (C) 2022 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-creator-interface-definition">
  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]="getSelectedDropdown(interfaceNames, operation.interfaceType)"
  33                     placeHolder="Select..."
  34                     [disabled]="readonly"
  35                     (changed)="onSelectInterface($event)"
  36                     [options]="interfaceNames">
  37                 </sdc-dropdown>
  38             </div>
  39
  40             <div class="form-item" *ngIf="!isInterfaceOther()">
  41                 <sdc-dropdown
  42                     #operationNamesDropdown
  43                     label="{{ 'OPERATION_NAME' | translate }}"
  44                     [required]="true"
  45                     testId="operation-name"
  46                     [selectedOption]="getSelectedDropdown(operationNames, operation.name)"
  47                     placeHolder="Select..."
  48                     [disabled]="readonly"
  49                     (changed)="onSelectOperationName($event)"
  50                     [options]="operationNames">
  51                 </sdc-dropdown>
  52             </div>
  53             <div class="form-item" *ngIf="isInterfaceOther()">
  54                 <sdc-input
  55                     label="{{ 'OPERATION_NAME' | translate }}"
  56                     [(value)]="operation.name"
  57                     testId="operationName"
  58                     (valueChange)="onChangeName()"
  59                     [disabled]="readonly">
  60                 </sdc-input>
  61             </div>
  62
  63         </div>
  64
  65         <div class="i-sdc-form-item sdc-input">
  66             <span class="sdc-input__label">{{ 'OPERATION_DESCRIPTION' | translate }}</span>
  67             <textarea
  68                 data-tests-id="operationDescription"
  69                 rows="2"
  70                 name="description"
  71                 [(ngModel)]="descriptionValue"
  72                 [ngClass]="{'disabled': readonly}">
  73             </textarea>
  74         </div>
  75
  76         <div class="side-by-side" *ngIf="enableWorkflowAssociation">
  77             <div class="form-item">
  78                 <sdc-dropdown
  79                     #workflowAssignmentDropdown
  80                     label="{{ 'OPERATION_WORKFLOW_ASSIGNMENT' | translate }}"
  81                     placeHolder="Select..."
  82                     testId="association-type"
  83                     [selectedOption]="toDropDownOption(workflowAssociationType)"
  84                     [options]="associationOptions"
  85                     (changed)="toggleAssociateWorkflow($event)"
  86                     [disabled]="readonly">
  87                 </sdc-dropdown>
  88             </div>
  89
  90             <div class="form-item" *ngIf="!isUsingExistingWF() && !isUsingExternalWF()"></div>
  91
  92             <div
  93                 *ngIf="isUsingExternalWF()"
  94                 class="form-item sdc-input">
  95                 <label class="sdc-input__label">{{ 'OPERATION_ARTIFACT' | translate }}</label>
  96                 <div class="i-sdc-form-item i-sdc-form-file-upload">
  97                     <span
  98                         class="i-sdc-form-file-name"
  99                         data-tests-id="artifactFilename">
 100                         {{ operation.artifactFileName }}
 101                     </span>
 102                     <div
 103                         *ngIf="operation.artifactFileName"
 104                         class="i-sdc-form-file-upload-x-btn"
 105                         data-tests-id="clearArtifact"
 106                         (click)="onChangeArtifactFile({ target: {} })"></div>
 107                     <label
 108                         class="i-sdc-form-file-upload-label"
 109                         [ngClass]="{'disabled': readonly}">
 110                         <input
 111                             type="file"
 112                             base-sixty-four-input
 113                             maxsize="10240"
 114                             data-tests-id="artifactUpload"
 115                             (change)="onChangeArtifactFile($event)"
 116                             (click)="$event.target.value = ''"
 117                         />
 118                         <div class="file-upload-browse-btn">Browse</div>
 119                     </label>
 120                 </div>
 121             </div>
 122
 123             <div class="form-item sdc-input" *ngIf="isUsingExistingWF()">
 124                 <label class="sdc-input__label required">{{ 'OPERATION_WORKFLOW' | translate }}
 125                     <span class="archive-warning" *ngIf="workflowIsOnline && archivedWorkflowId === operation.workflowId">({{ 'OPERATION_WORKFLOW_ARCHIVED' | translate }})</span>
 126                     <span class="no-workflow-warning" *ngIf="!workflowIsOnline">{{ 'OPERATION_NO_WORKFLOW_CONNECTION' | translate }}</span>
 127                     <span class="no-workflow-warning" *ngIf="workflowIsOnline && !workflows.length">{{ 'OPERATION_NO_WORKFLOW_ERROR' | translate }}</span>
 128                 </label>
 129                 <sdc-dropdown
 130                     placeHolder="Select..."
 131                     testId="associated-workflow"
 132                     [selectedOption]="getSelectedDropdown(workflows, operation.workflowId)"
 133                     [options]="workflows"
 134                     (changed)="onSelectWorkflow($event)"
 135                     [disabled]="readonly || !workflows.length || !workflowIsOnline">
 136                 </sdc-dropdown>
 137             </div>
 138
 139             <div class="form-item sdc-input" *ngIf="isUsingExistingWF()">
 140                 <sdc-dropdown
 141                     *ngIf="workflowIsOnline && workflows.length"
 142                     label="{{ 'OPERATION_WORKFLOW_VERSION' | translate }}"
 143                     testId="associated-workflow-version"
 144                     [selectedOption]="getSelectedDropdown(workflowVersions, operation.workflowVersionId)"
 145                     [options]="workflowVersions"
 146                     (changed)="changeWorkflowVersion($event)"
 147                     [disabled]="!operation.workflowId || archivedWorkflowId === operation.workflowId || readonly">
 148                 </sdc-dropdown>
 149             </div>
 150         </div>
 151
 152         <div class="separator-buttons">
 153             <tabs #propertyInputTabs tabStyle="round-tabs" (tabChanged)="tabChanged($event)" [hideIndicationOnTabChange]="true">
 154                 <tab tabTitle="Inputs"></tab>
 155                 <tab tabTitle="Outputs"></tab>
 156             </tabs>
 157             <a
 158                 class="add-param-link add-btn"
 159                 *ngIf="!isUsingExistingWF() && !readonly"
 160                 data-tests-id="addInputParameter"
 161                 [ngClass]="{'disabled':!canAdd()}"
 162                 (click)="addParam()">{{ currentTab === TYPE_INPUT ? 'Add Input' : 'Add Output' }}</a>
 163         </div>
 164
 165         <div class="generic-table">
 166             <div class="header-row table-row">
 167                 <span class="cell header-cell field-name">{{ 'OPERATION_PARAM_NAME' | translate }}</span>
 168                 <span class="cell header-cell field-type">{{ 'OPERATION_PARAM_TYPE' | translate }}</span>
 169                 <span class="cell header-cell field-property" *ngIf="currentTab == TYPE_INPUT">
 170                     {{ 'OPERATION_PARAM_PROPERTY' | translate }}
 171                     <span
 172                         *ngIf="!isUsingExistingWF()"
 173                         class="sprite-new info-icon"
 174                         tooltip="{{propertyTooltipText}}"
 175                         tooltipDelay="0">
 176                     </span>
 177                 </span>
 178                 <span class="cell header-cell field-mandatory" *ngIf="!isUsingExistingWF()">{{ 'OPERATION_PARAM_MANDATORY' | translate }}</span>
 179                 <span class="cell header-cell remove" *ngIf="!isUsingExistingWF() && !readonly">●●●</span>
 180             </div>
 181
 182             <div class="empty-msg data-row" *ngIf="tableParameters.length === 0">
 183                 <div>{{ 'EMPTY_PARAM_TABLE_HEADER' | translate }}</div>
 184                 <div *ngIf="isUsingExistingWF() && !operation.workflowVersionId">
 185                     <div *ngIf="workflows.length">
 186                         <span class="bold-message">{{ 'EMPTY_PARAM_TABLE_NO_SELECTED_WORKFLOW_1' | translate }}</span>
 187                         <span>{{ 'EMPTY_PARAM_TABLE_NO_SELECTED_WORKFLOW_2' | translate }}</span>
 188                     </div>
 189                     <div *ngIf="!workflows.length">
 190                         Only <span class="bold-message">certified</span> workflow versions can be assigned to an operation
 191                     </div>
 192                 </div>
 193             </div>
 194
 195             <param-row
 196                     *ngFor="let param of tableParameters"
 197                     class="data-row"
 198                     [isInputParam]="currentTab === TYPE_INPUT"
 199                     [isAssociateWorkflow]="isUsingExistingWF()"
 200                     [param]="param"
 201                     [inputProps]="inputProperties"
 202                     [capabilitiesProps]="componentCapabilities"
 203                     [operationOutputs]="operationOutputs"
 204                     [onRemoveParam]="onRemoveParam"
 205                     [readonly]="readonly"
 206                     [validityChanged]="validityChanged">
 207             </param-row>
 208         </div>
 209
 210     </form>
 211 </div>