- <!--------------------- Resource Model Number -------------------->
-
- <!--------------------- ECOMPGENERATEDNAMING -------------------->
-
- <div class="i-sdc-form-item"
- data-ng-class="{'error': validateField(editForm.ecompGeneratedNaming)}"
- data-ng-if="component.isService()">
- <label class="i-sdc-form-label">Generated Naming</label>
- <select class="i-sdc-form-select"
- data-required
- name="ecompGeneratedNaming"
- data-ng-change="onEcompGeneratedNamingChange()"
- data-ng-class="{'view-mode': isViewMode()}"
- data-ng-model="component.ecompGeneratedNaming"
- data-tests-id="ecompGeneratedNaming">
- <option ng-value="true">true</option>
- <option ng-value="false">false</option>
- </select>
- <div class="input-error" data-ng-show="validateField(editForm.ecompGeneratedNaming)">
-
- </div>
- </div>
- <!--------------------- CATEGORIES -------------------->
-
- <!--------------------- NAMING POLICY -------------------->
- <div ng-if="component.isService()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.namingPolicy)}">
- <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Naming Policy', 'namingPolicy')">
- <div ng-if="isMetadataKeyMandatory('Naming Policy')">
- <label class="i-sdc-form-label required">Naming Policy</label>
- </div>
- <div ng-if="!isMetadataKeyMandatory('Naming Policy')">
- <label class="i-sdc-form-label">Naming Policy</label>
- </div>
- <select class="i-sdc-form-input" type="text"
- ng-required="isMetadataKeyMandatory('Naming Policy')"
- data-ng-class="{'view-mode': isViewMode()}"
- data-ng-model="component.namingPolicy"
- data-ng-model-options="{ debounce: 500 }"
- name="namingPolicy"
- data-tests-id="namingPolicy"
- data-ng-maxlength="256"
- data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
- > <option ng-repeat="value in getMetadataKeyValidValues('Naming Policy')">{{value}}</option>
- </select>
- </div>
- <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Naming Policy')">
- <label class="i-sdc-form-label">Naming Policy</label>
- <input class="i-sdc-form-input"
- name="namingPolicy"
- data-ng-class="{'view-mode': isViewMode() || !component.ecompGeneratedNaming}"
- data-ng-maxlength="100"
- data-ng-model="component.namingPolicy"
- type="text"
- data-ng-model-options="{ debounce: 500 }"
- data-ng-pattern="validation.commentValidationPattern"
- data-tests-id="namingPolicy"
- autofocus
- ng-readonly="isViewMode() || !component.ecompGeneratedNaming"
- />
- </div>
- <div class="input-error" data-ng-show="validateField(editForm.namingPolicy)">
- <span ng-show="editForm.namingPolicy.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span>
- <span ng-show="editForm.namingPolicy.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
- </div>
- </div>
- <!--------------------- NAMING POLICY -------------------->
-
- <!--------------------- Service Type -------------------->
- <div ng-if="component.isService()"
- class="i-sdc-form-item"
- data-ng-class="{'error': validateField(editForm.serviceFunctionType)}">
- <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Service Type', 'serviceType')">
- <div ng-if="isMetadataKeyMandatory('Service Type')">
- <label class="i-sdc-form-label required" translate="GENERAL_TAB_LABEL_SERVICE_TYPE"></label>
- </div>
- <div ng-if="!isMetadataKeyMandatory('Service Type')">
- <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_TYPE"></label>
- </div>
- <select class="i-sdc-form-input" type="text"
- ng-required="isMetadataKeyMandatory('Service Type')"
- data-ng-class="{'view-mode': isViewMode()}"
- data-ng-model="component.serivceType"
- data-ng-model-options="{ debounce: 500 }"
- name="serviceType"
- data-tests-id="serviceType"
- data-ng-maxlength="256"
- data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
- > <option ng-repeat="value in getMetadataKeyValidValues('Service Type')">{{value}}</option>
- </select>
- </div>
- <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Service Type')">
- <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_TYPE"></label>
- <input class="i-sdc-form-input" type="text"
- data-ng-class="{'view-mode': isViewMode()}"
- data-ng-model="component.serviceType"
- data-ng-model-options="{ debounce: 500 }"
- name="serviceType"
- data-tests-id="serviceType"
- data-ng-maxlength="256"
- data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
- />
- </div>
- <div class="input-error" data-ng-show="validateField(editForm.serviceType)">
- <span ng-show="editForm.serviceType.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
- <span ng-show="editForm.serviceType.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
- </div>
- </div>
- <!--------------------- Service Type -------------------->
-
- <!--------------------- Service Role -------------------->
- <div ng-if="component.isService()"
- class="i-sdc-form-item"
- data-ng-class="{'error': validateField(editForm.serviceRole)}">
- <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Service Role', 'serviceRole')">
- <div ng-if="isMetadataKeyMandatory('Service Role')">
- <label class="i-sdc-form-label required" translate="GENERAL_TAB_LABEL_SERVICE_ROLE"></label>
- </div>
- <div ng-if="!isMetadataKeyMandatory('Service Role')">
- <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_ROLE"></label>
- </div>
- <select class="i-sdc-form-input" type="text"
- ng-required="isMetadataKeyMandatory('Service Role')"
- data-ng-class="{'view-mode': isViewMode()}"
- data-ng-model="component.serviceRole"
- data-ng-model-options="{ debounce: 500 }"
- name="serviceRole"
- data-tests-id="serviceRole"
- data-ng-maxlength="256"
- > <option ng-repeat="value in getMetadataKeyValidValues('Service Role')">{{value}}</option>
- </select>
- </div>
- <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Service Role')">
- <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_ROLE"></label>
- <input class="i-sdc-form-input" type="text"
- data-ng-class="{'view-mode': isViewMode()}"
- data-ng-model="component.serviceRole"
- data-ng-model-options="{ debounce: 500 }"
- name="serviceRole"
- data-tests-id="serviceRole"
- data-ng-maxlength="256"
- data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
- />
- </div>
- <div class="input-error" data-ng-show="validateField(editForm.serviceRole)">
- <span ng-show="editForm.serviceRole.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
- <span ng-show="editForm.serviceRole.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
- </div>
- </div>
- <!--------------------- Service Role -------------------->
- <!--------------------- Service Function -------------------->
- <div ng-if="component.isService()"
- class="i-sdc-form-item"
- data-ng-class="{'error': validateField(editForm.serviceFunction)}">
- <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Service Function', 'serviceFunction')">
- <div ng-if="isMetadataKeyMandatory('Service Function')">
- <label class="i-sdc-form-label required" translate="GENERAL_TAB_LABEL_SERVICE_FUNCTION"></label>
- </div>
- <div ng-if="!isMetadataKeyMandatory('Service Function')">
- <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_FUNCTION"></label>
- </div>
- <select class="i-sdc-form-input" type="text"
- ng-required="isMetadataKeyMandatory('Service Function')"
- data-ng-class="{'view-mode': isViewMode()}"
- data-ng-model="component.serviceFunction"
- data-ng-model-options="{ debounce: 500 }"
- name="serviceFunction"
- data-tests-id="serviceFunction"
- data-ng-maxlength="256"
- data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
- > <option ng-repeat="value in getMetadataKeyValidValues('Service Function')">{{value}}</option>
- </select>
- </div>
- <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Service Function')">
- <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_FUNCTION"></label>
- <input class="i-sdc-form-input" type="text"
- data-ng-class="{'view-mode': isViewMode()}"
- data-ng-model="component.serviceFunction"
- name="serviceFunction"
- data-tests-id="serviceFunction"
- data-ng-maxlength="256"
- data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
- />
- </div>
- <div class="input-error" data-ng-show="validateField(editForm.serviceFunction)">
- <span ng-show="editForm.serviceFunction.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
- <span ng-show="editForm.serviceFunction.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
- </div>
- </div>
- <!--------------------- Service Function -------------------->
-
- <!-------------------- ENVIRONMENT CONTEXT ----------------->
-
- <div ng-if="component.isService()" class="i-sdc-form-item">
- <loader data-display="!environmentContextObj && !initEnvironmentContext()" relative="true"></loader>
- <label class="i-sdc-form-label">Environment Context</label>
- <select class="i-sdc-form-select"
- name="environmentContext"
- data-ng-class="{'view-mode': isViewMode()}"
- data-ng-model="component.environmentContext"
- data-tests-id="environmentContext"
- >
- <option data-ng-repeat="environmentContextVal in (environmentContextObj.validValues) | orderBy"
- value="{{environmentContextVal}}"
- data-tests-id="{{environmentContextVal}}">{{environmentContextVal}}</option>
- </select>
-
- </div>
- <!--------------------- ENVIRONMENT CONTEXT ------------------>
-
- <!--------------------- Instantiation Type -------------------->
- <div class="i-sdc-form-item" data-ng-if="component.isService() && instantiationTypes">
- <label class="i-sdc-form-label">Instantiation Type</label>
- <select class="i-sdc-form-select"
- name="instantiationType"
- data-ng-class="{'view-mode': isViewMode()}"
- data-ng-disabled="component.isCsarComponent()"
- data-ng-model="component.instantiationType"
- data-tests-id="selectInstantiationType">
- <option ng-repeat="type in instantiationTypes">{{type}}</option>
-
- </select>
- </div>
-
- <!--------------------- Instantiation Type -------------------->
-
- <!--------------------- Base Type -------------------->
-
- <div class="w-sdc-form-columns-wrapper">
- <div class="w-sdc-form-column">
- <div class="i-sdc-form-item" data-ng-if="component.isService()">
- <label class="i-sdc-form-label">Base Type</label>
- <select class="i-sdc-form-select"
- name="baseType"
- data-ng-class="{'view-mode': isViewMode()}"
- data-ng-disabled="component.isCsarComponent() || !isCreateMode()"
- data-ng-model="component.derivedFromGenericType"
- data-ng-change="onBaseTypeChange()"
- data-tests-id="selectBaseType">
- <option ng-repeat="type in baseTypes">{{type}}</option>
- </select>
- </div>
- </div>
- <div class="w-sdc-form-column">
- <div class="i-sdc-form-item" data-ng-if="component.isService()">
- <label class="i-sdc-form-label">Base Type Version</label>
- <select class="i-sdc-form-select"
- name="baseTypeVersion"
- data-ng-class="{'view-mode': isViewMode()}"
- data-ng-disabled="component.isCsarComponent() || !isCreateMode()"
- data-ng-model="component.derivedFromGenericVersion"
- data-tests-id="selectBaseTypeVersion">
- <option ng-repeat="version in baseTypeVersions">{{version}}</option>
- </select>
- </div>
- </div>
- </div>
-
- <!--------------------- Base Type -------------------->
-
- <div class="meta-data" data-ng-if="component.creationDate">
- <div>
- <b>Created:</b>
- </div>
- <div class="meta-data-item-value">{{component.creationDate | date:'MM/dd/yyyy'}}, {{component.creatorFullName}}</div>
- <div>
- <b>Modifed:</b>
- </div>
- <div class="meta-data-item-value">
- {{component.lastUpdateDate | date:'MM/dd/yyyy'}}
- </div>
- <div>
- <b>UUID:</b>
- </div>
- <div class="meta-data-item-value">
- {{component.uuid}}
- </div>
- <div>
- <b>Invariant UUID:</b>
- </div>
- <div class="meta-data-item-value">
- {{component.invariantUUID}}
- </div>
- </div>
- </div><!-- Close w-sdc-form-column -->
+ </div>
+ <div ng-if="isMetadataKeyForComponentCategory(key) && !isCategoryServiceMetadataKey(key) && !getMetadataKeyValidValues(key) && !isMetadataKeyMandatory(key)"
+ class="i-sdc-form-item">
+ <label class="i-sdc-form-label" translate="{{getMetadataDisplayName(key)}}"></label>
+ <input class="i-sdc-form-input" type="text"
+ data-ng-class="{'view-mode': isViewMode()}"
+ data-ng-model="component.categorySpecificMetadata[key]"
+ name="{{key}}"
+ data-tests-id="{{key}}"
+ />
+ </div>
+ </ng-container>
+ </div>
+ <!--------------------- Category Specific Metadata -------------------->
+
+ <!--------------------- RESOURCE TAGS -------------------->
+ <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.tags)}">
+ <label class="i-sdc-form-label" translate="GENERAL_LABEL_TAGS"></label>
+
+ <sdc-tags form-element="editForm" element-name="tags" max-tags="20" class="i-sdc-form-item-tags"
+ sdc-disabled="isViewMode()"
+ tags="component.tags"
+ pattern="validation.tagValidationPattern"
+ special-tag="component.name"></sdc-tags>
+
+ <div class="input-error" data-ng-show="validateField(editForm.tags)">
+ <span ng-show="editForm.tags.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+ <span ng-show="editForm.tags.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_TAG_NAME_EXIST"></span>
+ </div>
+ </div>
+ <!--------------------- RESOURCE TAGS -------------------->
+
+ <!--------------------- DESCRIPTION -------------------->
+ <div class="i-sdc-form-item description-field"
+ data-ng-class="{'error': validateField(editForm.description)}">
+ <label class="i-sdc-form-label required" translate="GENERAL_LABEL_DESCRIPTION"></label>
+ <textarea class="description"
+ name="description"
+ data-ng-class="{'view-mode': isViewMode()}"
+ data-ng-maxlength="1024"
+ data-required
+ data-ng-model="component.description"
+ data-ng-model-options="{ debounce: 500 }"
+ data-ng-pattern="validation.commentValidationPattern"
+ data-tests-id="description"></textarea>
+
+ <div class="input-error" data-ng-show="validateField(editForm.description)">
+ <span ng-show="editForm.description.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_DESCRIPTION_REQUIRED"></span>
+ <span ng-show="editForm.description.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '1024' }"></span>
+ <span ng-show="editForm.description.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+ </div>
+ </div>
+ <!--------------------- DESCRIPTION -------------------->
+
+ </div><!-- Close w-sdc-form-column -->
+
+ <div class="w-sdc-form-column">
+ <!--------------------- IMPORT TOSCA FILE USING BROWSE (ALSO VFC) -------------------->
+ <div class="i-sdc-form-item" ng-if="isShowFileBrowse">
+
+ <label class="i-sdc-form-label" data-ng-class="{'required':isCreateMode() && component.resourceType !=='VF'}">{{browseFileLabel}}</label>
+ <file-upload id="fileUploadElement"
+ class="i-sdc-form-input"
+ element-name="fileElement"
+ data-ng-required="false"
+ element-disabled="{{(!isCreateMode()&&!(isEditMode()&&component.resourceType=='VF'))|| isViewMode() || component.vspArchived}}"
+ form-element="editForm"
+ file-model="component.importedFile"
+ on-file-changed-in-directive="onImportFileChange"
+ extensions="{{importedFileExtension}}"
+ default-text="'Browse to select file'"
+ ></file-upload>
+ </div>
+
+ <!--------------------- IMPORT TOSCA FILE USING ONBOARDING -------------------->
+ <div class="i-sdc-form-item" ng-if="isShowOnboardingSelectionBrowse && !isShowFileBrowse">
+ <label class="i-sdc-form-label required">VSP</label>
+ <div class="i-sdc-form-file-upload i-sdc-form-input">
+ <span class="i-sdc-form-file-name" data-ng-disabled="component.vspArchived" data-tests-id="filename">{{(fileModel && fileModel.filename) || importedToscaBrowseFileText }}</span>
+ <div class="i-sdc-form-file-upload-x-btn" ng-click="cancel()" data-ng-show="fileModel.filename && fileModel.filename!=='' && elementDisabled!=='true'"></div>
+ <input type="button" data-ng-class="{'disabled': !isEditMode() && component.vspArchived}" data-ng-disabled="component.vspArchived" name="fileElement" />
+ <div class="file-upload-browse-btn" data-ng-class="{'disabled': !isEditMode() && !component.vspArchived}" data-ng-click="openOnBoardingModal()" data-ng-disabled="!component.vspArchived" data-tests-id="browseButton">Browse</div>
+ </div>
+ </div>
+
+ <div class="input-error-file-upload" data-ng-disabled="!component.archived" data-ng-show="component.importedFile && (!editForm.fileElement.$valid || !component.importedFile.filename)">
+ <!-- editForm.fileElement.$error.required <== Can not use this, because the browse is done from outside for the first time -->
+ <span ng-show="!(isEditMode()&&component.resourceType=='VF')&&!component.importedFile.filename" translate="NEW_SERVICE_RESOURCE_ERROR_TOSCA_FILE_REQUIRED"></span><!-- Required -->
+ <span ng-show="editForm.fileElement.$error.maxsize" translate="VALIDATION_ERROR_MAX_FILE_SIZE"></span>
+ <span ng-show="editForm.fileElement.$error.filetype" translate="NEW_SERVICE_RESOURCE_ERROR_VALID_TOSCA_EXTENSIONS" translate-values="{'extensions': '{{importedFileExtension}}' }"></span>
+ <span ng-show="editForm.fileElement.$error.emptyFile" translate="VALIDATION_ERROR_EMPTY_FILE"></span>
+ </div>
+ <!--------------------- IMPORT TOSCA FILE -------------------->
+
+ <!--------------------- USER ID -------------------->
+ <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.contactId)}">
+ <label class="i-sdc-form-label required" translate="GENERAL_LABEL_CONTACT_ID"></label>
+ <input class="i-sdc-form-input" type="text"
+ data-ng-model="component.contactId"
+ data-ng-class="{'view-mode': isViewMode()}"
+ data-ng-required="true"
+ name="contactId"
+ data-ng-pattern="validation.contactIdValidationPattern"
+ data-ng-model-options="{ debounce: 500 }"
+ data-tests-id="contactId"
+ data-ng-maxlength="50"
+ />
+
+ <div class="input-error" data-ng-show="validateField(editForm.contactId)">
+ <span ng-show="editForm.contactId.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span>
+ <span ng-show="editForm.contactId.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_REQUIRED"></span>
+ <span ng-show="editForm.contactId.$error.pattern" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_NOT_VALID"></span>
+ </div>
+ </div>
+ <!--------------------- USER ID -------------------->
+
+ <!--------------------- VENDOR NAME -------------------->
+ <div ng-if="component.isResource()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.vendorName)}">
+ <label class="i-sdc-form-label required" translate="GENERAL_LABEL_VENDOR_NAME"></label>
+ <input class="i-sdc-form-input" type="text"
+ data-ng-class="{'view-mode': isViewMode()}"
+ data-ng-model="component.vendorName"
+ data-ng-model-options="{ debounce: 500 }"
+ data-ng-maxlength="60"
+ data-required
+ ng-click="oldValue = component.vendorName"
+ name="vendorName"
+ data-ng-change="onVendorNameChange(oldValue)"
+ data-ng-pattern="validation.VendorNameValidationPattern"
+ data-ng-disabled="component.isAlreadyCertified() || (component.isCsarComponent() && component.vendorName && component.vendorName!=='')"
+ data-tests-id="vendorName"
+ />
+
+ <div class="input-error" data-ng-show="validateField(editForm.vendorName)">
+ <span ng-show="editForm.vendorName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_VENDOR_NAME_REQUIRED"></span>
+ <span ng-show="editForm.vendorName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '60' }"></span>
+ <span ng-show="editForm.vendorName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+ </div>
+
+ </div>
+ <!--------------------- VENDOR NAME -------------------->
+
+ <!--------------------- VENDOR RELEASE -------------------->
+ <div ng-if="component.isResource()"
+ class="i-sdc-form-item"
+ data-ng-class="{'error': validateField(editForm.vendorRelease)}">
+ <label class="i-sdc-form-label required" translate="GENERAL_LABEL_VENDOR_RELEASE"></label>
+ <input class="i-sdc-form-input" type="text"
+ data-ng-class="{'view-mode': isViewMode()}"
+ data-ng-model="component.vendorRelease"
+ data-ng-model-options="{ debounce: 500 }"
+ data-ng-maxlength="25"
+ data-required
+ name="vendorRelease"
+ data-ng-pattern="validation.VendorReleaseValidationPattern"
+ data-ng-disabled="component.isCsarComponent() && component.vendorRelease && component.vendorRelease!==''"
+ data-tests-id="vendorRelease"
+ />
+
+ <div class="input-error" data-ng-show="validateField(editForm.vendorRelease)">
+ <span ng-show="editForm.vendorRelease.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_VENDOR_RELEASE_REQUIRED"></span>
+ <span ng-show="editForm.vendorRelease.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '25' }"></span>
+ <span ng-show="editForm.vendorRelease.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+ </div>
+ </div>
+ <!--------------------- VENDOR RELEASE -------------------->
+
+ <!--------------------- Resource Model Number -------------------->
+ <div ng-if="component.isResource()"
+ class="i-sdc-form-item"
+ data-ng-class="{'error': validateField(editForm.resourceVendorModelNumber)}">
+ <label class="i-sdc-form-label" translate="GENERAL_LABEL_RESOURCE_MODEL_NUMBER"></label>
+ <input class="i-sdc-form-input" type="text"
+ data-ng-class="{'view-mode': isViewMode()}"
+ data-ng-model="component.resourceVendorModelNumber"
+ data-ng-model-options="{ debounce: 500 }"
+ data-ng-maxlength="65"
+ name="resourceVendorModelNumber"
+ data-ng-pattern="validation.VendorModelNumberValidationPattern"
+ data-tests-id="resourceVendorModelNumber"
+ />
+
+ <div class="input-error" data-ng-show="validateField(editForm.resourceVendorModelNumber)">
+ <span ng-show="editForm.resourceVendorModelNumber.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '65' }"></span>
+ <span ng-show="editForm.resourceVendorModelNumber.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+ </div>
+ </div>
+ <!--------------------- Resource Model Number -------------------->
+
+ <!--------------------- ECOMPGENERATEDNAMING -------------------->
+ <div class="i-sdc-form-item"
+ data-ng-class="{'error': validateField(editForm.ecompGeneratedNaming)}"
+ data-ng-if="component.isService() && !isNotApplicableMetadataKeys('Generated Naming')">
+ <label class="i-sdc-form-label">Generated Naming</label>
+ <select class="i-sdc-form-select"
+ data-required
+ name="ecompGeneratedNaming"
+ data-ng-change="onEcompGeneratedNamingChange()"
+ data-ng-class="{'view-mode': isViewMode()}"
+ data-ng-model="component.ecompGeneratedNaming"
+ data-tests-id="ecompGeneratedNaming">
+ <option ng-value="true">true</option>
+ <option ng-value="false">false</option>
+ </select>
+ <div class="input-error" data-ng-show="validateField(editForm.ecompGeneratedNaming)">
+
+ </div>
+ </div>
+ <!--------------------- CATEGORIES -------------------->
+
+ <!--------------------- NAMING POLICY -------------------->
+ <div ng-if="component.isService() && !isNotApplicableMetadataKeys('Naming Policy')" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.namingPolicy)}">
+ <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Naming Policy', 'namingPolicy')">
+ <div ng-if="isMetadataKeyMandatory('Naming Policy')">
+ <label class="i-sdc-form-label required">Naming Policy</label>
+ </div>
+ <div ng-if="!isMetadataKeyMandatory('Naming Policy')">
+ <label class="i-sdc-form-label">Naming Policy</label>
+ </div>
+ <select class="i-sdc-form-input" type="text"
+ ng-required="isMetadataKeyMandatory('Naming Policy')"
+ data-ng-class="{'view-mode': isViewMode()}"
+ data-ng-model="component.namingPolicy"
+ data-ng-model-options="{ debounce: 500 }"
+ name="namingPolicy"
+ data-tests-id="namingPolicy"
+ data-ng-maxlength="256"
+ data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
+ > <option ng-repeat="value in getMetadataKeyValidValues('Naming Policy')">{{value}}</option>
+ </select>
+ </div>
+ <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Naming Policy')">
+ <label class="i-sdc-form-label">Naming Policy</label>
+ <input class="i-sdc-form-input"
+ name="namingPolicy"
+ data-ng-class="{'view-mode': isViewMode() || !component.ecompGeneratedNaming}"
+ data-ng-maxlength="100"
+ data-ng-model="component.namingPolicy"
+ type="text"
+ data-ng-model-options="{ debounce: 500 }"
+ data-ng-pattern="validation.commentValidationPattern"
+ data-tests-id="namingPolicy"
+ autofocus
+ ng-readonly="isViewMode() || !component.ecompGeneratedNaming"
+ />
+ </div>
+ <div class="input-error" data-ng-show="validateField(editForm.namingPolicy)">
+ <span ng-show="editForm.namingPolicy.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span>
+ <span ng-show="editForm.namingPolicy.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+ </div>
+ </div>
+ <!--------------------- NAMING POLICY -------------------->
+
+ <!--------------------- Service Type -------------------->
+ <div ng-if="component.isService() && !isNotApplicableMetadataKeys('Service Type')"
+ class="i-sdc-form-item"
+ data-ng-class="{'error': validateField(editForm.serviceFunctionType)}">
+ <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Service Type', 'serviceType')">
+ <div ng-if="isMetadataKeyMandatory('Service Type')">
+ <label class="i-sdc-form-label required" translate="GENERAL_TAB_LABEL_SERVICE_TYPE"></label>
+ </div>
+ <div ng-if="!isMetadataKeyMandatory('Service Type')">
+ <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_TYPE"></label>
+ </div>
+ <select class="i-sdc-form-input" type="text"
+ ng-required="isMetadataKeyMandatory('Service Type')"
+ data-ng-class="{'view-mode': isViewMode()}"
+ data-ng-model="component.serviceType"
+ data-ng-model-options="{ debounce: 500 }"
+ name="serviceType"
+ data-tests-id="serviceType"
+ data-ng-maxlength="256"
+ data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
+ > <option ng-repeat="value in getMetadataKeyValidValues('Service Type')">{{value}}</option>
+ </select>
+ </div>
+ <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Service Type')">
+ <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_TYPE"></label>
+ <input class="i-sdc-form-input" type="text"
+ data-ng-class="{'view-mode': isViewMode()}"
+ data-ng-model="component.serviceType"
+ data-ng-model-options="{ debounce: 500 }"
+ name="serviceType"
+ data-tests-id="serviceType"
+ data-ng-maxlength="256"
+ data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
+ />
+ </div>
+ <div class="input-error" data-ng-show="validateField(editForm.serviceType)">
+ <span ng-show="editForm.serviceType.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
+ <span ng-show="editForm.serviceType.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+ </div>
+ </div>
+ <!--------------------- Service Type -------------------->
+
+ <!--------------------- Service Role -------------------->
+ <div ng-if="component.isService() && !isNotApplicableMetadataKeys('Service Role')"
+ class="i-sdc-form-item"
+ data-ng-class="{'error': validateField(editForm.serviceRole)}">
+ <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Service Role', 'serviceRole')">
+ <div ng-if="isMetadataKeyMandatory('Service Role')">
+ <label class="i-sdc-form-label required" translate="GENERAL_TAB_LABEL_SERVICE_ROLE"></label>
+ </div>
+ <div ng-if="!isMetadataKeyMandatory('Service Role')">
+ <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_ROLE"></label>
+ </div>
+ <select class="i-sdc-form-input" type="text"
+ ng-required="isMetadataKeyMandatory('Service Role')"
+ data-ng-class="{'view-mode': isViewMode()}"
+ data-ng-model="roleOption"
+ data-ng-model-options="{ debounce: 500 }"
+ data-ng-change="setServiceRole(roleOption)"
+ name="roleOption"
+ data-tests-id="roleOption"
+ data-ng-maxlength="256"
+ > <option ng-repeat="value in getMetadataKeyValidValues('Service Role')">{{value}}</option>
+ </select>
+ <div data-ng-if="othersRoleFlag">
+ <label class="i-sdc-form-label">Other</label>
+ </div>
+ <input class="i-sdc-form-input" type="text" data-ng-class="{'view-mode': isViewMode()}"
+ data-ng-if="othersRoleFlag"
+ ng-required="isMetadataKeyMandatory('Service Role')"
+ data-ng-model="component.serviceRole"
+ data-ng-model-options="{ debounce: 500 }"
+ name="serviceRole"
+ data-tests-id="serviceRole"
+ data-ng-maxlength="256"
+ data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
+ />
+ </div>
+ <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Service Role')">
+ <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_ROLE"></label>
+ <input class="i-sdc-form-input" type="text"
+ data-ng-class="{'view-mode': isViewMode()}"
+ data-ng-model="component.serviceRole"
+ data-ng-model-options="{ debounce: 500 }"
+ name="serviceRole"
+ data-tests-id="serviceRole"
+ data-ng-maxlength="256"
+ data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
+ />
+ </div>
+ <div class="input-error" data-ng-show="validateField(editForm.serviceRole)">
+ <span ng-show="editForm.serviceRole.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
+ <span ng-show="editForm.serviceRole.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+ </div>
+ </div>
+ <!--------------------- Service Role -------------------->
+
+ <!--------------------- Service Function -------------------->
+ <div ng-if="component.isService() && !isNotApplicableMetadataKeys('Service Function')"
+ class="i-sdc-form-item"
+ data-ng-class="{'error': validateField(editForm.serviceFunction)}">
+ <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Service Function', 'serviceFunction')">
+ <div ng-if="isMetadataKeyMandatory('Service Function')">
+ <label class="i-sdc-form-label required" translate="GENERAL_TAB_LABEL_SERVICE_FUNCTION"></label>
+ </div>
+ <div ng-if="!isMetadataKeyMandatory('Service Function')">
+ <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_FUNCTION"></label>
+ </div>
+ <select class="i-sdc-form-input" type="text"
+ ng-required="isMetadataKeyMandatory('Service Function')"
+ data-ng-class="{'view-mode': isViewMode()}"
+ data-ng-model="functionOption"
+ data-ng-model-options="{ debounce: 500 }"
+ data-ng-change="setServiceFunction(functionOption)"
+ name="functionOption"
+ data-tests-id="functionOption"
+ data-ng-maxlength="256"
+ > <option ng-repeat="value in getMetadataKeyValidValues('Service Function')">{{value}}</option>
+ </select>
+ <div data-ng-if="othersFlag">
+ <label class="i-sdc-form-label">Other</label>
+ </div>
+ <input class="i-sdc-form-input" type="text" data-ng-class="{'view-mode': isViewMode()}"
+ data-ng-if="othersFlag"
+ ng-required="isMetadataKeyMandatory('Service Role')"
+ data-ng-model="component.serviceFunction"
+ data-ng-model-options="{ debounce: 500 }"
+ name="serviceFunction"
+ data-tests-id="serviceFunction"
+ data-ng-maxlength="256"
+ data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
+ />
+ </div>
+ <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Service Function')">
+ <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_FUNCTION"></label>
+ <input class="i-sdc-form-input" type="text"
+ data-ng-class="{'view-mode': isViewMode()}"
+ data-ng-model="component.serviceFunction"
+ name="serviceFunction"
+ data-tests-id="serviceFunction"
+ data-ng-maxlength="256"
+ data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
+ />
+ </div>
+ <div class="input-error" data-ng-show="validateField(editForm.serviceFunction)">
+ <span ng-show="editForm.serviceFunction.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
+ <span ng-show="editForm.serviceFunction.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+ </div>
+ </div>
+ <!--------------------- Service Function -------------------->
+
+ <!-------------------- ENVIRONMENT CONTEXT ----------------->
+ <div ng-if="component.isService() && !isNotApplicableMetadataKeys('Environment Context')" class="i-sdc-form-item">
+ <loader data-display="!environmentContextObj && !initEnvironmentContext()" relative="true"></loader>
+ <label class="i-sdc-form-label">Environment Context</label>
+ <select class="i-sdc-form-select"
+ name="environmentContext"
+ data-ng-class="{'view-mode': isViewMode()}"
+ data-ng-model="component.environmentContext"
+ data-tests-id="environmentContext"
+ >
+ <option data-ng-repeat="environmentContextVal in (environmentContextObj.validValues) | orderBy"
+ value="{{environmentContextVal}}"
+ data-tests-id="{{environmentContextVal}}">{{environmentContextVal}}</option>
+ </select>
+
+ </div>
+ <!--------------------- ENVIRONMENT CONTEXT ------------------>
+
+ <!--------------------- Instantiation Type -------------------->
+ <div class="i-sdc-form-item" data-ng-if="component.isService() && instantiationTypes && !isNotApplicableMetadataKeys('Instantiation Type')">
+ <label class="i-sdc-form-label">Instantiation Type</label>
+ <select class="i-sdc-form-select"
+ name="instantiationType"
+ data-ng-class="{'view-mode': isViewMode()}"
+ data-ng-disabled="component.isCsarComponent()"
+ data-ng-model="component.instantiationType"
+ data-tests-id="selectInstantiationType">
+ <option ng-repeat="type in instantiationTypes">{{type}}</option>
+
+ </select>
+ </div>
+ <!--------------------- Instantiation Type -------------------->
+
+ <!--------------------- Base Type -------------------->
+ <div class="w-sdc-form-columns-wrapper">
+ <div class="w-sdc-form-column">
+ <div class="i-sdc-form-item" ng-if="component.isService() && baseTypes && baseTypes.length > 0 && !isNotApplicableMetadataKeys('Substitution Node Type')">
+ <label class="i-sdc-form-label">Substitution Node Type</label>
+ <select class="i-sdc-form-select"
+ name="baseType"
+ data-ng-class="{'view-mode': isViewMode()}"
+ data-ng-disabled="component.isCsarComponent() || !(isEditMode() || isCreateMode())"
+ data-ng-model="component.derivedFromGenericType"
+ data-ng-change="onBaseTypeChange()"
+ data-tests-id="selectBaseType"
+ data-ng-options="type for type in baseTypes track by type">
+ <option value="" data-ng-if="!isBaseTypeRequired">None</option>
+ </select>
+ </div>
+ </div>
+ <div class="w-sdc-form-column">
+ <div class="i-sdc-form-item" data-ng-if="component.isService() && showBaseTypeVersions && !isNotApplicableMetadataKeys('Substitution Node Type Version')">
+ <label class="i-sdc-form-label">Substitution Node Type Version</label>
+ <select class="i-sdc-form-select"
+ name="baseTypeVersion"
+ data-ng-class="{'view-mode': isViewMode()}"
+ data-ng-disabled="component.isCsarComponent() || !(isEditMode() || isCreateMode())"
+ data-ng-model="component.derivedFromGenericVersion"
+ data-tests-id="selectBaseTypeVersion">
+ <option ng-repeat="version in baseTypeVersions">{{version}}</option>
+ </select>
+ </div>
+ </div>
+ </div>
+ <!--------------------- Base Type -------------------->
+
+ <div class="meta-data" data-ng-if="component.creationDate">
+ <div>
+ <strong>Created:</strong>
+ </div>
+ <div class="meta-data-item-value">{{component.creationDate | date:'MM/dd/yyyy'}}, {{component.creatorFullName}}</div>
+ <div>
+ <strong>Modifed:</strong>
+ </div>
+ <div class="meta-data-item-value">
+ {{component.lastUpdateDate | date:'MM/dd/yyyy'}}
+ </div>
+ <div>
+ <strong>UUID:</strong>
+ </div>
+ <div class="meta-data-item-value">
+ {{component.uuid}}
+ </div>
+ <div>
+ <strong>Invariant UUID:</strong>
+ </div>
+ <div class="meta-data-item-value">
+ {{component.invariantUUID}}