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                 </sdc-input>
  55             </div>
  56
  57         </div>
  58
  59         <div class="i-sdc-form-item sdc-input">
  60             <span class="sdc-input__label">{{ 'OPERATION_DESCRIPTION' | translate }}</span>
  61             <textarea
  62                 data-tests-id="operationDescription"
  63                 rows="2"
  64                 name="description"
  65                 [(ngModel)]="descriptionValue"
  66                 [ngClass]="{'disabled': readonly}">
  67             </textarea>
  68         </div>
  69
  70         <div class="side-by-side" *ngIf="enableWorkflowAssociation">
  71             <div class="form-item">
  72                 <sdc-dropdown
  73                     label="{{ 'OPERATION_WORKFLOW_ASSIGNMENT' | translate }}"
  74                     placeHolder="Select..."
  75                     testId="association-type"
  76                     selectedOption="{{workflowAssociationType}}"
  77                     [options]="associationOptions"
  78                     (changed)="toggleAssociateWorkflow($event)"
  79                     [disabled]="readonly">
  80                 </sdc-dropdown>
  81             </div>
  82
  83             <div class="form-item" *ngIf="!isUsingExistingWF()"></div>
  84
  85             <div class="form-item sdc-input" *ngIf="isUsingExistingWF()">
  86                 <label class="sdc-input__label required">{{ 'OPERATION_WORKFLOW' | translate }}
  87                     <span class="archive-warning" *ngIf="workflowIsOnline && archivedWorkflowId === operation.workflowId">({{ 'OPERATION_WORKFLOW_ARCHIVED' | translate }})</span>
  88                     <span class="no-workflow-warning" *ngIf="!workflowIsOnline">{{ 'OPERATION_NO_WORKFLOW_CONNECTION' | translate }}</span>
  89                     <span class="no-workflow-warning" *ngIf="workflowIsOnline && !workflows.length">{{ 'OPERATION_NO_WORKFLOW_ERROR' | translate }}</span>
  90                 </label>
  91                 <sdc-dropdown
  92                     placeHolder="Select..."
  93                     testId="associated-workflow"
  94                     selectedOption="{{operation.workflowId}}"
  95                     [options]="workflows"
  96                     (changed)="onSelectWorkflow($event)"
  97                     [disabled]="readonly || !workflows.length || !workflowIsOnline">
  98                 </sdc-dropdown>
  99             </div>
 100
 101             <div class="form-item sdc-input" *ngIf="isUsingExistingWF()">
 102                 <sdc-dropdown
 103                     *ngIf="workflowIsOnline && workflows.length"
 104                     label="{{ 'OPERATION_WORKFLOW_VERSION' | translate }}"
 105                     testId="associated-workflow-version"
 106                     selectedOption="{{operation.workflowVersionId}}"
 107                     [options]="workflowVersions"
 108                     (changed)="changeWorkflowVersion($event)"
 109                     [disabled]="!operation.workflowId || archivedWorkflowId === operation.workflowId || readonly">
 110                 </sdc-dropdown>
 111             </div>
 112         </div>
 113
 114         <div class="separator-buttons">
 115             <tabs #propertyInputTabs tabStyle="round-tabs" (tabChanged)="tabChanged($event)" [hideIndicationOnTabChange]="true">
 116                 <tab tabTitle="Inputs"></tab>
 117                 <tab tabTitle="Outputs"></tab>
 118             </tabs>
 119             <a
 120                 class="add-param-link add-btn"
 121                 *ngIf="!isUsingExistingWF() && !readonly"
 122                 data-tests-id="addInputParameter"
 123                 [ngClass]="{'disabled':!canAdd()}"
 124                 (click)="addParam()">{{ currentTab === TYPE_INPUT ? 'Add Input' : 'Add Output' }}</a>
 125         </div>
 126
 127         <div class="generic-table">
 128             <div class="header-row table-row">
 129                 <span class="cell header-cell field-name">{{ 'OPERATION_PARAM_NAME' | translate }}</span>
 130                 <span class="cell header-cell field-type">{{ 'OPERATION_PARAM_TYPE' | translate }}</span>
 131                 <span class="cell header-cell field-property" *ngIf="currentTab == TYPE_INPUT">
 132                     {{ 'OPERATION_PARAM_PROPERTY' | translate }}
 133                     <span
 134                         *ngIf="!isUsingExistingWF()"
 135                         class="sprite-new info-icon"
 136                         tooltip="{{propertyTooltipText}}"
 137                         tooltipDelay="0">
 138                     </span>
 139                 </span>
 140                 <span class="cell header-cell field-mandatory" *ngIf="!isUsingExistingWF()">{{ 'OPERATION_PARAM_MANDATORY' | translate }}</span>
 141                 <span class="cell header-cell remove" *ngIf="!isUsingExistingWF() && !readonly">●●●</span>
 142             </div>
 143
 144             <div class="empty-msg data-row" *ngIf="tableParameters.length === 0">
 145                 <div>{{ 'EMPTY_PARAM_TABLE_HEADER' | translate }}</div>
 146                 <div *ngIf="isUsingExistingWF() && !operation.workflowVersionId">
 147                     <div *ngIf="workflows.length">
 148                         <span class="bold-message">{{ 'EMPTY_PARAM_TABLE_NO_SELECTED_WORKFLOW_1' | translate }}</span>
 149                         <span>{{ 'EMPTY_PARAM_TABLE_NO_SELECTED_WORKFLOW_2' | translate }}</span>
 150                     </div>
 151                 </div>
 152             </div>
 153
 154             <param-row
 155                 *ngFor="let param of tableParameters"
 156                 class="data-row"
 157                 [isInputParam]="currentTab === TYPE_INPUT"
 158                 [isAssociateWorkflow]="isUsingExistingWF()"
 159                 [param]="param"
 160                 [inputProps]="inputProperties"
 161                 [operationOutputs]="operationOutputs"
 162                 [onRemoveParam]="onRemoveParam"
 163                 [readonly]="readonly"
 164                 [validityChanged]="validityChanged">
 165             </param-row>
 166         </div>
 167
 168     </form>
 169 </div>