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
  80
  81                             <!--------------------- CATEGORIES -------------------->
  82                             <div class="i-sdc-form-item"
  83                                  data-ng-class="{'error': validateField(editForm.category)}">
  84                                 <loader data-display="!categories && !initCategoreis()" relative="true"></loader>
  85                                 <label class="i-sdc-form-label required" translate="GENERAL_LABEL_CATEGORY"></label>
  86                                 <select class="i-sdc-form-select"
  87                                         data-required
  88                                         name="category"
  89                                         data-ng-class="{'view-mode': isViewMode()}"
  90                                         data-ng-change="onCategoryChange()"
  91                                         data-ng-disabled="component.isAlreadyCertified() || (component.isCsarComponent() && component.selectedCategory && component.selectedCategory!=='') || isHiddenCategorySelected"
  92                                         data-ng-model="componentCategories.selectedCategory"
  93                                         data-tests-id="selectGeneralCategory"
  94                                 >
  95                                     <option value="">Select category</option>
  96                                     <optgroup ng-if="component.isResource()" data-ng-repeat="mainCategory in categories | orderBy:['name']" label="{{mainCategory.name}}" data-tests-id="{{mainCategory.name}}">
  97                                         <option data-ng-repeat="subCategory in mainCategory.subcategories track by $index"
  98                                                 data-ng-selected="componentCategories.selectedCategory === calculateUnique(mainCategory.name,subCategory.name)"
  99                                                 data-tests-id="{{subCategory.name}}"
 100                                                 value="{{calculateUnique(mainCategory.name, subCategory.name)}}">{{subCategory.name}}
 101
 102                                         </option>
 103                                     </optgroup>
 104                                     <option ng-if="component.isService()" data-ng-repeat="mainCategory in categories | orderBy:['name']"
 105                                             data-ng-selected="component.selectedCategory===mainCategory.name"
 106                                             value="{{mainCategory.name}}"
 107                                             data-tests-id="{{mainCategory.name}}">{{mainCategory.name}}</option>
 108                                 </select>
 109
 110                                 <div class="input-error" data-ng-show="validateField(editForm.category)">
 111                                     <span ng-show="editForm.category.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_CATEGORY_REQUIRED"></span>
 112                                 </div>
 113                             </div>
 114                             <!--------------------- CATEGORIES -------------------->
 115                         </div>
 116                     </div>
 117
 118                     <!--------------------- Category Specific Metadata -------------------->
 119
 120                     <div ng-if="component.selectedCategory">
 121                         <ng-container ng-repeat="(key, value) in component.categorySpecificMetadata"-->
 122                             <div ng-if="isMetadataKeyForComponentCategory(key) && getMetadataKeyValidValues(key) && isMetadataKeyMandatory(key)"
 123                                  class="i-sdc-form-item"
 124                                  data-ng-class="{'error': validateField(editForm['{{key}}'])}">
 125                                 <label class="i-sdc-form-label required" translate="{{key}}"></label>
 126                                 <select class="i-sdc-form-select"
 127                                     name="{{key}}"
 128                                     data-ng-class="{'view-mode': isViewMode()}"
 129                                     data-ng-model="component.categorySpecificMetadata[key]"
 130                                     data-tests-id="{{key}}"
 131                                     data-required>
 132                                    <option ng-repeat="value in getMetadataKeyValidValues(key)">{{value}}</option>
 133                                 </select>
 134                                 <div class="input-error" data-ng-show="validateField(editForm['{{key}}'])">
 135                                     <span ng-show="editForm['{{key}}'].$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_REQUIRED"></span>
 136                                 </div>
 137                             </div>
 138                             <div ng-if="isMetadataKeyForComponentCategory(key) && getMetadataKeyValidValues(key) && !isMetadataKeyMandatory(key)"
 139                                  class="i-sdc-form-item">
 140                                 <label class="i-sdc-form-label" translate="{{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                                    <option ng-repeat="value in getMetadataKeyValidValues(key)">{{value}}</option>
 147                                 </select>
 148                             </div>
 149                             <div ng-if="isMetadataKeyForComponentCategory(key) && !getMetadataKeyValidValues(key) && isMetadataKeyMandatory(key)"
 150                                  class="i-sdc-form-item"
 151                                  data-ng-class="{'error': validateField(editForm['{{key}}'])}">
 152                                 <label class="i-sdc-form-label required" translate="{{key}}"></label>
 153                                 <input class="i-sdc-form-input" type="text"
 154                                        data-required
 155                                        data-ng-class="{'view-mode': isViewMode()}"
 156                                        data-ng-model="component.categorySpecificMetadata[key]"
 157                                        name="{{key}}"
 158                                        data-tests-id="{{key}}"
 159                                 />
 160                                 <div class="input-error" data-ng-show="validateField(editForm['{{key}}'])">
 161                                     <span ng-show="editForm['{{key}}'].$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_REQUIRED"></span>
 162                                 </div>
 163                             </div>
 164                             <div ng-if="isMetadataKeyForComponentCategory(key) && !getMetadataKeyValidValues(key) && !isMetadataKeyMandatory(key)"
 165                                  class="i-sdc-form-item">
 166                                 <label class="i-sdc-form-label" translate="{{key}}"></label>
 167                                 <input class="i-sdc-form-input" type="text"
 168                                        data-ng-class="{'view-mode': isViewMode()}"
 169                                        data-ng-model="component.categorySpecificMetadata[key]"
 170                                        name="{{key}}"
 171                                        data-tests-id="{{key}}"
 172                                 />
 173                             </div>
 174                         </ng-container>
 175                     </div>
 176                 <!--------------------- RESOURCE TAGS -------------------->
 177                 <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.tags)}">
 178                     <label class="i-sdc-form-label" translate="GENERAL_LABEL_TAGS"></label>
 179
 180                     <sdc-tags form-element="editForm" element-name="tags" max-tags="20" class="i-sdc-form-item-tags"
 181                               sdc-disabled="isViewMode()"
 182                               tags="component.tags"
 183                               pattern="validation.tagValidationPattern"
 184                               special-tag="component.name"></sdc-tags>
 185
 186                     <div class="input-error" data-ng-show="validateField(editForm.tags)">
 187                         <span ng-show="editForm.tags.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 188                         <span ng-show="editForm.tags.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_TAG_NAME_EXIST"></span>
 189                     </div>
 190                 </div>
 191                 <!--------------------- RESOURCE TAGS -------------------->
 192
 193                 <!--------------------- DESCRIPTION -------------------->
 194                 <div class="i-sdc-form-item description-field"
 195                      data-ng-class="{'error': validateField(editForm.description)}">
 196                     <label class="i-sdc-form-label required" translate="GENERAL_LABEL_DESCRIPTION"></label>
 197                 <textarea class="description"
 198                           name="description"
 199                           data-ng-class="{'view-mode': isViewMode()}"
 200                           data-ng-maxlength="1024"
 201                           data-required
 202                           data-ng-model="component.description"
 203                           data-ng-model-options="{ debounce: 500 }"
 204                           data-ng-pattern="validation.commentValidationPattern"
 205                           data-tests-id="description"></textarea>
 206                     <!-- placeholder="Description here..." -->
 207
 208                     <div class="input-error" data-ng-show="validateField(editForm.description)">
 209                         <span ng-show="editForm.description.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_DESCRIPTION_REQUIRED"></span>
 210                         <span ng-show="editForm.description.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '1024' }"></span>
 211                         <span ng-show="editForm.description.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 212                     </div>
 213                 </div>
 214                 <!--------------------- DESCRIPTION -------------------->
 215
 216             </div><!-- Close w-sdc-form-column -->
 217
 218                 <div class="w-sdc-form-column">
 219                     <!--------------------- IMPORT TOSCA FILE USING BROWSE (ALSO VFC) -------------------->
 220                     <div class="i-sdc-form-item" ng-if="isShowFileBrowse">
 221
 222                         <!-- //                                     element-disabled="{{!isCreateMode()&&!(isEditMode()&&component.resourceType=='VF')&&component.vspArchived}} || {{isViewMode()}}" -->
 223
 224                         <label class="i-sdc-form-label" data-ng-class="{'required':isCreateMode() && component.resourceType !=='VF'}">{{browseFileLabel}}</label>
 225                         <file-upload id="fileUploadElement"
 226                                      class="i-sdc-form-input"
 227                                      element-name="fileElement"
 228                                      data-ng-required="false"
 229                                      element-disabled="{{(!isCreateMode()&&!(isEditMode()&&component.resourceType=='VF'))|| isViewMode() || component.vspArchived}}"
 230                                      form-element="editForm"
 231                                      file-model="component.importedFile"
 232                                      on-file-changed-in-directive="onImportFileChange"
 233                                      extensions="{{importedFileExtension}}"
 234                                      default-text="'Browse to select file'"
 235                                      ></file-upload>
 236                     </div>
 237
 238                     <!--------------------- IMPORT TOSCA FILE USING ONBOARDING -------------------->
 239                     <div class="i-sdc-form-item" ng-if="isShowOnboardingSelectionBrowse && !isShowFileBrowse">
 240                             <label class="i-sdc-form-label required">VSP</label>
 241                             <div class="i-sdc-form-file-upload i-sdc-form-input">
 242                                 <span class="i-sdc-form-file-name"  data-ng-disabled="component.vspArchived"  data-tests-id="filename">{{(fileModel && fileModel.filename) || importedToscaBrowseFileText }}</span>
 243                                 <div class="i-sdc-form-file-upload-x-btn" ng-click="cancel()" data-ng-show="fileModel.filename && fileModel.filename!=='' && elementDisabled!=='true'"></div>
 244                                 <input type="button" data-ng-class="{'disabled': !isEditMode() && component.vspArchived}" data-ng-disabled="component.vspArchived" name="fileElement" />
 245                                 <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>
 246                             </div>
 247                     </div>
 248
 249                     <div class="input-error-file-upload"   data-ng-disabled="!component.archived"  data-ng-show="component.importedFile && (!editForm.fileElement.$valid || !component.importedFile.filename)">
 250                         <!-- editForm.fileElement.$error.required <== Can not use this, because the browse is done from outside for the first time -->
 251                         <span ng-show="!(isEditMode()&&component.resourceType=='VF')&&!component.importedFile.filename" translate="NEW_SERVICE_RESOURCE_ERROR_TOSCA_FILE_REQUIRED"></span><!-- Required -->
 252                         <span ng-show="editForm.fileElement.$error.maxsize" translate="VALIDATION_ERROR_MAX_FILE_SIZE"></span>
 253                         <span ng-show="editForm.fileElement.$error.filetype" translate="NEW_SERVICE_RESOURCE_ERROR_VALID_TOSCA_EXTENSIONS" translate-values="{'extensions': '{{importedFileExtension}}' }"></span>
 254                         <span ng-show="editForm.fileElement.$error.emptyFile" translate="VALIDATION_ERROR_EMPTY_FILE"></span>
 255                     </div>
 256                     <!--------------------- IMPORT TOSCA FILE -------------------->
 257
 258                     <!--------------------- USER ID -------------------->
 259                     <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.contactId)}">
 260                     <label class="i-sdc-form-label required" translate="GENERAL_LABEL_CONTACT_ID"></label>
 261                     <input class="i-sdc-form-input" type="text"
 262                                data-ng-model="component.contactId"
 263                                data-ng-class="{'view-mode': isViewMode()}"
 264                                data-ng-required="true"
 265                                name="contactId"
 266                                data-ng-pattern="validation.contactIdValidationPattern"
 267                                data-ng-model-options="{ debounce: 500 }"
 268                                data-tests-id="contactId"
 269                                data-ng-maxlength="50"
 270                         />
 271
 272                         <div class="input-error" data-ng-show="validateField(editForm.contactId)">
 273                             <span ng-show="editForm.contactId.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span>
 274                             <span ng-show="editForm.contactId.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_REQUIRED"></span>
 275                             <span ng-show="editForm.contactId.$error.pattern" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_NOT_VALID"></span>
 276                         </div>
 277                     </div>
 278                     <!--------------------- USER ID -------------------->
 279
 280                 <!--------------------- VENDOR NAME -------------------->
 281                 <div ng-if="component.isResource()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.vendorName)}">
 282                     <label class="i-sdc-form-label required" translate="GENERAL_LABEL_VENDOR_NAME"></label>
 283                     <input class="i-sdc-form-input" type="text"
 284                            data-ng-class="{'view-mode': isViewMode()}"
 285                            data-ng-model="component.vendorName"
 286                            data-ng-model-options="{ debounce: 500 }"
 287                            data-ng-maxlength="60"
 288                            data-required
 289                            ng-click="oldValue = component.vendorName"
 290                            name="vendorName"
 291                            data-ng-change="onVendorNameChange(oldValue)"
 292                            data-ng-pattern="validation.VendorNameValidationPattern"
 293                            data-ng-disabled="component.isAlreadyCertified() || (component.isCsarComponent() && component.vendorName && component.vendorName!=='')"
 294                            data-tests-id="vendorName"
 295                     />
 296
 297                     <div class="input-error" data-ng-show="validateField(editForm.vendorName)">
 298                         <span ng-show="editForm.vendorName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_VENDOR_NAME_REQUIRED"></span>
 299                         <span ng-show="editForm.vendorName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '60' }"></span>
 300                         <span ng-show="editForm.vendorName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 301                     </div>
 302
 303                 </div>
 304
 305                 <!--------------------- VENDOR NAME -------------------->
 306
 307                 <!--------------------- VENDOR RELEASE -------------------->
 308                 <div ng-if="component.isResource()"
 309                      class="i-sdc-form-item"
 310                      data-ng-class="{'error': validateField(editForm.vendorRelease)}">
 311                     <label class="i-sdc-form-label required" translate="GENERAL_LABEL_VENDOR_RELEASE"></label>
 312                     <input class="i-sdc-form-input" type="text"
 313                            data-ng-class="{'view-mode': isViewMode()}"
 314                            data-ng-model="component.vendorRelease"
 315                            data-ng-model-options="{ debounce: 500 }"
 316                            data-ng-maxlength="25"
 317                            data-required
 318                            name="vendorRelease"
 319                            data-ng-pattern="validation.VendorReleaseValidationPattern"
 320                            data-ng-disabled="component.isCsarComponent() && component.vendorRelease && component.vendorRelease!==''"
 321                            data-tests-id="vendorRelease"
 322                     />
 323
 324                     <div class="input-error" data-ng-show="validateField(editForm.vendorRelease)">
 325                         <span ng-show="editForm.vendorRelease.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_VENDOR_RELEASE_REQUIRED"></span>
 326                         <span ng-show="editForm.vendorRelease.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '25' }"></span>
 327                         <span ng-show="editForm.vendorRelease.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 328                     </div>
 329                 </div>
 330                 <!--------------------- VENDOR RELEASE -------------------->
 331
 332                 <!--------------------- Resource Model Number -------------------->
 333                 <div ng-if="component.isResource()"
 334                      class="i-sdc-form-item"
 335                      data-ng-class="{'error': validateField(editForm.resourceVendorModelNumber)}">
 336                     <label class="i-sdc-form-label" translate="GENERAL_LABEL_RESOURCE_MODEL_NUMBER"></label>
 337                     <input class="i-sdc-form-input" type="text"
 338                            data-ng-class="{'view-mode': isViewMode()}"
 339                            data-ng-model="component.resourceVendorModelNumber"
 340                            data-ng-model-options="{ debounce: 500 }"
 341                            data-ng-maxlength="65"
 342                            name="resourceVendorModelNumber"
 343                            data-ng-pattern="validation.VendorModelNumberValidationPattern"
 344                            data-tests-id="resourceVendorModelNumber"
 345                     />
 346
 347                     <div class="input-error" data-ng-show="validateField(editForm.resourceVendorModelNumber)">
 348                         <span ng-show="editForm.resourceVendorModelNumber.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '65' }"></span>
 349                         <span ng-show="editForm.resourceVendorModelNumber.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 350                     </div>
 351                 </div>
 352                 <!--------------------- Resource Model Number -------------------->
 353
 354                 <!--------------------- ECOMPGENERATEDNAMING -------------------->
 355
 356                     <div class="i-sdc-form-item"
 357                          data-ng-class="{'error': validateField(editForm.ecompGeneratedNaming)}"
 358                          data-ng-if="component.isService()">
 359                         <label class="i-sdc-form-label">Generated Naming</label>
 360                         <select class="i-sdc-form-select"
 361                                 data-required
 362                                 name="ecompGeneratedNaming"
 363                                 data-ng-change="onEcompGeneratedNamingChange()"
 364                                 data-ng-class="{'view-mode': isViewMode()}"
 365                                 data-ng-model="component.ecompGeneratedNaming"
 366                                 data-tests-id="ecompGeneratedNaming">
 367                             <option ng-value="true">true</option>
 368                             <option ng-value="false">false</option>
 369                         </select>
 370                         <div class="input-error" data-ng-show="validateField(editForm.ecompGeneratedNaming)">
 371
 372                         </div>
 373                     </div>
 374                     <!--------------------- CATEGORIES -------------------->
 375
 376                     <!--------------------- NAMING POLICY  -------------------->
 377                     <div ng-if="component.isService()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.namingPolicy)}">
 378                         <label class="i-sdc-form-label">Naming Policy</label>
 379                         <input class="i-sdc-form-input"
 380                                name="namingPolicy"
 381                                data-ng-class="{'view-mode': isViewMode() || !component.ecompGeneratedNaming}"
 382                                data-ng-maxlength="100"
 383                                data-ng-model="component.namingPolicy"
 384                                type="text"
 385                                data-ng-model-options="{ debounce: 500 }"
 386                                data-ng-pattern="validation.commentValidationPattern"
 387                                data-tests-id="namingPolicy"
 388                                autofocus
 389                                ng-readonly="isViewMode() || !component.ecompGeneratedNaming"
 390                         />
 391
 392                         <div class="input-error" data-ng-show="validateField(editForm.namingPolicy)">
 393                             <span ng-show="editForm.namingPolicy.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span>
 394                             <span ng-show="editForm.namingPolicy.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 395                         </div>
 396                     </div>
 397                     <!--------------------- NAMING POLICY  -------------------->
 398
 399                     <!--------------------- Service Type -------------------->
 400                     <div ng-if="component.isService()"
 401                          class="i-sdc-form-item"
 402                          data-ng-class="{'error': validateField(editForm.serviceType)}">
 403                         <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_TYPE"></label>
 404                         <input class="i-sdc-form-input" type="text"
 405                                data-ng-class="{'view-mode': isViewMode()}"
 406                                data-ng-model="component.serviceType"
 407                                data-ng-model-options="{ debounce: 500 }"
 408                                name="serviceType"
 409                                data-tests-id="serviceType"
 410                                data-ng-maxlength="256"
 411                                data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
 412                         />
 413                         <div class="input-error" data-ng-show="validateField(editForm.serviceType)">
 414                             <span ng-show="editForm.serviceType.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
 415                             <span ng-show="editForm.serviceType.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 416                         </div>
 417                     </div>
 418                     <!--------------------- Service Type -------------------->
 419
 420                     <!--------------------- Service Role -------------------->
 421                     <div ng-if="component.isService()"
 422                          class="i-sdc-form-item"
 423                          data-ng-class="{'error': validateField(editForm.serviceRole)}">
 424                         <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_ROLE"></label>
 425                         <input class="i-sdc-form-input" type="text"
 426                                data-ng-class="{'view-mode': isViewMode()}"
 427                                data-ng-model="component.serviceRole"
 428                                data-ng-model-options="{ debounce: 500 }"
 429                                name="serviceRole"
 430                                data-tests-id="serviceRole"
 431                                data-ng-maxlength="256"
 432                                data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
 433                         />
 434                         <div class="input-error" data-ng-show="validateField(editForm.serviceRole)">
 435                             <span ng-show="editForm.serviceRole.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
 436                             <span ng-show="editForm.serviceRole.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 437                         </div>
 438                     </div>
 439                     <!--------------------- Service Role -------------------->
 440
 441                     <!--------------------- Service Function -------------------->
 442                     <div ng-if="component.isService()"
 443                          class="i-sdc-form-item"
 444                          data-ng-class="{'error': validateField(editForm.serviceFunction)}">
 445                         <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_FUNCTION"></label>
 446                         <input class="i-sdc-form-input" type="text"
 447                                data-ng-class="{'view-mode': isViewMode()}"
 448                                data-ng-model="component.serviceFunction"
 449                                data-ng-model-options="{ debounce: 500 }"
 450                                name="serviceFunction"
 451                                data-tests-id="serviceFunction"
 452                                data-ng-maxlength="256"
 453                                data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
 454                         />
 455                         <div class="input-error" data-ng-show="validateField(editForm.serviceFunction)">
 456                             <span ng-show="editForm.serviceFunction.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
 457                             <span ng-show="editForm.serviceFunction.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 458                         </div>
 459                     </div>
 460                     <!--------------------- Service Function -------------------->
 461
 462                     <!-------------------- ENVIRONMENT CONTEXT  ----------------->
 463
 464                     <div  ng-if="component.isService()" class="i-sdc-form-item">
 465                         <loader data-display="!environmentContextObj && !initEnvironmentContext()" relative="true"></loader>
 466                         <label class="i-sdc-form-label">Environment Context</label>
 467                         <select class="i-sdc-form-select"
 468                                 name="environmentContext"
 469                                 data-ng-class="{'view-mode': isViewMode()}"
 470                                 data-ng-model="component.environmentContext"
 471                                 data-tests-id="environmentContext"
 472                         >
 473                             <option data-ng-repeat="environmentContextVal in (environmentContextObj.validValues) | orderBy"
 474                                     value="{{environmentContextVal}}"
 475                                     data-tests-id="{{environmentContextVal}}">{{environmentContextVal}}</option>
 476                         </select>
 477
 478                     </div>
 479                     <!--------------------- ENVIRONMENT CONTEXT ------------------>
 480
 481                     <!--------------------- Instantiation Type -------------------->
 482                     <div class="i-sdc-form-item" data-ng-if="component.isService() && instantiationTypes">
 483                         <label class="i-sdc-form-label">Instantiation Type</label>
 484                         <select class="i-sdc-form-select"
 485                                 name="instantiationType"
 486                                 data-ng-class="{'view-mode': isViewMode()}"
 487                                 data-ng-disabled="component.isCsarComponent()"
 488                                 data-ng-model="component.instantiationType"
 489                                 data-tests-id="selectInstantiationType">
 490                         <option ng-repeat="type in instantiationTypes">{{type}}</option>
 491
 492                         </select>
 493                     </div>
 494
 495                     <!--------------------- Instantiation Type -------------------->
 496
 497                     <div class="meta-data" data-ng-if="component.creationDate">
 498                         <div>
 499                             <b>Created:</b>
 500                         </div>
 501                         <div class="meta-data-item-value">{{component.creationDate | date:'MM/dd/yyyy'}}, {{component.creatorFullName}}</div>
 502                         <div>
 503                             <b>Modifed:</b>
 504                         </div>
 505                         <div class="meta-data-item-value">
 506                             {{component.lastUpdateDate | date:'MM/dd/yyyy'}}
 507                         </div>
 508                         <div>
 509                             <b>UUID:</b>
 510                         </div>
 511                         <div class="meta-data-item-value">
 512                             {{component.uuid}}
 513                         </div>
 514                         <div>
 515                             <b>Invariant UUID:</b>
 516                         </div>
 517                         <div class="meta-data-item-value">
 518                             {{component.invariantUUID}}
 519                         </div>
 520                     </div>
 521                 </div><!-- Close w-sdc-form-column -->
 522             </div>
 523
 524         </div><!-- Close w-sdc-form-section-container -->
 525
 526     </form>
 527 </div>