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

   1 <!--
   2   ~ Copyright © 2016-2018 European Support Limited
   3   ~
   4   ~ Licensed under the Apache License, Version 2.0 (the "License");
   5   ~ you may not use this file except in compliance with the License.
   6   ~ You may obtain a copy of the License at
   7   ~
   8   ~      http://www.apache.org/licenses/LICENSE-2.0
   9   ~
  10   ~ Unless required by applicable law or agreed to in writing, software
  11   ~ distributed under the License is distributed on an "AS IS" BASIS,
  12   ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13   ~ See the License for the specific language governing permissions and
  14   ~ limitations under the License.
  15   -->
  16
  17 <div class="operation-creator">
  18     <loader [display]="isLoading" [size]="'large'" [relative]="true"></loader>
  19
  20     <form class="w-sdc-form">
  21
  22         <div class="side-by-side">
  23             <div class="form-item">
  24                 <sdc-dropdown
  25                     label="{{ 'OPERATION_INTERFACE_TYPE' | translate }}"
  26                     [required]="true"
  27                     testId="interface-name"
  28                     [selectedOption]="getSelectedDropdown(interfaceNames, operation.interfaceType)"
  29                     placeHolder="Select..."
  30                     [disabled]="readonly"
  31                     (changed)="onSelectInterface($event)"
  32                     [options]="interfaceNames">
  33                 </sdc-dropdown>
  34             </div>
  35
  36             <div class="form-item" *ngIf="!isInterfaceOther()">
  37                 <sdc-dropdown
  38                     #operationNamesDropdown
  39                     label="{{ 'OPERATION_NAME' | translate }}"
  40                     [required]="true"
  41                     testId="operation-name"
  42                     [selectedOption]="getSelectedDropdown(operationNames, operation.name)"
  43                     placeHolder="Select..."
  44                     [disabled]="readonly"
  45                     (changed)="onSelectOperationName($event)"
  46                     [options]="operationNames">
  47                 </sdc-dropdown>
  48             </div>
  49             <div class="form-item" *ngIf="isInterfaceOther()">
  50                 <sdc-input
  51                     label="{{ 'OPERATION_NAME' | translate }}"
  52                     [(value)]="operation.name"
  53                     testId="operationName"
  54                     (valueChange)="onChangeName()"
  55                     [disabled]="readonly">
  56                 </sdc-input>
  57             </div>
  58
  59         </div>
  60
  61         <div class="i-sdc-form-item sdc-input">
  62             <span class="sdc-input__label">{{ 'OPERATION_DESCRIPTION' | translate }}</span>
  63             <textarea
  64                 data-tests-id="operationDescription"
  65                 rows="2"
  66                 name="description"
  67                 [(ngModel)]="descriptionValue"
  68                 [ngClass]="{'disabled': readonly}">
  69             </textarea>
  70         </div>
  71
  72         <div class="side-by-side" *ngIf="enableWorkflowAssociation">
  73             <div class="form-item">
  74                 <sdc-dropdown
  75                     #workflowAssignmentDropdown
  76                     label="{{ 'OPERATION_WORKFLOW_ASSIGNMENT' | translate }}"
  77                     placeHolder="Select..."
  78                     testId="association-type"
  79                     [selectedOption]="toDropDownOption(workflowAssociationType)"
  80                     [options]="associationOptions"
  81                     (changed)="toggleAssociateWorkflow($event)"
  82                     [disabled]="readonly">
  83                 </sdc-dropdown>
  84             </div>
  85
  86             <div class="form-item" *ngIf="!isUsingExistingWF() && !isUsingExternalWF()"></div>
  87
  88             <div
  89                 *ngIf="isUsingExternalWF()"
  90                 class="form-item sdc-input">
  91                 <label class="sdc-input__label">{{ 'OPERATION_ARTIFACT' | translate }}</label>
  92                 <div class="i-sdc-form-item i-sdc-form-file-upload">
  93                     <span
  94                         class="i-sdc-form-file-name"
  95                         data-tests-id="artifactFilename">
  96                         {{ operation.artifactFileName }}
  97                     </span>
  98                     <div
  99                         *ngIf="operation.artifactFileName"
 100                         class="i-sdc-form-file-upload-x-btn"
 101                         data-tests-id="clearArtifact"
 102                         (click)="onChangeArtifactFile({ target: {} })"></div>
 103                     <label
 104                         class="i-sdc-form-file-upload-label"
 105                         [ngClass]="{'disabled': readonly}">
 106                         <input
 107                             type="file"
 108                             base-sixty-four-input
 109                             maxsize="10240"
 110                             data-tests-id="artifactUpload"
 111                             (change)="onChangeArtifactFile($event)"
 112                             (click)="$event.target.value = ''"
 113                         />
 114                         <div class="file-upload-browse-btn">Browse</div>
 115                     </label>
 116                 </div>
 117             </div>
 118
 119             <div class="form-item sdc-input" *ngIf="isUsingExistingWF()">
 120                 <label class="sdc-input__label required">{{ 'OPERATION_WORKFLOW' | translate }}
 121                     <span class="archive-warning" *ngIf="workflowIsOnline && archivedWorkflowId === operation.workflowId">({{ 'OPERATION_WORKFLOW_ARCHIVED' | translate }})</span>
 122                     <span class="no-workflow-warning" *ngIf="!workflowIsOnline">{{ 'OPERATION_NO_WORKFLOW_CONNECTION' | translate }}</span>
 123                     <span class="no-workflow-warning" *ngIf="workflowIsOnline && !workflows.length">{{ 'OPERATION_NO_WORKFLOW_ERROR' | translate }}</span>
 124                 </label>
 125                 <sdc-dropdown
 126                     placeHolder="Select..."
 127                     testId="associated-workflow"
 128                     [selectedOption]="getSelectedDropdown(workflows, operation.workflowId)"
 129                     [options]="workflows"
 130                     (changed)="onSelectWorkflow($event)"
 131                     [disabled]="readonly || !workflows.length || !workflowIsOnline">
 132                 </sdc-dropdown>
 133             </div>
 134
 135             <div class="form-item sdc-input" *ngIf="isUsingExistingWF()">
 136                 <sdc-dropdown
 137                     *ngIf="workflowIsOnline && workflows.length"
 138                     label="{{ 'OPERATION_WORKFLOW_VERSION' | translate }}"
 139                     testId="associated-workflow-version"
 140                     [selectedOption]="getSelectedDropdown(workflowVersions, operation.workflowVersionId)"
 141                     [options]="workflowVersions"
 142                     (changed)="changeWorkflowVersion($event)"
 143                     [disabled]="!operation.workflowId || archivedWorkflowId === operation.workflowId || readonly">
 144                 </sdc-dropdown>
 145             </div>
 146         </div>
 147
 148         <div class="separator-buttons">
 149             <tabs #propertyInputTabs tabStyle="round-tabs" (tabChanged)="tabChanged($event)" [hideIndicationOnTabChange]="true">
 150                 <tab tabTitle="Inputs"></tab>
 151                 <tab tabTitle="Outputs"></tab>
 152             </tabs>
 153             <a
 154                 class="add-param-link add-btn"
 155                 *ngIf="!isUsingExistingWF() && !readonly"
 156                 data-tests-id="addInputParameter"
 157                 [ngClass]="{'disabled':!canAdd()}"
 158                 (click)="addParam()">{{ currentTab === TYPE_INPUT ? 'Add Input' : 'Add Output' }}</a>
 159         </div>
 160
 161         <div class="generic-table">
 162             <div class="header-row table-row">
 163                 <span class="cell header-cell field-name">{{ 'OPERATION_PARAM_NAME' | translate }}</span>
 164                 <span class="cell header-cell field-type">{{ 'OPERATION_PARAM_TYPE' | translate }}</span>
 165                 <span class="cell header-cell field-property" *ngIf="currentTab == TYPE_INPUT">
 166                     {{ 'OPERATION_PARAM_PROPERTY' | translate }}
 167                     <span
 168                         *ngIf="!isUsingExistingWF()"
 169                         class="sprite-new info-icon"
 170                         tooltip="{{propertyTooltipText}}"
 171                         tooltipDelay="0">
 172                     </span>
 173                 </span>
 174                 <span class="cell header-cell field-mandatory" *ngIf="!isUsingExistingWF()">{{ 'OPERATION_PARAM_MANDATORY' | translate }}</span>
 175                 <span class="cell header-cell remove" *ngIf="!isUsingExistingWF() && !readonly">●●●</span>
 176             </div>
 177
 178             <div class="empty-msg data-row" *ngIf="tableParameters.length === 0">
 179                 <div>{{ 'EMPTY_PARAM_TABLE_HEADER' | translate }}</div>
 180                 <div *ngIf="isUsingExistingWF() && !operation.workflowVersionId">
 181                     <div *ngIf="workflows.length">
 182                         <span class="bold-message">{{ 'EMPTY_PARAM_TABLE_NO_SELECTED_WORKFLOW_1' | translate }}</span>
 183                         <span>{{ 'EMPTY_PARAM_TABLE_NO_SELECTED_WORKFLOW_2' | translate }}</span>
 184                     </div>
 185                     <div *ngIf="!workflows.length">
 186                         Only <span class="bold-message">certified</span> workflow versions can be assigned to an operation
 187                     </div>
 188                 </div>
 189             </div>
 190
 191             <param-row
 192                     *ngFor="let param of tableParameters"
 193                     class="data-row"
 194                     [isInputParam]="currentTab === TYPE_INPUT"
 195                     [isAssociateWorkflow]="isUsingExistingWF()"
 196                     [param]="param"
 197                     [inputProps]="inputProperties"
 198                     [capabilitiesProps]="componentCapabilities"
 199                     [operationOutputs]="operationOutputs"
 200                     [onRemoveParam]="onRemoveParam"
 201                     [readonly]="readonly"
 202                     [validityChanged]="validityChanged">
 203             </param-row>
 204         </div>
 205
 206     </form>
 207 </div>