Merge changes Ib4430bf2,Icc0bdb9e,I2736b984

* changes:
  Merge from ecomp 718fd196 - Ext. Services Simulator
  Merge from ecomp 718fd196 - Integration Tests
  Merge from ecomp 718fd196 - Modern UI

8 files changed, 1819 insertions, 0 deletions

diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vrf/vrf.model.info.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vrf/vrf.model.info.spec.ts
new file mode 100644
index 000000000..07d4cee9b
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vrf/vrf.model.info.spec.ts
@@ -0,0 +1,238 @@
+import {ComponentInfoService} from "../../../component-info/component-info.service";
+import {NgRedux} from "@angular-redux/store";
+import {AppState} from "../../../../../shared/store/reducers";
+import {getTestBed, TestBed} from "@angular/core/testing";
+import {HttpClientTestingModule} from "@angular/common/http/testing";
+import {MockNgRedux, NgReduxTestingModule} from "@angular-redux/store/testing";
+import {DynamicInputsService} from "../../dynamicInputs.service";
+import {SharedTreeService} from "../../shared.tree.service";
+import {DuplicateService} from "../../../duplicate/duplicate.service";
+import {AaiService} from "../../../../../shared/services/aaiService/aai.service";
+import {HttpClient, HttpHandler} from "@angular/common/http";
+import {FeatureFlagsService} from "../../../../../shared/services/featureFlag/feature-flags.service";
+import {IframeService} from "../../../../../shared/utils/iframe.service";
+import {VrfModelInfo} from "./vrf.model.info";
+import {ComponentInfoType} from "../../../component-info/component-info-model";
+import {ModelInformationItem} from "../../../../../shared/components/model-information/model-information.component";
+import {VrfModel} from "../../../../../shared/models/vrfModel";
+import {AvailableNodeIcons} from "../../../available-models-tree/available-models-tree.service";
+import each from 'jest-each';
+import {DialogService} from "ng2-bootstrap-modal";
+import {NetworkStepService} from "./vrfModal/networkStep/network.step.service";
+import {VpnStepService} from "./vrfModal/vpnStep/vpn.step.service";
+
+describe('Vrf Model Info', () => {
+
+  let injector;
+  let _componentInfoService : ComponentInfoService;
+
+  let _store : NgRedux<AppState>;
+  let _sharedTreeService: SharedTreeService;
+  let _dialogService : DialogService;
+  let _iframeService : IframeService;
+  let _networkStepService : NetworkStepService;
+  let _vpnStepService : VpnStepService;
+  let vrfModel: VrfModelInfo;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule, NgReduxTestingModule],
+      providers: [
+        MockNgRedux,
+        DynamicInputsService,
+        SharedTreeService,
+        DuplicateService,
+        AaiService,
+        HttpClient,
+        HttpHandler,
+        FeatureFlagsService,
+        ComponentInfoService,
+        DialogService,
+        IframeService,
+        IframeService,
+        NetworkStepService,
+       VpnStepService]
+    }).compileComponents();
+
+    injector = getTestBed();
+    _sharedTreeService = injector.get(SharedTreeService);
+    _dialogService = injector.get(DialogService);
+    _iframeService = injector.get(IframeService);
+    _networkStepService = injector.get(NetworkStepService);
+    _vpnStepService = injector.get(VpnStepService);
+    _store = injector.get(NgRedux);
+    _componentInfoService = injector.get(ComponentInfoService);
+
+    vrfModel = new VrfModelInfo(_store,_sharedTreeService, _dialogService, _iframeService, _networkStepService, _vpnStepService);
+
+  });
+
+
+  test('vrfModel should be defined', () => {
+    expect(vrfModel).toBeDefined();
+  });
+
+  test('vrfModel should defined extra details', () => {
+    expect(vrfModel.name).toEqual('vrfs');
+    expect(vrfModel.type).toEqual('VRF');
+    expect(vrfModel.childNames).toEqual(['networks','vpns']);
+    expect(vrfModel.componentInfoType).toEqual(ComponentInfoType.VRF);
+  });
+
+  test('Info for vrf should be correct', () => {
+    const model = new VrfModel();
+    const instance = null;
+    let actualNetworkInfo = vrfModel.getInfo(model,instance);
+    let expectedNetworkInfo = [
+      ModelInformationItem.createInstance('Min instances', "1"),
+      ModelInformationItem.createInstance('Max instances', "1"),
+      ModelInformationItem.createInstance("Association", "L3-Network - VPN")
+    ];
+    expect(actualNetworkInfo).toEqual(expectedNetworkInfo);
+  });
+
+
+
+  test('getModel should return VRF model with min and max are equal to 1 (hard coded)', () => {
+    let model: VrfModel = vrfModel.getModel('VRF Entry Configuration 0', <any>{
+      originalName : 'VRF Entry Configuration 0'
+    }, getServiceHierarchy());
+    expect(model.properties['type']).toEqual('VRF-ENTRY');
+    expect(model.min).toEqual(1);
+    expect(model.max).toEqual(1);
+  });
+
+  const showNodeIconsDataProvider = [
+    [false, new AvailableNodeIcons(true , false)],
+    [true, new AvailableNodeIcons(false , true)]
+  ];
+
+  each(showNodeIconsDataProvider).test('showNodeIcons should return value according reach limit of max',(existVRFs,expectedResult)=>{
+    const serviceId : string = 'servicedId';
+    const node = getNode();
+    let state = getMockState();
+    if(existVRFs) {
+      state.service.serviceInstance.servicedId.existingVRFCounterMap = {
+        'modelCustomizationId': 1
+      };
+    }
+    jest.spyOn(MockNgRedux.getInstance(), 'getState').mockReturnValue(state);
+    const result = vrfModel.showNodeIcons(<any>node, serviceId);
+    expect(result).toEqual(expectedResult);
+  });
+
+  function getNode() {
+    return {
+      data: {
+        id: 'vrfId',
+        name: 'VRF Entry Configuration 0',
+        modelCustomizationId: 'modelCustomizationId',
+        modelUniqueId: 'modelCustomizationId',
+        getModel: function () {
+          return {max: 1}
+        }
+      }
+    };
+  }
+
+  function getMockState(){
+    return {
+      global:{
+        "drawingBoardStatus": "CREATE"
+      },
+      service : {
+        serviceHierarchy : {
+          'servicedId' : {
+          }
+        },
+        serviceInstance : {
+          'servicedId' : {
+            'existingVRFCounterMap' : {},
+            'vrfs' : {
+              'vrfName' :{
+
+              }
+            }
+          }
+        }
+      }
+    };
+  }
+
+  function getServiceHierarchy() {
+    return {
+      "service": {
+        "uuid": "f028b2e2-7080-4b13-91b2-94944d4c42d8",
+        "invariantUuid": "dfc2c44c-2429-44ca-ae26-1e6dc1f207fb",
+        "name": "infraVPN",
+        "version": "1.0",
+        "toscaModelURL": null,
+        "category": "Network Service",
+        "serviceType": "BONDING",
+        "serviceRole": "INFRASTRUCTURE-VPN",
+        "description": "ddd",
+        "serviceEcompNaming": "true",
+        "instantiationType": "A-La-Carte",
+        "inputs": {},
+        "vidNotions": {
+          "instantiationUI": "macroService",
+          "modelCategory": "other",
+          "viewEditUI": "legacy"
+        }
+      },
+      "vnfs": {},
+      "networks": {},
+      "collectionResources": {},
+      "configurations": {},
+      "fabricConfigurations": {},
+      "serviceProxies": {
+        "misvpn_service_proxy 0": {
+          "uuid": "35186eb0-e6b6-4fa5-86bb-1501b342a7b1",
+          "invariantUuid": "73f89e21-b96c-473f-8884-8b93bcbd2f76",
+          "description": "A Proxy for Service MISVPN_SERVICE",
+          "name": "MISVPN_SERVICE Service Proxy",
+          "version": "3.0",
+          "customizationUuid": "4c2fb7e0-a0a5-4b32-b6ed-6a974e55d923",
+          "inputs": {},
+          "commands": {},
+          "properties": {
+            "ecomp_generated_naming": "false"
+          },
+          "type": "Service Proxy",
+          "sourceModelUuid": "d5cc7d15-c842-450e-95ae-2a69e66dd23b",
+          "sourceModelInvariant": "c126ec86-59fe-48c0-9532-e39a9b3e5272",
+          "sourceModelName": "MISVPN_SERVICE"
+        }
+      },
+      "vfModules": {},
+      "volumeGroups": {},
+      "pnfs": {},
+      "vnfGroups": {},
+      "vrfs": {
+        "VRF Entry Configuration 0": {
+          "uuid": "9cac02be-2489-4374-888d-2863b4511a59",
+          "invariantUuid": "b67a289b-1688-496d-86e8-1583c828be0a",
+          "description": "VRF Entry configuration object",
+          "name": "VRF Entry Configuration",
+          "version": "30.0",
+          "customizationUuid": "dd024d73-9bd1-425d-9db5-476338d53433",
+          "inputs": {},
+          "commands": {},
+          "properties": {
+            "ecomp_generated_naming": "false",
+            "type": "VRF-ENTRY",
+            "role": "INFRASTRUCTURE-CLOUD-VPN"
+          },
+          "type": "Configuration",
+          "modelCustomizationName": "VRF Entry Configuration 0",
+          "sourceNodes": [],
+          "collectorNodes": null,
+          "configurationByPolicy": false
+        }
+      }
+    }
+  }
+
+
+
+})
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vrf/vrf.model.info.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vrf/vrf.model.info.ts
new file mode 100644
index 000000000..4c779a313
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vrf/vrf.model.info.ts
@@ -0,0 +1,188 @@
+import {ILevelNodeInfo} from "../basic.model.info";
+import {ComponentInfoType} from "../../../component-info/component-info-model";
+import {ITreeNode} from "angular-tree-component/dist/defs/api";
+import {AvailableNodeIcons} from "../../../available-models-tree/available-models-tree.service";
+import {ModelInformationItem} from "../../../../../shared/components/model-information/model-information.component";
+import {VrfInstance} from "../../../../../shared/models/vrfInstance";
+import {VrfTreeNode} from "../../../../../shared/models/vrfTreeNode";
+import {VrfModel} from "../../../../../shared/models/vrfModel";
+import {NgRedux} from "@angular-redux/store";
+import {AppState} from "../../../../../shared/store/reducers";
+import {SharedTreeService} from "../../shared.tree.service";
+import {DialogService} from 'ng2-bootstrap-modal';
+import {SearchElementsModalComponent} from "../../../../../shared/components/searchMembersModal/search-elements-modal.component";
+import {IframeService} from "../../../../../shared/utils/iframe.service";
+import {NetworkStepService} from "./vrfModal/networkStep/network.step.service";
+import {VpnStepService} from "./vrfModal/vpnStep/vpn.step.service";
+import {NetworkModelInfo} from "../network/network.model.info";
+import {VpnModelInfo} from "../vpn/vpn.model.info";
+import {
+  clearAllGenericModalhelper,
+  updateGenericModalhelper,
+  updateGenericModalTableDataHelper
+} from "../../../../../shared/storeUtil/utils/global/global.actions";
+import {
+  deleteActionVrfInstance,
+  undoDeleteActionVrfInstance
+} from "../../../../../shared/storeUtil/utils/vrf/vrf.actions";
+import * as _ from "lodash";
+
+export class VrfModelInfo implements ILevelNodeInfo {
+  constructor(private _store: NgRedux<AppState>,
+              private _sharedTreeService: SharedTreeService,
+              private _dialogService: DialogService,
+              private _iframeService: IframeService,
+              private _networkStepService: NetworkStepService,
+              private _vpnStepService: VpnStepService) {
+  }
+
+  name: string = 'vrfs';
+  type: string = 'VRF';
+  typeName: string = 'VRF';
+  childNames: string [] = ["networks", "vpns"];
+  componentInfoType = ComponentInfoType.VRF;
+
+  isEcompGeneratedNaming(currentModel): boolean {
+    return false;
+  }
+
+  updateDynamicInputsDataFromModel = (currentModel): any => [];
+
+  getModel = (vrfModelId: string, instance: VrfInstance, serviceHierarchy): VrfModel => {
+    const originalModelName = instance.originalName ? instance.originalName : vrfModelId;
+    return new VrfModel(serviceHierarchy[this.name][originalModelName]);
+  };
+
+
+  createInstanceTreeNode = (instance: VrfInstance, model: VrfModel, parentModel, storeKey: string): VrfTreeNode => {
+    let node = new VrfTreeNode(instance, model, storeKey);
+    node.missingData = this.hasMissingData(instance, node, model.isEcompGeneratedNaming);
+    node.typeName = this.typeName;
+    node.menuActions = this.getMenuAction(<any>node, model.uuid);
+    node.isFailed = _.isNil(instance.isFailed) ? false : instance.isFailed;
+    node.statusMessage = !_.isNil(instance.statusMessage) ? instance.statusMessage : "";
+    return node;
+  };
+
+
+  getNextLevelObject = (nextLevelType: string): any => {
+    if (nextLevelType === 'vpns') {
+      return new VpnModelInfo(this._store, this._sharedTreeService);
+    } else {
+      if (nextLevelType === 'networks') {
+        return new NetworkModelInfo(null, this._sharedTreeService, null, null, null, null, null, this._store);
+      }
+    }
+  };
+
+  getTooltip = (): string => 'VRF';
+
+  getType = (): string => 'VRF';
+
+  hasMissingData(instance, dynamicInputs: any, isEcompGeneratedNaming: boolean): boolean {
+    return false;
+  }
+
+  onClickAdd(node, serviceModelId: string): void {
+    this._store.dispatch(clearAllGenericModalhelper());
+    this._store.dispatch(updateGenericModalTableDataHelper('currentVRF', {
+      model: this._store.getState().service.serviceHierarchy[serviceModelId].vrfs[node.data.name],
+      instance: null
+    }));
+    this._iframeService.addFullScreen();
+    let modalSteps = [this._vpnStepService, this._networkStepService];
+    const serviceInstance = this._store.getState().service.serviceInstance[serviceModelId];
+    this._dialogService.addDialog(SearchElementsModalComponent, {
+        modalInformation: this._networkStepService.getNetworkStep(serviceInstance, serviceModelId, ...modalSteps)
+      }
+    )
+  }
+
+  getNodeCount(node: ITreeNode, serviceModelId: string): number {
+    //TODO
+    return 0;
+  }
+
+  showNodeIcons(node: ITreeNode, serviceModelId: string): AvailableNodeIcons {
+    const serviceHierarchy = this._store.getState().service.serviceHierarchy[serviceModelId];
+
+    let counter: number = !_.isNil(this._store.getState().service.serviceInstance[serviceModelId]) ?
+      (this._store.getState().service.serviceInstance[serviceModelId].existingVRFCounterMap[node.data.modelUniqueId] || 0) : 0;
+    counter -= this._sharedTreeService.getExistingInstancesWithDeleteMode(node, serviceModelId, 'vrfs');
+    const model = node.data.getModel(node.data.name, node.data, serviceHierarchy);
+    const maxInstances: number = model.max;
+    const isReachedLimit = !(maxInstances > counter);
+    const showAddIcon = this._sharedTreeService.shouldShowAddIcon() && !isReachedLimit;
+
+    return new AvailableNodeIcons(showAddIcon, isReachedLimit)
+  }
+
+  getMenuAction(node: ITreeNode, serviceModelId: string): { [methodName: string]: { method: Function, visible: Function, enable: Function } } {
+    return <any>{
+      changeAssociations: {
+        method: (node, serviceModelId) => {
+          let modalSteps = [this._vpnStepService, this._networkStepService];
+          this._store.dispatch(clearAllGenericModalhelper());
+          const vrfInstance = this._store.getState().service.serviceInstance[serviceModelId].vrfs[node.data.vrfStoreKey];
+          const vrfModel = this._store.getState().service.serviceHierarchy[serviceModelId].vrfs[node.data.name];
+          this._store.dispatch(updateGenericModalTableDataHelper('currentVRF', {
+            model: vrfModel,
+            instance: vrfInstance,
+            vrfStoreKey: node.data.vrfStoreKey
+          }));
+
+
+          for (let networkKey in vrfInstance.networks) {
+            this._store.dispatch(updateGenericModalhelper(`selectedNetwork`, vrfInstance.networks[networkKey], modalSteps[1].uniqObjectField));
+          }
+
+          for (let networkKey in vrfInstance.vpns) {
+            this._store.dispatch(updateGenericModalhelper(`selectedVPN`, vrfInstance.vpns[networkKey], modalSteps[0].uniqObjectField));
+          }
+
+          this._iframeService.addFullScreen();
+
+          const serviceInstance = this._store.getState().service.serviceInstance[serviceModelId];
+          this._dialogService.addDialog(SearchElementsModalComponent, {
+              modalInformation: this._networkStepService.getNetworkStep(serviceInstance, serviceModelId, ...modalSteps)
+            }
+          )
+        },
+        visible: (node) => this._sharedTreeService.shouldShowRemoveAndEdit(node),
+        enable: (node) => this._sharedTreeService.shouldShowRemoveAndEdit(node),
+      },
+      delete: {
+        method: (node, serviceModelId) => {
+          this._store.dispatch(deleteActionVrfInstance(node.data.vrfStoreKey, serviceModelId));
+        },
+        visible: (node) => this._sharedTreeService.shouldShowDelete(node),
+        enable: (node) => this._sharedTreeService.shouldShowDelete(node)
+      },
+      undoDelete: {
+        method: (node, serviceModelId) => {
+          this._store.dispatch(undoDeleteActionVrfInstance(node.data.vrfStoreKey, serviceModelId));
+        },
+        visible: (node) => this._sharedTreeService.shouldShowUndoDelete(node),
+        enable: (node, serviceModelId) => this._sharedTreeService.shouldShowUndoDelete(node) && !this._sharedTreeService.isServiceOnDeleteMode(serviceModelId)
+      }
+    }
+  }
+
+  updatePosition(that, node, instanceId): void {
+    //TODO
+  }
+
+  getNodePosition(instance): number {
+    //TODO
+    return 0;
+  }
+
+  getInfo(model, instance): ModelInformationItem[] {
+    const modelInformation = !_.isEmpty(model) ? [
+      ModelInformationItem.createInstance("Min instances", "1"),
+      ModelInformationItem.createInstance("Max instances", "1"),
+      ModelInformationItem.createInstance("Association", "L3-Network - VPN")] : [];
+    return modelInformation;
+  }
+}
+
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vrf/vrfModal/networkStep/network.step.model.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vrf/vrfModal/networkStep/network.step.model.ts
new file mode 100644
index 000000000..8a2d18ad5
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vrf/vrfModal/networkStep/network.step.model.ts
@@ -0,0 +1,18 @@
+export class NetworkModalRow {
+  instanceName : string;
+  instanceType: string;
+  role: string;
+  orchStatus: string;
+  physicalName: string;
+  instanceId: string;
+  serviceName : string;
+  serviceUUID : string;
+  tenantName  : string;
+  lcpCloudRegionId : string;
+  modelInfo : {
+    modelCustomizationId: string;
+    modelInvariantId: string;
+    modelVersionId: string;
+    modelType: string;
+  }
+}
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vrf/vrfModal/networkStep/network.step.service.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vrf/vrfModal/networkStep/network.step.service.spec.ts
new file mode 100644
index 000000000..e06e4c9f9
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vrf/vrfModal/networkStep/network.step.service.spec.ts
@@ -0,0 +1,458 @@
+import {NgRedux} from "@angular-redux/store";
+import {AppState} from "../../../../../../../shared/store/reducers";
+import {getTestBed, TestBed} from "@angular/core/testing";
+import {NgReduxTestingModule} from "@angular-redux/store/testing";
+import {HttpClientTestingModule} from "@angular/common/http/testing";
+import {FeatureFlagsService} from "../../../../../../../shared/services/featureFlag/feature-flags.service";
+import {AaiService} from "../../../../../../../shared/services/aaiService/aai.service";
+import {NetworkStepService} from "./network.step.service";
+import {updateGenericModalCriteria} from "../../../../../../../shared/storeUtil/utils/global/global.actions";
+import {ITableContent} from "../../../../../../../shared/components/searchMembersModal/members-table/element-table-row.model";
+
+describe('Network step service', () => {
+  let injector;
+  let service: NetworkStepService;
+  let store: NgRedux<AppState>;
+  beforeAll(done => (async () => {
+    TestBed.configureTestingModule({
+      imports: [NgReduxTestingModule, HttpClientTestingModule],
+      providers: [
+        NetworkStepService,
+        FeatureFlagsService,
+        AaiService
+      ]
+    });
+    await TestBed.compileComponents();
+    injector = getTestBed();
+    service = injector.get(NetworkStepService);
+    store = injector.get(NgRedux);
+  })().then(done).catch(done.fail));
+
+  test('service should be defined', () => {
+    expect(service).toBeDefined();
+  });
+
+
+  test('networkStep', () => {
+    spyOn(store, 'getState').and.returnValue({
+      "global": {
+        "genericModalHelper": {
+          "selectedNetwork": {
+            "action": "None",
+            "instanceName": "NETWORK_1_INSTANCE_NAME",
+            "instanceId": "NETWORK_1_INSTANCE_ID",
+            "orchStatus": null,
+            "productFamilyId": null,
+            "lcpCloudRegionId": "hvf23b",
+            "tenantId": "3e9a20a3e89e45f884e09df0cc2d2d2a",
+            "tenantName": "APPC-24595-T-IST-02C",
+            "modelInfo": {
+              "modelInvariantId": "network-instance-model-invariant-id",
+              "modelVersionId": "7a6ee536-f052-46fa-aa7e-2fca9d674c44",
+              "modelVersion": "2.0",
+              "modelName": "vf_vEPDG",
+              "modelType": "vnf"
+            },
+            "roles": ["network role 1", "network role 2"],
+            "instanceType": "NETWORK_1_INSTANCE_TYPE",
+            "provStatus": null,
+            "inMaint": false,
+            "uuid": "7a6ee536-f052-46fa-aa7e-2fca9d674c44",
+            "originalName": null,
+            "legacyRegion": null,
+            "lineOfBusiness": null,
+            "platformName": null,
+            "trackById": "VNF1_INSTANCE_ID",
+            "serviceInstanceId": "service-instance-id1",
+            "serviceInstanceName": "service-instance-name",
+            "isSelected": true
+          },
+          "selectedVpn": {
+            "vpn-id": "120d39fb-3627-473d-913c-d228dd0f8e5b",
+            "vpn-name": "LPPVPN",
+            "vpn-platform": "AVPN",
+            "vpn-type": "SERVICE-INFRASTRUCTURE",
+            "vpn-region": "USA,EMEA",
+            "customer-vpn-id": "VPN1260",
+            "model-customization-id": null,
+            "model-invariant-id": null,
+            "model-version-id": null,
+            "route-targets": null,
+            "isSelected": true
+          }
+        },
+        "genericModalCriteria": {"roles": ["-- select an option --", "network role 1", "network role 2", "network role 3", "network role 4", "network role 5"]},
+        "name": null,
+        "flags": {
+          "CREATE_INSTANCE_TEST": false,
+          "EMPTY_DRAWING_BOARD_TEST": false,
+          "FLAG_NETWORK_TO_ASYNC_INSTANTIATION": false,
+          "FLAG_ASYNC_INSTANTIATION": true,
+          "FLAG_ASYNC_JOBS": true,
+          "FLAG_ADD_MSO_TESTAPI_FIELD": true,
+          "FLAG_UNASSIGN_SERVICE": false,
+          "FLAG_SERVICE_MODEL_CACHE": false,
+          "FLAG_SHOW_ASSIGNMENTS": true,
+          "FLAG_FABRIC_CONFIGURATION_ASSIGNMENTS": true,
+          "FLAG_DUPLICATE_VNF": true,
+          "FLAG_DEFAULT_VNF": true,
+          "FLAG_SETTING_DEFAULTS_IN_DRAWING_BOARD": true,
+          "FLAG_A_LA_CARTE_AUDIT_INFO": true,
+          "FLAG_1810_CR_ADD_CLOUD_OWNER_TO_MSO_REQUEST": true,
+          "FLAG_PRESENT_PROVIDER_NETWORKS_ASSOCIATIONS": true,
+          "FLAG_1810_CR_SOFT_DELETE_ALACARTE_VF_MODULE": true,
+          "FLAG_1902_NEW_VIEW_EDIT": true,
+          "FLAG_VF_MODULE_RESUME_STATUS_CREATE": true,
+          "FLAG_1906_COMPONENT_INFO": true
+        },
+        "drawingBoardStatus": "CREATE",
+        "type": "UPDATE_DRAWING_BOARD_STATUS"
+      }, "service": {
+        "serviceHierarchy": {
+          "f028b2e2-7080-4b13-91b2-94944d4c42d8": {
+            "service": {
+              "uuid": "f028b2e2-7080-4b13-91b2-94944d4c42d8",
+              "invariantUuid": "dfc2c44c-2429-44ca-ae26-1e6dc1f207fb",
+              "name": "infraVPN",
+              "version": "1.0",
+              "toscaModelURL": null,
+              "category": "Network Service",
+              "serviceType": "BONDING",
+              "serviceRole": "INFRASTRUCTURE-VPN",
+              "description": "ddd",
+              "serviceEcompNaming": "true",
+              "instantiationType": "A-La-Carte",
+              "inputs": {},
+              "vidNotions": {"instantiationUI": "macroService", "modelCategory": "other", "viewEditUI": "legacy"}
+            },
+            "vnfs": {},
+            "networks": {},
+            "collectionResources": {},
+            "configurations": {},
+            "fabricConfigurations": {},
+            "serviceProxies": {
+              "misvpn_service_proxy 0": {
+                "uuid": "35186eb0-e6b6-4fa5-86bb-1501b342a7b1",
+                "invariantUuid": "73f89e21-b96c-473f-8884-8b93bcbd2f76",
+                "description": "A Proxy for Service MISVPN_SERVICE",
+                "name": "MISVPN_SERVICE Service Proxy",
+                "version": "3.0",
+                "customizationUuid": "4c2fb7e0-a0a5-4b32-b6ed-6a974e55d923",
+                "inputs": {},
+                "commands": {},
+                "properties": {"ecomp_generated_naming": "false"},
+                "type": "Service Proxy",
+                "sourceModelUuid": "d5cc7d15-c842-450e-95ae-2a69e66dd23b",
+                "sourceModelInvariant": "c126ec86-59fe-48c0-9532-e39a9b3e5272",
+                "sourceModelName": "MISVPN_SERVICE"
+              }
+            },
+            "vfModules": {},
+            "volumeGroups": {},
+            "pnfs": {},
+            "vnfGroups": {},
+            "vrfs": {
+              "VRF Entry Configuration 0": {
+                "uuid": "9cac02be-2489-4374-888d-2863b4511a59",
+                "invariantUuid": "b67a289b-1688-496d-86e8-1583c828be0a",
+                "description": "VRF Entry configuration object",
+                "name": "VRF Entry Configuration",
+                "version": "30.0",
+                "customizationUuid": "dd024d73-9bd1-425d-9db5-476338d53433",
+                "inputs": {},
+                "commands": {},
+                "properties": {"ecomp_generated_naming": "false"},
+                "type": "Configuration",
+                "modelCustomizationName": "VRF Entry Configuration 0",
+                "sourceNodes": [],
+                "collectorNodes": null,
+                "configurationByPolicy": false
+              }
+            }
+          }
+        },
+        "serviceInstance": {
+          "f028b2e2-7080-4b13-91b2-94944d4c42d8": {
+            "action": "Create",
+            "isDirty": false,
+            "vnfs": {},
+            "vrfs": {},
+            "instanceParams": [{}],
+            "validationCounter": 0,
+            "existingNames": {"dfd": ""},
+            "existingVNFCounterMap": {},
+            "existingVRFCounterMap": {},
+            "existingVnfGroupCounterMap": {},
+            "existingNetworksCounterMap": {},
+            "optionalGroupMembersMap": {},
+            "networks": {},
+            "vnfGroups": {},
+            "bulkSize": 1,
+            "instanceName": "dfd",
+            "globalSubscriberId": "e433710f-9217-458d-a79d-1c7aff376d89",
+            "subscriptionServiceType": "TYLER SILVIA",
+            "owningEntityId": "d61e6f2d-12fa-4cc2-91df-7c244011d6fc",
+            "projectName": "WATKINS",
+            "rollbackOnFailure": "true",
+            "aicZoneName": null,
+            "owningEntityName": "WayneHolland",
+            "testApi": "VNF_API",
+            "tenantName": null,
+            "modelInfo": {
+              "modelInvariantId": "dfc2c44c-2429-44ca-ae26-1e6dc1f207fb",
+              "modelVersionId": "f028b2e2-7080-4b13-91b2-94944d4c42d8",
+              "modelName": "infraVPN",
+              "modelVersion": "1.0",
+              "uuid": "f028b2e2-7080-4b13-91b2-94944d4c42d8",
+              "modelUniqueId": "f028b2e2-7080-4b13-91b2-94944d4c42d8"
+            },
+            "isALaCarte": true,
+            "name": "infraVPN",
+            "version": "1.0",
+            "description": "ddd",
+            "category": "Network Service",
+            "uuid": "f028b2e2-7080-4b13-91b2-94944d4c42d8",
+            "invariantUuid": "dfc2c44c-2429-44ca-ae26-1e6dc1f207fb",
+            "serviceType": "BONDING",
+            "serviceRole": "INFRASTRUCTURE-VPN",
+            "vidNotions": {"instantiationUI": "macroService", "modelCategory": "other", "viewEditUI": "legacy"},
+            "isEcompGeneratedNaming": true,
+            "isMultiStepDesign": false
+          }
+        },
+        "type": "UPDATE_CATEGORY_PARAMETERS",
+        "categoryParameters": {
+          "owningEntityList": [{
+            "id": "d61e6f2d-12fa-4cc2-91df-7c244011d6fc",
+            "name": "WayneHolland"
+          }, {"id": "Melissa", "name": "Melissa"}, {"id": "aaa1", "name": "aaa1"}],
+          "projectList": [{"id": "WATKINS", "name": "WATKINS"}, {"id": "x1", "name": "x1"}, {"id": "yyy1", "name": "yyy1"}],
+          "lineOfBusinessList": [{"id": "ONAP", "name": "ONAP"}, {"id": "zzz1", "name": "zzz1"}],
+          "platformList": [{"id": "platform", "name": "platform"}, {"id": "xxx1", "name": "xxx1"}]
+        }
+      }
+    });
+    const networkStep = service.getNetworkStep(
+      "f028b2e2-7080-4b13-91b2-94944d4c42d8",
+      <any>{
+        data: {
+          children: [],
+          componentInfoType: "VRF",
+          count: 0,
+          disabled: false,
+          id: "dd024d73-9bd1-425d-9db5-476338d53433",
+          isEcompGeneratedNaming: false,
+          max: 1,
+          modelCustomizationId: "dd024d73-9bd1-425d-9db5-476338d53433",
+          modelUniqueId: "dd024d73-9bd1-425d-9db5-476338d53433",
+          modelVersionId: "9cac02be-2489-4374-888d-2863b4511a59",
+          name: "VRF Entry Configuration 0",
+          tooltip: "VRF",
+          type: "VRF",
+          typeName: "VRF"
+        }
+      });
+
+
+    expect(networkStep.type).toEqual('Network');
+    expect(networkStep.title).toEqual('Associate network to VRF Entry');
+    expect(networkStep.description).toEqual('Select a network to associate to the VRF Entry');
+    expect(networkStep.noElementsMsg).toEqual('No network were found.');
+    expect(networkStep.maxSelectRow).toEqual(1);
+    expect(networkStep.uniqObjectField).toEqual('instanceId');
+    expect(networkStep.topButton.text).toEqual('Next');
+    expect(networkStep.criteria).toHaveLength(1);
+
+  });
+
+  test('getsNetworkStepSearchFields', () => {
+    const networkStepSearchFields = service.getsNetworkStepSearchFields({
+      "lcpCloudRegionId": "lcpCloudRegionId",
+      "tenantName": "tenantName"
+    });
+
+    expect(networkStepSearchFields[0].value).toEqual("lcpCloudRegionId");
+    expect(networkStepSearchFields[1].value).toEqual("tenantName");
+    expect(networkStepSearchFields[2].value).toEqual("Active");
+    expect(networkStepSearchFields[3].value).toEqual("VPN binding");
+  });
+
+  test('generateRolesOptions should sort networks roles, check if should add "Not assigned" option', () => {
+    const networks = [
+      {"role": "2"},
+      {"role": "3"},
+      {"role": "4"},
+      {"role": "1"},
+      {"role": "6"}
+    ];
+
+    spyOn(store, 'dispatch');
+
+    service.generateRolesOptions(networks);
+    expect(store.dispatch).toHaveBeenCalledWith(updateGenericModalCriteria("roles", ["-- select an option --", "1", "2", "3", "4", "6"]))
+
+    networks.push({"role": null});
+    service.generateRolesOptions(networks);
+    expect(store.dispatch).toHaveBeenCalledWith(updateGenericModalCriteria("roles", ["-- select an option --", "Not assigned", "1", "2", "3", "4", "6"]))
+  });
+
+  test('shouldAddNotAssigned- check if "Not Assigned" option to roles', () => {
+    const networks = [
+      {"role": "5"},
+      {"role": "3"},
+      {"role": "4"},
+      {"role": "1"},
+      {"role": "6"}
+    ];
+
+    let result: boolean = service.shouldAddNotAssigned(networks);
+    expect(result).toBeFalsy();
+
+    networks.push({"role": null});
+
+    result = service.shouldAddNotAssigned(networks);
+    expect(result).toBeTruthy();
+  });
+
+
+  test('getNetworkStepHeaders should return the correct headers for network popup', () => {
+    let headers = service.getNetworkStepHeaders();
+
+    expect(headers[0].displayName).toEqual('Name');
+    expect(headers[0].key).toEqual(['instanceName']);
+
+    expect(headers[1].displayName).toEqual('Type');
+    expect(headers[1].key).toEqual(['instanceType']);
+
+    expect(headers[2].displayName).toEqual('Role');
+    expect(headers[2].key).toEqual(['role']);
+
+    expect(headers[3].displayName).toEqual('Orch. Status');
+    expect(headers[3].key).toEqual(['orchStatus']);
+
+    expect(headers[4].displayName).toEqual('Physical name');
+    expect(headers[4].key).toEqual(['physicalName']);
+
+    expect(headers[5].displayName).toEqual('Instance ID');
+    expect(headers[5].key).toEqual(['instanceId']);
+
+    expect(headers[6].displayName).toEqual('Model UUID');
+    expect(headers[6].key).toEqual(['modelInfo', 'modelVersionId']);
+
+    expect(headers[7].displayName).toEqual('Service name');
+    expect(headers[7].key).toEqual(['serviceName']);
+
+    expect(headers[8].displayName).toEqual('Service UUID');
+    expect(headers[8].key).toEqual(['serviceUUID']);
+
+    expect(headers[9].displayName).toEqual('Tenant');
+    expect(headers[9].key).toEqual(['tenantName']);
+
+    expect(headers[10].displayName).toEqual('Region');
+    expect(headers[10].key).toEqual(['lcpCloudRegionId']);
+  });
+
+  test('getElementsFirstStep should return sort networks by instance name', () => {
+    let networks = [
+      {"instanceUUID": "B"},
+      {"instanceUUID": "A"},
+      {"instanceUUID": "D"},
+      {"instanceUUID": "C"},
+      {"instanceUUID": "E"}
+    ];
+
+    let sortedNetworkByInstanceName = service.sortElementsResultByField(networks, "instanceUUID");
+    expect(sortedNetworkByInstanceName).toEqual([
+      {"instanceUUID": "A"},
+      {"instanceUUID": "B"},
+      {"instanceUUID": "C"},
+      {"instanceUUID": "D"},
+      {"instanceUUID": "E"}
+    ])
+  });
+
+
+  test('getNetworkTableContent', () => {
+    let tableContent: ITableContent[] = service.getNetworkTableContent();
+    expect(tableContent).toEqual(
+    [
+      {
+        id: 'instanceName',
+        contents: [{
+          id: ['name'],
+          value: ["instanceName"]
+        }]
+      },
+      {
+        id: 'instanceType',
+        contents: [{
+          id: ['type'],
+          value: ['instanceType']
+        }]
+      },
+      {
+        id: 'role',
+        contents: [{
+          id: ['role'],
+          value: ['role']
+        }]
+      },
+      {
+        id: 'network-orch-status',
+        contents: [{
+          id: ['orchStatus'],
+          value: ['orchStatus']
+        }]
+      },
+      {
+        id: 'network-physical-name',
+        contents: [{
+          id: ['physicalName'],
+          value: ['physicalName']
+        }]
+      },
+      {
+        id: 'network-instance-id',
+        contents: [{
+          id: ['instanceID'],
+          value: ['instanceId']
+        }]
+      },
+      {
+        id: 'network-model-uuid',
+        contents: [{
+          id: ['modelUUID'],
+          value: ['modelInfo', 'modelVersionId']
+        }]
+      },
+      {
+        id: 'network-serviceName',
+        contents: [{
+          id: ['serviceName'],
+          value: ['serviceName']
+        }]
+      },
+      {
+        id: 'network-service-id',
+        contents: [{
+          id: ['serviceUUID'],
+          value: ['serviceUUID']
+        }]
+      },
+      {
+        id: 'network-tenantName',
+        contents: [{
+          id: ['tenant'],
+          value: ['tenantName']
+        }]
+      },
+      {
+        id: 'network-region',
+        contents: [{
+          id: ['region'],
+          value: ['lcpCloudRegionId']
+        }]
+      }
+    ]);
+  });
+});
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vrf/vrfModal/networkStep/network.step.service.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vrf/vrfModal/networkStep/network.step.service.ts
new file mode 100644
index 000000000..9cd928e8f
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vrf/vrfModal/networkStep/network.step.service.ts
@@ -0,0 +1,242 @@
+import {Injectable} from "@angular/core";
+import {NgRedux} from "@angular-redux/store";
+import {AppState} from "../../../../../../../shared/store/reducers";
+import {AaiService} from "../../../../../../../shared/services/aaiService/aai.service";
+import {
+  updateGenericModalCriteria,
+  updateGenericModalhelper
+} from "../../../../../../../shared/storeUtil/utils/global/global.actions";
+import {ElementsTableService} from "../../../../../../../shared/components/searchMembersModal/members-table/elements-table.service";
+import {
+  ICriteria, ISearchField, ITableContent,
+  ModalInformation
+} from "../../../../../../../shared/components/searchMembersModal/members-table/element-table-row.model";
+import {Observable, of} from "rxjs";
+import * as _ from "lodash";
+import {CustomTableColumnDefinition} from "../../../../../../../shared/components/searchMembersModal/members-table/elements-table.component";
+import {NetworkModalRow} from "./network.step.model";
+
+@Injectable()
+export class NetworkStepService {
+  constructor(private _store: NgRedux<AppState>, private _aaiService: AaiService) {}
+
+  uniqObjectField: string = "instanceId";
+  type: string = "Network";
+
+  getNetworkStep = (serviceInstance, serviceModelId, ...otherSteps): ModalInformation => {
+    return {
+      type: this.type,
+      serviceModelId: serviceModelId,
+      title: 'Associate network to VRF Entry',
+      description: 'Select a network to associate to the VRF Entry',
+      noElementsMsg: 'No network were found.',
+      maxSelectRow: 1,
+      uniqObjectField: this.uniqObjectField,
+      backAction: (searchElementsModalComponent) => {
+        searchElementsModalComponent.closeDialog();
+      },
+      topButton: {
+        text: 'Next',
+        action: (searchElementsModalComponent) => {
+          let tmpMembers = searchElementsModalComponent._membersTableService.allElementsStatusMap;
+          let vpnStep = otherSteps[0];
+          for (let key in tmpMembers) {
+            if (tmpMembers[key].isSelected) {
+              this._store.dispatch(updateGenericModalhelper(`selected${this.type}`, tmpMembers[key], this.uniqObjectField));
+            }
+          }
+          ElementsTableService.changeModalInformationDataTrigger.next({
+            modalInformation: vpnStep.getVpnStep(serviceInstance, searchElementsModalComponent.modalInformation.serviceModelId, ...otherSteps),
+            selectedRowsIds: []
+          })
+        }
+      },
+      searchButton: {
+        text: 'Search',
+        action: (searchElementsModalComponent) => {
+          this.getNetworks(serviceInstance).subscribe((networks) => {
+            const currentRole = searchElementsModalComponent.modalInformation.criteria.find((criteria: ICriteria) => {
+              criteria.label === 'Roles';
+            });
+            ElementsTableService.changeFnTableDataTrigger.next(
+              networks.filter((network) => {
+                if (_.isNil(currentRole)) return network;
+                return network.role === currentRole.currentValue;
+              }));
+          });
+        }
+      },
+      getElements: (...args) => this.getNetworks(serviceInstance),
+      criteria: this.getNetworkStepCriteria(serviceInstance),
+      searchFields: this.getsNetworkStepSearchFields(serviceInstance),
+      tableHeaders: this.getNetworkStepHeaders(),
+      tableContent: this.getNetworkTableContent()
+    };
+  };
+
+  getNetworks = (serviceInstance): Observable<any[]> => {
+    let cloudRegion = serviceInstance.lcpCloudRegionId;
+    let tenantId = serviceInstance.tenantName;
+    return this._aaiService.retrieveActiveNetwork(cloudRegion, tenantId).map((networks: NetworkModalRow[]) => {
+      this.generateRolesOptions(networks);
+      return this.sortElementsResultByField(networks, this.uniqObjectField);
+    });
+  };
+
+  getNetworkStepCriteria(serviceInstance): ICriteria[] {
+    return [{
+      label: "Roles",
+      defaultValue: "",
+      type: 'DROPDOWN',
+      onInit: (): Observable<any> => of(this._store.getState().global.genericModalCriteria.roles),
+      onChange: (that, selectedOption): void => {
+        that.currentValue = selectedOption;
+      },
+      dataTestId: 'roles-criteria',
+      isRequired: false
+    }]
+  }
+
+  getsNetworkStepSearchFields = (serviceInstance): ISearchField[] => {
+    return [
+      {
+        title: 'Region',
+        dataTestId: 'Region',
+        value: serviceInstance["lcpCloudRegionId"],
+        type: "LABEL"
+      }, {
+        title: 'Tenant',
+        dataTestId: 'Tenant',
+        value: serviceInstance["tenantName"],
+        type: "LABEL"
+      },
+      {
+        title: 'Orch. status',
+        dataTestId: 'Orch_status',
+        value: "Active",
+        type: "LABEL"
+      },
+      {
+        title: 'Related to',
+        dataTestId: 'Related_to',
+        value: "VPN binding",
+        type: "LABEL"
+      }
+    ]
+  };
+
+  generateRolesOptions = (networks): void => {
+    let roles: string[] = (_.uniq(_.flatten(_.map(networks, 'role').filter((role) => !_.isNil(role))))).sort();
+    const SELECTED_AN_OPTION: string = "-- select an option --";
+    const NOT_ASSIGNED: string = "Not assigned";
+
+    roles = _.remove([SELECTED_AN_OPTION, this.shouldAddNotAssigned(networks) ? NOT_ASSIGNED : null, ...roles], null);
+    this._store.dispatch(updateGenericModalCriteria("roles", roles));
+  };
+
+  getNetworkStepHeaders = (): CustomTableColumnDefinition[] => {
+    return [
+      {displayName: `Name`, key: ['instanceName']},
+      {displayName: `Type`, key: ['instanceType']},
+      {displayName: `Role`, key: ['role']},
+      {displayName: 'Orch. Status', key: ['orchStatus']},
+      {displayName: 'Physical name', key: ['physicalName']},
+      {displayName: 'Instance ID', key: ['instanceId']},
+      {displayName: 'Model UUID', key: ['modelInfo', 'modelVersionId']},
+      {displayName: 'Service name', key: ['serviceName']},
+      {displayName: 'Service UUID', key: ['serviceUUID']},
+      {displayName: 'Tenant', key: ['tenantName']},
+      {displayName: 'Region', key: ['lcpCloudRegionId']}
+    ];
+  };
+
+  getNetworkTableContent = (): ITableContent[] => {
+    return [
+      {
+        id: 'instanceName',
+        contents: [{
+          id: ['name'],
+          value: ["instanceName"]
+        }]
+      },
+      {
+        id: 'instanceType',
+        contents: [{
+          id: ['type'],
+          value: ['instanceType']
+        }]
+      },
+      {
+        id: 'role',
+        contents: [{
+          id: ['role'],
+          value: ['role']
+        }]
+      },
+      {
+        id: 'network-orch-status',
+        contents: [{
+          id: ['orchStatus'],
+          value: ['orchStatus']
+        }]
+      },
+      {
+        id: 'network-physical-name',
+        contents: [{
+          id: ['physicalName'],
+          value: ['physicalName']
+        }]
+      },
+      {
+        id: 'network-instance-id',
+        contents: [{
+          id: ['instanceID'],
+          value: ['instanceId']
+        }]
+      },
+      {
+        id: 'network-model-uuid',
+        contents: [{
+          id: ['modelUUID'],
+          value: ['modelInfo', 'modelVersionId']
+        }]
+      },
+      {
+        id: 'network-serviceName',
+        contents: [{
+          id: ['serviceName'],
+          value: ['serviceName']
+        }]
+      },
+      {
+        id: 'network-service-id',
+        contents: [{
+          id: ['serviceUUID'],
+          value: ['serviceUUID']
+        }]
+      },
+      {
+        id: 'network-tenantName',
+        contents: [{
+          id: ['tenant'],
+          value: ['tenantName']
+        }]
+      },
+      {
+        id: 'network-region',
+        contents: [{
+          id: ['region'],
+          value: ['lcpCloudRegionId']
+        }]
+      }
+    ];
+  };
+
+  sortElementsResultByField = (elements, fieldName): any[] => {
+    return _.sortBy(elements, o => o[fieldName]);
+  };
+
+  shouldAddNotAssigned = (networks): boolean => {
+    return _.values(networks).some(network => _.isNil(network.role) || network.role === "");
+  };
+}
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vrf/vrfModal/vpnStep/vpn.step.model.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vrf/vrfModal/vpnStep/vpn.step.model.ts
new file mode 100644
index 000000000..ea3c69690
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vrf/vrfModal/vpnStep/vpn.step.model.ts
@@ -0,0 +1,17 @@
+export class VPNModalRow {
+  instanceId: string;
+  instanceName: string;
+  platformName: string;
+  instanceType: string;
+  region: string;
+  customerId: string;
+  modelInfo : {
+    modelCustomizationId: string;
+    modelInvariantId: string;
+    modelVersionId:  string;
+  };
+  routeTargets: {
+    "globalRouteTarget" : string,
+    "routeTargetRole" : string
+  }[];
+}
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vrf/vrfModal/vpnStep/vpn.step.service.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vrf/vrfModal/vpnStep/vpn.step.service.spec.ts
new file mode 100644
index 000000000..b64b2f1b5
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vrf/vrfModal/vpnStep/vpn.step.service.spec.ts
@@ -0,0 +1,463 @@
+import {NgRedux} from "@angular-redux/store";
+import {AppState} from "../../../../../../../shared/store/reducers";
+import {getTestBed, TestBed} from "@angular/core/testing";
+import {NgReduxTestingModule} from "@angular-redux/store/testing";
+import {HttpClientTestingModule} from "@angular/common/http/testing";
+import {FeatureFlagsService} from "../../../../../../../shared/services/featureFlag/feature-flags.service";
+import {AaiService} from "../../../../../../../shared/services/aaiService/aai.service";
+import {VpnStepService} from "./vpn.step.service";
+import {NetworkStepService} from "../networkStep/network.step.service";
+import {ITableContent} from "../../../../../../../shared/components/searchMembersModal/members-table/element-table-row.model";
+import {SearchElementsModalComponent} from "../../../../../../../shared/components/searchMembersModal/search-elements-modal.component";
+import {ElementsTableService} from "../../../../../../../shared/components/searchMembersModal/members-table/elements-table.service";
+import {DataFilterPipe} from "../../../../../../../shared/pipes/dataFilter/data-filter.pipe";
+import * as _ from "lodash";
+
+describe('VPN step service', () => {
+  let injector;
+  let service: VpnStepService;
+  let memberTableService: ElementsTableService;
+  let store: NgRedux<AppState>;
+  beforeAll(done => (async () => {
+    TestBed.configureTestingModule({
+      imports: [NgReduxTestingModule, HttpClientTestingModule],
+      providers: [
+        VpnStepService,
+        NetworkStepService,
+        FeatureFlagsService,
+        AaiService,
+        ElementsTableService,
+        DataFilterPipe
+      ]
+    });
+    await TestBed.compileComponents();
+    injector = getTestBed();
+    service = injector.get(VpnStepService);
+    store = injector.get(NgRedux);
+    memberTableService = injector.get(ElementsTableService);
+  })().then(done).catch(done.fail));
+
+  test('service should be defined', () => {
+    expect(service).toBeDefined();
+  });
+
+  test('getVPNStepHeaders', () => {
+    let vpnHeaders = service.getVPNStepHeaders();
+    expect(vpnHeaders).toEqual([
+      {displayName: `VPN instance name`, key: ['instanceName']},
+      {displayName: `Version`, key: ['modelInfo', 'modelVersionId']},
+      {displayName: `Instance ID`, key: ['instanceId']},
+      {displayName: `Platform`, key: ['platformName']},
+      {displayName: 'Region', key: ['region']},
+      {displayName: 'Route target', key: ['routeTargets', 'globalRouteTarget'], type: "LIST"},
+      {displayName: 'Route target role', key: ['routeTargets', 'routeTargetRole'], type: "LIST"},
+      {displayName: 'Customer VPN ID', key: ['customerId']},
+    ]);
+  });
+
+
+  test('vpnStep', () => {
+    spyOn(store, 'getState').and.returnValue({
+      "global": {
+        "genericModalHelper": {
+          "selectedNetwork": {
+            "action": "None",
+            "instanceName": "NETWORK_1_INSTANCE_NAME",
+            "instanceId": "NETWORK_1_INSTANCE_ID",
+            "orchStatus": null,
+            "productFamilyId": null,
+            "lcpCloudRegionId": "hvf23b",
+            "tenantId": "3e9a20a3e89e45f884e09df0cc2d2d2a",
+            "tenantName": "APPC-24595-T-IST-02C",
+            "modelInfo": {
+              "modelInvariantId": "network-instance-model-invariant-id",
+              "modelVersionId": "7a6ee536-f052-46fa-aa7e-2fca9d674c44",
+              "modelVersion": "2.0",
+              "modelName": "vf_vEPDG",
+              "modelType": "vnf"
+            },
+            "roles": ["network role 1", "network role 2"],
+            "instanceType": "NETWORK_1_INSTANCE_TYPE",
+            "provStatus": null,
+            "inMaint": false,
+            "uuid": "7a6ee536-f052-46fa-aa7e-2fca9d674c44",
+            "originalName": null,
+            "legacyRegion": null,
+            "lineOfBusiness": null,
+            "platformName": null,
+            "trackById": "VNF1_INSTANCE_ID",
+            "serviceInstanceId": "service-instance-id1",
+            "serviceInstanceName": "service-instance-name",
+            "isSelected": true
+          },
+          "selectedVpn": {
+            "vpn-id": "120d39fb-3627-473d-913c-d228dd0f8e5b",
+            "vpn-name": "LPPVPN",
+            "vpn-platform": "AVPN",
+            "vpn-type": "SERVICE-INFRASTRUCTURE",
+            "vpn-region": "USA,EMEA",
+            "customer-vpn-id": "VPN1260",
+            "model-customization-id": null,
+            "model-invariant-id": null,
+            "model-version-id": null,
+            "route-targets": null,
+            "isSelected": true
+          }
+        },
+      }, "service": {}
+    });
+    const networkStep = service.getVpnStep(
+      "f028b2e2-7080-4b13-91b2-94944d4c42d8",
+      <any>{
+        data: {
+          children: [],
+          componentInfoType: "VRF",
+          count: 0,
+          disabled: false,
+          id: "dd024d73-9bd1-425d-9db5-476338d53433",
+          isEcompGeneratedNaming: false,
+          max: 1,
+          modelCustomizationId: "dd024d73-9bd1-425d-9db5-476338d53433",
+          modelUniqueId: "dd024d73-9bd1-425d-9db5-476338d53433",
+          modelVersionId: "9cac02be-2489-4374-888d-2863b4511a59",
+          name: "VRF Entry Configuration 0",
+          tooltip: "VRF",
+          type: "VRF",
+          typeName: "VRF"
+        }
+      });
+
+    expect(networkStep.type).toEqual('VPN');
+    expect(networkStep.title).toEqual('Associate VPN');
+    expect(networkStep.description).toEqual('Select a VPN to associate to the VRF Entry');
+    expect(networkStep.noElementsMsg).toEqual('No VPN instances were found.');
+    expect(networkStep.maxSelectRow).toEqual(1);
+    expect(networkStep.uniqObjectField).toEqual('instanceId');
+    expect(networkStep.topButton.text).toEqual('SET VPN');
+    expect(networkStep.criteria).toHaveLength(0);
+
+  });
+
+  test('getsVPNStepSearchFields', () => {
+    const networkStepSearchFields = service.getsVPNStepSearchFields();
+    expect(networkStepSearchFields[0].value).toEqual("SERVICE-INFRASTRUCTURE");
+  });
+
+  test('getVpnStepHeaders should return the correct headers for vpn popup', () => {
+    let headers = service.getVPNStepHeaders();
+    expect(headers[0].displayName).toEqual('VPN instance name');
+    expect(headers[0].key).toEqual(['instanceName']);
+
+    expect(headers[1].displayName).toEqual('Version');
+    expect(headers[1].key).toEqual(['modelInfo', 'modelVersionId']);
+
+    expect(headers[2].displayName).toEqual('Instance ID');
+    expect(headers[2].key).toEqual(['instanceId']);
+
+    expect(headers[3].displayName).toEqual('Platform');
+    expect(headers[3].key).toEqual(['platformName']);
+
+    expect(headers[4].displayName).toEqual('Region');
+    expect(headers[4].key).toEqual(['region']);
+
+    expect(headers[5].displayName).toEqual('Route target');
+    expect(headers[5].key).toEqual(['routeTargets', 'globalRouteTarget']);
+
+    expect(headers[6].displayName).toEqual('Route target role');
+    expect(headers[6].key).toEqual(['routeTargets', 'routeTargetRole']);
+
+    expect(headers[7].displayName).toEqual('Customer VPN ID');
+    expect(headers[7].key).toEqual(['customerId']);
+
+  });
+
+  test('getElementsFirstStep should return sort vpns by name', () => {
+    let vpns = [
+      {"name": "B"},
+      {"name": "A"},
+      {"name": "D"},
+      {"name": "C"},
+      {"name": "E"}
+    ];
+
+    let sortedNetworkByInstanceName = service.sortElementsResultByField(vpns, "name");
+    expect(sortedNetworkByInstanceName).toEqual([
+      {"name": "A"},
+      {"name": "B"},
+      {"name": "C"},
+      {"name": "D"},
+      {"name": "E"}
+    ])
+  });
+
+  test('getVpnTableContent', () => {
+    let tableContent: ITableContent[] = service.getVPNTableContent();
+    expect(tableContent).toEqual(
+      [
+        {
+          id: 'vpn-name',
+          contents: [{
+            id: ['vpn-name'],
+            value: ['instanceName']
+          }]
+        },
+        {
+          id: 'model-version-id',
+          contents: [{
+            id: ['model-version-id'],
+            value: ['modelInfo', 'modelVersionId']
+          }]
+        },
+        {
+          id: 'vpn-id',
+          contents: [{
+            id: ['vpn-id'],
+            value: ['instanceId']
+          }]
+        },
+        {
+          id: 'vpn-platform',
+          contents: [{
+            id: ['vpn-platform'],
+            value: ['platformName']
+          }]
+        },
+        {
+          id: 'vpn-region',
+          contents: [{
+            id: ['vpn-region'],
+            value: ['region']
+          }]
+        },
+        {
+          id: 'global-route-target',
+          contents: [{
+            id: ['global-route-target'],
+            value: ['routeTargets', 'globalRouteTarget'],
+            type: 'LIST'
+          }]
+        },
+        {
+          id: 'route-target-role',
+          contents: [{
+            id: ['route-target-role'],
+            value: ['routeTargets', 'routeTargetRole'],
+            type: 'LIST'
+          }]
+        },
+        {
+          id: 'customer-vpn-id',
+          contents: [{
+            id: ['customer-vpn-id'],
+            value: ['customerId']
+          }]
+        }
+      ]
+    )
+  });
+
+  test('associateVrfNetworkMember', () => {
+    const vrfStoreKey: string = 'vrfStoreKey';
+    const serviceModelId: string = 'serviceModelId';
+    const reduxState = {
+      "global": {
+        "genericModalHelper": {
+          "selectedNetwork": {
+            "10a74149-c9d7-4918-bbcf-d5fb9b1799ce": true
+          }
+        }
+      }
+    };
+    spyOn(store, 'dispatch');
+    spyOn(store, 'getState').and.returnValue(reduxState);
+    let searchElementsModalComponent = new SearchElementsModalComponent(null, null, null, null, null);
+
+    searchElementsModalComponent.modalInformation = <any>{
+      serviceModelId: serviceModelId
+    };
+    service.associateVrfNetworkMember(searchElementsModalComponent, vrfStoreKey);
+    expect(store.dispatch).toHaveBeenCalledTimes(Object.keys(reduxState.global.genericModalHelper.selectedNetwork).length);
+  });
+
+  test('associateVrfVPNMember', () => {
+    const vrfStoreKey: string = 'vrfStoreKey';
+    const serviceModelId: string = 'serviceModelId';
+    const members = {
+      "120d39fb-3627-473d-913c-d228dd0f8e5b": {
+        "instanceId": "120d39fb-3627-473d-913c-d228dd0f8e5b",
+        "instanceName": "LPPVPN",
+        "platformName": "AVPN",
+        "instanceType": "SERVICE-INFRASTRUCTURE",
+        "region": "USA,EMEA",
+        "customerId": "VPN1260",
+        "modelInfo": {
+          "modelCustomizationId": null,
+          "modelInvariantId": null,
+          "modelVersionId": null,
+        },
+        "routeTargets": [
+          {
+            "globalRouteTarget": "globalRouteTarget_1",
+            "routeTargetRole": "routeTargetRole_1"
+          },
+          {
+            "globalRouteTarget": "globalRouteTarget_2",
+            "routeTargetRole": "routeTargetRole_2"
+          },
+          {
+            "globalRouteTarget": "globalRouteTarget_3",
+            "routeTargetRole": "routeTargetRole_3"
+          }
+        ],
+        "isSelected": true
+      },
+      "c70391f3-a6e3-4874-9834-cbe12d7bf8b6": {
+        "instanceId": "c70391f3-a6e3-4874-9834-cbe12d7bf8b6",
+        "instanceName": "LPPVPN",
+        "platformName": "AVPN",
+        "instanceType": "SERVICE-INFRASTRUCTURE",
+        "region": "USA,EMEA",
+        "customerId": "VPN1274",
+        "modelInfo": {
+          "modelCustomizationId": null,
+          "modelInvariantId": null,
+          "modelVersionId": null
+        },
+        "routeTargets": null,
+        "isSelected": false
+      },
+      "4776516b-7da2-446c-9ba7-47ca8c30c571": {
+        "instanceId": "4776516b-7da2-446c-9ba7-47ca8c30c571",
+        "instanceName": "LPPVPN",
+        "platformName": "AVPN",
+        "instanceType": "SERVICE-INFRASTRUCTURE",
+        "region": "USA,EMEA",
+        "customerId": "VPN1275",
+        "modelInfo": {
+          "modelCustomizationId": null,
+          "modelInvariantId": null,
+          "modelVersionId": null
+        },
+
+        "routeTargets": null,
+        "isSelected": false
+      },
+      "46fcb25a-e7ba-4d96-99ba-3bb6eae6aba7": {
+        "instanceId": "46fcb25a-e7ba-4d96-99ba-3bb6eae6aba7",
+        "instanceName": "LPPVPN",
+        "platformName": "AVPN",
+        "instanceType": "SERVICE-INFRASTRUCTURE",
+        "region": "USA,EMEA",
+        "customerId": "VPN1271",
+        "modelInfo": {
+          "modelCustomizationId": null,
+          "modelInvariantId": null,
+          "modelVersionId": null,
+        },
+        "routeTargets": null,
+        "isSelected": false
+      },
+      "ffefbe38-3087-418a-87ae-f6582a15be78": {
+        "instanceId": "ffefbe38-3087-418a-87ae-f6582a15be78",
+        "instanceName": "LPPVPN",
+        "platformName": "AVPN",
+        "instanceType": "SERVICE-INFRASTRUCTURE",
+        "region": "USA,EMEA",
+        "customerId": "VPN1272",
+        "modelInfo": {
+          "modelCustomizationId": null,
+          "modelInvariantId": null,
+          "modelVersionId": null,
+        },
+        "routeTargets": null,
+        "isSelected": false
+      },
+      "961d05be-ee41-40a2-8653-f603fc495175": {
+        "id": "961d05be-ee41-40a2-8653-f603fc495175",
+        "name": "LPPVPN",
+        "platform": "AVPN",
+        "type": "SERVICE-INFRASTRUCTURE",
+        "region": "USA,EMEA",
+        "customerId": "VPN1273",
+        "modelCustomizationId": null,
+        "modelInvariantId": null,
+        "modelVersionId": null,
+        "routeTargets": null,
+        "isSelected": false
+      },
+      "14bcfc2f-bbee-4fd9-89a5-42eb5dbb08d5": {
+        "instanceId": "14bcfc2f-bbee-4fd9-89a5-42eb5dbb08d5",
+        "instanceName": "LPPVPN",
+        "platformName": "AVPN",
+        "instanceType": "SERVICE-INFRASTRUCTURE",
+        "region": "USA,EMEA",
+        "customerId": "913443",
+        "modelInfo": {
+          "modelCustomizationId": null,
+          "modelInvariantId": null,
+          "modelVersionId": null,
+        },
+        "routeTargets": null,
+        "isSelected": false
+      },
+      "89d4c968-158c-4722-a22c-c5c2ccc17fd5": {
+        "instanceId": "89d4c968-158c-4722-a22c-c5c2ccc17fd5",
+        "instanceName": "LPPVPN",
+        "platformName": "AVPN",
+        "instanceType": "SERVICE-INFRASTRUCTURE",
+        "region": "USA,EMEA",
+        "customerId": "VPN1276",
+        "modelInfo": {
+          "modelCustomizationId": null,
+          "modelInvariantId": null,
+          "modelVersionId": null,
+        },
+        "routeTargets": null,
+        "isSelected": false
+      },
+      "3e7834fb-a8e0-4243-a837-5352ccab4602": {
+        "instanceId": "3e7834fb-a8e0-4243-a837-5352ccab4602",
+        "instanceName": "LPPVPN",
+        "platformName": "AVPN",
+        "instanceType": "SERVICE-INFRASTRUCTURE",
+        "region": "USA,EMEA",
+        "customerId": "VPN1259",
+        "modelInfo": {
+          "modelCustomizationId": null,
+          "modelInvariantId": null,
+          "modelVersionId": null,
+        },
+        "routeTargets": null,
+        "isSelected": false
+      },
+      "844a1ea7-556a-4e49-8aa3-171f1db4ea02": {
+        "instanceId": "844a1ea7-556a-4e49-8aa3-171f1db4ea02",
+        "instanceName": "LPPVPN",
+        "platformName": "AVPN",
+        "instanceType": "SERVICE-INFRASTRUCTURE",
+        "region": "USA,EMEA",
+        "customerId": "VPN1277",
+        "modelInfo": {
+          "modelCustomizationId": null,
+          "modelInvariantId": null,
+          "modelVersionId": null,
+        },
+        "routeTargets": null,
+        "isSelected": false
+      }
+    };
+    spyOn(store, 'dispatch');
+    memberTableService.allElementsStatusMap = <any>members;
+    let searchElementsModalComponent = new SearchElementsModalComponent(null, null, null, memberTableService, null);
+
+    searchElementsModalComponent.modalInformation = <any>{
+      modalInformation: {
+        serviceModelId: serviceModelId
+      }
+    };
+
+    let memberArr = _.values(members);
+    service.associateVrfVPNMember(searchElementsModalComponent, vrfStoreKey);
+    expect(store.dispatch).toHaveBeenCalledTimes(memberArr.filter((item) => item.isSelected).length * 2);
+  });
+});
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vrf/vrfModal/vpnStep/vpn.step.service.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vrf/vrfModal/vpnStep/vpn.step.service.ts
new file mode 100644
index 000000000..5523cf1ff
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vrf/vrfModal/vpnStep/vpn.step.service.ts
@@ -0,0 +1,195 @@
+import {Injectable} from "@angular/core";
+import {NgRedux} from "@angular-redux/store";
+import {AppState} from "../../../../../../../shared/store/reducers";
+import {AaiService} from "../../../../../../../shared/services/aaiService/aai.service";
+import {
+  ISearchField,
+  ITableContent,
+  ModalInformation
+} from "../../../../../../../shared/components/searchMembersModal/members-table/element-table-row.model";
+import {ElementsTableService} from "../../../../../../../shared/components/searchMembersModal/members-table/elements-table.service";
+import {
+  clearAllGenericModalhelper,
+  updateGenericModalhelper
+} from "../../../../../../../shared/storeUtil/utils/global/global.actions";
+import {Observable} from "rxjs";
+import {CustomTableColumnDefinition} from "../../../../../../../shared/components/searchMembersModal/members-table/elements-table.component";
+import {VPNModalRow} from "./vpn.step.model";
+import {NetworkStepService} from "../networkStep/network.step.service";
+import * as _ from "lodash";
+import {
+  associateVRFMember,
+  clearAssociateVRFMemberInstance,
+  createVrfInstance
+} from "../../../../../../../shared/storeUtil/utils/vrf/vrf.actions";
+import {calculateNextUniqueModelName} from "../../../../../../../shared/storeUtil/utils/vnf/vnf.reducers";
+
+@Injectable()
+export class VpnStepService {
+  constructor(private _store: NgRedux<AppState>, private _aaiService: AaiService, private _networkStepService: NetworkStepService) {
+  }
+
+  uniqObjectField: string = "instanceId";
+  type: string = "VPN";
+
+  getVpnStep = (serviceInstance, serviceModelId, ...otherSteps): ModalInformation => {
+    return {
+      type: this.type,
+      serviceModelId: serviceModelId,
+      title: 'Associate VPN',
+      description: 'Select a VPN to associate to the VRF Entry',
+      noElementsMsg: 'No VPN instances were found.',
+      maxSelectRow: 1,
+      uniqObjectField: this.uniqObjectField,
+      backAction: (searchElementsModalComponent) => {
+        ElementsTableService.changeModalInformationDataTrigger.next({
+          modalInformation: otherSteps[1].getNetworkStep(serviceInstance, searchElementsModalComponent.modalInformation.serviceModelId, ...otherSteps),
+          selectedRowsIds: [this._store.getState().global.genericModalHelper.selectedNetwork.instanceUUID]
+        });
+      },
+      topButton: {
+        text: 'SET VPN',
+        action: (searchElementsModalComponent) => {
+          let currentVRF = this._store.getState().global.genericModalHelper['currentVRF'];
+          const vrfStoreKey: string = _.isNil(currentVRF['vrfStoreKey'])
+            ? calculateNextUniqueModelName(currentVRF['model']['name'], searchElementsModalComponent.modalInformation.serviceModelId, this._store.getState().service, 'vrfs')
+            : currentVRF['vrfStoreKey'];
+
+
+          if (_.isNil(currentVRF['vrfStoreKey'])) {
+            this._store.dispatch(createVrfInstance(currentVRF['model'], serviceModelId, vrfStoreKey));
+          } else {
+            this._store.dispatch(clearAssociateVRFMemberInstance(vrfStoreKey, serviceModelId, 'networks'));
+            this._store.dispatch(clearAssociateVRFMemberInstance(vrfStoreKey, serviceModelId, 'vpns'));
+          }
+
+          this.associateVrfVPNMember(searchElementsModalComponent, vrfStoreKey);
+          this.associateVrfNetworkMember(searchElementsModalComponent, vrfStoreKey);
+
+          this._store.dispatch(clearAllGenericModalhelper());
+          searchElementsModalComponent.closeDialog();
+        }
+      },
+      getElements: () => this.getVPNs(),
+      criteria: [],
+      searchFields: this.getsVPNStepSearchFields(),
+      tableHeaders: this.getVPNStepHeaders(),
+      tableContent: this.getVPNTableContent()
+    };
+  };
+
+  getVPNs = (): Observable<any[]> => {
+    return this._aaiService.retrieveActiveVPNs().map((vpns: VPNModalRow[]) => {
+      return this.sortElementsResultByField(vpns, "instanceName");
+    });
+  };
+
+  sortElementsResultByField = (elements, fieldName): any[] => {
+    return _.sortBy(elements, o => o[fieldName]);
+  };
+
+  associateVrfVPNMember = (searchElementsModalComponent, vrfStoreKey): void => {
+    let tmpMembers = searchElementsModalComponent._membersTableService.allElementsStatusMap;
+    for (let key in tmpMembers) {
+      if (tmpMembers[key].isSelected) {
+        this._store.dispatch(updateGenericModalhelper(`selected${this.type}`, tmpMembers[key], this.uniqObjectField));
+        this._store.dispatch(associateVRFMember(vrfStoreKey, searchElementsModalComponent.modalInformation.serviceModelId, tmpMembers[key], 'vpns'));
+      }
+    }
+  };
+
+  associateVrfNetworkMember = (searchElementsModalComponent, vrfStoreKey): void => {
+    let selectedNetworks = this._store.getState().global.genericModalHelper['selectedNetwork'];
+    for (let key in selectedNetworks) {
+      this._store.dispatch(associateVRFMember(vrfStoreKey, searchElementsModalComponent.modalInformation.serviceModelId, selectedNetworks[key], 'networks'));
+    }
+  };
+
+  getsVPNStepSearchFields = (): ISearchField[] => {
+    return [
+      {
+        title: 'Type ',
+        dataTestId: 'Type',
+        value: "SERVICE-INFRASTRUCTURE",
+        type: "LABEL"
+      }
+    ]
+  };
+
+  getVPNStepHeaders = (): CustomTableColumnDefinition[] => {
+    return [
+      {displayName: `VPN instance name`, key: ['instanceName']},
+      {displayName: `Version`, key: ['modelInfo', 'modelVersionId']},
+      {displayName: `Instance ID`, key: ['instanceId']},
+      {displayName: `Platform`, key: ['platformName']},
+      {displayName: 'Region', key: ['region']},
+      {displayName: 'Route target', key: ['routeTargets', 'globalRouteTarget'], type: 'LIST'},
+      {displayName: 'Route target role', key: ['routeTargets', 'routeTargetRole'], type: 'LIST'},
+      {displayName: 'Customer VPN ID', key: ['customerId']},
+    ];
+  };
+
+  getVPNTableContent = (): ITableContent[] => {
+    return [
+      {
+        id: 'vpn-name',
+        contents: [{
+          id: ['vpn-name'],
+          value: ['instanceName']
+        }]
+      },
+      {
+        id: 'model-version-id',
+        contents: [{
+          id: ['model-version-id'],
+          value: ['modelInfo', 'modelVersionId']
+        }]
+      },
+      {
+        id: 'vpn-id',
+        contents: [{
+          id: ['vpn-id'],
+          value: ['instanceId']
+        }]
+      },
+      {
+        id: 'vpn-platform',
+        contents: [{
+          id: ['vpn-platform'],
+          value: ['platformName']
+        }]
+      },
+      {
+        id: 'vpn-region',
+        contents: [{
+          id: ['vpn-region'],
+          value: ['region']
+        }]
+      },
+      {
+        id: 'global-route-target',
+        contents: [{
+          id: ['global-route-target'],
+          value: ['routeTargets', 'globalRouteTarget'],
+          type: 'LIST'
+        }]
+      },
+      {
+        id: 'route-target-role',
+        contents: [{
+          id: ['route-target-role'],
+          value: ['routeTargets', 'routeTargetRole'],
+          type: 'LIST'
+        }]
+      },
+      {
+        id: 'customer-vpn-id',
+        contents: [{
+          id: ['customer-vpn-id'],
+          value: ['customerId']
+        }]
+      }
+    ];
+  };
+
+}