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="i-sdc-form-item">
  24                 <label class="i-sdc-form-label" [ngClass]="{'required': !isEditMode}">Operation Name</label>
  25                 <input
  26                     type="text"
  27                     name="type"
  28                     data-tests-id="operationType"
  29                     [(ngModel)]="operation.operationType"
  30                     [attr.maxLength]="200"
  31                     [ngClass]="{'disabled':isEditMode}" />
  32             </div>
  33
  34             <div class="i-sdc-form-item">
  35                 <label class="i-sdc-form-label">Description</label>
  36                 <input
  37                     type="text"
  38                     data-tests-id="operationDescription"
  39                     name="description"
  40                     [ngClass]="{'disabled': readonly}"
  41                     [(ngModel)]="operation.description"
  42                     [attr.maxLength]="200" />
  43             </div>
  44         </div>
  45
  46         <div class="side-by-side association-options">
  47             <div class="i-sdc-form-item" *ngIf="enableWorkflowAssociation">
  48                 <label class="i-sdc-form-label">Workflow Assignment</label>
  49                 <ui-element-dropdown
  50                     data-tests-id="association-type"
  51                     [(value)]="operation.workflowAssociationType"
  52                     [values]="associationOptions"
  53                     (valueChange)="toggleAssociateWorkflow()"
  54                     [readonly]="readonly">
  55                 </ui-element-dropdown>
  56             </div>
  57             <div></div>
  58         </div>
  59
  60         <div class="side-by-side" *ngIf="isUsingExistingWF()">
  61             <div class="i-sdc-form-item">
  62                 <label class="i-sdc-form-label required">Workflow</label>
  63                 <ui-element-dropdown
  64                     data-tests-id="associated-workflow"
  65                     [readonly]="readonly"
  66                     [values]="workflows"
  67                     [(value)]="operation.workflowId"
  68                     (valueChange)="onSelectWorkflow()">
  69                 </ui-element-dropdown>
  70             </div>
  71
  72             <div class="i-sdc-form-item">
  73                 <label class="i-sdc-form-label required">Workflow Version</label>
  74                 <ui-element-dropdown
  75                     data-tests-id="associated-workflow-version"
  76                     [readonly]="!operation.workflowId || readonly"
  77                     [values]="workflowVersions"
  78                     [(value)]="operation.workflowVersionId"
  79                     (valueChange)="changeWorkflowVersion()">
  80                 </ui-element-dropdown>
  81             </div>
  82         </div>
  83
  84         <div class="separator-buttons">
  85             <tabs #propertyInputTabs tabStyle="round-tabs" (tabChanged)="tabChanged($event)" [hideIndicationOnTabChange]="true">
  86                 <tab tabTitle="Inputs"></tab>
  87                 <tab tabTitle="Outputs"></tab>
  88             </tabs>
  89             <a
  90                 class="add-param-link add-btn"
  91                 *ngIf="!isUsingExistingWF() && !readonly"
  92                 data-tests-id="addInputParameter"
  93                 [ngClass]="{'disabled':!canAdd()}"
  94                 (click)="addParam()">Add Parameter</a>
  95         </div>
  96
  97         <div class="generic-table">
  98             <div class="header-row table-row">
  99                 <span class="cell header-cell field-name">Name</span>
 100                 <span class="cell header-cell field-type">Type</span>
 101                 <span class="cell header-cell field-property" *ngIf="currentTab == TYPE_INPUT">
 102                     Property
 103                     <span
 104                         *ngIf="!isUsingExistingWF()"
 105                         class="sprite-new info-icon"
 106                         tooltip="{{propertyTooltipText}}"
 107                         tooltipDelay="0">
 108                     </span>
 109                 </span>
 110                 <span class="cell header-cell field-mandatory" *ngIf="!isUsingExistingWF()">Mandatory</span>
 111                 <span class="cell header-cell remove" *ngIf="!isUsingExistingWF() && !readonly">●●●</span>
 112             </div>
 113
 114             <div class="empty-msg data-row" *ngIf="tableParameters.length === 0">
 115                 <div>NO PARAMETERS TO SHOW</div>
 116                 <div *ngIf="isUsingExistingWF() && !operation.workflowVersionId">
 117                     <div *ngIf="workflows.length">
 118                         <span class="bold-message">Select Workflow and Workflow Version above</span>
 119                         <span>in order to see the parameters</span>
 120                     </div>
 121                     <div *ngIf="!workflows.length">
 122                         Only <span class="bold-message">certified</span> workflow versions can be assigned to an operation
 123                     </div>
 124                 </div>
 125             </div>
 126
 127             <param-row
 128                 *ngFor="let param of tableParameters"
 129                 class="data-row"
 130                 [isInputParam]="currentTab == TYPE_INPUT"
 131                 [isAssociateWorkflow]="isUsingExistingWF()"
 132                 [param]="param"
 133                 [inputProps]="inputProperties"
 134                 [propTypes]="inputPropertyTypes"
 135                 [onRemoveParam]="onRemoveParam"
 136                 [readonly]="readonly">
 137             </param-row>
 138         </div>
 139
 140     </form>
 141 </div>