aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/view-models/workspace
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/src/app/view-models/workspace')
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.less5
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.less2
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts9
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html3
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view.html2
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view-model.ts2
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view.html21
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details.less3
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts.less2
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts49
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html552
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/general/general.less80
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/icons/icons-view-model.ts131
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/icons/icons-view.html26
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/icons/icons.less65
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts.less2
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/inputs/inputs.less2
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view-model.ts129
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view.html40
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy.less130
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/properties/properties.less2
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts.less5
-rw-r--r--catalog-ui/src/app/view-models/workspace/workspace-view-model.ts46
-rw-r--r--catalog-ui/src/app/view-models/workspace/workspace-view.html17
-rw-r--r--catalog-ui/src/app/view-models/workspace/workspace.less60
25 files changed, 533 insertions, 852 deletions
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.less b/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.less
index 61bb3e9f01..24f83ec503 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.less
+++ b/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.less
@@ -1,7 +1,4 @@
.activity-log {
-
- margin-top: 30px;
-
.title-wrapper {
display: flex;
justify-content: flex-end;
@@ -10,7 +7,7 @@
.table-container-flex .table .body .scrollbar-container {
max-height: 448px;
}
-
+
.view-mode {
background-color: @main_color_p;
}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.less b/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.less
index ffd28afce4..932daa167d 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.less
+++ b/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.less
@@ -13,7 +13,7 @@
}
.table-container-flex {
- margin-top: 27px;
+ margin-top: 0;
.text{
overflow: hidden;
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts
index 894f8aeb2a..fbd32cc967 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts
@@ -18,12 +18,14 @@
* ============LICENSE_END=========================================================
*/
'use strict';
-import {Component, Product, ComponentInstance, IAppMenu} from "app/models";
+import {Component, ComponentInstance, IAppMenu} from "app/models";
import {SharingService, CacheService, EventListenerService, LeftPaletteLoaderService} from "app/services";
import {ModalsHandler, GRAPH_EVENTS, ComponentFactory, ChangeLifecycleStateHandler, MenuHandler, EVENTS} from "app/utils";
import {IWorkspaceViewModelScope} from "../../workspace-view-model";
import {ComponentServiceNg2} from "app/ng2/services/component-services/component.service";
import {ComponentGenericResponse} from "app/ng2/services/responses/component-generic-response";
+import {Resource} from "app/models/components/resource";
+import {ResourceType} from "../../../../utils/constants";
export interface ICompositionViewModelScope extends IWorkspaceViewModelScope {
@@ -205,9 +207,6 @@ export class CompositionViewModel {
if (this.$state.current.name === 'workspace.composition.api') {
this.$state.go('workspace.composition.details');
}
- if (this.$state.current.name === 'workspace.composition.relations' && this.$scope.currentComponent.isProduct()) {
- this.$state.go('workspace.composition.details');
- }
};
this.$scope.onBackgroundClick = ():void => {
@@ -238,7 +237,7 @@ export class CompositionViewModel {
this.ModalsHandler.openAlertModal(title, message).then(onOk);
};
- this.$scope.onComponentInstanceVersionChange = (component:Product):void => {
+ this.$scope.onComponentInstanceVersionChange = (component:Component):void => {
this.$scope.currentComponent = component;
this.$scope.setComponent(this.$scope.currentComponent);
this.$scope.updateSelectedComponent();
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html
index 761ae53909..cef942e853 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html
+++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html
@@ -57,7 +57,8 @@
<button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
data-ui-sref="workspace.composition.deployment"
tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Deployment Artifacts"
- data-tests-id="deployment-artifact-tab">
+ data-tests-id="deployment-artifact-tab"
+ data-ng-if="!isPNF()">
<div class="i-sdc-designer-sidebar-tab-icon sprite-new deployment-artifacts"></div>
</button>
<button tooltips tooltip-class="tooltip-custom tab-tooltip"
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view.html b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view.html
index 01cb9d4ee4..8221c67eca 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view.html
+++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view.html
@@ -60,7 +60,7 @@
</div>
</div>
- <div class="w-sdc-designer-sidebar-section-footer" data-ng-if="!isViewMode() && artifactType!=='api' && (!isComponentInstanceSelected()||selectedComponent.resourceType=='VF') && !currentComponent.isProduct() && ('deployment' != artifactType || selectedComponent.isComplex())">
+ <div class="w-sdc-designer-sidebar-section-footer" data-ng-if="!isViewMode() && artifactType!=='api' && (!isComponentInstanceSelected()||selectedComponent.resourceType=='VF') && ('deployment' != artifactType || selectedComponent.isComplex())">
<button class="w-sdc-designer-sidebar-section-footer-action tlv-btn blue" data-tests-id="add_Artifact_Button" data-ng-click="addOrUpdate({})" type="button">Add Artifact</button>
</div>
</div>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view-model.ts
index 223d6cf964..0d8d17ec73 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view-model.ts
@@ -82,7 +82,7 @@ export class DetailsViewModel {
let highestVersion = _.last(Object.keys(this.$scope.selectedComponent.allVersions));
if (parseFloat(highestVersion) % 1) { //if highest is minor, make sure it is the latest checked in -
- let latestVersionComponent:LeftPaletteComponent = _.maxBy(_.filter(this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(this.$scope.currentComponent.componentType), (component:LeftPaletteComponent) => { //latest checked in
+ let latestVersionComponent:LeftPaletteComponent = _.maxBy(_.filter(this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(this.$scope.currentComponent), (component:LeftPaletteComponent) => { //latest checked in
return (component.systemName === this.$scope.selectedComponent.systemName
|| component.uuid === this.$scope.selectedComponent.uuid);
}),(component)=>{return component.version});
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view.html b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view.html
index 70dc58075a..8607d65964 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view.html
+++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view.html
@@ -77,6 +77,27 @@
data-tests-id="rightTab_vendorRelease">
</span>
</div>
+ <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="selectedComponent.isResource()">
+ <span class="i-sdc-designer-sidebar-section-content-item-label" translate="GENERAL_LABEL_RESOURCE_MODEL_NUMBER"></span>
+ <span class="i-sdc-designer-sidebar-section-content-item-value vendor-model-number" data-ng-bind="selectedComponent.resourceVendorModelNumber"
+ tooltips tooltip-class="tooltip-custom break-word-tooltip" tooltip-content="&#8203;{{selectedComponent.resourceVendorModelNumber}}"
+ data-tests-id="rightTab_resourceVendorModelNumber">
+ </span>
+ </div>
+ <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="selectedComponent.isService()">
+ <span class="i-sdc-designer-sidebar-section-content-item-label" translate="GENERAL_LABEL_SERVICE_TYPE"></span>
+ <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="selectedComponent.serviceType"
+ tooltips tooltip-class="tooltip-custom break-word-tooltip" tooltip-content="&#8203;{{selectedComponent.serviceType}}"
+ data-tests-id="rightTab_serviceType">
+ </span>
+ </div>
+ <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="selectedComponent.isService()">
+ <span class="i-sdc-designer-sidebar-section-content-item-label" translate="GENERAL_LABEL_SERVICE_ROLE"></span>
+ <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="selectedComponent.serviceRole"
+ tooltips tooltip-class="tooltip-custom break-word-tooltip" tooltip-content="&#8203;{{selectedComponent.serviceRole}}"
+ data-tests-id="rightTab_serviceRole">
+ </span>
+ </div>
<div class="i-sdc-designer-sidebar-section-content-item">
<span class="i-sdc-designer-sidebar-section-content-item-label" translate="GENERAL_LABEL_CONTACT_ID"></span>
<span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="selectedComponent.contactId"
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details.less b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details.less
index 3ebb14c2b8..0ed72e2f00 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details.less
+++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details.less
@@ -37,6 +37,9 @@
max-width: 160px;
vertical-align:bottom;
font-weight: normal;
+ &.vendor-model-number{
+ max-width: 110px;
+ }
&.additional-information{
max-width:160px;
display: inline-block;
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts.less b/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts.less
index 3596a217b8..f67d088b5a 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts.less
+++ b/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts.less
@@ -71,7 +71,7 @@
.table-container-flex {
- margin-top: 27px;
+ margin-top: 0;
.text{
overflow: hidden;
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts
index 05b3324bbb..1dc326a7c0 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts
@@ -22,14 +22,16 @@
import {ModalsHandler, ValidationUtils, EVENTS, CHANGE_COMPONENT_CSAR_VERSION_FLAG, ComponentType, DEFAULT_ICON,
ResourceType} from "app/utils";
import {CacheService, EventListenerService, ProgressService} from "app/services";
-import {IAppConfigurtaion, Product, IValidate, IMainCategory, Resource, ISubCategory,Service} from "app/models";
+import {IAppConfigurtaion, IValidate, IMainCategory, Resource, ISubCategory,Service} from "app/models";
import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model";
export class Validation {
componentNameValidationPattern:RegExp;
contactIdValidationPattern:RegExp;
tagValidationPattern:RegExp;
- vendorValidationPattern:RegExp;
+ VendorReleaseValidationPattern:RegExp;
+ VendorNameValidationPattern:RegExp;
+ VendorModelNumberValidationPattern:RegExp;
commentValidationPattern:RegExp;
projectCodeValidationPattern:RegExp;
}
@@ -63,6 +65,8 @@ export interface IGeneralScope extends IWorkspaceViewModelScope {
onEcompGeneratedNamingChange():void;
openOnBoardingModal():void;
initCategoreis():void;
+ updateIcon():void;
+ possibleToUpdateIcon():boolean;
}
export class GeneralViewModel {
@@ -73,7 +77,9 @@ export class GeneralViewModel {
'ComponentNameValidationPattern',
'ContactIdValidationPattern',
'TagValidationPattern',
- 'VendorValidationPattern',
+ 'VendorReleaseValidationPattern',
+ 'VendorNameValidationPattern',
+ 'VendorModelNumberValidationPattern',
'CommentValidationPattern',
'ValidationUtils',
'sdcConfig',
@@ -93,7 +99,9 @@ export class GeneralViewModel {
private ComponentNameValidationPattern:RegExp,
private ContactIdValidationPattern:RegExp,
private TagValidationPattern:RegExp,
- private VendorValidationPattern:RegExp,
+ private VendorReleaseValidationPattern:RegExp,
+ private VendorNameValidationPattern:RegExp,
+ private VendorModelNumberValidationPattern:RegExp,
private CommentValidationPattern:RegExp,
private ValidationUtils:ValidationUtils,
private sdcConfig:IAppConfigurtaion,
@@ -121,7 +129,9 @@ export class GeneralViewModel {
this.$scope.validation.componentNameValidationPattern = this.ComponentNameValidationPattern;
this.$scope.validation.contactIdValidationPattern = this.ContactIdValidationPattern;
this.$scope.validation.tagValidationPattern = this.TagValidationPattern;
- this.$scope.validation.vendorValidationPattern = this.VendorValidationPattern;
+ this.$scope.validation.VendorReleaseValidationPattern = this.VendorReleaseValidationPattern;
+ this.$scope.validation.VendorNameValidationPattern = this.VendorNameValidationPattern;
+ this.$scope.validation.VendorModelNumberValidationPattern = this.VendorModelNumberValidationPattern;
this.$scope.validation.commentValidationPattern = this.CommentValidationPattern;
this.$scope.validation.projectCodeValidationPattern = this.ProjectCodeValidationPattern;
};
@@ -140,12 +150,6 @@ export class GeneralViewModel {
this.$scope.componentCategories = new componentCategories();
this.$scope.componentCategories.selectedCategory = this.$scope.component.selectedCategory;
- // Workaround to short vendor name to 25 chars
- // Amdocs send 27 chars, and the validation pattern is 25 chars.
- if (this.$scope.component.vendorName) {
- this.$scope.component.vendorName = this.$scope.component.vendorName.substr(0, 25);
- }
-
// Init UIModel
this.$scope.component.tags = _.without(this.$scope.component.tags, this.$scope.component.name);
@@ -202,10 +206,7 @@ export class GeneralViewModel {
};
//TODO remove this after handling contact in UI
- if (this.$scope.component.isProduct() && this.$scope.isCreateMode()) {
- (<Product>this.$scope.component).contacts = [];
- (<Product>this.$scope.component).contacts.push(this.cacheService.get("user").userId);
- } else if (this.$scope.isCreateMode()) {
+ if (this.$scope.isCreateMode()) {
this.$scope.component.contactId = this.cacheService.get("user").userId;
}
@@ -273,6 +274,24 @@ export class GeneralViewModel {
});
};
+ this.$scope.updateIcon = ():void => {
+ this.ModalsHandler.openUpdateIconModal(this.$scope.component).then((isDirty:boolean)=> {
+ if(!this.$scope.isCreateMode()){
+ this.$state.current.data.unsavedChanges = this.$state.current.data.unsavedChanges || isDirty;
+ }
+ }, ()=> {
+ // ERROR
+ });
+ };
+
+ this.$scope.possibleToUpdateIcon = ():boolean => {
+ if(this.$scope.componentCategories.selectedCategory && (!this.$scope.component.isResource() || this.$scope.component.vendorName)){
+ return true;
+ }else{
+ return false;
+ }
+ }
+
this.$scope.validateName = (isInit:boolean):void => {
if (isInit === undefined) {
isInit = false;
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html
index 2ad0cbacd6..d3626803e9 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html
+++ b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html
@@ -4,122 +4,121 @@
<div class="w-sdc-form-section-container">
- <!--------------------- 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()}">{{browseFileLabel}}</label>
- <file-upload id="fileUploadElement"
- class="i-sdc-form-input"
- element-name="fileElement"
- element-disabled="{{!isCreateMode()&&!(isEditMode()&&component.resourceType=='VF')}} || {{isViewMode()}}"
- form-element="editForm"
- file-model="component.importedFile"
- on-file-changed-in-directive="uploadFileChangedInGeneralTab"
- extensions="{{importedFileExtension}}"
- default-text="'Browse to select file'"
- data-ng-class="{'error':!(isEditMode()&&component.resourceType=='VF') && (!editForm.fileElement.$valid || !component.importedFile.filename)}"></file-upload>
- </div>
-
- <!--------------------- IMPORT TOSCA FILE USING ONBOARDING -------------------->
- <div class="i-sdc-form-item" ng-if="isShowOnboardingSelectionBrowse">
- <label class="i-sdc-form-label required">Select VSP</label>
- <div class="i-sdc-form-file-upload i-sdc-form-input">
- <span class="i-sdc-form-file-name" 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" name="fileElement"/>
- <div class="file-upload-browse-btn" data-ng-click="openOnBoardingModal()" data-tests-id="browseButton">Browse</div>
- </div>
- </div>
-
- <div class="input-error-file-upload" 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 -------------------->
-
<div class="w-sdc-form-columns-wrapper">
<div class="w-sdc-form-column">
-
- <!--------------------- NAME -------------------->
- <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.componentName)}">
- <label class="i-sdc-form-label required">Name</label>
- <input class="i-sdc-form-input"
- data-ng-class="{'view-mode': isViewMode()}"
- name="componentName"
- data-ng-init="isCreateMode() && validateName(true)"
- data-ng-maxlength="{{component.isProduct()?'25':'50'}}"
- maxlength="{{component.isProduct()?'25':'50'}}"
- data-ng-minlength="{{component.isProduct()?'4':'0'}}"
- minlength="{{component.isProduct()?'4':'0'}}"
- data-ng-model="component.name"
- type="text"
- data-required
- data-ng-model-options="{ debounce: 500 }"
- data-ng-pattern="validation.componentNameValidationPattern"
- data-ng-disabled="component.isAlreadyCertified()"
- data-tests-id="name"
- autofocus
- ng-readonly="isViewMode()"
- />
-
- <div class="input-error" data-ng-show="validateField(editForm.componentName)">
- <span ng-show="editForm.componentName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_NAME_REQUIRED"></span>
- <span ng-show="editForm.componentName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span>
- <span ng-show="editForm.componentName.$error.minlength" translate="VALIDATION_ERROR_MIN_LENGTH" translate-values="{'min': '4' }"></span>
- <span ng-show="editForm.componentName.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_NAME_EXISTS"></span>
- <span ng-show="editForm.componentName.$error.pattern" translate="VALIDATION_ERROR_INVALID_NAME"></span>
+ <div class="upper-general-fields">
+ <div class="selected-icon-container" data-ng-class="{'show-only-on-over':'defaulticon'!=component.icon && !isViewMode()}">
+ <div class="selected-icon-inner-container">
+ <div class="sprite-new update-component-icon" data-ng-click="updateIcon()" data-ng-if="!isViewMode() && possibleToUpdateIcon()"></div>
+ <div class="i-sdc-form-item-suggested-icon large selected-icon {{component.iconSprite}} {{component.icon}}"
+ data-ng-class="{ 'disable': isViewMode() || !possibleToUpdateIcon() }"
+ ng-model="component.icon"
+ tooltips tooltip-content='{{component.icon | translate}}'
+ >
+ </div>
+ </div>
+ </div>
+ <div class="name-and-category-fields">
+ <!--------------------- NAME -------------------->
+ <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.componentName)}">
+ <label class="i-sdc-form-label required">Name</label>
+ <input class="i-sdc-form-input"
+ data-ng-class="{'view-mode': isViewMode()}"
+ name="componentName"
+ data-ng-init="isCreateMode() && validateName(true)"
+ data-ng-maxlength="50"
+ maxlength="50"
+ data-ng-model="component.name"
+ type="text"
+ data-required
+ data-ng-model-options="{ debounce: 500 }"
+ data-ng-pattern="validation.componentNameValidationPattern"
+ data-ng-disabled="component.isAlreadyCertified()"
+ data-tests-id="name"
+ autofocus
+ ng-readonly="isViewMode()"
+ />
+
+ <div class="input-error" data-ng-show="validateField(editForm.componentName)">
+ <span ng-show="editForm.componentName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_NAME_REQUIRED"></span>
+ <span ng-show="editForm.componentName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span>
+ <span ng-show="editForm.componentName.$error.minlength" translate="VALIDATION_ERROR_MIN_LENGTH" translate-values="{'min': '4' }"></span>
+ <span ng-show="editForm.componentName.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_NAME_EXISTS"></span>
+ <span ng-show="editForm.componentName.$error.pattern" translate="VALIDATION_ERROR_INVALID_NAME"></span>
+ </div>
+ </div>
+ <!--------------------- NAME -------------------->
+
+
+
+ <!--------------------- CATEGORIES -------------------->
+ <div class="i-sdc-form-item"
+ data-ng-class="{'error': validateField(editForm.category)}">
+ <loader data-display="!categories && !initCategoreis()" relative="true"></loader>
+ <label class="i-sdc-form-label required">Category</label>
+ <select class="i-sdc-form-select"
+ data-required
+ name="category"
+ data-ng-class="{'view-mode': isViewMode()}"
+ data-ng-change="onCategoryChange()"
+ data-ng-disabled="component.isAlreadyCertified() || (component.isCsarComponent() && component.selectedCategory && component.selectedCategory!=='')"
+ data-ng-model="componentCategories.selectedCategory"
+ data-tests-id="selectGeneralCategory"
+ >
+ <option value="">Select category</option>
+ <optgroup ng-if="component.isResource()" data-ng-repeat="mainCategory in categories | orderBy:['name']" label="{{mainCategory.name}}" data-tests-id="{{mainCategory.name}}">
+ <option data-ng-repeat="subCategory in mainCategory.subcategories track by $index"
+ data-ng-selected="componentCategories.selectedCategory === calculateUnique(mainCategory.name,subCategory.name)"
+ data-tests-id="{{subCategory.name}}"
+ value="{{calculateUnique(mainCategory.name, subCategory.name)}}">{{subCategory.name}}
+
+ </option>
+ </optgroup>
+ <option ng-if="component.isService()" data-ng-repeat="mainCategory in categories | orderBy:['name']"
+ data-ng-selected="component.selectedCategory===mainCategory.name"
+ value="{{mainCategory.name}}"
+ data-tests-id="{{mainCategory.name}}">{{mainCategory.name}}</option>
+ </select>
+
+ <div class="input-error" data-ng-show="validateField(editForm.category)">
+ <span ng-show="editForm.category.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_CATEGORY_REQUIRED"></span>
+ </div>
+ </div>
+ <!--------------------- CATEGORIES -------------------->
+ </div>
</div>
- </div>
- <!--------------------- NAME -------------------->
+ <!--------------------- RESOURCE TAGS -------------------->
+ <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.tags)}">
+ <label class="i-sdc-form-label">Tags</label>
- <!--------------------- FULL NAME -------------------->
- <div ng-if="component.isProduct()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.fullName)}">
- <label class="i-sdc-form-label required">Full Name</label>
- <input class="i-sdc-form-input"
- name="fullName"
- data-ng-class="{'view-mode': isViewMode()}"
- data-ng-change="validateName()"
- data-ng-maxlength="100"
- maxlength="100"
- data-ng-minlength="4"
- minlength="4"
- data-ng-model="component.fullName"
- type="text"
- data-required
- data-ng-model-options="{ debounce: 500 }"
- data-ng-pattern="validation.commentValidationPattern"
- data-tests-id="fullName"
- autofocus
- ng-readonly="isViewMode()"
- />
+ <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.fullName)">
- <span ng-show="editForm.fullName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_NAME_REQUIRED"></span>
- <span ng-show="editForm.fullName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span>
- <span ng-show="editForm.fullName.$error.minlength" translate="VALIDATION_ERROR_MIN_LENGTH" translate-values="{'min': '4' }"></span>
- <span ng-show="editForm.fullName.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_NAME_EXISTS"></span>
- <span ng-show="editForm.fullName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+ <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>
- <!--------------------- NAME -------------------->
+ <!--------------------- RESOURCE TAGS -------------------->
<!--------------------- DESCRIPTION -------------------->
- <div class="i-sdc-form-item"
+ <div class="i-sdc-form-item description-field"
data-ng-class="{'error': validateField(editForm.description)}">
<label class="i-sdc-form-label required">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"
- maxlength="1024"
- data-tests-id="description"></textarea>
+ <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"
+ maxlength="1024"
+ data-tests-id="description"></textarea>
<!-- placeholder="Description here..." -->
<div class="input-error" data-ng-show="validateField(editForm.description)">
@@ -130,110 +129,85 @@
</div>
<!--------------------- DESCRIPTION -------------------->
- <!--------------------- CATEGORIES -------------------->
- <div class="i-sdc-form-item"
- data-ng-class="{'error': validateField(editForm.category)}"
- data-ng-if="!component.isProduct()">
- <loader data-display="!categories && !initCategoreis()" relative="true"></loader>
- <label class="i-sdc-form-label required">Category</label>
- <select class="i-sdc-form-select"
- data-required
- name="category"
- data-ng-class="{'view-mode': isViewMode()}"
- data-ng-change="onCategoryChange()"
- data-ng-disabled="component.isAlreadyCertified() || (component.isCsarComponent() && component.selectedCategory && component.selectedCategory!=='')"
- data-ng-model="componentCategories.selectedCategory"
- data-tests-id="selectGeneralCategory"
- >
- <option value="">Select category</option>
- <optgroup ng-if="component.isResource()" data-ng-repeat="mainCategory in categories | orderBy:['name']" label="{{mainCategory.name}}" data-tests-id="{{mainCategory.name}}">
- <option data-ng-repeat="subCategory in mainCategory.subcategories track by $index"
- data-ng-selected="componentCategories.selectedCategory === calculateUnique(mainCategory.name,subCategory.name)"
- data-tests-id="{{subCategory.name}}"
- value="{{calculateUnique(mainCategory.name, subCategory.name)}}">{{subCategory.name}}
-
- </option>
- </optgroup>
- <option ng-if="component.isService()" data-ng-repeat="mainCategory in categories | orderBy:['name']"
- data-ng-selected="component.selectedCategory===mainCategory.name"
- value="{{mainCategory.name}}"
- data-tests-id="{{mainCategory.name}}">{{mainCategory.name}}</option>
- </select>
-
- <div class="input-error" data-ng-show="validateField(editForm.category)">
- <span ng-show="editForm.category.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_CATEGORY_REQUIRED"></span>
- </div>
- </div>
- <!--------------------- CATEGORIES -------------------->
-
- <!--------------------- PROJECT CODE -------------------->
- <div class="i-sdc-form-item" data-ng-if="!component.isResource()"
- data-ng-class="{'error': validateField(editForm.projectCode)}">
- <label class="i-sdc-form-label required" translate="GENERAL_LABEL_PROJECT_CODE"></label>
- <input class="i-sdc-form-input" type="text"
- data-ng-model="component.projectCode"
- data-ng-class="{'view-mode': isViewMode()}"
- data-ng-model-options="{ debounce: 500 }"
- maxlength="50"
- data-required
- name="projectCode"
- data-ng-pattern="validation.projectCodeValidationPattern"
- data-tests-id="projectCode"
- />
+ </div><!-- Close w-sdc-form-column -->
- <div class="input-error" data-ng-show="validateField(editForm.projectCode)">
- <span ng-show="editForm.projectCode.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_PROJECT_CODE_REQUIRED"></span>
- <span ng-show="editForm.projectCode.$error.pattern" translate="NEW_SERVICE_RESOURCE_ERROR_PROJECT_CODE_NOT_VALID"></span>
+ <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()}">{{browseFileLabel}}</label>
+ <file-upload id="fileUploadElement"
+ class="i-sdc-form-input"
+ element-name="fileElement"
+ element-disabled="{{!isCreateMode()&&!(isEditMode()&&component.resourceType=='VF')}} || {{isViewMode()}}"
+ form-element="editForm"
+ file-model="component.importedFile"
+ on-file-changed-in-directive="uploadFileChangedInGeneralTab"
+ extensions="{{importedFileExtension}}"
+ default-text="'Browse to select file'"
+ data-ng-class="{'error':!(isEditMode()&&component.resourceType=='VF') && (!editForm.fileElement.$valid || !component.importedFile.filename)}"></file-upload>
</div>
- </div>
+ <!--------------------- IMPORT TOSCA FILE USING ONBOARDING -------------------->
+ <div class="i-sdc-form-item" ng-if="isShowOnboardingSelectionBrowse">
+ <label class="i-sdc-form-label required">Select VSP</label>
+ <div class="i-sdc-form-file-upload i-sdc-form-input">
+ <span class="i-sdc-form-file-name" 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" name="fileElement"/>
+ <div class="file-upload-browse-btn" data-ng-click="openOnBoardingModal()" data-tests-id="browseButton">Browse</div>
+ </div>
+ </div>
- <!--------------------- ECOMPGENERATEDNAMING -------------------->
+ <div class="input-error-file-upload" 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 -------------------->
- <div class="i-sdc-form-item"
- data-ng-class="{'error': validateField(editForm.ecompGeneratedNaming)}"
- data-ng-if="component.isService()">
- <label class="i-sdc-form-label">Ecomp 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)">
+ <!--------------------- 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"
+ maxlength="50"
+ />
+ <div class="input-error" data-ng-show="validateField(editForm.contactId)">
+ <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>
- <!--------------------- CATEGORIES -------------------->
-
- <!--------------------- NAMING POLICY -------------------->
- <div ng-if="component.isService()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.namingPolicy)}">
- <label class="i-sdc-form-label">Naming policy</label>
- <input class="i-sdc-form-input"
- name="fullName"
- data-ng-class="{'view-mode': isViewMode() || !component.ecompGeneratedNaming}"
- data-ng-maxlength="100"
- maxlength="100"
- data-ng-model="component.namingPolicy"
- type="text"
+ <!--------------------- USER ID -------------------->
+
+ <!--------------------- PROJECT CODE -------------------->
+ <div class="i-sdc-form-item" data-ng-if="!component.isResource()"
+ data-ng-class="{'error': validateField(editForm.projectCode)}">
+ <label class="i-sdc-form-label required" translate="GENERAL_LABEL_PROJECT_CODE"></label>
+ <input class="i-sdc-form-input" type="text"
+ data-ng-model="component.projectCode"
+ data-ng-class="{'view-mode': isViewMode()}"
data-ng-model-options="{ debounce: 500 }"
- data-ng-pattern="validation.commentValidationPattern"
- data-tests-id="namingPolicy"
- autofocus
- ng-readonly="isViewMode() || !component.ecompGeneratedNaming"
+ maxlength="50"
+ data-required
+ name="projectCode"
+ data-ng-pattern="validation.projectCodeValidationPattern"
+ data-tests-id="projectCode"
/>
- <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 class="input-error" data-ng-show="validateField(editForm.projectCode)">
+ <span ng-show="editForm.projectCode.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_PROJECT_CODE_REQUIRED"></span>
+ <span ng-show="editForm.projectCode.$error.pattern" translate="NEW_SERVICE_RESOURCE_ERROR_PROJECT_CODE_NOT_VALID"></span>
</div>
</div>
- <!--------------------- NAMING POLICY -------------------->
-
<!--------------------- VENDOR NAME -------------------->
<div ng-if="component.isResource()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.vendorName)}">
@@ -242,20 +216,20 @@
data-ng-class="{'view-mode': isViewMode()}"
data-ng-model="component.vendorName"
data-ng-model-options="{ debounce: 500 }"
- data-ng-maxlength="25"
+ data-ng-maxlength="60"
data-required
ng-click="oldValue = component.vendorName"
name="vendorName"
data-ng-change="onVendorNameChange(oldValue)"
- data-ng-pattern="validation.vendorValidationPattern"
- maxlength="25"
+ data-ng-pattern="validation.VendorNameValidationPattern"
+ maxlength="60"
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': '25' }"></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>
@@ -275,80 +249,160 @@
data-ng-maxlength="25"
data-required
name="vendorRelease"
- data-ng-pattern="validation.vendorValidationPattern"
+ data-ng-pattern="validation.VendorReleaseValidationPattern"
maxlength="25"
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': '128' }"></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_TAB_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"
+ maxlength="65"
+ 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 -------------------->
- </div><!-- Close w-sdc-form-column -->
-
- <div class="w-sdc-form-column">
-
- <!--------------------- RESOURCE TAGS -------------------->
- <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.tags)}">
- <label class="i-sdc-form-label">Tags</label>
+ <!--------------------- ECOMPGENERATEDNAMING -------------------->
- <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="i-sdc-form-item"
+ data-ng-class="{'error': validateField(editForm.ecompGeneratedNaming)}"
+ data-ng-if="component.isService()">
+ <label class="i-sdc-form-label">Ecomp 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 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>
- </div>
- <!--------------------- RESOURCE TAGS -------------------->
+ <!--------------------- CATEGORIES -------------------->
- <!--------------------- USER ID -------------------->
- <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.contactId)}">
- <label class="i-sdc-form-label " data-ng-class="{'required':!component.isProduct()}" translate="GENERAL_LABEL_CONTACT_ID"></label>
- <input class="i-sdc-form-input" type="text" data-ng-if="!component.isProduct()"
- data-ng-model="component.contactId"
- data-ng-class="{'view-mode': isViewMode()}"
- data-ng-required="!component.isProduct()"
- name="contactId"
- data-ng-pattern="validation.contactIdValidationPattern"
- data-ng-model-options="{ debounce: 500 }"
- data-tests-id="contactId"
- maxlength="50"
+ <!--------------------- NAMING POLICY -------------------->
+ <div ng-if="component.isService()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.namingPolicy)}">
+ <label class="i-sdc-form-label">Naming policy</label>
+ <input class="i-sdc-form-input"
+ name="fullName"
+ data-ng-class="{'view-mode': isViewMode() || !component.ecompGeneratedNaming}"
+ data-ng-maxlength="100"
+ 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"
/>
- <input class="i-sdc-form-input" type="text" data-ng-if="component.isProduct()"
- data-ng-model="component.contacts[0]"
- data-ng-class="{'view-mode': isViewMode()}"
- data-ng-required="!component.isProduct()"
- name="contactId"
- data-ng-pattern="validation.contactIdValidationPattern"
- data-ng-model-options="{ debounce: 500 }"
- data-tests-id="contactId"
- maxlength="50"
- />
- <div class="input-error" data-ng-show="validateField(editForm.contactId)">
- <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 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>
- </div>
- <!--------------------- USER ID -------------------->
-
+ <!--------------------- NAMING POLICY -------------------->
+ <!--------------------- Service Type -------------------->
+ <div ng-if="component.isService()"
+ class="i-sdc-form-item"
+ data-ng-class="{'error': validateField(editForm.serviceType)}">
+ <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="25"
+ data-ng-pattern="validation.VendorReleaseValidationPattern"
+ maxlength="25"
+ />
+ <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': '25' }"></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)}">
+ <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="25"
+ data-ng-pattern="validation.VendorReleaseValidationPattern"
+ maxlength="25"
+ />
+ <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': '25' }"></span>
+ <span ng-show="editForm.serviceRole.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+ </div>
+ </div>
+ <!--------------------- Service Role -------------------->
+ <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><!-- Close w-sdc-form-section-container -->
</form>
-
</div>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/general/general.less b/catalog-ui/src/app/view-models/workspace/tabs/general/general.less
index caa755cce3..9633ec5bb6 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/general/general.less
+++ b/catalog-ui/src/app/view-models/workspace/tabs/general/general.less
@@ -1,8 +1,8 @@
.sdc-workspace-general-step {
-
+ display: flex;
.w-sdc-form {
padding: 0;
-
+ flex-grow: 10;
.i-sdc-form-file-upload{
input[type="button"] {
cursor: pointer;
@@ -33,6 +33,14 @@
}
}
+ .description{
+ height: 300px;
+ }
+
+ .i-sdc-form-item.description-field{
+ margin-bottom: 0;
+ }
+
.w-sdc-form-section-container {
text-align: center;
}
@@ -43,6 +51,7 @@
width: auto;
padding: 10px;
}
+ margin-bottom: 15px;
}
.i-sdc-form-label {
@@ -63,6 +72,73 @@
}
+ .w-sdc-form-column {
+ position: relative;
+ }
+
+ .meta-data{
+ padding: 8px 0 2px 20px;
+ text-align: left;
+ background-color: @tlv_color_t;
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ .meta-data-item-value{
+ padding-bottom: 6px;
+ }
+ }
+
+ .upper-general-fields{
+ display: flex;
+ }
+
+ .selected-icon-container{
+ flex-grow: 1;
+ display: flex;
+ align-items: center;
+ .selected-icon-inner-container{
+ height: 64px;
+ width: 64px;
+ margin: 0 auto;
+ }
+ .update-component-icon{
+ position: relative;
+ float: right;
+ cursor: pointer;
+ }
+ .selected-icon{
+ position: relative;
+ top: -20px;
+ z-index: -1;
+ &.disable{
+ position: inherit;
+ }
+ }
+ &.show-only-on-over{
+ .update-component-icon{
+ display: none;
+ }
+ .selected-icon{
+ position: inherit;
+ }
+ &:hover{
+ .update-component-icon{
+ display: inline-block;
+ }
+ .selected-icon{
+ position: relative;
+ }
+ }
+ }
+ }
+
+ .name-and-category-fields{
+ flex-grow: 5;
+ }
+
+
+
+
}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/icons/icons-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/icons/icons-view-model.ts
deleted file mode 100644
index c25bc4a1f1..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/icons/icons-view-model.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-/**
- * Created by obarda on 4/4/2016.
- */
-'use strict';
-import {ComponentFactory} from "app/utils";
-import {AvailableIconsService} from "app/services";
-import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model";
-import {IMainCategory, ISubCategory} from "app/models";
-
-export interface IIconsScope extends IWorkspaceViewModelScope {
- icons:Array<string>;
- iconSprite:string;
- setComponentIcon(iconSrc:string):void;
-}
-
-export class IconsViewModel {
-
- static '$inject' = [
- '$scope',
- 'Sdc.Services.AvailableIconsService',
- 'ComponentFactory',
- '$state'
- ];
-
- constructor(private $scope:IIconsScope,
- private availableIconsService:AvailableIconsService,
- private ComponentFactory:ComponentFactory,
- private $state:ng.ui.IStateService) {
-
-
- this.initScope();
- this.initIcons();
- this.$scope.updateSelectedMenuItem();
- this.$scope.iconSprite = this.$scope.component.iconSprite;
-
- if (this.$scope.component.isResource()) {
- this.initVendor();
- }
- }
-
- private initialIcon:string = this.$scope.component.icon;
- private initIcons = ():void => {
-
- // For subcategories that where created by admin, there is no icons
- this.$scope.icons = new Array<string>();
- if (this.$scope.component.categories && this.$scope.component.categories.length > 0) {
-
- _.forEach(this.$scope.component.categories, (category:IMainCategory):void => {
- if (category.icons) {
- this.$scope.icons = this.$scope.icons.concat(category.icons);
- }
- if (category.subcategories) {
- _.forEach(category.subcategories, (subcategory:ISubCategory):void => {
- if (subcategory.icons) {
- this.$scope.icons = this.$scope.icons.concat(subcategory.icons);
- }
- });
- }
- });
- }
-
- if (this.$scope.component.isResource()) {
- let resourceType:string = this.$scope.component.getComponentSubType();
- if (resourceType === 'VL') {
- this.$scope.icons = ['vl'];
- }
- if (resourceType === 'CP') {
- this.$scope.icons = ['cp'];
- }
- }
-
- if (this.$scope.icons.length === 0) {
- this.$scope.icons = this.availableIconsService.getIcons(this.$scope.component.componentType);
- }
- //we always add the defual icon to the list
- this.$scope.icons.push('defaulticon');
- };
-
- private initVendor = ():void => {
- let vendors:Array<string> = this.availableIconsService.getIcons(this.$scope.component.componentType).slice(5, 19);
- let vendorName = this.$scope.component.vendorName.toLowerCase();
- if ('at&t' === vendorName) {
- vendorName = 'att';
- }
- if ('nokia' === vendorName) {
- vendorName = 'nokiasiemens';
- }
- let vendor:string = _.find(vendors, (vendor:string)=> {
- return vendor.replace(/[_]/g, '').toLowerCase() === vendorName;
- });
-
- if (vendor && this.$scope.icons.indexOf(vendor) === -1) {
- this.$scope.icons.push(vendor);
- }
- };
-
- private initScope():void {
- this.$scope.icons = [];
- this.$scope.setValidState(true);
- //if(this.$scope.component.icon === DEFAULT_ICON){
- // //this.$scope.setValidState(false);
- //}
-
- this.$scope.setComponentIcon = (iconSrc:string):void => {
- this.$state.current.data.unsavedChanges = !this.$scope.isViewMode() && (iconSrc != this.initialIcon);
- this.$scope.component.icon = iconSrc;
- // this.$scope.setValidState(true);
- };
-
- }
-}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/icons/icons-view.html b/catalog-ui/src/app/view-models/workspace/tabs/icons/icons-view.html
deleted file mode 100644
index aac14e0e84..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/icons/icons-view.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<div class="workspace-icons">
-
- <form novalidate class="w-sdc-form" name="iconForm">
- <label class="i-sdc-form-label icons-label required">Icons</label>
- <div class="selected-icon-container" data-ng-class="{'view-mode': isViewMode()}">
- <div class="i-sdc-form-item-suggested-icon large selected-icon {{iconSprite}} {{component.icon}}"
- data-ng-class="{ 'disable': isViewMode() }"
- ng-model="component.icon"
- tooltips tooltip-content='{{component.icon | translate}}'
- >
- </div>
- </div>
- <div data-ng-class="{'view-mode': isViewMode()}" class="icons-text">Select one of the icons below for the asset</div>
- <div class="i-sdc-form-item suggested-icons-container" data-ng-class="{'view-mode no-pointer-events' : isViewMode()}">
- <div class ="suggested-icon-wrapper" ng-class="component.icon==='{{iconSrc}}' ? 'selected' : '' " data-ng-repeat="iconSrc in icons track by $index">
- <div class="i-sdc-form-item-suggested-icon large {{iconSprite}} {{iconSrc}}" data-ng-class="component.isAlreadyCertified() || isViewMode() ? 'disable':'hand'"
- ng-model="component.icon"
- data-tests-id="{{iconSrc}} iconBox"
- data-ng-click="!component.isAlreadyCertified() && setComponentIcon(iconSrc)"
- tooltips tooltip-content='{{iconSrc | translate}}'
- >
- </div>
- </div>
- </div>
- </form>
-</div>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/icons/icons.less b/catalog-ui/src/app/view-models/workspace/tabs/icons/icons.less
deleted file mode 100644
index 65f946f395..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/icons/icons.less
+++ /dev/null
@@ -1,65 +0,0 @@
-.workspace-icons {
-
- width: 89%;
- display: inline-block;
- text-align: center;
- align-items: center;
-
- .w-sdc-form {
- padding-top: 0px;
- padding-bottom: 0px;
- .selected-icon-container {
- text-align: left;
- border: 1px solid #cfcfcf;
- clear: both;
- margin-bottom: 30px;
- padding: 2px 0px 5px 5px;
- .selected-icon {
- margin: 8px 5px 0px 6px;
- }
- }
-
- .suggested-icons-container {
- text-align: left;
- border: 1px solid #cfcfcf;
- clear: both;
- padding: 2px 0px 5px 5px;
- height: 340px;
- margin-bottom: 0px;
-
- .suggested-icon-wrapper {
- margin: 8px 5px 0px 6px;
- display: inline-block;
-
- &.selected {
- border: 2px solid @main_color_a;
- border-radius: 35px;
- display: inline-block;
- line-height: 0px;
- padding: 3px;
- }
-
- }
- .suggested-icon {
- // margin: 8px 5px 0px 6px;
- display: inline-block;
- &.disable{
- opacity: 0.4;
- }
- }
- }
-
- .icons-label {
- float: left;
- }
-
- .icons-text {
- text-align: left;
- line-height: 32px;
- padding-left: 10px;
- width: 100%;
- border: 1px solid #cfcfcf;
- border-bottom: none;
- }
- }
-}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts.less b/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts.less
index 3ba9cf47d5..5e69c44e9b 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts.less
+++ b/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts.less
@@ -12,7 +12,7 @@
}
.table-container-flex {
- margin-top: 27px;
+ margin-top: 0;
.item-opened{
word-wrap: break-word;
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/inputs/inputs.less b/catalog-ui/src/app/view-models/workspace/tabs/inputs/inputs.less
index eff5c5395b..17c18e1741 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/inputs/inputs.less
+++ b/catalog-ui/src/app/view-models/workspace/tabs/inputs/inputs.less
@@ -216,7 +216,7 @@
}
.table-container-flex {
- margin-top: 27px;
+ margin-top: 0;
width: 46%;
min-width: 46%;
display: inline-block;
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view-model.ts
deleted file mode 100644
index c891875f52..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view-model.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-import {ComponentFactory} from "app/utils";
-import {Product, IGroup, ISubCategory, IMainCategory} from "app/models";
-import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model";
-import {CacheService} from "app/services";
-
-export interface IProductHierarchyScope extends IWorkspaceViewModelScope {
-
- categoriesOptions:Array<IMainCategory>;
- product:Product;
- isLoading:boolean;
- showDropDown:boolean;
-
- onInputTextClicked():void;
- onGroupSelected(category:IMainCategory, subcategory:ISubCategory, group:IGroup):void;
- clickOutside():void;
- deleteGroup(uniqueId:string):void;
-}
-
-export class ProductHierarchyViewModel {
-
- static '$inject' = [
- '$scope',
- 'Sdc.Services.CacheService',
- 'ComponentFactory',
- '$state'
- ];
-
- constructor(private $scope:IProductHierarchyScope,
- private cacheService:CacheService,
- private ComponentFactory:ComponentFactory,
- private $state:ng.ui.IStateService) {
-
-
- this.$scope.product = <Product>this.$scope.getComponent();
- this.$scope.setValidState(true);
- this.initScope();
- this.$scope.updateSelectedMenuItem();
- }
-
- private initCategories = () => {
- this.$scope.categoriesOptions = angular.copy(this.cacheService.get('productCategories'));
- let selectedGroup:Array<IGroup> = [];
- _.forEach(this.$scope.product.categories, (category:IMainCategory) => {
- _.forEach(category.subcategories, (subcategory:ISubCategory) => {
- selectedGroup = selectedGroup.concat(subcategory.groupings);
- });
- });
- _.forEach(this.$scope.categoriesOptions, (category:IMainCategory) => {
- _.forEach(category.subcategories, (subcategory:ISubCategory) => {
- _.forEach(subcategory.groupings, (group:ISubCategory) => {
- let componentGroup:IGroup = _.find(selectedGroup, (componentGroupObj) => {
- return componentGroupObj.uniqueId == group.uniqueId;
- });
- if (componentGroup) {
- group.isDisabled = true;
- }
- });
- });
- });
- };
-
- private setFormValidation = ():void => {
-
- this.$scope.setValidState(true);
-
- };
-
- private initScope = ():void => {
- this.$scope.isLoading = false;
- this.$scope.showDropDown = false;
- this.initCategories();
- this.setFormValidation();
-
- this.$scope.onGroupSelected = (category:IMainCategory, subcategory:ISubCategory, group:IGroup):void => {
- this.$scope.product.addGroup(category, subcategory, group);
- this.$state.current.data.unsavedChanges = !this.$scope.isViewMode();
- group.isDisabled = true;
- this.$scope.showDropDown = false;
- this.setFormValidation();
- };
-
- this.$scope.onInputTextClicked = ():void => {//just edit the component in place, no pop up nor server update ?
- this.$scope.showDropDown = !this.$scope.showDropDown;
- };
-
- this.$scope.clickOutside = ():any => {
- this.$scope.showDropDown = false;
- };
-
- this.$scope.deleteGroup = (uniqueId:string):void => {
- //delete group from component
- this.$scope.product.deleteGroup(uniqueId);
- this.$state.current.data.unsavedChanges = !this.$scope.isViewMode();
- this.setFormValidation();
- //enabled group
- _.forEach(this.$scope.categoriesOptions, (category:IMainCategory) => {
- _.forEach(category.subcategories, (subcategory:ISubCategory) => {
- let groupObj:IGroup = _.find(subcategory.groupings, (group) => {
- return group.uniqueId === uniqueId;
- });
- if (groupObj) {
- groupObj.isDisabled = false;
- }
- });
- });
- }
- };
-}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view.html b/catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view.html
deleted file mode 100644
index 2335ad7c74..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<div class="workspace-hierarchy">
- <div class="dropdown-container" clicked-outside="{onClickedOutside: 'clickOutside()', clickedOutsideEnable: 'true'}" >
- <input placeholder="Add Group" data-ng-click="onInputTextClicked()" class="dropdown-input-text" data-ng-model="search.filterTerms" data-ng-disabled="isViewMode()" data-ng-class="{'view-mode': isViewMode()}" data-ng-model-options="{debounce: 200}"/>
- <div data-ng-class="{'show': showDropDown}" class="dropdown-content" >
- <perfect-scrollbar scroll-y-margin-offset="0" include-padding="false" class="scrollbar-container">
- <div ng-repeat="category in categoriesOptions track by $index">
- <div ng-repeat="subcategory in category.subcategories track by $index">
- <div class="dropdown-option" ng-show="!category.filteredGroup || category.filteredGroup.length > 0">
- <div class="category-container">
- <div class="category">{{category.name}}</div>
- <div class="subcategory">{{subcategory.name}}</div>
- </div>
- <div class="groupings-container">
- <div ng-init="group.filterTerms = group.name + ' ' + category.name + ' ' + subcategory.name"
- ng-repeat="group in (category.filteredGroup = (subcategory.groupings | filter:search )) track by $index">
- <div class="group" data-ng-disabled="group.isDisabled" data-ng-class="{'disabled-group': group.isDisabled}" ng-click="onGroupSelected(category, subcategory, group)">
- <span >{{group.name}}</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </perfect-scrollbar>
- </div>
- </div>
- <div class="hierarchy-groups-container no-border-top" data-ng-class="{'view-mode': isViewMode()}">
- <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
- <div ng-if="!product.categories.length || product.categories.length === 0" class="no-groups-text" translate="NEW_PRODUCT_NO_CATEGORIES_TO_DISPLAY"></div>
- <div ng-repeat="category in product.categories track by $index">
- <div ng-repeat="subcategory in category.subcategories track by $index">
- <div class="group-tag" ng-repeat="group in subcategory.groupings track by $index"
- data-ng-init="tooltip = '<b>' + category.name + '</b><br />' + subcategory.name">
- <sdc-tag sdc-disable="isViewMode()" data-on-delete="deleteGroup(uniqueId)" data-tag-data="{tag: group.name, tooltip: tooltip, id: group.uniqueId }"></sdc-tag>
- </div>
- </div>
- </div>
- </perfect-scrollbar>
- </div>
-</div>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy.less b/catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy.less
deleted file mode 100644
index c992558ed2..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy.less
+++ /dev/null
@@ -1,130 +0,0 @@
-.workspace-hierarchy {
- display: inline-block;
- width: 93%;
-
- .scrollbar-container{
- max-height:400px;
- .perfect-scrollbar;
- }
-
- .dropdown-container {
- position: relative;
- display: inline-block;
- width: 100%;
-
- &:after{
- top: 47%;
- right: 1%;
- border: solid transparent;
- content: " ";
- height: 0;
- width: 0;
- position: absolute;
- pointer-events: none;
- border-color: rgba(0, 0, 0, 0);
- border-top-color: black;
- border-width: 4px;
- margin-left: -4px;
- }
-
- .dropdown-input-text {
- width: 100%;
- padding: 4px 10px;
- }
-
- .dropdown-content {
- .perfect-scrollbar;
- border: 1px solid #d8d8d8;
- display: none;
- position: absolute;
- overflow: hidden;
- width: 100%;
- .bg_c;
- max-height: 400px;
- z-index: 999999;
-
- .dropdown-option {
- border-bottom: 1px solid #d8d8d8;
- display: inline-block;
- width: 100%;
- }
-
- .category-container{
- width: 250px;
- float: left;
- padding-left: 5px;
-
- .category {
- .bold;
- padding: 3px 3px 2px 3px;
- &:after{
- .sprite;
- .arrow-left;
- content: '';
- margin-left: 5px;
- transform: rotate(180deg);
- }
- }
- .subcategory {
- padding-left: 3px;
- }
- }
-
- .groupings-container{
- display: inline-block;
- width: 424px;
- border-left: 1px solid #d8d8d8;
- min-height: 55px;
- .group{
- padding: 3px 3px 3px 10px;
- &:hover{
- .hand;
- .bg_n;
- }
- &.disabled-group {
- opacity: 0.5;
- &:hover{
- cursor: auto;
- .bg_c;
- }
- }
- }
- }
-
- .seperator {
- height: 1px;
- width: 100%;
- .bg_j;
- margin: 5px 0px;
- }
- }
- .show {
- display: block;
- }
- }
-
- .hierarchy-groups-container{
- .b_9;
- width: 100%;
- border: 1px solid #d8d8d8;
- height: 425px;
- padding: 15px;
- text-align: center;
-
- .scrollbar-container {
- z-index: 0;
- }
-
- .no-group-text{
- text-align: center;
- margin-top:25px;
- a {
- cursor: pointer;
- }
- }
- .group-tag{
- display: inline-block;
- float: left;
- }
- }
-}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/properties/properties.less b/catalog-ui/src/app/view-models/workspace/tabs/properties/properties.less
index 3e8d6c3fbd..48c462e143 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/properties/properties.less
+++ b/catalog-ui/src/app/view-models/workspace/tabs/properties/properties.less
@@ -76,7 +76,7 @@
}
.table-container-flex {
- margin-top: 27px;
+ margin-top: 0;
.text{
overflow: hidden;
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts.less b/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts.less
index 6dfec2980f..23be3c3548 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts.less
+++ b/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts.less
@@ -1,5 +1,5 @@
.workspace-tosca-artifact {
- width: 93%;
+ width: 100%;
display: inline-block;
.w-sdc-classic-btn {
float: right;
@@ -18,8 +18,7 @@
.table-container-flex {
- margin-top: 27px;
-
+ margin-top: 0;
.item-opened{
word-wrap: break-word;
}
diff --git a/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts b/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts
index 21bd199aac..ec8b04dbdb 100644
--- a/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts
@@ -77,7 +77,6 @@ export interface IWorkspaceViewModelScope extends ng.IScope {
changeLifecycleState(state:string):void;
enabledTabs():void
isDesigner():boolean;
- isProductManager():boolean;
isViewMode():boolean;
isEditMode():boolean;
isCreateMode():boolean;
@@ -91,6 +90,7 @@ export interface IWorkspaceViewModelScope extends ng.IScope {
updateSelectedMenuItem():void;
uploadFileChangedInGeneralTab():void;
updateMenuComponentName(ComponentName:string):void;
+ getTabTitle():string;
reload(component:Component):void;
}
@@ -149,9 +149,6 @@ export class WorkspaceViewModel {
} else {
if (this.$scope.component.lifecycleState === ComponentState.NOT_CERTIFIED_CHECKOUT &&
this.$scope.component.lastUpdaterUserId === this.cacheService.get("user").userId) {
- if (this.$scope.component.isProduct() && this.role == Role.PRODUCT_MANAGER) {
- mode = WorkspaceMode.EDIT;
- }
if ((this.$scope.component.isService() || this.$scope.component.isResource()) && this.role == Role.DESIGNER) {
mode = WorkspaceMode.EDIT;
}
@@ -171,7 +168,7 @@ export class WorkspaceViewModel {
};
private initLeftPalette = ():void => {
- this.LeftPaletteLoaderService.loadLeftPanel(this.$scope.component.componentType);
+ this.LeftPaletteLoaderService.loadLeftPanel(this.$scope.component);
};
private initScope = ():void => {
@@ -192,7 +189,7 @@ export class WorkspaceViewModel {
this.$scope.$state = this.$state;
this.$scope.isLoading = false;
this.$scope.isComposition = (this.$state.current.name.indexOf(States.WORKSPACE_COMPOSITION) > -1);
- this.$scope.isDeployment = (this.$state.current.name.indexOf(States.WORKSPACE_DEPLOYMENT) > -1);
+ this.$scope.isDeployment = this.$state.current.name == States.WORKSPACE_DEPLOYMENT;
this.$scope.progressService = this.progressService;
this.$scope.getComponent = ():Component => {
@@ -269,7 +266,7 @@ export class WorkspaceViewModel {
type: this.$scope.componentType.toLowerCase(),
mode: WorkspaceMode.VIEW,
components: this.$state.params['components']
- },{reload: true});
+ }, {reload: true});
};
@@ -431,7 +428,7 @@ export class WorkspaceViewModel {
switch (url) {
case 'lifecycleState/CHECKOUT':
// only checkOut get the full component from server
- // this.$scope.component = component;
+ // this.$scope.component = component;
// Work around to change the csar version
if (this.cacheService.get(CHANGE_COMPONENT_CSAR_VERSION_FLAG)) {
(<Resource>this.$scope.component).csarVersion = this.cacheService.get(CHANGE_COMPONENT_CSAR_VERSION_FLAG);
@@ -565,18 +562,13 @@ export class WorkspaceViewModel {
return this.role == Role.DESIGNER;
};
- this.$scope.isProductManager = ():boolean => {
- return this.role == Role.PRODUCT_MANAGER;
- };
-
this.$scope.isDisableMode = ():boolean => {
return this.$scope.mode === WorkspaceMode.VIEW && this.$scope.component.lifecycleState === ComponentState.NOT_CERTIFIED_CHECKIN;
};
this.$scope.showFullIcons = ():boolean => {
- //we show revert and save icons only in general\icon view
- return this.$state.current.name === States.WORKSPACE_GENERAL ||
- this.$state.current.name === States.WORKSPACE_ICONS;
+ //we show revert and save icons only in general view
+ return this.$state.current.name === States.WORKSPACE_GENERAL;
};
this.$scope.isCreateMode = ():boolean => {
@@ -593,8 +585,7 @@ export class WorkspaceViewModel {
};
this.$scope.showLifecycleIcon = ():boolean => {
- return this.role == Role.DESIGNER ||
- this.role == Role.PRODUCT_MANAGER;
+ return this.role == Role.DESIGNER;
};
this.$scope.getStatus = ():string => {
@@ -612,13 +603,6 @@ export class WorkspaceViewModel {
if (!this.$scope.component.isLatestVersion() && Role.OPS != this.role && Role.GOVERNOR != this.role) {
result = false;
}
- if (this.role === Role.PRODUCT_MANAGER && !this.$scope.component.isProduct()) {
- result = false;
- }
- if ((this.role === Role.DESIGNER || this.role === Role.TESTER)
- && this.$scope.component.isProduct()) {
- result = false;
- }
if (ComponentState.NOT_CERTIFIED_CHECKOUT === this.$scope.component.lifecycleState && this.$scope.isViewMode()) {
result = false;
}
@@ -639,10 +623,16 @@ export class WorkspaceViewModel {
this.$scope.$watch('$state.current.name', (newVal:string):void => {
if (newVal) {
this.$scope.isComposition = (newVal.indexOf(States.WORKSPACE_COMPOSITION) > -1);
- this.$scope.isDeployment = (newVal.indexOf(States.WORKSPACE_DEPLOYMENT) > -1);
+ this.$scope.isDeployment = newVal == States.WORKSPACE_DEPLOYMENT;
}
});
+ this.$scope.getTabTitle = ():string => {
+ return this.$scope.leftBarTabs.menuItems.find((menuItem:MenuItem)=>{
+ return menuItem.state == this.$scope.$state.current.name;
+ }).text;
+ };
+
this.$scope.reload = (component:Component):void => {
this.$state.go(this.$state.current.name,{id:component.uniqueId},{reload:true});
};
@@ -658,7 +648,11 @@ export class WorkspaceViewModel {
private initVersionObject = ():void => {
this.$scope.versionsList = (this.$scope.component.getAllVersionsAsSortedArray()).reverse();
- this.$scope.changeVersion = {selectedVersion: _.find(this.$scope.versionsList, {versionId: this.$scope.component.uniqueId})};
+ this.$scope.changeVersion = {
+ selectedVersion: _.find(this.$scope.versionsList, (versionObj)=> {
+ return versionObj.versionId === this.$scope.component.uniqueId;
+ })
+ };
};
private getNewComponentBreadcrumbItem = ():MenuItem => {
diff --git a/catalog-ui/src/app/view-models/workspace/workspace-view.html b/catalog-ui/src/app/view-models/workspace/workspace-view.html
index dbb7fa6d63..19ebefe7a5 100644
--- a/catalog-ui/src/app/view-models/workspace/workspace-view.html
+++ b/catalog-ui/src/app/view-models/workspace/workspace-view.html
@@ -3,8 +3,11 @@
<div class="w-sdc-main-container">
<div class="w-sdc-left-sidebar" data-ng-if="!isComposition">
- <div class="i-sdc-left-sidebar-item">
- <expand-collapse-menu-box menu-items-group="leftBarTabs" menu-title="{{menuComponentTitle}}" parent-scope="this"> </expand-collapse-menu-box>
+ <div class="menu-header" tooltips tooltip-content="{{menuComponentTitle}}">
+ {{menuComponentTitle}}
+ </div>
+ <div class="i-sdc-designer-sidebar-section-content-item" ng-class="{'selected': menuItem.state == $state.current.name}" ng-repeat="menuItem in leftBarTabs.menuItems track by $index">
+ <div class="expand-collapse-menu-box-item-text" ng-click="onMenuItemPressed(menuItem.state)" ng-class="{'disabled': menuItem.isDisabled }" data-tests-id="{{menuItem.text}}">{{menuItem.text}}</div>
</div>
</div>
@@ -54,22 +57,22 @@
<button ng-if="!isViewMode() && isCreateMode()" data-ng-disabled="!isValidForm || isDisableMode() || isLoading" ng-click="save()" class="tlv-btn outline green" data-tests-id="create/save">Create</button>
- <span data-ng-if="(isDesigner() || isProductManager()) && !isCreateMode() && component.lifecycleState === 'NOT_CERTIFIED_CHECKOUT'" sdc-smart-tooltip=""
+ <span data-ng-if="isDesigner() && !isCreateMode() && component.lifecycleState === 'NOT_CERTIFIED_CHECKOUT'" sdc-smart-tooltip=""
data-ng-class="{'disabled' : !isValidForm || isDisableMode() || isViewMode()}" ng-click="changeLifecycleState('deleteVersion')"
class="sprite-new delete-btn" data-tests-id="delete_version" sdc-smart-tooltip="">Delete</span>
<span data-ng-if="isDesigner()" data-ng-class="{'disabled' :isDisableMode() || isViewMode()}" ng-click="revert()" class="sprite-new revert-btn" data-tests-id="revert"
data-ng-show="showFullIcons()" sdc-smart-tooltip="">Revert</span>
- <span data-ng-if="isComposition && !component.isProduct()" class="sprite-new print-screen-btn" entity="component" print-graph-screen data-tests-id="printScreen"></span>
+ <span data-ng-if="isComposition" class="sprite-new print-screen-btn" entity="component" print-graph-screen data-tests-id="printScreen"></span>
<span class="delimiter"></span>
<span class="sprite-new x-btn" data-ng-click="goToBreadcrumbHome()" sdc-smart-tooltip="">Close</span>
</div>
</div>
-
- <div data-ng-if="component.creationDate && (!isComposition && !isDeployment)" class="sdc-asset-creation-info"><b>Created:</b>&nbsp;{{component.creationDate | date:'MM/dd/yyyy'}},&nbsp;{{component.creatorFullName}}&nbsp;|&nbsp;<b>Modifed:</b>&nbsp;{{component.lastUpdateDate | date:'MM/dd/yyyy'}}&nbsp;|&nbsp;<b>UUID:</b>&nbsp;{{component.uuid}}<b>&nbsp;Invariant UUID:</b>&nbsp;{{component.invariantUUID}}</div>
-
+ <div class="tab-title" data-ng-if="!isComposition && !isDeployment">
+ {{getTabTitle()}}
+ </div>
<div class="w-sdc-main-container-body-content" data-ng-class="{'third-party':thirdParty}" data-ui-view></div>
</div>
</div>
diff --git a/catalog-ui/src/app/view-models/workspace/workspace.less b/catalog-ui/src/app/view-models/workspace/workspace.less
index 278708ca33..b7331b5f93 100644
--- a/catalog-ui/src/app/view-models/workspace/workspace.less
+++ b/catalog-ui/src/app/view-models/workspace/workspace.less
@@ -27,10 +27,46 @@
}
.w-sdc-left-sidebar {
- padding: 3px 3px 0px 0px;
- background-color: @main_color_p;
- box-shadow: 7px -3px 6px -8px @main_color_n;
+ padding: 0px;
+ background-color: @tlv_color_t;
+ box-shadow: none;
z-index: 2;
+ border-right: 1px solid @main_color_o;
+ .menu-header{
+ border-bottom: 1px solid @main_color_o;
+ height: 53px;
+ .f-type._16_m;
+ font-weight: 700;
+ line-height: 53px;
+ padding-left: 40px;
+ padding-right: 10px;
+ width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: inline-block;
+ white-space: nowrap;
+ }
+ .i-sdc-designer-sidebar-section-content-item{
+ .f-type._13_m;
+ color: @main_color_m;
+ margin-left: 20px;
+ padding-left: 20px;
+ margin-top: 20px;
+ height: 17px;
+ .hand;
+ &:hover{
+ color: @func_color_s;
+ font-weight: 600;
+ }
+ &.selected{
+ border-left: 4px solid @main_color_a;
+ color: @main_color_a;
+ margin-left: 18px;
+ padding-left: 18px;
+ font-weight: 600;
+
+ }
+ }
}
.sdc-asset-creation-info {
@@ -128,17 +164,21 @@
margin-top: 6px;
}
}
+ .tab-title{
+ height: 110px;
+ padding-left: 100px;
+ line-height: 110px;
+ .f-type ._28;
+ }
.w-sdc-main-container-body-content {
- height:calc(~'100% - @{action_nav_height}');
-
- text-align: center;
+ height:calc(~'100% - @{action_nav_height} - @{tab_title}');
align-items: center;
- padding: 40px 14% 20px 14%;
+ padding: 0 100px 20px 100px;
&.third-party {
text-align: left;
padding: 0;
position: absolute;
- top: @action_nav_height;
+ top: @action_nav_height + @tab_title;
left: 0;
right: 0;
bottom: 0;
@@ -147,7 +187,3 @@
}
}
-
-.properties-assignment .sdc-workspace-container .w-sdc-main-right-container .w-sdc-main-container-body-content{
- padding: 80px 2% 40px 2%;
-}