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

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