catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html

   1 <!--
   2   ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
   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 <div include-padding="true" class="sdc-workspace-general-step">
  17   <div class="w-sdc-main-container-body-content-action-buttons">
  18     <div data-ng-if="unsavedFile && !isCreateMode() && !isViewMode()" data-tests-id="save-warning" class="unsaved-file-warning">
  19       <span class="sprite-new sdc-warning"></span> Click save to update to the new VSP
  20     </div>
  21     <button class="tlv-btn blue" data-ng-if="isDesigner()" data-ng-show="isGeneralView()" data-ng-class="{'disabled' : !isValidForm  || isDisableMode() || isViewMode() || isCreateMode()}"
  22             data-ng-click="save()" data-tests-id="create/save" tooltips tooltip-content="Save">Save</button>
  23     <span data-ng-if="isDesigner()" data-ng-class="{'disabled' :isDisableMode() || isViewMode() || isCreateMode()}"  ng-click="revert()" class="sprite-new revert-btn" data-tests-id="revert"
  24           data-ng-show="isGeneralView()" tooltips tooltip-content="Revert"></span>
  25
  26   </div>
  27   <form novalidate class="w-sdc-form" name="editForm" validation-on-load form-to-validate="editForm">
  28
  29     <div class="w-sdc-form-section-container">
  30
  31       <div class="w-sdc-form-columns-wrapper">
  32
  33         <div class="w-sdc-form-column">
  34           <div class="upper-general-fields">
  35             <div class="selected-icon-container" data-ng-class="{'show-only-on-over':'defaulticon'!=component.icon && !isViewMode()}">
  36               <div class="selected-icon-inner-container ">
  37                 <div class="sprite-new update-component-icon" data-ng-click="updateIcon()" data-ng-if="!isViewMode() && possibleToUpdateIcon()"></div>
  38                 <div class="i-sdc-form-item-suggested-icon large selected-icon {{component.iconSprite}} {{component.icon}}"
  39                      data-ng-class="{
  40                                      'disable': isViewMode() || !possibleToUpdateIcon(),
  41                                      'archive-component active-component-static': component.archived
  42                                      }"
  43                      ng-model="component.icon"
  44                      tooltips tooltip-content='{{component.icon | translate}}'
  45                 >
  46                 </div>
  47               </div>
  48             </div>
  49             <div class="name-and-category-fields">
  50               <!--------------------- NAME -------------------->
  51               <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.componentName)}">
  52                 <label class="i-sdc-form-label required" translate="GENERAL_LABEL_NAME"></label>
  53                 <input class="i-sdc-form-input"
  54                        data-ng-class="{'view-mode': isViewMode()}"
  55                        name="componentName"
  56                        data-ng-init="isCreateMode() && validateName(true)"
  57                        data-ng-maxlength="50"
  58                        data-ng-model="component.name"
  59                        type="text"
  60                        data-required
  61                        data-ng-model-options="{ debounce: 500 }"
  62                        data-ng-pattern="validation.componentNameValidationPattern"
  63                        data-ng-disabled="component.isAlreadyCertified()"
  64                        data-tests-id="name"
  65                        autofocus
  66                        ng-readonly="isViewMode()"
  67                 />
  68
  69                 <div class="input-error" data-ng-show="validateField(editForm.componentName)">
  70                   <span ng-show="editForm.componentName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_NAME_REQUIRED"></span>
  71                   <span ng-show="editForm.componentName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span>
  72                   <span ng-show="editForm.componentName.$error.minlength" translate="VALIDATION_ERROR_MIN_LENGTH" translate-values="{'min': '4' }"></span>
  73                   <span ng-show="editForm.componentName.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_NAME_EXISTS"></span>
  74                   <span ng-show="editForm.componentName.$error.pattern" translate="VALIDATION_ERROR_INVALID_NAME"></span>
  75                 </div>
  76               </div>
  77               <!--------------------- NAME -------------------->
  78
  79               <!--------------------- Model -------------------->
  80               <div class="i-sdc-form-item">
  81                 <label class="i-sdc-form-label required">Model</label>
  82                 <select class="i-sdc-form-select"
  83                         data-ng-class="{'view-mode': isViewMode()}"
  84                         data-ng-disabled="!isCreateMode()"
  85                         data-ng-change="onModelChange()"
  86                         data-tests-id="selectModelName"
  87                         data-ng-required="isModelRequired"
  88                         data-ng-model="component.model"
  89                         data-ng-options="model for model in models track by model"
  90                 >
  91                   <option ng-if="showDefaultModelOption" value="">{{defaultModelOption}}</option>
  92                 </select>
  93               </div>
  94               <!--------------------- Model -------------------->
  95
  96               <!--------------------- CATEGORIES -------------------->
  97               <div class="i-sdc-form-item"
  98                    data-ng-class="{'error': validateField(editForm.category)}">
  99                 <loader data-display="!categories && !initCategoreis()" relative="true"></loader>
 100                 <label class="i-sdc-form-label required" translate="GENERAL_LABEL_CATEGORY"></label>
 101                 <select class="i-sdc-form-select"
 102                         data-required
 103                         name="category"
 104                         data-ng-class="{'view-mode': isViewMode()}"
 105                         data-ng-change="onCategoryChange()"
 106                         data-ng-disabled="component.isAlreadyCertified() || (component.isCsarComponent() && component.selectedCategory && component.selectedCategory!=='') || isHiddenCategorySelected"
 107                         data-ng-model="componentCategories.selectedCategory"
 108                         data-tests-id="selectGeneralCategory"
 109                 >
 110                   <option value="">Select category</option>
 111                   <optgroup ng-if="component.isResource()" data-ng-repeat="mainCategory in categories | orderBy:['name']" label="{{mainCategory.name}}" data-tests-id="{{mainCategory.name}}">
 112                     <option data-ng-repeat="subCategory in mainCategory.subcategories track by $index"
 113                             data-ng-selected="componentCategories.selectedCategory === calculateUnique(mainCategory.name,subCategory.name)"
 114                             data-tests-id="{{subCategory.name}}"
 115                             value="{{calculateUnique(mainCategory.name, subCategory.name)}}">{{subCategory.name}}
 116
 117                     </option>
 118                   </optgroup>
 119                   <option ng-if="component.isService()" data-ng-repeat="mainCategory in categories | orderBy:['name']"
 120                           data-ng-selected="component.selectedCategory===mainCategory.name"
 121                           value="{{mainCategory.name}}"
 122                           data-tests-id="{{mainCategory.name}}">{{getCategoryDisplayNameOrName(mainCategory)}}</option>
 123                 </select>
 124
 125                 <div class="input-error" data-ng-show="validateField(editForm.category)">
 126                   <span ng-show="editForm.category.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_CATEGORY_REQUIRED"></span>
 127                   <span ng-show="editForm.category.$error.validForBaseType" translate="NEW_SERVICE_RESOURCE_ERROR_CATEGORY_NOT_VALID"></span>
 128                 </div>
 129               </div>
 130               <!--------------------- CATEGORIES -------------------->
 131             </div>
 132           </div>
 133
 134           <!--------------------- Category Specific Metadata -------------------->
 135           <div ng-if="component.selectedCategory">
 136             <ng-container ng-repeat="(key, value) in component.categorySpecificMetadata"-->
 137               <div ng-if="isMetadataKeyForComponentCategory(key) && !isCategoryServiceMetadataKey(key) && getMetadataKeyValidValues(key) && isMetadataKeyMandatory(key)"
 138                    class="i-sdc-form-item"
 139                    data-ng-class="{'error': validateField(editForm['{{key}}'])}">
 140                 <label class="i-sdc-form-label required" translate="{{getMetadataDisplayName(key)}}"></label>
 141                 <select class="i-sdc-form-select"
 142                         name="{{key}}"
 143                         data-ng-class="{'view-mode': isViewMode()}"
 144                         data-ng-model="component.categorySpecificMetadata[key]"
 145                         data-tests-id="{{key}}"
 146                         data-required>
 147                   <option ng-repeat="value in getMetadataKeyValidValues(key)">{{value}}</option>
 148                 </select>
 149                 <div class="input-error" data-ng-show="validateField(editForm['{{key}}'])">
 150                   <span ng-show="editForm['{{key}}'].$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_REQUIRED"></span>
 151                 </div>
 152               </div>
 153               <div ng-if="isMetadataKeyForComponentCategory(key) && !isCategoryServiceMetadataKey(key) && getMetadataKeyValidValues(key) && !isMetadataKeyMandatory(key)"
 154                    class="i-sdc-form-item">
 155                 <label class="i-sdc-form-label" translate="{{getMetadataDisplayName(key)}}"></label>
 156                 <select class="i-sdc-form-select"
 157                         name="{{key}}"
 158                         data-ng-class="{'view-mode': isViewMode()}"
 159                         data-ng-model="component.categorySpecificMetadata[key]"
 160                         data-tests-id="{{key}}">
 161                   <option value=""/>
 162                   <option ng-repeat="value in getMetadataKeyValidValues(key)">{{value}}</option>
 163                 </select>
 164               </div>
 165               <div ng-if="isMetadataKeyForComponentCategory(key) && !isCategoryServiceMetadataKey(key) && !getMetadataKeyValidValues(key) && isMetadataKeyMandatory(key)"
 166                    class="i-sdc-form-item"
 167                    data-ng-class="{'error': validateField(editForm['{{key}}'])}">
 168                 <label class="i-sdc-form-label required" translate="{{getMetadataDisplayName(key)}}"></label>
 169                 <input class="i-sdc-form-input" type="text"
 170                        data-required
 171                        data-ng-class="{'view-mode': isViewMode()}"
 172                        data-ng-model="component.categorySpecificMetadata[key]"
 173                        name="{{key}}"
 174                        data-tests-id="{{key}}"
 175                 />
 176                 <div class="input-error" data-ng-show="validateField(editForm['{{key}}'])">
 177                   <span ng-show="editForm['{{key}}'].$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_REQUIRED"></span>
 178                 </div>
 179               </div>
 180               <div ng-if="isMetadataKeyForComponentCategory(key) && !isCategoryServiceMetadataKey(key) && !getMetadataKeyValidValues(key) && !isMetadataKeyMandatory(key)"
 181                    class="i-sdc-form-item">
 182                 <label class="i-sdc-form-label" translate="{{getMetadataDisplayName(key)}}"></label>
 183                 <input class="i-sdc-form-input" type="text"
 184                        data-ng-class="{'view-mode': isViewMode()}"
 185                        data-ng-model="component.categorySpecificMetadata[key]"
 186                        name="{{key}}"
 187                        data-tests-id="{{key}}"
 188                 />
 189               </div>
 190             </ng-container>
 191           </div>
 192           <!--------------------- Category Specific Metadata -------------------->
 193
 194           <!--------------------- RESOURCE TAGS -------------------->
 195           <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.tags)}">
 196             <label class="i-sdc-form-label" translate="GENERAL_LABEL_TAGS"></label>
 197
 198             <sdc-tags form-element="editForm" element-name="tags" max-tags="20" class="i-sdc-form-item-tags"
 199                       sdc-disabled="isViewMode()"
 200                       tags="component.tags"
 201                       pattern="validation.tagValidationPattern"
 202                       special-tag="component.name"></sdc-tags>
 203
 204             <div class="input-error" data-ng-show="validateField(editForm.tags)">
 205               <span ng-show="editForm.tags.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 206               <span ng-show="editForm.tags.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_TAG_NAME_EXIST"></span>
 207             </div>
 208           </div>
 209           <!--------------------- RESOURCE TAGS -------------------->
 210
 211           <!--------------------- DESCRIPTION -------------------->
 212           <div class="i-sdc-form-item description-field"
 213                data-ng-class="{'error': validateField(editForm.description)}">
 214             <label class="i-sdc-form-label required" translate="GENERAL_LABEL_DESCRIPTION"></label>
 215             <textarea class="description"
 216                       name="description"
 217                       data-ng-class="{'view-mode': isViewMode()}"
 218                       data-ng-maxlength="1024"
 219                       data-required
 220                       data-ng-model="component.description"
 221                       data-ng-model-options="{ debounce: 500 }"
 222                       data-ng-pattern="validation.commentValidationPattern"
 223                       data-tests-id="description"></textarea>
 224
 225             <div class="input-error" data-ng-show="validateField(editForm.description)">
 226               <span ng-show="editForm.description.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_DESCRIPTION_REQUIRED"></span>
 227               <span ng-show="editForm.description.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '1024' }"></span>
 228               <span ng-show="editForm.description.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 229             </div>
 230           </div>
 231           <!--------------------- DESCRIPTION -------------------->
 232
 233         </div><!-- Close w-sdc-form-column -->
 234
 235         <div class="w-sdc-form-column">
 236           <!--------------------- IMPORT TOSCA FILE USING BROWSE (ALSO VFC) -------------------->
 237           <div class="i-sdc-form-item" ng-if="isShowFileBrowse">
 238
 239             <label class="i-sdc-form-label" data-ng-class="{'required':isCreateMode() && component.resourceType !=='VF'}">{{browseFileLabel}}</label>
 240             <file-upload id="fileUploadElement"
 241                          class="i-sdc-form-input"
 242                          element-name="fileElement"
 243                          data-ng-required="false"
 244                          element-disabled="{{(!isCreateMode()&&!(isEditMode()&&component.resourceType=='VF'))|| isViewMode() || component.vspArchived}}"
 245                          form-element="editForm"
 246                          file-model="component.importedFile"
 247                          on-file-changed-in-directive="onImportFileChange"
 248                          extensions="{{importedFileExtension}}"
 249                          default-text="'Browse to select file'"
 250             ></file-upload>
 251           </div>
 252
 253           <!--------------------- IMPORT TOSCA FILE USING ONBOARDING -------------------->
 254           <div class="i-sdc-form-item" ng-if="isShowOnboardingSelectionBrowse && !isShowFileBrowse">
 255             <label class="i-sdc-form-label required">VSP</label>
 256             <div class="i-sdc-form-file-upload i-sdc-form-input">
 257               <span class="i-sdc-form-file-name"  data-ng-disabled="component.vspArchived"  data-tests-id="filename">{{(fileModel && fileModel.filename) || importedToscaBrowseFileText }}</span>
 258               <div class="i-sdc-form-file-upload-x-btn" ng-click="cancel()" data-ng-show="fileModel.filename && fileModel.filename!=='' && elementDisabled!=='true'"></div>
 259               <input type="button" data-ng-class="{'disabled': !isEditMode() && component.vspArchived}" data-ng-disabled="component.vspArchived" name="fileElement" />
 260               <div class="file-upload-browse-btn" data-ng-class="{'disabled': !isEditMode() && !component.vspArchived}" data-ng-click="openOnBoardingModal()" data-ng-disabled="!component.vspArchived" data-tests-id="browseButton">Browse</div>
 261             </div>
 262           </div>
 263
 264           <div class="input-error-file-upload"   data-ng-disabled="!component.archived"  data-ng-show="component.importedFile && (!editForm.fileElement.$valid || !component.importedFile.filename)">
 265             <!-- editForm.fileElement.$error.required <== Can not use this, because the browse is done from outside for the first time -->
 266             <span ng-show="!(isEditMode()&&component.resourceType=='VF')&&!component.importedFile.filename" translate="NEW_SERVICE_RESOURCE_ERROR_TOSCA_FILE_REQUIRED"></span><!-- Required -->
 267             <span ng-show="editForm.fileElement.$error.maxsize" translate="VALIDATION_ERROR_MAX_FILE_SIZE"></span>
 268             <span ng-show="editForm.fileElement.$error.filetype" translate="NEW_SERVICE_RESOURCE_ERROR_VALID_TOSCA_EXTENSIONS" translate-values="{'extensions': '{{importedFileExtension}}' }"></span>
 269             <span ng-show="editForm.fileElement.$error.emptyFile" translate="VALIDATION_ERROR_EMPTY_FILE"></span>
 270           </div>
 271           <!--------------------- IMPORT TOSCA FILE -------------------->
 272
 273           <!--------------------- USER ID -------------------->
 274           <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.contactId)}">
 275             <label class="i-sdc-form-label required" translate="GENERAL_LABEL_CONTACT_ID"></label>
 276             <input class="i-sdc-form-input" type="text"
 277                    data-ng-model="component.contactId"
 278                    data-ng-class="{'view-mode': isViewMode()}"
 279                    data-ng-required="true"
 280                    name="contactId"
 281                    data-ng-pattern="validation.contactIdValidationPattern"
 282                    data-ng-model-options="{ debounce: 500 }"
 283                    data-tests-id="contactId"
 284                    data-ng-maxlength="50"
 285             />
 286
 287             <div class="input-error" data-ng-show="validateField(editForm.contactId)">
 288               <span ng-show="editForm.contactId.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span>
 289               <span ng-show="editForm.contactId.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_REQUIRED"></span>
 290               <span ng-show="editForm.contactId.$error.pattern" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_NOT_VALID"></span>
 291             </div>
 292           </div>
 293           <!--------------------- USER ID -------------------->
 294
 295           <!--------------------- VENDOR NAME -------------------->
 296           <div ng-if="component.isResource()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.vendorName)}">
 297             <label class="i-sdc-form-label required" translate="GENERAL_LABEL_VENDOR_NAME"></label>
 298             <input class="i-sdc-form-input" type="text"
 299                    data-ng-class="{'view-mode': isViewMode()}"
 300                    data-ng-model="component.vendorName"
 301                    data-ng-model-options="{ debounce: 500 }"
 302                    data-ng-maxlength="60"
 303                    data-required
 304                    ng-click="oldValue = component.vendorName"
 305                    name="vendorName"
 306                    data-ng-change="onVendorNameChange(oldValue)"
 307                    data-ng-pattern="validation.VendorNameValidationPattern"
 308                    data-ng-disabled="component.isAlreadyCertified() || (component.isCsarComponent() && component.vendorName && component.vendorName!=='')"
 309                    data-tests-id="vendorName"
 310             />
 311
 312             <div class="input-error" data-ng-show="validateField(editForm.vendorName)">
 313               <span ng-show="editForm.vendorName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_VENDOR_NAME_REQUIRED"></span>
 314               <span ng-show="editForm.vendorName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '60' }"></span>
 315               <span ng-show="editForm.vendorName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 316             </div>
 317
 318           </div>
 319           <!--------------------- VENDOR NAME -------------------->
 320
 321           <!--------------------- VENDOR RELEASE -------------------->
 322           <div ng-if="component.isResource()"
 323                class="i-sdc-form-item"
 324                data-ng-class="{'error': validateField(editForm.vendorRelease)}">
 325             <label class="i-sdc-form-label required" translate="GENERAL_LABEL_VENDOR_RELEASE"></label>
 326             <input class="i-sdc-form-input" type="text"
 327                    data-ng-class="{'view-mode': isViewMode()}"
 328                    data-ng-model="component.vendorRelease"
 329                    data-ng-model-options="{ debounce: 500 }"
 330                    data-ng-maxlength="25"
 331                    data-required
 332                    name="vendorRelease"
 333                    data-ng-pattern="validation.VendorReleaseValidationPattern"
 334                    data-ng-disabled="component.isCsarComponent() && component.vendorRelease && component.vendorRelease!==''"
 335                    data-tests-id="vendorRelease"
 336             />
 337
 338             <div class="input-error" data-ng-show="validateField(editForm.vendorRelease)">
 339               <span ng-show="editForm.vendorRelease.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_VENDOR_RELEASE_REQUIRED"></span>
 340               <span ng-show="editForm.vendorRelease.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '25' }"></span>
 341               <span ng-show="editForm.vendorRelease.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 342             </div>
 343           </div>
 344           <!--------------------- VENDOR RELEASE -------------------->
 345
 346           <!--------------------- Resource Model Number -------------------->
 347           <div ng-if="component.isResource()"
 348                class="i-sdc-form-item"
 349                data-ng-class="{'error': validateField(editForm.resourceVendorModelNumber)}">
 350             <label class="i-sdc-form-label" translate="GENERAL_LABEL_RESOURCE_MODEL_NUMBER"></label>
 351             <input class="i-sdc-form-input" type="text"
 352                    data-ng-class="{'view-mode': isViewMode()}"
 353                    data-ng-model="component.resourceVendorModelNumber"
 354                    data-ng-model-options="{ debounce: 500 }"
 355                    data-ng-maxlength="65"
 356                    name="resourceVendorModelNumber"
 357                    data-ng-pattern="validation.VendorModelNumberValidationPattern"
 358                    data-tests-id="resourceVendorModelNumber"
 359             />
 360
 361             <div class="input-error" data-ng-show="validateField(editForm.resourceVendorModelNumber)">
 362               <span ng-show="editForm.resourceVendorModelNumber.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '65' }"></span>
 363               <span ng-show="editForm.resourceVendorModelNumber.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 364             </div>
 365           </div>
 366           <!--------------------- Resource Model Number -------------------->
 367
 368           <!--------------------- ECOMPGENERATEDNAMING -------------------->
 369           <div class="i-sdc-form-item"
 370                data-ng-class="{'error': validateField(editForm.ecompGeneratedNaming)}"
 371                data-ng-if="component.isService() && !isNotApplicableMetadataKeys('Generated Naming')">
 372             <label class="i-sdc-form-label">Generated Naming</label>
 373             <select class="i-sdc-form-select"
 374                     data-required
 375                     name="ecompGeneratedNaming"
 376                     data-ng-change="onEcompGeneratedNamingChange()"
 377                     data-ng-class="{'view-mode': isViewMode()}"
 378                     data-ng-model="component.ecompGeneratedNaming"
 379                     data-tests-id="ecompGeneratedNaming">
 380               <option ng-value="true">true</option>
 381               <option ng-value="false">false</option>
 382             </select>
 383             <div class="input-error" data-ng-show="validateField(editForm.ecompGeneratedNaming)">
 384
 385             </div>
 386           </div>
 387           <!--------------------- CATEGORIES -------------------->
 388
 389           <!--------------------- NAMING POLICY  -------------------->
 390           <div ng-if="component.isService() && !isNotApplicableMetadataKeys('Naming Policy')" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.namingPolicy)}">
 391             <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Naming Policy', 'namingPolicy')">
 392               <div ng-if="isMetadataKeyMandatory('Naming Policy')">
 393                 <label class="i-sdc-form-label required">Naming Policy</label>
 394               </div>
 395               <div ng-if="!isMetadataKeyMandatory('Naming Policy')">
 396                 <label class="i-sdc-form-label">Naming Policy</label>
 397               </div>
 398               <select class="i-sdc-form-input" type="text"
 399                       ng-required="isMetadataKeyMandatory('Naming Policy')"
 400                       data-ng-class="{'view-mode': isViewMode()}"
 401                       data-ng-model="component.namingPolicy"
 402                       data-ng-model-options="{ debounce: 500 }"
 403                       name="namingPolicy"
 404                       data-tests-id="namingPolicy"
 405                       data-ng-maxlength="256"
 406                       data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
 407               > <option ng-repeat="value in getMetadataKeyValidValues('Naming Policy')">{{value}}</option>
 408               </select>
 409             </div>
 410             <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Naming Policy')">
 411               <label class="i-sdc-form-label">Naming Policy</label>
 412               <input class="i-sdc-form-input"
 413                      name="namingPolicy"
 414                      data-ng-class="{'view-mode': isViewMode() || !component.ecompGeneratedNaming}"
 415                      data-ng-maxlength="100"
 416                      data-ng-model="component.namingPolicy"
 417                      type="text"
 418                      data-ng-model-options="{ debounce: 500 }"
 419                      data-ng-pattern="validation.commentValidationPattern"
 420                      data-tests-id="namingPolicy"
 421                      autofocus
 422                      ng-readonly="isViewMode() || !component.ecompGeneratedNaming"
 423               />
 424             </div>
 425             <div class="input-error" data-ng-show="validateField(editForm.namingPolicy)">
 426               <span ng-show="editForm.namingPolicy.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span>
 427               <span ng-show="editForm.namingPolicy.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 428             </div>
 429           </div>
 430           <!--------------------- NAMING POLICY  -------------------->
 431
 432           <!--------------------- Service Type -------------------->
 433           <div ng-if="component.isService() && !isNotApplicableMetadataKeys('Service Type')"
 434                class="i-sdc-form-item"
 435                data-ng-class="{'error': validateField(editForm.serviceFunctionType)}">
 436             <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Service Type', 'serviceType')">
 437               <div ng-if="isMetadataKeyMandatory('Service Type')">
 438                 <label class="i-sdc-form-label required" translate="GENERAL_TAB_LABEL_SERVICE_TYPE"></label>
 439               </div>
 440               <div ng-if="!isMetadataKeyMandatory('Service Type')">
 441                 <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_TYPE"></label>
 442               </div>
 443               <select class="i-sdc-form-input" type="text"
 444                       ng-required="isMetadataKeyMandatory('Service Type')"
 445                       data-ng-class="{'view-mode': isViewMode()}"
 446                       data-ng-model="component.serviceType"
 447                       data-ng-model-options="{ debounce: 500 }"
 448                       name="serviceType"
 449                       data-tests-id="serviceType"
 450                       data-ng-maxlength="256"
 451                       data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
 452               > <option ng-repeat="value in getMetadataKeyValidValues('Service Type')">{{value}}</option>
 453               </select>
 454             </div>
 455             <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Service Type')">
 456               <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_TYPE"></label>
 457               <input class="i-sdc-form-input" type="text"
 458                      data-ng-class="{'view-mode': isViewMode()}"
 459                      data-ng-model="component.serviceType"
 460                      data-ng-model-options="{ debounce: 500 }"
 461                      name="serviceType"
 462                      data-tests-id="serviceType"
 463                      data-ng-maxlength="256"
 464                      data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
 465               />
 466             </div>
 467             <div class="input-error" data-ng-show="validateField(editForm.serviceType)">
 468               <span ng-show="editForm.serviceType.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
 469               <span ng-show="editForm.serviceType.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 470             </div>
 471           </div>
 472           <!--------------------- Service Type -------------------->
 473
 474           <!--------------------- Service Role -------------------->
 475           <div ng-if="component.isService() && !isNotApplicableMetadataKeys('Service Role')"
 476                class="i-sdc-form-item"
 477                data-ng-class="{'error': validateField(editForm.serviceRole)}">
 478             <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Service Role', 'serviceRole')">
 479               <div ng-if="isMetadataKeyMandatory('Service Role')">
 480                 <label class="i-sdc-form-label required" translate="GENERAL_TAB_LABEL_SERVICE_ROLE"></label>
 481               </div>
 482               <div ng-if="!isMetadataKeyMandatory('Service Role')">
 483                 <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_ROLE"></label>
 484               </div>
 485               <select class="i-sdc-form-input" type="text"
 486                       ng-required="isMetadataKeyMandatory('Service Role')"
 487                       data-ng-class="{'view-mode': isViewMode()}"
 488                       data-ng-model="component.serviceRole"
 489                       data-ng-model-options="{ debounce: 500 }"
 490                       name="serviceRole"
 491                       data-tests-id="serviceRole"
 492                       data-ng-maxlength="256"
 493               > <option ng-repeat="value in getMetadataKeyValidValues('Service Role')">{{value}}</option>
 494               </select>
 495             </div>
 496             <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Service Role')">
 497               <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_ROLE"></label>
 498               <input class="i-sdc-form-input" type="text"
 499                      data-ng-class="{'view-mode': isViewMode()}"
 500                      data-ng-model="component.serviceRole"
 501                      data-ng-model-options="{ debounce: 500 }"
 502                      name="serviceRole"
 503                      data-tests-id="serviceRole"
 504                      data-ng-maxlength="256"
 505                      data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
 506               />
 507             </div>
 508             <div class="input-error" data-ng-show="validateField(editForm.serviceRole)">
 509               <span ng-show="editForm.serviceRole.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
 510               <span ng-show="editForm.serviceRole.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 511             </div>
 512           </div>
 513           <!--------------------- Service Role -------------------->
 514
 515           <!--------------------- Service Function -------------------->
 516           <div ng-if="component.isService() && !isNotApplicableMetadataKeys('Service Function')"
 517                class="i-sdc-form-item"
 518                data-ng-class="{'error': validateField(editForm.serviceFunction)}">
 519             <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Service Function', 'serviceFunction')">
 520               <div ng-if="isMetadataKeyMandatory('Service Function')">
 521                 <label class="i-sdc-form-label required" translate="GENERAL_TAB_LABEL_SERVICE_FUNCTION"></label>
 522               </div>
 523               <div ng-if="!isMetadataKeyMandatory('Service Function')">
 524                 <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_FUNCTION"></label>
 525               </div>
 526               <select class="i-sdc-form-input" type="text"
 527                       ng-required="isMetadataKeyMandatory('Service Function')"
 528                       data-ng-class="{'view-mode': isViewMode()}"
 529                       data-ng-model="component.serviceFunction"
 530                       data-ng-model-options="{ debounce: 500 }"
 531                       name="serviceFunction"
 532                       data-tests-id="serviceFunction"
 533                       data-ng-maxlength="256"
 534                       data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
 535               > <option ng-repeat="value in getMetadataKeyValidValues('Service Function')">{{value}}</option>
 536               </select>
 537             </div>
 538             <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Service Function')">
 539               <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_FUNCTION"></label>
 540               <input class="i-sdc-form-input" type="text"
 541                      data-ng-class="{'view-mode': isViewMode()}"
 542                      data-ng-model="component.serviceFunction"
 543                      name="serviceFunction"
 544                      data-tests-id="serviceFunction"
 545                      data-ng-maxlength="256"
 546                      data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
 547               />
 548             </div>
 549             <div class="input-error" data-ng-show="validateField(editForm.serviceFunction)">
 550               <span ng-show="editForm.serviceFunction.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
 551               <span ng-show="editForm.serviceFunction.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 552             </div>
 553           </div>
 554           <!--------------------- Service Function -------------------->
 555
 556           <!-------------------- ENVIRONMENT CONTEXT  ----------------->
 557           <div  ng-if="component.isService() && !isNotApplicableMetadataKeys('Environment Context')" class="i-sdc-form-item">
 558             <loader data-display="!environmentContextObj && !initEnvironmentContext()" relative="true"></loader>
 559             <label class="i-sdc-form-label">Environment Context</label>
 560             <select class="i-sdc-form-select"
 561                     name="environmentContext"
 562                     data-ng-class="{'view-mode': isViewMode()}"
 563                     data-ng-model="component.environmentContext"
 564                     data-tests-id="environmentContext"
 565             >
 566               <option data-ng-repeat="environmentContextVal in (environmentContextObj.validValues) | orderBy"
 567                       value="{{environmentContextVal}}"
 568                       data-tests-id="{{environmentContextVal}}">{{environmentContextVal}}</option>
 569             </select>
 570
 571           </div>
 572           <!--------------------- ENVIRONMENT CONTEXT ------------------>
 573
 574           <!--------------------- Instantiation Type -------------------->
 575           <div class="i-sdc-form-item" data-ng-if="component.isService() && instantiationTypes && !isNotApplicableMetadataKeys('Instantiation Type')">
 576             <label class="i-sdc-form-label">Instantiation Type</label>
 577             <select class="i-sdc-form-select"
 578                     name="instantiationType"
 579                     data-ng-class="{'view-mode': isViewMode()}"
 580                     data-ng-disabled="component.isCsarComponent()"
 581                     data-ng-model="component.instantiationType"
 582                     data-tests-id="selectInstantiationType">
 583               <option ng-repeat="type in instantiationTypes">{{type}}</option>
 584
 585             </select>
 586           </div>
 587           <!--------------------- Instantiation Type -------------------->
 588
 589           <!--------------------- Base Type -------------------->
 590           <div class="w-sdc-form-columns-wrapper">
 591             <div class="w-sdc-form-column">
 592               <div class="i-sdc-form-item" ng-if="component.isService() && baseTypes && baseTypes.length > 0 && !isNotApplicableMetadataKeys('Substitution Node Type')">
 593                 <label class="i-sdc-form-label">Substitution Node Type</label>
 594                 <select class="i-sdc-form-select"
 595                         name="baseType"
 596                         data-ng-class="{'view-mode': isViewMode()}"
 597                         data-ng-disabled="component.isCsarComponent() || !(isEditMode() || isCreateMode())"
 598                         data-ng-model="component.derivedFromGenericType"
 599                         data-ng-change="onBaseTypeChange()"
 600                         data-tests-id="selectBaseType"
 601                         data-ng-options="type for type in baseTypes track by type">
 602                   <option value="" data-ng-if="!isBaseTypeRequired">None</option>
 603                 </select>
 604               </div>
 605             </div>
 606             <div class="w-sdc-form-column">
 607               <div class="i-sdc-form-item" data-ng-if="component.isService() && showBaseTypeVersions && !isNotApplicableMetadataKeys('Substitution Node Type Version')">
 608                 <label class="i-sdc-form-label">Substitution Node Type Version</label>
 609                 <select class="i-sdc-form-select"
 610                         name="baseTypeVersion"
 611                         data-ng-class="{'view-mode': isViewMode()}"
 612                         data-ng-disabled="component.isCsarComponent() || !(isEditMode() || isCreateMode())"
 613                         data-ng-model="component.derivedFromGenericVersion"
 614                         data-tests-id="selectBaseTypeVersion">
 615                   <option ng-repeat="version in baseTypeVersions">{{version}}</option>
 616                 </select>
 617               </div>
 618             </div>
 619           </div>
 620           <!--------------------- Base Type -------------------->
 621
 622           <div class="meta-data" data-ng-if="component.creationDate">
 623             <div>
 624               <strong>Created:</strong>
 625             </div>
 626             <div class="meta-data-item-value">{{component.creationDate | date:'MM/dd/yyyy'}}, {{component.creatorFullName}}</div>
 627             <div>
 628               <strong>Modifed:</strong>
 629             </div>
 630             <div class="meta-data-item-value">
 631               {{component.lastUpdateDate | date:'MM/dd/yyyy'}}
 632             </div>
 633             <div>
 634               <strong>UUID:</strong>
 635             </div>
 636             <div class="meta-data-item-value">
 637               {{component.uuid}}
 638             </div>
 639             <div>
 640               <strong>Invariant UUID:</strong>
 641             </div>
 642             <div class="meta-data-item-value">
 643               {{component.invariantUUID}}
 644             </div>
 645           </div>
 646         </div><!-- Close w-sdc-form-column -->
 647       </div>
 648
 649     </div><!-- Close w-sdc-form-section-container -->
 650
 651   </form>
 652 </div>