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>

3 files changed, 25 insertions, 6 deletions

diff --git a/src/app/vnfs/build-artifacts/template-holder/param-name-value/param-name-value.component.html b/src/app/vnfs/build-artifacts/template-holder/param-name-value/param-name-value.component.html
index e505b59..26cbf27 100644
--- a/src/app/vnfs/build-artifacts/template-holder/param-name-value/param-name-value.component.html
+++ b/src/app/vnfs/build-artifacts/template-holder/param-name-value/param-name-value.component.html
@@ -69,9 +69,14 @@ ECOMP is a trademark and service mark of AT&T Intellectual Property.
                         <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
                             <label>Vnf Type</label><input class="form-control" type="text" disabled value="{{vnfType}}" />
                         </div>
-                        <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
+                        <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="
+vnfcType"
+>
                             <label>Vnfc Type</label><input class="form-control" type="text" disabled value="{{vnfcType}}" />
                         </div>
+                        <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="!vnfcType">
+
+                        </div>
                         <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
                             <label>Protocol</label><input class="form-control" type="text" disabled value="{{protocol}}" />
                         </div>
@@ -109,8 +114,8 @@ ECOMP is a trademark and service mark of AT&T Intellectual Property.
             <div class="mdl-card__title-text">Param Name Value List</div>
             <div><font size="1">(Please click anywhere on the editor to see the synced name value pairs)</font></div>
         </label>
-            <ace-editor [(text)]="this.artifactRequest.paramsContent" #templateeditor [theme]="'chrome'" [mode]="'velocity'" (textChanged)="onParamChanges($event)" [options]="{maxLines: 'Infinity', fontSize: '13pt' }" style="min-height: 500px; width: 100%"></ace-editor>
+            <ace-editor [(text)]="this.artifactRequest.paramsContent" #templateeditor [theme]="'chrome'" [mode]="'velocity'" (textChanged)="onParamChanges($event)" [options]="{maxLines: '100', fontSize: '13pt' }" style="min-height: 200px; width: 100%"></ace-editor>
         </div>
 
     </tab>
-</tabs>
\ No newline at end of file
+</tabs>
diff --git a/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.html b/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.html
index 65f3b6a..105f0ec 100644
--- a/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.html
+++ b/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.html
@@ -41,9 +41,12 @@ limitations under the License.
                     <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
                         <label>Vnf Type</label><input class="form-control" type="text" disabled value="{{vnfType}}" />
                     </div>
-                    <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
+                    <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="vnfcType">
                         <label>Vnfc Type</label><input class="form-control" type="text" disabled value="{{vnfcType}}" />
                     </div>
+                    <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="!vnfcType">
+
+                    </div>
                     <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
                         <label>Protocol</label><input class="form-control" type="text" disabled value="{{protocol}}" />
                     </div>
@@ -78,7 +81,7 @@ limitations under the License.
     <div><label for="textAreaGeneratedTemplate">
         <div class="mdl-card__title-text">File Editor</div>
     </label>
-        <ace-editor [(text)]="configMappingEditorContent" #templateeditor [theme]="'chrome'" [mode]="'velocity'" [options]="{maxLines: 'Infinity', fontSize: '13pt' }" style="min-height: 500px; width: 100%"></ace-editor>
+        <ace-editor [(text)]="configMappingEditorContent" #templateeditor [theme]="'chrome'" [mode]="'velocity'" [options]="{maxLines: '100', fontSize: '13pt' }" style="min-height: 200px; width: 100%; caret-color: white "></ace-editor>
     </div>
     <app-modal [title]="'Confirmation'" [isShow]="false" [message]="'Template is saved and ready for creating parameter definition'" #modalComponent>
     </app-modal>
@@ -106,4 +109,4 @@ limitations under the License.
     
     " (click)="modal.close()">Cancel</button>
         </modal-footer>
-    </modal>
\ No newline at end of file
+    </modal>
diff --git a/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.ts b/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.ts
index 6cae746..0be5f68 100644
--- a/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.ts
+++ b/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.ts
@@ -45,6 +45,7 @@ const PARAM_DATA:string="param_data";
 const TEMPLATE_DATA:string="template_data";
 @Component({ selector: 'app-golden-configuration', templateUrl: './template-configuration.component.html', styleUrls: ['./template-configuration.component.css'] })
 export class GoldenConfigurationComponent implements OnInit {
+  clName= "TemplateConfigCompon";
   @ViewChild('templateeditor') templateeditor;
   @Input() configMappingEditorContent: string;
   @Input() isMappingComp: boolean;
@@ -154,7 +155,13 @@ export class GoldenConfigurationComponent implements OnInit {
 
   //======================================Start of ngOnInit() Method============================================
   ngOnInit() {
+    var methName= "ngOnInit";
+    if( this.utilityService.getTracelvl() > 0 )
+      console.log( this.clName+": "+methName+": start.");
     var refObj = this.refObj = this.prepareFileName();
+    if( this.utilityService.getTracelvl() > 0 )
+      console.log( this.clName+": "+methName+
+        ": refObj:["+JSON.stringify(refObj)+"]");
     if (refObj && refObj != undefined) {
       this.item = refObj;
 
@@ -162,6 +169,10 @@ export class GoldenConfigurationComponent implements OnInit {
       this.vnfcType = this.item.scope["vnfc-type"];
       this.protocol = this.item['device-protocol'];
       this.action = this.item.action;
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( this.clName+": "+methName+": vnfType:["+this.vnfType+
+          "] vnfcType:["+this.vnfcType+"] protocol:["+this.protocol+"] action:["+
+          this.action+"]");
       this.artifactRequest.action = this.item.action;
       this.artifactRequest.vnfType = this.vnfType;
       if (this.vnfcType != undefined && this.vnfcType.length != 0) {