New Angular UI from 1806

Change-Id: I39c160db0e0a6ec2e587ccf007ee1b23c6a08666
Issue-ID: VID-208
Signed-off-by: Sonsino, Ofir (os0695) <os0695@intl.att.com>

31 files changed, 622 insertions, 0 deletions

diff --git a/vid-webpack-master/src/app/shared/models/ServiceNodeTypes.ts b/vid-webpack-master/src/app/shared/models/ServiceNodeTypes.ts
new file mode 100644
index 000000000..f72b32d8b
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/ServiceNodeTypes.ts
@@ -0,0 +1,8 @@
+export enum ServiceNodeTypes {
+  VF = "VF",
+  VFmodule = "VFmodule",
+  Network = "Network",
+  Configuration = "Configuration"
+}
+
+
diff --git a/vid-webpack-master/src/app/shared/models/aicZone.ts b/vid-webpack-master/src/app/shared/models/aicZone.ts
new file mode 100644
index 000000000..7b9e1ed4e
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/aicZone.ts
@@ -0,0 +1,9 @@
+export class AicZone {
+  id: string;
+  name: string;
+
+  constructor(serviceJson){
+    this.id = serviceJson["zone-id"];
+    this.name = serviceJson["zone-name"];
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/categoryParams.ts b/vid-webpack-master/src/app/shared/models/categoryParams.ts
new file mode 100644
index 000000000..9e0052979
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/categoryParams.ts
@@ -0,0 +1,15 @@
+import {SelectOptionInterface} from "./selectOption";
+
+export class CategoryParams {
+  owningEntityList: SelectOptionInterface[];
+  projectList: SelectOptionInterface[];
+  lineOfBusinessList: SelectOptionInterface[];
+  platformList: SelectOptionInterface[];
+
+  constructor(owningEntityList=[], projectList=[], lob=[], platform=[]){
+    this.owningEntityList = owningEntityList;
+    this.projectList = projectList;
+    this.lineOfBusinessList = lob;
+    this.platformList = platform;
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/dynamicInput.ts b/vid-webpack-master/src/app/shared/models/dynamicInput.ts
new file mode 100644
index 000000000..a08cdfc77
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/dynamicInput.ts
@@ -0,0 +1,123 @@
+export class DynamicInput<T>{
+
+  id: string;
+  name: string;
+  type: string;
+  description: string;
+  value: T;
+  prompt: any;
+  maxLength: number;
+  minLength: number;
+  isVisible: boolean;
+  isRequired: boolean;
+  isEnabled: boolean;
+  isReadOnly: boolean;
+
+
+  constructor(options: {
+    id?: string,
+    name?: string,
+    type: string,
+    description?: string,
+    value?: T,
+    prompt?: any,
+    maxLength?: number,
+    minLength?: number,
+    isVisible?: boolean,
+    isRequired?: boolean,
+    isEnabled?: boolean,
+    isReadOnly?: boolean,
+  }) {
+    this.id = options.id;
+    this.name = options.name || '';
+    this.type = options.type;
+    this.description = options.description || '';
+    this.value = options.value;
+    this.prompt = options.prompt;
+    this.maxLength = options.maxLength;
+    this.minLength = options.minLength;
+    this.isVisible = options.isVisible == false? options.isVisible: true;
+    this.isEnabled = options.isEnabled == false? options.isEnabled: true;
+    this.isRequired = options.isRequired == null? false: options.isRequired;
+    this.isReadOnly = options.isReadOnly == null? false: options.isReadOnly;
+  }
+}
+
+export class DynamicNumber extends DynamicInput<number> {
+
+  max: number;
+  min: number;
+
+  constructor(options: {
+    id?: string,
+    name?: string,
+    type: string,
+    description?: string,
+    value?: number,
+    prompt?: any,
+    maxLength?: number,
+    minLength?: number,
+    isVisible?: boolean,
+    isRequired?: boolean,
+    isEnabled?: boolean,
+    isReadOnly?: boolean,
+    max?: number,
+    min?: number
+  }){
+    super(options);
+    this.max = options.max;
+    this.min = options.min;
+  }
+
+}
+
+export class DynamicSelect extends DynamicInput<any> {
+  optionList: any[];
+
+  constructor(options: {
+    id?: string,
+    name?: string,
+    type: string,
+    description?: string,
+    value?: any,
+    prompt?: any,
+    maxLength?: number,
+    minLength?: number,
+    isVisible?: boolean,
+    isRequired?: boolean,
+    isEnabled?: boolean,
+    isReadOnly?: boolean,
+    optionList?: any[]
+  }) {
+    super(options);
+    this.optionList = options.optionList || [];
+  }
+}
+
+export class DynamicMultiSelect extends DynamicSelect {
+  selectedItems: any[];
+  settings: any;
+
+  constructor(options: {
+    id?: string,
+    name?: string,
+    type: string,
+    description?: string,
+    value?: any,
+    prompt?: any,
+    maxLength?: number,
+    minLength?: number,
+    isVisible?: boolean,
+    isRequired?: boolean,
+    isEnabled?: boolean,
+    isReadOnly?: boolean,
+    settings?: any,
+    optionList?: any[],
+    selectedItems?: any[]
+  }) {
+    super(options);
+    this.settings = options.settings || {};
+    this.selectedItems = options.selectedItems || [];
+  }
+}
+
diff --git a/vid-webpack-master/src/app/shared/models/externalComponentStatus.ts b/vid-webpack-master/src/app/shared/models/externalComponentStatus.ts
new file mode 100644
index 000000000..21ef61a8a
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/externalComponentStatus.ts
@@ -0,0 +1,11 @@
+export class ExternalComponentStatus {
+  component: string;
+  available: boolean;
+  metadata: any;
+
+  constructor(component: string, available: boolean, metadata: any) {
+    this.component = component;
+    this.available = available;
+    this.metadata = metadata;
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/inputTypes.ts b/vid-webpack-master/src/app/shared/models/inputTypes.ts
new file mode 100644
index 000000000..1f7222f52
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/inputTypes.ts
@@ -0,0 +1,12 @@
+export enum  InputType {
+  LCP_REGION = "LCP_REGION",
+  TENANT = "TENANT",
+  LOB  = "LOB",
+  PLATFORM = "PLATFORM",
+  ROLLBACK = "ROLLBACK",
+  PRODUCT_FAMILY = "PRODUCT_FAMILY",
+  VG = "VG"
+
+}
+
+
diff --git a/vid-webpack-master/src/app/shared/models/lcpRegion.ts b/vid-webpack-master/src/app/shared/models/lcpRegion.ts
new file mode 100644
index 000000000..e39321d58
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/lcpRegion.ts
@@ -0,0 +1,11 @@
+export class LcpRegion {
+  id: string;
+  name: string;
+  isPermitted: boolean;
+
+  constructor(serviceJson){
+    this.id = serviceJson["cloudRegionID"];
+    this.name = serviceJson["cloudRegionID"];
+    this.isPermitted = serviceJson["is-permitted"];
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/lcpRegionTenants.ts b/vid-webpack-master/src/app/shared/models/lcpRegionTenants.ts
new file mode 100644
index 000000000..d215546aa
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/lcpRegionTenants.ts
@@ -0,0 +1,13 @@
+export class LcpRegionTenants {
+  id: string;
+  tenantId: string;
+  tenantName: string;
+  isPermitted: boolean;
+
+  constructor(serviceJson){
+    this.id = serviceJson["cloudRegionID"];
+    this.tenantId = serviceJson["tenantID"];
+    this.tenantName = serviceJson["tenantName"];
+    this.isPermitted = serviceJson["is-permitted"];
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/lcpRegionsAndTenants.ts b/vid-webpack-master/src/app/shared/models/lcpRegionsAndTenants.ts
new file mode 100644
index 000000000..79f6e07d4
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/lcpRegionsAndTenants.ts
@@ -0,0 +1,12 @@
+import {LcpRegion} from "./lcpRegion";
+import {Tenant} from "./tenant";
+
+export class LcpRegionsAndTenants {
+  lcpRegionList: LcpRegion[];
+  lcpRegionsTenantsMap: { [lcpRegion: string] : Tenant[]; };
+
+  constructor(lcpRegionList: LcpRegion[] = [], lcpRegionsTenantsMap: any = {}) {
+    this.lcpRegionList = lcpRegionList;
+    this.lcpRegionsTenantsMap = lcpRegionsTenantsMap;
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/modelInfo.ts b/vid-webpack-master/src/app/shared/models/modelInfo.ts
new file mode 100644
index 000000000..091c02ef1
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/modelInfo.ts
@@ -0,0 +1,21 @@
+
+export class ModelInfo {
+  modelInvariantId: string;
+  modelVersionId: string;
+  modelName: string;
+  modelVersion: string;
+  modelCustomizationId: string;
+  modelCustomizationName: string;
+
+
+
+  constructor(instanceModel) {
+    this.modelInvariantId = instanceModel.invariantUuid;
+    this.modelVersionId = instanceModel.uuid;
+    this.modelName = instanceModel.name;
+    this.modelVersion = instanceModel.version;
+    this.modelCustomizationId = instanceModel.customizationUuid;
+    this.modelCustomizationName = instanceModel.modelCustomizationName;
+  }
+}
+
diff --git a/vid-webpack-master/src/app/shared/models/nodeModel.ts b/vid-webpack-master/src/app/shared/models/nodeModel.ts
new file mode 100644
index 000000000..4b22b8d91
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/nodeModel.ts
@@ -0,0 +1,29 @@
+export interface NodeModelResponseInterface {
+  name: string;
+  version: string;
+  description: string;
+  category: string;
+  uuid: string;
+  invariantUuid: string;
+}
+
+export class NodeModel {
+  name: string;
+  version: string;
+  description: string;
+  category: string;
+  uuid: string;
+  invariantUuid: string;
+
+  constructor(serviceJson?: NodeModelResponseInterface) {
+    if (serviceJson) {
+      this.name = serviceJson.name;
+      this.version = serviceJson.version;
+      this.description = serviceJson.description;
+      this.category = serviceJson.category;
+      this.uuid = serviceJson.uuid;
+      this.invariantUuid = serviceJson.invariantUuid;
+    }
+  }
+
+}
diff --git a/vid-webpack-master/src/app/shared/models/owningEntity.ts b/vid-webpack-master/src/app/shared/models/owningEntity.ts
new file mode 100644
index 000000000..f06b24ff0
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/owningEntity.ts
@@ -0,0 +1,14 @@
+interface OwningEntityResponse {
+  id: string,
+  name: string
+}
+
+export class OwningEntity {
+  id: string;
+  name: string;
+
+  constructor(serviceJson: OwningEntityResponse){
+    this.id = serviceJson.id;
+    this.name = serviceJson.name;
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/productFamily.ts b/vid-webpack-master/src/app/shared/models/productFamily.ts
new file mode 100644
index 000000000..3c55ac004
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/productFamily.ts
@@ -0,0 +1,13 @@
+import {ServiceResponseInterface} from "../../services/aaiService/responseInterfaces/getServicesResponseInterface";
+
+export class ProductFamily {
+  id: string;
+  name: string;
+  isPermitted: boolean;
+
+  constructor(serviceResponse: ServiceResponseInterface){
+    this.id = serviceResponse['service-id'];
+    this.name = serviceResponse["service-description"];
+    this.isPermitted = serviceResponse["is-permitted"];
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/project.ts b/vid-webpack-master/src/app/shared/models/project.ts
new file mode 100644
index 000000000..db8929e38
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/project.ts
@@ -0,0 +1,14 @@
+interface ProjectResponseInterface {
+  id: string,
+  name: string
+}
+
+export class Project {
+  id: string;
+  name: string;
+
+  constructor(projectResponse: ProjectResponseInterface){
+    this.id = projectResponse.id;
+    this.name = projectResponse.name;
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/selectOption.ts b/vid-webpack-master/src/app/shared/models/selectOption.ts
new file mode 100644
index 000000000..c12c1a823
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/selectOption.ts
@@ -0,0 +1,17 @@
+export interface SelectOptionInterface {
+  id: string,
+  name: string
+  isPermitted?: boolean
+}
+
+export class SelectOption {
+  id: string;
+  name: string;
+  isPermitted?: boolean;
+
+  constructor(option: SelectOptionInterface){
+    this.id = option.id;
+    this.name = option.name;
+    this.isPermitted = option.isPermitted;
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/serviceInstance.ts b/vid-webpack-master/src/app/shared/models/serviceInstance.ts
new file mode 100644
index 000000000..a952430b0
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/serviceInstance.ts
@@ -0,0 +1,28 @@
+import {VnfInstance} from "./vnfInstance";
+
+export class ServiceInstance {
+  instanceName: string;
+  isUserProvidedNaming: boolean;
+  globalSubscriberId: string;
+  productFamilyId: string;
+  subscriptionServiceType: string;
+  lcpCloudRegionId: string;
+  tenantId: string;
+  tenantName: string;
+  aicZoneId: string;
+  aicZoneName: string;
+  projectName: string;
+  owningEntityId: string;
+  owningEntityName: string;
+  pause: boolean;
+  bulkSize: number;
+  vnfs: { [vnf_module_model_name: string] : VnfInstance; };
+  instanceParams: { [key: string] : string; };
+  rollbackOnFailure : boolean;
+  subscriberName : string;
+
+  constructor() {
+    this.vnfs = {};
+    this.instanceParams = {};
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/serviceModel.ts b/vid-webpack-master/src/app/shared/models/serviceModel.ts
new file mode 100644
index 000000000..18d8582e8
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/serviceModel.ts
@@ -0,0 +1,44 @@
+import {NodeModel, NodeModelResponseInterface} from "./nodeModel";
+import * as _ from "lodash";
+
+
+export interface ServiceModelResponseInterface extends NodeModelResponseInterface{
+
+  serviceType: string;
+  serviceRole: string;
+  serviceEcompNaming: boolean;
+}
+
+export class ServiceModel extends NodeModel{
+
+  serviceType: string;
+  serviceRole: string;
+  servicesQty: number;
+  isUserProvidedNaming: boolean;
+  isMultiStepDesign: boolean;
+
+  constructor(serviceModelJson?: any){
+    super(serviceModelJson.service);
+    if (serviceModelJson) {
+      const service: ServiceModelResponseInterface = serviceModelJson.service;
+      this.serviceType = service.serviceType;
+      this.serviceRole = service.serviceRole;
+      this.isUserProvidedNaming = this.getIsUserProvidedName(service);
+      this.isMultiStepDesign = this.getIsMultiStepDesign(serviceModelJson);
+    }
+  }
+
+  private getIsUserProvidedName(serviceJson): boolean {
+    return serviceJson.serviceEcompNaming !== undefined && serviceJson.serviceEcompNaming === "false";
+  };
+
+  private getIsMultiStepDesign(serviceModel): boolean {
+    for (let key in serviceModel.vnfs) {
+      const vnf = serviceModel.vnfs[key];
+      if (vnf.properties.multi_stage_design === "true") {
+        return true
+      }
+    }
+    return false;
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/serviceNodeTypeToModelKeyMapper.ts b/vid-webpack-master/src/app/shared/models/serviceNodeTypeToModelKeyMapper.ts
new file mode 100644
index 000000000..1134bbb89
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/serviceNodeTypeToModelKeyMapper.ts
@@ -0,0 +1,8 @@
+export enum ServiceNodeTypeToModelKeyMapper {
+  VF = "vnfs",
+  VFmodule="vfModules",
+  Network = "networks",
+  Configuration = "configurations"
+}
+
+
diff --git a/vid-webpack-master/src/app/shared/models/serviceType.ts b/vid-webpack-master/src/app/shared/models/serviceType.ts
new file mode 100644
index 000000000..67aacdc07
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/serviceType.ts
@@ -0,0 +1,17 @@
+export interface SubscriptionResponseInterface {
+  'service-type': string
+  'is-permitted': boolean
+}
+
+export class ServiceType {
+  id: string;
+  name: string;
+  isPermitted: boolean;
+
+
+  constructor(id: string, subscription: SubscriptionResponseInterface){
+    this.id = id;
+    this.name = subscription['service-type'];
+    this.isPermitted = subscription['is-permitted'];
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/subscriber.ts b/vid-webpack-master/src/app/shared/models/subscriber.ts
new file mode 100644
index 000000000..55fc83792
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/subscriber.ts
@@ -0,0 +1,11 @@
+export class Subscriber {
+  id: string;
+  name: string;
+  isPermitted: boolean;
+
+  constructor(subscriberResponse){
+    this.id = subscriberResponse['global-customer-id'];
+    this.name = subscriberResponse['subscriber-name'];
+    this.isPermitted = subscriberResponse['is-permitted'];
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/tenant.ts b/vid-webpack-master/src/app/shared/models/tenant.ts
new file mode 100644
index 000000000..234f1dbff
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/tenant.ts
@@ -0,0 +1,11 @@
+export class Tenant {
+  id: string;
+  name: string;
+  isPermitted: boolean;
+
+  constructor(serviceJson){
+    this.id = serviceJson["tenantID"];
+    this.name = serviceJson["tenantName"];
+    this.isPermitted = serviceJson["is-permitted"];
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/vfModule.ts b/vid-webpack-master/src/app/shared/models/vfModule.ts
new file mode 100644
index 000000000..21f43ed17
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/vfModule.ts
@@ -0,0 +1,39 @@
+import {NodeModel, NodeModelResponseInterface} from "./nodeModel";
+
+
+export interface properties{
+  initialCount: number;
+  maxCountInstances: number;
+  minCountInstances: number;
+}
+
+export interface VFModuleResponseInterface extends NodeModelResponseInterface {
+  customizationUuid: string;
+  modelCustomizationName: string;
+  properties: properties
+}
+
+export class VfModule extends NodeModel {
+
+  min:number;
+  max:number;
+  vgName:string;
+  rollbackOnFailure:boolean;
+  initial:number;
+  customizationUuid: string;
+  modelCustomizationName: string;
+
+  constructor(vf?: VFModuleResponseInterface) {
+    super(vf);
+    if(vf){
+      this.customizationUuid = vf.customizationUuid;
+      this.modelCustomizationName = vf.modelCustomizationName;
+    }
+    if (vf && vf.properties) {
+      this.min = vf.properties.minCountInstances;
+      this.max = vf.properties.maxCountInstances;
+      this.initial = vf.properties.initialCount;
+      this.rollbackOnFailure = true
+    }
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/vfModuleInstance.ts b/vid-webpack-master/src/app/shared/models/vfModuleInstance.ts
new file mode 100644
index 000000000..c6db00025
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/vfModuleInstance.ts
@@ -0,0 +1,5 @@
+export class VfModuleInstance {
+  instanceName: string;
+  volumeGroupName: string;
+  instanceParams: { [key: string] : string; };
+}
diff --git a/vid-webpack-master/src/app/shared/models/vfModuleTreeNode.ts b/vid-webpack-master/src/app/shared/models/vfModuleTreeNode.ts
new file mode 100644
index 000000000..d4cc7e9c7
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/vfModuleTreeNode.ts
@@ -0,0 +1,17 @@
+import {VfModule} from "./vfModule";
+import {VfModuleInstance} from "./vfModuleInstance";
+import {ServiceNodeTypes} from "./ServiceNodeTypes";
+
+export class VfModuleTreeNode {
+  modelId: string;
+  name: string;
+  modelName: string;
+  type: string;
+
+  constructor(vfModuleInstance: VfModuleInstance, vfModuleModel: VfModule, vfModuleModelName: string){
+    this.name = vfModuleInstance.instanceName || vfModuleInstance.volumeGroupName || '<Automatically Assigned>';
+    this.modelId = vfModuleModel.uuid;
+    this.modelName = vfModuleModelName;
+    this.type = ServiceNodeTypes.VFmodule;
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/vfModulesMap.ts b/vid-webpack-master/src/app/shared/models/vfModulesMap.ts
new file mode 100644
index 000000000..95396fd55
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/vfModulesMap.ts
@@ -0,0 +1,5 @@
+import {VfModuleInstance} from "./vfModuleInstance";
+
+export class VfModuleMap {
+   [id: string] : VfModuleInstance;
+}
diff --git a/vid-webpack-master/src/app/shared/models/vfcInstanceGroup.ts b/vid-webpack-master/src/app/shared/models/vfcInstanceGroup.ts
new file mode 100644
index 000000000..64354b01e
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/vfcInstanceGroup.ts
@@ -0,0 +1,14 @@
+import {VfcInstanceGroupProperties} from "./vfcInstanceGroupProperties";
+
+export class VfcInstanceGroup {
+  name: string;
+  version: string;
+  uuid: string;
+  invariantUuid: string;
+  vfcInstanceGroupProperties: VfcInstanceGroupProperties;
+
+
+}
+
+
+
diff --git a/vid-webpack-master/src/app/shared/models/vfcInstanceGroupMap.ts b/vid-webpack-master/src/app/shared/models/vfcInstanceGroupMap.ts
new file mode 100644
index 000000000..7ee3888c1
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/vfcInstanceGroupMap.ts
@@ -0,0 +1,5 @@
+import {VfcInstanceGroup} from "./vfcInstanceGroup";
+
+export class VfcInstanceGroupMap {
+  [id: string] : VfcInstanceGroup;
+}
diff --git a/vid-webpack-master/src/app/shared/models/vfcInstanceGroupProperties.ts b/vid-webpack-master/src/app/shared/models/vfcInstanceGroupProperties.ts
new file mode 100644
index 000000000..1a7bf718a
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/vfcInstanceGroupProperties.ts
@@ -0,0 +1,7 @@
+export class VfcInstanceGroupProperties {
+  networkCollectionFunction: string;
+  subinterfaceRole: string;
+  vfcInstanceGroupFunction: string;
+  vfcParentPortRole: string;
+
+}
diff --git a/vid-webpack-master/src/app/shared/models/vnfInstance.ts b/vid-webpack-master/src/app/shared/models/vnfInstance.ts
new file mode 100644
index 000000000..7f41e483a
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/vnfInstance.ts
@@ -0,0 +1,19 @@
+import {VfModuleMap} from "./vfModulesMap";
+
+export class VnfInstance {
+  instanceName: string;
+  isUserProvidedNaming: boolean;
+  productFamilyId: string;
+  lcpCloudRegionId: string;
+  legacyRegion: string;
+  tenantId: string;
+  platformName: string;
+  lineOfBusiness: string;
+  rollbackOnFailure: string;
+  vfModules: { [vf_module_model_name: string] : VfModuleMap; };
+
+  constructor() {
+    this.rollbackOnFailure = 'true';
+    this.vfModules = {};
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/vnfModel.ts b/vid-webpack-master/src/app/shared/models/vnfModel.ts
new file mode 100644
index 000000000..e1302f1d0
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/vnfModel.ts
@@ -0,0 +1,52 @@
+import {NodeModel, NodeModelResponseInterface} from "./nodeModel";
+import {VfcInstanceGroupMap} from "./vfcInstanceGroupMap";
+
+
+export interface VnfProperties {
+  ecomp_generated_naming: string
+}
+
+export interface VNFModelResponseInterface extends NodeModelResponseInterface{
+
+  serviceType: string;
+  serviceRole: string;
+  subCategory: string;
+  customizationUuid: string;
+  serviceEcompNaming: boolean;
+  type: string;
+  modelCustomizationName: string;
+  properties: VnfProperties;
+  vfcInstanceGroups: VfcInstanceGroupMap;
+}
+
+export class VNFModel extends NodeModel{
+
+  serviceType: string;
+  serviceRole: string;
+  subCategory: string;
+  customizationUuid: string;
+  isUserProvidedNaming: boolean;
+  type: string;
+  modelCustomizationName: string;
+  vfcInstanceGroups: VfcInstanceGroupMap;
+
+  constructor(vnfJson?: VNFModelResponseInterface){
+    super(vnfJson);
+    if (vnfJson) {
+      this.serviceType = vnfJson.serviceType;
+      this.serviceRole = vnfJson.serviceRole;
+      this.subCategory = vnfJson.subCategory;
+      this.customizationUuid = vnfJson.customizationUuid;
+      this.isUserProvidedNaming = this.getIsUserProvidedName(vnfJson);
+      this.type = vnfJson.type;
+      this.modelCustomizationName = vnfJson.modelCustomizationName;
+      this.vfcInstanceGroups = vnfJson.vfcInstanceGroups;
+
+    }
+  }
+
+  private getIsUserProvidedName(vnfJson) {
+    const ecompGeneratedNaming = vnfJson.properties.ecomp_generated_naming;
+    return ecompGeneratedNaming !== undefined && ecompGeneratedNaming === "false";
+  };
+}
diff --git a/vid-webpack-master/src/app/shared/models/vnfTreeNode.ts b/vid-webpack-master/src/app/shared/models/vnfTreeNode.ts
new file mode 100644
index 000000000..316bf3e8b
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/vnfTreeNode.ts
@@ -0,0 +1,18 @@
+import {VNFModel} from "./vnfModel";
+import {VnfInstance} from "./vnfInstance";
+import {VfModuleTreeNode} from "./vfModuleTreeNode";
+
+export class VnfTreeNode {
+  modelId: string;
+  name: string;
+  modelName: string;
+  type: string;
+  children: VfModuleTreeNode[];
+
+  constructor(instance: VnfInstance, vnfModel: VNFModel){
+    this.name = instance.instanceName || vnfModel['properties'].ecomp_generated_naming == 'false' ? vnfModel.modelCustomizationName : '<Automatically Assigned>';
+    this.modelId = vnfModel.uuid;
+    this.modelName = vnfModel.modelCustomizationName;
+    this.type = vnfModel.type;
+  }
+}