Extend Modern UI for pnf usecase

Implemented functionalities to manage PNFs in modern UI:
   - Adding, removing, editing PNFs
   - PNF default generation based on 'min_instances' property
   - FE sends proper instantiation request to BE
This is still impossible to deploy service with PNFs as VID's BE logic must be adjusted
to generate proper request to SO as described in VID-695.

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

15 files changed, 760 insertions, 42 deletions

diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/network/network.model.info.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/network/network.model.info.ts
index ce1af451c..b01c79613 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/network/network.model.info.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/network/network.model.info.ts
@@ -215,7 +215,7 @@ export class NetworkModelInfo implements ILevelNodeInfo {
           let storeKey: string = node.data.networkStoreKey;
           this._store.dispatch(removeInstance(node.data.networkStoreKey, serviceModelId, storeKey, node));
           this._store.dispatch(changeInstanceCounter(node.data.modelUniqueId, serviceModelId, -1, node));
-          this._sharedTreeService.selectedVNF = null;
+          this._sharedTreeService.selectedNF = null;
         },
         visible: (node) => node.data.parentType !== 'VRF' && this._sharedTreeService.shouldShowRemoveAndEdit(node),
         enable: (node) => node.data.parentType !== 'VRF' && this._sharedTreeService.shouldShowRemoveAndEdit(node),
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/pnf/pnf.model.info.extended.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/pnf/pnf.model.info.extended.spec.ts
new file mode 100644
index 000000000..7e7a6fc1d
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/pnf/pnf.model.info.extended.spec.ts
@@ -0,0 +1,597 @@
+import {HttpClientTestingModule, HttpTestingController} from "@angular/common/http/testing";
+import {getTestBed, TestBed} from "@angular/core/testing";
+import {MockNgRedux, NgReduxTestingModule} from "@angular-redux/store/testing";
+import {PnfModelInfoExtended} from "./pnf.model.info.extended";
+import {DynamicInputsService} from "../../dynamicInputs.service";
+import {SharedTreeService} from "../../shared.tree.service";
+import {NgRedux} from "@angular-redux/store";
+import {AppState} from "../../../../../shared/store/reducers";
+import {DefaultDataGeneratorService} from "../../../../../shared/services/defaultDataServiceGenerator/default.data.generator.service";
+import {DialogService} from "ng2-bootstrap-modal";
+import {DuplicateService} from "../../../duplicate/duplicate.service";
+import {IframeService} from "../../../../../shared/utils/iframe.service";
+import {ComponentInfoService} from "../../../component-info/component-info.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 {PnfPopupService} from "../../../../../shared/components/genericFormPopup/genericFormServices/pnf/pnf.popup.service";
+import {DrawingBoardModes} from "../../../drawing-board.modes";
+import {ServiceInstanceActions} from "../../../../../shared/models/serviceInstanceActions";
+import {PNFModel} from "../../../../../shared/models/pnfModel";
+import {AvailableNodeIcons} from "../../../available-models-tree/available-models-tree.service";
+
+class MockFeatureFlagsService extends FeatureFlagsService {
+  getAllFlags(): { [p: string]: boolean } {
+    return {};
+  }
+}
+
+class NodeBuilder {
+  static getPnfNode() {
+    return this.getPnfNodeWithAction(ServiceInstanceActions.None);
+  }
+
+  static getPnfNodeWithAction(action: ServiceInstanceActions) {
+    return {
+      data: {
+        "action": action,
+        "pnfStoreKey": "PNF_KEY",
+        "children": null,
+        "name": "pnfName",
+        "modelUniqueId": "modelCustomizationId",
+        "menuActions": {
+          "delete": "",
+          "undoDelete": ""
+        }
+      },
+      children: null,
+      type: 'PNF'
+    };
+  }
+}
+
+describe('Pnf Model Info Extended', () => {
+  let injector;
+  let _dynamicInputsService: DynamicInputsService;
+  let _sharedTreeService: SharedTreeService;
+  let _dialogService: DialogService;
+  let _pnfPopupService: PnfPopupService;
+  let _duplicateService: DuplicateService;
+  let _iframeService: IframeService;
+  let _featureFlagsService: FeatureFlagsService;
+  let _store: NgRedux<AppState>;
+  let pnfModelExtended: PnfModelInfoExtended;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule, NgReduxTestingModule],
+      providers: [
+        MockNgRedux,
+        DynamicInputsService,
+        DialogService,
+        PnfPopupService,
+        DefaultDataGeneratorService,
+        SharedTreeService,
+        DuplicateService,
+        AaiService,
+        HttpClient,
+        HttpHandler,
+        {provide: FeatureFlagsService, useClass: MockFeatureFlagsService},
+        ComponentInfoService,
+        IframeService]
+    }).compileComponents();
+
+    injector = getTestBed();
+    _sharedTreeService = injector.get(SharedTreeService);
+    _store = injector.get(NgRedux);
+    _featureFlagsService = injector.get(FeatureFlagsService);
+
+    pnfModelExtended = new PnfModelInfoExtended(
+      _store,
+      _sharedTreeService,
+      _dialogService,
+      _pnfPopupService,
+      _iframeService,
+      _duplicateService,
+      null,
+      _dynamicInputsService);
+  });
+
+  test('pnfModelExtended should be defined', () => {
+    expect(pnfModelExtended).toBeDefined();
+  });
+
+  test('getMenuAction: edit should not be visible when mode is null and actions is "None"', () => {
+    jest.spyOn(MockNgRedux.getInstance(), 'getState').mockReturnValue({
+      global: {}
+    });
+
+    let node = NodeBuilder.getPnfNodeWithAction(ServiceInstanceActions.None);
+    let serviceModelId = "d6557200-ecf2-4641-8094-5393ae3aae60";
+    let menuActions = pnfModelExtended.getMenuAction(<any>node, serviceModelId);
+
+    expect(menuActions['edit']).toBeDefined();
+    expect(menuActions['edit'].visible(node)).toBeFalsy();
+    expect(menuActions['edit'].enable(node)).toBeFalsy();
+  });
+
+  test('getMenuAction: edit should be visible when mode is null and action is "Create"', () => {
+    jest.spyOn(MockNgRedux.getInstance(), 'getState').mockReturnValue({
+      global: {}
+    });
+
+    let node = NodeBuilder.getPnfNodeWithAction(ServiceInstanceActions.Create);
+    let serviceModelId = "d6557200-ecf2-4641-8094-5393ae3aae60";
+    let menuActions = pnfModelExtended.getMenuAction(<any>node, serviceModelId);
+
+    expect(menuActions['edit']).toBeDefined();
+    expect(menuActions['edit'].visible(node)).toBeTruthy();
+    expect(menuActions['edit'].enable(node)).toBeTruthy();
+  });
+
+  test('getMenuAction: edit should be visible when mode is "RETRY" and action is "Create"', () => {
+    jest.spyOn(MockNgRedux.getInstance(), 'getState').mockReturnValue({
+      global: {
+        drawingBoardStatus: DrawingBoardModes.RETRY
+      }
+    });
+
+    let node = NodeBuilder.getPnfNodeWithAction(ServiceInstanceActions.Create);
+    let serviceModelId = "d6557200-ecf2-4641-8094-5393ae3aae60";
+    let menuActions = pnfModelExtended.getMenuAction(<any>node, serviceModelId);
+
+    expect(menuActions['edit']).toBeDefined();
+    expect(menuActions['edit'].visible(node)).toBeFalsy();
+    expect(menuActions['edit'].enable(node)).toBeFalsy();
+  });
+
+  test('getMenuAction: showAuditInfo should be visible when mode is "RETRY"', () => {
+    jest.spyOn(MockNgRedux.getInstance(), 'getState').mockReturnValue({
+      global: {
+        drawingBoardStatus: DrawingBoardModes.RETRY
+      }
+    });
+
+    let node = NodeBuilder.getPnfNodeWithAction(ServiceInstanceActions.Create);
+    let serviceModelId = "d6557200-ecf2-4641-8094-5393ae3aae60";
+    let menuActions = pnfModelExtended.getMenuAction(<any>node, serviceModelId);
+
+    expect(menuActions['showAuditInfo']).toBeDefined();
+    expect(menuActions['showAuditInfo'].visible(node)).toBeTruthy();
+    expect(menuActions['showAuditInfo'].enable(node)).toBeTruthy();
+  });
+
+  test('getMenuAction: showAuditInfo should not be visible when mode is not "RETRY" and action is "CREATE"', () => {
+    jest.spyOn(MockNgRedux.getInstance(), 'getState').mockReturnValue({
+      global: {
+        drawingBoardStatus: DrawingBoardModes.EDIT
+      }
+    });
+
+    let node = NodeBuilder.getPnfNodeWithAction(ServiceInstanceActions.Create);
+    let serviceModelId = "d6557200-ecf2-4641-8094-5393ae3aae60";
+    let menuActions = pnfModelExtended.getMenuAction(<any>node, serviceModelId);
+
+    expect(menuActions['showAuditInfo']).toBeDefined();
+    expect(menuActions['showAuditInfo'].visible(node)).toBeFalsy();
+    expect(menuActions['showAuditInfo'].enable(node)).toBeFalsy();
+  });
+
+  test('getMenuAction: remove should dispatch 2 actions with proper data', () => {
+    let node = NodeBuilder.getPnfNodeWithAction(ServiceInstanceActions.None);
+    let serviceModelId = "d6557200-ecf2-4641-8094-5393ae3aae60";
+    let menuActions = pnfModelExtended.getMenuAction(<any>node, serviceModelId);
+
+    spyOn(_store, 'dispatch');
+    menuActions['remove'].method(node, serviceModelId);
+
+    expect(_store.dispatch).toHaveBeenCalledWith(jasmine.objectContaining({
+      type: "REMOVE_INSTANCE",
+      storeKey: "PNF_KEY"
+    }));
+    expect(_store.dispatch).toHaveBeenCalledWith(jasmine.objectContaining({
+      type: "CHANGE_INSTANCE_COUNTER",
+      changeBy: -1
+    }));
+  });
+
+  test('getMenuAction: remove should not dispatch actions when node has children', () => {
+    let node = NodeBuilder.getPnfNodeWithAction(ServiceInstanceActions.None);
+    let serviceModelId = "d6557200-ecf2-4641-8094-5393ae3aae60";
+    let menuActions = pnfModelExtended.getMenuAction(<any>node, serviceModelId);
+    node.data.children = [
+      {"not": "empty"}
+    ];
+
+    spyOn(_store, 'dispatch');
+    menuActions['remove'].method(node, serviceModelId);
+
+    expect(_store.dispatch).not.toHaveBeenCalledWith(jasmine.objectContaining({
+      type: "REMOVE_INSTANCE",
+      storeKey: "PNF_KEY"
+    }));
+    expect(_store.dispatch).not.toHaveBeenCalledWith(jasmine.objectContaining({
+      type: "CHANGE_INSTANCE_COUNTER",
+      changeBy: -1
+    }));
+  });
+
+  test('getMenuAction: delete should dispatch delete action', () => {
+    let node = NodeBuilder.getPnfNodeWithAction(ServiceInstanceActions.None);
+    let serviceModelId = "d6557200-ecf2-4641-8094-5393ae3aae60";
+    let menuActions = pnfModelExtended.getMenuAction(<any>node, serviceModelId);
+
+    spyOn(_store, 'dispatch');
+    menuActions['delete'].method(node, serviceModelId);
+
+    expect(_store.dispatch).toHaveBeenCalledWith(jasmine.objectContaining({
+      type: "DELETE_PNF_INSTANCE",
+      storeKey: "PNF_KEY"
+    }));
+  });
+
+  test('getMenuAction: delete should show modal when node has children', () => {
+    let node = NodeBuilder.getPnfNodeWithAction(ServiceInstanceActions.None);
+    let serviceModelId = "d6557200-ecf2-4641-8094-5393ae3aae60";
+    let menuActions = pnfModelExtended.getMenuAction(<any>node, serviceModelId);
+    node.data.children = [
+      {"not": "empty"}
+    ];
+
+    spyOn(_sharedTreeService, 'shouldShowDeleteInstanceWithChildrenModal');
+    menuActions['delete'].method(node, serviceModelId);
+
+    expect(_sharedTreeService.shouldShowDeleteInstanceWithChildrenModal).toHaveBeenCalledWith(jasmine.objectContaining({
+      type: "PNF"
+    }), jasmine.anything(), jasmine.anything());
+  });
+
+  test('getMenuAction: delete should not be visible when service isMacro', () => {
+    jest.spyOn(MockNgRedux.getInstance(), 'getState').mockReturnValue({
+      global: {
+        drawingBoardStatus: DrawingBoardModes.EDIT
+      },
+      service: {
+        serviceInstance: {
+          "d6557200-ecf2-4641-8094-5393ae3aae60": {
+            isALaCarte: false
+          }
+        }
+      }
+    });
+
+    let node = NodeBuilder.getPnfNodeWithAction(ServiceInstanceActions.None);
+    let serviceModelId = "d6557200-ecf2-4641-8094-5393ae3aae60";
+    let menuActions = pnfModelExtended.getMenuAction(<any>node, serviceModelId);
+
+    expect(menuActions['delete']).toBeDefined();
+    expect(menuActions['delete'].visible(node)).toBeFalsy();
+    expect(menuActions['delete'].enable(node)).toBeFalsy();
+  });
+
+  test('getMenuAction: delete should not be visible when service is aLaCarte and Action is Create', () => {
+    jest.spyOn(MockNgRedux.getInstance(), 'getState').mockReturnValue({
+      global: {
+        drawingBoardStatus: DrawingBoardModes.EDIT
+      },
+      service: {
+        serviceInstance: {
+          "d6557200-ecf2-4641-8094-5393ae3aae60": {
+            isALaCarte: true
+          }
+        }
+      }
+    });
+
+    let node = NodeBuilder.getPnfNodeWithAction(ServiceInstanceActions.Create);
+    let serviceModelId = "d6557200-ecf2-4641-8094-5393ae3aae60";
+    let menuActions = pnfModelExtended.getMenuAction(<any>node, serviceModelId);
+
+    expect(menuActions['delete']).toBeDefined();
+    expect(menuActions['delete'].visible(node)).toBeFalsy();
+    expect(menuActions['delete'].enable(node)).toBeFalsy();
+  });
+
+  test('getMenuAction: delete should be visible when service is aLaCarte and Action is None', () => {
+    jest.spyOn(MockNgRedux.getInstance(), 'getState').mockReturnValue({
+      global: {
+        drawingBoardStatus: DrawingBoardModes.EDIT
+      },
+      service: {
+        serviceInstance: {
+          "d6557200-ecf2-4641-8094-5393ae3aae60": {
+            isALaCarte: true
+          }
+        }
+      }
+    });
+
+    let node = NodeBuilder.getPnfNodeWithAction(ServiceInstanceActions.None);
+    let serviceModelId = "d6557200-ecf2-4641-8094-5393ae3aae60";
+    let menuActions = pnfModelExtended.getMenuAction(<any>node, serviceModelId);
+
+    expect(menuActions['delete']).toBeDefined();
+    expect(menuActions['delete'].visible(node)).toBeTruthy();
+    expect(menuActions['delete'].enable(node)).toBeTruthy();
+  });
+
+  test('getMenuAction: undo delete should dispatch undo delete action when no children', () => {
+    let node = NodeBuilder.getPnfNodeWithAction(ServiceInstanceActions.None);
+    let serviceModelId = "d6557200-ecf2-4641-8094-5393ae3aae60";
+    let menuActions = pnfModelExtended.getMenuAction(<any>node, serviceModelId);
+
+    spyOn(_store, 'dispatch');
+    menuActions['undoDelete'].method(node, serviceModelId);
+
+    expect(_store.dispatch).toHaveBeenCalledWith(jasmine.objectContaining({
+      type: "UNDO_DELETE_PNF_INSTANCE",
+      storeKey: "PNF_KEY"
+    }));
+  });
+
+  test('getMenuAction: undo delete should iterate over children when they exist', () => {
+    let node = NodeBuilder.getPnfNodeWithAction(ServiceInstanceActions.None);
+    node.data.children = [
+      {"not": "empty"}
+    ];
+    node.children = node.data.children;
+    let serviceModelId = "d6557200-ecf2-4641-8094-5393ae3aae60";
+    let menuActions = pnfModelExtended.getMenuAction(<any>node, serviceModelId);
+
+    spyOn(_store, 'dispatch');
+    menuActions['undoDelete'].method(node, serviceModelId);
+
+    expect(_store.dispatch).toHaveBeenCalledWith(jasmine.objectContaining({
+      type: "UNDO_DELETE_PNF_INSTANCE",
+      storeKey: "PNF_KEY"
+    }));
+  });
+
+  test('getMenuAction: undo delete should not be visible when action is Create or Delete', () => {
+    jest.spyOn(MockNgRedux.getInstance(), 'getState').mockReturnValue({
+      global: {
+        drawingBoardStatus: DrawingBoardModes.EDIT
+      },
+      service: {
+        serviceInstance: {
+          "d6557200-ecf2-4641-8094-5393ae3aae60": {}
+        }
+      }
+    });
+
+    let node = NodeBuilder.getPnfNodeWithAction(ServiceInstanceActions.Create);
+    let serviceModelId = "d6557200-ecf2-4641-8094-5393ae3aae60";
+    let menuActions = pnfModelExtended.getMenuAction(<any>node, serviceModelId);
+
+    expect(menuActions['undoDelete']).toBeDefined();
+    expect(menuActions['undoDelete'].visible(node)).toBeFalsy();
+    expect(menuActions['undoDelete'].enable(node)).toBeFalsy();
+  });
+
+  test('getMenuAction: undo delete should be visible when action is contains "*_Delete"', () => {
+    jest.spyOn(MockNgRedux.getInstance(), 'getState').mockReturnValue({
+      global: {
+        drawingBoardStatus: DrawingBoardModes.EDIT
+      },
+      service: {
+        serviceInstance: {
+          "d6557200-ecf2-4641-8094-5393ae3aae60": {
+            action: ServiceInstanceActions.None
+          }
+        }
+      }
+    });
+
+    let node = NodeBuilder.getPnfNodeWithAction(ServiceInstanceActions.None_Delete);
+    let serviceModelId = "d6557200-ecf2-4641-8094-5393ae3aae60";
+    let menuActions = pnfModelExtended.getMenuAction(<any>node, serviceModelId);
+
+    expect(menuActions['undoDelete']).toBeDefined();
+    expect(menuActions['undoDelete'].visible(node)).toBeTruthy();
+    expect(menuActions['undoDelete'].enable(node, serviceModelId)).toBeTruthy();
+  });
+
+  test('getModel should return PNF model', () => {
+    expect(pnfModelExtended.getModel({})).toBeInstanceOf(PNFModel);
+  });
+
+  test('getNextLevelObject should return null as there are no childs expected in PNF for now', () => {
+    expect(pnfModelExtended.getNextLevelObject()).toBeNull();
+  });
+
+  test('getNodeCount should return counter of 0 when existingPNFCounterMap doesnt exist', () => {
+    jest.spyOn(MockNgRedux.getInstance(), 'getState').mockReturnValue({
+      global: {},
+      service: {
+        serviceInstance: {
+          'd6557200-ecf2-4641-8094-5393ae3aae60': {}
+        }
+      }
+    });
+
+    let serviceId: string = 'd6557200-ecf2-4641-8094-5393ae3aae60';
+    let node = NodeBuilder.getPnfNode();
+    let result = pnfModelExtended.getNodeCount(<any>node, serviceId);
+    jest.spyOn(_sharedTreeService, 'getExistingInstancesWithDeleteMode').mockReturnValue(0);
+
+    expect(result).toEqual(0);
+  });
+
+  test('getNodeCount should return counter of 1 when one node exists and no nodes in delete mode', () => {
+    jest.spyOn(MockNgRedux.getInstance(), 'getState').mockReturnValue({
+      global: {},
+      service: {
+        serviceInstance: {
+          'd6557200-ecf2-4641-8094-5393ae3aae60': {
+            'existingPNFCounterMap': {
+              'modelCustomizationId': 1
+            }
+          }
+        }
+      }
+    });
+
+    let serviceId: string = 'd6557200-ecf2-4641-8094-5393ae3aae60';
+    let node = NodeBuilder.getPnfNode();
+    let result = pnfModelExtended.getNodeCount(<any>node, serviceId);
+    jest.spyOn(_sharedTreeService, 'getExistingInstancesWithDeleteMode').mockReturnValue(0);
+
+    expect(result).toEqual(1);
+  });
+
+  test('getNodeCount should return counter of 2 when three nodes exist and one node is in delete mode', () => {
+    jest.spyOn(MockNgRedux.getInstance(), 'getState').mockReturnValue({
+      global: {},
+      service: {
+        serviceInstance: {
+          'd6557200-ecf2-4641-8094-5393ae3aae60': {
+            'existingPNFCounterMap': {
+              'modelCustomizationId': 3
+            }
+          }
+        }
+      }
+    });
+
+    jest.spyOn(_sharedTreeService, 'getExistingInstancesWithDeleteMode').mockReturnValue(1);
+    let serviceId: string = 'd6557200-ecf2-4641-8094-5393ae3aae60';
+    let node = NodeBuilder.getPnfNode();
+    let result = pnfModelExtended.getNodeCount(<any>node, serviceId);
+
+    expect(result).toEqual(2);
+  });
+
+  test('getTooltip should return "PNF"', () => {
+    expect(pnfModelExtended.getTooltip()).toEqual('PNF');
+  });
+
+  test('getType should return "PNF"', () => {
+    expect(pnfModelExtended.getType()).toEqual('PNF');
+  });
+
+  test('isEcompGeneratedNaming should return true if isEcompGeneratedNaming is "true" ', () => {
+    let isEcompGeneratedNaming: boolean = pnfModelExtended.isEcompGeneratedNaming(<any>{
+      properties: {
+        ecomp_generated_naming: 'true'
+      }
+    });
+    expect(isEcompGeneratedNaming).toBeTruthy();
+  });
+
+  test('isEcompGeneratedNaming should return false if isEcompGeneratedNaming is not defined', () => {
+    let isEcompGeneratedNaming: boolean = pnfModelExtended.isEcompGeneratedNaming({
+      properties: {}
+    });
+    expect(isEcompGeneratedNaming).toBeFalsy();
+  });
+
+  test('showNodeIcons should return false if reached limit of instances', () => {
+    let serviceId: string = 'servicedId';
+    let node = NodeBuilder.getPnfNode();
+    jest.spyOn(MockNgRedux.getInstance(), 'getState').mockReturnValue({
+      global: {},
+      service: {
+        serviceHierarchy: {
+          'servicedId': {
+            'pnfs': {
+              modelCustomizationId: "modelCustomizationId",
+              'modelInfo': {
+                modelCustomizationId: "modelCustomizationId"
+              },
+              'pnfName': {
+                'properties': {
+                  'max_instances': 1
+                }
+              }
+            }
+          }
+        },
+        serviceInstance: {
+          'servicedId': {
+            'existingPNFCounterMap': {
+              'modelCustomizationId': 1
+            },
+            'pnfs': {
+              'pnfName': {}
+            }
+          }
+        }
+      }
+    });
+
+    let result = pnfModelExtended.showNodeIcons(<any>node, serviceId);
+    expect(result).toEqual(new AvailableNodeIcons(false, true));
+  });
+
+  test('showNodeIcons should return true if limit of instances is not reached', () => {
+    let serviceId: string = 'servicedId';
+    let node = NodeBuilder.getPnfNode();
+    jest.spyOn(MockNgRedux.getInstance(), 'getState').mockReturnValue({
+      global: {
+        drawingBoardStatus: DrawingBoardModes.EDIT
+      },
+      service: {
+        serviceHierarchy: {
+          'servicedId': {
+            'pnfs': {
+              modelCustomizationId: "modelCustomizationId",
+              'modelInfo': {
+                modelCustomizationId: "modelCustomizationId"
+              },
+              'pnfName': {
+                'properties': {
+                  'max_instances': 2
+                }
+              }
+            }
+          }
+        },
+        serviceInstance: {
+          'servicedId': {
+            'existingPNFCounterMap': {
+              'modelCustomizationId': 1
+            },
+            'pnfs': {
+              'pnfName': {}
+            }
+          }
+        }
+      }
+    });
+
+    let result = pnfModelExtended.showNodeIcons(<any>node, serviceId);
+    expect(result).toEqual(new AvailableNodeIcons(true, false));
+  });
+
+  test('hasMissingData returns true instanceName is empty and ecompNameGenerating is off ', () => {
+    let instance = {
+      instanceName: "",
+      platformName: "platformName"
+    }
+
+    let result = pnfModelExtended.hasMissingData(instance, [], false);
+
+    expect(result).toBeTruthy();
+  });
+
+  test('hasMissingData returns true when at least one required field is empty ', () => {
+    let instance = {
+      platformName: ""
+    }
+
+    let result = pnfModelExtended.hasMissingData(instance, [], true);
+
+    expect(result).toBeTruthy();
+  });
+
+  test('hasMissingData returns false when there is no missing data', () => {
+    let instance = {
+      platformName: "platformName"
+    }
+
+    let result = pnfModelExtended.hasMissingData(instance, [], true);
+
+    expect(result).toBeFalsy();
+  });
+
+});
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
index e2e31e904..3c3f09b5d 100644
--- 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
@@ -3,7 +3,6 @@ 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";
@@ -17,19 +16,35 @@ import {
 import {DialogService} from "ng2-bootstrap-modal";
 import {PnfPopupService} from "../../../../../shared/components/genericFormPopup/genericFormServices/pnf/pnf.popup.service";
 import {PnfTreeNode} from "../../../../../shared/models/pnfTreeNode";
+import {changeInstanceCounter, removeInstance} from "../../../../../shared/storeUtil/utils/general/general.actions";
+import {MessageBoxData} from "../../../../../shared/components/messageBox/messageBox.data";
+import {MessageBoxService} from "../../../../../shared/components/messageBox/messageBox.service";
+import {IframeService} from "../../../../../shared/utils/iframe.service";
+import {DuplicateService} from "../../../duplicate/duplicate.service";
+import {ModalService} from "../../../../../shared/components/customModal/services/modal.service";
+import {
+  deleteActionPnfInstance,
+  undoDeleteActionPnfInstance,
+  updatePnfPosition
+} from "../../../../../shared/storeUtil/utils/pnf/pnf.actions";
+import {DynamicInputsService} from "../../dynamicInputs.service";
+import {InputType} from "../../../../../shared/models/inputTypes";
 
-
-export class PnfModelInfoExtended implements ILevelNodeInfo{
+export class PnfModelInfoExtended implements ILevelNodeInfo {
 
   constructor(
     private _store: NgRedux<AppState>,
     private _sharedTreeService: SharedTreeService,
     private _dialogService: DialogService,
-    private _pnfPopupService: PnfPopupService
-  ){}
+    private _pnfPopupService: PnfPopupService,
+    private _iframeService: IframeService,
+    private _duplicateService: DuplicateService,
+    private modalService: ModalService,
+    private _dynamicInputsService: DynamicInputsService
+  ) {}
 
   name: string = 'pnfs';
-  type: string ='PNF';
+  type: string = 'PNF';
   typeName: string = 'PNF';
   childNames: string[];
   componentInfoType = ComponentInfoType.PNF;
@@ -60,15 +75,109 @@ export class PnfModelInfoExtended implements ILevelNodeInfo{
     return _.uniq(_.flatten(result));
   }
 
-  getMenuAction(node: ITreeNode, serviceModelId: string): { [methodName: string]: { method: Function; visible: Function; enable: Function } } {
-    return {};
+  getMenuAction(node: ITreeNode, serviceModelId: string): { [methodName: string]: { method: Function, visible: Function, enable: Function } } {
+    return <any>{
+      edit: {
+        method: (node, serviceModelId) => {
+          this._iframeService.addClassOpenModal('content');
+          this._dialogService.addDialog(GenericFormPopupComponent, {
+            type: PopupType.PNF,
+            uuidData: <any>{
+              serviceId: serviceModelId,
+              modelName: node.data.modelName,
+              pnfStoreKey: node.data.pnfStoreKey,
+              modelId: node.data.modelId,
+              type: node.data.type,
+              popupService: this._pnfPopupService
+            },
+            node: node,
+            isUpdateMode: true
+          });
+        },
+        visible: (node) => this._sharedTreeService.shouldShowRemoveAndEdit(node),
+        enable: (node) => this._sharedTreeService.shouldShowRemoveAndEdit(node),
+      },
+      showAuditInfo: {
+        method: (node, serviceModelId) => {
+          const instance = this._store.getState().service.serviceInstance[serviceModelId].pnfs[node.data.pnfStoreKey];
+          this._sharedTreeService.openAuditInfoModal(node, serviceModelId, instance, 'PNF', this);
+        },
+        visible: (node) => this._sharedTreeService.shouldShowAuditInfo(node),
+        enable: (node) => this._sharedTreeService.shouldShowAuditInfo(node)
+      },
+      remove: {
+        method: (node, serviceModelId) => {
+          if ((!_.isNil(node.data.children) && node.data.children.length === 0) || _.isNil(node.data.children)) {
+            let storeKey: string = node.data.pnfStoreKey;
+            this._store.dispatch(removeInstance(node.data.pnfStoreKey, serviceModelId, storeKey, node));
+            this._store.dispatch(changeInstanceCounter(node.data.modelUniqueId, serviceModelId, -1, node));
+            this._sharedTreeService.selectedNF = null;
+          } else {
+            let messageBoxData: MessageBoxData = new MessageBoxData(
+              "Remove PNF",  // modal title
+              "You are about to remove this PNF from this service. Are you sure you want to remove it?",
+              <any>"warning",
+              <any>"md",
+              [
+                {
+                  text: "Remove PNF",
+                  size: "large",
+                  callback: this.removePnf.bind(this, node, serviceModelId),
+                  closeModal: true
+                },
+                {text: "Don’t Remove", size: "medium", closeModal: true}
+              ]);
+
+            MessageBoxService.openModal.next(messageBoxData);
+          }
+        },
+        visible: (node) => this._sharedTreeService.shouldShowRemoveAndEdit(node),
+        enable: (node) => this._sharedTreeService.shouldShowRemoveAndEdit(node),
+      },
+      delete: {
+        method: (node, serviceModelId) => {
+          if ((!_.isNil(node.data.children) && node.data.children.length === 0) || _.isNil(node.data.children)) {
+            this._store.dispatch(deleteActionPnfInstance(node.data.pnfStoreKey, serviceModelId));
+          } else {
+            this._sharedTreeService.shouldShowDeleteInstanceWithChildrenModal(node, serviceModelId, (node, serviceModelId) => {
+              this._sharedTreeService.removeDeleteAllChild(node, serviceModelId, (node, serviceModelId) => {
+                this._store.dispatch(deleteActionPnfInstance(node.data.pnfStoreKey, serviceModelId));
+              });
+            });
+          }
+        },
+        visible: (node) => this._sharedTreeService.shouldShowDelete(node, serviceModelId),
+        enable: (node) => this._sharedTreeService.shouldShowDelete(node, serviceModelId)
+      },
+      undoDelete: {
+        method: (node, serviceModelId) => {
+          if ((!_.isNil(node.data.children) && node.data.children.length === 0) || _.isNil(node.data.children)) {
+            this._store.dispatch(undoDeleteActionPnfInstance(node.data.pnfStoreKey, serviceModelId));
+          } else {
+            this._sharedTreeService.undoDeleteAllChild(node, serviceModelId, (node, serviceModelId) => {
+              this._store.dispatch(undoDeleteActionPnfInstance(node.data.pnfStoreKey, serviceModelId));
+            });
+          }
+        },
+        visible: (node) => this._sharedTreeService.shouldShowUndoDelete(node),
+        enable: (node, serviceModelId) => this._sharedTreeService.shouldShowUndoDelete(node) && !this._sharedTreeService.isServiceOnDeleteMode(serviceModelId)
+      }
+    }
+  }
+
+  removePnf(this, node, serviceModelId) {
+    this._store.dispatch(removeInstance(node.data.modelName, serviceModelId, node.data.pnfStoreKey, node));
+    this._store.dispatch(changeInstanceCounter(node.data.modelUniqueId, serviceModelId, -1, node));
+    this._sharedTreeService.selectedNF = null;
   }
 
   getModel = (instanceModel: any): PNFModel => {
     return new PNFModel(instanceModel);
   };
 
-  getNextLevelObject(): any { return null;  }
+  getNextLevelObject(): any {
+    return null;
+  }
 
   getNodeCount(node: ITreeNode, serviceModelId: string): number {
     let map = null;
@@ -90,17 +199,20 @@ export class PnfModelInfoExtended implements ILevelNodeInfo{
 
   getTooltip = (): string => 'PNF';
 
-
   getType = (): string => 'PNF';
 
-
   hasMissingData(instance, dynamicInputs: any, isEcompGeneratedNaming: boolean): boolean {
-    return false;
+    return this._sharedTreeService.hasMissingData(instance, dynamicInputs, isEcompGeneratedNaming, [InputType.PLATFORM]);
   }
 
-  isEcompGeneratedNaming(currentModel): boolean {
-    return false;
-  }
+  /***********************************************************
+   * return if user should provide instance name or not.
+   * @param currentModel - current Model object
+   ************************************************************/
+  isEcompGeneratedNaming = (currentModel): boolean => {
+    const ecompGeneratedNaming = currentModel.properties.ecomp_generated_naming;
+    return ecompGeneratedNaming === "true";
+  };
 
   onClickAdd(node, serviceModelId: string): void {
     this._dialogService.addDialog(GenericFormPopupComponent, {
@@ -130,9 +242,12 @@ export class PnfModelInfoExtended implements ILevelNodeInfo{
     return new AvailableNodeIcons(showAddIcon, isReachedLimit)
   }
 
-  updateDynamicInputsDataFromModel = (currentModel): any => [];
+  updateDynamicInputsDataFromModel = (currentModel): any => {
+    let displayInputs = _.isNil(currentModel) ? [] : currentModel.inputs;
+    return _.isEmpty(displayInputs) ? [] : this._dynamicInputsService.getArbitraryInputs(displayInputs);
+  };
 
   updatePosition(that, node, instanceId): void {
+    that.store.dispatch(updatePnfPosition(node, instanceId, node.vnfStoreKey));
   }
-
 }
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/pnf/pnf.model.info.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/pnf/pnf.model.info.spec.ts
index 8675d36f2..150069db4 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/pnf/pnf.model.info.spec.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/pnf/pnf.model.info.spec.ts
@@ -12,9 +12,7 @@ import {IframeService} from "../../../../../shared/utils/iframe.service";
 import {HttpClientTestingModule} from "@angular/common/http/testing";
 import {MockNgRedux, NgReduxTestingModule} from "@angular-redux/store/testing";
 import {HttpClient, HttpHandler} from "@angular/common/http";
-import {CollectionResourceModel} from "../../../../../shared/models/collectionResourceModel";
 import {ComponentInfoType} from "../../../component-info/component-info-model";
-import {VNFModel} from "../../../../../shared/models/vnfModel";
 import {PNFModel} from "../../../../../shared/models/pnfModel";
 
 
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vfModule/vfModule.model.info.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vfModule/vfModule.model.info.spec.ts
index 42ee238d0..dd6bb5027 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vfModule/vfModule.model.info.spec.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vfModule/vfModule.model.info.spec.ts
@@ -197,7 +197,7 @@ describe('VFModule Model Info', () => {
         name : 'vnfName'
       }
     };
-    _sharedTreeService.setSelectedVNF({
+    _sharedTreeService.setSelectedNF({
       data : {
         id : 'vfModuleId',
         name : 'VfModuleName'
@@ -250,7 +250,7 @@ describe('VFModule Model Info', () => {
         }
       }
     };
-    jest.spyOn(_sharedTreeService, 'getSelectedVNF').mockReturnValue('vnfName');
+    jest.spyOn(_sharedTreeService, 'getSelectedNF').mockReturnValue('vnfName');
     jest.spyOn(_sharedTreeService, 'modelUniqueId').mockReturnValue('vnfCustomizationId');
     jest.spyOn(vfModuleModel, 'getOptionalVNFs').mockReturnValue([{vnfStoreKey: 'vnfName'}]);
     jest.spyOn(MockNgRedux.getInstance(), 'getState').mockReturnValue({
@@ -535,7 +535,7 @@ describe('VFModule Model Info', () => {
         }
       }
     });
-    jest.spyOn(_sharedTreeService, 'getSelectedVNF').mockReturnValue('vnfName_1');
+    jest.spyOn(_sharedTreeService, 'getSelectedNF').mockReturnValue('vnfName_1');
 
     let node = {
       data : {
@@ -557,7 +557,7 @@ describe('VFModule Model Info', () => {
 
 
   test('onClickAdd should open message box if no vnfStoreKey', ()=>{
-    jest.spyOn(_sharedTreeService, 'getSelectedVNF').mockReturnValue(null);
+    jest.spyOn(_sharedTreeService, 'getSelectedNF').mockReturnValue(null);
     jest.spyOn(vfModuleModel, 'getDefaultVNF').mockReturnValue(null);
     jest.spyOn(MessageBoxService.openModal, 'next');
     vfModuleModel.onClickAdd(<any>{}, 'serviceId');
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vfModule/vfModule.model.info.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vfModule/vfModule.model.info.ts
index 72b3c398e..a6d4e98bd 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vfModule/vfModule.model.info.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vfModule/vfModule.model.info.ts
@@ -146,7 +146,7 @@ export class VFModuleModelInfo implements ILevelNodeInfo {
    * @param serviceModelId - current service id
    ************************************************************/
   onClickAdd(node: ITreeNode, serviceModelId: string): void {
-    const vnfStoreKey = this._sharedTreeService.getSelectedVNF() || this.getDefaultVNF(node.parent, serviceModelId);
+    const vnfStoreKey = this._sharedTreeService.getSelectedNF() || this.getDefaultVNF(node.parent, serviceModelId);
     if (vnfStoreKey) {
       this._dialogService.addDialog(GenericFormPopupComponent, {
         type: PopupType.VF_MODULE,
@@ -191,7 +191,7 @@ export class VFModuleModelInfo implements ILevelNodeInfo {
     const vnfs = this._store.getState().service.serviceInstance[serviceModelId].vnfs;
     let count: number = 0;
     if (!_.isNil(this._store.getState().service.serviceInstance) && !_.isNil(this._store.getState().service.serviceInstance[serviceModelId])) {
-      const selectedVNF: string = this._sharedTreeService.getSelectedVNF();
+      const selectedVNF: string = this._sharedTreeService.getSelectedNF();
       if (selectedVNF) {
         count += this.countNumberOfVFModule(vnfs[selectedVNF], node);
       }else {
@@ -235,7 +235,7 @@ export class VFModuleModelInfo implements ILevelNodeInfo {
    * @param serviceModelId - service id
    ************************************************************/
   showNodeIcons(node: ITreeNode, serviceModelId: string): AvailableNodeIcons {
-    const selectedVNF: string = this._sharedTreeService.getSelectedVNF();
+    const selectedVNF: string = this._sharedTreeService.getSelectedNF();
     if (selectedVNF) {
       return this.showVFModuleOnSelectedVNF(node, selectedVNF, serviceModelId);
     } else {
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vnf/vnf.model.info.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vnf/vnf.model.info.ts
index d391f4a48..56a53916d 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vnf/vnf.model.info.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vnf/vnf.model.info.ts
@@ -235,7 +235,7 @@ export class VnfModelInfo implements ILevelNodeInfo {
             let storeKey: string = node.data.vnfStoreKey;
             this._store.dispatch(removeInstance(node.data.vnfStoreKey, serviceModelId, storeKey, node));
             this._store.dispatch(changeInstanceCounter(node.data.modelUniqueId, serviceModelId, -1, node));
-            this._sharedTreeService.selectedVNF = null;
+            this._sharedTreeService.selectedNF = null;
           } else {
             let messageBoxData: MessageBoxData = new MessageBoxData(
               "Remove VNF",  // modal title
@@ -306,7 +306,7 @@ export class VnfModelInfo implements ILevelNodeInfo {
   removeVnf(this, node, serviceModelId) {
     this._store.dispatch(removeInstance(node.data.modelName, serviceModelId, node.data.vnfStoreKey, node));
     this._store.dispatch(changeInstanceCounter(node.data.modelUniqueId, serviceModelId, -1, node));
-    this._sharedTreeService.selectedVNF = null;
+    this._sharedTreeService.selectedNF = null;
   }
 
   /***********************************************************
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vnfGrouping/vnfGrouping.model.info.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vnfGrouping/vnfGrouping.model.info.ts
index 2787c6174..64b35a56e 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vnfGrouping/vnfGrouping.model.info.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vnfGrouping/vnfGrouping.model.info.ts
@@ -170,7 +170,7 @@ export class VnfGroupingModelInfo implements ILevelNodeInfo {
             let storeKey: string = node.data.vnfGroupStoreKey;
             this._store.dispatch(removeInstance(node.data.vnfGroupStoreKey, serviceModelId, storeKey, node));
             this._store.dispatch(changeInstanceCounter(node.data.modelUniqueId, serviceModelId, -1, node));
-            this._sharedTreeService.selectedVNF = null;
+            this._sharedTreeService.selectedNF = null;
           } else {
             let messageBoxData: MessageBoxData = new MessageBoxData(
               "Remove VNFGroup",  // modal title
@@ -386,7 +386,7 @@ export class VnfGroupingModelInfo implements ILevelNodeInfo {
   removeGroup(this, node, serviceModelId) {
     this._store.dispatch(removeInstance(node.data.modelName, serviceModelId, node.data.vnfGroupStoreKey, node));
     this._store.dispatch(changeInstanceCounter(node.data.modelUniqueId, serviceModelId, -1, node));
-    this._sharedTreeService.selectedVNF = null;
+    this._sharedTreeService.selectedNF = null;
   }
 
   updatePosition(that, node, instanceId): void {
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
index 5523cf1ff..c706f24a2 100644
--- 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
@@ -22,7 +22,7 @@ import {
   clearAssociateVRFMemberInstance,
   createVrfInstance
 } from "../../../../../../../shared/storeUtil/utils/vrf/vrf.actions";
-import {calculateNextUniqueModelName} from "../../../../../../../shared/storeUtil/utils/vnf/vnf.reducers";
+import {calculateNextUniqueModelName} from "../../../../../../../shared/storeUtil/utils/reducersHelper";
 
 @Injectable()
 export class VpnStepService {
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 32b8d6bac..25d52b400 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
@@ -37,6 +37,7 @@ import {SharedControllersService} from "../../../../shared/components/genericFor
 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";
+import {PnfControlGenerator} from "../../../../shared/components/genericForm/formControlsServices/pnfGenerator/pnf.control.generator";
 
 class MockAppStore<T> {
   getState() {
@@ -86,6 +87,7 @@ describe('Model Tree Generator service', () => {
         DialogService,
         FeatureFlagsService,
         VnfControlGenerator,
+        PnfControlGenerator,
         AaiService,
         DialogService,
         ErrorMsgService,
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 cabf80664..ca54f5fc8 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(serviceInstance.isAlaCarte);
+    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 8d4dbc4bb..64fdae1c0 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
@@ -40,6 +40,7 @@ import {SharedControllersService} from "../../../../shared/components/genericFor
 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";
+import {PnfControlGenerator} from "../../../../shared/components/genericForm/formControlsServices/pnfGenerator/pnf.control.generator";
 
 class MockAppStore<T> {
   getState() {
@@ -110,6 +111,7 @@ describe('Model Tree Generator service', () => {
         DialogService,
         FeatureFlagsService,
         VnfControlGenerator,
+        PnfControlGenerator,
         AaiService,
         DialogService,
         DuplicateService,
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 67a962e8a..a1a66596e 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
@@ -60,7 +60,7 @@ export class ObjectToTreeService {
     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 PnfModelInfoExtended(this._store, this._sharedTreeService, this._dialogService, this._pnfPopupService, this._iframeService, this._duplicateService, this._modalService, this._dynamicInputsService),
         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),
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 c82850eb8..ef11d6a4c 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
@@ -45,6 +45,7 @@ import {SharedControllersService} from "../../../shared/components/genericForm/f
 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";
+import { PnfControlGenerator } from "../../../shared/components/genericForm/formControlsServices/pnfGenerator/pnf.control.generator";
 
 class MockAppStore<T> {
   getState() {
@@ -110,6 +111,7 @@ describe('Shared Tree Service', () => {
         DialogService,
         FeatureFlagsService,
         VnfControlGenerator,
+        PnfControlGenerator,
         AaiService,
         DialogService,
         GenericFormService,
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/shared.tree.service.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/shared.tree.service.ts
index 0ba90c20a..26776d05d 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/shared.tree.service.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/shared.tree.service.ts
@@ -28,19 +28,21 @@ export class SharedTreeService {
    * @param dynamicInputs - from the instance
    * @param isEcompGeneratedNaming
    ************************************************************/
-  selectedVNF: string = null;
+  selectedNF: string = null;
 
-
-  getSelectedVNF(): string {
-    return this.selectedVNF;
+  getSelectedNF(): string {
+    return this.selectedNF;
   }
 
-  setSelectedVNF(node): void {
+  setSelectedNF(node): void {
     if (_.isNil(node) || node.data.type !== 'VF') {
-      this.selectedVNF = null;
-    } else {
-      this.selectedVNF = node.data.vnfStoreKey;
+      this.selectedNF = null;
+    } else if (node.data.type === 'VF'){
+      this.selectedNF = node.data.vnfStoreKey;
+    } else if (node.data.type === 'PNF'){
+      this.selectedNF = node.data.pnfStoreKey;
     }
+
   }
 
   /**