merge from ecomp a88f0072 - Modern UI

Issue-ID: VID-378
Change-Id: Ibcb23dd27f550cf32ce2fe0239f0f496ae014ff6
Signed-off-by: Ittay Stern <ittay.stern@att.com>

36 files changed, 783 insertions, 105 deletions

diff --git a/vid-webpack-master/src/app/shared/models/ServiceNodeTypes.ts b/vid-webpack-master/src/app/shared/models/ServiceNodeTypes.ts
index f72b32d8b..945c69be9 100644
--- a/vid-webpack-master/src/app/shared/models/ServiceNodeTypes.ts
+++ b/vid-webpack-master/src/app/shared/models/ServiceNodeTypes.ts
@@ -2,7 +2,9 @@ export enum ServiceNodeTypes {
   VF = "VF",
   VFmodule = "VFmodule",
   Network = "Network",
-  Configuration = "Configuration"
+  VL = 'VL',
+  Configuration = "Configuration",
+  VnfGroup = 'VnfGroup'
 }
 
 
diff --git a/vid-webpack-master/src/app/shared/models/VnfMember.ts b/vid-webpack-master/src/app/shared/models/VnfMember.ts
new file mode 100644
index 000000000..392f8ddf9
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/VnfMember.ts
@@ -0,0 +1,11 @@
+import {Level1Instance} from "./level1Instance";
+
+export class VnfMember extends Level1Instance{
+  serviceInstanceName: string;
+  serviceInstanceId: string;
+  tenantName: string;
+  constructor(){
+    super();
+  }
+
+}
diff --git a/vid-webpack-master/src/app/shared/models/formControlModels/checkboxFormControl.model.ts b/vid-webpack-master/src/app/shared/models/formControlModels/checkboxFormControl.model.ts
new file mode 100644
index 000000000..f505b5667
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/formControlModels/checkboxFormControl.model.ts
@@ -0,0 +1,11 @@
+import {FormControlModel} from "./formControl.model";
+import {FormControlType} from "./formControlTypes.enum";
+
+export class CheckboxFormControl extends FormControlModel{
+
+  constructor(data) {
+    super(data);
+    this.type = FormControlType.CHECKBOX;
+    this.validations = [];
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/formControlModels/dropdownFormControl.model.ts b/vid-webpack-master/src/app/shared/models/formControlModels/dropdownFormControl.model.ts
new file mode 100644
index 000000000..ba3e860e0
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/formControlModels/dropdownFormControl.model.ts
@@ -0,0 +1,29 @@
+import {FormControlModel} from "./formControl.model";
+import {FormGroup} from "@angular/forms";
+import {FormControlType} from "./formControlTypes.enum";
+import {Observable} from "rxjs";
+
+export class DropdownFormControl extends FormControlModel{
+  options$ : Observable<any[]> = null;
+  args : string[];
+  onInit: (data : DropdownFormControl, form: FormGroup) => Observable<any>;
+  selectedField : string;
+  onInitSelectedField : string[]; // key that should select from API response.
+  ngValue : string;
+  name : string;
+  hasEmptyOptions : boolean; // get empty result from API or REDUX.
+
+
+  constructor(data) {
+    super(data);
+    this.type = FormControlType.DROPDOWN;
+    this.options$ = data.options ? data.options$ : null;
+    this.onInit = data.onInit;
+    this.selectedField = data.selectedField;
+    this.onInitSelectedField = data.onInitSelectedField ? data.onInitSelectedField : null;
+    this.ngValue = data.selectedField ? data.selectedField : 'id';
+    this.name = data.name;
+    this.hasEmptyOptions = false;
+  }
+
+}
diff --git a/vid-webpack-master/src/app/shared/models/formControlModels/fileFormControl.model.ts b/vid-webpack-master/src/app/shared/models/formControlModels/fileFormControl.model.ts
new file mode 100644
index 000000000..7803fabf8
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/formControlModels/fileFormControl.model.ts
@@ -0,0 +1,18 @@
+import {CustomValidatorOptions, FormControlModel, ValidatorModel} from "./formControl.model";
+import {FormControlType} from "./formControlTypes.enum";
+import {InputFormControl} from "./inputFormControl.model";
+
+export class FileFormControl extends FormControlModel{
+  acceptedExtentions : String;
+  selectedFile : String;
+  onDelete? :Function;
+  hiddenFile: InputFormControl[];
+  constructor(data) {
+    super(data);
+    this.type = FormControlType.FILE;
+    this.selectedFile = data.selectedFile ? data.selectedFile : data.placeHolder;
+    this.acceptedExtentions = data.acceptedExtentions ? data.acceptedExtentions : '';
+    this.onDelete = data.onDelete ? data.onDelete : function () {};
+    this.hiddenFile = data.hiddenFile;
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/formControlModels/formControl.model.ts b/vid-webpack-master/src/app/shared/models/formControlModels/formControl.model.ts
new file mode 100644
index 000000000..24116549e
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/formControlModels/formControl.model.ts
@@ -0,0 +1,121 @@
+import {FormGroup, ValidatorFn, Validators} from "@angular/forms";
+import {Subject} from "rxjs/Subject";
+import {FormControlType} from "./formControlTypes.enum";
+import {CustomValidators} from "../../validators/uniqueName/uniqueName.validator";
+import * as _ from 'lodash';
+
+export class  FormControlModel {
+  formGroup : FormGroup;
+  controlName : string;
+  type : FormControlType;
+  displayName : string;
+  dataTestId : string;
+  placeHolder? : string;
+  tooltip? :string;
+  isDisabled? : boolean;
+  validations? : ValidatorModel[];
+  isVisible? : boolean;
+  value? : any;
+  originalValue?: any;
+  minLength?: number;
+  maxLength?: number;
+  onChange? : Function;
+  onBlur? : Function;
+  preventionsAttribute : AttributeMap[] = [];
+  waitFor? : Subject<string>[] = [];
+  hasErrors : () =>  string[];
+
+
+  constructor(data: any){
+    this.type = data.type;
+    this.displayName = data.displayName;
+    this.dataTestId = data.dataTestId;
+    this.placeHolder = data.placeHolder;
+    this.tooltip = data.tooltip;
+    this.isDisabled = data.isDisabled || false;
+    this.validations = data.validations || [];
+    this.isVisible = !_.isNil(data.isVisible)  ? data.isVisible : true;
+    this.value = data.value;
+    this.originalValue = data.value;
+    this.controlName = data.controlName;
+    this.minLength = data.minLength;
+    this.maxLength = data.maxLength;
+    this.preventionsAttribute = data.preventionsAttribute || [];
+    this.onBlur = function(){};
+    this.onChange = data.onChange ? data.onChange: function () {}
+  }
+
+  isRequired() : boolean {
+    for(let validtorsModel of this.validations){
+      let required = 'required';
+      if(validtorsModel.validatorName.toString() === required){
+        return true;
+      }
+    }
+    return false;
+  }
+
+  getPreventionAttribute() : AttributeMap[] {
+    let result : AttributeMap[] = [new AttributeMap('data-tests-id', this.dataTestId)];
+    return this.preventionsAttribute.concat(result);
+  }
+}
+
+
+
+export class ValidatorModel {
+  validator : ValidatorFn;
+  validatorArg? : any;
+  validatorName : ValidatorOptions | CustomValidatorOptions;
+  errorMsg : string;
+
+  constructor(validatorName : ValidatorOptions | CustomValidatorOptions, errorMsg : string, validatorArg: any = null){
+    this.validatorName = validatorName;
+    this.validator = this.setValidator(validatorName, validatorArg);
+    this.errorMsg = errorMsg;
+    this.validatorArg = validatorArg;
+  }
+
+
+  setValidator(validatorName : ValidatorOptions | CustomValidatorOptions, validatorArg: any = null) : ValidatorFn {
+    if(validatorName in ValidatorOptions){
+      return validatorArg ? Validators[validatorName](validatorArg) : Validators[validatorName];
+    }else {
+      return validatorArg ? CustomValidators[CustomValidatorOptions[validatorName]].apply(this, validatorArg) : CustomValidators[CustomValidatorOptions[validatorName]];
+    }
+  }
+}
+
+
+
+export enum ValidatorOptions {
+  required = 'required',
+  minLength = 'minLength',
+  maxLength = 'maxLength',
+  pattern = 'pattern',
+  nullValidator = 'nullValidator'
+}
+
+
+
+export enum CustomValidatorOptions {
+  uniqueInstanceNameValidator = 'uniqueInstanceNameValidator',
+  emptyDropdownOptions = 'emptyDropdownOptions',
+  isValidJson = 'isValidJson',
+  isFileTooBig = 'isFileTooBig',
+  isStringContainTags = 'isStringContainTags'
+}
+
+export class AttributeMap {
+  key : string;
+  value : string;
+
+  constructor(key : string, value? : string){
+    this.key = key;
+    this.value = value ? value : '';
+  }
+}
+
+
+
+
diff --git a/vid-webpack-master/src/app/shared/models/formControlModels/formControlTypes.enum.ts b/vid-webpack-master/src/app/shared/models/formControlModels/formControlTypes.enum.ts
new file mode 100644
index 000000000..eba1b0894
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/formControlModels/formControlTypes.enum.ts
@@ -0,0 +1,8 @@
+export enum FormControlType{
+  MULTI_SELECT = 'MULTI_SELECT',
+  FILE = 'FILE',
+  NUMBER = 'NUMBER',
+  INPUT = 'INPUT',
+  DROPDOWN = 'DROPDOWN',
+  CHECKBOX = 'CHECKBOX'
+}
diff --git a/vid-webpack-master/src/app/shared/models/formControlModels/formPopupDetails.model.ts b/vid-webpack-master/src/app/shared/models/formControlModels/formPopupDetails.model.ts
new file mode 100644
index 000000000..8ea3d2d0b
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/formControlModels/formPopupDetails.model.ts
@@ -0,0 +1,55 @@
+import {FormControlModel} from "./formControl.model";
+import {ModelInformationItem} from "../../components/model-information/model-information.component";
+import {FormGroup} from "@angular/forms";
+
+export class FormPopupDetails {
+  popupTypeName: PopupType;
+  that : any;
+  UUIDData : Object = {}; // TODO uuid tree
+  title: string;
+  leftSubTitle: string;
+  rightSubTitle: string;
+  formControlList: FormControlModel[];
+  dynamicInputsControlList: FormControlModel[];
+  modelInformationItems: ModelInformationItem[];
+  onSubmit : (that : any, form: FormGroup , ...args) =>  void;
+  onCancel : (that : any, form: FormGroup) => void;
+
+  constructor(that : any,
+              popupTypeName : PopupType ,
+              UUIDData : Object,
+              title : string,
+              leftSubTitle : string,
+              rightSubTitle : string,
+              formControlList : FormControlModel[],
+              dynamicInputsControlList : FormControlModel[],
+              modelInformationItems : ModelInformationItem[],
+              onSubmit : (that : any, form : FormGroup, ...args) =>  void,
+              onCancel : (that : any, form : FormGroup) => void){
+    this.title = title;
+    this.leftSubTitle = leftSubTitle;
+    this.rightSubTitle = rightSubTitle;
+    this.formControlList = formControlList;
+    this.dynamicInputsControlList = dynamicInputsControlList;
+    this.modelInformationItems = modelInformationItems;
+    this.onSubmit = onSubmit;
+    this.onCancel = onCancel;
+    this.popupTypeName = popupTypeName;
+    this.UUIDData = UUIDData;
+    this.that = that;
+  }
+}
+
+
+
+export enum PopupType {
+  SERVICE_MACRO = 'service macro',
+  SERVICE_A_LA_CART = 'service a-la-cart',
+  SERVICE = 'service',
+  VNF_MACRO  ='vnf macro',
+  VNF_A_LA_CARTE = 'vnf a-la-carte',
+  VFMODULE = 'vfModule',
+  NETWORK_MACRO = 'network_macro',
+  VNF_GROUP = 'vnfGroup'
+}
+
diff --git a/vid-webpack-master/src/app/shared/models/formControlModels/inputFormControl.model.ts b/vid-webpack-master/src/app/shared/models/formControlModels/inputFormControl.model.ts
new file mode 100644
index 000000000..99210af7a
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/formControlModels/inputFormControl.model.ts
@@ -0,0 +1,19 @@
+import {FormControlModel} from "./formControl.model";
+import {FormControlType} from "./formControlTypes.enum";
+
+export class InputFormControl extends FormControlModel {
+  onBlur ?: Function;
+  onKeypress?: Function;
+  inputType: string = 'text';
+  pattern: string;
+  preventions: string[];
+
+  constructor(data) {
+    super(data);
+    this.type = FormControlType.INPUT;
+    this.pattern = data.pattern;
+    this.onKeypress = data.onKeypress ? data.onKeypress : ()=>{}
+    this.onBlur = data.onBlur ? data.onBlur : ()=>{}
+  }
+}
+
diff --git a/vid-webpack-master/src/app/shared/models/formControlModels/multiselectFormControl.model.ts b/vid-webpack-master/src/app/shared/models/formControlModels/multiselectFormControl.model.ts
new file mode 100644
index 000000000..b13745104
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/formControlModels/multiselectFormControl.model.ts
@@ -0,0 +1,27 @@
+import {FormControlModel} from "./formControl.model";
+import {Observable} from "rxjs";
+import {FormGroup} from "@angular/forms";
+import {FormControlType} from "./formControlTypes.enum";
+
+export class MultiselectFormControl extends FormControlModel{
+  options$ : Observable<any[]>;
+  args : string[];
+  onInit: (data : MultiselectFormControl, form: FormGroup) => Observable<any>;
+  selectedItems : string;
+  onInitSelectedItems : string[];
+  ngValue : string;
+  settings: {};
+
+
+  constructor(data) {
+    super(data);
+    this.type = FormControlType.MULTI_SELECT;
+    this.options$ = data.options;
+    this.onInit = data.onInit;
+    this.selectedItems = data.selectedItems;
+    this.onInitSelectedItems = data.onInitSelectedItems ? data.onInitSelectedItems : null;
+    this.ngValue = data.selectedField ? data.selectedField : 'id';
+    this.settings = data.settings || {};
+  }
+
+}
diff --git a/vid-webpack-master/src/app/shared/models/formControlModels/numberFormControl.model.ts b/vid-webpack-master/src/app/shared/models/formControlModels/numberFormControl.model.ts
new file mode 100644
index 000000000..5de38e2f7
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/formControlModels/numberFormControl.model.ts
@@ -0,0 +1,16 @@
+import {FormControlModel} from "./formControl.model";
+import {FormControlType} from "./formControlTypes.enum";
+
+export class NumberFormControl extends FormControlModel{
+  min: number;
+  max: number;
+
+
+  constructor(data) {
+    super(data);
+    this.type = FormControlType.NUMBER;
+    this.min = data.min;
+    this.max = data.max;
+  }
+
+}
diff --git a/vid-webpack-master/src/app/shared/models/inputTypes.ts b/vid-webpack-master/src/app/shared/models/inputTypes.ts
index 1f7222f52..542c13b44 100644
--- a/vid-webpack-master/src/app/shared/models/inputTypes.ts
+++ b/vid-webpack-master/src/app/shared/models/inputTypes.ts
@@ -1,11 +1,11 @@
 export enum  InputType {
-  LCP_REGION = "LCP_REGION",
-  TENANT = "TENANT",
-  LOB  = "LOB",
-  PLATFORM = "PLATFORM",
-  ROLLBACK = "ROLLBACK",
-  PRODUCT_FAMILY = "PRODUCT_FAMILY",
-  VG = "VG"
+  LCP_REGION = "lcpCloudRegionId",
+  TENANT = "tenantId",
+  LOB  = "lineOfBusiness",
+  PLATFORM = "platformName",
+  ROLLBACK = "rollbackOnFailure",
+  PRODUCT_FAMILY = "productFamilyId",
+  VG = "volumeGroupName"
 
 }
 
diff --git a/vid-webpack-master/src/app/shared/models/lcpRegion.ts b/vid-webpack-master/src/app/shared/models/lcpRegion.ts
index e39321d58..fe82a3eea 100644
--- a/vid-webpack-master/src/app/shared/models/lcpRegion.ts
+++ b/vid-webpack-master/src/app/shared/models/lcpRegion.ts
@@ -2,10 +2,12 @@ export class LcpRegion {
   id: string;
   name: string;
   isPermitted: boolean;
+  cloudOwner: string;
 
-  constructor(serviceJson){
-    this.id = serviceJson["cloudRegionID"];
-    this.name = serviceJson["cloudRegionID"];
-    this.isPermitted = serviceJson["is-permitted"];
+  constructor(id: string, name: string, isPermitted: boolean, cloudOwner: string) {
+    this.id = id;
+    this.name = name;
+    this.isPermitted = isPermitted;
+    this.cloudOwner = cloudOwner;
   }
 }
diff --git a/vid-webpack-master/src/app/shared/models/level1Instance.ts b/vid-webpack-master/src/app/shared/models/level1Instance.ts
new file mode 100644
index 000000000..b7925b8bd
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/level1Instance.ts
@@ -0,0 +1,24 @@
+import {ChildNodeInstance} from "./nodeInstance";
+import {DefaultDataGeneratorService} from "../services/defaultDataServiceGenerator/default.data.generator.service";
+
+export class Level1Instance extends ChildNodeInstance{
+  uuid : string;
+  isEcompGeneratedNaming: boolean;
+  productFamilyId: string;
+  lcpCloudRegionId: string;
+  legacyRegion: string;
+  tenantId: string;
+  platformName: string;
+  lineOfBusiness: string;
+  rollbackOnFailure: string;
+  originalName: string;
+
+  constructor() {
+    super();
+    this.rollbackOnFailure = 'true';
+    this.originalName = null;
+    this.isMissingData= false;
+    this.trackById = DefaultDataGeneratorService.createRandomTrackById();
+    this.inMaint= false;
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/modelInfo.ts b/vid-webpack-master/src/app/shared/models/modelInfo.ts
index 091c02ef1..eb599cbe1 100644
--- a/vid-webpack-master/src/app/shared/models/modelInfo.ts
+++ b/vid-webpack-master/src/app/shared/models/modelInfo.ts
@@ -1,11 +1,13 @@
 
 export class ModelInfo {
-  modelInvariantId: string;
-  modelVersionId: string;
+  modelInvariantId?: string;
+  modelVersionId?: string;
   modelName: string;
   modelVersion: string;
-  modelCustomizationId: string;
-  modelCustomizationName: string;
+  modelCustomizationId?: string;
+  modelCustomizationName?: string;
+  uuid? : string;
+  modelUniqueId?: String;
 
 
 
@@ -16,6 +18,8 @@ export class ModelInfo {
     this.modelVersion = instanceModel.version;
     this.modelCustomizationId = instanceModel.customizationUuid;
     this.modelCustomizationName = instanceModel.modelCustomizationName;
+    this.uuid = instanceModel.uuid;
+    this.modelUniqueId = this.modelCustomizationId||this.uuid;
   }
 }
 
diff --git a/vid-webpack-master/src/app/shared/models/networkInstance.ts b/vid-webpack-master/src/app/shared/models/networkInstance.ts
new file mode 100644
index 000000000..ded95a787
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/networkInstance.ts
@@ -0,0 +1,14 @@
+
+
+import {Level1Instance} from "./level1Instance";
+
+export class NetworkInstance extends Level1Instance{
+  networkStoreKey : string;
+  isFailed: boolean;
+  statusMessage?: string;
+
+  constructor() {
+    super();
+    this.networkStoreKey = null;
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/networkModel.ts b/vid-webpack-master/src/app/shared/models/networkModel.ts
new file mode 100644
index 000000000..03f118eb7
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/networkModel.ts
@@ -0,0 +1,32 @@
+import {
+  Level1Model, Level1ModelProperties,
+  Level1ModelResponseInterface
+} from "./nodeModel";
+import {VfcInstanceGroupMap} from "./vfcInstanceGroupMap";
+
+
+export interface NetworkProperties extends Level1ModelProperties{
+  ecomp_generated_naming: string;
+  network_role: string;
+}
+
+export interface NetworkModelResponseInterface extends Level1ModelResponseInterface{
+  properties: NetworkProperties;
+}
+
+export class NetworkModel extends Level1Model{
+
+  roles: string[] = [];
+  properties: NetworkProperties;
+
+  constructor(networkJson?: NetworkModelResponseInterface){
+    super(networkJson);
+    if(networkJson && networkJson.properties){
+      this.properties = networkJson.properties;
+      // expecting network_role to be a comma-saparated list
+      this.roles = networkJson.properties.network_role ? networkJson.properties.network_role.split(',') : [];
+    }
+  }
+
+
+}
diff --git a/vid-webpack-master/src/app/shared/models/networkTreeNode.ts b/vid-webpack-master/src/app/shared/models/networkTreeNode.ts
new file mode 100644
index 000000000..d09d5e4c5
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/networkTreeNode.ts
@@ -0,0 +1,23 @@
+import {NetworkInstance} from "./networkInstance";
+import {TreeNodeModel} from "./treeNodeModel";
+import {Level1Model} from "./nodeModel";
+
+
+
+export class NetworkTreeNode extends TreeNodeModel {
+  networkStoreKey : string;
+  typeName: string;
+  menuActions: { [p: string]: { method: Function; visible: Function; enable: Function } };
+  isFailed: boolean;
+  statusMessage?: string;
+
+  constructor(instance: NetworkInstance, networkModel: Level1Model, networkStoreKey : string){
+    super(instance, networkModel);
+    this.name = instance.instanceName? instance.instanceName: !networkModel.isEcompGeneratedNaming ? networkModel.modelCustomizationName : '&lt;Automatically Assigned&gt;';
+    this.modelName = networkModel.modelCustomizationName;
+    this.type = networkModel.type;
+    this.isEcompGeneratedNaming = networkModel.isEcompGeneratedNaming;
+    this.networkStoreKey = networkStoreKey;
+  }
+}
+
diff --git a/vid-webpack-master/src/app/shared/models/nodeInstance.ts b/vid-webpack-master/src/app/shared/models/nodeInstance.ts
new file mode 100644
index 000000000..7656a0c2e
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/nodeInstance.ts
@@ -0,0 +1,21 @@
+import {ServiceInstanceActions} from "./serviceInstanceActions";
+import {ModelInfo} from "./modelInfo";
+
+export class NodeInstance {
+  instanceName: string;
+  orchStatus?:string;
+  action: ServiceInstanceActions = ServiceInstanceActions.Create;
+  originalAction : ServiceInstanceActions;
+  modelInfo?: ModelInfo;
+  instanceId?: string;
+  trackById?: string;
+}
+export class ChildNodeInstance extends NodeInstance {
+  isMissingData: boolean;
+  provStatus?:string;
+  inMaint?:boolean;
+  constructor() {
+    super();
+    this.inMaint = false;
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/nodeModel.ts b/vid-webpack-master/src/app/shared/models/nodeModel.ts
index 4b22b8d91..ee57ec038 100644
--- a/vid-webpack-master/src/app/shared/models/nodeModel.ts
+++ b/vid-webpack-master/src/app/shared/models/nodeModel.ts
@@ -1,12 +1,27 @@
+import {VfcInstanceGroupMap} from "./vfcInstanceGroupMap";
+
 export interface NodeModelResponseInterface {
+  customizationUuid: string;
   name: string;
   version: string;
   description: string;
   category: string;
   uuid: string;
   invariantUuid: string;
+  max: number;
+  min:number;
+}
+export interface Level1ModelResponseInterface extends NodeModelResponseInterface{
+  serviceType: string;
+  serviceRole: string;
+  subCategory: string;
+  customizationUuid: string;
+  serviceEcompNaming: boolean;
+  type: string;
+  modelCustomizationName: string;
+  vfcInstanceGroups: VfcInstanceGroupMap;
+  properties: Level1ModelProperties;
 }
-
 export class NodeModel {
   name: string;
   version: string;
@@ -14,16 +29,65 @@ export class NodeModel {
   category: string;
   uuid: string;
   invariantUuid: string;
+  max: number;
+  min: number;
+  customizationUuid?: string;
 
   constructor(serviceJson?: NodeModelResponseInterface) {
     if (serviceJson) {
+      this.customizationUuid = serviceJson.customizationUuid;
       this.name = serviceJson.name;
       this.version = serviceJson.version;
       this.description = serviceJson.description;
       this.category = serviceJson.category;
       this.uuid = serviceJson.uuid;
       this.invariantUuid = serviceJson.invariantUuid;
+      this.max = serviceJson.max;
+      this.min = serviceJson.min;
     }
   }
 
 }
+export class Level1ModelProperties {
+  max_instances : number;
+  min_instances : number;
+}
+
+
+
+export class Level1Model extends NodeModel{
+  serviceType: string;
+  serviceRole: string;
+  subCategory: string;
+  customizationUuid: string;
+  serviceEcompNaming: boolean;
+  type: string;
+  modelCustomizationName: string;
+  vfcInstanceGroups: VfcInstanceGroupMap;
+  isEcompGeneratedNaming: boolean;
+  constructor(nodeJson?: Level1ModelResponseInterface) {
+    super(nodeJson);
+    if (nodeJson) {
+      this.serviceType = nodeJson.serviceType;
+      this.serviceRole = nodeJson.serviceRole;
+      this.subCategory = nodeJson.subCategory;
+      this.customizationUuid = nodeJson.customizationUuid;
+      this.isEcompGeneratedNaming = this.getIsEcompGeneratedNaming(nodeJson);
+      this.type = nodeJson.type;
+      this.modelCustomizationName = nodeJson.modelCustomizationName;
+      this.vfcInstanceGroups = nodeJson.vfcInstanceGroups;
+      this.max = 1;
+      this.min = 0;
+      if (nodeJson.properties) {
+        this.min = nodeJson.properties.min_instances || 0;
+        this.max = nodeJson.properties.max_instances || 1;
+      }
+
+
+    }
+  }
+  private getIsEcompGeneratedNaming(vnfJson) {
+    const ecompGeneratedNaming = vnfJson.properties.ecomp_generated_naming;
+    return ecompGeneratedNaming === "true";
+  };
+}
diff --git a/vid-webpack-master/src/app/shared/models/productFamily.ts b/vid-webpack-master/src/app/shared/models/productFamily.ts
index 3c55ac004..1ed2579b2 100644
--- a/vid-webpack-master/src/app/shared/models/productFamily.ts
+++ b/vid-webpack-master/src/app/shared/models/productFamily.ts
@@ -1,4 +1,4 @@
-import {ServiceResponseInterface} from "../../services/aaiService/responseInterfaces/getServicesResponseInterface";
+import {ServiceResponseInterface} from "../services/aaiService/responseInterfaces/getServicesResponseInterface";
 
 export class ProductFamily {
   id: string;
diff --git a/vid-webpack-master/src/app/shared/models/serviceInstance.ts b/vid-webpack-master/src/app/shared/models/serviceInstance.ts
index a952430b0..38b4ac35d 100644
--- a/vid-webpack-master/src/app/shared/models/serviceInstance.ts
+++ b/vid-webpack-master/src/app/shared/models/serviceInstance.ts
@@ -1,8 +1,11 @@
 import {VnfInstance} from "./vnfInstance";
+import {NetworkInstance} from "./networkInstance";
+import {NodeInstance} from "./nodeInstance";
+import {VnfGroupInstance} from "./vnfGroupInstance";
+import {VnfMember} from "./VnfMember";
 
-export class ServiceInstance {
-  instanceName: string;
-  isUserProvidedNaming: boolean;
+export class ServiceInstance extends NodeInstance{
+  isEcompGeneratedNaming: boolean;
   globalSubscriberId: string;
   productFamilyId: string;
   subscriptionServiceType: string;
@@ -16,13 +19,37 @@ export class ServiceInstance {
   owningEntityName: string;
   pause: boolean;
   bulkSize: number;
-  vnfs: { [vnf_module_model_name: string] : VnfInstance; };
-  instanceParams: { [key: string] : string; };
-  rollbackOnFailure : boolean;
-  subscriberName : string;
+  vnfs: { [vnf_module_model_name: string]: VnfInstance; };
+  vnfGroups : {[vnf_module_model_name: string]: VnfGroupInstance; };
+  networks: { [vnf_module_model_name: string]: NetworkInstance; };
+  isDirty : boolean;
+  instanceParams: {[key: string]: string}[];
+  rollbackOnFailure: boolean;
+  subscriberName: string;
+  validationCounter: number;
+  existingNames:  {[key: string] : any};
+  modelInavariantId?: string;
+  existingVNFCounterMap : { [vnf_module_model_name: string]: number; };
+  existingVnfGroupCounterMap : { [vnf_group_module_model_name: string]: number; };
+  existingNetworksCounterMap : { [network_module_model_name: string]: number; };
+  optionalGroupMembersMap?: { [path: string]: VnfMember[]; };
+  isFailed: boolean;
+  statusMessage: string;
 
   constructor() {
+    super();
+    this.isDirty = false;
     this.vnfs = {};
-    this.instanceParams = {};
+    this.instanceParams = [];
+    this.validationCounter = 0;
+    this.existingNames = {};
+    this.existingVNFCounterMap = {};
+    this.existingVnfGroupCounterMap = {};
+    this.existingNetworksCounterMap = {};
+    this.optionalGroupMembersMap = {};
+    this.networks = {};
+    this.vnfGroups = {};
+    this.bulkSize = 1;
   }
+
 }
diff --git a/vid-webpack-master/src/app/shared/models/serviceInstanceActions.ts b/vid-webpack-master/src/app/shared/models/serviceInstanceActions.ts
new file mode 100644
index 000000000..783f133b0
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/serviceInstanceActions.ts
@@ -0,0 +1,24 @@
+export enum ServiceInstanceActions{
+  Delete = "Delete",
+  Update="Update",
+  Create="Create",
+  None="None",
+  Update_Delete = 'Update_Delete',
+  None_Delete = 'None_Delete'
+}
+export enum ServiceAction {
+  INSTANTIATE = 'INSTANTIATE',
+  DELETE = 'DELETE',
+  UPDATE = 'UPDATE'
+}
+export enum JobStatus {
+  COMPLETED = 'COMPLETED',
+  FAILED = 'FAILED',
+  IN_PROGRESS = 'IN_PROGRESS',
+  RESOURCE_IN_PROGRESS = 'RESOURCE_IN_PROGRESS',
+  PAUSE = 'PAUSE',
+  PENDING = 'PENDING',
+  STOPPED = 'STOPPED',
+  COMPLETED_WITH_ERRORS = 'COMPLETED_WITH_ERRORS',
+  CREATING = 'CREATING'
+}
diff --git a/vid-webpack-master/src/app/shared/models/serviceModel.ts b/vid-webpack-master/src/app/shared/models/serviceModel.ts
index 18d8582e8..21a34cc95 100644
--- a/vid-webpack-master/src/app/shared/models/serviceModel.ts
+++ b/vid-webpack-master/src/app/shared/models/serviceModel.ts
@@ -7,6 +7,7 @@ export interface ServiceModelResponseInterface extends NodeModelResponseInterfac
   serviceType: string;
   serviceRole: string;
   serviceEcompNaming: boolean;
+  vidNotions: any;
 }
 
 export class ServiceModel extends NodeModel{
@@ -14,8 +15,9 @@ export class ServiceModel extends NodeModel{
   serviceType: string;
   serviceRole: string;
   servicesQty: number;
-  isUserProvidedNaming: boolean;
+  isEcompGeneratedNaming: boolean;
   isMultiStepDesign: boolean;
+  vidNotions?: any;
 
   constructor(serviceModelJson?: any){
     super(serviceModelJson.service);
@@ -23,13 +25,14 @@ export class ServiceModel extends NodeModel{
       const service: ServiceModelResponseInterface = serviceModelJson.service;
       this.serviceType = service.serviceType;
       this.serviceRole = service.serviceRole;
-      this.isUserProvidedNaming = this.getIsUserProvidedName(service);
+      this.vidNotions= service.vidNotions;
+      this.isEcompGeneratedNaming = this.getServiceEcompNaming(service);
       this.isMultiStepDesign = this.getIsMultiStepDesign(serviceModelJson);
     }
   }
 
-  private getIsUserProvidedName(serviceJson): boolean {
-    return serviceJson.serviceEcompNaming !== undefined && serviceJson.serviceEcompNaming === "false";
+  private getServiceEcompNaming(serviceJson): boolean {
+    return serviceJson.serviceEcompNaming === "true";
   };
 
   private getIsMultiStepDesign(serviceModel): boolean {
diff --git a/vid-webpack-master/src/app/shared/models/serviceProxyModel.ts b/vid-webpack-master/src/app/shared/models/serviceProxyModel.ts
new file mode 100644
index 000000000..31810ca72
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/serviceProxyModel.ts
@@ -0,0 +1,22 @@
+
+import {NodeModel, NodeModelResponseInterface} from "./nodeModel";
+
+export interface ServiceProxyModelResponseInterface extends NodeModelResponseInterface{
+  sourceModelUuid: string;
+  sourceModelInvariant: string;
+  sourceModelName: string;
+}
+export class ServiceProxyModel extends NodeModel {
+  sourceModelUuid: string;
+  sourceModelInvariant: string;
+  sourceModelName: string;
+
+  constructor(serviceProxyJson?: ServiceProxyModelResponseInterface)  {
+    if (serviceProxyJson)  {
+      super(serviceProxyJson);
+      this.sourceModelUuid = serviceProxyJson.sourceModelUuid;
+      this.sourceModelInvariant = serviceProxyJson.sourceModelInvariant;
+      this.sourceModelName = serviceProxyJson.sourceModelName;
+    }
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/tenant.ts b/vid-webpack-master/src/app/shared/models/tenant.ts
index 234f1dbff..26ff69df5 100644
--- a/vid-webpack-master/src/app/shared/models/tenant.ts
+++ b/vid-webpack-master/src/app/shared/models/tenant.ts
@@ -2,10 +2,12 @@ export class Tenant {
   id: string;
   name: string;
   isPermitted: boolean;
+  cloudOwner: string;
 
   constructor(serviceJson){
     this.id = serviceJson["tenantID"];
     this.name = serviceJson["tenantName"];
     this.isPermitted = serviceJson["is-permitted"];
+    this.cloudOwner = serviceJson["cloudOwner"];
   }
 }
diff --git a/vid-webpack-master/src/app/shared/models/treeNodeModel.ts b/vid-webpack-master/src/app/shared/models/treeNodeModel.ts
new file mode 100644
index 000000000..2be8b804a
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/treeNodeModel.ts
@@ -0,0 +1,53 @@
+import {ChildNodeInstance} from "./nodeInstance";
+import {NodeModel} from "./nodeModel";
+import {ServiceNodeTypes} from "./ServiceNodeTypes";
+import * as _ from 'lodash';
+import {ServiceInstanceActions} from "./serviceInstanceActions";
+export enum TreeLevel {
+  Level_0 , Level_1, Level_2
+
+}
+interface TreeNodeInstanceInterface {
+  treeLevel: TreeLevel;
+  getModel(): NodeModel;
+  convertToTreeNode(node: any): any;
+  type: ServiceNodeTypes;
+}
+export class TreeNodeModel {
+  type: String;
+  modelId: string;
+  modelCustomizationId?: string;
+  modelUniqueId?: string;
+  id: string;
+  name: string;
+  modelName: string;
+  missingData: boolean;
+  isEcompGeneratedNaming: boolean;
+  orchStatus?:string;
+  provStatus?:string;
+  inMaint?:boolean;
+  action : string ;
+
+  constructor(instance: ChildNodeInstance, nodeModel: NodeModel){
+    this.modelCustomizationId = nodeModel.customizationUuid;
+    this.modelId = nodeModel.uuid;
+    this.modelUniqueId = this.modelCustomizationId || this.modelId;
+    this.missingData = false;
+    this.id = instance.trackById;
+    this.action = !_.isNil(instance.action) ? instance.action : ServiceInstanceActions.Create;
+
+    if(!_.isNil(instance.orchStatus)){
+      this.orchStatus= instance.orchStatus;
+    }
+
+    if(!_.isNil(instance.provStatus)){
+      this.provStatus= instance.provStatus;
+    }
+
+    if(!_.isNil(instance.inMaint)){
+      this.inMaint= instance.inMaint;
+    }
+
+
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/vfModule.ts b/vid-webpack-master/src/app/shared/models/vfModule.ts
index 21f43ed17..c75202124 100644
--- a/vid-webpack-master/src/app/shared/models/vfModule.ts
+++ b/vid-webpack-master/src/app/shared/models/vfModule.ts
@@ -1,7 +1,7 @@
 import {NodeModel, NodeModelResponseInterface} from "./nodeModel";
 
 
-export interface properties{
+export interface Properties{
   initialCount: number;
   maxCountInstances: number;
   minCountInstances: number;
@@ -10,24 +10,25 @@ export interface properties{
 export interface VFModuleResponseInterface extends NodeModelResponseInterface {
   customizationUuid: string;
   modelCustomizationName: string;
-  properties: properties
+  volumeGroupAllowed : boolean;
+  properties: Properties
 }
 
 export class VfModule extends NodeModel {
 
-  min:number;
-  max:number;
   vgName:string;
   rollbackOnFailure:boolean;
   initial:number;
   customizationUuid: string;
   modelCustomizationName: string;
+  volumeGroupAllowed : boolean;
 
   constructor(vf?: VFModuleResponseInterface) {
     super(vf);
     if(vf){
       this.customizationUuid = vf.customizationUuid;
       this.modelCustomizationName = vf.modelCustomizationName;
+      this.volumeGroupAllowed = vf.volumeGroupAllowed || false;
     }
     if (vf && vf.properties) {
       this.min = vf.properties.minCountInstances;
diff --git a/vid-webpack-master/src/app/shared/models/vfModuleInstance.ts b/vid-webpack-master/src/app/shared/models/vfModuleInstance.ts
index c6db00025..71140d44b 100644
--- a/vid-webpack-master/src/app/shared/models/vfModuleInstance.ts
+++ b/vid-webpack-master/src/app/shared/models/vfModuleInstance.ts
@@ -1,5 +1,14 @@
-export class VfModuleInstance {
-  instanceName: string;
+import {ChildNodeInstance} from "./nodeInstance";
+
+export class VfModuleInstance extends ChildNodeInstance{
   volumeGroupName: string;
   instanceParams: { [key: string] : string; };
+  isFailed: boolean;
+  position: any;
+  statusMessage?: string;
+
+  constructor() {
+    super();
+    this.instanceParams = {};
+  }
 }
diff --git a/vid-webpack-master/src/app/shared/models/vfModuleTreeNode.ts b/vid-webpack-master/src/app/shared/models/vfModuleTreeNode.ts
index d4cc7e9c7..e3d1b79b0 100644
--- a/vid-webpack-master/src/app/shared/models/vfModuleTreeNode.ts
+++ b/vid-webpack-master/src/app/shared/models/vfModuleTreeNode.ts
@@ -1,17 +1,23 @@
 import {VfModule} from "./vfModule";
 import {VfModuleInstance} from "./vfModuleInstance";
 import {ServiceNodeTypes} from "./ServiceNodeTypes";
+import {TreeLevel, TreeNodeModel} from "./treeNodeModel";
 
-export class VfModuleTreeNode {
-  modelId: string;
-  name: string;
-  modelName: string;
-  type: string;
+export class VfModuleTreeNode extends TreeNodeModel{
+  dynamicInputs: any;
+  dynamicModelName : string;
+  typeName: string;
+  menuActions: { [p: string]: { method: Function; visible: Function; enable: Function } };
+  isFailed: boolean;
+  statusMessage?: string;
 
-  constructor(vfModuleInstance: VfModuleInstance, vfModuleModel: VfModule, vfModuleModelName: string){
-    this.name = vfModuleInstance.instanceName || vfModuleInstance.volumeGroupName || '<Automatically Assigned>';
-    this.modelId = vfModuleModel.uuid;
+  constructor(vfModuleInstance: VfModuleInstance, vfModuleModel: VfModule, vfModuleModelName: string, dynamicInputs: any, isEcompGeneratedNaming: boolean, dynamicModelName : string){
+    super(vfModuleInstance,vfModuleModel);
+    this.name = vfModuleInstance.instanceName || vfModuleInstance.volumeGroupName || '&lt;Automatically Assigned&gt;';
     this.modelName = vfModuleModelName;
     this.type = ServiceNodeTypes.VFmodule;
+    this.isEcompGeneratedNaming = isEcompGeneratedNaming;
+    this.dynamicInputs = dynamicInputs;
+    this.dynamicModelName  = dynamicModelName;
   }
 }
diff --git a/vid-webpack-master/src/app/shared/models/vnfGroupInstance.ts b/vid-webpack-master/src/app/shared/models/vnfGroupInstance.ts
new file mode 100644
index 000000000..22ca44492
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/vnfGroupInstance.ts
@@ -0,0 +1,13 @@
+import {Level1Instance} from "./level1Instance";
+import {VnfMember} from "./VnfMember";
+import {NetworkInstance} from "./networkInstance";
+
+export class VnfGroupInstance extends Level1Instance{
+  vnfGroupStoreKey : string;
+  vnfs: { [vnf_module_model_name: string]: VnfMember; };
+  constructor() {
+    super();
+    this.vnfGroupStoreKey = null;
+    this.vnfs ={};
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/vnfGroupModel.ts b/vid-webpack-master/src/app/shared/models/vnfGroupModel.ts
new file mode 100644
index 000000000..5cff86cf0
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/vnfGroupModel.ts
@@ -0,0 +1,32 @@
+import {
+  Level1Model,
+  Level1ModelProperties,
+  Level1ModelResponseInterface
+} from "./nodeModel";
+import {ServiceProxyModel} from "./serviceProxyModel";
+
+
+export interface VnfGroupProperties extends Level1ModelProperties{
+  ecomp_generated_naming: string;
+  role?: string;
+  type?: string;
+  quantity?: number;
+}
+
+export interface VnfGroupModelResponseInterface extends Level1ModelResponseInterface{
+  properties: VnfGroupProperties;
+  members: {[key: string]: ServiceProxyModel};
+}
+
+export class VnfGroupModel extends Level1Model{
+  properties: VnfGroupProperties;
+  members: {[key: string]: ServiceProxyModel};
+
+    constructor(vnfGoupJson?: VnfGroupModelResponseInterface) {
+    super(vnfGoupJson);
+    if (vnfGoupJson) {
+      this.properties = vnfGoupJson.properties;
+      this.members = vnfGoupJson.members;
+    }
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/vnfGroupTreeNode.ts b/vid-webpack-master/src/app/shared/models/vnfGroupTreeNode.ts
new file mode 100644
index 000000000..0e71f47b8
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/vnfGroupTreeNode.ts
@@ -0,0 +1,12 @@
+import {NetworkTreeNode} from "./networkTreeNode";
+import {NetworkInstance} from "./networkInstance";
+import {Level1Model} from "./nodeModel";
+
+export class VnfGroupTreeNode extends NetworkTreeNode{
+  vnfGroupStoreKey : string;
+  limitMembers: number;
+  constructor(instance: NetworkInstance, vnfGroupModel: Level1Model, vnfGroupStoreKey : string){
+    super(instance, vnfGroupModel, vnfGroupStoreKey);
+    this.vnfGroupStoreKey = vnfGroupStoreKey;
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/vnfInstance.ts b/vid-webpack-master/src/app/shared/models/vnfInstance.ts
index 7f41e483a..8959cc5c3 100644
--- a/vid-webpack-master/src/app/shared/models/vnfInstance.ts
+++ b/vid-webpack-master/src/app/shared/models/vnfInstance.ts
@@ -1,19 +1,18 @@
 import {VfModuleMap} from "./vfModulesMap";
+import {Level1Instance} from "./level1Instance";
+
+
+export class VnfInstance extends Level1Instance {
 
-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; };
+  vnfStoreKey : string;
+  isFailed: boolean;
+  position: number;
+  statusMessage?: string;
 
   constructor() {
-    this.rollbackOnFailure = 'true';
+    super();
     this.vfModules = {};
+    this.vnfStoreKey = null;
   }
 }
diff --git a/vid-webpack-master/src/app/shared/models/vnfModel.ts b/vid-webpack-master/src/app/shared/models/vnfModel.ts
index e1302f1d0..8389606b6 100644
--- a/vid-webpack-master/src/app/shared/models/vnfModel.ts
+++ b/vid-webpack-master/src/app/shared/models/vnfModel.ts
@@ -1,52 +1,27 @@
-import {NodeModel, NodeModelResponseInterface} from "./nodeModel";
-import {VfcInstanceGroupMap} from "./vfcInstanceGroupMap";
+import {
+  Level1Model,
+  Level1ModelProperties,
+  Level1ModelResponseInterface
+} from "./nodeModel";
 
 
-export interface VnfProperties {
-  ecomp_generated_naming: string
-}
 
-export interface VNFModelResponseInterface extends NodeModelResponseInterface{
+export interface VnfProperties extends Level1ModelProperties{
+  ecomp_generated_naming: string;
+}
 
-  serviceType: string;
-  serviceRole: string;
-  subCategory: string;
-  customizationUuid: string;
-  serviceEcompNaming: boolean;
-  type: string;
-  modelCustomizationName: string;
+export interface VNFModelResponseInterface extends Level1ModelResponseInterface{
   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;
+export class VNFModel extends Level1Model{
+  properties: VnfProperties;
 
-  constructor(vnfJson?: VNFModelResponseInterface){
+  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;
-
+      this.properties = vnfJson.properties;
     }
   }
 
-  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
index 316bf3e8b..b878d016e 100644
--- a/vid-webpack-master/src/app/shared/models/vnfTreeNode.ts
+++ b/vid-webpack-master/src/app/shared/models/vnfTreeNode.ts
@@ -1,18 +1,17 @@
-import {VNFModel} from "./vnfModel";
-import {VnfInstance} from "./vnfInstance";
 import {VfModuleTreeNode} from "./vfModuleTreeNode";
+import {NetworkTreeNode} from "./networkTreeNode";
+import {Level1Model} from "./nodeModel";
+import {VnfInstance} from "./vnfInstance";
+import {ServiceNodeTypes} from "./ServiceNodeTypes";
+
+export class VnfTreeNode extends NetworkTreeNode{
 
-export class VnfTreeNode {
-  modelId: string;
-  name: string;
-  modelName: string;
-  type: string;
   children: VfModuleTreeNode[];
+  vnfStoreKey : string;
 
-  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;
+  constructor(instance: VnfInstance, vnfModel: Level1Model, vnfStoreKey : string){
+    super(<any>instance, vnfModel, vnfStoreKey);
+    this.type = ServiceNodeTypes.VF;
+    this.vnfStoreKey = vnfStoreKey;
   }
 }