Resolved the issues with configscaleout

Issue-ID: APPC-707
Change-Id: Ie618635618333da7d548ff5a0fe711cc34076f62
Signed-off-by: Gangarajula, Uday Bhasker (ug0221) <ug0221@att.com>

4 files changed, 315 insertions, 249 deletions

diff --git a/src/app/home/home/home.component.html b/src/app/home/home/home.component.html
index 728f2ab..dd06f29 100644
--- a/src/app/home/home/home.component.html
+++ b/src/app/home/home/home.component.html
@@ -17,21 +17,15 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 
-ECOMP is a trademark and service mark of AT&T Intellectual Property.
 ============LICENSE_END============================================  -->
 <div class="android-more-section">
 
-    <div class="android-section-title mdl-typography--display-1-color-contrast">WELCOME TO APPC SELF SERVICE
-        CONFIGURATION DESIGN TOOL
+    <div class="android-section-title mdl-typography--display-1-color-contrast">WELCOME TO APPC SELF SERVICE CONTROLLER DESIGN TOOL
     </div>
     <div class="mdl-card__title">
-        <h4 class="mdl-card__title-text">The Application Configuration (AppC) Configuration Design Tool allows
-            technology owners to create artifacts for Configuration and Life Cycle Management
-            functions that are required to manage the lifecycle of Virtual Network Functions (VNFs).<br> Select My VNFS
-            to enter credentials and view existing
-            designs or create new ones.
+        <h4 class="mdl-card__title-text">The Application Configuration (AppC) Configuration Design Tool allows technology owners to create artifacts for Configuration and Life Cycle Management functions that are required to manage the lifecycle of Virtual Network Functions (VNFs).<br>            Select My VNFS to enter credentials and view existing designs or create new ones.
         </h4>
 
     </div>
 
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.html b/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.html
index 7fcb9df..302fd60 100644
--- a/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.html
+++ b/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.html
@@ -16,8 +16,6 @@ distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-
-ECOMP is a trademark and service mark of AT&T Intellectual Property.
 ============LICENSE_END============================================
 -->
 
@@ -25,6 +23,7 @@ ECOMP is a trademark and service mark of AT&T Intellectual Property.
 <ng-progress [positionUsing]="'marginLeft'" [minimum]="0.15" [maximum]="1" [speed]="200" [showSpinner]="false" [direction]="'leftToRightIncreased'" [color]="'#6ab344'" [trickleSpeed]="250" [thick]="true" [ease]="'linear'"></ng-progress>
 <form class="" novalidate #userForm="ngForm" (ngSubmit)="save(userForm.value,userForm.valid)">
     <div class="card">
+
         <div class="card-block" style="    border-top: 5px solid #6ab344; border-top-right-radius: 7px;border-top-left-radius: 7px;">
             <div class="row" style="padding: 15px 25px">
                 <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
@@ -36,17 +35,16 @@ ECOMP is a trademark and service mark of AT&T Intellectual Property.
                                 *ngFor="let actionType of actions ">{{actionType}}
                         </option>
                     </select>
+
                 </div>
                 <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
                     <label>VNF Type* </label>
-                    <input type="text" [readonly]="updateParams !='undefined' || vnfParams?.vnfType " class="form-control" id="txtVnfType" required [(ngModel)]="referenceDataObject['scope']['vnf-type']" (ngModelChange)="updateSessionValues($event,'vnfType')" #vnftype="ngModel"
-                        name="vnftype">
+                    <input type="text" readonly class="form-control" id="txtVnfType" required [(ngModel)]="referenceDataObject['scope']['vnf-type']" (ngModelChange)="updateSessionValues($event,'vnfType')" #vnftype="ngModel" name="vnftype">
                     <span class="error-message" [hidden]="vnfParams?.vnfType || vnftype.valid || (vnftype.pristine && !userForm.submitted)">Required Field</span>
                 </div>
                 <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
                     <label>VNFC Type</label>
-                    <input type="text" class="form-control" [disabled]="nonConfigureAction || updateParams !='undefined' || vnfParams?.vnfType" id="txtVnfcType" [(ngModel)]="referenceDataObject.scope['vnfc-type']" (blur)="setVnfcType($event.target.value)" (ngModelChange)="updateSessionValues($event,'vnfcType')"
-                        #vnfcType="ngModel" name="vnfcType" disabled="disabled">
+                    <input type="text" class="form-control" readonly id="txtVnfcType" [(ngModel)]="referenceDataObject.scope['vnfc-type']" (blur)="setVnfcType($event.target.value)" (ngModelChange)="updateSessionValues($event,'vnfcType')" #vnfcType="ngModel" name="vnfcType">
                 </div>
                 <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
                     <label>Device Protocol*</label>
@@ -55,6 +53,7 @@ ECOMP is a trademark and service mark of AT&T Intellectual Property.
                                 *ngFor="let device of deviceProtocols">{{device}}
                         </option>
                     </select>
+
                 </div>
                 <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="isConfigScaleOut">
                     <label>Template Identifier</label>
@@ -229,7 +228,7 @@ ECOMP is a trademark and service mark of AT&T Intellectual Property.
                                             </div>
                                             <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
                                                 <div class="removevnfcClass" *ngIf="refernceScopeObj.sourceType !='vnfcType'">
-                                                    <a role="button" style="color: white" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" (click)="removeFeature(j,i)">Remove Vm</a>
+                                                    <a role="button" style="color: white" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" (click)="removeFeature(j,i,templateIdentifier)">Remove Vm</a>
                                                 </div>
                                                 <div>
                                                     <a *ngIf="(referenceDataObject.vm[j].vnfc.length-1) == i " [hidden]="true" role="button" (click)="addVnfcData(j)">Add VNFC
@@ -310,16 +309,13 @@ ECOMP is a trademark and service mark of AT&T Intellectual Property.
                     <div>
                         <input pattern=".*[^ ].*" name="test" type="text" class="" [(ngModel)]="templateId" placeholder="identifier">
                     </div>
-                    <div>
-                        <button style="padding: 10px" class="btn btn-primary" data-dismiss="modal" (click)="addToIdentDrp()">submit
-                        </button>
-                        <button style="padding: 10px" class="btn btn-primary" (click)="templateId=''" data-dismiss="modal">cancel
-                        </button>
-                    </div>
                 </div>
             </div>
             <div class="modal-footer">
-
+                <div>
+                    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" data-dismiss="modal" (click)="addToIdentDrp()">Add</button>
+                    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" (click)="templateId=''" data-dismiss="modal">cancel</button>
+                </div>
             </div>
         </div>
     </div>
diff --git a/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.ts b/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.ts
index 2e5d39e..fa3be63 100644
--- a/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.ts
+++ b/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.ts
@@ -16,28 +16,25 @@ distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-
-ECOMP is a trademark and service mark of AT&T Intellectual Property.
 ============LICENSE_END============================================
 */
+
 import * as XLSX from 'xlsx';
 import * as _ from 'underscore';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { BuildDesignComponent } from '../build-artifacts.component';
 import { HttpUtilService } from '../../../shared/services/httpUtil/http-util.service';
 import { Location } from '@angular/common';
 import { MappingEditorService } from '../../..//shared/services/mapping-editor.service';
 import { ModalComponent } from '../../../shared/modal/modal.component';
+import { NgProgress } from 'ngx-progressbar';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { NotificationService } from '../../../shared/services/notification.service';
 import { NotificationsService } from 'angular2-notifications';
 import { ParamShareService } from '../../..//shared/services/paramShare.service';
 import { environment } from '../../../../environments/environment';
 import { saveAs } from 'file-saver';
-import { NgProgress } from 'ngx-progressbar';
-
-
 declare var $: any;
 type AOA = Array<Array<any>>;
 
@@ -300,8 +297,6 @@ export class ReferenceDataformComponent implements OnInit {
         this.remUploadedDataArray = [];
         this.firstArrayElement = [];
         this.uploadFileName = '';
-        // this.tempAllData = [];
-        // console.log('temp all data===' + JSON.stringify(this.tempAllData));
     }
 
     numberValidation(event: any) {
@@ -323,7 +318,6 @@ export class ReferenceDataformComponent implements OnInit {
         }
     }
 
-    
     addVnfcData(vmNumber: number) {
         var newObj = {
             'vnfc-instance': this.referenceDataObject.vm[vmNumber].vnfc.length + 1,
@@ -337,8 +331,26 @@ export class ReferenceDataformComponent implements OnInit {
     }
 
     //to remove the VM's created by the user
-    removeFeature(vmNumber: any, index: any) {
-        this.referenceDataObject.vm.splice(vmNumber, 1);
+    removeFeature(vmNumber: any, index: any,templateId) {
+        if(this.referenceDataObject.action == "Configure"){
+            this.referenceDataObject.vm.splice(vmNumber, 1);
+            this.referenceDataObject.vm.forEach((obj,arrIndex)=>{
+                if(arrIndex>=vmNumber){
+                    obj["vm-instance"] = obj["vm-instance"]-1
+                }
+            })
+            console.log(this.referenceDataObject.vm)
+        } else{
+            let data = this.referenceDataObject.vm.filter(obj=>{
+                return obj['template-id'] == templateId;
+            })
+            this.referenceDataObject.vm.splice(data[index]['vm-instance'], 1);
+            this.referenceDataObject.vm.forEach((obj,arrIndex)=>{
+                
+                    obj["vm-instance"] = arrIndex+1
+            })
+        }
+        
     }
 
     //add new VM's to the configure
@@ -354,215 +366,35 @@ export class ReferenceDataformComponent implements OnInit {
             } else {
                 arr.push({ 'vm-instance': (i + 1), vnfc: [Object.assign({}, this.Sample)] });
             }
-
         }
         //this.referenceDataObject.vm.splice(arrlength, 0, ...arr);
         this.referenceDataObject.vm = this.referenceDataObject.vm.concat(arr); //splice(arrlength, 0, ...arr);
     }
 
     //Reference object to create reference data
-    prepareReferenceObject() {
-        // // console.log("this temp all data before=="+ JSON.stringify(this.tempAllData))
-
-        this.referenceDataObject['artifact-list'] = [];
-        let scopeName = '';
-        //if only vnf is there
-        if (this.referenceDataObject.scope['vnfc-type'] == '' || this.referenceDataObject.scope['vnfc-type'] == null || this.referenceDataObject.scope['vnfc-type'] == 'null') {
-            scopeName = this.referenceDataObject.scope['vnf-type'];
-            this.referenceDataObject.scope['vnfc-type'] = '';
-            this.referenceDataObject['action-level'] = 'vnf';
-            this.referenceDataObject['scopeType'] = 'vnf-type';
-        }
-        //if VNFC is entered set action level & Scope type to VNFC for configure and configure modify, and default the values to vnf and vnf type for all other actions  
-        else {
-            scopeName = this.referenceDataObject.scope['vnfc-type'];
-            if (this.referenceDataObject.action == 'Configure' || this.referenceDataObject.action == 'ConfigModify') {
-                this.referenceDataObject['action-level'] = 'vnfc';
-                this.referenceDataObject['scopeType'] = 'vnfc-type';
-            } else {
-                this.referenceDataObject['action-level'] = 'vnf';
-                this.referenceDataObject['scopeType'] = 'vnf-type';
-            }
-        }
-        //replacing / with _ and removing spaces in the scopeName
-        if (scopeName) {
-            scopeName = scopeName.replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '');
-        }
-        //marking the extension based on the device-protocol selected by the user 
-        let extension = 'json';
-        if (this.referenceDataObject['device-protocol'] == 'ANSIBLE' || this.referenceDataObject['device-protocol'] == 'CHEF' || this.referenceDataObject['device-protocol'] == 'CLI') {
-            extension = 'json';
-        } else if (this.referenceDataObject['device-protocol'] == 'NETCONF-XML' || this.referenceDataObject['device-protocol'] == 'REST') {
-            extension = 'xml';
-        }
-        //preparing the artifact list array file names along with extension
-        let config_template_fileName = this.referenceDataObject.action + '_' + scopeName + '_' + '0.0.1V.' + extension;
-        let pd_fileName = this.referenceDataObject.action + '_' + scopeName + '_' + '0.0.1V.yaml';
-        let reference_fileName = this.referenceDataObject.action + '_' + scopeName + '_' + '0.0.1V.json';
+    prepareReferenceObject(isSaving?:any){
+        let scopeName = this. resetParamsOnVnfcType(); 
+        let extension =  this.decideExtension();
+        this.prepareArtifactList(scopeName,extension);
 
-        let configTemplate = {
-            'artifact-name': 'template_' + config_template_fileName,
-            'artifact-type': 'config_template'
-        };
-
-        let pdTemplate = {
-            'artifact-name': 'pd_' + pd_fileName,
-            'artifact-type': 'parameter_definitions'
-        };
-        if (this.referenceDataObject.action != 'ConfigScaleOut') {
-
-            this.referenceDataObject['artifact-list'].push(configTemplate,
-                pdTemplate
-            );
-
-        } else {
-            let identifiers = this.referenceDataObject['template-id-list'];
-            if (identifiers) {
-                for (var x = 0; x < identifiers.length; x++) {
-                    pd_fileName = this.referenceDataObject.action + '_' + scopeName + '_' + '0.0.1V_' + identifiers[x] + '.yaml';
-                    config_template_fileName = this.referenceDataObject.action + '_' + scopeName + '_' + '0.0.1V_' + identifiers[x] + '.' + extension;
-
-                    configTemplate = {
-                        'artifact-name': 'template_' + config_template_fileName,
-                        'artifact-type': 'config_template'
-                    };
-                    pdTemplate = {
-                        'artifact-name': 'pd_' + pd_fileName,
-                        'artifact-type': 'parameter_definitions'
-                    };
-                    this.referenceDataObject['artifact-list'].push(configTemplate,
-                        pdTemplate
-                    );
-                }
-            }
-
-        }
-
-        if (this.referenceDataObject.scope['vnfc-type'] === '') {
-            this.referenceDataObject.scope['vnfc-type'] = '';
-        }
         if (this.referenceDataObject.action === 'OpenStack Actions') {
             this.referenceDataObject['template'] = 'N';
             this.referenceDataObject['artifact-list'] = [];
         }
+        //ditaching the object from the form and processing pfurther
         let newObj = $.extend(true, {}, this.referenceDataObject);
         let action = this.referenceDataObject.action;
-        let configureObject = (newObj.action == 'Configure');
-        let ConfigScaleOut = (newObj.action == 'ConfigScaleOut');
-        //delete VM's if selected action is not configure.
-        if (!ConfigScaleOut && !configureObject && this.tempAllData.length != 0) {
-            //  delete newObj.vm
-
-            if (ConfigScaleOut) {
-                // 
-            } else {
-                newObj.vm = [];
-            }
-            //this.tempAllData.push(newObj);
-        } else {
-            if (ConfigScaleOut) {
-
-
-                // //add template identifier
-                // for(let x=0;x<newObj.vm.length;x++){
-                //     let vmObj= newObj.vm[x]
-                //     vmObj['template-id'] = this.templateIdentifier
-                // }
-            } else {
-                delete newObj['template-id-list'];
-            }
-        }
-        //remove artifact list if template is N
-        if (this.referenceDataObject.template == 'N') {
-        }
-        let actionObjIndex = this.tempAllData.findIndex(obj => {
-            return obj['action'] == action;
-        });
-        if (newObj.action != 'HealthCheck') {
-            delete newObj['url'];
-        }
-        if (actionObjIndex > -1) {
-            this.tempAllData[actionObjIndex] = newObj;
-            this.mappingEditorService.saveLatestAction(this.tempAllData[actionObjIndex]);
-            this.mappingEditorService.saveLatestIdentifier(this.templateIdentifier);
-        } else {
-            if (newObj.action != '') {
-                this.tempAllData.push(newObj);
-                this.mappingEditorService.saveLatestAction(newObj);
-                this.mappingEditorService.saveLatestIdentifier(this.templateIdentifier);
-            }
-        }
-        //reset currentform vms based on action
-        if (this.currentAction == "ConfigScaleOut") {
-            //this.referenceDataObject.vm = []
-
-            let ConfigScaleOutIndex = this.tempAllData.findIndex(obj => {
-                return obj['action'] == this.currentAction;
-            });
-            if (ConfigScaleOutIndex > -1) {
-                this.referenceDataObject.vm = this.tempAllData[ConfigScaleOutIndex].vm
-            } else {
-                this.referenceDataObject.vm = []
-            }
-        }
-        //Creating all action block to allow mulitple actions at once
-        let allAction = {
-            action: 'AllAction',
-            'action-level': 'vnf',
-            scope: newObj.scope,
-            'artifact-list': [{
-                'artifact-name': 'reference_AllAction' + '_' + scopeName + '_' + '0.0.1V.json',
-                'artifact-type': 'reference_template'
-            }]
-        };
-        let allActionIndex = this.tempAllData.findIndex(obj => {
-            return obj['action'] == 'AllAction';
-        });
-        if (allActionIndex > -1) {
-            this.tempAllData[allActionIndex] = allAction;
-        } else {
-            this.tempAllData.push(allAction);
-        }
-        // console.log('This uploaded array===' + JSON.stringify(this.uploadedDataArray));
-        if (this.uploadedDataArray && this.uploadedDataArray != undefined && this.uploadedDataArray.length != 0) {
-            /*for (var i = 0; i < this.uploadedDataArray.length; i++) {
-                var actionData = this.uploadedDataArray[i][0];
-               // // console.log("Action data=="+ actionData);
-                for (var j = 0; j < this.tempAllData.length; j++) {
-                    //// console.log("Actions from temp all data=="+ this.tempAllData[j].action)
-                    //// console.log("Matched=="+ (actionData === this.tempAllData[j].action))
-                    if (actionData === this.tempAllData[j].action) {
-                        this.tempAllData.splice(j,1);
-                        
-                    }
-                }
-            }*/
-            if (this.tempAllData && this.tempAllData != undefined) {
-                for (var i = 0; i < this.tempAllData.length; i++) {
-                    // alert(this.checkIfelementExistsInArray(this.tempAllData[i].action,this.actions))
-                    var result = false;
-
-                    if (this.tempAllData[i].action === 'AllAction') {
-                        result = true;
-                    }
-                    else {
-                        result = this.checkIfelementExistsInArray(this.tempAllData[i].action, this.actions);
-                    }
-                    if (!result) {
-                        // console.log('Removing VM action==' + this.tempAllData[i].action);
-                        this.tempAllData.splice(i, 1);
-                        i = i - 1;
-                    }
-
-                }
-            }
-            this.addVmCapabilitiesData();
-        }
-        // // console.log("this temp all data after=="+ JSON.stringify(this.tempAllData))
-        //// console.log("temp all data from save to appc=="+JSON.stringify(this.tempAllData))
+        //preparing Obj for save/download
+        newObj =   this.deleteVmsforNonActions(newObj,action)
+        this.pushOrReplaceTempData(newObj,action);
+        this. addAllActionObj(newObj,scopeName);
+        this.resetTempData()
+        //saving data to service
         this.mappingEditorService.getReferenceList().push(JSON.parse(JSON.stringify(this.referenceDataObject)));
         this.buildDesignComponent.updateAccessUpdatePages(this.referenceDataObject.action, this.mappingEditorService.getReferenceList());
         this.mappingEditorService.changeNav(this.tempAllData);
+        //on action change or template identifier change reset the form by restting values of Reference data object
+        this.resetVmsForScaleout(this.currentAction)
         return { totlaRefDtaa: this.tempAllData, scopeName: scopeName };
     }
 
@@ -610,7 +442,6 @@ export class ReferenceDataformComponent implements OnInit {
           // // console.log("This template data after==" + JSON.stringify(this.tempAllData))
           /* wire up file reader */
         const target: DataTransfer = <DataTransfer>(evt.target);
-
         //// console.log("filename========" + evt.target.files[0].name)
         this.uploadFileName = evt.target.files[0].name;
         var fileExtension = this.uploadFileName.substr(this.uploadFileName.lastIndexOf('.') + 1);
@@ -662,8 +493,6 @@ export class ReferenceDataformComponent implements OnInit {
         for (var i = 0; i < this.uploadedDataArray.length; i++) {
             var vnfcFuncCodeArray = [];
             var data = this.uploadedDataArray[i];
-            // // console.log("Data is "+ JSON.stringify(data))
-            //// console.log("Data length: "+ data.length)
             for (var j = 1; j < data.length; j++) {
                 // // console.log("Data " +j +" is "+ JSON.stringify(data[j]))
                 if (data[j] != undefined) {
@@ -756,7 +585,7 @@ export class ReferenceDataformComponent implements OnInit {
         saveAs(blob, fileName);
     }
 
-    saveToAppc(valid, form) {
+    saveToAppc(valid, form,event) {
         if (this.referenceDataObject.action === '') {
             this.nService.error('Error', 'Select a valid Action');
             return;
@@ -770,10 +599,7 @@ export class ReferenceDataformComponent implements OnInit {
             form._submitted = true;
             if (valid) {
 
-                let referenceObject = this.prepareReferenceObject();
-                // console.log('##########');
-
-                // console.log(referenceObject);
+                let referenceObject = this.prepareReferenceObject(true);
                 this.validateTempAllData();
                 let theJSON = JSON.stringify(this.tempAllData, null, '\t');
                 let fileName = 'reference_AllAction_' + referenceObject.scopeName + '_' + '0.0.1V.json';
@@ -1013,7 +839,7 @@ export class ReferenceDataformComponent implements OnInit {
         } else if (data == 'OpenStack Actions') {
             this.deviceProtocols = ['', 'OpenStack'];
         } else if (data == 'ConfigScaleOut') {
-            this.deviceProtocols = ['', 'CHEF', 'ANSIBLE', 'NETCONF'];
+            this.deviceProtocols = ['', 'CHEF', 'ANSIBLE', 'NETCONF-XML','RESTCONF'];
         }
         else {
             this.deviceProtocols = ['', 'ANSIBLE', 'CHEF', 'NETCONF-XML', 'RESTCONF', 'CLI'];
@@ -1058,17 +884,17 @@ export class ReferenceDataformComponent implements OnInit {
                 }
             });
         } else {
+            this.actionChanged = true;
             this.oldAction = this.referenceDataObject.action + '';
             this.populateExistinAction(data);
+            this.resetVmsForScaleout(data);
+            this.toggleIdentifier(data)
         }
 
-
         if (data == 'ConfigScaleOut') {
             this.groupAnotationType = ['', 'first-vnfc-name', 'fixed-value', 'relative-value', 'existing-group-name'];
         }
 
-        this.toggleIdentifier(data)
-
         if (data == 'OpenStack Actions') {
             this.buildDesignComponent.tabs = [
                 {
@@ -1100,8 +926,42 @@ export class ReferenceDataformComponent implements OnInit {
             this.nonConfigureAction = true;
         }
     }
-
-    clearCache() {
+    // For the issue with multiple template changes
+    // idChange(data, content, userForm) {
+    //     if (data == null) {
+    //     return;
+    //     }
+    //     if ((userForm.valid) && this.oldAction != '' && this.oldAction != undefined) {
+    //     let referenceObject = this.prepareReferenceObject();
+    //     this.actionChanged = true;
+    //     if(this.templateIdentifier)
+    //     {
+    //     this.modalService.open(content).result.then(res => {
+    //     if (res == 'yes') {
+    //     this.validateTempAllData();
+    //     let theJSON = JSON.stringify(this.tempAllData, null, '\t');
+    //     let fileName = 'reference_AllAction_' + referenceObject.scopeName + '_' + '0.0.1V.json';
+    //     this.uploadArtifact(JSON.stringify({ reference_data: this.tempAllData }), this.tempAllData[this.tempAllData.length - 1], fileName);
+    //     var templateData = JSON.stringify(this.appData.template.templateData);
+    //     var nameValueData = JSON.stringify(this.appData.template.nameValueData);
+    //     var pdData = JSON.stringify(this.appData.pd);
+    //     if (templateData != '{}' && templateData != null && templateData != undefined) this.saveTemp();
+    //     if (nameValueData != '{}' && nameValueData != null && nameValueData != undefined) this.saveNameValue();
+    //     if (pdData != '{}' && pdData != null && pdData != undefined) this.savePd();
+    //     this.clearTemplateCache();
+    //     this.clearPdCache();
+    //     }
+    //     else{
+    //     this.clearTemplateCache();
+    //     this.clearPdCache();
+    //     }
+    //     });
+    //     }
+    //     }
+    //     }
+
+    clearCache() 
+    {
         // get the value and save the userid and persist it. 
         this.mappingEditorService.setTemplateMappingDataFromStore(undefined);
         localStorage['paramsContent'] = '{}';
@@ -1115,6 +975,30 @@ export class ReferenceDataformComponent implements OnInit {
         };
     }
 
+    // needed for the the clearing template cache.
+    //{
+    //     // get the value and save the userid and persist it.
+    //     this.clearTemplateCache();
+    //     this.clearPdCache();
+    //     this.appData = { reference: {}, template: { templateData: {}, nameValueData: {} }, pd: {} };
+    //     this.downloadData = {
+    //     reference: {},
+    //     template: { templateData: {}, nameValueData: {}, templateFileName: '', nameValueFileName: '' },
+    //     pd: { pdData: '', pdFileName: '' }
+    //     };
+    //     }
+        
+    //     clearTemplateCache()
+    //     {
+    //     this.mappingEditorService.setTemplateMappingDataFromStore(undefined);
+    //     localStorage['paramsContent'] = '{}';
+    //     }
+    //     clearPdCache()
+    //     {
+    //     this.mappingEditorService.setParamContent(undefined);
+    //     this.paramShareService.setSessionParamData(undefined);
+    //     }
+
     saveTemp() {
         this
             .httpUtils
@@ -1199,9 +1083,6 @@ export class ReferenceDataformComponent implements OnInit {
         if(!(this.referenceDataObject['template-id-list'].indexOf(this.templateId.trim())>-1)){
             this.referenceDataObject['template-id-list'].push(this.templateId.trim());
         }
-        
-        // this.referenceDataObject['template-id-list'] = this.identifierDrpValues
-        //this.identifierDrp = ""
     }
 
     resetVms() {
@@ -1209,7 +1090,7 @@ export class ReferenceDataformComponent implements OnInit {
     }
 
     dataModified() {
-        this.referenceDataObject.vm = this.referenceDataObject.vm;
+      //  this.referenceDataObject.vm = this.referenceDataObject.vm;
     }
 
     resetGroupNotation() {
@@ -1221,4 +1102,197 @@ export class ReferenceDataformComponent implements OnInit {
             this.disableGrpNotationValue = false
         }
     }
-}
\ No newline at end of file
+
+    resetVmsForScaleout(action){
+         //reset currentform vms based on action
+         if (action == "ConfigScaleOut") {
+            let ConfigScaleOutIndex = this.tempAllData.findIndex(obj => {
+                return obj['action'] ==action
+            });
+            if (ConfigScaleOutIndex > -1) {
+                this.referenceDataObject.vm = this.tempAllData[ConfigScaleOutIndex].vm
+            } else {
+               if(this.actionChanged ){
+               this.referenceDataObject.vm = []
+               }
+              //  
+            }
+        }
+    }
+
+     resetParamsOnVnfcType(){
+    let scopeName = '';
+        //if only vnf is there
+        if (this.referenceDataObject.scope['vnfc-type'] == '' || this.referenceDataObject.scope['vnfc-type'] == null || this.referenceDataObject.scope['vnfc-type'] == 'null') {
+            scopeName = this.referenceDataObject.scope['vnf-type'];
+            this.referenceDataObject.scope['vnfc-type'] = '';
+            this.referenceDataObject['action-level'] = 'vnf';
+            this.referenceDataObject['scopeType'] = 'vnf-type';
+        }
+        //if VNFC is entered set action level & Scope type to VNFC for configure and configure modify, and default the values to vnf and vnf type for all other actions  
+        else {
+            scopeName = this.referenceDataObject.scope['vnfc-type'];
+            if (this.referenceDataObject.action == 'Configure' || this.referenceDataObject.action == 'ConfigModify') {
+                this.referenceDataObject['action-level'] = 'vnfc';
+                this.referenceDataObject['scopeType'] = 'vnfc-type';
+            } else {
+                this.referenceDataObject['action-level'] = 'vnf';
+                this.referenceDataObject['scopeType'] = 'vnf-type';
+            }
+        }
+          //replacing / with _ and removing spaces in the scopeName
+         if (scopeName) {
+            scopeName = scopeName.replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '');
+        }
+        return scopeName
+     }
+    decideExtension(){
+        //marking the extension based on the device-protocol selected by the user 
+        let extension = 'json';
+        if (this.referenceDataObject['device-protocol'] == 'ANSIBLE' || this.referenceDataObject['device-protocol'] == 'CHEF' || this.referenceDataObject['device-protocol'] == 'CLI') {
+            extension = 'json';
+        } else if (this.referenceDataObject['device-protocol'] == 'NETCONF-XML' || this.referenceDataObject['device-protocol'] == 'REST') {
+            extension = 'xml';
+        }
+        return extension
+    }
+    prepareArtifactList(scopeName,extension){
+    this.referenceDataObject['artifact-list'] = [];
+
+ //preparing the artifact list array file names along with extension
+        let config_template_fileName = this.referenceDataObject.action + '_' + scopeName + '_' + '0.0.1V.' + extension;
+        let pd_fileName = this.referenceDataObject.action + '_' + scopeName + '_' + '0.0.1V.yaml';
+        let reference_fileName = this.referenceDataObject.action + '_' + scopeName + '_' + '0.0.1V.json';
+
+        let configTemplate = {
+            'artifact-name': 'template_' + config_template_fileName,
+            'artifact-type': 'config_template'
+        };
+
+        let pdTemplate = {
+            'artifact-name': 'pd_' + pd_fileName,
+            'artifact-type': 'parameter_definitions'
+        };
+        if (this.referenceDataObject.action != 'ConfigScaleOut') {
+
+            this.referenceDataObject['artifact-list'].push(configTemplate,
+                pdTemplate
+            );
+
+        } else {
+            let identifiers = this.referenceDataObject['template-id-list'];
+            if (identifiers) {
+                for (var x = 0; x < identifiers.length; x++) {
+                    //for replacing spaces and "/" with "_"
+                    identifiers[x]=identifiers[x].replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '');
+                    pd_fileName = this.referenceDataObject.action + '_' + scopeName + '_' + '0.0.1V_' + identifiers[x] + '.yaml';
+                    config_template_fileName = this.referenceDataObject.action + '_' + scopeName + '_' + '0.0.1V_' + identifiers[x] + '.' + extension;
+
+                    configTemplate = {
+                        'artifact-name': 'template_' + config_template_fileName,
+                        'artifact-type': 'config_template'
+                    };
+                    pdTemplate = {
+                        'artifact-name': 'pd_' + pd_fileName,
+                        'artifact-type': 'parameter_definitions'
+                    };
+                    this.referenceDataObject['artifact-list'].push(configTemplate,
+                        pdTemplate
+                    );
+                }
+            }
+
+        }
+    }
+    deleteVmsforNonActions(newObj,action){
+ let configureObject = (action == 'Configure');
+        let ConfigScaleOut = (action == 'ConfigScaleOut');
+        //delete VM's if selected action is not configure.
+        if (!ConfigScaleOut && !configureObject && this.tempAllData.length != 0) {
+            //  delete newObj.vm
+
+            if (ConfigScaleOut) {
+                // 
+            } else {
+                newObj.vm = [];
+            }
+            //this.tempAllData.push(newObj);
+        } else {
+            if (ConfigScaleOut) {
+            } else {
+                delete newObj['template-id-list'];
+            }
+        }
+        return newObj
+    }
+    pushOrReplaceTempData(newObj,action){
+
+        let actionObjIndex = this.tempAllData.findIndex(obj => {
+            return obj['action'] == action;
+        });
+        if (newObj.action != 'HealthCheck') {
+            delete newObj['url'];
+        }
+        
+        if (actionObjIndex > -1) {
+            this.tempAllData[actionObjIndex] = newObj;
+            this.mappingEditorService.saveLatestAction(this.tempAllData[actionObjIndex]);
+            this.mappingEditorService.saveLatestIdentifier(this.templateIdentifier);
+        } else {
+            if (newObj.action != '') {
+                this.tempAllData.push(newObj);
+                this.mappingEditorService.saveLatestAction(newObj);
+                this.mappingEditorService.saveLatestIdentifier(this.templateIdentifier);
+            }
+        }
+        
+    }
+
+    addAllActionObj(newObj,scopeName){
+        
+        //Creating all action block to allow mulitple actions at once
+        let allAction = {
+            action: 'AllAction',
+            'action-level': 'vnf',
+            scope: newObj.scope,
+            'artifact-list': [{
+                'artifact-name': 'reference_AllAction' + '_' + scopeName + '_' + '0.0.1V.json',
+                'artifact-type': 'reference_template'
+            }]
+        };
+        let allActionIndex = this.tempAllData.findIndex(obj => {
+            return obj['action'] == 'AllAction';
+        });
+        if (allActionIndex > -1) {
+            this.tempAllData[allActionIndex] = allAction;
+        } else {
+            this.tempAllData.push(allAction);
+        }
+    }
+
+    resetTempData(){
+ if (this.uploadedDataArray && this.uploadedDataArray != undefined && this.uploadedDataArray.length != 0) {
+           
+            if (this.tempAllData && this.tempAllData != undefined) {
+                for (var i = 0; i < this.tempAllData.length; i++) {
+                    // alert(this.checkIfelementExistsInArray(this.tempAllData[i].action,this.actions))
+                    var result = false;
+
+                    if (this.tempAllData[i].action === 'AllAction') {
+                        result = true;
+                    }
+                    else {
+                        result = this.checkIfelementExistsInArray(this.tempAllData[i].action, this.actions);
+                    }
+                    if (!result) {
+                        // console.log('Removing VM action==' + this.tempAllData[i].action);
+                        this.tempAllData.splice(i, 1);
+                        i = i - 1;
+                    }
+
+                }
+            }
+            this.addVmCapabilitiesData();
+        }
+    }
+}
diff --git a/src/index.html b/src/index.html
index 0bdd78c..8c4ffe3 100644
--- a/src/index.html
+++ b/src/index.html
@@ -17,15 +17,15 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 
-ECOMP is a trademark and service mark of AT&T Intellectual Property.
 ============LICENSE_END============================================
 -->
 
 <!doctype html>
 <html lang="en">
+
 <head>
     <meta charset="utf-8">
-    <title>APPC Self Service Design Tool</title>
+    <title>APPC Self Service Controller Design Tool</title>
     <base href="./index.html">
 
 
@@ -33,7 +33,9 @@ ECOMP is a trademark and service mark of AT&T Intellectual Property.
     <link rel="icon" type="image/x-icon" href="favicon.ico">
 
 </head>
+
 <body>
-<app-root></app-root>
+    <app-root></app-root>
 </body>
+
 </html>