Feature 11009 Ns Config Template as first class citizens in OSM

        - Added UI support
	- Added New page for NS config template under packages section
	- User can create, edit & delete template
	- Added template field under ns instance

Change-Id: I3e9a895b4415165d6c96b9840dee64cc197b40e4
Signed-off-by: SANDHYA.JS <sandhya.j@tataelxsi.co.in>
diff --git a/src/app/packages/instantiate-ns/InstantiateNsComponent.ts b/src/app/packages/instantiate-ns/InstantiateNsComponent.ts
index 9ba89da..08d6232 100644
--- a/src/app/packages/instantiate-ns/InstantiateNsComponent.ts
+++ b/src/app/packages/instantiate-ns/InstantiateNsComponent.ts
@@ -18,18 +18,20 @@
 /**
  * @file Instantiate NS Modal Component.
  */
-import { Component, ElementRef, Injector, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, Injector, Input, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateService } from '@ngx-translate/core';
 import { NotifierService } from 'angular-notifier';
-import { APIURLHEADER, ERRORDATA, MODALCLOSERESPONSEDATA } from 'CommonModel';
+import { APIURLHEADER, ERRORDATA, MODALCLOSERESPONSEDATA, URLPARAMS } from 'CommonModel';
 import { DataService } from 'DataService';
 import { environment } from 'environment';
 import * as jsyaml from 'js-yaml';
-import { NSCREATEPARAMS, NSData, NSDDetails } from 'NSDModel';
+import { NSCONFIG } from 'NSCONFIGTEMPLATEMODEL';
+import { NSData, NSDDetails } from 'NSDModel';
 import { RestService } from 'RestService';
+import { Subscription } from 'rxjs';
 import { SharedService, isNullOrUndefined } from 'SharedService';
 import { VimAccountDetails } from 'VimAccountModel';
 
@@ -56,9 +58,15 @@
   /** Contains all vim account collections */
   public vimAccountSelect: VimAccountDetails;
 
+  /** Contains all NS Config template details */
+  public nsConfigSelect: NSCONFIG;
+
   /** Instance for active modal service @public */
   public activeModal: NgbActiveModal;
 
+  /** Used to subscribe nsdId @public */
+  public nsdID: Subscription;
+
   /** Variable set for twoway binding @public */
   public nsdId: string;
 
@@ -66,13 +74,13 @@
   public vimAccountId: string;
 
   /** Form submission Add */
-  public submitted: boolean = false;
+  public submitted = false;
 
   /** Check the loading results @public */
-  public isLoadingResults: boolean = false;
+  public isLoadingResults = false;
 
   /** Give the message for the loading @public */
-  public message: string = 'PLEASEWAIT';
+  public message = 'PLEASEWAIT';
 
   /** Contains Selected VIM Details @public */
   public selectedVIMDetails: VimAccountDetails = null;
@@ -113,6 +121,9 @@
   /** Contains the ssh key to be hosted in dom @private */
   private copySSHKey: string;
 
+  /** Input contains component objects @private */
+  @Input() private params: URLPARAMS;
+
   constructor(injector: Injector) {
     this.injector = injector;
     this.restService = this.injector.get(RestService);
@@ -127,10 +138,11 @@
 
   public ngOnInit(): void {
     /** Setting up initial value for NSD */
-    this.dataService.currentMessage.subscribe((event: NSData) => {
-      if (event.identifier !== undefined || event.identifier !== '' || event.identifier !== null) {
+    this.nsdID = this.dataService.currentMessage.subscribe((event: NSData) => {
+      if (!isNullOrUndefined(event?.identifier) || event?.identifier !== '') {
         this.nsdId = event.identifier;
       }
+      this.getDetailsconfigtemplateAccount();
     });
     /** On Initializing call the methods */
     this.instantiateFormAction();
@@ -143,10 +155,11 @@
     this.instantiateForm = this.formBuilder.group({
       nsName: ['', [Validators.required]],
       nsDescription: ['', [Validators.required]],
-      nsdId: ['', [Validators.required]],
+      nsdId: [null, [Validators.required]],
       vimAccountId: ['', [Validators.required]],
       ssh_keys: [null],
-      config: [null]
+      config: [null],
+      nsConfigTemplateId: [null]
     });
   }
 
@@ -171,6 +184,15 @@
     });
   }
 
+  /** Call the ns config template details in the selection options @public */
+  public getDetailsconfigtemplateAccount(): void {
+    this.restService.getResource(environment.NSCONFIGTEMPLATE_URL + '?nsdId=' + this.nsdId).subscribe((template: NSCONFIG) => {
+      this.nsConfigSelect = template;
+    }, (error: ERRORDATA) => {
+      this.restService.handleError(error, 'get');
+    });
+  }
+
   /** On modal submit instantiateNsSubmit will called @public */
   public instantiateNsSubmit(): void {
     this.submitted = true;
@@ -181,6 +203,9 @@
     const modalData: MODALCLOSERESPONSEDATA = {
       message: 'Done'
     };
+    if (isNullOrUndefined(this.instantiateForm.value.nsConfigTemplateId)) {
+      delete this.instantiateForm.value.nsConfigTemplateId;
+    }
     if (isNullOrUndefined(this.instantiateForm.value.ssh_keys) || this.instantiateForm.value.ssh_keys === '') {
       delete this.instantiateForm.value.ssh_keys;
     } else {
@@ -206,6 +231,7 @@
         });
         delete this.instantiateForm.value.config;
       }
+      delete this.instantiateForm.value.nsConfigTemplateId;
     }
     const apiURLHeader: APIURLHEADER = {
       url: environment.NSINSTANCESCONTENT_URL
@@ -217,7 +243,7 @@
         this.translateService.instant('PAGE.NSINSTANCE.CREATEDSUCCESSFULLY'));
       this.router.navigate(['/instances/ns']).catch((): void => {
         // Catch Navigation Error
-    });
+      });
     }, (error: ERRORDATA) => {
       this.isLoadingResults = false;
       this.restService.handleError(error, 'post');
@@ -292,4 +318,11 @@
       this.selectedVIMDetails = vimDetails;
     }
   }
+
+  /**
+   * Lifecyle Hooks the trigger before component is deleted
+   */
+  public ngOnDestroy(): void {
+    this.nsdID.unsubscribe();
+  }
 }