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