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

   1 <div include-padding="true" class="sdc-workspace-general-step">
   2     <div class="w-sdc-main-container-body-content-action-buttons">
   3         <div data-ng-if="unsavedFile && !isCreateMode() && !isViewMode()" class="unsaved-file-warning">
   4              <span class="sprite-new sdc-warning"></span> Click save to update to the new VSP
   5         </div>
   6         <button class="tlv-btn blue" data-ng-if="isDesigner()" data-ng-show="isGeneralView()" data-ng-class="{'disabled' : !isValidForm  || isDisableMode() || isViewMode() || isCreateMode()}"
   7             data-ng-click="save()" data-tests-id="create/save" tooltips tooltip-content="Save">Save</button>
   8         <span data-ng-if="isDesigner()" data-ng-class="{'disabled' :isDisableMode() || isViewMode() || isCreateMode()}"  ng-click="revert()" class="sprite-new revert-btn" data-tests-id="revert"
   9               data-ng-show="isGeneralView()" tooltips tooltip-content="Revert"></span>
  10
  11     </div>
  12     <form novalidate class="w-sdc-form" name="editForm" validation-on-load form-to-validate="editForm">
  13
  14         <div class="w-sdc-form-section-container">
  15
  16             <div class="w-sdc-form-columns-wrapper">
  17
  18                 <div class="w-sdc-form-column">
  19                     <div class="upper-general-fields">
  20                         <div class="selected-icon-container" data-ng-class="{'show-only-on-over':'defaulticon'!=component.icon && !isViewMode()}">
  21                             <div class="selected-icon-inner-container ">
  22                                 <div class="sprite-new update-component-icon" data-ng-click="updateIcon()" data-ng-if="!isViewMode() && possibleToUpdateIcon()"></div>
  23                                 <div class="i-sdc-form-item-suggested-icon large selected-icon {{component.iconSprite}} {{component.icon}}"
  24                                      data-ng-class="{
  25                                      'disable': isViewMode() || !possibleToUpdateIcon(),
  26                                      'archive-component active-component-static': component.archived
  27                                      }"
  28                                      ng-model="component.icon"
  29                                      tooltips tooltip-content='{{component.icon | translate}}'
  30                                 >
  31                                 </div>
  32                             </div>
  33                         </div>
  34                         <div class="name-and-category-fields">
  35                             <!--------------------- NAME -------------------->
  36                             <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.componentName)}">
  37                                 <label class="i-sdc-form-label required">Name</label>
  38                                 <input class="i-sdc-form-input"
  39                                        data-ng-class="{'view-mode': isViewMode()}"
  40                                        name="componentName"
  41                                        data-ng-init="isCreateMode() && validateName(true)"
  42                                        data-ng-maxlength="50"
  43                                        data-ng-model="component.name"
  44                                        type="text"
  45                                        data-required
  46                                        data-ng-model-options="{ debounce: 500 }"
  47                                        data-ng-pattern="validation.componentNameValidationPattern"
  48                                        data-ng-disabled="component.isAlreadyCertified()"
  49                                        data-tests-id="name"
  50                                        autofocus
  51                                        ng-readonly="isViewMode()"
  52                                 />
  53
  54                                 <div class="input-error" data-ng-show="validateField(editForm.componentName)">
  55                                     <span ng-show="editForm.componentName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_NAME_REQUIRED"></span>
  56                                     <span ng-show="editForm.componentName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span>
  57                                     <span ng-show="editForm.componentName.$error.minlength" translate="VALIDATION_ERROR_MIN_LENGTH" translate-values="{'min': '4' }"></span>
  58                                     <span ng-show="editForm.componentName.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_NAME_EXISTS"></span>
  59                                     <span ng-show="editForm.componentName.$error.pattern" translate="VALIDATION_ERROR_INVALID_NAME"></span>
  60                                 </div>
  61                             </div>
  62                             <!--------------------- NAME -------------------->
  63
  64
  65
  66                             <!--------------------- CATEGORIES -------------------->
  67                             <div class="i-sdc-form-item"
  68                                  data-ng-class="{'error': validateField(editForm.category)}">
  69                                 <loader data-display="!categories && !initCategoreis()" relative="true"></loader>
  70                                 <label class="i-sdc-form-label required">Category</label>
  71                                 <select class="i-sdc-form-select"
  72                                         data-required
  73                                         name="category"
  74                                         data-ng-class="{'view-mode': isViewMode()}"
  75                                         data-ng-change="onCategoryChange()"
  76                                         data-ng-disabled="component.isAlreadyCertified() || (component.isCsarComponent() && component.selectedCategory && component.selectedCategory!=='')"
  77                                         data-ng-model="componentCategories.selectedCategory"
  78                                         data-tests-id="selectGeneralCategory"
  79                                 >
  80                                     <option value="">Select category</option>
  81                                     <optgroup ng-if="component.isResource()" data-ng-repeat="mainCategory in categories | orderBy:['name']" label="{{mainCategory.name}}" data-tests-id="{{mainCategory.name}}">
  82                                         <option data-ng-repeat="subCategory in mainCategory.subcategories track by $index"
  83                                                 data-ng-selected="componentCategories.selectedCategory === calculateUnique(mainCategory.name,subCategory.name)"
  84                                                 data-tests-id="{{subCategory.name}}"
  85                                                 value="{{calculateUnique(mainCategory.name, subCategory.name)}}">{{subCategory.name}}
  86
  87                                         </option>
  88                                     </optgroup>
  89                                     <option ng-if="component.isService()" data-ng-repeat="mainCategory in categories | orderBy:['name']"
  90                                             data-ng-selected="component.selectedCategory===mainCategory.name"
  91                                             value="{{mainCategory.name}}"
  92                                             data-tests-id="{{mainCategory.name}}">{{mainCategory.name}}</option>
  93                                 </select>
  94
  95                                 <div class="input-error" data-ng-show="validateField(editForm.category)">
  96                                     <span ng-show="editForm.category.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_CATEGORY_REQUIRED"></span>
  97                                 </div>
  98                             </div>
  99                             <!--------------------- CATEGORIES -------------------->
 100                         </div>
 101                     </div>
 102                 <!--------------------- RESOURCE TAGS -------------------->
 103                 <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.tags)}">
 104                     <label class="i-sdc-form-label">Tags</label>
 105
 106                     <sdc-tags form-element="editForm" element-name="tags" max-tags="20" class="i-sdc-form-item-tags"
 107                               sdc-disabled="isViewMode()"
 108                               tags="component.tags"
 109                               pattern="validation.tagValidationPattern"
 110                               special-tag="component.name"></sdc-tags>
 111
 112                     <div class="input-error" data-ng-show="validateField(editForm.tags)">
 113                         <span ng-show="editForm.tags.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 114                         <span ng-show="editForm.tags.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_TAG_NAME_EXIST"></span>
 115                     </div>
 116                 </div>
 117                 <!--------------------- RESOURCE TAGS -------------------->
 118
 119                 <!--------------------- DESCRIPTION -------------------->
 120                 <div class="i-sdc-form-item description-field"
 121                      data-ng-class="{'error': validateField(editForm.description)}">
 122                     <label class="i-sdc-form-label required">Description</label>
 123                 <textarea class="description"
 124                           name="description"
 125                           data-ng-class="{'view-mode': isViewMode()}"
 126                           data-ng-maxlength="1024"
 127                           data-required
 128                           data-ng-model="component.description"
 129                           data-ng-model-options="{ debounce: 500 }"
 130                           data-ng-pattern="validation.commentValidationPattern"
 131                           data-tests-id="description"></textarea>
 132                     <!-- placeholder="Description here..." -->
 133
 134                     <div class="input-error" data-ng-show="validateField(editForm.description)">
 135                         <span ng-show="editForm.description.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_DESCRIPTION_REQUIRED"></span>
 136                         <span ng-show="editForm.description.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '1024' }"></span>
 137                         <span ng-show="editForm.description.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 138                     </div>
 139                 </div>
 140                 <!--------------------- DESCRIPTION -------------------->
 141
 142             </div><!-- Close w-sdc-form-column -->
 143
 144                 <div class="w-sdc-form-column">
 145                     <!--------------------- IMPORT TOSCA FILE USING BROWSE (ALSO VFC) -------------------->
 146                     <div class="i-sdc-form-item" ng-if="isShowFileBrowse">
 147
 148                         <!-- //                                     element-disabled="{{!isCreateMode()&&!(isEditMode()&&component.resourceType=='VF')&&component.vspArchived}} || {{isViewMode()}}" -->
 149
 150                         <label class="i-sdc-form-label" data-ng-class="{'required':isCreateMode()}">{{browseFileLabel}}</label>
 151                         <file-upload id="fileUploadElement"
 152                                      class="i-sdc-form-input"
 153                                      element-name="fileElement"
 154                                      element-disabled="{{(!isCreateMode()&&!(isEditMode()&&component.resourceType=='VF'))|| isViewMode() || component.vspArchived}}"
 155                                      form-element="editForm"
 156                                      file-model="component.importedFile"
 157                                      on-file-changed-in-directive="onImportFileChange"
 158                                      extensions="{{importedFileExtension}}"
 159                                      default-text="'Browse to select file'"
 160                                      data-ng-class="{'error':!(isEditMode()&&component.resourceType=='VF') && (!editForm.fileElement.$valid || !component.importedFile.filename)}"></file-upload>
 161                     </div>
 162
 163                     <!--------------------- IMPORT TOSCA FILE USING ONBOARDING -------------------->
 164                     <div class="i-sdc-form-item" ng-if="isShowOnboardingSelectionBrowse">
 165                             <label class="i-sdc-form-label required">Select VSP</label>
 166                             <div class="i-sdc-form-file-upload i-sdc-form-input">
 167                                 <span class="i-sdc-form-file-name"  data-ng-disabled="component.vspArchived"  data-tests-id="filename">{{(fileModel && fileModel.filename) || importedToscaBrowseFileText }}</span>
 168                                 <div class="i-sdc-form-file-upload-x-btn" ng-click="cancel()" data-ng-show="fileModel.filename && fileModel.filename!=='' && elementDisabled!=='true'"></div>
 169                                 <input type="button" data-ng-disabled="component.vspArchived" name="fileElement" />
 170                                 <div class="file-upload-browse-btn" data-ng-click="openOnBoardingModal()" data-ng-disabled="!component.vspArchived" data-tests-id="browseButton">Browse</div>
 171                             </div>
 172                     </div>
 173
 174                     <div class="input-error-file-upload"   data-ng-disabled="!component.archived"  data-ng-show="component.importedFile && (!editForm.fileElement.$valid || !component.importedFile.filename)">
 175                         <!-- editForm.fileElement.$error.required <== Can not use this, because the browse is done from outside for the first time -->
 176                         <span ng-show="!(isEditMode()&&component.resourceType=='VF')&&!component.importedFile.filename" translate="NEW_SERVICE_RESOURCE_ERROR_TOSCA_FILE_REQUIRED"></span><!-- Required -->
 177                         <span ng-show="editForm.fileElement.$error.maxsize" translate="VALIDATION_ERROR_MAX_FILE_SIZE"></span>
 178                         <span ng-show="editForm.fileElement.$error.filetype" translate="NEW_SERVICE_RESOURCE_ERROR_VALID_TOSCA_EXTENSIONS" translate-values="{'extensions': '{{importedFileExtension}}' }"></span>
 179                         <span ng-show="editForm.fileElement.$error.emptyFile" translate="VALIDATION_ERROR_EMPTY_FILE"></span>
 180                     </div>
 181                     <!--------------------- IMPORT TOSCA FILE -------------------->
 182
 183                     <!--------------------- USER ID -------------------->
 184                     <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.contactId)}">
 185                     <label class="i-sdc-form-label required" translate="GENERAL_LABEL_CONTACT_ID"></label>
 186                     <input class="i-sdc-form-input" type="text"
 187                                data-ng-model="component.contactId"
 188                                data-ng-class="{'view-mode': isViewMode()}"
 189                                data-ng-required="true"
 190                                name="contactId"
 191                                data-ng-pattern="validation.contactIdValidationPattern"
 192                                data-ng-model-options="{ debounce: 500 }"
 193                                data-tests-id="contactId"
 194                                data-ng-maxlength="50"
 195                         />
 196
 197                         <div class="input-error" data-ng-show="validateField(editForm.contactId)">
 198                             <span ng-show="editForm.contactId.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span>
 199                             <span ng-show="editForm.contactId.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_REQUIRED"></span>
 200                             <span ng-show="editForm.contactId.$error.pattern" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_NOT_VALID"></span>
 201                         </div>
 202                     </div>
 203                     <!--------------------- USER ID -------------------->
 204
 205                     <!--------------------- PROJECT CODE -------------------->
 206                     <div class="i-sdc-form-item"  data-ng-if="!component.isResource()"
 207                          data-ng-class="{'error': validateField(editForm.projectCode)}">
 208                         <label class="i-sdc-form-label required" translate="GENERAL_LABEL_PROJECT_CODE"></label>
 209                         <input class="i-sdc-form-input" type="text"
 210                                data-ng-model="component.projectCode"
 211                                data-ng-class="{'view-mode': isViewMode()}"
 212                                data-ng-model-options="{ debounce: 500 }"
 213                                data-ng-maxlength="50"
 214                                data-required
 215                                name="projectCode"
 216                                data-ng-pattern="validation.projectCodeValidationPattern"
 217                                data-tests-id="projectCode"
 218                         />
 219
 220                         <div class="input-error" data-ng-show="validateField(editForm.projectCode)">
 221                             <span ng-show="editForm.contactId.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span>
 222                             <span ng-show="editForm.projectCode.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_PROJECT_CODE_REQUIRED"></span>
 223                             <span ng-show="editForm.projectCode.$error.pattern" translate="NEW_SERVICE_RESOURCE_ERROR_PROJECT_CODE_NOT_VALID"></span>
 224                         </div>
 225                     </div>
 226
 227                 <!--------------------- VENDOR NAME -------------------->
 228                 <div ng-if="component.isResource()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.vendorName)}">
 229                     <label class="i-sdc-form-label required">Vendor</label>
 230                     <input class="i-sdc-form-input" type="text"
 231                            data-ng-class="{'view-mode': isViewMode()}"
 232                            data-ng-model="component.vendorName"
 233                            data-ng-model-options="{ debounce: 500 }"
 234                            data-ng-maxlength="60"
 235                            data-required
 236                            ng-click="oldValue = component.vendorName"
 237                            name="vendorName"
 238                            data-ng-change="onVendorNameChange(oldValue)"
 239                            data-ng-pattern="validation.VendorNameValidationPattern"
 240                            data-ng-disabled="component.isAlreadyCertified() || (component.isCsarComponent() && component.vendorName && component.vendorName!=='')"
 241                            data-tests-id="vendorName"
 242                     />
 243
 244                     <div class="input-error" data-ng-show="validateField(editForm.vendorName)">
 245                         <span ng-show="editForm.vendorName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_VENDOR_NAME_REQUIRED"></span>
 246                         <span ng-show="editForm.vendorName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '60' }"></span>
 247                         <span ng-show="editForm.vendorName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 248                     </div>
 249
 250                 </div>
 251
 252                 <!--------------------- VENDOR NAME -------------------->
 253
 254                 <!--------------------- VENDOR RELEASE -------------------->
 255                 <div ng-if="component.isResource()"
 256                      class="i-sdc-form-item"
 257                      data-ng-class="{'error': validateField(editForm.vendorRelease)}">
 258                     <label class="i-sdc-form-label required">Vendor Release</label>
 259                     <input class="i-sdc-form-input" type="text"
 260                            data-ng-class="{'view-mode': isViewMode()}"
 261                            data-ng-model="component.vendorRelease"
 262                            data-ng-model-options="{ debounce: 500 }"
 263                            data-ng-maxlength="25"
 264                            data-required
 265                            name="vendorRelease"
 266                            data-ng-pattern="validation.VendorReleaseValidationPattern"
 267                            data-ng-disabled="component.isCsarComponent() && component.vendorRelease && component.vendorRelease!==''"
 268                            data-tests-id="vendorRelease"
 269                     />
 270
 271                     <div class="input-error" data-ng-show="validateField(editForm.vendorRelease)">
 272                         <span ng-show="editForm.vendorRelease.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_VENDOR_RELEASE_REQUIRED"></span>
 273                         <span ng-show="editForm.vendorRelease.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '25' }"></span>
 274                         <span ng-show="editForm.vendorRelease.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 275                     </div>
 276                 </div>
 277                 <!--------------------- VENDOR RELEASE -------------------->
 278
 279                 <!--------------------- Resource Model Number -------------------->
 280                 <div ng-if="component.isResource()"
 281                      class="i-sdc-form-item"
 282                      data-ng-class="{'error': validateField(editForm.resourceVendorModelNumber)}">
 283                     <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_RESOURCE_MODEL_NUMBER"></label>
 284                     <input class="i-sdc-form-input" type="text"
 285                            data-ng-class="{'view-mode': isViewMode()}"
 286                            data-ng-model="component.resourceVendorModelNumber"
 287                            data-ng-model-options="{ debounce: 500 }"
 288                            data-ng-maxlength="65"
 289                            name="resourceVendorModelNumber"
 290                            data-ng-pattern="validation.VendorModelNumberValidationPattern"
 291                            data-tests-id="resourceVendorModelNumber"
 292                     />
 293
 294                     <div class="input-error" data-ng-show="validateField(editForm.resourceVendorModelNumber)">
 295                         <span ng-show="editForm.resourceVendorModelNumber.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '65' }"></span>
 296                         <span ng-show="editForm.resourceVendorModelNumber.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 297                     </div>
 298                 </div>
 299                 <!--------------------- Resource Model Number -------------------->
 300
 301                 <!--------------------- ECOMPGENERATEDNAMING -------------------->
 302
 303                     <div class="i-sdc-form-item"
 304                          data-ng-class="{'error': validateField(editForm.ecompGeneratedNaming)}"
 305                          data-ng-if="component.isService()">
 306                         <label class="i-sdc-form-label">Ecomp Generated Naming</label>
 307                         <select class="i-sdc-form-select"
 308                                 data-required
 309                                 name="ecompGeneratedNaming"
 310                                 data-ng-change="onEcompGeneratedNamingChange()"
 311                                 data-ng-class="{'view-mode': isViewMode()}"
 312                                 data-ng-model="component.ecompGeneratedNaming"
 313                                 data-tests-id="ecompGeneratedNaming">
 314                             <option ng-value="true">true</option>
 315                             <option ng-value="false">false</option>
 316                         </select>
 317                         <div class="input-error" data-ng-show="validateField(editForm.ecompGeneratedNaming)">
 318
 319                         </div>
 320                     </div>
 321                     <!--------------------- CATEGORIES -------------------->
 322
 323                     <!--------------------- NAMING POLICY  -------------------->
 324                     <div ng-if="component.isService()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.namingPolicy)}">
 325                         <label class="i-sdc-form-label">Naming Policy</label>
 326                         <input class="i-sdc-form-input"
 327                                name="namingPolicy"
 328                                data-ng-class="{'view-mode': isViewMode() || !component.ecompGeneratedNaming}"
 329                                data-ng-maxlength="100"
 330                                data-ng-model="component.namingPolicy"
 331                                type="text"
 332                                data-ng-model-options="{ debounce: 500 }"
 333                                data-ng-pattern="validation.commentValidationPattern"
 334                                data-tests-id="namingPolicy"
 335                                autofocus
 336                                ng-readonly="isViewMode() || !component.ecompGeneratedNaming"
 337                         />
 338
 339                         <div class="input-error" data-ng-show="validateField(editForm.namingPolicy)">
 340                             <span ng-show="editForm.namingPolicy.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span>
 341                             <span ng-show="editForm.namingPolicy.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 342                         </div>
 343                     </div>
 344                     <!--------------------- NAMING POLICY  -------------------->
 345
 346                     <!--------------------- Service Type -------------------->
 347                     <div ng-if="component.isService()"
 348                          class="i-sdc-form-item"
 349                          data-ng-class="{'error': validateField(editForm.serviceType)}">
 350                         <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_TYPE"></label>
 351                         <input class="i-sdc-form-input" type="text"
 352                                data-ng-class="{'view-mode': isViewMode()}"
 353                                data-ng-model="component.serviceType"
 354                                data-ng-model-options="{ debounce: 500 }"
 355                                name="serviceType"
 356                                data-tests-id="serviceType"
 357                                data-ng-maxlength="256"
 358                                data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
 359                         />
 360                         <div class="input-error" data-ng-show="validateField(editForm.serviceType)">
 361                             <span ng-show="editForm.serviceType.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
 362                             <span ng-show="editForm.serviceType.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 363                         </div>
 364                     </div>
 365                     <!--------------------- Service Type -------------------->
 366
 367                     <!--------------------- Service Role -------------------->
 368                     <div ng-if="component.isService()"
 369                          class="i-sdc-form-item"
 370                          data-ng-class="{'error': validateField(editForm.serviceRole)}">
 371                         <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_ROLE"></label>
 372                         <input class="i-sdc-form-input" type="text"
 373                                data-ng-class="{'view-mode': isViewMode()}"
 374                                data-ng-model="component.serviceRole"
 375                                data-ng-model-options="{ debounce: 500 }"
 376                                name="serviceRole"
 377                                data-tests-id="serviceRole"
 378                                data-ng-maxlength="256"
 379                                data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
 380                         />
 381                         <div class="input-error" data-ng-show="validateField(editForm.serviceRole)">
 382                             <span ng-show="editForm.serviceRole.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
 383                             <span ng-show="editForm.serviceRole.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 384                         </div>
 385                     </div>
 386                     <!--------------------- Service Role -------------------->
 387
 388                     <!-------------------- ENVIRONMENT CONTEXT  ----------------->
 389
 390                     <div  ng-if="component.isService()" class="i-sdc-form-item">
 391                         <loader data-display="!environmentContextObj && !initEnvironmentContext()" relative="true"></loader>
 392                         <label class="i-sdc-form-label">Environment Context</label>
 393                         <select class="i-sdc-form-select"
 394                                 name="environmentContext"
 395                                 data-ng-class="{'view-mode': isViewMode()}"
 396                                 data-ng-model="component.environmentContext"
 397                                 data-tests-id="environmentContext"
 398                         >
 399                             <option data-ng-repeat="environmentContextVal in (environmentContextObj.validValues) | orderBy"
 400                                     value="{{environmentContextVal}}"
 401                                     data-tests-id="{{environmentContextVal}}">{{environmentContextVal}}</option>
 402                         </select>
 403
 404                     </div>
 405                     <!--------------------- ENVIRONMENT CONTEXT ------------------>
 406
 407                     <!--------------------- Instantiation Type -------------------->
 408                     <div class="i-sdc-form-item" data-ng-if="component.isService() && instantiationTypes">
 409                         <label class="i-sdc-form-label">Instantiation Type</label>
 410                         <select class="i-sdc-form-select"
 411                                 name="instantiationType"
 412                                 data-ng-class="{'view-mode': isViewMode()}"
 413                                 data-ng-disabled="component.isCsarComponent()"
 414                                 data-ng-model="component.instantiationType"
 415                                 data-tests-id="selectInstantiationType">
 416                         <option ng-repeat="type in instantiationTypes">{{type}}</option>
 417
 418                         </select>
 419                     </div>
 420
 421                     <!--------------------- Instantiation Type -------------------->
 422
 423                     <div class="meta-data" data-ng-if="component.creationDate">
 424                         <div>
 425                             <b>Created:</b>
 426                         </div>
 427                         <div class="meta-data-item-value">{{component.creationDate | date:'MM/dd/yyyy'}}, {{component.creatorFullName}}</div>
 428                         <div>
 429                             <b>Modifed:</b>
 430                         </div>
 431                         <div class="meta-data-item-value">
 432                             {{component.lastUpdateDate | date:'MM/dd/yyyy'}}
 433                         </div>
 434                         <div>
 435                             <b>UUID:</b>
 436                         </div>
 437                         <div class="meta-data-item-value">
 438                             {{component.uuid}}
 439                         </div>
 440                         <div>
 441                             <b>Invariant UUID:</b>
 442                         </div>
 443                         <div class="meta-data-item-value">
 444                             {{component.invariantUUID}}
 445                         </div>
 446                     </div>
 447                 </div><!-- Close w-sdc-form-column -->
 448             </div>
 449
 450         </div><!-- Close w-sdc-form-section-container -->
 451
 452     </form>
 453 </div>