VID - Feature flag for PNF in modern UI

This task is about introducing new feature flag: FLAG_EXTENDED_MACRO_PNF_CONFIG,
which will allow to choose different PNF implementations.
Main changes when flag is ON:
 - Modern UI will be used for instantiation of macro service with pnfs
 - There will be possibility to add instance of PNF in drawing board but
   this concerns only macro services

For now "plus" icon on PNF generates new popup window but it is still impossible
to add it as a new resource to service. This functionality will be implemented soon.

Issue-ID: VID-694
Change-Id: I375db2104687f1f634adac31d4d1af3675f5911c
Signed-off-by: Mateusz Goluchowski <mateusz.goluchowski@nokia.com>

20 files changed, 360 insertions, 27 deletions

diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/pnf/pnf.model.info.extended.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/pnf/pnf.model.info.extended.ts
new file mode 100644
index 000000000..e2e31e904
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/pnf/pnf.model.info.extended.ts
@@ -0,0 +1,138 @@
+import {ILevelNodeInfo} from "../basic.model.info";
+import {ComponentInfoType} from "../../../component-info/component-info-model";
+import {ModelInformationItem} from "../../../../../shared/components/model-information/model-information.component";
+import {ITreeNode} from "angular-tree-component/dist/defs/api";
+import {AvailableNodeIcons} from "../../../available-models-tree/available-models-tree.service";
+
+import {PNFModel} from "../../../../../shared/models/pnfModel";
+import {SharedTreeService} from "../../shared.tree.service";
+import * as _ from "lodash";
+import {FeatureFlagsService} from "../../../../../shared/services/featureFlag/feature-flags.service";
+import {NgRedux} from "@angular-redux/store";
+import {AppState} from "../../../../../shared/store/reducers";
+import {
+  GenericFormPopupComponent,
+  PopupType
+} from "../../../../../shared/components/genericFormPopup/generic-form-popup.component";
+import {DialogService} from "ng2-bootstrap-modal";
+import {PnfPopupService} from "../../../../../shared/components/genericFormPopup/genericFormServices/pnf/pnf.popup.service";
+import {PnfTreeNode} from "../../../../../shared/models/pnfTreeNode";
+
+
+export class PnfModelInfoExtended implements ILevelNodeInfo{
+
+  constructor(
+    private _store: NgRedux<AppState>,
+    private _sharedTreeService: SharedTreeService,
+    private _dialogService: DialogService,
+    private _pnfPopupService: PnfPopupService
+  ){}
+
+  name: string = 'pnfs';
+  type: string ='PNF';
+  typeName: string = 'PNF';
+  childNames: string[];
+  componentInfoType = ComponentInfoType.PNF;
+
+  createInstanceTreeNode = (instance: any, model: any, parentModel: any, storeKey: string, serviceModelId: string): any => {
+    let node = new PnfTreeNode(instance, model, storeKey);
+    node.missingData = this.hasMissingData(instance, node, model.isEcompGeneratedNaming);
+    node.typeName = this.typeName;
+    node.menuActions = this.getMenuAction(<any>node, serviceModelId);
+    node.isFailed = _.isNil(instance.isFailed) ? false : instance.isFailed;
+    node.statusMessage = !_.isNil(instance.statusMessage) ? instance.statusMessage : "";
+    node = this._sharedTreeService.addingStatusProperty(node);
+    return node;
+  };
+
+  getInfo(model, instance): ModelInformationItem[] {
+    const modelInformation = !_.isEmpty(model) ? [
+      ModelInformationItem.createInstance("Min instances", !_.isNil(model.min) ? String(model.min) : null),
+      this._sharedTreeService.createMaximumToInstantiateModelInformationItem(model)
+    ] : [];
+
+    const instanceInfo = !_.isEmpty(instance) ? [
+      ModelInformationItem.createInstance("NF type", instance.nfType),
+      ModelInformationItem.createInstance("NF role", instance.nfRole)
+    ] : [];
+
+    const result = [modelInformation, instanceInfo];
+    return _.uniq(_.flatten(result));
+  }
+
+  getMenuAction(node: ITreeNode, serviceModelId: string): { [methodName: string]: { method: Function; visible: Function; enable: Function } } {
+    return {};
+  }
+
+  getModel = (instanceModel: any): PNFModel => {
+    return new PNFModel(instanceModel);
+  };
+
+  getNextLevelObject(): any { return null;  }
+
+  getNodeCount(node: ITreeNode, serviceModelId: string): number {
+    let map = null;
+    if (!_.isNil(this._store.getState().service.serviceInstance[serviceModelId])) {
+      map = this._store.getState().service.serviceInstance[serviceModelId].existingPNFCounterMap || 0;
+
+      if (!_.isNil(map)) {
+        let count = map[node.data.modelUniqueId] || 0;
+        count -= this._sharedTreeService.getExistingInstancesWithDeleteMode(node, serviceModelId, 'pnfs');
+        return count;
+      }
+    }
+    return 0;
+  }
+
+  getNodePosition(instance): number {
+    return !_.isNil(instance) ? instance.position : null;
+  }
+
+  getTooltip = (): string => 'PNF';
+
+
+  getType = (): string => 'PNF';
+
+
+  hasMissingData(instance, dynamicInputs: any, isEcompGeneratedNaming: boolean): boolean {
+    return false;
+  }
+
+  isEcompGeneratedNaming(currentModel): boolean {
+    return false;
+  }
+
+  onClickAdd(node, serviceModelId: string): void {
+    this._dialogService.addDialog(GenericFormPopupComponent, {
+      type: PopupType.PNF,
+      uuidData: <any>{
+        serviceId: serviceModelId,
+        modelName: node.data.name,
+        pnfStoreKey: null,
+        modelId: node.data.modelVersionId,
+        type: node.data.type,
+        popupService: this._pnfPopupService
+      },
+      node: node,
+      isUpdateMode: false
+    })
+  }
+
+  showNodeIcons(node: ITreeNode, serviceModelId: string): AvailableNodeIcons {
+    let counter: number = !_.isNil(this._store.getState().service.serviceInstance[serviceModelId]) ?
+      (this._store.getState().service.serviceInstance[serviceModelId].existingPNFCounterMap[node.data.modelUniqueId] || 0) : 0;
+    counter -= this._sharedTreeService.getExistingInstancesWithDeleteMode(node, serviceModelId, 'pnfs');
+
+    const properties = this._store.getState().service.serviceHierarchy[serviceModelId].pnfs[node.data.name].properties;
+    const flags = FeatureFlagsService.getAllFlags(this._store);
+    const isReachedLimit: boolean = this._sharedTreeService.isReachedToMaxInstances(properties, counter, flags);
+    const showAddIcon = this._sharedTreeService.shouldShowAddIcon() && !isReachedLimit;
+    return new AvailableNodeIcons(showAddIcon, isReachedLimit)
+  }
+
+  updateDynamicInputsDataFromModel = (currentModel): any => [];
+
+  updatePosition(that, node, instanceId): void {
+  }
+
+}
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/relatedVnfMember/relatedVnfMember.info.model.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/relatedVnfMember/relatedVnfMember.info.model.spec.ts
index 8073d1727..6cc31ad57 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/relatedVnfMember/relatedVnfMember.info.model.spec.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/relatedVnfMember/relatedVnfMember.info.model.spec.ts
@@ -14,6 +14,7 @@ import {DuplicateService} from "../../../duplicate/duplicate.service";
 import {IframeService} from "../../../../../shared/utils/iframe.service";
 import {RelatedVnfMemberInfoModel} from "./relatedVnfMember.info.model";
 import {VfModuleUpgradePopupService} from "../../../../../shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popuop.service";
+import {PnfPopupService} from "../../../../../shared/components/genericFormPopup/genericFormServices/pnf/pnf.popup.service";
 
 
 class MockAppStore<T> {
@@ -41,6 +42,7 @@ describe('Related Vnf member Model Info', () => {
         VfModulePopupService,
         VfModuleUpgradePopupService,
         VnfPopupService,
+        PnfPopupService,
         DefaultDataGeneratorService,
         SharedTreeService,
         DuplicateService,
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vnf/vnf.model.info.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vnf/vnf.model.info.spec.ts
index 53aedddcb..1a31a21f1 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vnf/vnf.model.info.spec.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vnf/vnf.model.info.spec.ts
@@ -23,6 +23,7 @@ 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 {VfModuleUpgradePopupService} from "../../../../../shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popuop.service";
+import { PnfPopupService } from "../../../../../shared/components/genericFormPopup/genericFormServices/pnf/pnf.popup.service";
 
 class MockFeatureFlagsService extends  FeatureFlagsService{
   getAllFlags(): { [p: string]: boolean } {
@@ -58,6 +59,7 @@ describe('Vnf Model Info', () => {
         VfModulePopupService,
         VfModuleUpgradePopupService,
         VnfPopupService,
+        PnfPopupService,
         DefaultDataGeneratorService,
         SharedTreeService,
         DuplicateService,
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToInstanceTree/objectToInstanceTree.service.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToInstanceTree/objectToInstanceTree.service.spec.ts
index f8a738ac7..32b8d6bac 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToInstanceTree/objectToInstanceTree.service.spec.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToInstanceTree/objectToInstanceTree.service.spec.ts
@@ -36,6 +36,7 @@ import {VfModuleUpgradePopupService} from "../../../../shared/components/generic
 import {SharedControllersService} from "../../../../shared/components/genericForm/formControlsServices/sharedControlles/shared.controllers.service";
 import {ModalService} from "../../../../shared/components/customModal/services/modal.service";
 import {CreateDynamicComponentService} from "../../../../shared/components/customModal/services/create-dynamic-component.service";
+import {PnfPopupService} from "../../../../shared/components/genericFormPopup/genericFormServices/pnf/pnf.popup.service";
 
 class MockAppStore<T> {
   getState() {
@@ -67,6 +68,7 @@ describe('Model Tree Generator service', () => {
         DynamicInputsService,
         SharedTreeService,
         VnfPopupService,
+        PnfPopupService,
         VnfGroupPopupService,
         ControlGeneratorUtil,
         SharedControllersService,
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToInstanceTree/objectToInstanceTree.service.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToInstanceTree/objectToInstanceTree.service.ts
index 13dca560c..cabf80664 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToInstanceTree/objectToInstanceTree.service.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToInstanceTree/objectToInstanceTree.service.ts
@@ -37,7 +37,7 @@ export class ObjectToInstanceTreeService {
     this.numberOfElements = 0;
     let _this = this;
     const serviceModelId:string = serviceInstance.modelInfo.modelVersionId;
-    const firstLevelOptions: ILevelNodeInfo[] = _this._objectToTreeService.getFirstLevelOptions();
+    const firstLevelOptions: ILevelNodeInfo[] = _this._objectToTreeService.getFirstLevelOptions(serviceInstance.isAlaCarte);
     for (let option of firstLevelOptions) {
       _.forOwn(serviceInstance[option.name], function (instance, modelName) {
         nodes.push(_this.getNodeInstance(modelName, null, instance, serviceHierarchy, option, serviceModelId));
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToModelTree/objectToModelTree.service.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToModelTree/objectToModelTree.service.spec.ts
index 7fa679bb5..8d4dbc4bb 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToModelTree/objectToModelTree.service.spec.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToModelTree/objectToModelTree.service.spec.ts
@@ -39,6 +39,7 @@ import {VfModuleUpgradePopupService} from "../../../../shared/components/generic
 import {SharedControllersService} from "../../../../shared/components/genericForm/formControlsServices/sharedControlles/shared.controllers.service";
 import {ModalService} from "../../../../shared/components/customModal/services/modal.service";
 import {CreateDynamicComponentService} from "../../../../shared/components/customModal/services/create-dynamic-component.service";
+import {PnfPopupService} from "../../../../shared/components/genericFormPopup/genericFormServices/pnf/pnf.popup.service";
 
 class MockAppStore<T> {
   getState() {
@@ -92,6 +93,7 @@ describe('Model Tree Generator service', () => {
         SharedTreeService,
         DialogService,
         VnfPopupService,
+        PnfPopupService,
         VnfGroupPopupService,
         ControlGeneratorUtil,
         GenericFormService,
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToModelTree/objectToModelTree.service.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToModelTree/objectToModelTree.service.ts
index c3c8fa1b3..e769a1333 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToModelTree/objectToModelTree.service.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToModelTree/objectToModelTree.service.ts
@@ -18,7 +18,8 @@ export class ObjectToModelTreeService {
    ************************************************************/
   convertServiceHierarchyModelToTreeNodes(serviceModel): any[] {
     let _this = this;
-    const firstLevelOptions: ILevelNodeInfo[] = _this._objectToTreeService.getFirstLevelOptions();
+    let isALaCarte = serviceModel.service.vidNotions.instantiationType === "ALaCarte";
+    const firstLevelOptions: ILevelNodeInfo[] = _this._objectToTreeService.getFirstLevelOptions(isALaCarte);
     let nodes = [];
     let flags = this._featureFlagsService.getAllFlags();
     for (let option of firstLevelOptions) {
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToTree.service.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToTree.service.ts
index a70b7efeb..67a962e8a 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToTree.service.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToTree.service.ts
@@ -24,42 +24,55 @@ import {VrfModelInfo} from "./models/vrf/vrf.model.info";
 import {NetworkStepService} from "./models/vrf/vrfModal/networkStep/network.step.service";
 import {VpnStepService} from "./models/vrf/vrfModal/vpnStep/vpn.step.service";
 import {VfModuleUpgradePopupService} from "../../../shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popuop.service";
-import {FeatureFlagsService} from "../../../shared/services/featureFlag/feature-flags.service";
+import {FeatureFlagsService, Features} from "../../../shared/services/featureFlag/feature-flags.service";
 import {ModalService} from "../../../shared/components/customModal/services/modal.service";
+import {PnfPopupService} from "../../../shared/components/genericFormPopup/genericFormServices/pnf/pnf.popup.service";
+import {PnfModelInfoExtended} from "./models/pnf/pnf.model.info.extended";
 
 @Injectable()
 export class ObjectToTreeService {
   constructor(private _defaultDataGeneratorService: DefaultDataGeneratorService,
               private _dynamicInputsService: DynamicInputsService,
-              private _sharedTreeService : SharedTreeService,
-              private _dialogService : DialogService,
-              private _vnfPopupService : VnfPopupService,
-              private  _networkPopupService :  NetworkPopupService,
-              private _vfModulePopupService : VfModulePopupService,
-              private _vfModuleUpgradePopupService : VfModuleUpgradePopupService,
-              private _vnfGroupPopupService : VnfGroupPopupService,
-              private _duplicateService : DuplicateService,
+              private _sharedTreeService: SharedTreeService,
+              private _dialogService: DialogService,
+              private _vnfPopupService: VnfPopupService,
+              private _pnfPopupService: PnfPopupService,
+              private  _networkPopupService: NetworkPopupService,
+              private _vfModulePopupService: VfModulePopupService,
+              private _vfModuleUpgradePopupService: VfModuleUpgradePopupService,
+              private _vnfGroupPopupService: VnfGroupPopupService,
+              private _duplicateService: DuplicateService,
               private _modalService: ModalService,
-              private _iframeService : IframeService,
-              private _componentInfoService : ComponentInfoService,
-              private _networkStepService : NetworkStepService,
-              private _vpnStepService : VpnStepService,
-              private _aaiService : AaiService,
+              private _iframeService: IframeService,
+              private _componentInfoService: ComponentInfoService,
+              private _networkStepService: NetworkStepService,
+              private _vpnStepService: VpnStepService,
+              private _aaiService: AaiService,
               private _featureFlagsService: FeatureFlagsService,
-              private _store : NgRedux<AppState>) {
+              private _store: NgRedux<AppState>) {
   }
 
 
   /***********************************************************
    * return all first optional first level of the model tree
    ************************************************************/
-  getFirstLevelOptions(): ILevelNodeInfo[] {
-    return [new VnfModelInfo(this._dynamicInputsService, this._sharedTreeService, this._defaultDataGeneratorService, this._dialogService, this._vnfPopupService, this._vfModulePopupService, this._vfModuleUpgradePopupService,this._duplicateService, this._modalService, this._iframeService, this._componentInfoService, this._featureFlagsService, this._store)
-      , new NetworkModelInfo(this._dynamicInputsService, this._sharedTreeService, this._dialogService, this._networkPopupService, this._duplicateService, this._modalService, this._iframeService,  this._featureFlagsService, this._store),
-      new PnfModelInfo(this._sharedTreeService),
-      new VrfModelInfo(this._store, this._sharedTreeService, this._dialogService, this._iframeService, this._featureFlagsService, this._networkStepService, this._vpnStepService),
-      new CollectionResourceModelInfo(this._store, this._sharedTreeService),
-      new ConfigurationModelInfo(this._dynamicInputsService, this._sharedTreeService),
-      new VnfGroupingModelInfo(this._dynamicInputsService, this._sharedTreeService, this._dialogService, this._vnfGroupPopupService, this._iframeService, this._aaiService, this._store)];
-  };
+  getFirstLevelOptions(isALaCarte: boolean): ILevelNodeInfo[] {
+    if (FeatureFlagsService.getFlagState(Features.FLAG_EXTENDED_MACRO_PNF_CONFIG, this._store) === true && isALaCarte === false) {
+      return [new VnfModelInfo(this._dynamicInputsService, this._sharedTreeService, this._defaultDataGeneratorService, this._dialogService, this._vnfPopupService, this._vfModulePopupService, this._vfModuleUpgradePopupService, this._duplicateService, this._modalService, this._iframeService, this._componentInfoService, this._featureFlagsService, this._store)
+        , new NetworkModelInfo(this._dynamicInputsService, this._sharedTreeService, this._dialogService, this._networkPopupService, this._duplicateService, this._modalService, this._iframeService, this._featureFlagsService, this._store),
+        new PnfModelInfoExtended(this._store, this._sharedTreeService, this._dialogService, this._pnfPopupService),
+        new VrfModelInfo(this._store, this._sharedTreeService, this._dialogService, this._iframeService, this._featureFlagsService, this._networkStepService, this._vpnStepService),
+        new CollectionResourceModelInfo(this._store, this._sharedTreeService),
+        new ConfigurationModelInfo(this._dynamicInputsService, this._sharedTreeService),
+        new VnfGroupingModelInfo(this._dynamicInputsService, this._sharedTreeService, this._dialogService, this._vnfGroupPopupService, this._iframeService, this._aaiService, this._store)];
+    } else {
+      return [new VnfModelInfo(this._dynamicInputsService, this._sharedTreeService, this._defaultDataGeneratorService, this._dialogService, this._vnfPopupService, this._vfModulePopupService, this._vfModuleUpgradePopupService, this._duplicateService, this._modalService, this._iframeService, this._componentInfoService, this._featureFlagsService, this._store)
+        , new NetworkModelInfo(this._dynamicInputsService, this._sharedTreeService, this._dialogService, this._networkPopupService, this._duplicateService, this._modalService, this._iframeService, this._featureFlagsService, this._store),
+        new PnfModelInfo(this._sharedTreeService),
+        new VrfModelInfo(this._store, this._sharedTreeService, this._dialogService, this._iframeService, this._featureFlagsService, this._networkStepService, this._vpnStepService),
+        new CollectionResourceModelInfo(this._store, this._sharedTreeService),
+        new ConfigurationModelInfo(this._dynamicInputsService, this._sharedTreeService),
+        new VnfGroupingModelInfo(this._dynamicInputsService, this._sharedTreeService, this._dialogService, this._vnfGroupPopupService, this._iframeService, this._aaiService, this._store)];
+    }
+  }
 }
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/shared.tree.service.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/shared.tree.service.spec.ts
index 60f59de4c..9a35d4883 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/shared.tree.service.spec.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/shared.tree.service.spec.ts
@@ -44,6 +44,7 @@ import {VfModuleUpgradePopupService} from "../../../shared/components/genericFor
 import {SharedControllersService} from "../../../shared/components/genericForm/formControlsServices/sharedControlles/shared.controllers.service";
 import {ModalService} from "../../../shared/components/customModal/services/modal.service";
 import {CreateDynamicComponentService} from "../../../shared/components/customModal/services/create-dynamic-component.service";
+import { PnfPopupService } from "../../../shared/components/genericFormPopup/genericFormServices/pnf/pnf.popup.service";
 
 class MockAppStore<T> {
   getState() {
@@ -91,6 +92,7 @@ describe('Shared Tree Service', () => {
         DefaultDataGeneratorService,
         DialogService,
         VnfPopupService,
+        PnfPopupService,
         ControlGeneratorUtil,
         AaiService,
         LogService,
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/typeNodeInformation.model.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/typeNodeInformation.model.ts
index e8e22a422..78a963a07 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/typeNodeInformation.model.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/typeNodeInformation.model.ts
@@ -13,6 +13,11 @@ export class TypeNodeInformation {
           this.existingMappingCounterName = 'existingVNFCounterMap';
           break;
         }
+        case 'PNF' : {
+          this.hierarchyName = 'pnfs';
+          this.existingMappingCounterName = 'existingPNFCounterMap';
+          break;
+        }
         case 'VnfGroup' : {
           this.hierarchyName = 'vnfGroups';
           this.existingMappingCounterName = 'existingVnfGroupCounterMap';
diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/generic-form-popup.component.ts b/vid-webpack-master/src/app/shared/components/genericFormPopup/generic-form-popup.component.ts
index 1d8d827df..d43434e52 100644
--- a/vid-webpack-master/src/app/shared/components/genericFormPopup/generic-form-popup.component.ts
+++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/generic-form-popup.component.ts
@@ -27,6 +27,7 @@ export interface PopupModel {
 export enum PopupType {
   SERVICE = 'service',
   VNF = 'vnf',
+  PNF = 'pnf',
   NETWORK = 'network',
   VF_MODULE = 'vf_module',
   VF_MODULE_UPGRADE = 'vf_module_upgrade',
diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/generic-form-popup.service.ts b/vid-webpack-master/src/app/shared/components/genericFormPopup/generic-form-popup.service.ts
index e3cdaef85..f8ff222f7 100644
--- a/vid-webpack-master/src/app/shared/components/genericFormPopup/generic-form-popup.service.ts
+++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/generic-form-popup.service.ts
@@ -54,6 +54,16 @@ export class GenericFormPopupService {
           isUpdateMode
         );
       }
+      case 'PNF' : {
+        return uuidData.popupService.getGenericFormPopupDetails(
+          uuidData['serviceId'],
+          uuidData['modelName'],
+          uuidData['pnfStoreKey'],
+          node,
+          uuidData,
+          isUpdateMode
+        );
+      }
       case 'VnfGroup' : {
         return uuidData.popupService.getGenericFormPopupDetails(
           uuidData['serviceId'],
diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/basic.popup.service.ts b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/basic.popup.service.ts
index 9340a155a..dfc9a9d9d 100644
--- a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/basic.popup.service.ts
+++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/basic.popup.service.ts
@@ -13,6 +13,7 @@ import {VnfGroupModel} from "../../../models/vnfGroupModel";
 import {FeatureFlagsService} from "../../../services/featureFlag/feature-flags.service";
 import {ModelInformationItem} from "../../model-information/model-information.component";
 import {Constants} from "../../../utils/constants";
+import {PNFModel} from "../../../models/pnfModel";
 
 @Injectable()
 export class BasicPopupService {
@@ -39,6 +40,9 @@ export class BasicPopupService {
       case 'vnfs' : {
         return new VNFModel(rawModel, flags);
       }
+      case 'pnfs' : {
+        return new PNFModel(rawModel);
+      }
       case 'vfModules' : {
         return new VfModule(rawModel, flags);
       }
diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/pnf/pnf.popup.service.ts b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/pnf/pnf.popup.service.ts
new file mode 100644
index 000000000..c4f1b2eea
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/pnf/pnf.popup.service.ts
@@ -0,0 +1,139 @@
+import {Injectable} from '@angular/core';
+import {GenericPopupInterface} from "../generic-popup.interface";
+import {ITreeNode} from "angular-tree-component/dist/defs/api";
+import {FormPopupDetails, PopupType} from "../../../../models/formControlModels/formPopupDetails.model";
+import {FormGroup} from "@angular/forms";
+import {ModelInformationItem} from "../../../model-information/model-information.component";
+import {ServiceModel} from "../../../../models/serviceModel";
+import {Subject} from "rxjs/Subject";
+import {ControlGeneratorUtil} from "../../../genericForm/formControlsServices/control.generator.util.service";
+import {IframeService} from "../../../../utils/iframe.service";
+import {DefaultDataGeneratorService} from "../../../../services/defaultDataServiceGenerator/default.data.generator.service";
+import {AaiService} from "../../../../services/aaiService/aai.service";
+import {BasicPopupService} from "../basic.popup.service";
+import {NgRedux} from "@angular-redux/store";
+import {AppState} from "../../../../store/reducers";
+import {Subscriber} from "../../../../models/subscriber";
+import {Constants} from "../../../../utils/constants";
+import {PnfInstance} from "../../../../models/pnfInstance";
+import * as _ from 'lodash';
+
+@Injectable()
+export class PnfPopupService implements GenericPopupInterface{
+  dynamicInputs: any;
+  instance: any;
+  model:any;
+  serviceModel:ServiceModel;
+  modelInformations: ModelInformationItem[] = [];
+  uuidData: Object;
+  closeDialogEvent: Subject<any> = new Subject<any>();
+  isUpdateMode: boolean;
+
+  constructor(
+    private _basicControlGenerator: ControlGeneratorUtil,
+    private _iframeService: IframeService,
+    private _defaultDataGeneratorService: DefaultDataGeneratorService,
+    private _aaiService: AaiService,
+    private _basicPopupService: BasicPopupService,
+    private _store: NgRedux<AppState>) {
+  }
+
+  getGenericFormPopupDetails(serviceId: string, modelName: string, pnfStoreKey: string, node: ITreeNode, uuidData: Object, isUpdateMode: boolean): FormPopupDetails {
+    this.uuidData = uuidData;
+    this.isUpdateMode = isUpdateMode;
+    this.instance = this.getInstance(serviceId, modelName, pnfStoreKey);
+    this.getModelInformation(serviceId, modelName);
+
+    return new FormPopupDetails(this,
+      PopupType.PNF_MACRO,
+      uuidData,
+      this.getTitle(isUpdateMode),
+      this.getSubLeftTitle(),
+      this.getSubRightTitle(),
+      this.getControls(serviceId, modelName, pnfStoreKey),
+      this._basicPopupService.getDynamicInputs(serviceId, modelName, pnfStoreKey, 'pnfs'),
+      this.modelInformations,
+      (that, form: FormGroup) => {that.onSubmit(that, form);},
+      (that: any, form: FormGroup) => {that.onCancel(that, form); }
+      )
+  }
+
+  getControls(serviceId: string, modelName: string, pnfStoreKey: string){
+    return [];
+  }
+
+  getInstance(serviceId: string, modelName: string, pnfStoreKey: string): any {
+    if(_.isNil(pnfStoreKey)){
+      return new PnfInstance();
+    }
+    return this._store.getState().service.serviceInstance[serviceId].pnfs[pnfStoreKey];
+  }
+
+  getModelInformation(serviceId: string, modelName: string): void {
+    this._aaiService.getServiceModelById(serviceId).subscribe((result: any) => {
+      this.serviceModel = new ServiceModel(result);
+      this.model = this._basicPopupService.getModelFromResponse(result, 'pnfs', modelName);
+      const serviceInstance = this._store.getState().service.serviceInstance[serviceId];
+      this.modelInformations = [
+        new ModelInformationItem("Subscriber Name", "subscriberName", [this.extractSubscriberNameBySubscriberId(serviceInstance.globalSubscriberId, this._store)], "", true),
+        new ModelInformationItem("Service Name", "serviceModelName", [this.serviceModel.name], "", true),
+        new ModelInformationItem("Service Instance Name", "serviceName", [serviceInstance.instanceName], "", false),
+        new ModelInformationItem("Model Name", "modelName", [this.model.name], "", true),
+        new ModelInformationItem("Model version", "modelVersion", [this.model.version], "", true),
+        new ModelInformationItem("Description", "description", [this.model.description]),
+        new ModelInformationItem("Category", "category", [this.model.category]),
+        new ModelInformationItem("Sub Category", "subCategory", [this.model.subCategory]),
+        new ModelInformationItem("UUID", "uuid", [this.model.uuid], Constants.ServicePopup.TOOLTIP_UUID, true),
+        new ModelInformationItem("Invariant UUID", "invariantUuid", [this.model.invariantUuid], Constants.ServicePopup.TOOLTIP_INVARIANT_UUID, true),
+        new ModelInformationItem("Service type", "serviceType", [this.serviceModel.serviceType]),
+        new ModelInformationItem("Service role", "serviceRole", [this.serviceModel.serviceRole]),
+        new ModelInformationItem("Minimum to instantiate", "min", [!_.isNil(this.model.min) ? this.model.min.toString() : '0'], "", false),
+        this._basicPopupService.createMaximumToInstantiateModelInformationItem(this.model)
+        ];
+    })
+  }
+
+  getSubLeftTitle(): string {
+    return "PNF MODEL: " + this._store.getState().service.serviceHierarchy[this.uuidData['serviceId']].pnfs[this.uuidData['modelName']].name;
+  }
+
+  getSubRightTitle(): string {
+    return "PNF Instance Details";
+  }
+
+  storePNF = (that, formValues: any): void => {};
+
+  getTitle(isUpdateMode: boolean): string {
+    return isUpdateMode  ? "Edit PNF instance": "Set a new PNF" ;
+  }
+
+  onCancel(that, form): void {
+    form.reset();
+    that._iframeService.removeClassCloseModal('content');
+    this.closeDialogEvent.next(that);
+  }
+
+  onSubmit(that, form: FormGroup, ...args): void {
+    form.value['instanceParams'] = form.value['instanceParams'] && [form.value['instanceParams']];
+    that.storePNF(that, form.value);
+    window.parent.postMessage( {
+      eventId: 'submitIframe',
+      data: {
+        serviceModelId: that.uuidData.serviceId
+      }
+    }, "*");
+    that.onCancel(that, form);
+  }
+
+  extractSubscriberNameBySubscriberId(subscriberId: string, store: NgRedux<AppState>) {
+    let result: string = null;
+    let filteredArray: any = _.filter(store.getState().service.subscribers, function (o: Subscriber) {
+      return o.id === subscriberId
+    });
+    if (filteredArray.length > 0) {
+      result = filteredArray[0].name;
+    }
+    return result;
+  }
+
+}
diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vnf/vnf.popup.service.spec.ts b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vnf/vnf.popup.service.spec.ts
index 6d5cf7cfe..12ae813eb 100644
--- a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vnf/vnf.popup.service.spec.ts
+++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vnf/vnf.popup.service.spec.ts
@@ -16,6 +16,7 @@ import {FeatureFlagsService} from "../../../../services/featureFlag/feature-flag
 import {getTestBed, TestBed} from "@angular/core/testing";
 import {VfModuleUpgradePopupService} from "../vfModuleUpgrade/vfModule.upgrade.popuop.service";
 import {SharedControllersService} from "../../../genericForm/formControlsServices/sharedControlles/shared.controllers.service";
+import { PnfPopupService } from "../pnf/pnf.popup.service";
 
 class MockAppStore<T> {}
 
@@ -2251,6 +2252,7 @@ describe('vnf new popup service', () => {
     TestBed.configureTestingModule({
       providers : [
         VnfPopupService,
+        PnfPopupService,
         DefaultDataGeneratorService,
         GenericFormService,
         FormBuilder,
diff --git a/vid-webpack-master/src/app/shared/models/ServiceNodeTypes.ts b/vid-webpack-master/src/app/shared/models/ServiceNodeTypes.ts
index 945c69be9..aa3c4622f 100644
--- a/vid-webpack-master/src/app/shared/models/ServiceNodeTypes.ts
+++ b/vid-webpack-master/src/app/shared/models/ServiceNodeTypes.ts
@@ -1,5 +1,6 @@
 export enum ServiceNodeTypes {
   VF = "VF",
+  PNF = "PNF",
   VFmodule = "VFmodule",
   Network = "Network",
   VL = 'VL',
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
index 36704e28e..e8a37264e 100644
--- a/vid-webpack-master/src/app/shared/models/formControlModels/formPopupDetails.model.ts
+++ b/vid-webpack-master/src/app/shared/models/formControlModels/formPopupDetails.model.ts
@@ -47,6 +47,7 @@ export enum PopupType {
   SERVICE_A_LA_CART = 'service a-la-cart',
   SERVICE = 'service',
   VNF_MACRO  ='vnf macro',
+  PNF_MACRO  ='pnf macro',
   VNF_A_LA_CARTE = 'vnf a-la-carte',
   VFMODULE = 'vfModule',
   VFMODULE_UPGRADE = 'vfModule_upgrade',
diff --git a/vid-webpack-master/src/app/shared/models/serviceInstance.ts b/vid-webpack-master/src/app/shared/models/serviceInstance.ts
index cae69a6c8..1f111d14b 100644
--- a/vid-webpack-master/src/app/shared/models/serviceInstance.ts
+++ b/vid-webpack-master/src/app/shared/models/serviceInstance.ts
@@ -5,6 +5,7 @@ import {VnfGroupInstance} from "./vnfGroupInstance";
 import {VnfMember} from "./VnfMember";
 import {VrfInstance} from "./vrfInstance";
 import {VidNotions} from "./vidNotions";
+import {PnfInstance} from "./pnfInstance";
 
 export class ServiceInstance extends NodeInstance{
   isEcompGeneratedNaming: boolean;
@@ -22,6 +23,7 @@ export class ServiceInstance extends NodeInstance{
   latestAvailableVersion: Number;
   pause: boolean;
   bulkSize: number;
+  pnfs: { [pnf_module_model_name: string]: PnfInstance; };
   vnfs: { [vnf_module_model_name: string]: VnfInstance; };
   vrfs: { [vrf_model_name: string]: VrfInstance; };
   vnfGroups : {[vnf_module_model_name: string]: VnfGroupInstance; };
@@ -34,6 +36,7 @@ export class ServiceInstance extends NodeInstance{
   validationCounter: number;
   existingNames:  {[key: string] : any};
   modelInavariantId?: string;
+  existingPNFCounterMap : { [pnf_module_model_name: string]: number; };
   existingVNFCounterMap : { [vnf_module_model_name: string]: number; };
   existingVRFCounterMap : { [vrf_module_model_name: string]: number; };
   existingVnfGroupCounterMap : { [vnf_group_module_model_name: string]: number; };
@@ -47,10 +50,12 @@ export class ServiceInstance extends NodeInstance{
     super();
     this.isDirty = false;
     this.vnfs = {};
+    this.pnfs = {};
     this.vrfs = {};
     this.instanceParams = [];
     this.validationCounter = 0;
     this.existingNames = {};
+    this.existingPNFCounterMap = {};
     this.existingVNFCounterMap = {};
     this.existingVRFCounterMap = {};
     this.existingVnfGroupCounterMap = {};
diff --git a/vid-webpack-master/src/app/shared/services/featureFlag/feature-flags.service.ts b/vid-webpack-master/src/app/shared/services/featureFlag/feature-flags.service.ts
index a950653c6..206738095 100644
--- a/vid-webpack-master/src/app/shared/services/featureFlag/feature-flags.service.ts
+++ b/vid-webpack-master/src/app/shared/services/featureFlag/feature-flags.service.ts
@@ -27,7 +27,8 @@ export enum Features {
   FLAG_2008_REMOVE_PAUSE_INSTANTIATION = 'FLAG_2008_REMOVE_PAUSE_INSTANTIATION',
   FLAG_2008_DISABLE_DRAG_FOR_BASE_MODULE ='FLAG_2008_DISABLE_DRAG_FOR_BASE_MODULE',
   FLAG_2008_CREATE_VFMODULE_INSTANTIATION_ORDER_NUMBER ='FLAG_2008_CREATE_VFMODULE_INSTANTIATION_ORDER_NUMBER',
-  FLAG_2011_EXPORT_MSO_STATUS = 'FLAG_2011_EXPORT_MSO_STATUS'
+  FLAG_2011_EXPORT_MSO_STATUS = 'FLAG_2011_EXPORT_MSO_STATUS',
+  FLAG_EXTENDED_MACRO_PNF_CONFIG = 'FLAG_EXTENDED_MACRO_PNF_CONFIG'
 }
 
 @Injectable()
diff --git a/vid-webpack-master/src/app/shared/shared.module.ts b/vid-webpack-master/src/app/shared/shared.module.ts
index d16d68cb2..f228389aa 100644
--- a/vid-webpack-master/src/app/shared/shared.module.ts
+++ b/vid-webpack-master/src/app/shared/shared.module.ts
@@ -98,6 +98,7 @@ import { FileUploadModule } from 'ng2-file-upload';
 import {MessageModal} from "./components/messageModal/message-modal.service";
 import {SpaceToUnderscorePipe} from "./pipes/spaceToUnderscore/space-to-underscore.pipe";
 import {ResizableModule} from 'angular-resizable-element';
+import {PnfPopupService} from "./components/genericFormPopup/genericFormServices/pnf/pnf.popup.service";
 
 @NgModule({
   imports: [
@@ -248,6 +249,7 @@ import {ResizableModule} from 'angular-resizable-element';
     GenericFormPopupService,
     FormGeneralErrorsService,
     VnfPopupService,
+    PnfPopupService,
     AuditInfoModalComponentService,
     VnfPopupService,
     ElementsTableService,