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