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