X-Git-Url: https://gerrit.onap.org/r/gitweb?a=blobdiff_plain;f=catalog-ui%2Fsrc%2Fapp%2Fng2%2Fpages%2Fcomposition%2Finterface-operatons%2Foperation-creator%2Finterface-operation-handler.component.html;h=b187fa5d9954bd34ede0f4627d9767523ab8d27f;hb=92919e1c189cfcc9ca063d391dadb7b51a88f9d7;hp=cd2d6063c18dd4492384cafb02c4751a1574d951;hpb=5c1f5756bcb5856e2d8b35e3c6ac206f891f8695;p=sdc.git

diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html
index cd2d6063c1..b187fa5d99 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html
@@ -19,68 +19,169 @@
 -->
 
 <div class="operation-handler">
-  <loader [display]="isLoading" [size]="'large'" [relative]="true"></loader>
+    <loader [display]="isLoading" [size]="'large'" [relative]="true"></loader>
 
-  <form class="w-sdc-form">
+    <form class="w-sdc-form">
 
-    <div class="side-by-side">
-      <div class="form-item">
-        <sdc-input
-            label="{{ 'OPERATION_INTERFACE_TYPE' | translate }}"
-            [(value)]="interfaceType"
-            [disabled]="true">
-        </sdc-input>
-      </div>
+        <div class="side-by-side">
+            <div class="form-item">
+                <sdc-dropdown
+                    label="{{ 'OPERATION_INTERFACE_TYPE' | translate }}"
+                    [required]="true"
+                    [testId]="'interface-name'"
+                    [selectedOption]="selectedInterfaceType"
+                    [placeHolder]="'Select...'"
+                    [disabled]="isViewOnly || isEdit"
+                    (changed)="onSelectInterface($event)"
+                    [options]="interfaceTypeOptions">
+                </sdc-dropdown>
+            </div>
 
-      <div class="form-item">
-        <sdc-input
-            label="{{ 'OPERATION_NAME' | translate }}"
-            [(value)]="operationToUpdate.name"
-            [disabled]="true">
-        </sdc-input>
-      </div>
-    </div>
+            <div class="form-item">
+                <sdc-dropdown
+                    #interfaceOperationDropDown
+                    label="{{ 'OPERATION_NAME' | translate }}"
+                    [required]="true"
+                    [testId]="'operation-name'"
+                    [selectedOption]="selectedInterfaceOperation"
+                    [placeHolder]="'Select...'"
+                    [disabled]="isViewOnly || isEdit"
+                    (changed)="onSelectOperation($event)"
+                    [options]="interfaceOperationOptions">
+                </sdc-dropdown>
+            </div>
+        </div>
 
-    <div class="i-sdc-form-item">
-      <sdc-input
-          label="{{'OPERATION_DESCRIPTION' | translate}}"
-          [(value)]="operationToUpdate.description"
-          (valueChange)="onDescriptionChange($event)">
-      </sdc-input>
-    </div>
+        <div class="form-item">
+            <sdc-input
+                label="{{'OPERATION_DESCRIPTION' | translate}}"
+                [(value)]="operationToUpdate.description"
+                testId="interface-operation-description"
+                (valueChange)="onDescriptionChange($event)"
+                [disabled]=isViewOnly>
+            </sdc-input>
+        </div>
 
-    <div class="i-sdc-form-item">
-      <sdc-input
-          label="{{'IMPLEMENTATION_NAME' | translate}}"
-          [(value)]="operationToUpdate.implementation.artifactName">
-      </sdc-input>
-    </div>
+        <div class="group-with-border content-row">
+            <label class="occurrences-label"> {{ 'INTERFACE_OPERATION_IMPLEMENTATION' | translate}}</label>
+            <div class="form-item">
+                <sdc-input
+                    label="{{'INTERFACE_OPERATION_IMPLEMENTATION_ARTIFACT_URI' | translate}}"
+                    testId="interface-operation-implementation-name"
+                    [(value)]="artifactName"
+                    (valueChange)="onURIChange($event)"
+                    [disabled]=isViewOnly>
+                </sdc-input>
+            </div>
+            <br>
+            <div class="form-item">
+                <checkbox [label]="'ADD_ARTIFACT_DETAILS' | translate"
+                    [(checked)]="enableAddArtifactImplementation"
+                    (checkedChange)="onMarkToAddArtifactToImplementation($event)"
+                    [disabled]=isViewOnly>
+                </checkbox>
+            </div>
+            <div class="form-item" *ngIf="toscaArtifactTypes && enableAddArtifactImplementation">
+                <br>
+                <sdc-dropdown
+                    label="{{ 'TOSCA_ARTIFACT_TYPE' | translate }}"
+                    testId="selectToscaArtifactType"
+                    [required]="true"
+                    [selectedOption]="toscaArtifactTypeSelected"
+                    placeHolder="{{toscaArtifactTypeSelected != undefined ? toscaArtifactTypeSelected : 'Select...'}}"
+                    (changed)="onSelectToscaArtifactType($event)"
+                    [options]="toscaArtifactTypes"
+                    [disabled]=isViewOnly>
+                </sdc-dropdown>
+            </div>
+            <div class="form-item" *ngIf="enableAddArtifactImplementation">
+                <sdc-input
+                    label="{{ 'ARTIFACT_VERSION' | translate }}"
+                    data-tests-id="artifactVersion"
+                    [(value)]="artifactVersion"
+                    (valueChange)="onArtifactVersionChange($event)"
+                    [disabled]=isViewOnly>
+                </sdc-input>
+            </div>
+            <div class="form-item" *ngIf="toscaArtifactTypeSelected && enableAddArtifactImplementation">
+                <br>
+                <input-list
+                    *ngIf="artifactTypeProperties && dataTypeMap"
+                    [title]="'ARTIFACT_PROPERTY_LIST_TITLE' | translate"
+                    [emptyMessage]="'ARTIFACT_PROPERTY_LIST_EMPTY' | translate"
+                    [inputs]="artifactTypeProperties"
+                    [dataTypeMap]="dataTypeMap"
+                    [isViewOnly]="isViewOnly"
+                    [showToscaFunctionOption]="true"
+                    [componentInstanceMap]="componentInstanceMap"
+                    [allowDeletion]="false"
+                    [customToscaFunctions]="customToscaFunctions"
+                    (onInputsValidityChange)="implementationPropsValidityChange($event)"
+                    (onValueChange)="onArtifactPropertyValueChange($event)"
+                >
+                </input-list>
+            </div>
+        </div>
+        <div class="group-with-border content-row" *ngIf="dataTypeMap">
+            <input-list
+                [title]="'INPUT_LIST_TITLE' | translate"
+                [emptyMessage]="'INPUT_LIST_EMPTY' | translate"
+                [inputs]="inputs"
+                [dataTypeMap]="dataTypeMap"
+                [isViewOnly]="isViewOnly"
+                [allowDeletion]="true"
+                [componentInstanceMap]="componentInstanceMap"
+                [showToscaFunctionOption]="true"
+                (onValueChange)="onInputValueChange($event)"
+                (onInputsValidityChange)="implementationPropsValidityChange($event)"
+                (onDelete)="onInputDelete($event)"
+            >
+            </input-list>
+        </div>
+        <div class="group-with-border content-row">
+            <app-add-input
+                [dataTypeMap]="dataTypeMap$"
+                [isView]="isViewOnly"
+                [existingInputNames]="collectInputNames()"
+                (onAddInput)="onAddInput($event)"
+            >
+            </app-add-input>
+        </div>
+        <div class="group-with-border content-row">
+            <label class="sdc-timeout-label">Timeout : </label>
+            <input class="sdc-timeout" type="number" [formControl]="timeoutValue" oninput="this.value = this.valueAsNumber" [ngClass]="{'disabled':isViewOnly}" (change)="timeoutConversion()"/>
+            <select class="sdc-timeout-select" [formControl]="timeoutType" (change)="timeoutConversion()" [ngClass]="{'disabled':isViewOnly}">
+                <option value="sec">Seconds</option>
+                <option value="hour">Hours</option>
+                <option value="day">Days</option>
+              </select>
+        </div>
 
-    <div class="separator-buttons">
-      <tab tabTitle="Inputs"></tab>
-      <a class="add-param-link add-btn"
-         [ngClass]="{'disabled': readonly}"
-         (click)="onAddInput()">{{'OPERATION_ADD_INPUT' | translate}}
-      </a>
-    </div>
-
-    <div class="generic-table">
-      <div class="header-row table-row">
-        <span class="cell header-cell field-input-name">{{ 'OPERATION_PARAM_NAME' | translate }}</span>
-        <span class="cell header-cell field-input-value">{{ 'OPERATION_INPUT_VALUE' | translate }}</span>
-        <span class="cell header-cell remove">●●●</span>
-      </div>
-      <div class="empty-msg data-row" *ngIf="!inputs.length">
-        <div>{{ 'OPERATION_INPUT_EMPTY' | translate }}</div>
-      </div>
-      <input-param-row
-          *ngFor="let inputParameter of inputs"
-          class="data-row"
-          [input]="inputParameter"
-          [onRemoveInput]="onRemoveInput"
-          [validityChanged]="validityChanged">
-      </input-param-row>
-    </div>
-
-  </form>
-</div>
+        <div class="group-with-border content-row" *ngIf="showActivities">
+            <label class="sub-operations-label"> Sub operations </label>
+            <tabs tabStyle="basic-tabs" [hideIndicationOnTabChange]="true" (tabChanged)="tabChanged($event)">
+                <div *ngFor="let milestone of milestones">
+                  <tab tabTitle="{{milestone}}" [active]="isActiveTab(milestone)" [highlight]="isInvalidActivity(milestone)">
+                    <!-- temporarily disable -->
+                      <!--<filters-list
+                          [customToscaFunctions]="customToscaFunctions"
+                          [activitiesExist]="getExistingActivities(milestone) ? true : false"
+                          [isViewOnly]="isViewOnly"
+                          [componentInstanceMap]="componentInstanceMap"
+                          [existingFilters]="getExistingFilters(milestone)"
+                          (filtersChangeEvent)="filtersChangeEvent($event, milestone)">
+                      </filters-list>-->
+                      <activities-list
+                          [isViewOnly]="isViewOnly"
+                          [dataTypeMap]="dataTypeMap"
+                          [dataTypeMap$]="dataTypeMap$"
+                          [componentInstanceMap]="componentInstanceMap"
+                          [existingActivities]="getExistingActivities(milestone)"
+                          (activitiesChangeEvent)="activitiesChangeEvent($event, milestone)">
+                      </activities-list>
+                    </tab>
+                  </div>
+                </tabs>
+          </div>
+      </form>
+  </div>