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