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 ng-repeat="value in getMetadataKeyValidValues(key)">{{value}}</option>
 162                 </select>
 163               </div>
 164               <div ng-if="isMetadataKeyForComponentCategory(key) && !isCategoryServiceMetadataKey(key) && !getMetadataKeyValidValues(key) && isMetadataKeyMandatory(key)"
 165                    class="i-sdc-form-item"
 166                    data-ng-class="{'error': validateField(editForm['{{key}}'])}">
 167                 <label class="i-sdc-form-label required" translate="{{getMetadataDisplayName(key)}}"></label>
 168                 <input class="i-sdc-form-input" type="text"
 169                        data-required
 170                        data-ng-class="{'view-mode': isViewMode()}"
 171                        data-ng-model="component.categorySpecificMetadata[key]"
 172                        name="{{key}}"
 173                        data-tests-id="{{key}}"
 174                 />
 175                 <div class="input-error" data-ng-show="validateField(editForm['{{key}}'])">
 176                   <span ng-show="editForm['{{key}}'].$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_REQUIRED"></span>
 177                 </div>
 178               </div>
 179               <div ng-if="isMetadataKeyForComponentCategory(key) && !isCategoryServiceMetadataKey(key) && !getMetadataKeyValidValues(key) && !isMetadataKeyMandatory(key)"
 180                    class="i-sdc-form-item">
 181                 <label class="i-sdc-form-label" translate="{{getMetadataDisplayName(key)}}"></label>
 182                 <input class="i-sdc-form-input" type="text"
 183                        data-ng-class="{'view-mode': isViewMode()}"
 184                        data-ng-model="component.categorySpecificMetadata[key]"
 185                        name="{{key}}"
 186                        data-tests-id="{{key}}"
 187                 />
 188               </div>
 189             </ng-container>
 190           </div>
 191           <!--------------------- Category Specific Metadata -------------------->
 192
 193           <!--------------------- RESOURCE TAGS -------------------->
 194           <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.tags)}">
 195             <label class="i-sdc-form-label" translate="GENERAL_LABEL_TAGS"></label>
 196
 197             <sdc-tags form-element="editForm" element-name="tags" max-tags="20" class="i-sdc-form-item-tags"
 198                       sdc-disabled="isViewMode()"
 199                       tags="component.tags"
 200                       pattern="validation.tagValidationPattern"
 201                       special-tag="component.name"></sdc-tags>
 202
 203             <div class="input-error" data-ng-show="validateField(editForm.tags)">
 204               <span ng-show="editForm.tags.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 205               <span ng-show="editForm.tags.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_TAG_NAME_EXIST"></span>
 206             </div>
 207           </div>
 208           <!--------------------- RESOURCE TAGS -------------------->
 209
 210           <!--------------------- DESCRIPTION -------------------->
 211           <div class="i-sdc-form-item description-field"
 212                data-ng-class="{'error': validateField(editForm.description)}">
 213             <label class="i-sdc-form-label required" translate="GENERAL_LABEL_DESCRIPTION"></label>
 214             <textarea class="description"
 215                       name="description"
 216                       data-ng-class="{'view-mode': isViewMode()}"
 217                       data-ng-maxlength="1024"
 218                       data-required
 219                       data-ng-model="component.description"
 220                       data-ng-model-options="{ debounce: 500 }"
 221                       data-ng-pattern="validation.commentValidationPattern"
 222                       data-tests-id="description"></textarea>
 223
 224             <div class="input-error" data-ng-show="validateField(editForm.description)">
 225               <span ng-show="editForm.description.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_DESCRIPTION_REQUIRED"></span>
 226               <span ng-show="editForm.description.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '1024' }"></span>
 227               <span ng-show="editForm.description.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 228             </div>
 229           </div>
 230           <!--------------------- DESCRIPTION -------------------->
 231
 232         </div><!-- Close w-sdc-form-column -->
 233
 234         <div class="w-sdc-form-column">
 235           <!--------------------- IMPORT TOSCA FILE USING BROWSE (ALSO VFC) -------------------->
 236           <div class="i-sdc-form-item" ng-if="isShowFileBrowse">
 237
 238             <label class="i-sdc-form-label" data-ng-class="{'required':isCreateMode() && component.resourceType !=='VF'}">{{browseFileLabel}}</label>
 239             <file-upload id="fileUploadElement"
 240                          class="i-sdc-form-input"
 241                          element-name="fileElement"
 242                          data-ng-required="false"
 243                          element-disabled="{{(!isCreateMode()&&!(isEditMode()&&component.resourceType=='VF'))|| isViewMode() || component.vspArchived}}"
 244                          form-element="editForm"
 245                          file-model="component.importedFile"
 246                          on-file-changed-in-directive="onImportFileChange"
 247                          extensions="{{importedFileExtension}}"
 248                          default-text="'Browse to select file'"
 249             ></file-upload>
 250           </div>
 251
 252           <!--------------------- IMPORT TOSCA FILE USING ONBOARDING -------------------->
 253           <div class="i-sdc-form-item" ng-if="isShowOnboardingSelectionBrowse && !isShowFileBrowse">
 254             <label class="i-sdc-form-label required">VSP</label>
 255             <div class="i-sdc-form-file-upload i-sdc-form-input">
 256               <span class="i-sdc-form-file-name"  data-ng-disabled="component.vspArchived"  data-tests-id="filename">{{(fileModel && fileModel.filename) || importedToscaBrowseFileText }}</span>
 257               <div class="i-sdc-form-file-upload-x-btn" ng-click="cancel()" data-ng-show="fileModel.filename && fileModel.filename!=='' && elementDisabled!=='true'"></div>
 258               <input type="button" data-ng-class="{'disabled': !isEditMode() && component.vspArchived}" data-ng-disabled="component.vspArchived" name="fileElement" />
 259               <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>
 260             </div>
 261           </div>
 262
 263           <div class="input-error-file-upload"   data-ng-disabled="!component.archived"  data-ng-show="component.importedFile && (!editForm.fileElement.$valid || !component.importedFile.filename)">
 264             <!-- editForm.fileElement.$error.required <== Can not use this, because the browse is done from outside for the first time -->
 265             <span ng-show="!(isEditMode()&&component.resourceType=='VF')&&!component.importedFile.filename" translate="NEW_SERVICE_RESOURCE_ERROR_TOSCA_FILE_REQUIRED"></span><!-- Required -->
 266             <span ng-show="editForm.fileElement.$error.maxsize" translate="VALIDATION_ERROR_MAX_FILE_SIZE"></span>
 267             <span ng-show="editForm.fileElement.$error.filetype" translate="NEW_SERVICE_RESOURCE_ERROR_VALID_TOSCA_EXTENSIONS" translate-values="{'extensions': '{{importedFileExtension}}' }"></span>
 268             <span ng-show="editForm.fileElement.$error.emptyFile" translate="VALIDATION_ERROR_EMPTY_FILE"></span>
 269           </div>
 270           <!--------------------- IMPORT TOSCA FILE -------------------->
 271
 272           <!--------------------- USER ID -------------------->
 273           <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.contactId)}">
 274             <label class="i-sdc-form-label required" translate="GENERAL_LABEL_CONTACT_ID"></label>
 275             <input class="i-sdc-form-input" type="text"
 276                    data-ng-model="component.contactId"
 277                    data-ng-class="{'view-mode': isViewMode()}"
 278                    data-ng-required="true"
 279                    name="contactId"
 280                    data-ng-pattern="validation.contactIdValidationPattern"
 281                    data-ng-model-options="{ debounce: 500 }"
 282                    data-tests-id="contactId"
 283                    data-ng-maxlength="50"
 284             />
 285
 286             <div class="input-error" data-ng-show="validateField(editForm.contactId)">
 287               <span ng-show="editForm.contactId.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span>
 288               <span ng-show="editForm.contactId.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_REQUIRED"></span>
 289               <span ng-show="editForm.contactId.$error.pattern" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_NOT_VALID"></span>
 290             </div>
 291           </div>
 292           <!--------------------- USER ID -------------------->
 293
 294           <!--------------------- VENDOR NAME -------------------->
 295           <div ng-if="component.isResource()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.vendorName)}">
 296             <label class="i-sdc-form-label required" translate="GENERAL_LABEL_VENDOR_NAME"></label>
 297             <input class="i-sdc-form-input" type="text"
 298                    data-ng-class="{'view-mode': isViewMode()}"
 299                    data-ng-model="component.vendorName"
 300                    data-ng-model-options="{ debounce: 500 }"
 301                    data-ng-maxlength="60"
 302                    data-required
 303                    ng-click="oldValue = component.vendorName"
 304                    name="vendorName"
 305                    data-ng-change="onVendorNameChange(oldValue)"
 306                    data-ng-pattern="validation.VendorNameValidationPattern"
 307                    data-ng-disabled="component.isAlreadyCertified() || (component.isCsarComponent() && component.vendorName && component.vendorName!=='')"
 308                    data-tests-id="vendorName"
 309             />
 310
 311             <div class="input-error" data-ng-show="validateField(editForm.vendorName)">
 312               <span ng-show="editForm.vendorName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_VENDOR_NAME_REQUIRED"></span>
 313               <span ng-show="editForm.vendorName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '60' }"></span>
 314               <span ng-show="editForm.vendorName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 315             </div>
 316
 317           </div>
 318           <!--------------------- VENDOR NAME -------------------->
 319
 320           <!--------------------- VENDOR RELEASE -------------------->
 321           <div ng-if="component.isResource()"
 322                class="i-sdc-form-item"
 323                data-ng-class="{'error': validateField(editForm.vendorRelease)}">
 324             <label class="i-sdc-form-label required" translate="GENERAL_LABEL_VENDOR_RELEASE"></label>
 325             <input class="i-sdc-form-input" type="text"
 326                    data-ng-class="{'view-mode': isViewMode()}"
 327                    data-ng-model="component.vendorRelease"
 328                    data-ng-model-options="{ debounce: 500 }"
 329                    data-ng-maxlength="25"
 330                    data-required
 331                    name="vendorRelease"
 332                    data-ng-pattern="validation.VendorReleaseValidationPattern"
 333                    data-ng-disabled="component.isCsarComponent() && component.vendorRelease && component.vendorRelease!==''"
 334                    data-tests-id="vendorRelease"
 335             />
 336
 337             <div class="input-error" data-ng-show="validateField(editForm.vendorRelease)">
 338               <span ng-show="editForm.vendorRelease.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_VENDOR_RELEASE_REQUIRED"></span>
 339               <span ng-show="editForm.vendorRelease.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '25' }"></span>
 340               <span ng-show="editForm.vendorRelease.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 341             </div>
 342           </div>
 343           <!--------------------- VENDOR RELEASE -------------------->
 344
 345           <!--------------------- Resource Model Number -------------------->
 346           <div ng-if="component.isResource()"
 347                class="i-sdc-form-item"
 348                data-ng-class="{'error': validateField(editForm.resourceVendorModelNumber)}">
 349             <label class="i-sdc-form-label" translate="GENERAL_LABEL_RESOURCE_MODEL_NUMBER"></label>
 350             <input class="i-sdc-form-input" type="text"
 351                    data-ng-class="{'view-mode': isViewMode()}"
 352                    data-ng-model="component.resourceVendorModelNumber"
 353                    data-ng-model-options="{ debounce: 500 }"
 354                    data-ng-maxlength="65"
 355                    name="resourceVendorModelNumber"
 356                    data-ng-pattern="validation.VendorModelNumberValidationPattern"
 357                    data-tests-id="resourceVendorModelNumber"
 358             />
 359
 360             <div class="input-error" data-ng-show="validateField(editForm.resourceVendorModelNumber)">
 361               <span ng-show="editForm.resourceVendorModelNumber.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '65' }"></span>
 362               <span ng-show="editForm.resourceVendorModelNumber.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 363             </div>
 364           </div>
 365           <!--------------------- Resource Model Number -------------------->
 366
 367           <!--------------------- ECOMPGENERATEDNAMING -------------------->
 368           <div class="i-sdc-form-item"
 369                data-ng-class="{'error': validateField(editForm.ecompGeneratedNaming)}"
 370                data-ng-if="component.isService() && !isNotApplicableMetadataKeys('Generated Naming')">
 371             <label class="i-sdc-form-label">Generated Naming</label>
 372             <select class="i-sdc-form-select"
 373                     data-required
 374                     name="ecompGeneratedNaming"
 375                     data-ng-change="onEcompGeneratedNamingChange()"
 376                     data-ng-class="{'view-mode': isViewMode()}"
 377                     data-ng-model="component.ecompGeneratedNaming"
 378                     data-tests-id="ecompGeneratedNaming">
 379               <option ng-value="true">true</option>
 380               <option ng-value="false">false</option>
 381             </select>
 382             <div class="input-error" data-ng-show="validateField(editForm.ecompGeneratedNaming)">
 383
 384             </div>
 385           </div>
 386           <!--------------------- CATEGORIES -------------------->
 387
 388           <!--------------------- NAMING POLICY  -------------------->
 389           <div ng-if="component.isService() && !isNotApplicableMetadataKeys('Naming Policy')" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.namingPolicy)}">
 390             <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Naming Policy', 'namingPolicy')">
 391               <div ng-if="isMetadataKeyMandatory('Naming Policy')">
 392                 <label class="i-sdc-form-label required">Naming Policy</label>
 393               </div>
 394               <div ng-if="!isMetadataKeyMandatory('Naming Policy')">
 395                 <label class="i-sdc-form-label">Naming Policy</label>
 396               </div>
 397               <select class="i-sdc-form-input" type="text"
 398                       ng-required="isMetadataKeyMandatory('Naming Policy')"
 399                       data-ng-class="{'view-mode': isViewMode()}"
 400                       data-ng-model="component.namingPolicy"
 401                       data-ng-model-options="{ debounce: 500 }"
 402                       name="namingPolicy"
 403                       data-tests-id="namingPolicy"
 404                       data-ng-maxlength="256"
 405                       data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
 406               > <option ng-repeat="value in getMetadataKeyValidValues('Naming Policy')">{{value}}</option>
 407               </select>
 408             </div>
 409             <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Naming Policy')">
 410               <label class="i-sdc-form-label">Naming Policy</label>
 411               <input class="i-sdc-form-input"
 412                      name="namingPolicy"
 413                      data-ng-class="{'view-mode': isViewMode() || !component.ecompGeneratedNaming}"
 414                      data-ng-maxlength="100"
 415                      data-ng-model="component.namingPolicy"
 416                      type="text"
 417                      data-ng-model-options="{ debounce: 500 }"
 418                      data-ng-pattern="validation.commentValidationPattern"
 419                      data-tests-id="namingPolicy"
 420                      autofocus
 421                      ng-readonly="isViewMode() || !component.ecompGeneratedNaming"
 422               />
 423             </div>
 424             <div class="input-error" data-ng-show="validateField(editForm.namingPolicy)">
 425               <span ng-show="editForm.namingPolicy.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span>
 426               <span ng-show="editForm.namingPolicy.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 427             </div>
 428           </div>
 429           <!--------------------- NAMING POLICY  -------------------->
 430
 431           <!--------------------- Service Type -------------------->
 432           <div ng-if="component.isService() && !isNotApplicableMetadataKeys('Service Type')"
 433                class="i-sdc-form-item"
 434                data-ng-class="{'error': validateField(editForm.serviceFunctionType)}">
 435             <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Service Type', 'serviceType')">
 436               <div ng-if="isMetadataKeyMandatory('Service Type')">
 437                 <label class="i-sdc-form-label required" translate="GENERAL_TAB_LABEL_SERVICE_TYPE"></label>
 438               </div>
 439               <div ng-if="!isMetadataKeyMandatory('Service Type')">
 440                 <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_TYPE"></label>
 441               </div>
 442               <select class="i-sdc-form-input" type="text"
 443                       ng-required="isMetadataKeyMandatory('Service Type')"
 444                       data-ng-class="{'view-mode': isViewMode()}"
 445                       data-ng-model="component.serviceType"
 446                       data-ng-model-options="{ debounce: 500 }"
 447                       name="serviceType"
 448                       data-tests-id="serviceType"
 449                       data-ng-maxlength="256"
 450                       data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
 451               > <option ng-repeat="value in getMetadataKeyValidValues('Service Type')">{{value}}</option>
 452               </select>
 453             </div>
 454             <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Service Type')">
 455               <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_TYPE"></label>
 456               <input class="i-sdc-form-input" type="text"
 457                      data-ng-class="{'view-mode': isViewMode()}"
 458                      data-ng-model="component.serviceType"
 459                      data-ng-model-options="{ debounce: 500 }"
 460                      name="serviceType"
 461                      data-tests-id="serviceType"
 462                      data-ng-maxlength="256"
 463                      data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
 464               />
 465             </div>
 466             <div class="input-error" data-ng-show="validateField(editForm.serviceType)">
 467               <span ng-show="editForm.serviceType.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
 468               <span ng-show="editForm.serviceType.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 469             </div>
 470           </div>
 471           <!--------------------- Service Type -------------------->
 472
 473           <!--------------------- Service Role -------------------->
 474           <div ng-if="component.isService() && !isNotApplicableMetadataKeys('Service Role')"
 475                class="i-sdc-form-item"
 476                data-ng-class="{'error': validateField(editForm.serviceRole)}">
 477             <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Service Role', 'serviceRole')">
 478               <div ng-if="isMetadataKeyMandatory('Service Role')">
 479                 <label class="i-sdc-form-label required" translate="GENERAL_TAB_LABEL_SERVICE_ROLE"></label>
 480               </div>
 481               <div ng-if="!isMetadataKeyMandatory('Service Role')">
 482                 <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_ROLE"></label>
 483               </div>
 484               <select class="i-sdc-form-input" type="text"
 485                       ng-required="isMetadataKeyMandatory('Service Role')"
 486                       data-ng-class="{'view-mode': isViewMode()}"
 487                       data-ng-model="component.serviceRole"
 488                       data-ng-model-options="{ debounce: 500 }"
 489                       name="serviceRole"
 490                       data-tests-id="serviceRole"
 491                       data-ng-maxlength="256"
 492               > <option ng-repeat="value in getMetadataKeyValidValues('Service Role')">{{value}}</option>
 493               </select>
 494             </div>
 495             <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Service Role')">
 496               <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_ROLE"></label>
 497               <input class="i-sdc-form-input" type="text"
 498                      data-ng-class="{'view-mode': isViewMode()}"
 499                      data-ng-model="component.serviceRole"
 500                      data-ng-model-options="{ debounce: 500 }"
 501                      name="serviceRole"
 502                      data-tests-id="serviceRole"
 503                      data-ng-maxlength="256"
 504                      data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
 505               />
 506             </div>
 507             <div class="input-error" data-ng-show="validateField(editForm.serviceRole)">
 508               <span ng-show="editForm.serviceRole.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
 509               <span ng-show="editForm.serviceRole.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 510             </div>
 511           </div>
 512           <!--------------------- Service Role -------------------->
 513
 514           <!--------------------- Service Function -------------------->
 515           <div ng-if="component.isService() && !isNotApplicableMetadataKeys('Service Function')"
 516                class="i-sdc-form-item"
 517                data-ng-class="{'error': validateField(editForm.serviceFunction)}">
 518             <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Service Function', 'serviceFunction')">
 519               <div ng-if="isMetadataKeyMandatory('Service Function')">
 520                 <label class="i-sdc-form-label required" translate="GENERAL_TAB_LABEL_SERVICE_FUNCTION"></label>
 521               </div>
 522               <div ng-if="!isMetadataKeyMandatory('Service Function')">
 523                 <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_FUNCTION"></label>
 524               </div>
 525               <select class="i-sdc-form-input" type="text"
 526                       ng-required="isMetadataKeyMandatory('Service Function')"
 527                       data-ng-class="{'view-mode': isViewMode()}"
 528                       data-ng-model="component.serviceFunction"
 529                       data-ng-model-options="{ debounce: 500 }"
 530                       name="serviceFunction"
 531                       data-tests-id="serviceFunction"
 532                       data-ng-maxlength="256"
 533                       data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
 534               > <option ng-repeat="value in getMetadataKeyValidValues('Service Function')">{{value}}</option>
 535               </select>
 536             </div>
 537             <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Service Function')">
 538               <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_FUNCTION"></label>
 539               <input class="i-sdc-form-input" type="text"
 540                      data-ng-class="{'view-mode': isViewMode()}"
 541                      data-ng-model="component.serviceFunction"
 542                      name="serviceFunction"
 543                      data-tests-id="serviceFunction"
 544                      data-ng-maxlength="256"
 545                      data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
 546               />
 547             </div>
 548             <div class="input-error" data-ng-show="validateField(editForm.serviceFunction)">
 549               <span ng-show="editForm.serviceFunction.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
 550               <span ng-show="editForm.serviceFunction.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 551             </div>
 552           </div>
 553           <!--------------------- Service Function -------------------->
 554
 555           <!-------------------- ENVIRONMENT CONTEXT  ----------------->
 556           <div  ng-if="component.isService() && !isNotApplicableMetadataKeys('Environment Context')" class="i-sdc-form-item">
 557             <loader data-display="!environmentContextObj && !initEnvironmentContext()" relative="true"></loader>
 558             <label class="i-sdc-form-label">Environment Context</label>
 559             <select class="i-sdc-form-select"
 560                     name="environmentContext"
 561                     data-ng-class="{'view-mode': isViewMode()}"
 562                     data-ng-model="component.environmentContext"
 563                     data-tests-id="environmentContext"
 564             >
 565               <option data-ng-repeat="environmentContextVal in (environmentContextObj.validValues) | orderBy"
 566                       value="{{environmentContextVal}}"
 567                       data-tests-id="{{environmentContextVal}}">{{environmentContextVal}}</option>
 568             </select>
 569
 570           </div>
 571           <!--------------------- ENVIRONMENT CONTEXT ------------------>
 572
 573           <!--------------------- Instantiation Type -------------------->
 574           <div class="i-sdc-form-item" data-ng-if="component.isService() && instantiationTypes && !isNotApplicableMetadataKeys('Instantiation Type')">
 575             <label class="i-sdc-form-label">Instantiation Type</label>
 576             <select class="i-sdc-form-select"
 577                     name="instantiationType"
 578                     data-ng-class="{'view-mode': isViewMode()}"
 579                     data-ng-disabled="component.isCsarComponent()"
 580                     data-ng-model="component.instantiationType"
 581                     data-tests-id="selectInstantiationType">
 582               <option ng-repeat="type in instantiationTypes">{{type}}</option>
 583
 584             </select>
 585           </div>
 586           <!--------------------- Instantiation Type -------------------->
 587
 588           <!--------------------- Base Type -------------------->
 589           <div class="w-sdc-form-columns-wrapper">
 590             <div class="w-sdc-form-column">
 591               <div class="i-sdc-form-item" ng-if="component.isService() && baseTypes && baseTypes.length > 0 && !isNotApplicableMetadataKeys('Substitution Node Type')">
 592                 <label class="i-sdc-form-label">Substitution Node Type</label>
 593                 <select class="i-sdc-form-select"
 594                         name="baseType"
 595                         data-ng-class="{'view-mode': isViewMode()}"
 596                         data-ng-disabled="component.isCsarComponent() || !isCreateMode()"
 597                         data-ng-model="component.derivedFromGenericType"
 598                         data-ng-change="onBaseTypeChange()"
 599                         data-tests-id="selectBaseType"
 600                         data-ng-options="type for type in baseTypes track by type">
 601                   <option value="" data-ng-if="!isBaseTypeRequired">None</option>
 602                 </select>
 603               </div>
 604             </div>
 605             <div class="w-sdc-form-column">
 606               <div class="i-sdc-form-item" data-ng-if="component.isService() && showBaseTypeVersions && !isNotApplicableMetadataKeys('Substitution Node Type Version')">
 607                 <label class="i-sdc-form-label">Substitution Node Type Version</label>
 608                 <select class="i-sdc-form-select"
 609                         name="baseTypeVersion"
 610                         data-ng-class="{'view-mode': isViewMode()}"
 611                         data-ng-disabled="component.isCsarComponent() || !isCreateMode()"
 612                         data-ng-model="component.derivedFromGenericVersion"
 613                         data-tests-id="selectBaseTypeVersion">
 614                   <option ng-repeat="version in baseTypeVersions">{{version}}</option>
 615                 </select>
 616               </div>
 617             </div>
 618           </div>
 619           <!--------------------- Base Type -------------------->
 620
 621           <div class="meta-data" data-ng-if="component.creationDate">
 622             <div>
 623               <strong>Created:</strong>
 624             </div>
 625             <div class="meta-data-item-value">{{component.creationDate | date:'MM/dd/yyyy'}}, {{component.creatorFullName}}</div>
 626             <div>
 627               <strong>Modifed:</strong>
 628             </div>
 629             <div class="meta-data-item-value">
 630               {{component.lastUpdateDate | date:'MM/dd/yyyy'}}
 631             </div>
 632             <div>
 633               <strong>UUID:</strong>
 634             </div>
 635             <div class="meta-data-item-value">
 636               {{component.uuid}}
 637             </div>
 638             <div>
 639               <strong>Invariant UUID:</strong>
 640             </div>
 641             <div class="meta-data-item-value">
 642               {{component.invariantUUID}}
 643             </div>
 644           </div>
 645         </div><!-- Close w-sdc-form-column -->
 646       </div>
 647
 648     </div><!-- Close w-sdc-form-section-container -->
 649
 650   </form>
 651 </div>