catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.html

   1 <!--
   2   ~ -
   3   ~  ============LICENSE_START=======================================================
   4   ~  Copyright (C) 2016-2018 European Support Limited
   5   ~  Modification Copyright (C) 2022 Nordix Foundation.
   6   ~  ================================================================================
   7   ~  Licensed under the Apache License, Version 2.0 (the "License");
   8   ~  you may not use this file except in compliance with the License.
   9   ~  You may obtain a copy of the License at
  10   ~
  11   ~       http://www.apache.org/licenses/LICENSE-2.0
  12   ~
  13   ~  Unless required by applicable law or agreed to in writing, software
  14   ~  distributed under the License is distributed on an "AS IS" BASIS,
  15   ~  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16   ~  See the License for the specific language governing permissions and
  17   ~  limitations under the License.
  18   ~
  19   ~  SPDX-License-Identifier: Apache-2.0
  20   ~  ============LICENSE_END=========================================================
  21   -->
  22
  23 <div class="service-dependencies-editor">
  24     <form class="w-sdc-form">
  25
  26         <loader [display]="isLoading" [size]="'large'" [relative]="true"></loader>
  27
  28         <div class="i-sdc-form-content">
  29             <div class="rule-builder-content">
  30                 <div class="i-sdc-form-item rule-input-field property" *ngIf="filterType == FILTER_TYPE_CAPABILITY">
  31                     <label class="i-sdc-form-label required">{{"CAPABILITY_LABEL" | translate}}</label>
  32                     <ui-element-dropdown
  33                         class="i-sdc-form-select"
  34                         data-tests-id="servicePropertyName"
  35                         [values]="capabilityDropdownList"
  36                         [(value)]="currentRule.capabilityName"
  37                         (change)="onCapabilityChange()">
  38                     </ui-element-dropdown>
  39                 </div>
  40                 <div class="i-sdc-form-item rule-input-field property">
  41                     <label class="i-sdc-form-label required">{{"PROPERTY_LABEL" | translate}}</label>
  42                     <ui-element-dropdown
  43                             class="i-sdc-form-select"
  44                             data-tests-id="servicePropertyName"
  45                             [values]="servicePropertyDropdownList"
  46                             [(value)]="currentRule.servicePropertyName"
  47                             (change)="onPropertyChange()">
  48                     </ui-element-dropdown>
  49                 </div>
  50                 <div class="i-sdc-form-item rule-input-field operator">
  51                     <label class="i-sdc-form-label required">{{"OPERATOR_LABEL" | translate}}</label>
  52                     <ui-element-dropdown class="i-sdc-form-select" data-tests-id="constraintOperator"
  53                                          [testId]="'constraintOperator'"
  54                                          (change)="onSourceTypeChange()"
  55                                          [values]="operatorTypes" [(value)]="currentRule.constraintOperator"
  56                                          >
  57                     </ui-element-dropdown>
  58                 </div>
  59             </div>
  60             <div class="rule-builder-content">
  61                 <div class="i-sdc-form-item">
  62                     <label class="i-sdc-form-label required">Value Type</label>
  63                     <input type="radio" name="sourceType"
  64                            data-tests-id="value-type-static"
  65                            [(ngModel)]="selectedSourceType"
  66                            [value]="SOURCE_TYPES.STATIC.value"
  67                            (ngModelChange)="onSourceTypeChange($event)"/> {{"VALUE_LABEL" | translate}}
  68                     <input type="radio" name="sourceType"
  69                            data-tests-id="value-type-tosca-function"
  70                            [(ngModel)]="selectedSourceType"
  71                            [value]="isValidValuesOperator() || isRangeType() || isInRangeOperator() ? SOURCE_TYPES.TOSCA_FUNCTION_LIST.value: SOURCE_TYPES.TOSCA_FUNCTION.value"
  72                            (ngModelChange)="onSourceTypeChange($event)"/> {{"VALUE_EXPRESSION_LABEL" | translate}}
  73                 </div>
  74             </div>
  75             <div class="rule-builder-content" *ngIf="isToscaFunctionSource() && selectedProperty">
  76                 <div class="i-sdc-form-item rule-input-field">
  77                     <tosca-function [property]="selectedProperty"
  78                                     [overridingType] = "isLengthOperator() ? overridingType : undefined"
  79                                     [componentInstanceMap]="componentInstanceMap"
  80                                     [customToscaFunctions]="customToscaFunctions"
  81                                     [overridingType]="overridingType"
  82                                     [allowClear]="false"
  83                                     (onValidityChange)="onToscaFunctionValidityChange($event)"
  84                     >
  85                     </tosca-function>
  86                 </div>
  87             </div>
  88             <div class="rule-builder-content" *ngIf="isToscaFunctionSource() && selectedProperty && (isRangeType() || isInRangeOperator())">
  89                 <div class="i-sdc-form-item rule-input-field">
  90                     <tosca-function [property]="selectedProperty"
  91                                     [componentInstanceMap]="componentInstanceMap"
  92                                     [customToscaFunctions]="customToscaFunctions"
  93                                     [allowClear]="false"
  94                                     (onValidityChange)="onToscaFunctionValidityChange($event)"
  95                     >
  96                     </tosca-function>
  97                 </div>
  98             </div>
  99
 100             <div class="rule-builder-content" *ngIf="isToscaFunctionListSource() && selectedProperty && (isRangeType() || isInRangeOperator())">
 101
 102                 <div class="i-sdc-form-item rule-input-field">
 103                     <div class="w-sdc-form-columns-wrapper" *ngFor="let val of rangeToscaFunctionList; let valueIndex = index; trackBy:trackByFn">
 104                         <div class="w-sdc-form-column" style="border-width:3px; border-style:solid; border-color:#009fdb; padding: 1em;">
 105                             <tosca-function [property]="selectedProperty"
 106                                             [inToscaFunction]="val"
 107                                             [componentInstanceMap]="componentInstanceMap"
 108                                             [customToscaFunctions]="customToscaFunctions"
 109                                             [allowClear]="false"
 110                                             (onValidityChange)="onToscaRangeFunctionListValidityChange($event, valueIndex)"
 111                             >
 112                             </tosca-function>
 113                         </div>
 114                     </div>
 115                 </div>
 116             </div>
 117
 118             <div class="rule-builder-content" *ngIf="isToscaFunctionListSource() && selectedProperty && isValidValuesOperator()">
 119
 120                 <div class="i-sdc-form-item rule-input-field">
 121                     <div class="add-btn"
 122                          (click)="addToList()">Add to List
 123                     </div>
 124                     <div class="w-sdc-form-columns-wrapper" *ngFor="let val of this.validValuesToscaFunctionList; let valueIndex = index; trackBy:trackByFn">
 125                         <div class="w-sdc-form-column" style="border-width:3px; border-style:solid; border-color:#009fdb; padding: 1em;">
 126                             <tosca-function [property]="selectedProperty"
 127                                             [inToscaFunction]="val"
 128                                             [componentInstanceMap]="componentInstanceMap"
 129                                             [customToscaFunctions]="customToscaFunctions"
 130                                             [allowClear]="false"
 131                                             (onValidityChange)="onToscaFunctionListValidityChange($event, valueIndex)"
 132                             >
 133                             </tosca-function>
 134                         </div>
 135                         <div class="w-sdc-form-column">
 136                             <span class="sprite-new delete-btn" (click)="removeFromList(valueIndex)"></span>
 137                         </div>
 138                     </div>
 139                 </div>
 140             </div>
 141             <div *ngIf="isToscaFunctionSource() && !selectedProperty">
 142                 {{"NODE_FILTER_SELECT_PROPERTY" | translate}}
 143             </div>
 144             <div class="rule-builder-content" *ngIf="isStaticSource()">
 145                 <div class="i-sdc-form-item rule-input-field complex-input-field">
 146                     <dynamic-property
 147                             *ngIf="isComplexListMapType() && !isRangeType() && !isValidValuesOperator() && !isLengthOperator()"
 148                         [selectedPropertyId]="selectedProperty.uniqueId"
 149                         [property]="selectedProperty"
 150                         [expandedChildId]="selectedProperty.expandedChildPropertyId ?
 151                                 selectedProperty.expandedChildPropertyId : selectedProperty.name"
 152                         [canBeDeclared]="true"
 153                         [hideCheckBox]="true"
 154                         (propertyChanged)="updateComplexListMapTypeRuleValue()"
 155                         [rootProperty]="selectedProperty"
 156                         (expandChild)="selectedProperty.updateExpandedChildPropertyId($event)">
 157                     </dynamic-property>
 158                     <dynamic-element
 159                         *ngIf="!isComplexListMapType() && !isValidValuesOperator()"
 160                         [(value)]="currentRule.value"
 161                         class="rule-assigned-value"
 162                         data-tests-id="ruleAssignedValue"
 163                         (elementChanged)="onValueChange($event.isValid)"
 164                         [type]="isLengthOperator() ? 'integer' : selectedProperty ? selectedProperty.type : 'string'"
 165                         [operator]="currentRule.constraintOperator">
 166                     </dynamic-element>
 167                     <dynamic-element
 168                             *ngIf="isComplexListMapType() && isLengthOperator()"
 169                             [(value)]="currentRule.value"
 170                             class="rule-assigned-value"
 171                             data-tests-id="ruleAssignedValue"
 172                             (elementChanged)="onValueChange($event.isValid)"
 173                             [type]="isLengthOperator() ? 'integer' : selectedProperty ? selectedProperty.type : 'string'"
 174                             [operator]="currentRule.constraintOperator">
 175                     </dynamic-element>
 176                     <dynamic-element
 177                             *ngIf="isRangeType()"
 178                             [(value)]="currentRule.value"
 179                             class="rule-assigned-value"
 180                             data-tests-id="ruleAssignedValue"
 181                             (elementChanged)="onValueChange($event.isValid)"
 182                             [type]="selectedProperty ? selectedProperty.type : 'string'">
 183                     </dynamic-element>
 184                     <dynamic-element
 185                             *ngIf="isValidValuesOperator()"
 186                             [(value)]="currentRule.value"
 187                             class="rule-assigned-value"
 188                             data-tests-id="ruleAssignedValue"
 189                             (elementChanged)="onValueChange($event.isValid)"
 190                             [type]="selectedProperty ? selectedProperty.type : 'string'"
 191                             [operator]="currentRule.constraintOperator">
 192                     </dynamic-element>
 193                 </div>
 194             </div>
 195         </div>
 196     </form>
 197 </div>