2 ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
4 ~ Licensed under the Apache License, Version 2.0 (the "License");
5 ~ you may not use this file except in compliance with the License.
6 ~ You may obtain a copy of the License at
8 ~ http://www.apache.org/licenses/LICENSE-2.0
10 ~ Unless required by applicable law or agreed to in writing, software
11 ~ distributed under the License is distributed on an "AS IS" BASIS,
12 ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 ~ See the License for the specific language governing permissions and
14 ~ limitations under the License.
16 <div include-padding="true" class="sdc-workspace-general-step">
17 <div class="w-sdc-main-container-body-content-action-buttons">
18 <div data-ng-if="unsavedFile && !isCreateMode() && !isViewMode()" data-tests-id="save-warning" class="unsaved-file-warning">
19 <span class="sprite-new sdc-warning"></span> Click save to update to the new VSP
21 <button class="tlv-btn blue" data-ng-if="isDesigner()" data-ng-show="isGeneralView()" data-ng-class="{'disabled' : !isValidForm || isDisableMode() || isViewMode() || isCreateMode()}"
22 data-ng-click="save()" data-tests-id="create/save" tooltips tooltip-content="Save">Save</button>
23 <span data-ng-if="isDesigner()" data-ng-class="{'disabled' :isDisableMode() || isViewMode() || isCreateMode()}" ng-click="revert()" class="sprite-new revert-btn" data-tests-id="revert"
24 data-ng-show="isGeneralView()" tooltips tooltip-content="Revert"></span>
27 <form novalidate class="w-sdc-form" name="editForm" validation-on-load form-to-validate="editForm">
29 <div class="w-sdc-form-section-container">
31 <div class="w-sdc-form-columns-wrapper">
33 <div class="w-sdc-form-column">
34 <div class="upper-general-fields">
35 <div class="selected-icon-container" data-ng-class="{'show-only-on-over':'defaulticon'!=component.icon && !isViewMode()}">
36 <div class="selected-icon-inner-container ">
37 <div class="sprite-new update-component-icon" data-ng-click="updateIcon()" data-ng-if="!isViewMode() && possibleToUpdateIcon()"></div>
38 <div class="i-sdc-form-item-suggested-icon large selected-icon {{component.iconSprite}} {{component.icon}}"
40 'disable': isViewMode() || !possibleToUpdateIcon(),
41 'archive-component active-component-static': component.archived
43 ng-model="component.icon"
44 tooltips tooltip-content='{{component.icon | translate}}'
49 <div class="name-and-category-fields">
50 <!--------------------- NAME -------------------->
51 <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.componentName)}">
52 <label class="i-sdc-form-label required" translate="GENERAL_LABEL_NAME"></label>
53 <input class="i-sdc-form-input"
54 data-ng-class="{'view-mode': isViewMode()}"
56 data-ng-init="isCreateMode() && validateName(true)"
57 data-ng-maxlength="50"
58 data-ng-model="component.name"
61 data-ng-model-options="{ debounce: 500 }"
62 data-ng-pattern="validation.componentNameValidationPattern"
63 data-ng-disabled="component.isAlreadyCertified()"
66 ng-readonly="isViewMode()"
69 <div class="input-error" data-ng-show="validateField(editForm.componentName)">
70 <span ng-show="editForm.componentName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_NAME_REQUIRED"></span>
71 <span ng-show="editForm.componentName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span>
72 <span ng-show="editForm.componentName.$error.minlength" translate="VALIDATION_ERROR_MIN_LENGTH" translate-values="{'min': '4' }"></span>
73 <span ng-show="editForm.componentName.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_NAME_EXISTS"></span>
74 <span ng-show="editForm.componentName.$error.pattern" translate="VALIDATION_ERROR_INVALID_NAME"></span>
77 <!--------------------- NAME -------------------->
81 <!--------------------- CATEGORIES -------------------->
82 <div class="i-sdc-form-item"
83 data-ng-class="{'error': validateField(editForm.category)}">
84 <loader data-display="!categories && !initCategoreis()" relative="true"></loader>
85 <label class="i-sdc-form-label required" translate="GENERAL_LABEL_CATEGORY"></label>
86 <select class="i-sdc-form-select"
89 data-ng-class="{'view-mode': isViewMode()}"
90 data-ng-change="onCategoryChange()"
91 data-ng-disabled="component.isAlreadyCertified() || (component.isCsarComponent() && component.selectedCategory && component.selectedCategory!=='') || isHiddenCategorySelected"
92 data-ng-model="componentCategories.selectedCategory"
93 data-tests-id="selectGeneralCategory"
95 <option value="">Select category</option>
96 <optgroup ng-if="component.isResource()" data-ng-repeat="mainCategory in categories | orderBy:['name']" label="{{mainCategory.name}}" data-tests-id="{{mainCategory.name}}">
97 <option data-ng-repeat="subCategory in mainCategory.subcategories track by $index"
98 data-ng-selected="componentCategories.selectedCategory === calculateUnique(mainCategory.name,subCategory.name)"
99 data-tests-id="{{subCategory.name}}"
100 value="{{calculateUnique(mainCategory.name, subCategory.name)}}">{{subCategory.name}}
104 <option ng-if="component.isService()" data-ng-repeat="mainCategory in categories | orderBy:['name']"
105 data-ng-selected="component.selectedCategory===mainCategory.name"
106 value="{{mainCategory.name}}"
107 data-tests-id="{{mainCategory.name}}">{{mainCategory.name}}</option>
110 <div class="input-error" data-ng-show="validateField(editForm.category)">
111 <span ng-show="editForm.category.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_CATEGORY_REQUIRED"></span>
112 <span ng-show="editForm.category.$error.validForBaseType" translate="NEW_SERVICE_RESOURCE_ERROR_CATEGORY_NOT_VALID"></span>
115 <!--------------------- CATEGORIES -------------------->
119 <!--------------------- Category Specific Metadata -------------------->
121 <div ng-if="component.selectedCategory">
122 <ng-container ng-repeat="(key, value) in component.categorySpecificMetadata"-->
123 <div ng-if="isMetadataKeyForComponentCategory(key) && !isCategoryServiceMetadataKey(key) && getMetadataKeyValidValues(key) && isMetadataKeyMandatory(key)"
124 class="i-sdc-form-item"
125 data-ng-class="{'error': validateField(editForm['{{key}}'])}">
126 <label class="i-sdc-form-label required" translate="{{key}}"></label>
127 <select class="i-sdc-form-select"
129 data-ng-class="{'view-mode': isViewMode()}"
130 data-ng-model="component.categorySpecificMetadata[key]"
131 data-tests-id="{{key}}"
133 <option ng-repeat="value in getMetadataKeyValidValues(key)">{{value}}</option>
135 <div class="input-error" data-ng-show="validateField(editForm['{{key}}'])">
136 <span ng-show="editForm['{{key}}'].$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_REQUIRED"></span>
139 <div ng-if="isMetadataKeyForComponentCategory(key) && !isCategoryServiceMetadataKey(key) && getMetadataKeyValidValues(key) && !isMetadataKeyMandatory(key)"
140 class="i-sdc-form-item">
141 <label class="i-sdc-form-label" translate="{{key}}"></label>
142 <select class="i-sdc-form-select"
144 data-ng-class="{'view-mode': isViewMode()}"
145 data-ng-model="component.categorySpecificMetadata[key]"
146 data-tests-id="{{key}}">
147 <option ng-repeat="value in getMetadataKeyValidValues(key)">{{value}}</option>
150 <div ng-if="isMetadataKeyForComponentCategory(key) && !isCategoryServiceMetadataKey(key) && !getMetadataKeyValidValues(key) && isMetadataKeyMandatory(key)"
151 class="i-sdc-form-item"
152 data-ng-class="{'error': validateField(editForm['{{key}}'])}">
153 <label class="i-sdc-form-label required" translate="{{key}}"></label>
154 <input class="i-sdc-form-input" type="text"
156 data-ng-class="{'view-mode': isViewMode()}"
157 data-ng-model="component.categorySpecificMetadata[key]"
159 data-tests-id="{{key}}"
161 <div class="input-error" data-ng-show="validateField(editForm['{{key}}'])">
162 <span ng-show="editForm['{{key}}'].$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_REQUIRED"></span>
165 <div ng-if="isMetadataKeyForComponentCategory(key) && !isCategoryServiceMetadataKey(key) && !getMetadataKeyValidValues(key) && !isMetadataKeyMandatory(key)"
166 class="i-sdc-form-item">
167 <label class="i-sdc-form-label" translate="{{key}}"></label>
168 <input class="i-sdc-form-input" type="text"
169 data-ng-class="{'view-mode': isViewMode()}"
170 data-ng-model="component.categorySpecificMetadata[key]"
172 data-tests-id="{{key}}"
177 <!--------------------- RESOURCE TAGS -------------------->
178 <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.tags)}">
179 <label class="i-sdc-form-label" translate="GENERAL_LABEL_TAGS"></label>
181 <sdc-tags form-element="editForm" element-name="tags" max-tags="20" class="i-sdc-form-item-tags"
182 sdc-disabled="isViewMode()"
183 tags="component.tags"
184 pattern="validation.tagValidationPattern"
185 special-tag="component.name"></sdc-tags>
187 <div class="input-error" data-ng-show="validateField(editForm.tags)">
188 <span ng-show="editForm.tags.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
189 <span ng-show="editForm.tags.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_TAG_NAME_EXIST"></span>
192 <!--------------------- RESOURCE TAGS -------------------->
194 <!--------------------- DESCRIPTION -------------------->
195 <div class="i-sdc-form-item description-field"
196 data-ng-class="{'error': validateField(editForm.description)}">
197 <label class="i-sdc-form-label required" translate="GENERAL_LABEL_DESCRIPTION"></label>
198 <textarea class="description"
200 data-ng-class="{'view-mode': isViewMode()}"
201 data-ng-maxlength="1024"
203 data-ng-model="component.description"
204 data-ng-model-options="{ debounce: 500 }"
205 data-ng-pattern="validation.commentValidationPattern"
206 data-tests-id="description"></textarea>
207 <!-- placeholder="Description here..." -->
209 <div class="input-error" data-ng-show="validateField(editForm.description)">
210 <span ng-show="editForm.description.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_DESCRIPTION_REQUIRED"></span>
211 <span ng-show="editForm.description.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '1024' }"></span>
212 <span ng-show="editForm.description.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
215 <!--------------------- DESCRIPTION -------------------->
217 </div><!-- Close w-sdc-form-column -->
219 <div class="w-sdc-form-column">
220 <!--------------------- IMPORT TOSCA FILE USING BROWSE (ALSO VFC) -------------------->
221 <div class="i-sdc-form-item" ng-if="isShowFileBrowse">
223 <!-- // element-disabled="{{!isCreateMode()&&!(isEditMode()&&component.resourceType=='VF')&&component.vspArchived}} || {{isViewMode()}}" -->
225 <label class="i-sdc-form-label" data-ng-class="{'required':isCreateMode() && component.resourceType !=='VF'}">{{browseFileLabel}}</label>
226 <file-upload id="fileUploadElement"
227 class="i-sdc-form-input"
228 element-name="fileElement"
229 data-ng-required="false"
230 element-disabled="{{(!isCreateMode()&&!(isEditMode()&&component.resourceType=='VF'))|| isViewMode() || component.vspArchived}}"
231 form-element="editForm"
232 file-model="component.importedFile"
233 on-file-changed-in-directive="onImportFileChange"
234 extensions="{{importedFileExtension}}"
235 default-text="'Browse to select file'"
239 <!--------------------- IMPORT TOSCA FILE USING ONBOARDING -------------------->
240 <div class="i-sdc-form-item" ng-if="isShowOnboardingSelectionBrowse && !isShowFileBrowse">
241 <label class="i-sdc-form-label required">VSP</label>
242 <div class="i-sdc-form-file-upload i-sdc-form-input">
243 <span class="i-sdc-form-file-name" data-ng-disabled="component.vspArchived" data-tests-id="filename">{{(fileModel && fileModel.filename) || importedToscaBrowseFileText }}</span>
244 <div class="i-sdc-form-file-upload-x-btn" ng-click="cancel()" data-ng-show="fileModel.filename && fileModel.filename!=='' && elementDisabled!=='true'"></div>
245 <input type="button" data-ng-class="{'disabled': !isEditMode() && component.vspArchived}" data-ng-disabled="component.vspArchived" name="fileElement" />
246 <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>
250 <div class="input-error-file-upload" data-ng-disabled="!component.archived" data-ng-show="component.importedFile && (!editForm.fileElement.$valid || !component.importedFile.filename)">
251 <!-- editForm.fileElement.$error.required <== Can not use this, because the browse is done from outside for the first time -->
252 <span ng-show="!(isEditMode()&&component.resourceType=='VF')&&!component.importedFile.filename" translate="NEW_SERVICE_RESOURCE_ERROR_TOSCA_FILE_REQUIRED"></span><!-- Required -->
253 <span ng-show="editForm.fileElement.$error.maxsize" translate="VALIDATION_ERROR_MAX_FILE_SIZE"></span>
254 <span ng-show="editForm.fileElement.$error.filetype" translate="NEW_SERVICE_RESOURCE_ERROR_VALID_TOSCA_EXTENSIONS" translate-values="{'extensions': '{{importedFileExtension}}' }"></span>
255 <span ng-show="editForm.fileElement.$error.emptyFile" translate="VALIDATION_ERROR_EMPTY_FILE"></span>
257 <!--------------------- IMPORT TOSCA FILE -------------------->
259 <!--------------------- USER ID -------------------->
260 <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.contactId)}">
261 <label class="i-sdc-form-label required" translate="GENERAL_LABEL_CONTACT_ID"></label>
262 <input class="i-sdc-form-input" type="text"
263 data-ng-model="component.contactId"
264 data-ng-class="{'view-mode': isViewMode()}"
265 data-ng-required="true"
267 data-ng-pattern="validation.contactIdValidationPattern"
268 data-ng-model-options="{ debounce: 500 }"
269 data-tests-id="contactId"
270 data-ng-maxlength="50"
273 <div class="input-error" data-ng-show="validateField(editForm.contactId)">
274 <span ng-show="editForm.contactId.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span>
275 <span ng-show="editForm.contactId.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_REQUIRED"></span>
276 <span ng-show="editForm.contactId.$error.pattern" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_NOT_VALID"></span>
279 <!--------------------- USER ID -------------------->
281 <!--------------------- VENDOR NAME -------------------->
282 <div ng-if="component.isResource()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.vendorName)}">
283 <label class="i-sdc-form-label required" translate="GENERAL_LABEL_VENDOR_NAME"></label>
284 <input class="i-sdc-form-input" type="text"
285 data-ng-class="{'view-mode': isViewMode()}"
286 data-ng-model="component.vendorName"
287 data-ng-model-options="{ debounce: 500 }"
288 data-ng-maxlength="60"
290 ng-click="oldValue = component.vendorName"
292 data-ng-change="onVendorNameChange(oldValue)"
293 data-ng-pattern="validation.VendorNameValidationPattern"
294 data-ng-disabled="component.isAlreadyCertified() || (component.isCsarComponent() && component.vendorName && component.vendorName!=='')"
295 data-tests-id="vendorName"
298 <div class="input-error" data-ng-show="validateField(editForm.vendorName)">
299 <span ng-show="editForm.vendorName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_VENDOR_NAME_REQUIRED"></span>
300 <span ng-show="editForm.vendorName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '60' }"></span>
301 <span ng-show="editForm.vendorName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
306 <!--------------------- VENDOR NAME -------------------->
308 <!--------------------- VENDOR RELEASE -------------------->
309 <div ng-if="component.isResource()"
310 class="i-sdc-form-item"
311 data-ng-class="{'error': validateField(editForm.vendorRelease)}">
312 <label class="i-sdc-form-label required" translate="GENERAL_LABEL_VENDOR_RELEASE"></label>
313 <input class="i-sdc-form-input" type="text"
314 data-ng-class="{'view-mode': isViewMode()}"
315 data-ng-model="component.vendorRelease"
316 data-ng-model-options="{ debounce: 500 }"
317 data-ng-maxlength="25"
320 data-ng-pattern="validation.VendorReleaseValidationPattern"
321 data-ng-disabled="component.isCsarComponent() && component.vendorRelease && component.vendorRelease!==''"
322 data-tests-id="vendorRelease"
325 <div class="input-error" data-ng-show="validateField(editForm.vendorRelease)">
326 <span ng-show="editForm.vendorRelease.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_VENDOR_RELEASE_REQUIRED"></span>
327 <span ng-show="editForm.vendorRelease.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '25' }"></span>
328 <span ng-show="editForm.vendorRelease.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
331 <!--------------------- VENDOR RELEASE -------------------->
333 <!--------------------- Resource Model Number -------------------->
334 <div ng-if="component.isResource()"
335 class="i-sdc-form-item"
336 data-ng-class="{'error': validateField(editForm.resourceVendorModelNumber)}">
337 <label class="i-sdc-form-label" translate="GENERAL_LABEL_RESOURCE_MODEL_NUMBER"></label>
338 <input class="i-sdc-form-input" type="text"
339 data-ng-class="{'view-mode': isViewMode()}"
340 data-ng-model="component.resourceVendorModelNumber"
341 data-ng-model-options="{ debounce: 500 }"
342 data-ng-maxlength="65"
343 name="resourceVendorModelNumber"
344 data-ng-pattern="validation.VendorModelNumberValidationPattern"
345 data-tests-id="resourceVendorModelNumber"
348 <div class="input-error" data-ng-show="validateField(editForm.resourceVendorModelNumber)">
349 <span ng-show="editForm.resourceVendorModelNumber.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '65' }"></span>
350 <span ng-show="editForm.resourceVendorModelNumber.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
353 <!--------------------- Resource Model Number -------------------->
355 <!--------------------- ECOMPGENERATEDNAMING -------------------->
357 <div class="i-sdc-form-item"
358 data-ng-class="{'error': validateField(editForm.ecompGeneratedNaming)}"
359 data-ng-if="component.isService()">
360 <label class="i-sdc-form-label">Generated Naming</label>
361 <select class="i-sdc-form-select"
363 name="ecompGeneratedNaming"
364 data-ng-change="onEcompGeneratedNamingChange()"
365 data-ng-class="{'view-mode': isViewMode()}"
366 data-ng-model="component.ecompGeneratedNaming"
367 data-tests-id="ecompGeneratedNaming">
368 <option ng-value="true">true</option>
369 <option ng-value="false">false</option>
371 <div class="input-error" data-ng-show="validateField(editForm.ecompGeneratedNaming)">
375 <!--------------------- CATEGORIES -------------------->
377 <!--------------------- NAMING POLICY -------------------->
378 <div ng-if="component.isService()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.namingPolicy)}">
379 <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Naming Policy', 'namingPolicy')">
380 <div ng-if="isMetadataKeyMandatory('Naming Policy')">
381 <label class="i-sdc-form-label required">Naming Policy</label>
383 <div ng-if="!isMetadataKeyMandatory('Naming Policy')">
384 <label class="i-sdc-form-label">Naming Policy</label>
386 <select class="i-sdc-form-input" type="text"
387 ng-required="isMetadataKeyMandatory('Naming Policy')"
388 data-ng-class="{'view-mode': isViewMode()}"
389 data-ng-model="component.namingPolicy"
390 data-ng-model-options="{ debounce: 500 }"
392 data-tests-id="namingPolicy"
393 data-ng-maxlength="256"
394 data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
395 > <option ng-repeat="value in getMetadataKeyValidValues('Naming Policy')">{{value}}</option>
398 <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Naming Policy')">
399 <label class="i-sdc-form-label">Naming Policy</label>
400 <input class="i-sdc-form-input"
402 data-ng-class="{'view-mode': isViewMode() || !component.ecompGeneratedNaming}"
403 data-ng-maxlength="100"
404 data-ng-model="component.namingPolicy"
406 data-ng-model-options="{ debounce: 500 }"
407 data-ng-pattern="validation.commentValidationPattern"
408 data-tests-id="namingPolicy"
410 ng-readonly="isViewMode() || !component.ecompGeneratedNaming"
413 <div class="input-error" data-ng-show="validateField(editForm.namingPolicy)">
414 <span ng-show="editForm.namingPolicy.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span>
415 <span ng-show="editForm.namingPolicy.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
418 <!--------------------- NAMING POLICY -------------------->
420 <!--------------------- Service Type -------------------->
421 <div ng-if="component.isService()"
422 class="i-sdc-form-item"
423 data-ng-class="{'error': validateField(editForm.serviceFunctionType)}">
424 <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Service Type', 'serviceType')">
425 <div ng-if="isMetadataKeyMandatory('Service Type')">
426 <label class="i-sdc-form-label required" translate="GENERAL_TAB_LABEL_SERVICE_TYPE"></label>
428 <div ng-if="!isMetadataKeyMandatory('Service Type')">
429 <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_TYPE"></label>
431 <select class="i-sdc-form-input" type="text"
432 ng-required="isMetadataKeyMandatory('Service Type')"
433 data-ng-class="{'view-mode': isViewMode()}"
434 data-ng-model="component.serivceType"
435 data-ng-model-options="{ debounce: 500 }"
437 data-tests-id="serviceType"
438 data-ng-maxlength="256"
439 data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
440 > <option ng-repeat="value in getMetadataKeyValidValues('Service Type')">{{value}}</option>
443 <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Service Type')">
444 <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_TYPE"></label>
445 <input class="i-sdc-form-input" type="text"
446 data-ng-class="{'view-mode': isViewMode()}"
447 data-ng-model="component.serviceType"
448 data-ng-model-options="{ debounce: 500 }"
450 data-tests-id="serviceType"
451 data-ng-maxlength="256"
452 data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
455 <div class="input-error" data-ng-show="validateField(editForm.serviceType)">
456 <span ng-show="editForm.serviceType.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
457 <span ng-show="editForm.serviceType.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
460 <!--------------------- Service Type -------------------->
462 <!--------------------- Service Role -------------------->
463 <div ng-if="component.isService()"
464 class="i-sdc-form-item"
465 data-ng-class="{'error': validateField(editForm.serviceRole)}">
466 <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Service Role', 'serviceRole')">
467 <div ng-if="isMetadataKeyMandatory('Service Role')">
468 <label class="i-sdc-form-label required" translate="GENERAL_TAB_LABEL_SERVICE_ROLE"></label>
470 <div ng-if="!isMetadataKeyMandatory('Service Role')">
471 <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_ROLE"></label>
473 <select class="i-sdc-form-input" type="text"
474 ng-required="isMetadataKeyMandatory('Service Role')"
475 data-ng-class="{'view-mode': isViewMode()}"
476 data-ng-model="component.serviceRole"
477 data-ng-model-options="{ debounce: 500 }"
479 data-tests-id="serviceRole"
480 data-ng-maxlength="256"
481 > <option ng-repeat="value in getMetadataKeyValidValues('Service Role')">{{value}}</option>
484 <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Service Role')">
485 <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_ROLE"></label>
486 <input class="i-sdc-form-input" type="text"
487 data-ng-class="{'view-mode': isViewMode()}"
488 data-ng-model="component.serviceRole"
489 data-ng-model-options="{ debounce: 500 }"
491 data-tests-id="serviceRole"
492 data-ng-maxlength="256"
493 data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
496 <div class="input-error" data-ng-show="validateField(editForm.serviceRole)">
497 <span ng-show="editForm.serviceRole.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
498 <span ng-show="editForm.serviceRole.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
501 <!--------------------- Service Role -------------------->
502 <!--------------------- Service Function -------------------->
503 <div ng-if="component.isService()"
504 class="i-sdc-form-item"
505 data-ng-class="{'error': validateField(editForm.serviceFunction)}">
506 <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Service Function', 'serviceFunction')">
507 <div ng-if="isMetadataKeyMandatory('Service Function')">
508 <label class="i-sdc-form-label required" translate="GENERAL_TAB_LABEL_SERVICE_FUNCTION"></label>
510 <div ng-if="!isMetadataKeyMandatory('Service Function')">
511 <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_FUNCTION"></label>
513 <select class="i-sdc-form-input" type="text"
514 ng-required="isMetadataKeyMandatory('Service Function')"
515 data-ng-class="{'view-mode': isViewMode()}"
516 data-ng-model="component.serviceFunction"
517 data-ng-model-options="{ debounce: 500 }"
518 name="serviceFunction"
519 data-tests-id="serviceFunction"
520 data-ng-maxlength="256"
521 data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
522 > <option ng-repeat="value in getMetadataKeyValidValues('Service Function')">{{value}}</option>
525 <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Service Function')">
526 <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_FUNCTION"></label>
527 <input class="i-sdc-form-input" type="text"
528 data-ng-class="{'view-mode': isViewMode()}"
529 data-ng-model="component.serviceFunction"
530 name="serviceFunction"
531 data-tests-id="serviceFunction"
532 data-ng-maxlength="256"
533 data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
536 <div class="input-error" data-ng-show="validateField(editForm.serviceFunction)">
537 <span ng-show="editForm.serviceFunction.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
538 <span ng-show="editForm.serviceFunction.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
541 <!--------------------- Service Function -------------------->
543 <!-------------------- ENVIRONMENT CONTEXT ----------------->
545 <div ng-if="component.isService()" class="i-sdc-form-item">
546 <loader data-display="!environmentContextObj && !initEnvironmentContext()" relative="true"></loader>
547 <label class="i-sdc-form-label">Environment Context</label>
548 <select class="i-sdc-form-select"
549 name="environmentContext"
550 data-ng-class="{'view-mode': isViewMode()}"
551 data-ng-model="component.environmentContext"
552 data-tests-id="environmentContext"
554 <option data-ng-repeat="environmentContextVal in (environmentContextObj.validValues) | orderBy"
555 value="{{environmentContextVal}}"
556 data-tests-id="{{environmentContextVal}}">{{environmentContextVal}}</option>
560 <!--------------------- ENVIRONMENT CONTEXT ------------------>
562 <!--------------------- Instantiation Type -------------------->
563 <div class="i-sdc-form-item" data-ng-if="component.isService() && instantiationTypes">
564 <label class="i-sdc-form-label">Instantiation Type</label>
565 <select class="i-sdc-form-select"
566 name="instantiationType"
567 data-ng-class="{'view-mode': isViewMode()}"
568 data-ng-disabled="component.isCsarComponent()"
569 data-ng-model="component.instantiationType"
570 data-tests-id="selectInstantiationType">
571 <option ng-repeat="type in instantiationTypes">{{type}}</option>
576 <!--------------------- Instantiation Type -------------------->
578 <!--------------------- Base Type -------------------->
580 <div class="w-sdc-form-columns-wrapper">
581 <div class="w-sdc-form-column">
582 <div class="i-sdc-form-item" data-ng-if="component.isService()">
583 <label class="i-sdc-form-label">Base Type</label>
584 <select class="i-sdc-form-select"
586 data-ng-class="{'view-mode': isViewMode()}"
587 data-ng-disabled="component.isCsarComponent() || !isCreateMode()"
588 data-ng-model="component.derivedFromGenericType"
589 data-ng-change="onBaseTypeChange()"
590 data-tests-id="selectBaseType">
591 <option ng-repeat="type in baseTypes">{{type}}</option>
595 <div class="w-sdc-form-column">
596 <div class="i-sdc-form-item" data-ng-if="component.isService()">
597 <label class="i-sdc-form-label">Base Type Version</label>
598 <select class="i-sdc-form-select"
599 name="baseTypeVersion"
600 data-ng-class="{'view-mode': isViewMode()}"
601 data-ng-disabled="component.isCsarComponent() || !isCreateMode()"
602 data-ng-model="component.derivedFromGenericVersion"
603 data-tests-id="selectBaseTypeVersion">
604 <option ng-repeat="version in baseTypeVersions">{{version}}</option>
610 <!--------------------- Base Type -------------------->
612 <!--------------------- Model -------------------->
613 <div class="i-sdc-form-item">
614 <label class="i-sdc-form-label">Model</label>
615 <select class="i-sdc-form-select"
617 data-ng-class="{'view-mode': isViewMode()}"
618 data-ng-disabled="component.isCsarComponent() || !isCreateMode()"
619 data-ng-model="component.model"
620 data-ng-change="onModelChange()"
621 data-tests-id="modelName">
622 <option value="">SDC AID</option>
623 <option ng-repeat="model in models | orderBy:[name]">{{model}}</option>
626 <!--------------------- Model -------------------->
628 <div class="meta-data" data-ng-if="component.creationDate">
632 <div class="meta-data-item-value">{{component.creationDate | date:'MM/dd/yyyy'}}, {{component.creatorFullName}}</div>
636 <div class="meta-data-item-value">
637 {{component.lastUpdateDate | date:'MM/dd/yyyy'}}
642 <div class="meta-data-item-value">
646 <b>Invariant UUID:</b>
648 <div class="meta-data-item-value">
649 {{component.invariantUUID}}
652 </div><!-- Close w-sdc-form-column -->
655 </div><!-- Close w-sdc-form-section-container -->