APPC CDT to Support Multiple Templates for VNFCs

APPC CDT Should Support Multiple Templates For Configure and
 ConfigModify for VNFs with VNFC level templates.
CDT would be used to create a single reference artifact for a VNF.
For the Configure related actions (Configure and ConfigModify)
 vnfc-type to be shown at the top.  The user would have a new link
 below it, to be able to add each vnfc-type.  For each vnfc-type,
 the user would create the associated template and PD file as usual.
The fix required to modify several visual elements and variables
 related to VNFC Types on MyVNFS page, ReferenceData page, Template
 page and Parameters page. Also a number of supporting services were
 modified. New Modal window type is now used for VNFC-related dialogs.

Change-Id: Ibbbb50e2ff6f96783c0aea89a6870d7c28021ba0
Issue-ID: APPC-1010
Signed-off-by: od7427 <od7427@att.com>

2 files changed, 101 insertions, 36 deletions

diff --git a/src/app/vnfs/myvnfs/myvnfs.component.html b/src/app/vnfs/myvnfs/myvnfs.component.html
index 3ce7859..3bfabc3 100644
--- a/src/app/vnfs/myvnfs/myvnfs.component.html
+++ b/src/app/vnfs/myvnfs/myvnfs.component.html
@@ -84,13 +84,13 @@ limitations under the License.
         </div>
     </div>
     <div class="col-lg-12-ln2">
-        <button type="button" (click)="buildNewDesign(content)" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary">Create New
-            VNF Type or VNFC Type
+        <button type="button" (click)="createVnfcModal.open()" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary">
+            Create New VNF Type
         </button>
     </div>
 </div>
 
-<ng-template #content let-c="close" let-d="dismiss">
+<!-- <ng-template #content let-c="close" let-d="dismiss">
     <form ngNativeValidate (ngSubmit)="c('yes')">
         <div class="modal-header">
             <h4 class="modal-title">Enter VNF type and VNFC to proceed</h4>
@@ -130,4 +130,38 @@ limitations under the License.
 
         </div>
     </form>
-</ng-template>
\ No newline at end of file
+</ng-template> -->
+
+<!-- Modal for Create new Vnf -->
+<modal #createVnfcModal>
+    <form ngNativeValidate (ngSubmit)="buildNewDesign('yes')">
+        <modal-header [show-close]="true">
+            <h4 class="modal-title">Enter VNF Type</h4>
+        </modal-header>
+        <modal-body>
+            <div class="form-group row">
+                <label for="example-text-input" class="col-12 col-form-label">Enter Vnf Type</label>
+                <div class="col-12">
+                    <input pattern=".*[^ ].*" required name="vnfType" class="form-control" (ngModelChange)="validateVnfName($event)" [(ngModel)]="vnfType" type="text" id="vnfType">
+                    <span class="error-message">{{errorMessage}}</span>
+                </div>
+
+            </div>
+            <div class="form-check">
+                <label class="form-check-label">
+                    <input  name="vnfcRequired" class="form-check-input" [(ngModel)]="vnfcRequired" type="checkbox"
+                            id="vnfcRequired">
+                    This VNF has VNFC templates
+                </label>
+            </div>
+        </modal-body>
+        <modal-footer [show-default-buttons]="false">
+            <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" (click)="buildNewDesign('no')">
+                Proceed To Upload
+            </button>
+            <button type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" [disabled]="invalid">
+                Next
+            </button>
+        </modal-footer>
+    </form>
+</modal>
diff --git a/src/app/vnfs/myvnfs/myvnfs.component.ts b/src/app/vnfs/myvnfs/myvnfs.component.ts
index d3bfc24..a124705 100644
--- a/src/app/vnfs/myvnfs/myvnfs.component.ts
+++ b/src/app/vnfs/myvnfs/myvnfs.component.ts
@@ -43,6 +43,9 @@ export class MyvnfsComponent implements OnInit, OnDestroy {
     noDataMsg: string;
     vnfType: any;
     vnfcType: any;
+    vnfcRequired: boolean = false;
+    errorMessage = '';
+    invalid = true;
     options = {
         timeOut: 1000,
         showProgressBar: true,
@@ -84,32 +87,31 @@ export class MyvnfsComponent implements OnInit, OnDestroy {
     }
 
     getArtifacts(data) {
+        let tempObj: any;
         this.ngProgress.start();
-        this.subscription = this.httpUtil.post({
+      //this.subscription = this.httpUtil.post({
+        this.httpUtil.post({
             url: environment.getDesigns,
             data: data
         })
-            .subscribe(resp => {
-                console.log("resp:", resp);
-                const tempObj = JSON.parse(resp.output.data.block);
-                this.vnfData = tempObj.designInfo;
+            .subscribe( resp => {
+                if (resp.output.data.block !== undefined && resp.output.data.block !== null && resp.output.data.block.length !== 0) {
+                  console.log("getArtifacts: resp:", resp.output.data.block);
+                  tempObj = JSON.parse(resp.output.data.block);
+                  this.vnfData = tempObj.designInfo;
+                }
                 if (this.vnfData == undefined || this.vnfData == null || this.vnfData.length == 0) {
                     this.noData = true;
-
-                    this.noDataMsg = resp.output.data.status.message;
+                    // this.noDataMsg = resp.output.data.status.message;
                 } else {
                     this.noData = false;
                 }
-                console.log(this.noData);
+                console.log("getArtifacts: noData:"+this.noData);
                 this.ngProgress.done();
-            }
-                ,
-                error => {
-
-                    this.nService.error(appConstants.errors.error, appConstants.errors.connectionError)
-                }
-
-            );
+            },
+            error => {
+              this.nService.error(appConstants.errors.error, appConstants.errors.connectionError)
+            });
 
         this.filter = ['vnf-type', 'vnfc-type', 'artifact-name'];
         setTimeout(() => {
@@ -122,25 +124,56 @@ export class MyvnfsComponent implements OnInit, OnDestroy {
     getData() {
     }
 
-    buildNewDesign(content) {
-
-        this.modalService.open(content).result.then(res => {
-            this.mappingEditorService.referenceNameObjects = undefined;
-            sessionStorage.setItem('vnfParams', JSON.stringify({ vnfType: this.vnfType, vnfcType: this.vnfcType }));
-            this
-                .router
-                .navigate([
-                    'vnfs', 'design', 'references'
-                ]);
-        });
+    buildNewDesign( response) {
+     // this.modalService.open(content).result.then(res => {
+     //     this.mappingEditorService.referenceNameObjects = undefined;
+     //     sessionStorage.setItem('vnfParams', JSON.stringify({ vnfType: this.vnfType, vnfcType: this.vnfcType }));
+     //     this.router.navigate([
+     //             'vnfs', 'design', 'references'
+     //         ]);
+     // });
+        if (response == 'yes') {
+            sessionStorage.setItem('vnfParams', JSON.stringify({ vnfType: this.vnfType }));
+            sessionStorage.setItem("vnfcSelectionFlag", '' + this.vnfcRequired + '')
+        } else {
+            sessionStorage.setItem('vnfParams', "")
+        }
 
+        this.mappingEditorService.referenceNameObjects = undefined;
+        this.mappingEditorService.identifier = '';
+        //this.mappingEditorService.newObject = {};
+        this.router.navigate([
+            'vnfs', 'design', 'references'
+        ]);
+    }
 
+    validateVnfName(name) {
+        if (!name.trim() || name.length < 1) {
+            this.errorMessage = '';
+            this.invalid = true;
+        } else if (name.startsWith(' ') || name.endsWith(' ')) {
+            this.errorMessage = 'Leading and trailing spaces are not allowed';
+            this.invalid = true;
+        } else if (name.includes('  ')) {
+            this.errorMessage = 'More than one space is not allowed in VNF Type';
+            this.invalid = true;
+        } else if (name.length > 150) {
+            this.errorMessage = 'VNF Type should be of minimum one character and maximum 150 character';
+            this.invalid = true;
+        } else {
+            this.invalid = false;
+            this.errorMessage = '';
+        }
     }
 
     navigateToReference(item) {
         sessionStorage.setItem('updateParams', JSON.stringify(item));
         this.mappingEditorService.referenceNameObjects = undefined;
-
+        sessionStorage.setItem('vnfParams', JSON.stringify({ vnfType: item.vnfType, vnfcType: item.vnfcType }));
+        this.mappingEditorService.identifier = '';
+        if (this.mappingEditorService.newObject && this.mappingEditorService.newObject.vnfc != undefined) {
+            this.mappingEditorService.newObject.vnfc = '';
+        }
         this
             .router
             .navigate(['../design/references'], {
@@ -165,7 +198,7 @@ export class MyvnfsComponent implements OnInit, OnDestroy {
 
     clearCache() {
         // get the value and save the userid and persist it.
-
+        sessionStorage.setItem("vnfcSelectionFlag", '' + this.vnfcRequired + '');
         this.mappingEditorService.setTemplateMappingDataFromStore(undefined);
         localStorage['paramsContent'] = '{}';
         this.mappingEditorService.setParamContent(undefined);
@@ -179,6 +212,4 @@ export class MyvnfsComponent implements OnInit, OnDestroy {
         this.mappingEditorService.changeNavAppData(appData);
         this.mappingEditorService.changeNavDownloadData(downloadData);
     }
-
-
-}
\ No newline at end of file
+}