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