diff options
| author |   vasraz <vasyl.razinkov@est.tech> | 2023-01-23 20:10:43 +0000 |
|---|---|---|
| committer | Vasyl Razinkov <vasyl.razinkov@est.tech> | 2023-01-25 19:34:46 +0000 |
| commit | 6e12c8ad59f11426e49f81c4a7032480b126bfbc (patch) | |
| tree | 95ed2d948183f08afae133d16a6b0275f41f1058 /catalog-ui/src | |
| parent | bd98d1022cac4cd0aaa6827b8eb4b7772b2fc033 (diff) | |
Implement hiding mechanism
Signed-off-by: Vasyl Razinkov <vasyl.razinkov@est.tech>
Change-Id: I799af15e31b724ca394eebe435223c03186fb6d3
Issue-ID: SDC-4344
Diffstat (limited to 'catalog-ui/src')
5 files changed, 944 insertions, 953 deletions
diff --git a/catalog-ui/src/app/models/category.ts b/catalog-ui/src/app/models/category.ts index a6445cafdd..dc7cf564c1 100644 --- a/catalog-ui/src/app/models/category.ts +++ b/catalog-ui/src/app/models/category.ts @@ -20,40 +20,39 @@ 'use strict'; - - export interface ICategoryBase { - //server properties - name:string; - displayName:string; - normalizedName:string; - uniqueId:string; - models:Array<string>; - icons:Array<string>; + // server properties + name: string; + displayName: string; + normalizedName: string; + uniqueId: string; + models: Array<string>; + icons: Array<string>; metadataKeys: IMetadataKey[]; - //custom properties - filterTerms:string; - isDisabled:boolean; - filteredGroup:Array<IGroup>; + // custom properties + filterTerms: string; + isDisabled: boolean; + filteredGroup: Array<IGroup>; } export interface IMainCategory extends ICategoryBase { - subcategories:Array<ISubCategory>; - useServiceSubstitutionForNestedServices:boolean; + subcategories: Array<ISubCategory>; + useServiceSubstitutionForNestedServices: boolean; + notApplicableMetadataKeys: Array<string>; } export interface ISubCategory extends ICategoryBase { - groupings:Array<ICategoryBase>; + groupings: Array<ICategoryBase>; } export interface IGroup extends ICategoryBase { } export interface IMetadataKey { - name:string; - displayName:string; - mandatory:boolean; - validValues: string[]; - defaultValue: string; + name: string; + displayName: string; + mandatory: boolean; + validValues: string[]; + defaultValue: string; } diff --git a/catalog-ui/src/app/models/components/component.ts b/catalog-ui/src/app/models/components/component.ts index bcebf3b9fa..a2f5a5ed3f 100644 --- a/catalog-ui/src/app/models/components/component.ts +++ b/catalog-ui/src/app/models/components/component.ts @@ -573,7 +573,6 @@ export abstract class Component implements IComponent { this.derivedList = componentMetadata.derivedList; this.normalizedName = componentMetadata.normalizedName; this.systemName = componentMetadata.systemName; - this.categories = componentMetadata.categories; this.isArchived = componentMetadata.isArchived; this.vspArchived = componentMetadata.vspArchived; this.componentMetadata = componentMetadata; diff --git a/catalog-ui/src/app/utils/constants.ts b/catalog-ui/src/app/utils/constants.ts index a215a87c0e..087ecaf21c 100644 --- a/catalog-ui/src/app/utils/constants.ts +++ b/catalog-ui/src/app/utils/constants.ts @@ -27,432 +27,432 @@ export let DEFAULT_ICON = 'defaulticon'; export let CP_END_POINT = 'CpEndPoint'; export let CHANGE_COMPONENT_CSAR_VERSION_FLAG = 'changeComponentCsarVersion'; export let PREVIOUS_CSAR_COMPONENT = 'previousCsarComponent' -export let CATEGORY_SERVICE_METADATA_KEYS = ["Naming Policy","Service Type","Service Function","Service Role"]; +export let CATEGORY_SERVICE_METADATA_KEYS = ["Naming Policy", "Service Type", "Service Function", "Service Role"]; export let DEFAULT_MODEL_NAME = "SDC AID"; export class GeneralStatus { - static OK = 'OK'; - static GENERAL_ERROR = 'GENERAL_ERROR'; + static OK = 'OK'; + static GENERAL_ERROR = 'GENERAL_ERROR'; } export class ComponentType { - static SERVICE = 'SERVICE'; - static RESOURCE = 'RESOURCE'; - static RESOURCE_INSTANCE = 'RESOURCE_INSTANCE'; - static SERVICE_PROXY = 'ServiceProxy' - static SERVICE_SUBSTITUTION = 'ServiceSubstitution' + static SERVICE = 'SERVICE'; + static RESOURCE = 'RESOURCE'; + static RESOURCE_INSTANCE = 'RESOURCE_INSTANCE'; + static SERVICE_PROXY = 'ServiceProxy' + static SERVICE_SUBSTITUTION = 'ServiceSubstitution' } export class ToscaType { - static DATATYPE = 'DATATYPE'; + static DATATYPE = 'DATATYPE'; } export class Icon { - static DEFAULT_ICON = 'defaulticon'; - static DATATYPE_ICON = 'securityrules'; - static SERVICE_TYPE_60 = 'services_60'; - static COLOR_LIGHTBLUE = 'lightBlue' - static COLOR_WHITE = 'white'; - static COLOR_PURPLE = 'purple'; - static RESOURCE_TYPE_24 = 'resources_24'; - static RESOURCE_TYPE_60 = 'resources_60'; - static SHAPE_CIRCLE = 'circle'; - static SIZE_MEDIUM = 'medium'; - static SIZE_X_LARGE = 'x_large'; - static ERROR = 'error'; + static DEFAULT_ICON = 'defaulticon'; + static DATATYPE_ICON = 'securityrules'; + static SERVICE_TYPE_60 = 'services_60'; + static COLOR_LIGHTBLUE = 'lightBlue' + static COLOR_WHITE = 'white'; + static COLOR_PURPLE = 'purple'; + static RESOURCE_TYPE_24 = 'resources_24'; + static RESOURCE_TYPE_60 = 'resources_60'; + static SHAPE_CIRCLE = 'circle'; + static SIZE_MEDIUM = 'medium'; + static SIZE_X_LARGE = 'x_large'; + static ERROR = 'error'; } export class ServerTypeUrl { - static RESOURCES = 'resources/'; - static SERVICES = 'services/'; - - public static toServerTypeUrl(componentType: ComponentType): string { - if (componentType == ComponentType.SERVICE) { - return ServerTypeUrl.SERVICES.slice(0, -1); - } else if (componentType == ComponentType.RESOURCE) { - return ServerTypeUrl.RESOURCES.slice(0, -1); - } else { - return undefined; + static RESOURCES = 'resources/'; + static SERVICES = 'services/'; + + public static toServerTypeUrl(componentType: ComponentType): string { + if (componentType == ComponentType.SERVICE) { + return ServerTypeUrl.SERVICES.slice(0, -1); + } else if (componentType == ComponentType.RESOURCE) { + return ServerTypeUrl.RESOURCES.slice(0, -1); + } else { + return undefined; + } } - } } export class ResourceType { - static VF = 'VF'; - static VL = 'VL'; - static CP = 'CP'; - static VFC = 'VFC'; - static VFCMT = 'VFCMT'; - static PNF = 'PNF'; - static CVFC = 'CVFC'; - static CONFIGURATION = 'Configuration'; - static CR = 'CR'; + static VF = 'VF'; + static VL = 'VL'; + static CP = 'CP'; + static VFC = 'VFC'; + static VFCMT = 'VFCMT'; + static PNF = 'PNF'; + static CVFC = 'CVFC'; + static CONFIGURATION = 'Configuration'; + static CR = 'CR'; } export class SdcElementType { - static GROUP = 'GROUP'; - static POLICY = 'POLICY'; - static SERVICE_PROXY = 'ServiceProxy' + static GROUP = 'GROUP'; + static POLICY = 'POLICY'; + static SERVICE_PROXY = 'ServiceProxy' } export class ComponentState { - static CERTIFICATION_IN_PROGRESS = 'CERTIFICATION_IN_PROGRESS'; - static CERTIFIED = 'CERTIFIED'; - static NOT_CERTIFIED_CHECKOUT = 'NOT_CERTIFIED_CHECKOUT'; - static NOT_CERTIFIED_CHECKIN = 'NOT_CERTIFIED_CHECKIN'; - static READY_FOR_CERTIFICATION = 'READY_FOR_CERTIFICATION'; + static CERTIFICATION_IN_PROGRESS = 'CERTIFICATION_IN_PROGRESS'; + static CERTIFIED = 'CERTIFIED'; + static NOT_CERTIFIED_CHECKOUT = 'NOT_CERTIFIED_CHECKOUT'; + static NOT_CERTIFIED_CHECKIN = 'NOT_CERTIFIED_CHECKIN'; + static READY_FOR_CERTIFICATION = 'READY_FOR_CERTIFICATION'; } export class DistributionStatus { - DISTRIBUTION_NOT_APPROVED = 'DISTRIBUTION_NOT_APPROVED'; - DISTRIBUTION_APPROVED = 'DISTRIBUTION_APPROVED'; - DISTRIBUTED = 'DISTRIBUTED'; - DISTRIBUTION_REJECTED = 'DISTRIBUTION_REJECTED'; + DISTRIBUTION_NOT_APPROVED = 'DISTRIBUTION_NOT_APPROVED'; + DISTRIBUTION_APPROVED = 'DISTRIBUTION_APPROVED'; + DISTRIBUTED = 'DISTRIBUTED'; + DISTRIBUTION_REJECTED = 'DISTRIBUTION_REJECTED'; } export class ArtifactGroupType { - static DEPLOYMENT = "DEPLOYMENT"; - static INFORMATION = "INFORMATIONAL"; - static SERVICE_API = "SERVICE_API"; - static TOSCA = "TOSCA"; + static DEPLOYMENT = "DEPLOYMENT"; + static INFORMATION = "INFORMATIONAL"; + static SERVICE_API = "SERVICE_API"; + static TOSCA = "TOSCA"; } export class ArtifactType { - static DEPLOYMENT = "DEPLOYMENT"; - static INFORMATION = "INFORMATIONAL"; - static SERVICE_API = "SERVICE_API"; - static HEAT_ENV = "HEAT_ENV"; - static HEAT = "HEAT"; - static HEAT_VOL = "HEAT_VOL"; - static HEAT_NET = "HEAT_NET"; - static VF_LICENSE = "VF_LICENSE"; - static PM_DICTIONARY = "PM_DICTIONARY"; - static VENDOR_LICENSE = "VENDOR_LICENSE"; - static THIRD_PARTY_RESERVED_TYPES = { - WORKFLOW: "WORKFLOW", - NETWORK_CALL_FLOW: "NETWORK_CALL_FLOW", - AAI_SERVICE_MODEL: "AAI_SERVICE_MODEL", - AAI_VF_MODEL: "AAI_VF_MODEL", - AAI_VF_MODULE_MODEL: "AAI_VF_MODULE_MODEL", - AAI_VF_INSTANCE_MODEL: "AAI_VF_INSTANCE_MODEL" - }; - static TOSCA = {TOSCA_TEMPLATE: "TOSCA_TEMPLATE", TOSCA_CSAR: "TOSCA_CSAR"}; - static VES_EVENTS = "VES_EVENTS"; + static DEPLOYMENT = "DEPLOYMENT"; + static INFORMATION = "INFORMATIONAL"; + static SERVICE_API = "SERVICE_API"; + static HEAT_ENV = "HEAT_ENV"; + static HEAT = "HEAT"; + static HEAT_VOL = "HEAT_VOL"; + static HEAT_NET = "HEAT_NET"; + static VF_LICENSE = "VF_LICENSE"; + static PM_DICTIONARY = "PM_DICTIONARY"; + static VENDOR_LICENSE = "VENDOR_LICENSE"; + static THIRD_PARTY_RESERVED_TYPES = { + WORKFLOW: "WORKFLOW", + NETWORK_CALL_FLOW: "NETWORK_CALL_FLOW", + AAI_SERVICE_MODEL: "AAI_SERVICE_MODEL", + AAI_VF_MODEL: "AAI_VF_MODEL", + AAI_VF_MODULE_MODEL: "AAI_VF_MODULE_MODEL", + AAI_VF_INSTANCE_MODEL: "AAI_VF_INSTANCE_MODEL" + }; + static TOSCA = {TOSCA_TEMPLATE: "TOSCA_TEMPLATE", TOSCA_CSAR: "TOSCA_CSAR"}; + static VES_EVENTS = "VES_EVENTS"; } export class SEVERITY { - public static DEBUG = 'DEBUG'; - public static INFO = 'INFO'; - public static WARNING = 'WARNING'; - public static ERROR = 'ERROR'; + public static DEBUG = 'DEBUG'; + public static INFO = 'INFO'; + public static WARNING = 'WARNING'; + public static ERROR = 'ERROR'; } export class PROPERTY_TYPES { - public static STRING = 'string'; - public static INTEGER = 'integer'; - public static TIMESTAMP = 'timestamp'; - public static FLOAT = 'float'; - public static BOOLEAN = 'boolean'; - public static JSON = 'json'; - public static RANGE = 'range'; - public static MAP = 'map'; - public static LIST = 'list'; - public static SCALAR_BITRATE = 'scalar-unit.bitrate'; - public static SCALAR_FREQUENCY = 'scalar-unit.frequency'; - public static SCALAR_SIZE = 'scalar-unit.size'; - public static SCALAR_TIME = 'scalar-unit.time'; + public static STRING = 'string'; + public static INTEGER = 'integer'; + public static TIMESTAMP = 'timestamp'; + public static FLOAT = 'float'; + public static BOOLEAN = 'boolean'; + public static JSON = 'json'; + public static RANGE = 'range'; + public static MAP = 'map'; + public static LIST = 'list'; + public static SCALAR_BITRATE = 'scalar-unit.bitrate'; + public static SCALAR_FREQUENCY = 'scalar-unit.frequency'; + public static SCALAR_SIZE = 'scalar-unit.size'; + public static SCALAR_TIME = 'scalar-unit.time'; } export class SOURCES { - public static A_AND_AI = 'A&AI'; - public static ORDER = 'Order'; - public static RUNTIME = 'Runtime'; + public static A_AND_AI = 'A&AI'; + public static ORDER = 'Order'; + public static RUNTIME = 'Runtime'; } export class PROPERTY_DATA { - public static TYPES = [PROPERTY_TYPES.STRING, PROPERTY_TYPES.INTEGER, PROPERTY_TYPES.TIMESTAMP, PROPERTY_TYPES.FLOAT, PROPERTY_TYPES.BOOLEAN, PROPERTY_TYPES.JSON, PROPERTY_TYPES.SCALAR_BITRATE, PROPERTY_TYPES.SCALAR_FREQUENCY, PROPERTY_TYPES.SCALAR_SIZE, PROPERTY_TYPES.SCALAR_TIME, PROPERTY_TYPES.LIST, PROPERTY_TYPES.MAP, PROPERTY_TYPES.RANGE]; - public static SIMPLE_TYPES = [PROPERTY_TYPES.STRING, PROPERTY_TYPES.INTEGER, PROPERTY_TYPES.TIMESTAMP, PROPERTY_TYPES.FLOAT, PROPERTY_TYPES.BOOLEAN, PROPERTY_TYPES.JSON, PROPERTY_TYPES.SCALAR_BITRATE, PROPERTY_TYPES.SCALAR_FREQUENCY, PROPERTY_TYPES.SCALAR_SIZE, PROPERTY_TYPES.SCALAR_TIME]; - public static SIMPLE_TYPES_COMPARABLE = [PROPERTY_TYPES.STRING, PROPERTY_TYPES.INTEGER, PROPERTY_TYPES.FLOAT]; - public static SCHEMA_TYPES = [PROPERTY_TYPES.LIST, PROPERTY_TYPES.MAP]; - public static SCALAR_TYPES = [PROPERTY_TYPES.SCALAR_BITRATE, PROPERTY_TYPES.SCALAR_FREQUENCY, PROPERTY_TYPES.SCALAR_SIZE, PROPERTY_TYPES.SCALAR_TIME]; - public static ROOT_DATA_TYPE = "tosca.datatypes.Root"; - public static OPENECOMP_ROOT = "org.openecomp.datatypes.Root"; - public static SUPPLEMENTAL_DATA = "supplemental_data"; - public static SOURCES = [SOURCES.A_AND_AI, SOURCES.ORDER, SOURCES.RUNTIME]; - public static COMPARABLE_TYPES = [PROPERTY_TYPES.STRING, PROPERTY_TYPES.INTEGER, PROPERTY_TYPES.FLOAT, PROPERTY_TYPES.TIMESTAMP, PROPERTY_TYPES.SCALAR_BITRATE, PROPERTY_TYPES.SCALAR_FREQUENCY, PROPERTY_TYPES.SCALAR_SIZE, PROPERTY_TYPES.SCALAR_TIME]; + public static TYPES = [PROPERTY_TYPES.STRING, PROPERTY_TYPES.INTEGER, PROPERTY_TYPES.TIMESTAMP, PROPERTY_TYPES.FLOAT, PROPERTY_TYPES.BOOLEAN, PROPERTY_TYPES.JSON, PROPERTY_TYPES.SCALAR_BITRATE, PROPERTY_TYPES.SCALAR_FREQUENCY, PROPERTY_TYPES.SCALAR_SIZE, PROPERTY_TYPES.SCALAR_TIME, PROPERTY_TYPES.LIST, PROPERTY_TYPES.MAP, PROPERTY_TYPES.RANGE]; + public static SIMPLE_TYPES = [PROPERTY_TYPES.STRING, PROPERTY_TYPES.INTEGER, PROPERTY_TYPES.TIMESTAMP, PROPERTY_TYPES.FLOAT, PROPERTY_TYPES.BOOLEAN, PROPERTY_TYPES.JSON, PROPERTY_TYPES.SCALAR_BITRATE, PROPERTY_TYPES.SCALAR_FREQUENCY, PROPERTY_TYPES.SCALAR_SIZE, PROPERTY_TYPES.SCALAR_TIME]; + public static SIMPLE_TYPES_COMPARABLE = [PROPERTY_TYPES.STRING, PROPERTY_TYPES.INTEGER, PROPERTY_TYPES.FLOAT]; + public static SCHEMA_TYPES = [PROPERTY_TYPES.LIST, PROPERTY_TYPES.MAP]; + public static SCALAR_TYPES = [PROPERTY_TYPES.SCALAR_BITRATE, PROPERTY_TYPES.SCALAR_FREQUENCY, PROPERTY_TYPES.SCALAR_SIZE, PROPERTY_TYPES.SCALAR_TIME]; + public static ROOT_DATA_TYPE = "tosca.datatypes.Root"; + public static OPENECOMP_ROOT = "org.openecomp.datatypes.Root"; + public static SUPPLEMENTAL_DATA = "supplemental_data"; + public static SOURCES = [SOURCES.A_AND_AI, SOURCES.ORDER, SOURCES.RUNTIME]; + public static COMPARABLE_TYPES = [PROPERTY_TYPES.STRING, PROPERTY_TYPES.INTEGER, PROPERTY_TYPES.FLOAT, PROPERTY_TYPES.TIMESTAMP, PROPERTY_TYPES.SCALAR_BITRATE, PROPERTY_TYPES.SCALAR_FREQUENCY, PROPERTY_TYPES.SCALAR_SIZE, PROPERTY_TYPES.SCALAR_TIME]; } export class PROPERTY_VALUE_CONSTRAINTS { - public static MAX_LENGTH = 2500; - public static JSON_MAX_LENGTH = 4096; - public static NAME_MAX_LENGTH = 100; + public static MAX_LENGTH = 2500; + public static JSON_MAX_LENGTH = 4096; + public static NAME_MAX_LENGTH = 100; } export class Role { - public static ADMIN = 'ADMIN'; - public static DESIGNER = 'DESIGNER'; - public static TESTER = 'TESTER'; - public static OPS = 'OPS'; - public static GOVERNOR = 'GOVERNOR'; + public static ADMIN = 'ADMIN'; + public static DESIGNER = 'DESIGNER'; + public static TESTER = 'TESTER'; + public static OPS = 'OPS'; + public static GOVERNOR = 'GOVERNOR'; } export enum FormState { - CREATE, - UPDATE, - IMPORT, - VIEW + CREATE, + UPDATE, + IMPORT, + VIEW } export class instantiationType { - public static MACRO = 'Macro'; - public static A_LA_CARTE = 'A-la-carte'; + public static MACRO = 'Macro'; + public static A_LA_CARTE = 'A-la-carte'; } export class WorkspaceMode { - public static CREATE = 'create'; - public static EDIT = 'edit'; - public static IMPORT = 'import'; - public static VIEW = 'view'; + public static CREATE = 'create'; + public static EDIT = 'edit'; + public static IMPORT = 'import'; + public static VIEW = 'view'; } export class ImagesUrl { - public static RESOURCE_ICONS = '/assets/styles/images/resource-icons/'; - public static SERVICE_ICONS = '/assets/styles/images/service-icons/'; - public static SERVICE_PROXY_ICONS = '/assets/styles/images/service-proxy-icons/'; - public static SELECTED_UCPE_INSTANCE = '/assets/styles/images/resource-icons/selectedUcpeInstance.png'; - public static SELECTED_CP_INSTANCE = '/assets/styles/images/resource-icons/selectedCPInstance.png'; - public static SELECTED_VL_INSTANCE = '/assets/styles/images/resource-icons/selectedVLInstance.png'; - public static CANVAS_PLUS_ICON = '/assets/styles/images/resource-icons/canvasPlusIcon.png'; - public static CANVAS_TAG_ICON = '/assets/styles/images/canvas-tagging-icons/indication.svg'; - public static CANVAS_POLICY_TAGGED_ICON = '/assets/styles/images/canvas-tagging-icons/policy_added.svg'; - public static CANVAS_GROUP_TAGGED_ICON = '/assets/styles/images/canvas-tagging-icons/group_added.svg'; - public static MODULE_ICON = '/assets/styles/images/resource-icons/module.png'; - public static OPEN_MODULE_ICON = '/assets/styles/images/resource-icons/openModule.png'; - public static OPEN_MODULE_HOVER_ICON = '/assets/styles/images/resource-icons/openModuleHover.png'; - public static CLOSE_MODULE_ICON = '/assets/styles/images/resource-icons/closeModule.png'; - public static CLOSE_MODULE_HOVER_ICON = '/assets/styles/images/resource-icons/closeModuleHover.png'; + public static RESOURCE_ICONS = '/assets/styles/images/resource-icons/'; + public static SERVICE_ICONS = '/assets/styles/images/service-icons/'; + public static SERVICE_PROXY_ICONS = '/assets/styles/images/service-proxy-icons/'; + public static SELECTED_UCPE_INSTANCE = '/assets/styles/images/resource-icons/selectedUcpeInstance.png'; + public static SELECTED_CP_INSTANCE = '/assets/styles/images/resource-icons/selectedCPInstance.png'; + public static SELECTED_VL_INSTANCE = '/assets/styles/images/resource-icons/selectedVLInstance.png'; + public static CANVAS_PLUS_ICON = '/assets/styles/images/resource-icons/canvasPlusIcon.png'; + public static CANVAS_TAG_ICON = '/assets/styles/images/canvas-tagging-icons/indication.svg'; + public static CANVAS_POLICY_TAGGED_ICON = '/assets/styles/images/canvas-tagging-icons/policy_added.svg'; + public static CANVAS_GROUP_TAGGED_ICON = '/assets/styles/images/canvas-tagging-icons/group_added.svg'; + public static MODULE_ICON = '/assets/styles/images/resource-icons/module.png'; + public static OPEN_MODULE_ICON = '/assets/styles/images/resource-icons/openModule.png'; + public static OPEN_MODULE_HOVER_ICON = '/assets/styles/images/resource-icons/openModuleHover.png'; + public static CLOSE_MODULE_ICON = '/assets/styles/images/resource-icons/closeModule.png'; + public static CLOSE_MODULE_HOVER_ICON = '/assets/styles/images/resource-icons/closeModuleHover.png'; } export class CanvasHandleTypes { - public static ADD_EDGE = 'add-edge'; - public static TAG_AVAILABLE = 'tag-available'; - public static TAGGED_POLICY = 'tagged-policy'; - public static TAGGED_GROUP = 'tagged-group'; + public static ADD_EDGE = 'add-edge'; + public static TAG_AVAILABLE = 'tag-available'; + public static TAGGED_POLICY = 'tagged-policy'; + public static TAGGED_GROUP = 'tagged-group'; } export class ModalType { - static STANDARD = 'standard'; - static ERROR = 'error'; - static ALERT = 'alert'; + static STANDARD = 'standard'; + static ERROR = 'error'; + static ALERT = 'alert'; } export class ServerErrors { - static ERROR_TITLE = 'Error'; - static DEFAULT_ERROR = 'Error getting response from server'; - static MESSAGE_ERROR = 'Wrong error format from server'; - static DOWNLOAD_ERROR = 'Download error'; + static ERROR_TITLE = 'Error'; + static DEFAULT_ERROR = 'Error getting response from server'; + static MESSAGE_ERROR = 'Wrong error format from server'; + static DOWNLOAD_ERROR = 'Download error'; } export class GraphColors { - public static NOT_CERTIFIED_LINK = 'rgb(218,31,61)'; - public static VL_LINK = 'rgb(216,216,216)'; - public static ACTIVE_LINK = '#30bdf2'; - public static BASE_LINK = 'rgb(55,55,55)'; - public static NODE_BACKGROUND_COLOR = 'rgba(46, 162, 157, 0.24)'; - public static NODE_SHADOW_COLOR = 'rgba(198, 230, 228, 0.7)'; - public static NODE_OVERLAPPING_BACKGROUND_COLOR = 'rgba(179, 10, 60, 0.24)'; - public static NODE_OVERLAPPING_SHADOW_COLOR = 'rgba(236, 194, 206, 0.7)'; - public static NODE_UCPE_CP = '#9063cd'; - public static NODE_UCPE = '#fbfbfb'; - public static NODE_SELECTED_BORDER_COLOR = '#30bdf2'; - public static SERVICE_PATH_LINK = '#70208a'; + public static NOT_CERTIFIED_LINK = 'rgb(218,31,61)'; + public static VL_LINK = 'rgb(216,216,216)'; + public static ACTIVE_LINK = '#30bdf2'; + public static BASE_LINK = 'rgb(55,55,55)'; + public static NODE_BACKGROUND_COLOR = 'rgba(46, 162, 157, 0.24)'; + public static NODE_SHADOW_COLOR = 'rgba(198, 230, 228, 0.7)'; + public static NODE_OVERLAPPING_BACKGROUND_COLOR = 'rgba(179, 10, 60, 0.24)'; + public static NODE_OVERLAPPING_SHADOW_COLOR = 'rgba(236, 194, 206, 0.7)'; + public static NODE_UCPE_CP = '#9063cd'; + public static NODE_UCPE = '#fbfbfb'; + public static NODE_SELECTED_BORDER_COLOR = '#30bdf2'; + public static SERVICE_PATH_LINK = '#70208a'; } export class GraphTransactionLogText { - public static REMOVE_TEMP_LINK = "remove tempLink"; - public static DELETE_LINK = "delete link"; - public static ADD_LINK = "delete link"; - public static ADD_NODE = "adding node"; + public static REMOVE_TEMP_LINK = "remove tempLink"; + public static DELETE_LINK = "delete link"; + public static ADD_LINK = "delete link"; + public static ADD_NODE = "adding node"; } export class GraphUIObjects { - public static HANDLE_SIZE = 18; - public static NODE_OVERLAP_MIN_SIZE = 30; - public static DEFAULT_RESOURCE_WIDTH = 65; - public static SMALL_RESOURCE_WIDTH = 21; - public static LINK_MENU_HEIGHT = 420; - public static TOP_HEADER_HEIGHT = 200; - public static TOOLTIP_OFFSET_X = 50; - public static TOOLTIP_OFFSET_Y = 145; - public static TOOLTIP_LINK_OFFSET_X = 35; - public static TOOLTIP_LINK_OFFSET_Y = 75; - public static MENU_LINK_VL_HEIGHT_OFFSET = 250; - public static MENU_LINK_VL_WIDTH_OFFSET = 200; - public static MENU_LINK_SIMPLE_HEIGHT_OFFSET = 180; - public static MENU_LINK_SIMPLE_WIDTH_OFFSET = 130; - public static DIAGRAM_RIGHT_WIDTH_OFFSET = 248; - public static DIAGRAM_HEADER_OFFSET = 103; - public static DIAGRAM_PALETTE_WIDTH_OFFSET = 247; - // public static COMPOSITION_HEADER_OFFSET = 50; - // public static COMPOSITION_NODE_MENU_WIDTH = 230; - // public static COMPOSITION_NODE_MENU_HEIGHT = 200; - // public static COMPOSITION_RIGHT_PANEL_OFFSET = 300; + public static HANDLE_SIZE = 18; + public static NODE_OVERLAP_MIN_SIZE = 30; + public static DEFAULT_RESOURCE_WIDTH = 65; + public static SMALL_RESOURCE_WIDTH = 21; + public static LINK_MENU_HEIGHT = 420; + public static TOP_HEADER_HEIGHT = 200; + public static TOOLTIP_OFFSET_X = 50; + public static TOOLTIP_OFFSET_Y = 145; + public static TOOLTIP_LINK_OFFSET_X = 35; + public static TOOLTIP_LINK_OFFSET_Y = 75; + public static MENU_LINK_VL_HEIGHT_OFFSET = 250; + public static MENU_LINK_VL_WIDTH_OFFSET = 200; + public static MENU_LINK_SIMPLE_HEIGHT_OFFSET = 180; + public static MENU_LINK_SIMPLE_WIDTH_OFFSET = 130; + public static DIAGRAM_RIGHT_WIDTH_OFFSET = 248; + public static DIAGRAM_HEADER_OFFSET = 103; + public static DIAGRAM_PALETTE_WIDTH_OFFSET = 247; + // public static COMPOSITION_HEADER_OFFSET = 50; + // public static COMPOSITION_NODE_MENU_WIDTH = 230; + // public static COMPOSITION_NODE_MENU_HEIGHT = 200; + // public static COMPOSITION_RIGHT_PANEL_OFFSET = 300; } export class States { - public static WORKSPACE = 'workspace'; - public static WORKSPACE_GENERAL = 'workspace.general'; - 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_ATTRIBUTES_OUTPUTS = 'workspace.attributes_outputs'; - public static WORKSPACE_INFORMATION_ARTIFACTS = 'workspace.information_artifacts'; - public static WORKSPACE_TOSCA_ARTIFACTS = 'workspace.tosca_artifacts'; - public static WORKSPACE_COMPOSITION = 'workspace.composition'; - public static WORKSPACE_INTERFACE_OPERATION = 'workspace.interface_operation'; - public static WORKSPACE_INTERFACE_DEFINITION = 'workspace.interface-definition'; - public static WORKSPACE_NETWORK_CALL_FLOW = 'workspace.network_call_flow'; - public static WORKSPACE_MANAGEMENT_WORKFLOW = 'workspace.management_workflow'; - public static WORKSPACE_DEPLOYMENT = 'workspace.deployment'; - public static WORKSPACE_DISTRIBUTION = 'workspace.distribution'; - public static WORKSPACE_PROPERTIES_ASSIGNMENT = 'workspace.properties_assignment'; - public static WORKSPACE_REQUIREMENTS_AND_CAPABILITIES = 'workspace.reqAndCap'; - public static WORKSPACE_REQUIREMENTS_AND_CAPABILITIES_EDITABLE = 'workspace.reqAndCapEditable'; - public static WORKSPACE_PLUGINS = 'workspace.plugins'; - public static WORKSPACE_NG2 = 'workspace.ng2'; - public static TYPE_WORKSPACE = 'type-workspace'; + public static WORKSPACE = 'workspace'; + public static WORKSPACE_GENERAL = 'workspace.general'; + 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_ATTRIBUTES_OUTPUTS = 'workspace.attributes_outputs'; + public static WORKSPACE_INFORMATION_ARTIFACTS = 'workspace.information_artifacts'; + public static WORKSPACE_TOSCA_ARTIFACTS = 'workspace.tosca_artifacts'; + public static WORKSPACE_COMPOSITION = 'workspace.composition'; + public static WORKSPACE_INTERFACE_OPERATION = 'workspace.interface_operation'; + public static WORKSPACE_INTERFACE_DEFINITION = 'workspace.interface-definition'; + public static WORKSPACE_NETWORK_CALL_FLOW = 'workspace.network_call_flow'; + public static WORKSPACE_MANAGEMENT_WORKFLOW = 'workspace.management_workflow'; + public static WORKSPACE_DEPLOYMENT = 'workspace.deployment'; + public static WORKSPACE_DISTRIBUTION = 'workspace.distribution'; + public static WORKSPACE_PROPERTIES_ASSIGNMENT = 'workspace.properties_assignment'; + public static WORKSPACE_REQUIREMENTS_AND_CAPABILITIES = 'workspace.reqAndCap'; + public static WORKSPACE_REQUIREMENTS_AND_CAPABILITIES_EDITABLE = 'workspace.reqAndCapEditable'; + public static WORKSPACE_PLUGINS = 'workspace.plugins'; + public static WORKSPACE_NG2 = 'workspace.ng2'; + public static TYPE_WORKSPACE = 'type-workspace'; } export class EVENTS { - static LEFT_PALETTE_UPDATE_EVENT = "leftPanelUpdateEvent"; - static ON_CSAR_LOADING = "onCsarLoading"; - static DOWNLOAD_ARTIFACT_FINISH_EVENT = "downloadArtifactFinishEvent"; - static ON_WORKSPACE_SAVE_BUTTON_CLICK = "onWorkspaceSaveButtonClick"; - static ON_WORKSPACE_SAVE_BUTTON_SUCCESS = "onWorkspaceSaveButtonSuccess"; - static ON_WORKSPACE_SAVE_BUTTON_ERROR = "onWorkspaceSaveButtonError"; - static ON_WORKSPACE_UNSAVED_CHANGES = "onWorkspaceUnsavedChanges"; - static ON_CHECKOUT = "onCheckout"; - static ON_LIFECYCLE_CHANGE_WITH_SAVE = "onLifecycleChangeWithSave"; - static ON_LIFECYCLE_CHANGE = "onCheckout"; + static LEFT_PALETTE_UPDATE_EVENT = "leftPanelUpdateEvent"; + static ON_CSAR_LOADING = "onCsarLoading"; + static DOWNLOAD_ARTIFACT_FINISH_EVENT = "downloadArtifactFinishEvent"; + static ON_WORKSPACE_SAVE_BUTTON_CLICK = "onWorkspaceSaveButtonClick"; + static ON_WORKSPACE_SAVE_BUTTON_SUCCESS = "onWorkspaceSaveButtonSuccess"; + static ON_WORKSPACE_SAVE_BUTTON_ERROR = "onWorkspaceSaveButtonError"; + static ON_WORKSPACE_UNSAVED_CHANGES = "onWorkspaceUnsavedChanges"; + static ON_CHECKOUT = "onCheckout"; + static ON_LIFECYCLE_CHANGE_WITH_SAVE = "onLifecycleChangeWithSave"; + static ON_LIFECYCLE_CHANGE = "onCheckout"; - //Loader events - static SHOW_LOADER_EVENT = "showLoaderEvent"; - static HIDE_LOADER_EVENT = "hideLoaderEvent"; - static UPDATE_PANEL = 'updatePanel'; - static ON_DISTRIBUTION_SUCCESS = 'onDistributionSuccess'; + //Loader events + static SHOW_LOADER_EVENT = "showLoaderEvent"; + static HIDE_LOADER_EVENT = "hideLoaderEvent"; + static UPDATE_PANEL = 'updatePanel'; + static ON_DISTRIBUTION_SUCCESS = 'onDistributionSuccess'; } export class UNIQUE_GROUP_PROPERTIES_NAME { - public static MIN_VF_MODULE_INSTANCES = 'min_vf_module_instances'; - public static MAX_VF_MODULE_INSTANCES = 'max_vf_module_instances'; - public static INITIAL_COUNT = 'initial_count'; - public static IS_BASE = 'isBase'; - public static VF_MODULE_TYPE = 'vf_module_type'; - public static VF_MODULE_LABEL = 'vf_module_label'; - public static VF_MODULE_DESCRIPTION = 'vf_module_description'; - public static VOLUME_GROUP = 'volume_group'; + public static MIN_VF_MODULE_INSTANCES = 'min_vf_module_instances'; + public static MAX_VF_MODULE_INSTANCES = 'max_vf_module_instances'; + public static INITIAL_COUNT = 'initial_count'; + public static IS_BASE = 'isBase'; + public static VF_MODULE_TYPE = 'vf_module_type'; + public static VF_MODULE_LABEL = 'vf_module_label'; + public static VF_MODULE_DESCRIPTION = 'vf_module_description'; + public static VOLUME_GROUP = 'volume_group'; } export class GRAPH_EVENTS { - static ON_COMPOSITION_GRAPH_DATA_LOADED = 'onCompositionGraphDataLoaded'; - static ON_DEPLOYMENT_GRAPH_DATA_LOADED = 'onDeploymentGraphDataLoaded'; - static ON_NODE_SELECTED = "onNodeSelected"; - static ON_ZONE_INSTANCE_SELECTED = "onZoneInstanceSelected"; - static ON_GRAPH_BACKGROUND_CLICKED = "onGraphBackgroundClicked"; - static ON_PALETTE_COMPONENT_DRAG_START = 'onPaletteComponentDragStart'; - static ON_PALETTE_COMPONENT_DRAG_ACTION = 'onPaletteComponentDragAction'; - static ON_PALETTE_COMPONENT_DROP = 'onPaletteComponentDrop'; - static ON_COMPONENT_INSTANCE_NAME_CHANGED = 'onComponentInstanceNameChanged'; - static ON_COMPONENT_INSTANCE_REQUIREMENT_EXTERNAL_CHANGED = 'onComponentInstanceRequirementExternalChanged' - static ON_COMPONENT_INSTANCE_CAPABILITY_EXTERNAL_CHANGED = 'onComponentInstanceCapabilityExternalChanged' - static ON_ZONE_INSTANCE_NAME_CHANGED = 'onZoneInstanceNameChanged'; - static ON_DELETE_COMPONENT_INSTANCE = 'onDeleteComponentInstance'; - static ON_DELETE_ZONE_INSTANCE = 'onDeleteZoneInstance'; - static ON_DELETE_COMPONENT_INSTANCE_SUCCESS = 'onDeleteComponentInstanceSuccess'; - static ON_DELETE_EDGE = 'onDeleteEdge'; - static ON_INSERT_NODE_TO_UCPE = 'onInsertNodeToUCPE'; - static ON_REMOVE_NODE_FROM_UCPE = 'onRemoveNodeFromUCPE'; - static ON_VERSION_CHANGED = 'onVersionChanged'; - static ON_CREATE_COMPONENT_INSTANCE = 'onCreateComponentInstance'; - static ON_ADD_ZONE_INSTANCE_FROM_PALETTE = 'onAddZoneInstanceFromPalette'; - static ON_CANVAS_TAG_START = 'onCanvasTagStart'; - static ON_CANVAS_TAG_END = 'onCanvasTagEnd'; - static ON_POLICY_INSTANCE_UPDATE = 'onPolicyInstanceUpdate'; - static ON_GROUP_INSTANCE_UPDATE = 'onGroupInstanceUpdate'; - static ON_SERVICE_PATH_CREATED = 'onServicePathCreated'; + static ON_COMPOSITION_GRAPH_DATA_LOADED = 'onCompositionGraphDataLoaded'; + static ON_DEPLOYMENT_GRAPH_DATA_LOADED = 'onDeploymentGraphDataLoaded'; + static ON_NODE_SELECTED = "onNodeSelected"; + static ON_ZONE_INSTANCE_SELECTED = "onZoneInstanceSelected"; + static ON_GRAPH_BACKGROUND_CLICKED = "onGraphBackgroundClicked"; + static ON_PALETTE_COMPONENT_DRAG_START = 'onPaletteComponentDragStart'; + static ON_PALETTE_COMPONENT_DRAG_ACTION = 'onPaletteComponentDragAction'; + static ON_PALETTE_COMPONENT_DROP = 'onPaletteComponentDrop'; + static ON_COMPONENT_INSTANCE_NAME_CHANGED = 'onComponentInstanceNameChanged'; + static ON_COMPONENT_INSTANCE_REQUIREMENT_EXTERNAL_CHANGED = 'onComponentInstanceRequirementExternalChanged' + static ON_COMPONENT_INSTANCE_CAPABILITY_EXTERNAL_CHANGED = 'onComponentInstanceCapabilityExternalChanged' + static ON_ZONE_INSTANCE_NAME_CHANGED = 'onZoneInstanceNameChanged'; + static ON_DELETE_COMPONENT_INSTANCE = 'onDeleteComponentInstance'; + static ON_DELETE_ZONE_INSTANCE = 'onDeleteZoneInstance'; + static ON_DELETE_COMPONENT_INSTANCE_SUCCESS = 'onDeleteComponentInstanceSuccess'; + static ON_DELETE_EDGE = 'onDeleteEdge'; + static ON_INSERT_NODE_TO_UCPE = 'onInsertNodeToUCPE'; + static ON_REMOVE_NODE_FROM_UCPE = 'onRemoveNodeFromUCPE'; + static ON_VERSION_CHANGED = 'onVersionChanged'; + static ON_CREATE_COMPONENT_INSTANCE = 'onCreateComponentInstance'; + static ON_ADD_ZONE_INSTANCE_FROM_PALETTE = 'onAddZoneInstanceFromPalette'; + static ON_CANVAS_TAG_START = 'onCanvasTagStart'; + static ON_CANVAS_TAG_END = 'onCanvasTagEnd'; + static ON_POLICY_INSTANCE_UPDATE = 'onPolicyInstanceUpdate'; + static ON_GROUP_INSTANCE_UPDATE = 'onGroupInstanceUpdate'; + static ON_SERVICE_PATH_CREATED = 'onServicePathCreated'; } export class DEPENDENCY_EVENTS { - static ON_DEPENDENCY_CHANGE = 'onDependencyStatusChange'; + static ON_DEPENDENCY_CHANGE = 'onDependencyStatusChange'; } export class SUBSTITUTION_FILTER_EVENTS { - static ON_SUBSTITUTION_FILTER_CHANGE = 'onSubstitutionFilterChange'; + static ON_SUBSTITUTION_FILTER_CHANGE = 'onSubstitutionFilterChange'; } export class COMPONENT_FIELDS { - static COMPONENT_INSTANCES_PROPERTIES = "componentInstancesProperties"; - static COMPONENT_INSTANCES_INPUTS = "componentInstancesInputs"; - static COMPONENT_INSTANCES_ATTRIBUTES = "componentInstancesAttributes"; - static COMPONENT_INSTANCES_OUTPUTS = "componentInstancesOutputs"; - static COMPONENT_ATTRIBUTES = "attributes"; - static COMPONENT_INSTANCES = "componentInstances"; - static COMPONENT_INSTANCES_RELATION = "componentInstancesRelations"; - static COMPONENT_INPUTS = "inputs"; - static COMPONENT_OUTPUTS = "outputs"; - static COMPONENT_METADATA = "metadata"; - static COMPONENT_DEPLOYMENT_ARTIFACTS = "deploymentArtifacts"; - static COMPONENT_INFORMATIONAL_ARTIFACTS = "artifacts"; - static COMPONENT_PROPERTIES = "properties"; - static COMPONENT_CAPABILITIES = "capabilities"; - static COMPONENT_CAPABILITIES_PROPERTIES = "instanceCapabiltyProperties"; - static COMPONENT_REQUIREMENTS = "requirements"; - static COMPONENT_TOSCA_ARTIFACTS = "toscaArtifacts"; - static COMPONENT_POLICIES = "policies"; - static COMPONENT_GROUPS = "groups"; - static COMPONENT_INTERFACE_OPERATIONS = "interfaces"; - static COMPONENT_INSTANCES_INTERFACES = "componentInstancesInterfaces"; - static COMPONENT_NON_EXCLUDED_GROUPS = "nonExcludedGroups"; - static COMPONENT_NON_EXCLUDED_POLICIES = "nonExcludedPolicies"; - static FORWARDING_PATHS = "forwardingPaths"; - static SERVICE_API_ARTIFACT = "serviceApiArtifacts"; + static COMPONENT_INSTANCES_PROPERTIES = "componentInstancesProperties"; + static COMPONENT_INSTANCES_INPUTS = "componentInstancesInputs"; + static COMPONENT_INSTANCES_ATTRIBUTES = "componentInstancesAttributes"; + static COMPONENT_INSTANCES_OUTPUTS = "componentInstancesOutputs"; + static COMPONENT_ATTRIBUTES = "attributes"; + static COMPONENT_INSTANCES = "componentInstances"; + static COMPONENT_INSTANCES_RELATION = "componentInstancesRelations"; + static COMPONENT_INPUTS = "inputs"; + static COMPONENT_OUTPUTS = "outputs"; + static COMPONENT_METADATA = "metadata"; + static COMPONENT_DEPLOYMENT_ARTIFACTS = "deploymentArtifacts"; + static COMPONENT_INFORMATIONAL_ARTIFACTS = "artifacts"; + static COMPONENT_PROPERTIES = "properties"; + static COMPONENT_CAPABILITIES = "capabilities"; + static COMPONENT_CAPABILITIES_PROPERTIES = "instanceCapabiltyProperties"; + static COMPONENT_REQUIREMENTS = "requirements"; + static COMPONENT_TOSCA_ARTIFACTS = "toscaArtifacts"; + static COMPONENT_POLICIES = "policies"; + static COMPONENT_GROUPS = "groups"; + static COMPONENT_INTERFACE_OPERATIONS = "interfaces"; + static COMPONENT_INSTANCES_INTERFACES = "componentInstancesInterfaces"; + static COMPONENT_NON_EXCLUDED_GROUPS = "nonExcludedGroups"; + static COMPONENT_NON_EXCLUDED_POLICIES = "nonExcludedPolicies"; + static FORWARDING_PATHS = "forwardingPaths"; + static SERVICE_API_ARTIFACT = "serviceApiArtifacts"; } export class SERVICE_FIELDS { - static FORWARDING_PATHS = "forwardingPaths"; - static NODE_FILTER = "nodeFilter"; - static SUBSTITUTION_FILTER = "substitutionFilter"; + static FORWARDING_PATHS = "forwardingPaths"; + static NODE_FILTER = "nodeFilter"; + static SUBSTITUTION_FILTER = "substitutionFilter"; } export class API_QUERY_PARAMS { - static INCLUDE = "include"; + static INCLUDE = "include"; } export enum TargetOrMemberType { - COMPONENT_INSTANCES, - GROUPS + COMPONENT_INSTANCES, + GROUPS } export class CANVAS_TAG_MODE { - static POLICY_TAGGING = "policy-tagging"; - static POLICY_TAGGING_HOVER = "policy-tagging-hover"; - static GROUP_TAGGING = "group-tagging"; - static GROUP_TAGGING_HOVER = "group-tagging-hover"; + static POLICY_TAGGING = "policy-tagging"; + static POLICY_TAGGING_HOVER = "policy-tagging-hover"; + static GROUP_TAGGING = "group-tagging"; + static GROUP_TAGGING_HOVER = "group-tagging-hover"; } export class DROPDOWN_OPTION_TYPE { - static SIMPLE = "Simple"; - static HEADER = "Header"; - static DISABLE = "Disable"; - static HORIZONTAL_LINE = "HorizontalLine"; + static SIMPLE = "Simple"; + static HEADER = "Header"; + static DISABLE = "Disable"; + static HORIZONTAL_LINE = "HorizontalLine"; } 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 a1acfc73fa..8023ceecec 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 @@ -176,9 +176,6 @@ export class GeneralViewModel { this.initScope(); } - - - private initScopeValidation = ():void => { this.$scope.validation = new Validation(); this.$scope.validation.componentNameValidationPattern = this.ComponentNameValidationPattern; @@ -689,7 +686,6 @@ export class GeneralViewModel { } }; - this.EventListenerService.registerObserverCallback(EVENTS.ON_LIFECYCLE_CHANGE_WITH_SAVE, (nextState) => { if (this.$state.current.data.unsavedChanges && this.$scope.isValidForm) { this.$scope.save().then(() => { @@ -888,6 +884,10 @@ export class GeneralViewModel { } return metadatakey != null; } + + this.$scope.isNotApplicableMetadataKeys = (key: string): boolean => { + return this.$scope.component.categories && this.$scope.component.categories[0].notApplicableMetadataKeys && this.$scope.component.categories[0].notApplicableMetadataKeys.some(item => item === key); + } } private filterCategoriesByModel(modelName:string) { @@ -897,7 +897,6 @@ export class GeneralViewModel { !modelName ? !category.models || category.models.indexOf(DEFAULT_MODEL_NAME) !== -1 : category.models !== null && category.models.indexOf(modelName) !== -1); } - private filterBaseTypesByModelAndCategory(modelName:string) { let categories = this.$scope.component.categories; if (categories) { 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 1fb8d5f10f..4704feb71e 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 @@ -14,644 +14,638 @@ ~ limitations under the License. --> <div include-padding="true" class="sdc-workspace-general-step"> - <div class="w-sdc-main-container-body-content-action-buttons"> - <div data-ng-if="unsavedFile && !isCreateMode() && !isViewMode()" data-tests-id="save-warning" class="unsaved-file-warning"> - <span class="sprite-new sdc-warning"></span> Click save to update to the new VSP - </div> - <button class="tlv-btn blue" data-ng-if="isDesigner()" data-ng-show="isGeneralView()" data-ng-class="{'disabled' : !isValidForm || isDisableMode() || isViewMode() || isCreateMode()}" + <div class="w-sdc-main-container-body-content-action-buttons"> + <div data-ng-if="unsavedFile && !isCreateMode() && !isViewMode()" data-tests-id="save-warning" class="unsaved-file-warning"> + <span class="sprite-new sdc-warning"></span> Click save to update to the new VSP + </div> + <button class="tlv-btn blue" data-ng-if="isDesigner()" data-ng-show="isGeneralView()" data-ng-class="{'disabled' : !isValidForm || isDisableMode() || isViewMode() || isCreateMode()}" data-ng-click="save()" data-tests-id="create/save" tooltips tooltip-content="Save">Save</button> - <span data-ng-if="isDesigner()" data-ng-class="{'disabled' :isDisableMode() || isViewMode() || isCreateMode()}" ng-click="revert()" class="sprite-new revert-btn" data-tests-id="revert" - data-ng-show="isGeneralView()" tooltips tooltip-content="Revert"></span> + <span data-ng-if="isDesigner()" data-ng-class="{'disabled' :isDisableMode() || isViewMode() || isCreateMode()}" ng-click="revert()" class="sprite-new revert-btn" data-tests-id="revert" + data-ng-show="isGeneralView()" tooltips tooltip-content="Revert"></span> - </div> - <form novalidate class="w-sdc-form" name="editForm" validation-on-load form-to-validate="editForm"> + </div> + <form novalidate class="w-sdc-form" name="editForm" validation-on-load form-to-validate="editForm"> - <div class="w-sdc-form-section-container"> + <div class="w-sdc-form-section-container"> - <div class="w-sdc-form-columns-wrapper"> + <div class="w-sdc-form-columns-wrapper"> - <div class="w-sdc-form-column"> - <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="{ + <div class="w-sdc-form-column"> + <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(), 'archive-component active-component-static': component.archived }" - 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" translate="GENERAL_LABEL_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" - 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 --------------------> - - <!--------------------- Model --------------------> - <div class="i-sdc-form-item"> - <label class="i-sdc-form-label required">Model</label> - <select class="i-sdc-form-select" - data-ng-class="{'view-mode': isViewMode()}" - data-ng-disabled="!isCreateMode()" - data-ng-change="onModelChange()" - data-tests-id="selectModelName" - data-ng-required="isModelRequired" - data-ng-model="component.model" - data-ng-options="model for model in models track by model" - > - <option ng-if="showDefaultModelOption" value="">{{defaultModelOption}}</option> - </select> - </div> - <!--------------------- Model --------------------> - - <!--------------------- 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" translate="GENERAL_LABEL_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!=='') || isHiddenCategorySelected" - 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}}">{{getCategoryDisplayNameOrName(mainCategory)}}</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> - <span ng-show="editForm.category.$error.validForBaseType" translate="NEW_SERVICE_RESOURCE_ERROR_CATEGORY_NOT_VALID"></span> - </div> - </div> - <!--------------------- CATEGORIES --------------------> - </div> - </div> - - <!--------------------- Category Specific Metadata --------------------> - - <div ng-if="component.selectedCategory"> - <ng-container ng-repeat="(key, value) in component.categorySpecificMetadata"--> - <div ng-if="isMetadataKeyForComponentCategory(key) && !isCategoryServiceMetadataKey(key) && getMetadataKeyValidValues(key) && isMetadataKeyMandatory(key)" - class="i-sdc-form-item" - data-ng-class="{'error': validateField(editForm['{{key}}'])}"> - <label class="i-sdc-form-label required" translate="{{getMetadataDisplayName(key)}}"></label> - <select class="i-sdc-form-select" - name="{{key}}" - data-ng-class="{'view-mode': isViewMode()}" - data-ng-model="component.categorySpecificMetadata[key]" - data-tests-id="{{key}}" - data-required> - <option ng-repeat="value in getMetadataKeyValidValues(key)">{{value}}</option> - </select> - <div class="input-error" data-ng-show="validateField(editForm['{{key}}'])"> - <span ng-show="editForm['{{key}}'].$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_REQUIRED"></span> - </div> - </div> - <div ng-if="isMetadataKeyForComponentCategory(key) && !isCategoryServiceMetadataKey(key) && getMetadataKeyValidValues(key) && !isMetadataKeyMandatory(key)" - class="i-sdc-form-item"> - <label class="i-sdc-form-label" translate="{{getMetadataDisplayName(key)}}"></label> - <select class="i-sdc-form-select" - name="{{key}}" - data-ng-class="{'view-mode': isViewMode()}" - data-ng-model="component.categorySpecificMetadata[key]" - data-tests-id="{{key}}"> - <option ng-repeat="value in getMetadataKeyValidValues(key)">{{value}}</option> - </select> - </div> - <div ng-if="isMetadataKeyForComponentCategory(key) && !isCategoryServiceMetadataKey(key) && !getMetadataKeyValidValues(key) && isMetadataKeyMandatory(key)" - class="i-sdc-form-item" - data-ng-class="{'error': validateField(editForm['{{key}}'])}"> - <label class="i-sdc-form-label required" translate="{{getMetadataDisplayName(key)}}"></label> - <input class="i-sdc-form-input" type="text" - data-required - data-ng-class="{'view-mode': isViewMode()}" - data-ng-model="component.categorySpecificMetadata[key]" - name="{{key}}" - data-tests-id="{{key}}" - /> - <div class="input-error" data-ng-show="validateField(editForm['{{key}}'])"> - <span ng-show="editForm['{{key}}'].$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_REQUIRED"></span> - </div> - </div> - <div ng-if="isMetadataKeyForComponentCategory(key) && !isCategoryServiceMetadataKey(key) && !getMetadataKeyValidValues(key) && !isMetadataKeyMandatory(key)" - class="i-sdc-form-item"> - <label class="i-sdc-form-label" translate="{{getMetadataDisplayName(key)}}"></label> - <input class="i-sdc-form-input" type="text" - data-ng-class="{'view-mode': isViewMode()}" - data-ng-model="component.categorySpecificMetadata[key]" - name="{{key}}" - data-tests-id="{{key}}" - /> - </div> - </ng-container> - </div> - <!--------------------- RESOURCE TAGS --------------------> - <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.tags)}"> - <label class="i-sdc-form-label" translate="GENERAL_LABEL_TAGS"></label> - - <sdc-tags form-element="editForm" element-name="tags" max-tags="20" class="i-sdc-form-item-tags" - sdc-disabled="isViewMode()" - tags="component.tags" - pattern="validation.tagValidationPattern" - special-tag="component.name"></sdc-tags> - - <div class="input-error" data-ng-show="validateField(editForm.tags)"> - <span ng-show="editForm.tags.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> - <span ng-show="editForm.tags.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_TAG_NAME_EXIST"></span> - </div> + ng-model="component.icon" + tooltips tooltip-content='{{component.icon | translate}}' + > </div> - <!--------------------- RESOURCE TAGS --------------------> - - <!--------------------- DESCRIPTION --------------------> - <div class="i-sdc-form-item description-field" - data-ng-class="{'error': validateField(editForm.description)}"> - <label class="i-sdc-form-label required" translate="GENERAL_LABEL_DESCRIPTION"></label> - <textarea class="description" - name="description" - data-ng-class="{'view-mode': isViewMode()}" - data-ng-maxlength="1024" - data-required - data-ng-model="component.description" - data-ng-model-options="{ debounce: 500 }" - data-ng-pattern="validation.commentValidationPattern" - data-tests-id="description"></textarea> - <!-- placeholder="Description here..." --> - - <div class="input-error" data-ng-show="validateField(editForm.description)"> - <span ng-show="editForm.description.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_DESCRIPTION_REQUIRED"></span> - <span ng-show="editForm.description.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '1024' }"></span> - <span ng-show="editForm.description.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> - </div> + </div> + </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" translate="GENERAL_LABEL_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" + 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> - <!--------------------- DESCRIPTION --------------------> - - </div><!-- Close w-sdc-form-column --> - - <div class="w-sdc-form-column"> - <!--------------------- IMPORT TOSCA FILE USING BROWSE (ALSO VFC) --------------------> - <div class="i-sdc-form-item" ng-if="isShowFileBrowse"> - - <!-- // element-disabled="{{!isCreateMode()&&!(isEditMode()&&component.resourceType=='VF')&&component.vspArchived}} || {{isViewMode()}}" --> - - <label class="i-sdc-form-label" data-ng-class="{'required':isCreateMode() && component.resourceType !=='VF'}">{{browseFileLabel}}</label> - <file-upload id="fileUploadElement" - class="i-sdc-form-input" - element-name="fileElement" - data-ng-required="false" - element-disabled="{{(!isCreateMode()&&!(isEditMode()&&component.resourceType=='VF'))|| isViewMode() || component.vspArchived}}" - form-element="editForm" - file-model="component.importedFile" - on-file-changed-in-directive="onImportFileChange" - extensions="{{importedFileExtension}}" - default-text="'Browse to select file'" - ></file-upload> - </div> - - <!--------------------- IMPORT TOSCA FILE USING ONBOARDING --------------------> - <div class="i-sdc-form-item" ng-if="isShowOnboardingSelectionBrowse && !isShowFileBrowse"> - <label class="i-sdc-form-label required">VSP</label> - <div class="i-sdc-form-file-upload i-sdc-form-input"> - <span class="i-sdc-form-file-name" data-ng-disabled="component.vspArchived" data-tests-id="filename">{{(fileModel && fileModel.filename) || importedToscaBrowseFileText }}</span> - <div class="i-sdc-form-file-upload-x-btn" ng-click="cancel()" data-ng-show="fileModel.filename && fileModel.filename!=='' && elementDisabled!=='true'"></div> - <input type="button" data-ng-class="{'disabled': !isEditMode() && component.vspArchived}" data-ng-disabled="component.vspArchived" name="fileElement" /> - <div class="file-upload-browse-btn" data-ng-class="{'disabled': !isEditMode() && !component.vspArchived}" data-ng-click="openOnBoardingModal()" data-ng-disabled="!component.vspArchived" data-tests-id="browseButton">Browse</div> - </div> - </div> - - <div class="input-error-file-upload" data-ng-disabled="!component.archived" data-ng-show="component.importedFile && (!editForm.fileElement.$valid || !component.importedFile.filename)"> - <!-- editForm.fileElement.$error.required <== Can not use this, because the browse is done from outside for the first time --> - <span ng-show="!(isEditMode()&&component.resourceType=='VF')&&!component.importedFile.filename" translate="NEW_SERVICE_RESOURCE_ERROR_TOSCA_FILE_REQUIRED"></span><!-- Required --> - <span ng-show="editForm.fileElement.$error.maxsize" translate="VALIDATION_ERROR_MAX_FILE_SIZE"></span> - <span ng-show="editForm.fileElement.$error.filetype" translate="NEW_SERVICE_RESOURCE_ERROR_VALID_TOSCA_EXTENSIONS" translate-values="{'extensions': '{{importedFileExtension}}' }"></span> - <span ng-show="editForm.fileElement.$error.emptyFile" translate="VALIDATION_ERROR_EMPTY_FILE"></span> - </div> - <!--------------------- IMPORT TOSCA FILE --------------------> - - <!--------------------- USER ID --------------------> - <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.contactId)}"> - <label class="i-sdc-form-label required" translate="GENERAL_LABEL_CONTACT_ID"></label> - <input class="i-sdc-form-input" type="text" - data-ng-model="component.contactId" - data-ng-class="{'view-mode': isViewMode()}" - data-ng-required="true" - name="contactId" - data-ng-pattern="validation.contactIdValidationPattern" - data-ng-model-options="{ debounce: 500 }" - data-tests-id="contactId" - data-ng-maxlength="50" - /> - - <div class="input-error" data-ng-show="validateField(editForm.contactId)"> - <span ng-show="editForm.contactId.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span> - <span ng-show="editForm.contactId.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_REQUIRED"></span> - <span ng-show="editForm.contactId.$error.pattern" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_NOT_VALID"></span> - </div> - </div> - <!--------------------- USER ID --------------------> - - <!--------------------- VENDOR NAME --------------------> - <div ng-if="component.isResource()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.vendorName)}"> - <label class="i-sdc-form-label required" translate="GENERAL_LABEL_VENDOR_NAME"></label> - <input class="i-sdc-form-input" type="text" - data-ng-class="{'view-mode': isViewMode()}" - data-ng-model="component.vendorName" - data-ng-model-options="{ debounce: 500 }" - data-ng-maxlength="60" - data-required - ng-click="oldValue = component.vendorName" - name="vendorName" - data-ng-change="onVendorNameChange(oldValue)" - data-ng-pattern="validation.VendorNameValidationPattern" - data-ng-disabled="component.isAlreadyCertified() || (component.isCsarComponent() && component.vendorName && component.vendorName!=='')" - data-tests-id="vendorName" - /> - - <div class="input-error" data-ng-show="validateField(editForm.vendorName)"> - <span ng-show="editForm.vendorName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_VENDOR_NAME_REQUIRED"></span> - <span ng-show="editForm.vendorName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '60' }"></span> - <span ng-show="editForm.vendorName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> - </div> - + </div> + <!--------------------- NAME --------------------> + + <!--------------------- Model --------------------> + <div class="i-sdc-form-item"> + <label class="i-sdc-form-label required">Model</label> + <select class="i-sdc-form-select" + data-ng-class="{'view-mode': isViewMode()}" + data-ng-disabled="!isCreateMode()" + data-ng-change="onModelChange()" + data-tests-id="selectModelName" + data-ng-required="isModelRequired" + data-ng-model="component.model" + data-ng-options="model for model in models track by model" + > + <option ng-if="showDefaultModelOption" value="">{{defaultModelOption}}</option> + </select> + </div> + <!--------------------- Model --------------------> + + <!--------------------- 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" translate="GENERAL_LABEL_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!=='') || isHiddenCategorySelected" + 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}}">{{getCategoryDisplayNameOrName(mainCategory)}}</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> + <span ng-show="editForm.category.$error.validForBaseType" translate="NEW_SERVICE_RESOURCE_ERROR_CATEGORY_NOT_VALID"></span> </div> - - <!--------------------- VENDOR NAME --------------------> - - <!--------------------- VENDOR RELEASE --------------------> - <div ng-if="component.isResource()" - class="i-sdc-form-item" - data-ng-class="{'error': validateField(editForm.vendorRelease)}"> - <label class="i-sdc-form-label required" translate="GENERAL_LABEL_VENDOR_RELEASE"></label> - <input class="i-sdc-form-input" type="text" - data-ng-class="{'view-mode': isViewMode()}" - data-ng-model="component.vendorRelease" - data-ng-model-options="{ debounce: 500 }" - data-ng-maxlength="25" - data-required - name="vendorRelease" - data-ng-pattern="validation.VendorReleaseValidationPattern" - data-ng-disabled="component.isCsarComponent() && component.vendorRelease && component.vendorRelease!==''" - data-tests-id="vendorRelease" - /> - - <div class="input-error" data-ng-show="validateField(editForm.vendorRelease)"> - <span ng-show="editForm.vendorRelease.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_VENDOR_RELEASE_REQUIRED"></span> - <span ng-show="editForm.vendorRelease.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '25' }"></span> - <span ng-show="editForm.vendorRelease.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> - </div> + </div> + <!--------------------- CATEGORIES --------------------> + </div> + </div> + + <!--------------------- Category Specific Metadata --------------------> + <div ng-if="component.selectedCategory"> + <ng-container ng-repeat="(key, value) in component.categorySpecificMetadata"--> + <div ng-if="isMetadataKeyForComponentCategory(key) && !isCategoryServiceMetadataKey(key) && getMetadataKeyValidValues(key) && isMetadataKeyMandatory(key)" + class="i-sdc-form-item" + data-ng-class="{'error': validateField(editForm['{{key}}'])}"> + <label class="i-sdc-form-label required" translate="{{getMetadataDisplayName(key)}}"></label> + <select class="i-sdc-form-select" + name="{{key}}" + data-ng-class="{'view-mode': isViewMode()}" + data-ng-model="component.categorySpecificMetadata[key]" + data-tests-id="{{key}}" + data-required> + <option ng-repeat="value in getMetadataKeyValidValues(key)">{{value}}</option> + </select> + <div class="input-error" data-ng-show="validateField(editForm['{{key}}'])"> + <span ng-show="editForm['{{key}}'].$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_REQUIRED"></span> </div> - <!--------------------- VENDOR RELEASE --------------------> - - <!--------------------- Resource Model Number --------------------> - <div ng-if="component.isResource()" - class="i-sdc-form-item" - data-ng-class="{'error': validateField(editForm.resourceVendorModelNumber)}"> - <label class="i-sdc-form-label" translate="GENERAL_LABEL_RESOURCE_MODEL_NUMBER"></label> - <input class="i-sdc-form-input" type="text" - data-ng-class="{'view-mode': isViewMode()}" - data-ng-model="component.resourceVendorModelNumber" - data-ng-model-options="{ debounce: 500 }" - data-ng-maxlength="65" - name="resourceVendorModelNumber" - data-ng-pattern="validation.VendorModelNumberValidationPattern" - data-tests-id="resourceVendorModelNumber" - /> - - <div class="input-error" data-ng-show="validateField(editForm.resourceVendorModelNumber)"> - <span ng-show="editForm.resourceVendorModelNumber.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '65' }"></span> - <span ng-show="editForm.resourceVendorModelNumber.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> - </div> + </div> + <div ng-if="isMetadataKeyForComponentCategory(key) && !isCategoryServiceMetadataKey(key) && getMetadataKeyValidValues(key) && !isMetadataKeyMandatory(key)" + class="i-sdc-form-item"> + <label class="i-sdc-form-label" translate="{{getMetadataDisplayName(key)}}"></label> + <select class="i-sdc-form-select" + name="{{key}}" + data-ng-class="{'view-mode': isViewMode()}" + data-ng-model="component.categorySpecificMetadata[key]" + data-tests-id="{{key}}"> + <option ng-repeat="value in getMetadataKeyValidValues(key)">{{value}}</option> + </select> + </div> + <div ng-if="isMetadataKeyForComponentCategory(key) && !isCategoryServiceMetadataKey(key) && !getMetadataKeyValidValues(key) && isMetadataKeyMandatory(key)" + class="i-sdc-form-item" + data-ng-class="{'error': validateField(editForm['{{key}}'])}"> + <label class="i-sdc-form-label required" translate="{{getMetadataDisplayName(key)}}"></label> + <input class="i-sdc-form-input" type="text" + data-required + data-ng-class="{'view-mode': isViewMode()}" + data-ng-model="component.categorySpecificMetadata[key]" + name="{{key}}" + data-tests-id="{{key}}" + /> + <div class="input-error" data-ng-show="validateField(editForm['{{key}}'])"> + <span ng-show="editForm['{{key}}'].$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_REQUIRED"></span> </div> - <!--------------------- Resource Model Number --------------------> - - <!--------------------- ECOMPGENERATEDNAMING --------------------> - - <div class="i-sdc-form-item" - data-ng-class="{'error': validateField(editForm.ecompGeneratedNaming)}" - data-ng-if="component.isService()"> - <label class="i-sdc-form-label">Generated Naming</label> - <select class="i-sdc-form-select" - data-required - name="ecompGeneratedNaming" - data-ng-change="onEcompGeneratedNamingChange()" - data-ng-class="{'view-mode': isViewMode()}" - data-ng-model="component.ecompGeneratedNaming" - data-tests-id="ecompGeneratedNaming"> - <option ng-value="true">true</option> - <option ng-value="false">false</option> - </select> - <div class="input-error" data-ng-show="validateField(editForm.ecompGeneratedNaming)"> - - </div> - </div> - <!--------------------- CATEGORIES --------------------> - - <!--------------------- NAMING POLICY --------------------> - <div ng-if="component.isService()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.namingPolicy)}"> - <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Naming Policy', 'namingPolicy')"> - <div ng-if="isMetadataKeyMandatory('Naming Policy')"> - <label class="i-sdc-form-label required">Naming Policy</label> - </div> - <div ng-if="!isMetadataKeyMandatory('Naming Policy')"> - <label class="i-sdc-form-label">Naming Policy</label> - </div> - <select class="i-sdc-form-input" type="text" - ng-required="isMetadataKeyMandatory('Naming Policy')" - data-ng-class="{'view-mode': isViewMode()}" - data-ng-model="component.namingPolicy" - data-ng-model-options="{ debounce: 500 }" - name="namingPolicy" - data-tests-id="namingPolicy" - data-ng-maxlength="256" - data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern" - > <option ng-repeat="value in getMetadataKeyValidValues('Naming Policy')">{{value}}</option> - </select> - </div> - <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Naming Policy')"> - <label class="i-sdc-form-label">Naming Policy</label> - <input class="i-sdc-form-input" - name="namingPolicy" - data-ng-class="{'view-mode': isViewMode() || !component.ecompGeneratedNaming}" - data-ng-maxlength="100" - data-ng-model="component.namingPolicy" - type="text" - data-ng-model-options="{ debounce: 500 }" - data-ng-pattern="validation.commentValidationPattern" - data-tests-id="namingPolicy" - autofocus - ng-readonly="isViewMode() || !component.ecompGeneratedNaming" - /> - </div> - <div class="input-error" data-ng-show="validateField(editForm.namingPolicy)"> - <span ng-show="editForm.namingPolicy.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span> - <span ng-show="editForm.namingPolicy.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> - </div> - </div> - <!--------------------- NAMING POLICY --------------------> - - <!--------------------- Service Type --------------------> - <div ng-if="component.isService()" - class="i-sdc-form-item" - data-ng-class="{'error': validateField(editForm.serviceFunctionType)}"> - <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Service Type', 'serviceType')"> - <div ng-if="isMetadataKeyMandatory('Service Type')"> - <label class="i-sdc-form-label required" translate="GENERAL_TAB_LABEL_SERVICE_TYPE"></label> - </div> - <div ng-if="!isMetadataKeyMandatory('Service Type')"> - <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_TYPE"></label> - </div> - <select class="i-sdc-form-input" type="text" - ng-required="isMetadataKeyMandatory('Service Type')" - data-ng-class="{'view-mode': isViewMode()}" - data-ng-model="component.serivceType" - data-ng-model-options="{ debounce: 500 }" - name="serviceType" - data-tests-id="serviceType" - data-ng-maxlength="256" - data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern" - > <option ng-repeat="value in getMetadataKeyValidValues('Service Type')">{{value}}</option> - </select> - </div> - <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Service Type')"> - <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_TYPE"></label> - <input class="i-sdc-form-input" type="text" - data-ng-class="{'view-mode': isViewMode()}" - data-ng-model="component.serviceType" - data-ng-model-options="{ debounce: 500 }" - name="serviceType" - data-tests-id="serviceType" - data-ng-maxlength="256" - data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern" - /> - </div> - <div class="input-error" data-ng-show="validateField(editForm.serviceType)"> - <span ng-show="editForm.serviceType.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span> - <span ng-show="editForm.serviceType.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> - </div> - </div> - <!--------------------- Service Type --------------------> - - <!--------------------- Service Role --------------------> - <div ng-if="component.isService()" - class="i-sdc-form-item" - data-ng-class="{'error': validateField(editForm.serviceRole)}"> - <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Service Role', 'serviceRole')"> - <div ng-if="isMetadataKeyMandatory('Service Role')"> - <label class="i-sdc-form-label required" translate="GENERAL_TAB_LABEL_SERVICE_ROLE"></label> - </div> - <div ng-if="!isMetadataKeyMandatory('Service Role')"> - <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_ROLE"></label> - </div> - <select class="i-sdc-form-input" type="text" - ng-required="isMetadataKeyMandatory('Service Role')" - data-ng-class="{'view-mode': isViewMode()}" - data-ng-model="component.serviceRole" - data-ng-model-options="{ debounce: 500 }" - name="serviceRole" - data-tests-id="serviceRole" - data-ng-maxlength="256" - > <option ng-repeat="value in getMetadataKeyValidValues('Service Role')">{{value}}</option> - </select> - </div> - <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Service Role')"> - <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_ROLE"></label> - <input class="i-sdc-form-input" type="text" - data-ng-class="{'view-mode': isViewMode()}" - data-ng-model="component.serviceRole" - data-ng-model-options="{ debounce: 500 }" - name="serviceRole" - data-tests-id="serviceRole" - data-ng-maxlength="256" - data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern" - /> - </div> - <div class="input-error" data-ng-show="validateField(editForm.serviceRole)"> - <span ng-show="editForm.serviceRole.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span> - <span ng-show="editForm.serviceRole.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> - </div> - </div> - <!--------------------- Service Role --------------------> - <!--------------------- Service Function --------------------> - <div ng-if="component.isService()" - class="i-sdc-form-item" - data-ng-class="{'error': validateField(editForm.serviceFunction)}"> - <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Service Function', 'serviceFunction')"> - <div ng-if="isMetadataKeyMandatory('Service Function')"> - <label class="i-sdc-form-label required" translate="GENERAL_TAB_LABEL_SERVICE_FUNCTION"></label> - </div> - <div ng-if="!isMetadataKeyMandatory('Service Function')"> - <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_FUNCTION"></label> - </div> - <select class="i-sdc-form-input" type="text" - ng-required="isMetadataKeyMandatory('Service Function')" - data-ng-class="{'view-mode': isViewMode()}" - data-ng-model="component.serviceFunction" - data-ng-model-options="{ debounce: 500 }" - name="serviceFunction" - data-tests-id="serviceFunction" - data-ng-maxlength="256" - data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern" - > <option ng-repeat="value in getMetadataKeyValidValues('Service Function')">{{value}}</option> - </select> - </div> - <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Service Function')"> - <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_FUNCTION"></label> - <input class="i-sdc-form-input" type="text" - data-ng-class="{'view-mode': isViewMode()}" - data-ng-model="component.serviceFunction" - name="serviceFunction" - data-tests-id="serviceFunction" - data-ng-maxlength="256" - data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern" - /> - </div> - <div class="input-error" data-ng-show="validateField(editForm.serviceFunction)"> - <span ng-show="editForm.serviceFunction.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span> - <span ng-show="editForm.serviceFunction.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> - </div> - </div> - <!--------------------- Service Function --------------------> - - <!-------------------- ENVIRONMENT CONTEXT -----------------> - - <div ng-if="component.isService()" class="i-sdc-form-item"> - <loader data-display="!environmentContextObj && !initEnvironmentContext()" relative="true"></loader> - <label class="i-sdc-form-label">Environment Context</label> - <select class="i-sdc-form-select" - name="environmentContext" - data-ng-class="{'view-mode': isViewMode()}" - data-ng-model="component.environmentContext" - data-tests-id="environmentContext" - > - <option data-ng-repeat="environmentContextVal in (environmentContextObj.validValues) | orderBy" - value="{{environmentContextVal}}" - data-tests-id="{{environmentContextVal}}">{{environmentContextVal}}</option> - </select> - - </div> - <!--------------------- ENVIRONMENT CONTEXT ------------------> - - <!--------------------- Instantiation Type --------------------> - <div class="i-sdc-form-item" data-ng-if="component.isService() && instantiationTypes"> - <label class="i-sdc-form-label">Instantiation Type</label> - <select class="i-sdc-form-select" - name="instantiationType" - data-ng-class="{'view-mode': isViewMode()}" - data-ng-disabled="component.isCsarComponent()" - data-ng-model="component.instantiationType" - data-tests-id="selectInstantiationType"> - <option ng-repeat="type in instantiationTypes">{{type}}</option> - - </select> - </div> - - <!--------------------- Instantiation Type --------------------> - - <!--------------------- Base Type --------------------> - <div class="w-sdc-form-columns-wrapper"> - <div class="w-sdc-form-column"> - <div class="i-sdc-form-item" ng-if="component.isService() && baseTypes && baseTypes.length > 0"> - <label class="i-sdc-form-label">Substitution Node Type</label> - <select class="i-sdc-form-select" - name="baseType" - data-ng-class="{'view-mode': isViewMode()}" - data-ng-disabled="component.isCsarComponent() || !isCreateMode()" - data-ng-model="component.derivedFromGenericType" - data-ng-change="onBaseTypeChange()" - data-tests-id="selectBaseType" - data-ng-options="type for type in baseTypes track by type"> - <option value="" data-ng-if="!isBaseTypeRequired">None</option> - </select> - </div> - </div> - <div class="w-sdc-form-column"> - <div class="i-sdc-form-item" data-ng-if="component.isService() && showBaseTypeVersions"> - <label class="i-sdc-form-label">Substitution Node Type Version</label> - <select class="i-sdc-form-select" - name="baseTypeVersion" - data-ng-class="{'view-mode': isViewMode()}" - data-ng-disabled="component.isCsarComponent() || !isCreateMode()" - data-ng-model="component.derivedFromGenericVersion" - data-tests-id="selectBaseTypeVersion"> - <option ng-repeat="version in baseTypeVersions">{{version}}</option> - </select> - </div> - </div> - </div> - - <!--------------------- Base Type --------------------> - - <div class="meta-data" data-ng-if="component.creationDate"> - <div> - <b>Created:</b> - </div> - <div class="meta-data-item-value">{{component.creationDate | date:'MM/dd/yyyy'}}, {{component.creatorFullName}}</div> - <div> - <b>Modifed:</b> - </div> - <div class="meta-data-item-value"> - {{component.lastUpdateDate | date:'MM/dd/yyyy'}} - </div> - <div> - <b>UUID:</b> - </div> - <div class="meta-data-item-value"> - {{component.uuid}} - </div> - <div> - <b>Invariant UUID:</b> - </div> - <div class="meta-data-item-value"> - {{component.invariantUUID}} - </div> - </div> - </div><!-- Close w-sdc-form-column --> + </div> + <div ng-if="isMetadataKeyForComponentCategory(key) && !isCategoryServiceMetadataKey(key) && !getMetadataKeyValidValues(key) && !isMetadataKeyMandatory(key)" + class="i-sdc-form-item"> + <label class="i-sdc-form-label" translate="{{getMetadataDisplayName(key)}}"></label> + <input class="i-sdc-form-input" type="text" + data-ng-class="{'view-mode': isViewMode()}" + data-ng-model="component.categorySpecificMetadata[key]" + name="{{key}}" + data-tests-id="{{key}}" + /> + </div> + </ng-container> + </div> + <!--------------------- Category Specific Metadata --------------------> + + <!--------------------- RESOURCE TAGS --------------------> + <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.tags)}"> + <label class="i-sdc-form-label" translate="GENERAL_LABEL_TAGS"></label> + + <sdc-tags form-element="editForm" element-name="tags" max-tags="20" class="i-sdc-form-item-tags" + sdc-disabled="isViewMode()" + tags="component.tags" + pattern="validation.tagValidationPattern" + special-tag="component.name"></sdc-tags> + + <div class="input-error" data-ng-show="validateField(editForm.tags)"> + <span ng-show="editForm.tags.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> + <span ng-show="editForm.tags.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_TAG_NAME_EXIST"></span> + </div> + </div> + <!--------------------- RESOURCE TAGS --------------------> + + <!--------------------- DESCRIPTION --------------------> + <div class="i-sdc-form-item description-field" + data-ng-class="{'error': validateField(editForm.description)}"> + <label class="i-sdc-form-label required" translate="GENERAL_LABEL_DESCRIPTION"></label> + <textarea class="description" + name="description" + data-ng-class="{'view-mode': isViewMode()}" + data-ng-maxlength="1024" + data-required + data-ng-model="component.description" + data-ng-model-options="{ debounce: 500 }" + data-ng-pattern="validation.commentValidationPattern" + data-tests-id="description"></textarea> + + <div class="input-error" data-ng-show="validateField(editForm.description)"> + <span ng-show="editForm.description.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_DESCRIPTION_REQUIRED"></span> + <span ng-show="editForm.description.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '1024' }"></span> + <span ng-show="editForm.description.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> + </div> + </div> + <!--------------------- DESCRIPTION --------------------> + + </div><!-- Close w-sdc-form-column --> + + <div class="w-sdc-form-column"> + <!--------------------- IMPORT TOSCA FILE USING BROWSE (ALSO VFC) --------------------> + <div class="i-sdc-form-item" ng-if="isShowFileBrowse"> + + <label class="i-sdc-form-label" data-ng-class="{'required':isCreateMode() && component.resourceType !=='VF'}">{{browseFileLabel}}</label> + <file-upload id="fileUploadElement" + class="i-sdc-form-input" + element-name="fileElement" + data-ng-required="false" + element-disabled="{{(!isCreateMode()&&!(isEditMode()&&component.resourceType=='VF'))|| isViewMode() || component.vspArchived}}" + form-element="editForm" + file-model="component.importedFile" + on-file-changed-in-directive="onImportFileChange" + extensions="{{importedFileExtension}}" + default-text="'Browse to select file'" + ></file-upload> + </div> + + <!--------------------- IMPORT TOSCA FILE USING ONBOARDING --------------------> + <div class="i-sdc-form-item" ng-if="isShowOnboardingSelectionBrowse && !isShowFileBrowse"> + <label class="i-sdc-form-label required">VSP</label> + <div class="i-sdc-form-file-upload i-sdc-form-input"> + <span class="i-sdc-form-file-name" data-ng-disabled="component.vspArchived" data-tests-id="filename">{{(fileModel && fileModel.filename) || importedToscaBrowseFileText }}</span> + <div class="i-sdc-form-file-upload-x-btn" ng-click="cancel()" data-ng-show="fileModel.filename && fileModel.filename!=='' && elementDisabled!=='true'"></div> + <input type="button" data-ng-class="{'disabled': !isEditMode() && component.vspArchived}" data-ng-disabled="component.vspArchived" name="fileElement" /> + <div class="file-upload-browse-btn" data-ng-class="{'disabled': !isEditMode() && !component.vspArchived}" data-ng-click="openOnBoardingModal()" data-ng-disabled="!component.vspArchived" data-tests-id="browseButton">Browse</div> + </div> + </div> + + <div class="input-error-file-upload" data-ng-disabled="!component.archived" data-ng-show="component.importedFile && (!editForm.fileElement.$valid || !component.importedFile.filename)"> + <!-- editForm.fileElement.$error.required <== Can not use this, because the browse is done from outside for the first time --> + <span ng-show="!(isEditMode()&&component.resourceType=='VF')&&!component.importedFile.filename" translate="NEW_SERVICE_RESOURCE_ERROR_TOSCA_FILE_REQUIRED"></span><!-- Required --> + <span ng-show="editForm.fileElement.$error.maxsize" translate="VALIDATION_ERROR_MAX_FILE_SIZE"></span> + <span ng-show="editForm.fileElement.$error.filetype" translate="NEW_SERVICE_RESOURCE_ERROR_VALID_TOSCA_EXTENSIONS" translate-values="{'extensions': '{{importedFileExtension}}' }"></span> + <span ng-show="editForm.fileElement.$error.emptyFile" translate="VALIDATION_ERROR_EMPTY_FILE"></span> + </div> + <!--------------------- IMPORT TOSCA FILE --------------------> + + <!--------------------- USER ID --------------------> + <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.contactId)}"> + <label class="i-sdc-form-label required" translate="GENERAL_LABEL_CONTACT_ID"></label> + <input class="i-sdc-form-input" type="text" + data-ng-model="component.contactId" + data-ng-class="{'view-mode': isViewMode()}" + data-ng-required="true" + name="contactId" + data-ng-pattern="validation.contactIdValidationPattern" + data-ng-model-options="{ debounce: 500 }" + data-tests-id="contactId" + data-ng-maxlength="50" + /> + + <div class="input-error" data-ng-show="validateField(editForm.contactId)"> + <span ng-show="editForm.contactId.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span> + <span ng-show="editForm.contactId.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_REQUIRED"></span> + <span ng-show="editForm.contactId.$error.pattern" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_NOT_VALID"></span> + </div> + </div> + <!--------------------- USER ID --------------------> + + <!--------------------- VENDOR NAME --------------------> + <div ng-if="component.isResource()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.vendorName)}"> + <label class="i-sdc-form-label required" translate="GENERAL_LABEL_VENDOR_NAME"></label> + <input class="i-sdc-form-input" type="text" + data-ng-class="{'view-mode': isViewMode()}" + data-ng-model="component.vendorName" + data-ng-model-options="{ debounce: 500 }" + data-ng-maxlength="60" + data-required + ng-click="oldValue = component.vendorName" + name="vendorName" + data-ng-change="onVendorNameChange(oldValue)" + data-ng-pattern="validation.VendorNameValidationPattern" + data-ng-disabled="component.isAlreadyCertified() || (component.isCsarComponent() && component.vendorName && component.vendorName!=='')" + data-tests-id="vendorName" + /> + + <div class="input-error" data-ng-show="validateField(editForm.vendorName)"> + <span ng-show="editForm.vendorName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_VENDOR_NAME_REQUIRED"></span> + <span ng-show="editForm.vendorName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '60' }"></span> + <span ng-show="editForm.vendorName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> + </div> + + </div> + <!--------------------- VENDOR NAME --------------------> + + <!--------------------- VENDOR RELEASE --------------------> + <div ng-if="component.isResource()" + class="i-sdc-form-item" + data-ng-class="{'error': validateField(editForm.vendorRelease)}"> + <label class="i-sdc-form-label required" translate="GENERAL_LABEL_VENDOR_RELEASE"></label> + <input class="i-sdc-form-input" type="text" + data-ng-class="{'view-mode': isViewMode()}" + data-ng-model="component.vendorRelease" + data-ng-model-options="{ debounce: 500 }" + data-ng-maxlength="25" + data-required + name="vendorRelease" + data-ng-pattern="validation.VendorReleaseValidationPattern" + data-ng-disabled="component.isCsarComponent() && component.vendorRelease && component.vendorRelease!==''" + data-tests-id="vendorRelease" + /> + + <div class="input-error" data-ng-show="validateField(editForm.vendorRelease)"> + <span ng-show="editForm.vendorRelease.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_VENDOR_RELEASE_REQUIRED"></span> + <span ng-show="editForm.vendorRelease.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '25' }"></span> + <span ng-show="editForm.vendorRelease.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> + </div> + </div> + <!--------------------- VENDOR RELEASE --------------------> + + <!--------------------- Resource Model Number --------------------> + <div ng-if="component.isResource()" + class="i-sdc-form-item" + data-ng-class="{'error': validateField(editForm.resourceVendorModelNumber)}"> + <label class="i-sdc-form-label" translate="GENERAL_LABEL_RESOURCE_MODEL_NUMBER"></label> + <input class="i-sdc-form-input" type="text" + data-ng-class="{'view-mode': isViewMode()}" + data-ng-model="component.resourceVendorModelNumber" + data-ng-model-options="{ debounce: 500 }" + data-ng-maxlength="65" + name="resourceVendorModelNumber" + data-ng-pattern="validation.VendorModelNumberValidationPattern" + data-tests-id="resourceVendorModelNumber" + /> + + <div class="input-error" data-ng-show="validateField(editForm.resourceVendorModelNumber)"> + <span ng-show="editForm.resourceVendorModelNumber.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '65' }"></span> + <span ng-show="editForm.resourceVendorModelNumber.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> + </div> + </div> + <!--------------------- Resource Model Number --------------------> + + <!--------------------- ECOMPGENERATEDNAMING --------------------> + <div class="i-sdc-form-item" + data-ng-class="{'error': validateField(editForm.ecompGeneratedNaming)}" + data-ng-if="component.isService() && !isNotApplicableMetadataKeys('Generated Naming')"> + <label class="i-sdc-form-label">Generated Naming</label> + <select class="i-sdc-form-select" + data-required + name="ecompGeneratedNaming" + data-ng-change="onEcompGeneratedNamingChange()" + data-ng-class="{'view-mode': isViewMode()}" + data-ng-model="component.ecompGeneratedNaming" + data-tests-id="ecompGeneratedNaming"> + <option ng-value="true">true</option> + <option ng-value="false">false</option> + </select> + <div class="input-error" data-ng-show="validateField(editForm.ecompGeneratedNaming)"> + + </div> + </div> + <!--------------------- CATEGORIES --------------------> + + <!--------------------- NAMING POLICY --------------------> + <div ng-if="component.isService() && !isNotApplicableMetadataKeys('Naming Policy')" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.namingPolicy)}"> + <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Naming Policy', 'namingPolicy')"> + <div ng-if="isMetadataKeyMandatory('Naming Policy')"> + <label class="i-sdc-form-label required">Naming Policy</label> + </div> + <div ng-if="!isMetadataKeyMandatory('Naming Policy')"> + <label class="i-sdc-form-label">Naming Policy</label> + </div> + <select class="i-sdc-form-input" type="text" + ng-required="isMetadataKeyMandatory('Naming Policy')" + data-ng-class="{'view-mode': isViewMode()}" + data-ng-model="component.namingPolicy" + data-ng-model-options="{ debounce: 500 }" + name="namingPolicy" + data-tests-id="namingPolicy" + data-ng-maxlength="256" + data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern" + > <option ng-repeat="value in getMetadataKeyValidValues('Naming Policy')">{{value}}</option> + </select> + </div> + <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Naming Policy')"> + <label class="i-sdc-form-label">Naming Policy</label> + <input class="i-sdc-form-input" + name="namingPolicy" + data-ng-class="{'view-mode': isViewMode() || !component.ecompGeneratedNaming}" + data-ng-maxlength="100" + data-ng-model="component.namingPolicy" + type="text" + data-ng-model-options="{ debounce: 500 }" + data-ng-pattern="validation.commentValidationPattern" + data-tests-id="namingPolicy" + autofocus + ng-readonly="isViewMode() || !component.ecompGeneratedNaming" + /> + </div> + <div class="input-error" data-ng-show="validateField(editForm.namingPolicy)"> + <span ng-show="editForm.namingPolicy.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span> + <span ng-show="editForm.namingPolicy.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> + </div> + </div> + <!--------------------- NAMING POLICY --------------------> + + <!--------------------- Service Type --------------------> + <div ng-if="component.isService() && !isNotApplicableMetadataKeys('Service Type')" + class="i-sdc-form-item" + data-ng-class="{'error': validateField(editForm.serviceFunctionType)}"> + <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Service Type', 'serviceType')"> + <div ng-if="isMetadataKeyMandatory('Service Type')"> + <label class="i-sdc-form-label required" translate="GENERAL_TAB_LABEL_SERVICE_TYPE"></label> + </div> + <div ng-if="!isMetadataKeyMandatory('Service Type')"> + <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_TYPE"></label> + </div> + <select class="i-sdc-form-input" type="text" + ng-required="isMetadataKeyMandatory('Service Type')" + data-ng-class="{'view-mode': isViewMode()}" + data-ng-model="component.serviceType" + data-ng-model-options="{ debounce: 500 }" + name="serviceType" + data-tests-id="serviceType" + data-ng-maxlength="256" + data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern" + > <option ng-repeat="value in getMetadataKeyValidValues('Service Type')">{{value}}</option> + </select> + </div> + <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Service Type')"> + <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_TYPE"></label> + <input class="i-sdc-form-input" type="text" + data-ng-class="{'view-mode': isViewMode()}" + data-ng-model="component.serviceType" + data-ng-model-options="{ debounce: 500 }" + name="serviceType" + data-tests-id="serviceType" + data-ng-maxlength="256" + data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern" + /> + </div> + <div class="input-error" data-ng-show="validateField(editForm.serviceType)"> + <span ng-show="editForm.serviceType.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span> + <span ng-show="editForm.serviceType.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> + </div> + </div> + <!--------------------- Service Type --------------------> + + <!--------------------- Service Role --------------------> + <div ng-if="component.isService() && !isNotApplicableMetadataKeys('Service Role')" + class="i-sdc-form-item" + data-ng-class="{'error': validateField(editForm.serviceRole)}"> + <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Service Role', 'serviceRole')"> + <div ng-if="isMetadataKeyMandatory('Service Role')"> + <label class="i-sdc-form-label required" translate="GENERAL_TAB_LABEL_SERVICE_ROLE"></label> + </div> + <div ng-if="!isMetadataKeyMandatory('Service Role')"> + <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_ROLE"></label> + </div> + <select class="i-sdc-form-input" type="text" + ng-required="isMetadataKeyMandatory('Service Role')" + data-ng-class="{'view-mode': isViewMode()}" + data-ng-model="component.serviceRole" + data-ng-model-options="{ debounce: 500 }" + name="serviceRole" + data-tests-id="serviceRole" + data-ng-maxlength="256" + > <option ng-repeat="value in getMetadataKeyValidValues('Service Role')">{{value}}</option> + </select> + </div> + <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Service Role')"> + <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_ROLE"></label> + <input class="i-sdc-form-input" type="text" + data-ng-class="{'view-mode': isViewMode()}" + data-ng-model="component.serviceRole" + data-ng-model-options="{ debounce: 500 }" + name="serviceRole" + data-tests-id="serviceRole" + data-ng-maxlength="256" + data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern" + /> + </div> + <div class="input-error" data-ng-show="validateField(editForm.serviceRole)"> + <span ng-show="editForm.serviceRole.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span> + <span ng-show="editForm.serviceRole.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> + </div> + </div> + <!--------------------- Service Role --------------------> + + <!--------------------- Service Function --------------------> + <div ng-if="component.isService() && !isNotApplicableMetadataKeys('Service Function')" + class="i-sdc-form-item" + data-ng-class="{'error': validateField(editForm.serviceFunction)}"> + <div ng-if="component.selectedCategory && isMetadataKeyForComponentCategoryService('Service Function', 'serviceFunction')"> + <div ng-if="isMetadataKeyMandatory('Service Function')"> + <label class="i-sdc-form-label required" translate="GENERAL_TAB_LABEL_SERVICE_FUNCTION"></label> + </div> + <div ng-if="!isMetadataKeyMandatory('Service Function')"> + <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_FUNCTION"></label> + </div> + <select class="i-sdc-form-input" type="text" + ng-required="isMetadataKeyMandatory('Service Function')" + data-ng-class="{'view-mode': isViewMode()}" + data-ng-model="component.serviceFunction" + data-ng-model-options="{ debounce: 500 }" + name="serviceFunction" + data-tests-id="serviceFunction" + data-ng-maxlength="256" + data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern" + > <option ng-repeat="value in getMetadataKeyValidValues('Service Function')">{{value}}</option> + </select> + </div> + <div ng-if="!component.selectedCategory || !isMetadataKeyForComponentCategory('Service Function')"> + <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_FUNCTION"></label> + <input class="i-sdc-form-input" type="text" + data-ng-class="{'view-mode': isViewMode()}" + data-ng-model="component.serviceFunction" + name="serviceFunction" + data-tests-id="serviceFunction" + data-ng-maxlength="256" + data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern" + /> + </div> + <div class="input-error" data-ng-show="validateField(editForm.serviceFunction)"> + <span ng-show="editForm.serviceFunction.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span> + <span ng-show="editForm.serviceFunction.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> + </div> + </div> + <!--------------------- Service Function --------------------> + + <!-------------------- ENVIRONMENT CONTEXT -----------------> + <div ng-if="component.isService() && !isNotApplicableMetadataKeys('Environment Context')" class="i-sdc-form-item"> + <loader data-display="!environmentContextObj && !initEnvironmentContext()" relative="true"></loader> + <label class="i-sdc-form-label">Environment Context</label> + <select class="i-sdc-form-select" + name="environmentContext" + data-ng-class="{'view-mode': isViewMode()}" + data-ng-model="component.environmentContext" + data-tests-id="environmentContext" + > + <option data-ng-repeat="environmentContextVal in (environmentContextObj.validValues) | orderBy" + value="{{environmentContextVal}}" + data-tests-id="{{environmentContextVal}}">{{environmentContextVal}}</option> + </select> + + </div> + <!--------------------- ENVIRONMENT CONTEXT ------------------> + + <!--------------------- Instantiation Type --------------------> + <div class="i-sdc-form-item" data-ng-if="component.isService() && instantiationTypes && !isNotApplicableMetadataKeys('Instantiation Type')"> + <label class="i-sdc-form-label">Instantiation Type</label> + <select class="i-sdc-form-select" + name="instantiationType" + data-ng-class="{'view-mode': isViewMode()}" + data-ng-disabled="component.isCsarComponent()" + data-ng-model="component.instantiationType" + data-tests-id="selectInstantiationType"> + <option ng-repeat="type in instantiationTypes">{{type}}</option> + + </select> + </div> + <!--------------------- Instantiation Type --------------------> + + <!--------------------- Base Type --------------------> + <div class="w-sdc-form-columns-wrapper"> + <div class="w-sdc-form-column"> + <div class="i-sdc-form-item" ng-if="component.isService() && baseTypes && baseTypes.length > 0 && !isNotApplicableMetadataKeys('Substitution Node Type')"> + <label class="i-sdc-form-label">Substitution Node Type</label> + <select class="i-sdc-form-select" + name="baseType" + data-ng-class="{'view-mode': isViewMode()}" + data-ng-disabled="component.isCsarComponent() || !isCreateMode()" + data-ng-model="component.derivedFromGenericType" + data-ng-change="onBaseTypeChange()" + data-tests-id="selectBaseType" + data-ng-options="type for type in baseTypes track by type"> + <option value="" data-ng-if="!isBaseTypeRequired">None</option> + </select> + </div> + </div> + <div class="w-sdc-form-column"> + <div class="i-sdc-form-item" data-ng-if="component.isService() && showBaseTypeVersions && !isNotApplicableMetadataKeys('Substitution Node Type Version')"> + <label class="i-sdc-form-label">Substitution Node Type Version</label> + <select class="i-sdc-form-select" + name="baseTypeVersion" + data-ng-class="{'view-mode': isViewMode()}" + data-ng-disabled="component.isCsarComponent() || !isCreateMode()" + data-ng-model="component.derivedFromGenericVersion" + data-tests-id="selectBaseTypeVersion"> + <option ng-repeat="version in baseTypeVersions">{{version}}</option> + </select> + </div> + </div> + </div> + <!--------------------- Base Type --------------------> + + <div class="meta-data" data-ng-if="component.creationDate"> + <div> + <strong>Created:</strong> + </div> + <div class="meta-data-item-value">{{component.creationDate | date:'MM/dd/yyyy'}}, {{component.creatorFullName}}</div> + <div> + <strong>Modifed:</strong> + </div> + <div class="meta-data-item-value"> + {{component.lastUpdateDate | date:'MM/dd/yyyy'}} + </div> + <div> + <strong>UUID:</strong> + </div> + <div class="meta-data-item-value"> + {{component.uuid}} + </div> + <div> + <strong>Invariant UUID:</strong> + </div> + <div class="meta-data-item-value"> + {{component.invariantUUID}} </div> + </div> + </div><!-- Close w-sdc-form-column --> + </div> - </div><!-- Close w-sdc-form-section-container --> + </div><!-- Close w-sdc-form-section-container --> - </form> + </form> </div> |