aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2017-07-17 21:12:03 +0300
committerMichael Lando <ml636r@att.com>2017-07-17 21:12:03 +0300
commit75aacbbe1acf78fa53378f07f0a8c7769449a17e (patch)
tree68a9799eb8f4704dd9a3d513401df9bb11af7739 /catalog-ui/src
parentdec02e7cc74e1c401be51bd9d266575e1e008f5f (diff)
[SDC] rebase 1710 code
Change-Id: I532ed68979fee7840ea8a5395e7e965b155fb9f9 Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'catalog-ui/src')
-rw-r--r--catalog-ui/src/app/app.ts25
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts7
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts66
-rw-r--r--catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html2
-rw-r--r--catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts5
-rw-r--r--catalog-ui/src/app/directives/structure-tree/structure-tree-directive.html2
-rw-r--r--catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.less4
-rw-r--r--catalog-ui/src/app/models.ts4
-rw-r--r--catalog-ui/src/app/models/app-config.ts12
-rw-r--r--catalog-ui/src/app/models/categories.ts1
-rw-r--r--catalog-ui/src/app/models/component-metadata.ts6
-rw-r--r--catalog-ui/src/app/models/components/component.ts7
-rw-r--r--catalog-ui/src/app/models/components/displayComponent.ts3
-rw-r--r--catalog-ui/src/app/models/components/product.ts125
-rw-r--r--catalog-ui/src/app/models/components/resource.ts5
-rw-r--r--catalog-ui/src/app/models/components/service.ts6
-rw-r--r--catalog-ui/src/app/models/componentsInstances/componentInstance.ts4
-rw-r--r--catalog-ui/src/app/models/componentsInstances/productInstance.ts33
-rw-r--r--catalog-ui/src/app/models/modal.ts16
-rw-r--r--catalog-ui/src/app/models/properties-inputs/input-fe-model.ts2
-rw-r--r--catalog-ui/src/app/models/properties-inputs/property-fe-model.ts10
-rw-r--r--catalog-ui/src/app/models/user.ts10
-rw-r--r--catalog-ui/src/app/modules/service-module.ts2
-rw-r--r--catalog-ui/src/app/modules/view-model-module.ts6
-rw-r--r--catalog-ui/src/app/ng2/app.component.ts4
-rw-r--r--catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.html3
-rw-r--r--catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.ts58
-rw-r--r--catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html1
-rw-r--r--catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts10
-rw-r--r--catalog-ui/src/app/ng2/components/modal/modal.component.html16
-rw-r--r--catalog-ui/src/app/ng2/components/modal/modal.component.ts14
-rw-r--r--catalog-ui/src/app/ng2/components/modal/modal.module.ts19
-rw-r--r--catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html6
-rw-r--r--catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less9
-rw-r--r--catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts43
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts10
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less3
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts8
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts5
-rw-r--r--catalog-ui/src/app/ng2/services/component-services/component.service.ts2
-rw-r--r--catalog-ui/src/app/ng2/services/http.interceptor.service.ts24
-rw-r--r--catalog-ui/src/app/ng2/services/modal.service.ts73
-rw-r--r--catalog-ui/src/app/services.ts1
-rw-r--r--catalog-ui/src/app/services/available-icons-service.ts17
-rw-r--r--catalog-ui/src/app/services/components/product-service.ts55
-rw-r--r--catalog-ui/src/app/services/components/utils/composition-left-palette-service.ts45
-rw-r--r--catalog-ui/src/app/services/data-types-service.ts3
-rw-r--r--catalog-ui/src/app/services/entity-service.ts17
-rw-r--r--catalog-ui/src/app/utils/component-factory.ts20
-rw-r--r--catalog-ui/src/app/utils/component-instance-factory.ts10
-rw-r--r--catalog-ui/src/app/utils/constants.ts8
-rw-r--r--catalog-ui/src/app/utils/modals-handler.ts18
-rw-r--r--catalog-ui/src/app/view-models/catalog/catalog-view-model.ts8
-rw-r--r--catalog-ui/src/app/view-models/catalog/catalog.less22
-rw-r--r--catalog-ui/src/app/view-models/dashboard/dashboard-view-model.ts7
-rw-r--r--catalog-ui/src/app/view-models/dashboard/dashboard-view.html14
-rw-r--r--catalog-ui/src/app/view-models/dashboard/dashboard.less7
-rw-r--r--catalog-ui/src/app/view-models/dcae-app/dcae-app.less22
-rw-r--r--catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts13
-rw-r--r--catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html2
-rw-r--r--catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.html18
-rw-r--r--catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.less33
-rw-r--r--catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.ts (renamed from catalog-ui/src/app/view-models/workspace/tabs/icons/icons-view-model.ts)88
-rw-r--r--catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor.less22
-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.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
-rw-r--r--catalog-ui/src/assets/languages/en_US.json5
-rw-r--r--catalog-ui/src/assets/styles/app.less4
-rw-r--r--catalog-ui/src/assets/styles/images/resource-icons/vnfconfiguration.pngbin0 -> 2835 bytes
-rw-r--r--catalog-ui/src/assets/styles/images/sprites/sprite-global.pngbin90334 -> 93182 bytes
-rw-r--r--catalog-ui/src/assets/styles/images/sprites/sprite-product-icons.pngbin132122 -> 0 bytes
-rw-r--r--catalog-ui/src/assets/styles/images/sprites/sprite-resource-icons.pngbin474238 -> 476775 bytes
-rw-r--r--catalog-ui/src/assets/styles/mixins.less4
-rw-r--r--catalog-ui/src/assets/styles/modal.less7
-rw-r--r--catalog-ui/src/assets/styles/sprite-product-icons.less71
-rw-r--r--catalog-ui/src/assets/styles/sprite-resource-icons.less1
-rw-r--r--catalog-ui/src/assets/styles/sprite.less2
-rw-r--r--catalog-ui/src/assets/styles/variables-old.less2
-rw-r--r--catalog-ui/src/assets/styles/variables.less1
101 files changed, 1002 insertions, 1470 deletions
diff --git a/catalog-ui/src/app/app.ts b/catalog-ui/src/app/app.ts
index 50b99e8ab9..707d7e456e 100644
--- a/catalog-ui/src/app/app.ts
+++ b/catalog-ui/src/app/app.ts
@@ -245,17 +245,6 @@ ng1appModule.config([
data: {unsavedChanges: false, bodyClass: 'general'}
}
);
- //
- $stateProvider.state(
- States.WORKSPACE_ICONS, {
- url: 'icons',
- parent: 'workspace',
- controller: viewModelsModuleName + '.IconsViewModel',
- templateUrl: './view-models/workspace/tabs/icons/icons-view.html',
- data: {unsavedChanges: false, bodyClass: 'icons'}
-
- }
- );
$stateProvider.state(
States.WORKSPACE_ACTIVITY_LOG, {
@@ -280,17 +269,6 @@ ng1appModule.config([
);
$stateProvider.state(
- States.WORKSPACE_HIERARCHY, {
- url: 'hierarchy',
- parent: 'workspace',
- controller: viewModelsModuleName + '.ProductHierarchyViewModel',
- templateUrl: './view-models/workspace/tabs/product-hierarchy/product-hierarchy-view.html',
- data: {unsavedChanges: false}
-
- }
- );
-
- $stateProvider.state(
States.WORKSPACE_INFORMATION_ARTIFACTS, {
url: 'information_artifacts',
parent: 'workspace',
@@ -602,7 +580,7 @@ ng1appModule.value('ValidationPattern', /^[\s\w\&_.:-]{1,1024}$/);
ng1appModule.value('ComponentNameValidationPattern', /^(?=.*[^. ])[\s\w\&_.:-]{1,1024}$/); //DE250513 - same as ValidationPattern above, plus requirement that name not consist of dots and/or spaces alone.
ng1appModule.value('PropertyNameValidationPattern', /^[a-zA-Z0-9_:-]{1,50}$/);// DE210977
ng1appModule.value('TagValidationPattern', /^[\s\w_.-]{1,50}$/);
-ng1appModule.value('VendorValidationPattern', /^[\x20-\x21\x23-\x29\x2B-\x2E\x30-\x39\x3B\x3D\x40-\x5B\x5D-\x7B\x7D-\xFF]{1,25}$/);
+ng1appModule.value('VendorReleaseValidationPattern', /^[\x20-\x21\x23-\x29\x2B-\x2E\x30-\x39\x3B\x3D\x40-\x5B\x5D-\x7B\x7D-\xFF]{1,25}$/);
ng1appModule.value('VendorNameValidationPattern', /^[\x20-\x21\x23-\x29\x2B-\x2E\x30-\x39\x3B\x3D\x40-\x5B\x5D-\x7B\x7D-\xFF]{1,60}$/);
ng1appModule.value('VendorModelNumberValidationPattern', /^[\x20-\x21\x23-\x29\x2B-\x2E\x30-\x39\x3B\x3D\x40-\x5B\x5D-\x7B\x7D-\xFF]{1,65}$/);
ng1appModule.value('ContactIdValidationPattern', /^[\s\w-]{1,50}$/);
@@ -696,7 +674,6 @@ ng1appModule.run([
categoryResourceService.getAllCategories((categories: Categories):void => {
cacheService.set('serviceCategories', categories.serviceCategories);
cacheService.set('resourceCategories', categories.resourceCategories);
- cacheService.set('productCategories', categories.productCategories);
}, onError);
};
diff --git a/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts b/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts
index 0a13ebd799..0dcc93dfa7 100644
--- a/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts
+++ b/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts
@@ -7,9 +7,9 @@
* 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.
@@ -44,7 +44,8 @@ export class ComponentInstanceNodesStyle {
{
selector: 'node',
css: {
- 'font-family': 'omnes-regular,sans-serif',
+ 'font-family': 'OpenSans-Regular,sans-serif',
+
'font-size': 14,
'events': 'yes',
'text-events': 'yes',
diff --git a/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts b/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts
index f1c3405cfa..f46dc6c939 100644
--- a/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts
+++ b/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts
@@ -17,21 +17,14 @@
* limitations under the License.
* ============LICENSE_END=========================================================
*/
-
-import {
- Component,
- IAppMenu,
- LeftPanelModel,
- NodesFactory,
- LeftPaletteComponent,
- CompositionCiNodeBase,
- ComponentInstance
-} from "app/models";
+import {Component, IAppMenu, LeftPanelModel, NodesFactory, LeftPaletteComponent, CompositionCiNodeBase, ComponentInstance} from "app/models";
import {CompositionGraphGeneralUtils} from "../composition-graph/utils/composition-graph-general-utils";
import {EventListenerService} from "app/services";
import {ResourceType, GRAPH_EVENTS, EVENTS, ComponentInstanceFactory, ModalsHandler} from "app/utils";
import 'sdc-angular-dragdrop';
import {LeftPaletteLoaderService} from "../../../services/components/utils/composition-left-palette-service";
+import {Resource} from "app/models/components/resource";
+import {ComponentType} from "app/utils/constants";
interface IPaletteScope {
components:Array<LeftPaletteComponent>;
@@ -92,7 +85,7 @@ export class Palette implements ng.IDirective {
el.append(this.nodeHtmlSubstitute);
this.registerEventListenerForLeftPalette(scope);
// this.LeftPaletteLoaderService.loadLeftPanel(scope.currentComponent.componentType);
-
+
this.initComponents(scope);
this.initEvents(scope);
this.initDragEvents(scope);
@@ -103,34 +96,31 @@ export class Palette implements ng.IDirective {
});
};
- private registerEventListenerForLeftPalette = (scope:IPaletteScope):void => {
- if (scope.currentComponent.isResource()) {
- this.EventListenerService.registerObserverCallback(EVENTS.RESOURCE_LEFT_PALETTE_UPDATE_EVENT, () => {
- this.updateLeftPanelDisplay(scope);
- });
- }
- if (scope.currentComponent.isService()) {
- this.EventListenerService.registerObserverCallback(EVENTS.SERVICE_LEFT_PALETTE_UPDATE_EVENT, () => {
- this.updateLeftPanelDisplay(scope);
- });
- }
- if (scope.currentComponent.isProduct()) {
- this.EventListenerService.registerObserverCallback(EVENTS.PRODUCT_LEFT_PALETTE_UPDATE_EVENT, () => {
- this.updateLeftPanelDisplay(scope);
- });
+ private getUpdateLeftPaletteEventName = (component:Component):string => {
+ switch (component.componentType) {
+ case ComponentType.SERVICE:
+ return EVENTS.SERVICE_LEFT_PALETTE_UPDATE_EVENT;
+ case ComponentType.RESOURCE:
+ if((<Resource>component).resourceType == ResourceType.PNF){
+ return EVENTS.RESOURCE_PNF_LEFT_PALETTE_UPDATE_EVENT;
+ }else{
+ return EVENTS.RESOURCE_LEFT_PALETTE_UPDATE_EVENT;
+ }
+ default:
+ console.log('ERROR: Component type '+ component.componentType + ' is not exists');
}
};
+ private registerEventListenerForLeftPalette = (scope:IPaletteScope):void => {
+ let updateEventName:string = this.getUpdateLeftPaletteEventName(scope.currentComponent);
+ this.EventListenerService.registerObserverCallback(updateEventName, () => {
+ this.updateLeftPanelDisplay(scope);
+ });
+ };
+
private unRegisterEventListenerForLeftPalette = (scope:IPaletteScope):void => {
- if (scope.currentComponent.isResource()) {
- this.EventListenerService.unRegisterObserver(EVENTS.RESOURCE_LEFT_PALETTE_UPDATE_EVENT);
- }
- if (scope.currentComponent.isService()) {
- this.EventListenerService.unRegisterObserver(EVENTS.SERVICE_LEFT_PALETTE_UPDATE_EVENT);
- }
- if (scope.currentComponent.isProduct()) {
- this.EventListenerService.unRegisterObserver(EVENTS.PRODUCT_LEFT_PALETTE_UPDATE_EVENT);
- }
+ let updateEventName:string = this.getUpdateLeftPaletteEventName(scope.currentComponent);
+ this.EventListenerService.unRegisterObserver(updateEventName);
};
private leftPanelResourceFilter(resourcesNotAbstract:Array<LeftPaletteComponent>, resourceFilterTypes:Array<string>):Array<LeftPaletteComponent> {
@@ -236,7 +226,7 @@ export class Palette implements ng.IDirective {
private updateLeftPanelDisplay(scope:IPaletteScope) {
let entityType:string = scope.currentComponent.componentType.toLowerCase();
let resourceFilterTypes:Array<string> = this.sdcConfig.resourceTypesFilter[entityType];
- scope.components = this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent.componentType);
+ scope.components = this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent);
scope.model = this.initLeftPanel(scope.components, resourceFilterTypes);
scope.displaySortedCategories = angular.copy(scope.model.sortedCategories);
};
@@ -267,7 +257,7 @@ export class Palette implements ng.IDirective {
return;
}
- let component = _.find(this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent.componentType), (componentFullData:LeftPaletteComponent) => {
+ let component = _.find(this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent), (componentFullData:LeftPaletteComponent) => {
return displayComponent.uniqueId === componentFullData.uniqueId;
});
this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DRAG_START, scope.dragElement, component);
@@ -287,7 +277,7 @@ export class Palette implements ng.IDirective {
this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DRAG_ACTION, event);
};
scope.setElementTemplate = (e) => {
- let dragComponent:LeftPaletteComponent = _.find(this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent.componentType),
+ let dragComponent:LeftPaletteComponent = _.find(this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent),
(fullComponent:LeftPaletteComponent) => {
return (<any>angular.element(e.currentTarget).scope()).component.uniqueId === fullComponent.uniqueId;
});
diff --git a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html
index 3a4720676c..ec9aaf1f7f 100644
--- a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html
+++ b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html
@@ -56,7 +56,7 @@
</div>
<div data-ng-if="isSchemaTypeDataType" class="i-sdc-form-item map-item-field">
<label class="i-sdc-form-label">Value</label>
- <fields-structure value-obj-ref="valueObjRef[mapKeys[$index]]"
+ <fields-structure value-obj-ref="valueObjRef[mapKeysStatic[$index]]"
type-name="schemaProperty.type"
parent-form-obj="parentFormObj"
fields-prefix-name="'mapValue'+fieldsPrefixName+''+$index"
diff --git a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts
index a2274654c8..5718cdd9b5 100644
--- a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts
+++ b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts
@@ -33,6 +33,7 @@ export interface ITypeMapScope extends ng.IScope {
isSchemaTypeDataType:boolean;
valueObjRef:any;
mapKeys:Array<string>;//array of map keys
+ mapKeysStatic:Array<string>;
MapKeyValidationPattern:RegExp;
fieldsPrefixName:string;
readOnly:boolean;
@@ -82,6 +83,8 @@ export class TypeMapDirective implements ng.IDirective {
scope.isSchemaTypeDataType = this.DataTypesService.isDataTypeForSchemaType(scope.schemaProperty);
if (scope.valueObjRef) {
scope.mapKeys = Object.keys(scope.valueObjRef);
+ //keeping another copy of the keys, as the mapKeys gets overridden sometimes
+ scope.mapKeysStatic = Object.keys(scope.valueObjRef);
}
});
@@ -91,6 +94,8 @@ export class TypeMapDirective implements ng.IDirective {
scope.valueObjRef = {};
}
scope.mapKeys = Object.keys(scope.valueObjRef);
+ //keeping another copy of the keys, as the mapKeys gets overridden sometimes
+ scope.mapKeysStatic = Object.keys(scope.valueObjRef);
if ($attr.defaultValue) {
scope.mapDefaultValue = JSON.parse($attr.defaultValue);
diff --git a/catalog-ui/src/app/directives/structure-tree/structure-tree-directive.html b/catalog-ui/src/app/directives/structure-tree/structure-tree-directive.html
index 7d8a883b33..706dbefb80 100644
--- a/catalog-ui/src/app/directives/structure-tree/structure-tree-directive.html
+++ b/catalog-ui/src/app/directives/structure-tree/structure-tree-directive.html
@@ -6,7 +6,7 @@
<ul>
<li data-ng-repeat="firstLevelResourcesInstances in structureTree.serviceRoot.resourceInstancesList">
<div class="component-container">
- <div class="small {{firstLevelResourcesInstances.icon}}" ng-class="{'sprite-resource-icons': !component.isProduct(), 'sprite-services-icons': component.isProduct()}">
+ <div class="small sprite-resource-icons {{firstLevelResourcesInstances.icon}}">
<div data-ng-class="{'non-certified':!firstLevelResourcesInstances.certified}"
tooltips tooltip-side="top" tooltip-content="Not certified">
</div>
diff --git a/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.less b/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.less
index 942196e663..af24776cd3 100644
--- a/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.less
+++ b/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.less
@@ -1,10 +1,10 @@
.tags-box {
- height: 297px;
+ height: 100px;
.bg_c;
.perfect-scrollbar {
- height: 265px;
+ height: 70px;
}
.new-tag-input {
diff --git a/catalog-ui/src/app/models.ts b/catalog-ui/src/app/models.ts
index c7b7577268..f3eb5d5fa6 100644
--- a/catalog-ui/src/app/models.ts
+++ b/catalog-ui/src/app/models.ts
@@ -35,11 +35,9 @@ export * from './models/category';
export * from './models/comments';
export * from './models/components/component';
export * from './models/components/displayComponent';
-export * from './models/components/product';
export * from './models/components/resource';
export * from './models/components/service';
export * from './models/componentsInstances/componentInstance';
-export * from './models/componentsInstances/productInstance';
export * from './models/componentsInstances/resourceInstance';
export * from './models/componentsInstances/serviceInstance';
export * from './models/csar-component';
@@ -102,7 +100,7 @@ export * from './models/tooltip-data';
export * from './models/user';
export * from './models/validate';
export * from './models/component-metadata';
-
+export * from './models/modal';
export * from './models/button';
export * from './models/filter-properties-assignment-data'
export * from './models/properties-inputs/input-be-model'
diff --git a/catalog-ui/src/app/models/app-config.ts b/catalog-ui/src/app/models/app-config.ts
index ef6c195731..40eb18b8b4 100644
--- a/catalog-ui/src/app/models/app-config.ts
+++ b/catalog-ui/src/app/models/app-config.ts
@@ -54,10 +54,7 @@ export interface IApi {
GET_activity_log:string;
GET_configuration_ui:string;
GET_service:string;
- PUT_product:string;
- GET_product:string;
GET_ecomp_menu_items:string;
- GET_product_validate_name:string;
GET_service_validate_name:string;
GET_service_distributions:string;
GET_service_distributions_components:string;
@@ -85,13 +82,6 @@ export interface IApi {
GET_onboarding:string;
GET_component_from_csar_uuid:string;
kibana:string;
-
- //Added by Ikram -- starts
- GET_product_category:string;
- GET_product_category_temp:string;
- GET_product_sub_category:string;
- //Added by Ikram -- ends
-
}
export interface ILogConfig {
@@ -132,8 +122,6 @@ export interface IConfigRoles {
TESTER:IConfigRole;
OPS:IConfigRole;
GOVERNOR:IConfigRole;
- PRODUCT_MANAGER:IConfigRole;
- PRODUCT_STRATEGIST:IConfigRole;
}
export interface IConfigRole {
diff --git a/catalog-ui/src/app/models/categories.ts b/catalog-ui/src/app/models/categories.ts
index b46c3a6612..0921ca158b 100644
--- a/catalog-ui/src/app/models/categories.ts
+++ b/catalog-ui/src/app/models/categories.ts
@@ -25,6 +25,5 @@ import {IMainCategory} from "./category";
export class Categories {
resourceCategories:Array<IMainCategory>;
- productCategories:Array<IMainCategory>;
serviceCategories:Array<IMainCategory>;
}
diff --git a/catalog-ui/src/app/models/component-metadata.ts b/catalog-ui/src/app/models/component-metadata.ts
index 2501f0bab5..8c6ed5593d 100644
--- a/catalog-ui/src/app/models/component-metadata.ts
+++ b/catalog-ui/src/app/models/component-metadata.ts
@@ -56,12 +56,15 @@ export class ComponentMetadata {
public vendorName:string;
public vendorRelease:string;
public derivedFrom: Array<string>;
+ public resourceVendorModelNumber:string;
//Service only
public projectCode:string;
public distributionStatus:string;
public ecompGeneratedNaming: boolean;
public namingPolicy: string;
+ public serviceType:string;
+ public serviceRole:string;
//backend lifecycleState
@@ -103,6 +106,9 @@ export class ComponentMetadata {
this.ecompGeneratedNaming = response.ecompGeneratedNaming;
this.namingPolicy = response.namingPolicy;
this.derivedFrom = response.derivedFrom;
+ this.resourceVendorModelNumber = response.resourceVendorModelNumber;
+ this.serviceType = response.serviceType;
+ this.serviceRole = response.serviceRole;
return this;
}
diff --git a/catalog-ui/src/app/models/components/component.ts b/catalog-ui/src/app/models/components/component.ts
index 0c47cc4cb2..9b2c942483 100644
--- a/catalog-ui/src/app/models/components/component.ts
+++ b/catalog-ui/src/app/models/components/component.ts
@@ -22,7 +22,7 @@
import {AsdcComment, ArtifactModel, ArtifactGroupModel, IFileDownload, PropertyModel, PropertiesGroup, AttributeModel, AttributesGroup, ComponentInstance,
InputModel, DisplayModule, Module, IValidate, RelationshipModel, IMainCategory, RequirementsGroup, CapabilitiesGroup, AdditionalInformationModel,
- Resource, IAppMenu, Product, Service} from "../../models";
+ Resource, IAppMenu, Service} from "../../models";
import {IComponentService} from "../../services/components/component-service";
import {CommonUtils} from "../../utils/common-utils";
@@ -92,7 +92,6 @@ export interface IComponent {
getComponentSubType():string;
isAlreadyCertified():boolean;
- isProduct():boolean;
isService():boolean;
isResource():boolean;
isComplex():boolean;
@@ -797,10 +796,6 @@ export abstract class Component implements IComponent {
//------------------------------------------ Help Functions ----------------------------------------------------------------//
- public isProduct = ():boolean => {
- return this instanceof Product;
- };
-
public isService = ():boolean => {
return this instanceof Service;
};
diff --git a/catalog-ui/src/app/models/components/displayComponent.ts b/catalog-ui/src/app/models/components/displayComponent.ts
index a5407e6d17..3a9cbfdaf3 100644
--- a/catalog-ui/src/app/models/components/displayComponent.ts
+++ b/catalog-ui/src/app/models/components/displayComponent.ts
@@ -97,9 +97,6 @@ export class LeftPaletteComponent {
case ComponentType.SERVICE:
this.iconClass = "sprite-services-icons " + icon;
break;
- case ComponentType.PRODUCT:
- this.iconClass = "sprite-product-icons " + icon;
- break;
default:
this.iconClass = "sprite-resource-icons " + icon;
}
diff --git a/catalog-ui/src/app/models/components/product.ts b/catalog-ui/src/app/models/components/product.ts
deleted file mode 100644
index dfb429b971..0000000000
--- a/catalog-ui/src/app/models/components/product.ts
+++ /dev/null
@@ -1,125 +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 2/4/2016.
- */
-'use strict';
-import {Component} from "./component";
-import {IProductService} from "../../services/components/product-service";
-import {IGroup, ISubCategory, IMainCategory, ICategoryBase} from "../category";
-import {ComponentMetadata} from "../component-metadata";
-
-export class Product extends Component {
-
- public contacts:Array<string>;
- public componentService:IProductService;
- public fullName:string;
-
- constructor(componentService:IProductService, $q:ng.IQService, component?:Product) {
- super(componentService, $q, component);
-
- if (component) {
- this.fullName = component.fullName;
- this.filterTerm = this.name + ' ' + this.description + ' ' + (this.tags ? this.tags.toString() : '') + ' ' + this.version;
- this.contacts = component.contacts;
- }
- this.componentService = componentService;
- this.iconSprite = "sprite-product-icons";
- }
-
- public deleteGroup = (uniqueId:string):void => {
- _.forEach(this.categories, (category:IMainCategory) => {
- _.forEach(category.subcategories, (subcategory:ISubCategory) => {
- subcategory.groupings = _.reject(subcategory.groupings, (group:IGroup) => {
- return group.uniqueId === uniqueId;
- });
- if (subcategory.groupings.length == 0) { // if there is no groups, delete the subcategory
- category.subcategories = _.reject(category.subcategories, (subcategoryObj:ISubCategory) => {
- return subcategoryObj.uniqueId === subcategory.uniqueId;
- });
- if (category.subcategories.length == 0) { // if there is no subcategory, delete the category
- this.categories = _.reject(this.categories, (categoryObj:IMainCategory) => {
- return categoryObj.uniqueId === category.uniqueId;
- });
- }
- }
- });
- });
- };
-
- private getCategoryObjectById = (categoriesArray:Array<ICategoryBase>, categoryUniqueId:string):ICategoryBase => {
- let categorySelected = _.find(categoriesArray, (category) => {
- return category.uniqueId === categoryUniqueId;
- });
- return categorySelected;
- };
-
- public addGroup = (category:IMainCategory, subcategory:ISubCategory, group:IGroup):void => {
- if (!this.categories) {
- this.categories = new Array<IMainCategory>();
- }
- let existingCategory:IMainCategory = <IMainCategory>this.getCategoryObjectById(this.categories, category.uniqueId);
- let newGroup = angular.copy(group);
- newGroup.filterTerms = undefined;
- newGroup.isDisabled = undefined;
- if (!existingCategory) {
- let newCategory:IMainCategory = angular.copy(category);
- newCategory.filteredGroup = undefined;
- newCategory.subcategories = [];
- let newSubcategory:ISubCategory = angular.copy(subcategory);
- newSubcategory.groupings = [];
- newSubcategory.groupings.push(newGroup);
- newCategory.subcategories.push(newSubcategory);
- this.categories.push(newCategory);
- }
- else {
- let existingSubcategory:ISubCategory = <ISubCategory> this.getCategoryObjectById(existingCategory.subcategories, subcategory.uniqueId);
- if (!existingSubcategory) {
- let newSubcategory:ISubCategory = angular.copy(subcategory);
- newSubcategory.groupings = [];
- newSubcategory.groupings.push(newGroup);
- existingCategory.subcategories.push(newSubcategory);
-
- } else {
- let existingGroup:IGroup = <IGroup> this.getCategoryObjectById(existingSubcategory.groupings, group.uniqueId);
- if (!existingGroup) {
- existingSubcategory.groupings.push(newGroup);
- }
- }
- }
- };
-
- getTypeUrl():string {
- return 'products/';
- }
-
- public setComponentMetadata(componentMetadata:ComponentMetadata) {
- super.setComponentMetadata(componentMetadata);
- this.setComponentDisplayData();
- };
-
- setComponentDisplayData():void {
- this.filterTerm = this.name + ' ' + this.description + ' ' + (this.tags ? this.tags.toString() : '') + ' ' + this.version;
- this.iconSprite = "sprite-product-icons";
- }
-}
-
-
diff --git a/catalog-ui/src/app/models/components/resource.ts b/catalog-ui/src/app/models/components/resource.ts
index 9f7a123486..138b413028 100644
--- a/catalog-ui/src/app/models/components/resource.ts
+++ b/catalog-ui/src/app/models/components/resource.ts
@@ -41,6 +41,7 @@ export class Resource extends Component {
public payloadData:string;
public payloadName:string;
public importedFile:FileUploadModel;
+ public resourceVendorModelNumber:string;
// Onboarding parameters
public csarUUID:string;
@@ -59,6 +60,7 @@ export class Resource extends Component {
this.resourceType = component.resourceType;
this.csarUUID = component.csarUUID;
this.csarVersion = component.csarVersion;
+ this.resourceVendorModelNumber = component.resourceVendorModelNumber;
this.filterTerm = this.name + ' ' + this.description + ' ' + (this.tags ? this.tags.toString() : '') + ' ' + this.version + ' ' + this.resourceType;
if (component.categories && component.categories[0] && component.categories[0].subcategories && component.categories[0].subcategories[0]) {
component.mainCategory = component.categories[0].name;
@@ -80,6 +82,7 @@ export class Resource extends Component {
this.csarUUID = componentMetadata.csarUUID;
this.csarVersion = componentMetadata.csarVersion;
this.derivedFrom = componentMetadata.derivedFrom;
+ this.resourceVendorModelNumber = componentMetadata.resourceVendorModelNumber;
this.setComponentDisplayData();
};
@@ -88,7 +91,7 @@ export class Resource extends Component {
};
public isComplex = ():boolean => {
- return this.resourceType === ResourceType.VF;
+ return this.resourceType === ResourceType.VF || this.resourceType === ResourceType.PNF || this.resourceType === ResourceType.CVFC;
};
public isVl = ():boolean => {
diff --git a/catalog-ui/src/app/models/components/service.ts b/catalog-ui/src/app/models/components/service.ts
index fbe32519c3..90a38e895b 100644
--- a/catalog-ui/src/app/models/components/service.ts
+++ b/catalog-ui/src/app/models/components/service.ts
@@ -34,6 +34,8 @@ export class Service extends Component {
public componentService:IServiceService;
public ecompGeneratedNaming:boolean;
public namingPolicy:string;
+ public serviceType:string;
+ public serviceRole:string;
constructor(componentService:IServiceService, $q:ng.IQService, component?:Service) {
super(componentService, $q, component);
@@ -43,6 +45,8 @@ export class Service extends Component {
this.filterTerm = this.name + ' ' + this.description + ' ' + (this.tags ? this.tags.toString() : '') + ' ' + this.version;
this.ecompGeneratedNaming = component.ecompGeneratedNaming;
this.namingPolicy = component.namingPolicy;
+ this.serviceType = component.serviceType;
+ this.serviceRole = component.serviceRole;
if (component.categories && component.categories[0]) {
this.mainCategory = component.categories[0].name;
this.selectedCategory = this.mainCategory;
@@ -155,6 +159,8 @@ export class Service extends Component {
super.setComponentMetadata(componentMetadata);
this.ecompGeneratedNaming = componentMetadata.ecompGeneratedNaming;
this.namingPolicy = componentMetadata.namingPolicy;
+ this.serviceType = componentMetadata.serviceType;
+ this.serviceRole = componentMetadata.serviceRole;
this.setComponentDisplayData();
}
diff --git a/catalog-ui/src/app/models/componentsInstances/componentInstance.ts b/catalog-ui/src/app/models/componentsInstances/componentInstance.ts
index 726e3382ba..06939a7a9e 100644
--- a/catalog-ui/src/app/models/componentsInstances/componentInstance.ts
+++ b/catalog-ui/src/app/models/componentsInstances/componentInstance.ts
@@ -52,6 +52,7 @@ export class ComponentInstance {
public inputs:Array<InputModel>;
public properties:Array<PropertyModel>;
public groupInstances:Array<Module>;
+ public invariantName:string;
constructor(componentInstance?:ComponentInstance) {
@@ -77,6 +78,7 @@ export class ComponentInstance {
this.customizationUUID = componentInstance.customizationUUID;
this.updatePosition(componentInstance.posX, componentInstance.posY);
this.groupInstances = componentInstance.groupInstances;
+ this.invariantName = componentInstance.invariantName;
}
}
@@ -92,7 +94,7 @@ export class ComponentInstance {
};
public isComplex = () : boolean => {
- return this.originType === ResourceType.VF;
+ return this.originType === ResourceType.VF || this.originType === ResourceType.PNF || this.originType === ResourceType.CVFC ;
}
public setInstanceRC = ():void=> {
diff --git a/catalog-ui/src/app/models/componentsInstances/productInstance.ts b/catalog-ui/src/app/models/componentsInstances/productInstance.ts
deleted file mode 100644
index 91f0999b9a..0000000000
--- a/catalog-ui/src/app/models/componentsInstances/productInstance.ts
+++ /dev/null
@@ -1,33 +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 2/4/2016.
- */
-'use strict';
-import {ComponentInstance} from "./componentInstance";
-
-export class ProductInstance extends ComponentInstance {
-
- constructor(componentInstance?:ProductInstance) {
- super(componentInstance);
- this.iconSprite = "sprite-product-icons";
- }
-}
diff --git a/catalog-ui/src/app/models/modal.ts b/catalog-ui/src/app/models/modal.ts
new file mode 100644
index 0000000000..51aa5e19a7
--- /dev/null
+++ b/catalog-ui/src/app/models/modal.ts
@@ -0,0 +1,16 @@
+import { ButtonModel } from 'app/models';
+
+export class ModalModel {
+ size: string; 'xl|l|md|sm|xsm'
+ title: string;
+ content: any;
+ buttons: Array<ButtonModel>;
+
+ constructor(size?: string, title?: string, content?: any, buttons?: Array<ButtonModel>) {
+ this.size = size;
+ this.title = title;
+ this.content = content;
+ this.buttons = buttons;
+ }
+}
+
diff --git a/catalog-ui/src/app/models/properties-inputs/input-fe-model.ts b/catalog-ui/src/app/models/properties-inputs/input-fe-model.ts
index 04a224bff7..630374aac3 100644
--- a/catalog-ui/src/app/models/properties-inputs/input-fe-model.ts
+++ b/catalog-ui/src/app/models/properties-inputs/input-fe-model.ts
@@ -40,4 +40,4 @@ export class InputFEModel extends InputBEModel {
}
}
-}
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/models/properties-inputs/property-fe-model.ts b/catalog-ui/src/app/models/properties-inputs/property-fe-model.ts
index 78d01d9af2..b35bb27b65 100644
--- a/catalog-ui/src/app/models/properties-inputs/property-fe-model.ts
+++ b/catalog-ui/src/app/models/properties-inputs/property-fe-model.ts
@@ -55,7 +55,7 @@ export class PropertyFEModel extends PropertyBEModel {
} catch (e){}
}
- return (this.derivedDataType == DerivedPropertyType.SIMPLE) ? this.valueObj : JSON.stringify(this.valueObj);
+ return (this.derivedDataType == DerivedPropertyType.SIMPLE) ? this.valueObj : JSON.stringify(this.valueObj);
}
public setNonDeclared = (childPath?: string): void => {
@@ -101,16 +101,16 @@ export class PropertyFEModel extends PropertyBEModel {
// this.flattenedChildren.filter(prop => prop.parentName == item.parentName).map(prop => prop.propertiesName).indexOf(item.propertiesName)
// }
- /* Updates parent valueObj when a child prop's value has changed */
- public childPropUpdated = (childProp: DerivedFEProperty): void => {
+ /* Updates parent valueObj when a child prop's value has changed */
+ public childPropUpdated = (childProp: DerivedFEProperty): void => {
let parentNames = this.getParentNamesArray(childProp.propertiesName, []);
if (parentNames.length) {
_.set(this.valueObj, parentNames.join('.'), childProp.valueObj);
}
};
- /* Returns array of individual parents for given prop path, with list/map UUIDs replaced with index/mapkey */
- private getParentNamesArray = (parentPropName: string, parentNames?: Array<string>): Array<string> => {
+ /* Returns array of individual parents for given prop path, with list/map UUIDs replaced with index/mapkey */
+ public getParentNamesArray = (parentPropName: string, parentNames?: Array<string>): Array<string> => {
if (parentPropName.indexOf("#") == -1) { return parentNames; } //finished recursing parents. return
let parentProp: DerivedFEProperty = this.flattenedChildren.find(prop => prop.propertiesName === parentPropName);
diff --git a/catalog-ui/src/app/models/user.ts b/catalog-ui/src/app/models/user.ts
index ec42aed553..54ddf1e5f6 100644
--- a/catalog-ui/src/app/models/user.ts
+++ b/catalog-ui/src/app/models/user.ts
@@ -26,9 +26,7 @@ export enum UserRole {
DESIGNER,
TESTER,
GOVERNOR,
- OPS,
- PRODUCT_MANAGER,
- PRODUCT_STRATEGIST
+ OPS
}
export interface IUserManager {
@@ -99,12 +97,6 @@ export class User implements IUser {
case UserRole.OPS:
role = UserRole.OPS;
break;
- case UserRole.PRODUCT_MANAGER:
- role = UserRole.PRODUCT_MANAGER;
- break;
- case UserRole.PRODUCT_STRATEGIST:
- role = UserRole.PRODUCT_STRATEGIST;
- break;
}
return role;
}
diff --git a/catalog-ui/src/app/modules/service-module.ts b/catalog-ui/src/app/modules/service-module.ts
index bf9ebce749..99624ada45 100644
--- a/catalog-ui/src/app/modules/service-module.ts
+++ b/catalog-ui/src/app/modules/service-module.ts
@@ -35,7 +35,6 @@ import {DataTypesService} from "../services/data-types-service";
import {ComponentService} from "../services/components/component-service";
import {ServiceService} from "../services/components/service-service";
import {ResourceService} from "../services/components/resource-service";
-import {ProductService} from "../services/components/product-service";
import {LeftPaletteLoaderService} from "../services/components/utils/composition-left-palette-service";
import {EventListenerService} from "../services/event-listener-service";
import {ProgressService} from "../services/progress-service";
@@ -69,7 +68,6 @@ serviceModule.service('Sdc.Services.DataTypesService', DataTypesService);
serviceModule.service('Sdc.Services.Components.ComponentService', ComponentService);
serviceModule.service('Sdc.Services.Components.ServiceService',ServiceService);
serviceModule.service('Sdc.Services.Components.ResourceService', ResourceService);
-serviceModule.service('Sdc.Services.Components.ProductService', ProductService);
serviceModule.service('LeftPaletteLoaderService', LeftPaletteLoaderService);
serviceModule.service('EventListenerService', EventListenerService);
serviceModule.service('Sdc.Services.ProgressService', ProgressService);
diff --git a/catalog-ui/src/app/modules/view-model-module.ts b/catalog-ui/src/app/modules/view-model-module.ts
index de7bc5ac1f..f94bfc3218 100644
--- a/catalog-ui/src/app/modules/view-model-module.ts
+++ b/catalog-ui/src/app/modules/view-model-module.ts
@@ -56,13 +56,12 @@ import {OnboardingModalViewModel} from "../view-models/modals/onboarding-modal/o
import {DistributionStatusModalViewModel} from "../view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal-view-model";
import {DcaeAppViewModel} from "../view-models/dcae-app/dcae-app-view-model";
import {GeneralViewModel} from "../view-models/workspace/tabs/general/general-view-model";
-import {IconsViewModel} from "../view-models/workspace/tabs/icons/icons-view-model";
+import {IconsModalViewModel} from "../view-models/modals/icons-modal/icons-modal-view";
import {DeploymentArtifactsViewModel} from "../view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view-model";
import {InformationArtifactsViewModel} from "../view-models/workspace/tabs/information-artifacts/information-artifacts-view-model";
import {ToscaArtifactsViewModel} from "../view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view-model";
import {PropertiesViewModel} from "../view-models/workspace/tabs/properties/properties-view-model";
import {AttributesViewModel} from "../view-models/workspace/tabs/attributes/attributes-view-model";
-import {ProductHierarchyViewModel} from "../view-models/workspace/tabs/product-hierarchy/product-hierarchy-view-model";
import {ActivityLogViewModel} from "../view-models/workspace/tabs/activity-log/activity-log";
import {ManagementWorkflowViewModel} from "../view-models/workspace/tabs/management-workflow/management-workflow-view-model";
import {NetworkCallFlowViewModel} from "../view-models/workspace/tabs/network-call-flow/network-call-flow-view-model";
@@ -114,6 +113,7 @@ viewModelModule
.controller(moduleName + '.UserManagementViewModel', UserManagementViewModel)
.controller(moduleName + '.CategoryManagementViewModel', CategoryManagementViewModel)
.controller(moduleName + '.OnboardingModalViewModel', OnboardingModalViewModel)
+ .controller(moduleName + '.IconsModalViewModel', IconsModalViewModel)
.controller(moduleName + '.DistributionStatusModalViewModel', DistributionStatusModalViewModel)
.controller(moduleName + '.DcaeAppViewModel', DcaeAppViewModel)
//
@@ -122,13 +122,11 @@ viewModelModule
.controller(moduleName + '.ConformanceLevelModalViewModel', ConformanceLevelModalViewModel)
.controller(moduleName + '.CompositionViewModel', CompositionViewModel)
.controller(moduleName + '.GeneralViewModel', GeneralViewModel)
- .controller(moduleName + '.IconsViewModel', IconsViewModel)
.controller(moduleName + '.DeploymentArtifactsViewModel', DeploymentArtifactsViewModel)
.controller(moduleName + '.InformationArtifactsViewModel', InformationArtifactsViewModel)
.controller(moduleName + '.ToscaArtifactsViewModel', ToscaArtifactsViewModel)
.controller(moduleName + '.PropertiesViewModel', PropertiesViewModel)
.controller(moduleName + '.AttributesViewModel', AttributesViewModel)
- .controller(moduleName + '.ProductHierarchyViewModel', ProductHierarchyViewModel)
.controller(moduleName + '.ActivityLogViewModel', ActivityLogViewModel)
.controller(moduleName + '.ManagementWorkflowViewModel', ManagementWorkflowViewModel)
.controller(moduleName + '.NetworkCallFlowViewModel', NetworkCallFlowViewModel)
diff --git a/catalog-ui/src/app/ng2/app.component.ts b/catalog-ui/src/app/ng2/app.component.ts
index 58f483ae11..cb10581c93 100644
--- a/catalog-ui/src/app/ng2/app.component.ts
+++ b/catalog-ui/src/app/ng2/app.component.ts
@@ -18,7 +18,7 @@
* ============LICENSE_END=========================================================
*/
-import { Component, Inject } from '@angular/core';
+import { Component, Inject, ViewContainerRef } from '@angular/core';
import { AuthenticationService } from './services/authentication.service';
@Component({
@@ -28,7 +28,7 @@ import { AuthenticationService } from './services/authentication.service';
})
export class AppComponent {
- constructor(auth:AuthenticationService){
+ constructor(auth:AuthenticationService, public viewContainerRef:ViewContainerRef){
}
diff --git a/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.html b/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.html
deleted file mode 100644
index 7fdd95b304..0000000000
--- a/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<modal #confirmationModal title="Delete Input" size="sm" [buttons]="footerButtons">
- Are you sure you want to delete this input?
-</modal>
diff --git a/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.ts b/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.ts
deleted file mode 100644
index f73692f525..0000000000
--- a/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.ts
+++ /dev/null
@@ -1,58 +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 rc2122 on 6/1/2017.
- */
-import {Component, Output, EventEmitter, ViewChild} from "@angular/core";
-import {ButtonsModelMap, ButtonModel} from "app/models/button";
-import {ModalComponent} from "app/ng2/components/modal/modal.component";
-
-@Component({
- selector: 'confirm-delete-input',
- templateUrl: './confirmation-delete-input.component.html'
-})
-export class ConfirmationDeleteInputComponent {
-
- @Output() deleteInput: EventEmitter<any> = new EventEmitter<any>();
- @ViewChild ('confirmationModal') confirmationModal:ModalComponent;
- footerButtons:ButtonsModelMap = {};
-
- constructor (){
- }
-
- ngOnInit() {
- this.footerButtons['Delete'] = new ButtonModel('Delete', 'blue', this.onDeleteInput);
- this.footerButtons['Close'] = new ButtonModel('Close', 'grey', this.closeModal);
- }
-
- onDeleteInput = (input) => {
- this.deleteInput.emit(input);
- this.closeModal();
- };
-
- openModal = () => {
- this.confirmationModal.open();
- }
-
- closeModal = () => {
- this.confirmationModal.close();
- }
-}
diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html
index 331415c26f..38de3ce649 100644
--- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html
+++ b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html
@@ -45,6 +45,5 @@
</div>
</div>
</div>
-<confirm-delete-input #deleteInputConfirmation (deleteInput)="onDeleteInput()"></confirm-delete-input>
diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts
index 526f5de360..30cdb89d8e 100644
--- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts
+++ b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts
@@ -23,7 +23,9 @@
*/
import {Component, Input, Output, EventEmitter, ViewChild} from "@angular/core";
import {InputFEModel} from "app/models";
-import {ConfirmationDeleteInputComponent} from "./confirmation-delete-input/confirmation-delete-input.component";
+import { ModalService } from 'app/ng2/services/modal.service';
+
+
@Component({
selector: 'inputs-table',
@@ -38,11 +40,10 @@ export class InputsTableComponent {
@Input() isLoading:boolean;
@Output() inputValueChanged: EventEmitter<any> = new EventEmitter<any>();
@Output() deleteInput: EventEmitter<any> = new EventEmitter<any>();
- @ViewChild ('deleteInputConfirmation') deleteInputConfirmation:ConfirmationDeleteInputComponent;
selectedInputToDelete:InputFEModel;
- constructor (){
+ constructor(private modalService: ModalService){
}
onInputValueChanged = (input) => {
@@ -51,11 +52,12 @@ export class InputsTableComponent {
onDeleteInput = () => {
this.deleteInput.emit(this.selectedInputToDelete);
+ this.modalService.closeCurrentModal();
};
openDeleteModal = (input:InputFEModel) => {
this.selectedInputToDelete = input;
- this.deleteInputConfirmation.openModal();
+ this.modalService.openActionModal("Delete Input", "Are you sure you want to delete this input?", "Delete", this.onDeleteInput, "Close");
}
}
diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.html b/catalog-ui/src/app/ng2/components/modal/modal.component.html
index 4882449596..cc411bc751 100644
--- a/catalog-ui/src/app/ng2/components/modal/modal.component.html
+++ b/catalog-ui/src/app/ng2/components/modal/modal.component.html
@@ -1,17 +1,15 @@
-<div class="custom-modal {{size}}">
+<div class="custom-modal {{input.size}}">
<div class="ng2-modal-content">
<div class="ng2-modal-header">
- <span class="title">{{ title }}</span>
+ <span class="title">{{ input.title }}</span>
<span class="close-button" (click)="close()"></span>
</div>
- <div class="ng2-modal-body">
- <ng-content></ng-content>
- </div>
+ <div class="ng2-modal-body" >{{input.content}}</div>
<div class="ng2-modal-footer">
- <button *ngFor="let buttonName of buttonsNames"
- class="tlv-btn {{buttons[buttonName].cssClass}}"
- [disabled] = "buttons[buttonName].getDisabled && buttons[buttonName].getDisabled()"
- (click) = "buttons[buttonName].callback()">{{buttons[buttonName].text}}</button>
+ <button *ngFor="let button of input.buttons"
+ class="tlv-btn {{button.cssClass}}"
+ [disabled] = "button.getDisabled && button.getDisabled()"
+ (click) = "button.callback()">{{button.text}}</button>
</div>
</div>
</div>
diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.ts b/catalog-ui/src/app/ng2/components/modal/modal.component.ts
index e432a6fde0..09fb9abdd1 100644
--- a/catalog-ui/src/app/ng2/components/modal/modal.component.ts
+++ b/catalog-ui/src/app/ng2/components/modal/modal.component.ts
@@ -22,8 +22,9 @@
* Created by rc2122 on 6/1/2017.
*/
import { Component, ElementRef, Input, OnInit, OnDestroy } from '@angular/core';
+//import {ViewContainerRef, ViewChild} from '@angular/core';
import * as $ from 'jquery';
-import {ButtonsModelMap} from "app/models/button";
+import { ButtonsModelMap, ModalModel } from 'app/models';
@Component({
selector: 'modal',
@@ -32,22 +33,17 @@ import {ButtonsModelMap} from "app/models/button";
})
export class ModalComponent implements OnInit, OnDestroy {
- @Input() size: string; 'xl|l|md|sm|xsm'
- @Input() title: string;
- @Input() public buttons:ButtonsModelMap;
+ @Input() input: ModalModel;
private modalElement: JQuery;
- private buttonsNames:Array<string>;
+ //@ViewChild('modalBody', { read: ViewContainerRef }) modalContainer: ViewContainerRef; //TODO: allow for custom component as body instead of simple message
+
constructor( el: ElementRef ) {
this.modalElement = $(el.nativeElement);
}
ngOnInit(): void {
- let modal = this;
this.modalElement.appendTo('body');
- if(this.buttons){
- this.buttonsNames = Object.keys(this.buttons);
- }
}
ngOnDestroy(): void {
diff --git a/catalog-ui/src/app/ng2/components/modal/modal.module.ts b/catalog-ui/src/app/ng2/components/modal/modal.module.ts
new file mode 100644
index 0000000000..d77be2cd23
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modal/modal.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from '@angular/common';
+import { ModalService } from 'app/ng2/services/modal.service';
+import { ModalComponent } from "app/ng2/components/modal/modal.component"
+
+@NgModule({
+ declarations: [
+ ModalComponent,
+ ],
+ imports: [CommonModule],
+ exports: [],
+ entryComponents: [
+ ModalComponent
+ ],
+ providers: [ModalService]
+})
+export class ModalModule {
+
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html
index 92948b3b0d..95cc79dce9 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html
+++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html
@@ -5,12 +5,12 @@
<!-- LEFT CELL -->
<ng-container *ngIf="!isPropertyFEModel">
<div class="table-cell" *ngIf="canBeDeclared" [ngClass]="{'filtered':property.name === propertyNameSearchText}" [class.round-checkbox]="property.isDeclared"> <!-- simple children of complex type [@checkEffect]="property.isDeclared"-->
- <checkbox [(checked)]="property.isSelected" [disabled]="property.isDisabled ||property.isDeclared || readonly" (checkedChange)="checkProperty.emit(property.propertiesName)" ></checkbox>
+ <checkbox [(checked)]="property.isSelected" [disabled]="property.isDisabled ||property.isDeclared || readonly" (checkedChange)="checkProperty.emit(property.propertiesName)" ></checkbox>
<div class="inner-cell-div" tooltip="{{property.name}}"><span>{{property.name}}</span></div>
</div>
<div class="table-cell" *ngIf="!canBeDeclared && !property.isChildOfListOrMap">{{property.name}}</div> <!-- simple children of complex type within map or list -->
<div class="table-cell map-entry" *ngIf="property.isChildOfListOrMap && propType == derivedPropertyTypes.MAP"><!-- map left cell -->
- <input [value]="property.mapKey" #mapKey (change)="mapKeyChanged.emit(mapKey.value)" [readonly]="readonly" type="text" [ngClass]="{'disabled':readonly}" />
+ <input [value]="property.mapKey" #mapKey (change)="mapKeyChanged.emit(mapKey)" [readonly]="readonly" type="text" [ngClass]="{'disabled':readonly, 'error':!mapKey.validity.valid}" />
</div>
</ng-container>
<!-- RIGHT CELL OR FULL WIDTH CELL-->
@@ -36,7 +36,7 @@
</ng-container>
<!-- ICONS: add, delete, and expand -->
<ng-container *ngIf="!property.isDeclared">
- <a *ngIf="(propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && !property.isChildOfListOrMap" class="property-icon add-item" (click)="createNewChildProperty();" [ngClass]="{'disabled':readonly}">Add value to list</a>
+ <a *ngIf="(propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && !property.isChildOfListOrMap" class="property-icon add-item" (click)="createNewChildProperty();" [ngClass]="{'disabled':readonly || preventInsertItem(property)}">Add value to list</a>
<span *ngIf="property.isChildOfListOrMap" (click)="deleteItem.emit(property);" class="property-icon sprite-new delete-item-icon" [ngClass]="{'disabled':readonly}"></span>
<span *ngIf="!isPropertyFEModel && (propType == derivedPropertyTypes.COMPLEX || ((propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && hasChildren()))" (click)="expandChildById(propPath)" class="property-icon sprite-new round-expand-icon" [class.open]="expandedChildId.indexOf(propPath) == 0"></span>
</ng-container>
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less
index 4da98ec736..48d3d035d0 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less
+++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less
@@ -1,3 +1,4 @@
+@import '../../../../../assets/styles/variables.less';
.flat-children-container {
.dynamic-property-row {
/*create nested left border classes for up to 10 levels of nesting*/
@@ -64,4 +65,10 @@
overflow: hidden;
display: inline;
padding-left: 8px;
-} \ No newline at end of file
+}
+.error {
+ border: solid 1px @func_color_q;
+ color: @func_color_q;
+ outline: none;
+ box-sizing: border-box;
+}
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts
index e078b74d65..59811b582d 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts
+++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts
@@ -88,7 +88,7 @@ export class DynamicPropertyComponent {
}
createNewChildProperty = (): void => {
-
+
let newProps: Array<DerivedFEProperty> = this.propertiesUtils.createListOrMapChildren(this.property, "", undefined);
if (this.property instanceof PropertyFEModel) {
this.addChildProps(newProps, this.property.name);
@@ -98,11 +98,22 @@ export class DynamicPropertyComponent {
}
addChildProps = (newProps: Array<DerivedFEProperty>, childPropName: string) => {
-
+
if (this.property instanceof PropertyFEModel) {
- let insertIndex: number = this.property.getIndexOfChild(childPropName) + this.property.getCountOfChildren(childPropName); //insert after parent prop and existing children
- this.property.flattenedChildren.splice(insertIndex, 0, ...newProps); //using ES6 spread operator
+ let insertIndex: number = this.property.getIndexOfChild(childPropName) + this.property.getCountOfChildren(childPropName); //insert after parent prop and existing children
+ this.property.flattenedChildren.splice(insertIndex, 0, ...newProps); //using ES6 spread operator
this.expandChildById(newProps[0].propertiesName);
+
+
+ if(!newProps[0].schema.property.isSimpleType){
+ angular.forEach(newProps, (prop:DerivedFEProperty):void => { //Update parent PropertyFEModel with value for each child, including nested props
+ (<PropertyFEModel>this.property).childPropUpdated(prop);
+ },this);
+ //grab the cumulative value for the new item from parent PropertyFEModel and assign that value to DerivedFEProp[0] (which is the list or map parent with UUID of the set we just added)
+ let parentNames = (<PropertyFEModel>this.property).getParentNamesArray(newProps[0].propertiesName, []);
+ newProps[0].valueObj = _.get(this.property.valueObj, parentNames.join('.'));
+ this.valueChanged.emit(this.property.name);
+ }
}
}
@@ -113,7 +124,7 @@ export class DynamicPropertyComponent {
this.dataTypeService.checkForCustomBehavior(this.property);
this.valueChanged.emit(this.property.name);
}
- }
+ }
deleteListOrMapItem = (item: DerivedFEProperty) => {
if (this.property instanceof PropertyFEModel) {
@@ -123,15 +134,22 @@ export class DynamicPropertyComponent {
}
}
- removeValueFromParent = (item: DerivedFEProperty, replaceKey?: string) => {
+ removeValueFromParent = (item: DerivedFEProperty, target?: any) => {
if (this.property instanceof PropertyFEModel) {
let itemParent = (item.parentName == this.property.name) ? this.property : this.property.flattenedChildren.find(prop => prop.propertiesName == item.parentName);
if (item.derivedDataType == DerivedPropertyType.MAP) {
let oldKey = item.mapKey;
- if (typeof replaceKey == 'string') { //allow saving empty string
- _.set(itemParent.valueObj, replaceKey, itemParent.valueObj[oldKey]);
- item.mapKey = replaceKey;
+ if (target && typeof target.value == 'string') { //allow saving empty string
+ let replaceKey:string = target.value;
+ if(Object.keys(itemParent.valueObj).indexOf(replaceKey) > -1){//the key is exists
+ target.setCustomValidity('This key is already exists.');
+ return;
+ }else {
+ target.setCustomValidity('');
+ _.set(itemParent.valueObj, replaceKey, itemParent.valueObj[oldKey]);
+ item.mapKey = replaceKey;
+ }
}
delete itemParent.valueObj[oldKey];
} else {
@@ -147,4 +165,11 @@ export class DynamicPropertyComponent {
}
}
+ preventInsertItem = (property:DerivedFEProperty):boolean => {
+ if(property.type == PROPERTY_TYPES.MAP && Object.keys(property.valueObj).indexOf('') > -1 ){
+ return true;
+ }
+ return false;
+ }
+
}
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts
index 1e09c9e4c6..3a5daba711 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts
@@ -37,14 +37,13 @@ import { HierarchyNavService } from './../../services/hierarchy-nav.service';
import { PropertiesUtils } from './properties.utils';
import { DynamicElementModule } from 'app/ng2/components/dynamic-element/dynamic-element.module';
import { DynamicPropertyComponent } from './../../components/properties-table/dynamic-property/dynamic-property.component';
-import {ConfirmationDeleteInputComponent} from "app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component"
-import { PopoverModule } from "../../components/popover/popover.module"
+import { PopoverModule } from "../../components/popover/popover.module";
+import { ModalModule } from "../../components/modal/modal.module";
import { FilterPropertiesAssignmentComponent } from "./../../components/filter-properties-assignment/filter-properties-assignment.component";
import { GroupByPipe } from 'app/ng2/pipes/groupBy.pipe';
import { KeysPipe } from 'app/ng2/pipes/keys.pipe';
import {TooltipModule} from "../../components/tooltip/tooltip.module";
import { ComponentModeService } from "app/ng2/services/component-mode.service"
-import { ModalComponent } from "app/ng2/components/modal/modal.component"
import {LoaderComponent} from "app/ng2/components/loader/loader.component"
import {HttpInterceptor} from "../../services/http.interceptor.service";
@@ -63,8 +62,6 @@ import {HttpInterceptor} from "../../services/http.interceptor.service";
// PopoverContentComponent,
// PopoverComponent,
FilterPropertiesAssignmentComponent,
- ModalComponent,
- ConfirmationDeleteInputComponent,
LoaderComponent
],
imports: [
@@ -75,7 +72,8 @@ import {HttpInterceptor} from "../../services/http.interceptor.service";
CheckboxModule,
DynamicElementModule,
PopoverModule,
- TooltipModule
+ TooltipModule,
+ ModalModule
],
entryComponents: [PropertiesAssignmentComponent],
exports: [
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
index ab059b1240..8151d001e8 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
@@ -27,7 +27,6 @@
.left-column {
flex: 1 0 500px;
position: relative;
- margin: 0 0 1em 0;
/deep/ .tabs {
width:33%;
@@ -119,7 +118,7 @@
display:flex;
flex:0 0 350px;
flex-direction:column;
- margin: 45px 0 1em 1em;
+ margin: 45px 0 0 1em;
overflow-x:auto;
/deep/ .tabs {
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
index 30ba6c0755..6782b72fa2 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
@@ -170,6 +170,10 @@ export class PropertiesAssignmentComponent {
});
}
+ if(resourceInstance.componentName === "vnfConfiguration") {
+ this.isReadonly = true;
+ }
+
if( this.searchPropertyName ){
this.clearSearch();
}
@@ -298,7 +302,7 @@ export class PropertiesAssignmentComponent {
angular.forEach(instancesIds, (instanceId: string): void => {
let selectedInstanceData: ResourceInstance = this.instances.find(instance => instance.uniqueId == instanceId);
- let originType: string = (selectedInstanceData) ? selectedInstanceData.originType : this.selectedInstanceType;
+ let originType: string = (selectedInstanceData) ? selectedInstanceData.originType : this.selectedInstanceType;
if (!this.isInput(originType)) {
selectedProperties[instanceId] = this.propertiesService.getCheckedProperties(this.instanceFePropertiesMap[instanceId]);
} else {
@@ -408,7 +412,7 @@ export class PropertiesAssignmentComponent {
};
private isInput = (instanceType:string):boolean =>{
- return instanceType === ResourceType.VF || instanceType === ResourceType.PNF;
+ return instanceType === ResourceType.VF || instanceType === ResourceType.PNF || instanceType === ResourceType.CVFC;
}
}
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts
index f876af7f8a..a04d23a16a 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts
@@ -139,8 +139,11 @@ export class PropertiesUtils {
let propNameInObj = prop.propertiesName.substring(prop.propertiesName.indexOf(parentName) + parentName.length + 1).split('#').join('.'); //extract everything after parent name
prop.valueObj = _.get(parentValueJSON, propNameInObj, prop.value || prop.defaultValue); //assign value -first value of parent if exists. If not, prop.value if not, prop.defaultvalue
- if ((prop.derivedDataType == DerivedPropertyType.SIMPLE || prop.isDeclared) && typeof prop.valueObj == 'object') { //Stringify objects that should be strings
+ if ( prop.isDeclared && typeof prop.valueObj == 'object') { //Stringify objects of items that are declared
prop.valueObj = JSON.stringify(prop.valueObj);
+ } else if(typeof prop.valueObj == PROPERTY_TYPES.STRING
+ && (prop.type == PROPERTY_TYPES.INTEGER || prop.type == PROPERTY_TYPES.FLOAT || prop.type == PROPERTY_TYPES.BOOLEAN)){ //parse ints and non-string simple types
+ prop.valueObj = JSON.parse(prop.valueObj);
} else { //parse strings that should be objects
if (prop.derivedDataType == DerivedPropertyType.COMPLEX && typeof prop.valueObj != 'object') {
prop.valueObj = JSON.parse(prop.valueObj || '{}');
diff --git a/catalog-ui/src/app/ng2/services/component-services/component.service.ts b/catalog-ui/src/app/ng2/services/component-services/component.service.ts
index c6865fde9d..cd593d5e3e 100644
--- a/catalog-ui/src/app/ng2/services/component-services/component.service.ts
+++ b/catalog-ui/src/app/ng2/services/component-services/component.service.ts
@@ -59,8 +59,6 @@ export class ComponentServiceNg2 {
private getServerTypeUrl = (componentType:string):string => {
switch (componentType) {
- case ComponentType.PRODUCT:
- return ServerTypeUrl.PRODUCTS;
case ComponentType.SERVICE:
return ServerTypeUrl.SERVICES;
default:
diff --git a/catalog-ui/src/app/ng2/services/http.interceptor.service.ts b/catalog-ui/src/app/ng2/services/http.interceptor.service.ts
index e1653cf0bc..c90bfd2848 100644
--- a/catalog-ui/src/app/ng2/services/http.interceptor.service.ts
+++ b/catalog-ui/src/app/ng2/services/http.interceptor.service.ts
@@ -7,9 +7,9 @@
* 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.
@@ -21,8 +21,8 @@
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import 'rxjs/Rx';
-import { sdc2Config } from './../../../main';
-import { Interceptor, InterceptedRequest, InterceptedResponse } from 'ng2-interceptors';
+import {sdc2Config} from './../../../main';
+import {Interceptor, InterceptedRequest, InterceptedResponse} from 'ng2-interceptors';
import {SharingService} from "../../services/sharing-service";
import {ReflectiveInjector} from '@angular/core';
import {Cookie2Service} from "./cookie.service";
@@ -31,23 +31,23 @@ import {Dictionary} from "../../utils/dictionary/dictionary";
import {SEVERITY} from "../../utils/constants";
import {IServerMessageModalModel} from "../../view-models/modals/message-modal/message-server-modal/server-message-modal-view-model";
+
export class HttpInterceptor implements Interceptor {
- private cookieService: Cookie2Service;
+ private cookieService:Cookie2Service;
private sharingService:SharingService;
+
constructor() {
- let injector = ReflectiveInjector.resolveAndCreate([Cookie2Service,SharingService]);
+ let injector = ReflectiveInjector.resolveAndCreate([Cookie2Service, SharingService]);
this.cookieService = injector.get(Cookie2Service);
this.sharingService = injector.get(SharingService);
}
- public interceptBefore(request: InterceptedRequest): InterceptedRequest {
-
+ public interceptBefore(request:InterceptedRequest):InterceptedRequest {
/**
* For every request to the server, that the service id, or resource id is sent in the URL, need to pass UUID in the header.
* Check if the unique id exists in uuidMap, and if so get the UUID and add it to the header.
*/
-
request.options.headers.append(this.cookieService.getUserIdSuffix(), this.cookieService.getUserId());
request.options.withCredentials = true;
var uuidValue = this.getUuidValue(request.url);
@@ -56,7 +56,6 @@ export class HttpInterceptor implements Interceptor {
}
request.options.headers.set('X-ECOMP-RequestID', UUID.UUID());
return request;
-
}
public interceptAfter(response:InterceptedResponse):InterceptedResponse {
@@ -66,10 +65,9 @@ export class HttpInterceptor implements Interceptor {
//console.log("Error from BE:",response);
}
return response;
-
}
- private getUuidValue = (url: string) :string => {
+ private getUuidValue = (url:string):string => {
let map:Dictionary<string, string> = this.sharingService.getUuidMap();
if (map && url.indexOf(sdc2Config.api.root) > 0) {
map.forEach((key:string) => {
@@ -158,9 +156,7 @@ export class HttpInterceptor implements Interceptor {
severity: SEVERITY.ERROR
};
}
- // let modalsHandler = this.$injector.get('ModalsHandler');
- // this.modalsHandler.openServerMessageModal(data);
console.error('ERROR data',data);
}
}
diff --git a/catalog-ui/src/app/ng2/services/modal.service.ts b/catalog-ui/src/app/ng2/services/modal.service.ts
new file mode 100644
index 0000000000..32192f40c2
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/modal.service.ts
@@ -0,0 +1,73 @@
+import { Injectable, Type, ViewContainerRef, ApplicationRef, ComponentFactory, ComponentFactoryResolver, ComponentRef } from '@angular/core';
+import { ModalModel, ButtonModel } from 'app/models';
+import { ModalComponent } from 'app/ng2/components/modal/modal.component';
+
+
+@Injectable()
+export class ModalService {
+ currentModal: ComponentRef<any>;
+
+
+ constructor(private componentFactoryResolver: ComponentFactoryResolver, private applicationRef: ApplicationRef) { }
+
+
+ /* Shortcut method to open a simple modal with title, message, and close button that simply closes the modal. */
+ public openAlertModal(title: string, message: string, closeButtonText?:string) {
+ let closeButton: ButtonModel = new ButtonModel(closeButtonText || 'Close', 'grey', this.closeCurrentModal);
+ let modalModel: ModalModel = new ModalModel('sm', title, message, [closeButton]);
+ this.createCustomModal(modalModel).instance.open();
+ }
+
+
+ /**
+ * Shortcut method to open a basic modal with title, message, and an action button with callback, as well as close button.
+ * NOTE: To close the modal from within the callback, use modalService.closeCurrentModal() //if you run into zone issues with callbacks see:https://stackoverflow.com/questions/36566698/how-to-dynamically-create-bootstrap-modals-as-angular2-components
+ * @param title Heading for modal
+ * @param message Message for modal
+ * @param actionButtonText Blue call to action button
+ * @param actionButtonCallback function to invoke when button is clicked
+ * @param cancelButtonText text for close/cancel button
+ */
+ public openActionModal = (title:string, message:string, actionButtonText:string, actionButtonCallback:Function, cancelButtonText:string) => {
+ let actionButton: ButtonModel = new ButtonModel(actionButtonText, 'blue', actionButtonCallback);
+ let cancelButton: ButtonModel = new ButtonModel(cancelButtonText, 'grey', this.closeCurrentModal);
+ let modalModel: ModalModel = new ModalModel('sm', title, message, [actionButton, cancelButton]);
+ this.createCustomModal(modalModel).instance.open();
+ }
+
+
+ /* Use this method to create a modal with title, message, and completely custom buttons. Use response.instance.open() to open */
+ public createCustomModal = (customModalData: ModalModel): ComponentRef<ModalComponent> => {
+ let customModal: ComponentRef<ModalComponent> = this.createDynamicComponent(ModalComponent);
+ customModal.instance.input = customModalData;
+ this.currentModal = customModal;
+
+ return customModal;
+ }
+
+
+ public closeCurrentModal = () => {
+ if (!this.currentModal) return;
+ this.currentModal.instance.close();
+ this.currentModal.destroy();
+ }
+
+
+ //Creates a component dynamically (aka during runtime). If a view container is not specified, it will append the new component to the app root.
+ //To subscribe to an event from invoking component: componentRef.instance.clicked.subscribe((m) => console.log(m.name));
+ private createDynamicComponent<T>(componentType: Type<T>, viewContainerRef?:ViewContainerRef): ComponentRef<any> {
+
+ viewContainerRef = viewContainerRef || this.getRootViewContainerRef();
+ viewContainerRef.clear();
+
+ let factory: ComponentFactory<any> = this.componentFactoryResolver.resolveComponentFactory(componentType); //Ref: https://angular.io/guide/dynamic-component-loader
+ let componentRef = viewContainerRef.createComponent(factory);
+
+ return componentRef;
+ }
+
+
+ private getRootViewContainerRef(): ViewContainerRef {
+ return this.applicationRef.components[0].instance.viewContainerRef;
+ }
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/services.ts b/catalog-ui/src/app/services.ts
index ce4a8e32d3..5dd08c2d20 100644
--- a/catalog-ui/src/app/services.ts
+++ b/catalog-ui/src/app/services.ts
@@ -27,7 +27,6 @@ export * from './services/cache-service';
export * from './services/configuration-ui-service';
export * from './services/category-resource-service';
export * from './services/components/component-service';
-export * from './services/components/product-service';
export * from './services/components/resource-service';
export * from './services/components/service-service';
export * from './services/components/resource-service';
diff --git a/catalog-ui/src/app/services/available-icons-service.ts b/catalog-ui/src/app/services/available-icons-service.ts
index ebb6c5ff77..13b6caea2a 100644
--- a/catalog-ui/src/app/services/available-icons-service.ts
+++ b/catalog-ui/src/app/services/available-icons-service.ts
@@ -81,23 +81,6 @@ export class AvailableIconsService implements IAvailableIconsService {
'firewall'
];
break;
-
- case ComponentType.PRODUCT:
- icons = [
- 'vfw',
- 'network',
- 'security',
- 'cloud',
- 'setting',
- 'orphan',
- 'wanx',
- 'vrouter',
- 'ucpe',
- 'mobility'
-
- ];
- break;
-
}
return icons;
}
diff --git a/catalog-ui/src/app/services/components/product-service.ts b/catalog-ui/src/app/services/components/product-service.ts
deleted file mode 100644
index 09199ea172..0000000000
--- a/catalog-ui/src/app/services/components/product-service.ts
+++ /dev/null
@@ -1,55 +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 2/8/2016.
- */
-'use strict';
-import {IComponentService, ComponentService} from "./component-service";
-import {SharingService} from "../sharing-service";
-import {Product, Component, IAppConfigurtaion} from "../../models";
-
-export interface IProductService extends IComponentService {
-
-}
-
-export class ProductService extends ComponentService implements IProductService {
-
- static '$inject' = [
- 'Restangular',
- 'sdcConfig',
- 'Sdc.Services.SharingService',
- '$q',
- '$base64'
- ];
-
- constructor(protected restangular:restangular.IElement,
- protected sdcConfig:IAppConfigurtaion,
- protected sharingService:SharingService,
- protected $q:ng.IQService,
- protected $base64:any) {
- super(restangular, sdcConfig, sharingService, $q, $base64);
- this.restangular = restangular.one("products");
- }
-
- createComponentObject = (component:Component):Component => {
- return new Product(this, this.$q, <Product>component);
- };
-}
diff --git a/catalog-ui/src/app/services/components/utils/composition-left-palette-service.ts b/catalog-ui/src/app/services/components/utils/composition-left-palette-service.ts
index 52cb78f6d5..a1fa65159f 100644
--- a/catalog-ui/src/app/services/components/utils/composition-left-palette-service.ts
+++ b/catalog-ui/src/app/services/components/utils/composition-left-palette-service.ts
@@ -28,6 +28,7 @@ import {ComponentFactory} from "../../../utils/component-factory";
import {IAppConfigurtaion} from "../../../models/app-config";
import {ResourceType, ComponentType, EVENTS} from "../../../utils/constants";
import {ComponentMetadata} from "../../../models/component-metadata";
+import {Resource} from "app/models/components/resource";
export class LeftPaletteDataObject {
displayLeftPanelComponents:Array<LeftPaletteComponent>;
@@ -58,24 +59,27 @@ export class LeftPaletteLoaderService {
protected EventListenerService:EventListenerService) {
this.restangular.setBaseUrl(sdcConfig.api.root + sdcConfig.api.component_api_root);
-
+
}
private serviceLeftPaletteData:LeftPaletteDataObject;
private resourceLeftPaletteData:LeftPaletteDataObject;
- private productLeftPaletteData:LeftPaletteDataObject;
+ private resourcePNFLeftPaletteData:LeftPaletteDataObject;
private vlData:LeftPaletteDataObject;
- public loadLeftPanel = (componentType: string):void => {
+ public loadLeftPanel = (component:Component):void => {
this.serviceLeftPaletteData = new LeftPaletteDataObject(EVENTS.SERVICE_LEFT_PALETTE_UPDATE_EVENT);
this.resourceLeftPaletteData = new LeftPaletteDataObject(EVENTS.RESOURCE_LEFT_PALETTE_UPDATE_EVENT);
- this.updateComponentLeftPalette(componentType);
+ this.resourcePNFLeftPaletteData = new LeftPaletteDataObject(EVENTS.RESOURCE_PNF_LEFT_PALETTE_UPDATE_EVENT);
+ this.updateComponentLeftPalette(component);
}
-
- private getTypeUrl = (componentType:string):string => {
- return ComponentType.PRODUCT === componentType ? "services" : "resources";
- };
+ private getResourceLeftPaletteDataByResourceType = (resourceType:string):LeftPaletteDataObject => {
+ if(resourceType == ResourceType.PNF) {
+ return this.resourcePNFLeftPaletteData;
+ }
+ return this.resourceLeftPaletteData;
+ }
private onFinishLoading = (componentType:string, leftPaletteData:LeftPaletteDataObject):void => {
this.EventListenerService.notifyObservers(leftPaletteData.onFinishLoadingEvent);
@@ -83,7 +87,7 @@ export class LeftPaletteLoaderService {
private updateLeftPalette = (componentType, componentInternalType:string, leftPaletteData:LeftPaletteDataObject):void => {
- this.restangular.one(this.getTypeUrl(componentType)).one('/latestversion/notabstract/metadata').get({'internalComponentType': componentInternalType}).then((leftPaletteComponentMetadata:Array<ComponentMetadata>) => {
+ this.restangular.one("resources").one('/latestversion/notabstract/metadata').get({'internalComponentType': componentInternalType}).then((leftPaletteComponentMetadata:Array<ComponentMetadata>) => {
_.forEach(leftPaletteComponentMetadata, (componentMetadata:ComponentMetadata) => {
leftPaletteData.displayLeftPanelComponents.push(new LeftPaletteComponent(componentMetadata));
});
@@ -91,30 +95,25 @@ export class LeftPaletteLoaderService {
});
};
- public getLeftPanelComponentsForDisplay = (componentType:string):Array<LeftPaletteComponent> => {
- switch (componentType) {
+ public getLeftPanelComponentsForDisplay = (component:Component):Array<LeftPaletteComponent> => {
+ switch (component.componentType) {
case ComponentType.SERVICE:
return this.serviceLeftPaletteData.displayLeftPanelComponents;
- case ComponentType.PRODUCT:
- return this.productLeftPaletteData.displayLeftPanelComponents;
- default:
- return this.resourceLeftPaletteData.displayLeftPanelComponents;
+ default://resource
+ return this.getResourceLeftPaletteDataByResourceType((<Resource>component).resourceType).displayLeftPanelComponents;
}
};
- public updateComponentLeftPalette = (componentType):void => {
- switch (componentType) {
- case ResourceType.VL:
- this.updateLeftPalette(ComponentType.RESOURCE, ResourceType.VL, this.vlData);
- break;
+ public updateComponentLeftPalette = (component:Component):void => {
+ switch (component.componentType) {
case ComponentType.SERVICE:
this.updateLeftPalette(ComponentType.SERVICE, ComponentType.SERVICE, this.serviceLeftPaletteData);
break;
- case ComponentType.PRODUCT:
- this.updateLeftPalette(ComponentType.PRODUCT, ComponentType.SERVICE, this.productLeftPaletteData);
+ case ComponentType.RESOURCE:
+ this.updateLeftPalette(ComponentType.RESOURCE, (<Resource>component).resourceType, this.getResourceLeftPaletteDataByResourceType((<Resource>component).resourceType));
break;
default:
- this.updateLeftPalette(ComponentType.RESOURCE, ResourceType.VF, this.resourceLeftPaletteData);
+ console.log('ERROR: Component type '+ component.componentType + ' is not exists');
}
};
}
diff --git a/catalog-ui/src/app/services/data-types-service.ts b/catalog-ui/src/app/services/data-types-service.ts
index a6dbf7f12d..84fe42e9f3 100644
--- a/catalog-ui/src/app/services/data-types-service.ts
+++ b/catalog-ui/src/app/services/data-types-service.ts
@@ -132,7 +132,8 @@ export class DataTypesService implements IDataTypesService {
public isDataTypeForDataTypePropertyType = (property:DataTypePropertyModel):boolean=> {
property.simpleType = "";
- if (property.type && PROPERTY_DATA.TYPES.indexOf(property.type) > -1) {
+ let isScalarForNFoD:boolean = property.type === 'scalar-unit.size';
+ if (property.type && PROPERTY_DATA.TYPES.indexOf(property.type) > -1 || isScalarForNFoD) {
return false;
}
let simpleType = this.getTypeForDataTypeDerivedFromSimple(property.type);
diff --git a/catalog-ui/src/app/services/entity-service.ts b/catalog-ui/src/app/services/entity-service.ts
index a255dcff34..75ea036b3e 100644
--- a/catalog-ui/src/app/services/entity-service.ts
+++ b/catalog-ui/src/app/services/entity-service.ts
@@ -19,7 +19,7 @@
*/
'use strict';
-import {Product, Service, IApi, IAppConfigurtaion, Resource, Component} from "../models";
+import { Service, IApi, IAppConfigurtaion, Resource, Component} from "../models";
import {SharingService} from "./sharing-service";
import {ComponentFactory} from "../utils/component-factory";
import {CacheService} from "./cache-service";
@@ -31,7 +31,6 @@ interface IEntityService {
interface IComponentsArray {
services:Array<Service>;
resources:Array<Resource>;
- products:Array<Product>;
}
export class EntityService implements IEntityService {
@@ -66,13 +65,6 @@ export class EntityService implements IEntityService {
this.sharingService.addUuidValue(component.uniqueId, component.uuid);
});
- followedResponse.products.forEach((productResponse:Product) => {
-
- let component:Product = this.ComponentFactory.createProduct(productResponse);
- componentsList.push(component);
- this.sharingService.addUuidValue(component.uniqueId, component.uuid);
- });
-
this.cacheService.set('breadcrumbsComponents', componentsList);
defer.resolve(componentsList);
},(responce) => {
@@ -99,12 +91,7 @@ export class EntityService implements IEntityService {
componentsList.push(component);
this.sharingService.addUuidValue(component.uniqueId, component.uuid);
});
-
- componentResponse.products && componentResponse.products.forEach((productsResponse:Product) => {
- let component:Product = this.ComponentFactory.createProduct(productsResponse);
- componentsList.push(component);
- this.sharingService.addUuidValue(component.uniqueId, component.uuid);
- });
+
this.cacheService.set('breadcrumbsComponents', componentsList);
defer.resolve(componentsList);
});
diff --git a/catalog-ui/src/app/utils/component-factory.ts b/catalog-ui/src/app/utils/component-factory.ts
index c202a1c8f5..b35918c0f6 100644
--- a/catalog-ui/src/app/utils/component-factory.ts
+++ b/catalog-ui/src/app/utils/component-factory.ts
@@ -20,8 +20,8 @@
'use strict';
import {DEFAULT_ICON, ResourceType, ComponentType} from "./constants";
-import {ServiceService, CacheService, ResourceService, ProductService} from "app/services";
-import {IMainCategory, ISubCategory, ICsarComponent, Component, Resource, Service, Product} from "app/models";
+import {ServiceService, CacheService, ResourceService} from "app/services";
+import {IMainCategory, ISubCategory, ICsarComponent, Component, Resource, Service} from "app/models";
import {ComponentMetadata} from "../models/component-metadata";
import {ComponentServiceNg2} from "../ng2/services/component-services/component.service";
import {ComponentGenericResponse} from "../ng2/services/responses/component-generic-response";
@@ -32,7 +32,6 @@ export class ComponentFactory {
static '$inject' = [
'Sdc.Services.Components.ResourceService',
'Sdc.Services.Components.ServiceService',
- 'Sdc.Services.Components.ProductService',
'Sdc.Services.CacheService',
'$q',
'ComponentServiceNg2'
@@ -40,7 +39,6 @@ export class ComponentFactory {
constructor(private ResourceService:ResourceService,
private ServiceService:ServiceService,
- private ProductService:ProductService,
private cacheService:CacheService,
private $q:ng.IQService,
private ComponentServiceNg2: ComponentServiceNg2) {
@@ -58,18 +56,10 @@ export class ComponentFactory {
newComponent = new Resource(this.ResourceService, this.$q, <Resource> component);
break;
- case 'PRODUCT':
- newComponent = new Product(this.ProductService, this.$q, <Product> component);
- break;
}
return newComponent;
};
- public createProduct = (product:Product):Product => {
- let newProduct:Product = new Product(this.ProductService, this.$q, <Product> product);
- return newProduct;
- };
-
public createService = (service:Service):Service => {
let newService:Service = new Service(this.ServiceService, this.$q, <Service> service);
return newService;
@@ -144,12 +134,10 @@ export class ComponentFactory {
case ResourceType.VL:
case ResourceType.VFC:
case ResourceType.CP:
+ case ResourceType.PNF:
+ case ResourceType.CVFC:
newComponent = new Resource(this.ResourceService, this.$q);
break;
-
- case ComponentType.PRODUCT:
- newComponent = new Product(this.ProductService, this.$q);
- break;
}
newComponent.componentType = componentType;
newComponent.tags = [];
diff --git a/catalog-ui/src/app/utils/component-instance-factory.ts b/catalog-ui/src/app/utils/component-instance-factory.ts
index c020c53705..9e25e6b02f 100644
--- a/catalog-ui/src/app/utils/component-instance-factory.ts
+++ b/catalog-ui/src/app/utils/component-instance-factory.ts
@@ -21,7 +21,7 @@
* Created by obarda on 3/7/2016.
*/
'use strict';
-import {ComponentInstance, ServiceInstance, ProductInstance, ResourceInstance, Component} from "../models";
+import {ComponentInstance, ServiceInstance, ResourceInstance, Component} from "../models";
import {LeftPaletteComponent} from "../models/components/displayComponent";
export class ComponentInstanceFactory {
@@ -33,10 +33,6 @@ export class ComponentInstanceFactory {
newComponentInstance = new ServiceInstance(componentInstance);
break;
- case 'PRODUCT':
- newComponentInstance = new ProductInstance(componentInstance);
- break;
-
default :
newComponentInstance = new ResourceInstance(componentInstance);
break;
@@ -51,10 +47,6 @@ export class ComponentInstanceFactory {
newComponentInstance = new ServiceInstance();
break;
- case 'PRODUCT':
- newComponentInstance = new ProductInstance();
- break;
-
default :
newComponentInstance = new ResourceInstance();
break;
diff --git a/catalog-ui/src/app/utils/constants.ts b/catalog-ui/src/app/utils/constants.ts
index 636c0c4fbf..d239019455 100644
--- a/catalog-ui/src/app/utils/constants.ts
+++ b/catalog-ui/src/app/utils/constants.ts
@@ -29,13 +29,11 @@ export let CHANGE_COMPONENT_CSAR_VERSION_FLAG = 'changeComponentCsarVersion';
export class ComponentType {
static SERVICE = 'SERVICE';
static RESOURCE = 'RESOURCE';
- static PRODUCT = 'PRODUCT';
}
export class ServerTypeUrl {
static RESOURCES = 'resources/';
static SERVICES = 'services/';
- static PRODUCTS = 'product/';
}
export class ResourceType {
@@ -45,6 +43,7 @@ export class ResourceType {
static VFC = 'VFC';
static VFCMT = 'VFCMT';
static PNF = 'PNF';
+ static CVFC = 'CVFC';
}
export class ComponentState {
@@ -129,8 +128,6 @@ export class PROPERTY_VALUE_CONSTRAINTS {
export class Role {
public static ADMIN = 'ADMIN';
public static DESIGNER = 'DESIGNER';
- public static PRODUCT_STRATEGIST = 'PRODUCT_STRATEGIST';
- public static PRODUCT_MANAGER = 'PRODUCT_MANAGER';
public static TESTER = 'TESTER';
public static OPS = 'OPS';
public static GOVERNOR = 'GOVERNOR';
@@ -213,14 +210,12 @@ export class GraphUIObjects {
export class States {
public static WORKSPACE_GENERAL = 'workspace.general';
- public static WORKSPACE_ICONS = 'workspace.icons';
public static WORKSPACE_ACTIVITY_LOG = 'workspace.activity_log';
public static WORKSPACE_DEPLOYMENT_ARTIFACTS = 'workspace.deployment_artifacts';
public static WORKSPACE_PROPERTIES = 'workspace.properties';
public static WORKSPACE_SERVICE_INPUTS = 'workspace.service_inputs';
public static WORKSPACE_RESOURCE_INPUTS = 'workspace.resource_inputs';
public static WORKSPACE_ATTRIBUTES = 'workspace.attributes';
- public static WORKSPACE_HIERARCHY = 'workspace.hierarchy';
public static WORKSPACE_INFORMATION_ARTIFACTS = 'workspace.information_artifacts';
public static WORKSPACE_TOSCA_ARTIFACTS = 'workspace.tosca_artifacts';
public static WORKSPACE_COMPOSITION = 'workspace.composition';
@@ -237,7 +232,6 @@ export class EVENTS {
static RESOURCE_LEFT_PALETTE_UPDATE_EVENT = "resourceLeftPanelUpdateEvent";
static RESOURCE_PNF_LEFT_PALETTE_UPDATE_EVENT = "resourcePNFLeftPanelUpdateEvent";
static SERVICE_LEFT_PALETTE_UPDATE_EVENT = "serviceLeftPanelUpdateEvent";
- static PRODUCT_LEFT_PALETTE_UPDATE_EVENT = "productLeftPanelUdateEvent";
static VL_LEFT_PALETTE_UPDATE_EVENT = "vlLeftPanelUdateEvent";
static ON_CSAR_LOADING = "onCsarLoading";
static DOWNLOAD_ARTIFACT_FINISH_EVENT = "downloadArtifactFinishEvent";
diff --git a/catalog-ui/src/app/utils/modals-handler.ts b/catalog-ui/src/app/utils/modals-handler.ts
index ae91b2acb7..0d17683116 100644
--- a/catalog-ui/src/app/utils/modals-handler.ts
+++ b/catalog-ui/src/app/utils/modals-handler.ts
@@ -187,6 +187,24 @@ export class ModalsHandler implements IModalsHandler {
return deferred.promise;
};
+ openUpdateIconModal = (component: Component):ng.IPromise<any> => {
+ let deferred = this.$q.defer();
+ let modalOptions:ng.ui.bootstrap.IModalSettings = {
+ templateUrl: '../view-models/modals/icons-modal/icons-modal-view.html',
+ controller: 'Sdc.ViewModels.IconsModalViewModel',
+ size: 'sdc-auto',
+ backdrop: 'static',
+ resolve: {
+ component: ():Component => {
+ return component;
+ }
+ }
+ };
+ let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
+ deferred.resolve(modalInstance.result);
+ return deferred.promise;
+ };
+
openEditEnvParametersModal = (artifactResource:ArtifactModel, component?:Component):ng.IPromise<any> => {
let deferred = this.$q.defer();
let modalOptions:ng.ui.bootstrap.IModalSettings = {
diff --git a/catalog-ui/src/app/view-models/catalog/catalog-view-model.ts b/catalog-ui/src/app/view-models/catalog/catalog-view-model.ts
index 8925be0fff..ec9e888eed 100644
--- a/catalog-ui/src/app/view-models/catalog/catalog-view-model.ts
+++ b/catalog-ui/src/app/view-models/catalog/catalog-view-model.ts
@@ -117,7 +117,7 @@ export class CatalogViewModel {
let onSuccess = (followedResponse:Array<Component>):void => {
this.$scope.catalogFilterdItems = followedResponse;
this.$scope.isAllItemDisplay = this.$scope.numberOfItemToDisplay >= this.$scope.catalogFilterdItems.length;
- this.$scope.categories = this.cacheService.get('serviceCategories').concat(this.cacheService.get('resourceCategories')).concat(this.cacheService.get('productCategories'));
+ this.$scope.categories = this.cacheService.get('serviceCategories').concat(this.cacheService.get('resourceCategories'));
this.$scope.gui.isLoading = false;
};
@@ -137,7 +137,7 @@ export class CatalogViewModel {
//this.$scope.categories = this.cacheService.get('categoriesMap');
this.$scope.sdcMenu = this.sdcMenu;
this.$scope.confStatus = this.sdcMenu.statuses;
- this.$scope.expandedSection = ["type", "category", "product-category", "status"];
+ this.$scope.expandedSection = ["type", "category", "status"];
this.$scope.user = this.userResourceService.getLoggedinUser();
this.$scope.catalogMenuItem = this.sdcMenu.catalogMenuItem;
this.$scope.version = this.cacheService.get('version');
@@ -147,8 +147,8 @@ export class CatalogViewModel {
// Checklist init
this.$scope.checkboxes = <Checkboxes>{};
- this.$scope.checkboxes.componentTypes = ['Resource', 'Service', 'Product'];
- this.$scope.checkboxes.resourceSubTypes = ['VF', 'VFC', 'CP', 'VL'];
+ this.$scope.checkboxes.componentTypes = ['Resource', 'Service'];
+ this.$scope.checkboxes.resourceSubTypes = ['VF', 'VFC', 'PNF', 'CP', 'VL'];
// Checkboxes filter init
this.$scope.checkboxesFilter = <CheckboxesFilter>{};
diff --git a/catalog-ui/src/app/view-models/catalog/catalog.less b/catalog-ui/src/app/view-models/catalog/catalog.less
index ff50202243..1f473c9638 100644
--- a/catalog-ui/src/app/view-models/catalog/catalog.less
+++ b/catalog-ui/src/app/view-models/catalog/catalog.less
@@ -67,28 +67,6 @@
//text-indent: -10px;
}
- /*Added by - Ikram */
- .i-sdc-product-input,
- .i-sdc-product-select {
- border: 1px solid @border_color_f;
- min-height: 30px;
- padding: 0;
- width: 100%;
- margin: 1px 0;
- background-color: #F2F2F2;
- outline: none;
-
- &:disabled {
- .disabled;
- }
- optgroup{
- color: @color_u;
- option{
- color: @color_b;
- }
- }
- }
-
.i-sdc-categories-list-item-icon {
display: inline-block;
float: right;
diff --git a/catalog-ui/src/app/view-models/dashboard/dashboard-view-model.ts b/catalog-ui/src/app/view-models/dashboard/dashboard-view-model.ts
index b9e51f098a..5480e4f6cf 100644
--- a/catalog-ui/src/app/view-models/dashboard/dashboard-view-model.ts
+++ b/catalog-ui/src/app/view-models/dashboard/dashboard-view-model.ts
@@ -310,6 +310,13 @@ export class DashboardViewModel {
};
+ this.$scope.createPNF = ():void => {
+ this.$state.go('workspace.general', {
+ type: ComponentType.RESOURCE.toLowerCase(),
+ resourceType: ResourceType.PNF
+ });
+ };
+
this.$scope.entitiesCount = (folderItem:FoldersItemsMenu):any => {
let self = this;
let total:number = 0;
diff --git a/catalog-ui/src/app/view-models/dashboard/dashboard-view.html b/catalog-ui/src/app/view-models/dashboard/dashboard-view.html
index 806bb8138d..baf4aa6e51 100644
--- a/catalog-ui/src/app/view-models/dashboard/dashboard-view.html
+++ b/catalog-ui/src/app/view-models/dashboard/dashboard-view.html
@@ -13,15 +13,15 @@
<div class='w-sdc-row-flex-items'>
<!-- ADD Component -->
- <div ng-if="user.role === 'DESIGNER' || user.role === 'PRODUCT_MANAGER'" class="w-sdc-dashboard-card-new"
+ <div ng-if="user.role === 'DESIGNER'" class="w-sdc-dashboard-card-new"
data-ng-mouseleave="displayActions = false"
data-ng-mouseover="displayActions = true"
data-ng-init="displayActions = false">
<div class="w-sdc-dashboard-card-new-content" data-tests-id="AddButtonsArea">
<div class="w-sdc-dashboard-card-new-content-plus" data-ng-show="!displayActions"></div>
<div class="sdc-dashboard-create-element-container" data-ng-show="displayActions">
- <button data-ng-if="roles[user.role].dashboard.showCreateNewProduct" data-tests-id="createProductButton" class="tlv-btn outline blue" data-ng-click="openCreateModal('PRODUCT')">Create Product</button>
<button data-ng-if="roles[user.role].dashboard.showCreateNew" data-tests-id="createResourceButton" class="tlv-btn outline blue" data-ng-click="openCreateModal('RESOURCE')">Add VF</button>
+ <button data-ng-if="roles[user.role].dashboard.showCreateNew" data-tests-id="createPNFButton" class="tlv-btn outline blue" data-ng-click="createPNF()">Add PNF</button>
<button data-ng-if="roles[user.role].dashboard.showCreateNew" data-tests-id="createServiceButton" class="tlv-btn outline blue" data-ng-click="openCreateModal('SERVICE')">Add Service</button>
</div>
</div>
@@ -44,8 +44,8 @@
</div>
</div>
</div>
- </div>
-
+ </div>
+
<!-- Tile new -->
<div class="sdc-tile-catalog sdc-tile-fix-width" data-ng-repeat="component in components | filter:{resourceType:('!'+vfcmtType)} | entityFilter:checkboxesFilter | filter:search">
@@ -62,7 +62,7 @@
data-tests-id="{{component.name}}"></div>
</div>
<div class='sdc-tile-content-info'>
- <div class="sdc-tile-content-info-item-name" data-tests-id="{{component.name | resourceName}}" sdc-smart-tooltip>{{component.name | resourceName}}</div>
+ <div class="sdc-tile-content-info-item-name" data-tests-id="{{component.name | resourceName}}" sdc-smart-tooltip>{{component.name | resourceName}}</div>
<div class="sdc-tile-content-info-version-info">
<div class="sdc-tile-content-info-version-info-text" data-tests-id="{{component.name}}Version">V {{component.version}}</div>
</div>
@@ -70,11 +70,11 @@
</div>
<div class='sdc-tile-footer'>
<div class='sdc-tile-footer-text'>{{component.getStatus(sdcMenu)}}</div>
- </div>
+ </div>
</div>
<!-- Tile new -->
-
+
</div>
</perfect-scrollbar>
diff --git a/catalog-ui/src/app/view-models/dashboard/dashboard.less b/catalog-ui/src/app/view-models/dashboard/dashboard.less
index 7993390769..02280cdb42 100644
--- a/catalog-ui/src/app/view-models/dashboard/dashboard.less
+++ b/catalog-ui/src/app/view-models/dashboard/dashboard.less
@@ -244,13 +244,6 @@
}
}
- &.PRODUCT {
- .b_14_m;
- &::before {
- content: 'P';
- }
- }
-
&.green {
.d_12;
&::before {
diff --git a/catalog-ui/src/app/view-models/dcae-app/dcae-app.less b/catalog-ui/src/app/view-models/dcae-app/dcae-app.less
index bc1404d7c4..71a3101412 100644
--- a/catalog-ui/src/app/view-models/dcae-app/dcae-app.less
+++ b/catalog-ui/src/app/view-models/dcae-app/dcae-app.less
@@ -48,28 +48,6 @@
//text-indent: -10px;
}
- /*Added by - Ikram */
- .i-sdc-product-input,
- .i-sdc-product-select {
- border: 1px solid @border_color_f;
- min-height: 30px;
- padding: 0;
- width: 100%;
- margin: 1px 0;
- background-color: #F2F2F2;
- outline: none;
-
- &:disabled {
- .disabled;
- }
- optgroup{
- color: @color_u;
- option{
- color: @color_b;
- }
- }
- }
-
.i-sdc-categories-list-item-icon {
display: inline-block;
float: right;
diff --git a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts
index 8b9acbcab7..ee2e94f934 100644
--- a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts
+++ b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts
@@ -23,6 +23,7 @@ import {
PROPERTY_TYPES, ModalsHandler, ValidationUtils, PROPERTY_VALUE_CONSTRAINTS, FormState, PROPERTY_DATA} from "app/utils";
import {DataTypesService} from "app/services";
import {PropertyModel, DataTypesMap, Component} from "app/models";
+import {ComponentInstance} from "../../../../models/componentsInstances/componentInstance";
export interface IEditPropertyModel {
property:PropertyModel;
@@ -50,6 +51,7 @@ interface IPropertyFormViewModelScope extends ng.IScope {
isTypeDataType:boolean;
maxLength:number;
isPropertyValueOwner:boolean;
+ isVnfConfiguration:boolean;
validateJson(json:string):boolean;
save(doNotCloseModal?:boolean):void;
@@ -192,6 +194,17 @@ export class PropertyFormViewModel {
this.$scope.isPropertyValueOwner = this.isPropertyValueOwner;
this.initEditPropertyModel();
+ //check if property of VnfConfiguration
+ this.$scope.isVnfConfiguration = false;
+ if(angular.isArray(this.component.componentInstances)) {
+ var componentPropertyOwner:ComponentInstance = this.component.componentInstances.find((ci:ComponentInstance) => {
+ return ci.uniqueId === this.property.resourceInstanceUniqueId;
+ });
+ if (componentPropertyOwner.componentName === 'vnfConfiguration') {
+ this.$scope.isVnfConfiguration = true;
+ }
+ }
+
this.$scope.nonPrimitiveTypes = _.filter(Object.keys(this.$scope.dataTypes), (type:string)=> {
return this.$scope.editPropertyModel.types.indexOf(type) == -1;
});
diff --git a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html
index f92d9a5ddc..743de298cd 100644
--- a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html
+++ b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html
@@ -142,7 +142,7 @@
schema-property="editPropertyModel.property.schema.property"
parent-form-obj="forms.editForm"
fields-prefix-name="currentPropertyIndex"
- read-only="editPropertyModel.property.readonly && !isPropertyValueOwner"
+ read-only="(editPropertyModel.property.readonly && !isPropertyValueOwner) || isVnfConfiguration"
default-value="{{getDefaultValue()}}"
max-length="maxLength"></type-map>
</div>
diff --git a/catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.html b/catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.html
new file mode 100644
index 0000000000..4b89701201
--- /dev/null
+++ b/catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.html
@@ -0,0 +1,18 @@
+<sdc-modal modal="modalIcons" type="classic" class="w-sdc-modal-icons" buttons="footerButtons" header="Choose Icon" show-close-button="true">
+
+ <div class="suggested-icons-container">
+ <div class ="suggested-icon-wrapper" data-ng-class="{'selected': selectedIcon == iconSrc}" data-ng-repeat="iconSrc in icons track by $index">
+ <div class="i-sdc-form-item-suggested-icon large hand {{iconSprite}} {{iconSrc}}"
+ data-tests-id="{{iconSrc}} iconBox"
+ data-ng-click="changeIcon(iconSrc)"
+ tooltips tooltip-content='{{iconSrc | translate}}'
+ >
+ </div>
+ </div>
+ </div>
+
+ <div class="w-sdc-modal-footer classic">
+ <button class="tlv-btn blue" data-tests-id="OK" data-ng-click="updateIcon()">OK</button>
+ <button class="tlv-btn grey" data-tests-id="Cancel" data-ng-click="cancel()" >Cancel</button>
+ </div>
+</sdc-modal>
diff --git a/catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.less b/catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.less
new file mode 100644
index 0000000000..660846c883
--- /dev/null
+++ b/catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.less
@@ -0,0 +1,33 @@
+.suggested-icons-container {
+ text-align: left;
+ width: 370px;
+ margin-bottom: 20px;
+ position: relative;
+
+ .suggested-icon-wrapper {
+ padding: 5px;
+ margin: 14px 0 14px 28px;
+ display: inline-block;
+ height: 71px;
+ width: 71px;
+
+ &.selected {
+ border: 2px solid @main_color_a;
+ border-radius: 35px;
+ display: inline-block;
+ line-height: 0px;
+ padding: 3px;
+ }
+
+ }
+ .i-sdc-form-item-suggested-icon {
+ opacity: 0.8;
+ &:hover{
+ opacity: 1;
+ }
+ }
+ .suggested-icon-wrapper:nth-child(4n+1) {
+ margin-left: 0;
+ }
+}
+
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/icons/icons-view-model.ts b/catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.ts
index c25bc4a1f1..eeadcd4e83 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/icons/icons-view-model.ts
+++ b/catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.ts
@@ -19,53 +19,60 @@
*/
/**
- * Created by obarda on 4/4/2016.
+ * Created by rc2122 on 7/4/2017.
*/
'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;
+import {Component} from "app/models";
+import {ResourceType} from "app/utils/constants";
+
+interface IIconsModalViewModelScope {
+ modalIcons:ng.ui.bootstrap.IModalServiceInstance;
+ icons:Array<string>,
+ iconSprite:string,
+ selectedIcon:string,
+ changeIcon(icon:string):void,
+ cancel():void
+ updateIcon():void;
}
-export class IconsViewModel {
-
+export class IconsModalViewModel {
static '$inject' = [
'$scope',
'Sdc.Services.AvailableIconsService',
'ComponentFactory',
- '$state'
+ '$state',
+ '$uibModalInstance',
+ 'component'
];
- constructor(private $scope:IIconsScope,
+ constructor(private $scope:IIconsModalViewModelScope,
private availableIconsService:AvailableIconsService,
private ComponentFactory:ComponentFactory,
- private $state:ng.ui.IStateService) {
-
-
+ private $state:ng.ui.IStateService,
+ private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance,
+ private component: Component) {
this.initScope();
- this.initIcons();
- this.$scope.updateSelectedMenuItem();
- this.$scope.iconSprite = this.$scope.component.iconSprite;
+ this._initIcons();
+ this.$scope.iconSprite = this.component.iconSprite;
+ this.$scope.selectedIcon = this.component.icon;
- if (this.$scope.component.isResource()) {
+ if (this.component.isResource()) {
this.initVendor();
}
+
}
- private initialIcon:string = this.$scope.component.icon;
- private initIcons = ():void => {
+ 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) {
+ if (this.component.categories && this.component.categories.length > 0) {
- _.forEach(this.$scope.component.categories, (category:IMainCategory):void => {
+ _.forEach(this.component.categories, (category:IMainCategory):void => {
if (category.icons) {
this.$scope.icons = this.$scope.icons.concat(category.icons);
}
@@ -79,26 +86,26 @@ export class IconsViewModel {
});
}
- if (this.$scope.component.isResource()) {
- let resourceType:string = this.$scope.component.getComponentSubType();
- if (resourceType === 'VL') {
+ if (this.component.isResource()) {
+ let resourceType:string = this.component.getComponentSubType();
+ if (resourceType === ResourceType.VL) {
this.$scope.icons = ['vl'];
}
- if (resourceType === 'CP') {
+ if (resourceType === ResourceType.CP) {
this.$scope.icons = ['cp'];
}
}
if (this.$scope.icons.length === 0) {
- this.$scope.icons = this.availableIconsService.getIcons(this.$scope.component.componentType);
+ this.$scope.icons = this.availableIconsService.getIcons(this.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();
+ let vendors:Array<string> = this.availableIconsService.getIcons(this.component.componentType).slice(5, 19);
+ let vendorName = this.component.vendorName.toLowerCase();
if ('at&t' === vendorName) {
vendorName = 'att';
}
@@ -115,17 +122,22 @@ export class IconsViewModel {
};
private initScope():void {
+ this.$scope.modalIcons = this.$uibModalInstance;
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);
+ this.$scope.changeIcon = (icon:string):void => {
+ this.$scope.selectedIcon = icon;
};
-
+ this.$scope.cancel = ():void => {
+ this.$uibModalInstance.dismiss();
+ };
+ this.$scope.updateIcon = ():void => {
+ let isDirty:boolean = this.component.icon != this.$scope.selectedIcon;
+ this.component.icon = this.$scope.selectedIcon;
+ this.$uibModalInstance.close(isDirty);
+ }
}
+
}
+
+
+
diff --git a/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor.less b/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor.less
index bc1404d7c4..71a3101412 100644
--- a/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor.less
+++ b/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor.less
@@ -48,28 +48,6 @@
//text-indent: -10px;
}
- /*Added by - Ikram */
- .i-sdc-product-input,
- .i-sdc-product-select {
- border: 1px solid @border_color_f;
- min-height: 30px;
- padding: 0;
- width: 100%;
- margin: 1px 0;
- background-color: #F2F2F2;
- outline: none;
-
- &:disabled {
- .disabled;
- }
- optgroup{
- color: @color_u;
- option{
- color: @color_b;
- }
- }
- }
-
.i-sdc-categories-list-item-icon {
display: inline-block;
float: right;
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.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%;
-}
diff --git a/catalog-ui/src/assets/languages/en_US.json b/catalog-ui/src/assets/languages/en_US.json
index 2957f8ac4a..85acea6d02 100644
--- a/catalog-ui/src/assets/languages/en_US.json
+++ b/catalog-ui/src/assets/languages/en_US.json
@@ -200,10 +200,8 @@
"=========== NEW RESOURCE SERVICE ===========": "",
"NEW_SERVICE_RESOURCE_WRAPPER_TAB_GENERAL_INFORMATION": "General Information",
- "NEW_SERVICE_RESOURCE_WRAPPER_TAB_ASSIGN_PRODUCT_HIERARCHY": "Assign Product Hierarchy",
"NEW_SERVICE_RESOURCE_WRAPPER_TAB_ADDITIONAL_INFO": "Additional Information",
"NEW_SERVICE_RESOURCE_WRAPPER_TAB_BILLING_AND_ORDERING": "Order Attributes & Rules",
- "NEW_SERVICE_RESOURCE_WRAPPER_TAB_PRODUCT_COMPOSITION": "Bill Attributes & Rules",
"NEW_SERVICE_RESOURCE_SAVE_BUTTON": "Save",
"NEW_SERVICE_RESOURCE_DONE_BUTTON": "Done",
@@ -226,9 +224,7 @@
"NEW_SERVICE_RESOURCE_ERROR_SERVICE_ICON": "Icon required.",
"NEW_SERVICE_RESOURCE_ERROR_RESOURCE_ICON": "Icon required.",
"NEW_SERVICE_RESOURCE_ERROR_RESOURCE_NAME_REQUIRED": "Name is required.",
- "NEW_SERVICE_RESOURCE_ERROR_PRODUCT_NAME_REQUIRED": "Name is required.",
"NEW_SERVICE_RESOURCE_ERROR_RESOURCE_DESCRIPTION_REQUIRED": "Description is required.",
- "NEW_SERVICE_RESOURCE_ERROR_PRODUCT_DESCRIPTION_REQUIRED": "Description is required.",
"NEW_SERVICE_RESOURCE_ERROR_VENDOR_NAME_REQUIRED": "Vendor name is required.",
"NEW_SERVICE_RESOURCE_ERROR_VENDOR_RELEASE_REQUIRED": "Vendor Release is required.",
"NEW_SERVICE_RESOURCE_ERROR_TEMPLATE_REQUIRED": "Template is required.",
@@ -238,7 +234,6 @@
"NEW_SERVICE_RESOURCE_ERROR_TOSCA_FILE_REQUIRED": "Tosca file is required.",
"NEW_SERVICE_RESOURCE_ERROR_VALID_CSAR_EXTENSIONS_TITLE": "Invalid csar file",
"NEW_SERVICE_RESOURCE_ERROR_VALID_CSAR_EXTENSIONS": "File extension should be {{extensions}}.",
- "NEW_PRODUCT_NO_CATEGORIES_TO_DISPLAY": "Your product is not assigned to any group yet. <br> To select/find a group, begin typing above and select group to add",
"=========== SUGGESTED ICONS TOOLTIP ===========": "",
"call_controll": "Call Control",
diff --git a/catalog-ui/src/assets/styles/app.less b/catalog-ui/src/assets/styles/app.less
index 1ce1801d9b..13d88a388e 100644
--- a/catalog-ui/src/assets/styles/app.less
+++ b/catalog-ui/src/assets/styles/app.less
@@ -11,7 +11,6 @@
@import 'sprite-old.less';
@import 'sprite.less';
-@import 'sprite-product-icons.less';
@import 'sprite-resource-icons.less';
@import 'sprite-services-icons.less';
@@ -90,6 +89,7 @@
@import '../../app/view-models/modals/message-modal/message-client-modal/client-message-modal.less';
@import '../../app/view-models/modals/message-modal/message-server-modal/server-message-modal.less';
@import '../../app/view-models/modals/onboarding-modal/onboarding-modal.less';
+@import '../../app/view-models/modals/icons-modal/icons-modal-view.less';
@import '../../app/view-models/onboard-vendor/onboard-vendor.less';
@import '../../app/view-models/support/support.less';
@import '../../app/view-models/tabs/general-tab.less';
@@ -107,12 +107,10 @@
@import '../../app/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal.less';
@import '../../app/view-models/workspace/tabs/distribution/distribution.less';
@import '../../app/view-models/workspace/tabs/general/general.less';
-@import '../../app/view-models/workspace/tabs/icons/icons.less';
@import '../../app/view-models/workspace/tabs/information-artifacts/information-artifacts.less';
@import '../../app/view-models/workspace/tabs/inputs/inputs.less';
@import '../../app/view-models/workspace/tabs/inputs/resource-input/resource-inputs.less';
@import '../../app/view-models/workspace/tabs/inputs/service-input/service-inputs.less';
-@import '../../app/view-models/workspace/tabs/product-hierarchy/product-hierarchy.less';
@import '../../app/view-models/workspace/tabs/properties/properties.less';
@import '../../app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities.less';
@import '../../app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts.less';
diff --git a/catalog-ui/src/assets/styles/images/resource-icons/vnfconfiguration.png b/catalog-ui/src/assets/styles/images/resource-icons/vnfconfiguration.png
new file mode 100644
index 0000000000..66c64c3fe6
--- /dev/null
+++ b/catalog-ui/src/assets/styles/images/resource-icons/vnfconfiguration.png
Binary files differ
diff --git a/catalog-ui/src/assets/styles/images/sprites/sprite-global.png b/catalog-ui/src/assets/styles/images/sprites/sprite-global.png
index 7a795c7a91..962478fed3 100644
--- a/catalog-ui/src/assets/styles/images/sprites/sprite-global.png
+++ b/catalog-ui/src/assets/styles/images/sprites/sprite-global.png
Binary files differ
diff --git a/catalog-ui/src/assets/styles/images/sprites/sprite-product-icons.png b/catalog-ui/src/assets/styles/images/sprites/sprite-product-icons.png
deleted file mode 100644
index e85467a09c..0000000000
--- a/catalog-ui/src/assets/styles/images/sprites/sprite-product-icons.png
+++ /dev/null
Binary files differ
diff --git a/catalog-ui/src/assets/styles/images/sprites/sprite-resource-icons.png b/catalog-ui/src/assets/styles/images/sprites/sprite-resource-icons.png
index 7d520a8628..27e96f3ba2 100644
--- a/catalog-ui/src/assets/styles/images/sprites/sprite-resource-icons.png
+++ b/catalog-ui/src/assets/styles/images/sprites/sprite-resource-icons.png
Binary files differ
diff --git a/catalog-ui/src/assets/styles/mixins.less b/catalog-ui/src/assets/styles/mixins.less
index 4a0356d810..fbc5f83df1 100644
--- a/catalog-ui/src/assets/styles/mixins.less
+++ b/catalog-ui/src/assets/styles/mixins.less
@@ -34,6 +34,10 @@
font-family: @font-opensans-light;
font-size: 36px;
}
+ ._28 {
+ font-family: @font-opensans-light;
+ font-size: 28px;
+ }
._24 {
font-family: @font-opensans-light;
font-size: 24px;
diff --git a/catalog-ui/src/assets/styles/modal.less b/catalog-ui/src/assets/styles/modal.less
index eb9de92f80..3307bfc56a 100644
--- a/catalog-ui/src/assets/styles/modal.less
+++ b/catalog-ui/src/assets/styles/modal.less
@@ -33,6 +33,10 @@ MODAL SIZES
width: 552px;
}
+.modal-dialog.modal-sdc-auto {
+ width: auto;
+}
+
.modal-dialog.modal-sdc-xsm {
width: 432px;
}
@@ -324,7 +328,8 @@ NEW DESIGN MODAL
.modal-sdc-l,
.modal-sdc-md,
.modal-sdc-sm,
-.modal-sdc-xsm {
+.modal-sdc-xsm,
+.modal-sdc-auto {
.w-sdc-classic-top-line-modal {
padding: 0 30px;
diff --git a/catalog-ui/src/assets/styles/sprite-product-icons.less b/catalog-ui/src/assets/styles/sprite-product-icons.less
deleted file mode 100644
index 3485ec89a3..0000000000
--- a/catalog-ui/src/assets/styles/sprite-product-icons.less
+++ /dev/null
@@ -1,71 +0,0 @@
-.sprite-product-icons {
- background-image: url('images/sprites/sprite-product-icons.png');
- display: inline-block;
-}
-
-.sprite-product-icons.disable { opacity:0.5;}
-
-.sprite-product-icons.setting { background-position: -291px -102px; width: 61px; height: 67px;}
-.sprite-product-icons.setting.small { background-position: -217px -142px; width: 29px; height: 28px;}
-.sprite-product-icons.setting.medium { background-position: -148px -130px; width: 41px; height: 40px;}
-.sprite-product-icons.setting.large { background-position: -77px -110px; width: 60px; height: 60px;}
-
-.sprite-product-icons.cloud { background-position: -290px -215px; width: 64px; height: 43px;}
-.sprite-product-icons.cloud.small { background-position: -217px -232px; width: 29px; height: 28px;}
-.sprite-product-icons.cloud.medium { background-position: -148px -220px; width: 41px; height: 40px;}
-.sprite-product-icons.cloud.large { background-position: -77px -200px; width: 60px; height: 60px;}
-
-.sprite-product-icons.security { background-position: -289px -293px; width: 50px; height: 57px;}
-.sprite-product-icons.security.small { background-position: -217px -321px; width: 29px; height: 28px;}
-.sprite-product-icons.security.medium { background-position: -148px -310px; width: 41px; height: 40px;}
-.sprite-product-icons.security.large { background-position: -77px -290px; width: 60px; height: 60px;}
-
-.sprite-product-icons.network { background-position: -290px -383px; width: 56px; height: 57px;}
-.sprite-product-icons.network.small { background-position: -217px -411px; width: 29px; height: 29px;}
-.sprite-product-icons.network.medium { background-position: -148px -399px; width: 41px; height: 41px;}
-.sprite-product-icons.network.large { background-position: -77px -380px; width: 60px; height: 60px;}
-
-.sprite-product-icons.orphan { background-position: -290px -478px; width: 52px; height: 52px;}
-.sprite-product-icons.orphan.small { background-position: -217px -500px; width: 29px; height: 29px;}
-.sprite-product-icons.orphan.medium { background-position: -148px -488px; width: 41px; height: 41px;}
-.sprite-product-icons.orphan.large { background-position: -77px -470px; width: 60px; height: 60px;}
-
-.sprite-product-icons.defaulticon { background-position: -290px -478px; width: 52px; height: 52px;}
-.sprite-product-icons.defaulticon.small { background-position: -217px -500px; width: 29px; height: 29px;}
-.sprite-product-icons.defaulticon.medium { background-position: -148px -488px; width: 41px; height: 41px;}
-.sprite-product-icons.defaulticon.large { background-position: -77px -470px; width: 60px; height: 60px;}
-
-.sprite-product-icons.vfw { background-position: -289px -548px; width: 73px; height: 73px;}
-.sprite-product-icons.vfw.small { background-position: -217px -591px; width: 29px; height: 29px;}
-.sprite-product-icons.vfw.medium { background-position: -148px -580px; width: 41px; height: 41px;}
-.sprite-product-icons.vfw.large { background-position: -77px -560px; width: 60px; height: 61px;}
-
-.sprite-product-icons.wanx { background-position: -290px -664px; width: 59px; height: 47px;}
-.sprite-product-icons.wanx.small { background-position: -217px -681px; width: 30px; height: 30px;}
-.sprite-product-icons.wanx.medium { background-position: -148px -670px; width: 41px; height: 41px;}
-.sprite-product-icons.wanx.large { background-position: -77px -651px; width: 60px; height: 60px;}
-
-.sprite-product-icons.vrouter { background-position: -289px -758px; width: 69px; height: 43px;}
-.sprite-product-icons.vrouter.small { background-position: -217px -772px; width: 29px; height: 29px;}
-.sprite-product-icons.vrouter.medium { background-position: -148px -760px; width: 41px; height: 41px;}
-.sprite-product-icons.vrouter.large { background-position: -77px -741px; width: 60px; height: 60px;}
-
-.sprite-product-icons.ucpe { background-position: -289px -832px; width: 59px; height: 60px;}
-.sprite-product-icons.ucpe.small { background-position: -217px -862px; width: 28px; height: 29px;}
-.sprite-product-icons.ucpe.medium { background-position: -148px -849px; width: 41px; height: 41px;}
-.sprite-product-icons.ucpe.large { background-position: -77px -831px; width: 60px; height: 61px;}
-
-.sprite-product-icons.mobility { background-position: -288px -919px; width: 64px; height: 62px;}
-.sprite-product-icons.mobility.small { background-position: -216px -952px; width: 29px; height: 29px;}
-.sprite-product-icons.mobility.medium { background-position: -147px -940px; width: 41px; height: 41px;}
-.sprite-product-icons.mobility.large { background-position: -76px -921px; width: 60px; height: 60px;}
-
-.sprite-product-icons.wanx_customer_managed { background-position: -290px -1024px; width: 58px; height: 62px;}
-.sprite-product-icons.wanx.small_customer_managed { background-position: -217px -1041px; width: 30px; height: 38px;}
-.sprite-product-icons.wanx.medium_customer_managed { background-position: -148px -1030px; width: 42px; height: 47px;}
-.sprite-product-icons.wanx.large_customer_managed { background-position: -77px -1011px; width: 61px; height: 66px;}
-
-.sprite-product-icons.wanx_attr_managed { background-position: -290px -1114px; width: 59px; height: 62px;}
-.sprite-product-icons.wanx.small_att_managed { background-position: -218px -1131px; width: 31px; height: 36px;}
-.sprite-product-icons.wanx.medium_att_managed { background-position: -149px -1120px; width: 42px; height: 47px;}
-.sprite-product-icons.wanx.large_att_managed { background-position: -77px -1101px; width: 60px; height: 67px;}
diff --git a/catalog-ui/src/assets/styles/sprite-resource-icons.less b/catalog-ui/src/assets/styles/sprite-resource-icons.less
index 153e8c042c..2c19ee3291 100644
--- a/catalog-ui/src/assets/styles/sprite-resource-icons.less
+++ b/catalog-ui/src/assets/styles/sprite-resource-icons.less
@@ -266,3 +266,4 @@
.sprite-resource-icons.allotted_resource.medium { background-position: -141px -4898px; width: 41px; height: 41px;}
.sprite-resource-icons.allotted_resource.large { background-position: -70px -4879px; width: 60px; height: 60px;}
+.sprite-resource-icons.vnfconfiguration.large { background-position: -70px -4959px; width: 60px; height: 60px;}
diff --git a/catalog-ui/src/assets/styles/sprite.less b/catalog-ui/src/assets/styles/sprite.less
index 0c0f538388..2076744854 100644
--- a/catalog-ui/src/assets/styles/sprite.less
+++ b/catalog-ui/src/assets/styles/sprite.less
@@ -238,6 +238,8 @@
.round-expand-icon:hover { background-position: -100px -1188px; width: 15px; height: 15px; }
.round-expand-icon.open { background-position: -50px -1216px; width: 15px; height: 15px; }
.round-expand-icon.open:hover { background-position: -100px -1216px; width: 15px; height: 15px; }
+.update-component-icon { background-position: -140px -1183px; width: 20px; height: 20px;}
+.update-component-icon:hover { background-position: -170px -1183px; width: 20px; height: 20px;}
/*
.sprite-new.expand-asset-icon { background-position: -740px -590px; width: 40px; height: 40px; }
.sprite-new.view-info-icon { background-position: -739px -621px; width: 40px; height: 40px; }
diff --git a/catalog-ui/src/assets/styles/variables-old.less b/catalog-ui/src/assets/styles/variables-old.less
index 57f3fc24b8..d16252dab4 100644
--- a/catalog-ui/src/assets/styles/variables-old.less
+++ b/catalog-ui/src/assets/styles/variables-old.less
@@ -2,7 +2,7 @@
@images: "images";
/* Colors */
-@color_a: #3b7b9b; // product category
+@color_a: #3b7b9b;
@color_b: #666666;
@color_c: #ffffff;
@color_d: #1d9a95; // dashboard service (S at the top left of the card)
diff --git a/catalog-ui/src/assets/styles/variables.less b/catalog-ui/src/assets/styles/variables.less
index 3c23bdbe5e..163737466e 100644
--- a/catalog-ui/src/assets/styles/variables.less
+++ b/catalog-ui/src/assets/styles/variables.less
@@ -47,5 +47,6 @@
@top_nav_height: 50px;
@top_nav_admin_height: 44px;
@action_nav_height: 53px;
+@tab_title: 110px;
@footer_height: 89px;
@border_color_view-mode: #ededed;