-->
 
 <simple-notifications [options]="options"></simple-notifications>
-<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>
+<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="row" style="padding: 15px 25px">
                 <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
                     <label>Action*</label>
-                    <select class="form-control" required id="cmbAction" [(ngModel)]="referenceDataObject.action" (ngModelChange)="updateSessionValues($event,'action');actionChange($event,content,userForm);"
-                        #action="ngModel" name="action">
+                    <select class="form-control" required id="cmbAction" [(ngModel)]="referenceDataObject.action" (ngModelChange)="updateSessionValues($event,'action');actionChange($event,content,userForm);" #action="ngModel" name="action">
                         <option [value]="actionType"
                                 [ngClass]="{'selectedAction':selectedActions.indexOf(actionType)>-1}"
                                 [selected]="referenceDataObject.action===actionType"
                 </div>
                 <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
                     <label>VNF Type* </label>
-                    <input type="text" readonly 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" readonly id="txtVnfcType" [(ngModel)]="referenceDataObject.scope['vnfc-type']" (blur)="setVnfcType($event.target.value)"
-                        (ngModelChange)="updateSessionValues($event,'vnfcType')" #vnfcType="ngModel" name="vnfcType">
+                    <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>
-                    <select class="form-control" required id="txtDeviceProtocol" [(ngModel)]="referenceDataObject['device-protocol']" (ngModelChange)="deviceProtocolChange()"
-                        #deviceProtocol="ngModel" name="deviceProtocol">
-
+                    <select class="form-control" required id="txtDeviceProtocol" [(ngModel)]="referenceDataObject['device-protocol']" (ngModelChange)="deviceProtocolChange()" #deviceProtocol="ngModel" name="deviceProtocol">
                         <option [value]="device" [selected]="referenceDataObject.deviceProtocol===device"
                                 *ngFor="let device of deviceProtocols">{{device}}
                         </option>
                 </div>
                 <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="isConfigScaleOut">
                     <label>Template Identifier</label>
-                    <select class="form-control" required id="tempIdentifier" (ngModelChange)="dataModified();idChange($event,content,userForm)"
-                        [(ngModel)]="templateIdentifier" #deviceProtocol="ngModel" name="templateIdentifier">
+                    <select class="form-control" required id="tempIdentifier" (ngModelChange)="dataModified();idChange($event,content,userForm)" [(ngModel)]="templateIdentifier" #deviceProtocol="ngModel" name="templateIdentifier">
                         <option [value]="val" *ngFor="let val of referenceDataObject['template-id-list']">{{val}}
                         </option>
                     </select>
             <div class="col-12" *ngIf="!(referenceDataObject.action === 'OpenStack Actions')">
                 <div class="input-group">
                     <input id="inputFile" class="file" #myInput type='file' (change)="fileChange($event)">
-                    <input [(ngModel)]="fileName" type="text" class="input-lg" disabled placeholder="Upload Reference File from PC" name="browse"
-                        style="width:80%">
-                    <button (click)="browseOption($event)" class="browse mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary input-lg"
-                        type="button">Upload Reference File
+                    <input [(ngModel)]="fileName" type="text" class="input-lg" disabled placeholder="Upload Reference File from PC" name="browse" style="width:80%">
+                    <button (click)="browseOption($event)" class="browse mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary input-lg" type="button">Upload Reference File
                     </button>
                 </div>
             </div>
             <div class="col-12" *ngIf="referenceDataObject.action === 'OpenStack Actions'">
                 <div class="input-group">
                     <input id="excelInputFile" #myInput1 class="file" type="file" (change)="upload($event)">
-                    <input [(ngModel)]="uploadFileName" type="text" class="input-lg" disabled placeholder="Upload VM Capabilities File" name="uploadFileName"
-                        style="width:80%">
-                    <button (click)="excelBrowseOption($event)" class="browse mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary input-lg"
-                        type="button">Upload VM Capabilities File
+                    <input [(ngModel)]="uploadFileName" type="text" class="input-lg" disabled placeholder="Upload VM Capabilities File" name="uploadFileName" style="width:80%">
+                    <button (click)="excelBrowseOption($event)" class="browse mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary input-lg" type="button">Upload VM Capabilities File
                     </button>
                 </div>
             </div>
                         <div class="text-right col-6">
                             <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" type="submit">Download All To PC
                             </button>  
-                            <button id="saveToAppc" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" type="button"
-                                (click)="saveToAppc(userForm.valid, userForm)">Save All to APPC
+                            <button id="saveToAppc" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" type="button" (click)="saveToAppc(userForm.valid, userForm)">Save All to APPC
                             </button>  
                         </div>
                     </div>
                                     <input type="text" class="form-control" id="txtIpaddress" [(ngModel)]="referenceDataObject['url']" name="contextUrl">
                                 </div>
                             </div>
-                            <div class="card-block" *ngIf="(referenceDataObject.action =='ConfigScaleOut' || referenceDataObject.action =='Configure'|| referenceDataObject.action ==''  || referenceDataObject.action ==undefined)"
-                                style="border-top: 5px solid #6ab344;border-top-right-radius: 7px;border-top-left-radius: 7px;">
+                            <div class="card-block" *ngIf="(referenceDataObject.action =='ConfigScaleOut' || referenceDataObject.action =='Configure'|| referenceDataObject.action ==''  || referenceDataObject.action ==undefined)" style="border-top: 5px solid #6ab344;border-top-right-radius: 7px;border-top-left-radius: 7px;">
                                 <div class="col-12">
                                     <h5 style="margin-top: 0.5rem;font-family: Roboto"> VNFC Information
                                         <span class="pull-right">
                             </div>
                             <div class="row" *ngIf="(( referenceDataObject.action =='ConfigScaleOut' ||referenceDataObject.action =='Configure'|| referenceDataObject.action =='' || referenceDataObject.action ==undefined ) && isCollapsedContent) ">
                                 <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
-                                    <label style="font-size:12px;">VNFC Type</label>
+                                    <label style="font-size:12px;">VNFC Type*</label>
                                     <input type="text" class="form-control" id="txtVnfcTypeInColl" [(ngModel)]="Sample['vnfc-type']" #vnfcType="ngModel" name="samplevnfcType">
                                 </div>
                                 <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
-                                    <label style="font-size:12px">VNFC Function Code</label>
-                                    <input type="text" class="form-control" id="txtVnfcFunctionCode" [(ngModel)]="Sample['vnfc-function-code']" #vnfcFunctionCode="ngModel"
-                                        name="samplevnfcFunctionCode">
+                                    <label style="font-size:12px">VNFC Function Code*</label>
+                                    <input type="text" class="form-control" id="txtVnfcFunctionCode" [(ngModel)]="Sample['vnfc-function-code']" #vnfcFunctionCode="ngModel" name="samplevnfcFunctionCode">
                                 </div>
                                 <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
-                                    <label style="font-size:12px;">IPAddress V4 OAM VIP</label>
+                                    <label style="font-size:12px;">IPAddress V4</label>
                                     <select class="form-control" id="cmbIpAddedBoo" [(ngModel)]="Sample['ipaddress-v4-oam-vip']" name="sampleIpaddress">
                                         <option [value]="hasIp" *ngFor="let hasIp of ipAddressBoolean">{{hasIp}}
                                         </option>
                                 </div>
                                 <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
                                     <label style="font-size:12px;">Group Notation Value</label>
-                                    <input type="text" class="form-control" [readonly]="disableGrpNotationValue" id="txtGroupValue" [(ngModel)]="Sample['group-notation-value']"
-                                        name="sampleGroupValue">
+                                    <input type="text" class="form-control" [readonly]="disableGrpNotationValue" id="txtGroupValue" [(ngModel)]="Sample['group-notation-value']" name="sampleGroupValue">
                                 </div>
                                 <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
-                                    <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent clear-btn"
-                                        (click)="clearVnfcData()">Clear VNFC Info
+                                    <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent clear-btn" (click)="clearVnfcData()">Clear VNFC Info
                                     </button>
                                 </div>
                             </div>
                             <hr>
-                            <div *ngIf="(referenceDataObject.action =='ConfigScaleOut' || referenceDataObject.action =='Configure'|| referenceDataObject.action =='' )"
-                                class="row">
+                            <div *ngIf="(referenceDataObject.action =='ConfigScaleOut' || referenceDataObject.action =='Configure'|| referenceDataObject.action =='' )" class="row">
                                 <div class="col-lg-2 col-md-2 hdden-sm-down">
                                     <label style="margin-top: 17px;" class="headlinesInBold"> Number Of VM(s): </label>
+
                                 </div>
                                 <div class="col-lg-5 col-md-5 col-sm-6 col-xs-6">
                                     <div class="form-group">
-                                        <input type="text" placeholder="Number of VM(s)" class="form-control" id="txtVmnumber22" [(ngModel)]="refernceScopeObj.from"
-                                            (ngModelChange)="numberValidation($event)" name="txtNumber23">
+                                        <input type="text" placeholder="Number of VM(s)" class="form-control" id="txtVmnumber22" [(ngModel)]="refernceScopeObj.from" (ngModelChange)="numberValidation($event)" name="txtNumber23">
                                     </div>
                                 </div>
                                 <div class="col-lg-5 col-md-5 col-sm-6 col-xs-6 text-right">
                                     <div class="form-group">
-                                        <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" type="button" [disabled]="!refernceScopeObj.from || !numberOfVmTest"
-                                            (click)="addVms()">Add VM Information
+                                        <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" type="button" [disabled]="!refernceScopeObj.from || !numberOfVmTest" (click)="addVms()">Add VM Information
                                         </button>
                                     </div>
                                 </div>
                             </div>
                             <div *ngIf="referenceDataObject.vm?.length>0">
-                                <div class="row" *ngFor="let noOfvm of referenceDataObject.vm | vmFiltering:referenceDataObject?.action:templateIdentifier; let j=index">
-                                    <div *ngIf="((referenceDataObject.action =='ConfigScaleOut' || referenceDataObject.action =='Configure'|| referenceDataObject.action =='' || referenceDataObject.action ==undefined ))"
-                                        class="col-12">
-                                        <div class="row" *ngFor="let item of noOfvm.vnfc; let i=index">
+                                <div class="row" *ngFor="let noOfvm of referenceDataObject.vm  | vmFiltering:referenceDataObject?.action:templateIdentifier; trackBy:trackByFn;let j=index">
+                                    <div *ngIf="((referenceDataObject.action =='ConfigScaleOut' || referenceDataObject.action =='Configure'|| referenceDataObject.action =='' || referenceDataObject.action ==undefined ))" class="col-12">
+                                        <div class="row" *ngFor="let item of noOfvm.vnfc;trackBy:trackByFn, let i=index">
                                             <div class="col-md-12" *ngIf="i==0">
                                                 <h5 class="headlinesInBold">VM Number: {{j+1}}</h5>
+
                                             </div>
                                             <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
                                                 <label style="font-size:12px;">VNFC Instance No.</label>
                                             </div>
                                             <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
                                                 <label style="font-size:12px;">VNFC Type*</label>
-                                                <input type="text" class="form-control" id="txtVnfcTypeInColl" required [(ngModel)]="item['vnfc-type']" #vnfcType="ngModel"
-                                                    name="vnfcType{{j}}">
+                                                <input type="text" class="form-control" id="txtVnfcTypeInColl" required [(ngModel)]="item['vnfc-type']" #vnfcType{{j}}="ngModel" name="vnfcType{{j}}">
                                                 <span class="error-message" [hidden]="vnfcType.valid || (vnfcType.pristine && !userForm.submitted)">Required Field</span>
                                             </div>
                                             <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
                                                 <label style="font-size:12px;">VNFC Function Code*</label>
-                                                <input type="text" class="form-control" id="txtVnfcFunctionCode" required [(ngModel)]="item['vnfc-function-code']" #vnfcFunctionCode="ngModel"
-                                                    name="vnfcFunctionCode{{j}}">
+                                                <input type="text" class="form-control" id="txtVnfcFunctionCode" required [(ngModel)]="item['vnfc-function-code']" #vnfcFunctionCode="ngModel" name="vnfcFunctionCode{{j}}">
                                                 <span class="error-message" [hidden]="vnfcFunctionCode.valid || (vnfcFunctionCode.pristine && !userForm.submitted)">Required Field</span>
                                             </div>
                                             <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
-                                                <label style="font-size:12px;">IPAddress V4 OAM VIP</label>
+                                                <label style="font-size:12px;">IPAddress V4</label>
                                                 <select class="form-control" id="cmbIpAddress" [(ngModel)]="item['ipaddress-v4-oam-vip']" name="ipaddress{{j}}">
                                                     <option [value]="hasIP" [selected]="item.ipAddressBoolean===hasIP"
                                                             *ngFor="let hasIP of ipAddressBoolean">{{hasIP}}
                                             </div>
                                             <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
                                                 <label style="font-size:12px;">Group Notation Value</label>
-                                                <input type="text" class="form-control" id="txtGroupValue" [(ngModel)]="item['group-notation-value']" name="selectedGroupValue{{j}}">
+                                                <input type="text" [readonly]="item['group-notation-type'] =='existing-group-name'" class="form-control" id="txtGroupValue" [(ngModel)]="item['group-notation-value']" name="selectedGroupValue{{j}}">
                                             </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,templateIdentifier)">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
             </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>
+                    <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>
 
 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.
-
 ============LICENSE_END============================================
 */
 
         let cacheData = this.mappingEditorService.referenceNameObjects;
         if (cacheData != undefined && cacheData != null && cacheData.length > 0) {
             this.tempAllData = cacheData;
-            // console.log("latest action")
-            // console.log(this.mappingEditorService.latestAction)
             if (this.mappingEditorService.latestAction != undefined) {
                 this.referenceDataObject = this.mappingEditorService.latestAction;
                 this.toggleIdentifier(this.referenceDataObject.action);
-                //this.referenceDataObject['template-id-list'] = this.mappingEditorService.identifier
-                //use these commented objects to be used in template and pd pages
-                //this.templateIdentifier = this.mappingEditorService.identifier
                 this.refernceScopeObj.sourceType = this.referenceDataObject['scopeType'];
                 this.oldAction = this.referenceDataObject.action;
                 this.populateExistinAction(this.referenceDataObject.action);
         this.firstArrayElement = [];
         this.uploadFileName = '';
         this.templateIdentifier = this.mappingEditorService.identifier
-        //this.tempAllData = [];
+        // Enable or Block Template and PD Tabs
+        this.buildDesignComponent.getRefData(this.referenceDataObject);
+        this.configDrp(this.referenceDataObject.action)
     }
     toggleIdentifier(data) {
         if (data == 'ConfigScaleOut') {
                     let artifactInfo = JSON.parse(resp.output.data.block).artifactInfo[0];
                     let reference_data = JSON.parse(artifactInfo['artifact-content'])['reference_data'][0];
                     this.referenceDataObject = reference_data;
-                    // console.log('reference data obj==' + JSON.stringify(this.referenceDataObject));
+                    this.toggleIdentifier(this.referenceDataObject.action);
+                    if (this.referenceDataObject.action == 'ConfigScaleOut') {
+                        this.groupAnotationType = ['', 'first-vnfc-name', 'fixed-value', 'relative-value', 'existing-group-name'];
+                    }
+
+                    // Enable or Block Template and PD Tabs
+                    this.buildDesignComponent.getRefData(this.referenceDataObject);
                     this.refernceScopeObj.sourceType = this.referenceDataObject['scopeType'];
                     this.mappingEditorService.getReferenceList().push(JSON.parse(artifactInfo['artifact-content']));
                     this.tempAllData = JSON.parse(artifactInfo['artifact-content'])['reference_data'];
                             }*/
                         ];
                     }
-                    // console.log('tempalldata===' + JSON.stringify(this.tempAllData));
+                    this.getArtifactsOpenStack();
                 } else {
                     this.nService.success('Status', 'Sorry !!! I dont have any artifact Named : ' + (JSON.parse(payload))['artifact-name']);
                 }
     }
 
     numberValidation(event: any) {
-        // // console.log(this.numberTest.test(event));
         if (this.numberTest.test(event) && event != 0) {
             this.numberOfVmTest = true;
         }
                     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);
+
+            let vmIndex = this.findVmindex(data, vmNumber, templateId)
+            this.referenceDataObject.vm.splice(vmIndex, 1);
+            let index = 0
             this.referenceDataObject.vm.forEach((obj, arrIndex) => {
+                if (obj['template-id'] == templateId) {
+
+                    obj["vm-instance"] = index + 1
+                    index++
+                }
 
-                obj["vm-instance"] = arrIndex + 1
             })
         }
 
+    }
+    findVmindex(data, vmNumber, templateId) {
+        return this.referenceDataObject.vm.findIndex(obj => {
+            let x = obj['vm-instance'] == (vmNumber + 1) && templateId == obj['template-id']//true
+            return x
+        })
+
     }
 
     //add new VM's to the configure
     addVms() {
         let arr = [];
-        var vnfcObj = JSON.parse(JSON.stringify(this.Sample));
         let mberOFVm = Number(this.refernceScopeObj.from);
-        let arrlength = this.referenceDataObject.vm.length;
-        mberOFVm = arrlength + mberOFVm;
-        for (var i = (arrlength); i < mberOFVm; i++) {
-            if (this.referenceDataObject.action == 'ConfigScaleOut') {
-                arr.push({ 'template-id': this.templateIdentifier, 'vm-instance': (i + 1), vnfc: [Object.assign({}, this.Sample)] });
-            } else {
-                arr.push({ 'vm-instance': (i + 1), vnfc: [Object.assign({}, this.Sample)] });
+        if (this.referenceDataObject.action == 'ConfigScaleOut') {
+            let existingVmsLength = this.referenceDataObject.vm.filter(obj => {
+                return obj['template-id'] == this.templateIdentifier
+            }).length;
+            mberOFVm = existingVmsLength + mberOFVm;
+            let index = 0;
+            for (var i = (existingVmsLength); i < mberOFVm; i++) {
+
+                this.referenceDataObject.vm.push({ 'template-id': this.templateIdentifier, 'vm-instance': (existingVmsLength + index + 1), vnfc: [Object.assign({}, this.Sample)] });
+                index++;
+            }
+
+        } else {
+            let arrlength = this.referenceDataObject.vm.length;
+            mberOFVm = arrlength + mberOFVm;
+            for (var i = (arrlength); i < mberOFVm; i++) {
+                if (this.referenceDataObject.action == 'ConfigScaleOut') {
+                    this.referenceDataObject.vm.push({ 'template-id': this.templateIdentifier, 'vm-instance': (i + 1), vnfc: [Object.assign({}, this.Sample)] });
+                } else {
+                    this.referenceDataObject.vm.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
         let scopeName = this.resetParamsOnVnfcType();
         let extension = this.decideExtension();
         this.prepareArtifactList(scopeName, extension);
-
         if (this.referenceDataObject.action === 'OpenStack Actions') {
             this.referenceDataObject['template'] = 'N';
             this.referenceDataObject['artifact-list'] = [];
         }
-        //ditaching the object from the form and processing pfurther
+        //detaching the object from the form and processing further
         let newObj = $.extend(true, {}, this.referenceDataObject);
         let action = this.referenceDataObject.action;
-        //preparing Obj for save/download
         newObj = this.deleteVmsforNonActions(newObj, action)
         this.pushOrReplaceTempData(newObj, action);
         this.addAllActionObj(newObj, scopeName);
     }
 
     upload(evt: any) {
-        /* wire up file reader */
+        /*  // console.log("This uploaded array==" + JSON.stringify(this.uploadedDataArray))
+          // // console.log("This template data before==" + JSON.stringify(this.tempAllData))
+          if (this.uploadedDataArray && this.uploadedDataArray != undefined && this.uploadedDataArray.length!=0) {
+              /*  for (var i = 0; i < this.uploadedDataArray.length; i++) {
+                    var action = this.uploadedDataArray[i][0];
+                    for (var j = 0; j < this.tempAllData.length; j++) {
+                        if (action === this.tempAllData[j].action) {
+                            this.tempAllData.splice(j);
+                            // console.log("This template data===" + this.tempAllData[j]);
+                        }
+                    }
+                }
+               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 = this.checkIfelementExistsInArray(this.tempAllData[i].action, this.actions);
+                      if (this.tempAllData[i].action === "AllAction") result = true;
+                      if (!result) {
+                          // console.log("Removing VM action==" + this.tempAllData[i].action)
+                          this.tempAllData.splice(i, 1);
+                      }
+     
+                  }
+              }
+          }
+          // // 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);
         if (target.files.length != 1) {
             reader.onload = (e: any) => {
                 /* read workbook */
                 const bstr = e.target.result;
+                //      // console.log("print 1---" + bstr);
                 const wb = XLSX.read(bstr, { type: 'binary' });
+                //    // console.log("print 2---" + JSON.stringify(wb));
+                /* grab first sheet */
                 const wsname = wb.SheetNames[0];
+                //  // console.log("Name:---" + wsname);
                 const ws = wb.Sheets[wsname];
+
+                /* save data */
+
                 let arrData = (<AOA>(XLSX.utils.sheet_to_json(ws, { header: 1 })));
                 this.uploadedDataArray = arrData;
                 this.firstArrayElement = arrData[0];
             var vnfcFuncCodeArray = [];
             var data = this.uploadedDataArray[i];
             for (var j = 1; j < data.length; j++) {
-                // // console.log("Data " +j +" is "+ JSON.stringify(data[j]))
                 if (data[j] != undefined) {
                     if (data[j].toUpperCase() === 'Y') {
                         vnfcFuncCodeArray.push(this.firstArrayElement[j]);
-                        //vnfcFuncCodeArray.push({name:this.firstArrayElement[j]});
                     }
                 }
             }
                 type: 'text/plain'
             });
             let fileName = 'reference_AllAction_' + referenceObject.scopeName + '_' + '0.0.1V.json';
-            saveAs(blob, fileName);
+            this.downloadFile(blob, fileName, 100)
             var templateData = JSON.stringify(this.downloadData.template.templateData);
             var nameValueData = JSON.stringify(this.downloadData.template.nameValueData);
             var pdData = this.downloadData.pd.pdData;
             if (pdData != '' && pdData != null && pdData != undefined) this.downloadPd();
         }
     }
+    downloadFile(blob, fileName, delay) {
+        setTimeout(() => {
+            saveAs(blob, fileName);
+        }, delay)
+    }
 
     downloadTemplate() {
         var fileName = this.downloadData.template.templateFileName;
             var blob = new Blob([theJSON], {
                 type: 'text/' + fileExtensionArr[1]
             });
-            saveAs(blob, fileName);
+            this.downloadFile(blob, fileName, 130)
         }
     }
 
             type: 'text/json'
         });
 
-        saveAs(blob, fileName);
+        this.downloadFile(blob, fileName, 160)
     }
 
     downloadPd() {
             type: 'text/plain'
         });
 
-        saveAs(blob, fileName);
+        this.downloadFile(blob, fileName, 180)
     }
 
     saveToAppc(valid, form, event) {
                 if (nameValueData != '{}' && nameValueData != null && nameValueData != undefined) this.saveNameValue();
                 if (pdData != '{}' && pdData != null && pdData != undefined) this.savePd();
                 if (this.actionChanged) {
+                    this.clearVnfcData()
                     if (this.currentAction) {
                         this.referenceDataObject.action = this.currentAction;
                     }
+
                     this.populateExistinAction(this.referenceDataObject.action);
                     this.actionChanged = false;
                 }
                             });
                         } else {
                             this.referenceDataObject = jsonObject;
+
                             this.selectedActions.push(jsonObject.action);
                         }
+                        this.toggleIdentifier(this.referenceDataObject.action)
+                        this.configDrp(this.referenceDataObject.action)
                         if (this.referenceDataObject.action === 'OpenStack Actions') {
                             this.deviceProtocols = ['', 'OpenStack'];
                             this.buildDesignComponent.tabs = [
                         if (this.referenceDataObject['action-level'] == null) {
                             this.referenceDataObject['action-level'] = 'VNF';
                         }
+                        // Enable or Block Template and PD Tabs
+                        this.buildDesignComponent.getRefData(this.referenceDataObject);
                     } catch (e) {
                         this.nService.error('Error', 'Incorrect file format');
                     }
         } else {
             this.notificationService.notifyErrorMessage('Failed to read file..');
         }
-
     }
 
     public readFile(file, reader, callback) {
 
     //Modal pop up for action change with values entered.
     actionChange(data, content, userForm) {
-        // this.actionChanged = true;
         this.disableGrpNotationValue = false
         if (data == null) {
             return;
         }
         if ((userForm.valid) && this.oldAction != '' && this.oldAction != undefined) {
             this.actionChanged = true;
-            this.modalService.open(content).result.then(res => {
+            this.modalService.open(content, { backdrop: 'static', keyboard: false }).result.then(res => {
                 if (res == 'yes') {
                     this.currentAction = this.referenceDataObject.action;
                     this.referenceDataObject.action = this.oldAction;
                     this.toggleIdentifier(data)
                     this.oldAction = this.currentAction;// this.referenceDataObject.action + '';
                     this.referenceDataObject.action = this.currentAction
-
                     this.populateExistinAction(data);
                     if (this.oldAction === 'OpenStack Actions') {
-
                         this.uploadedDataArray = [];
                         this.remUploadedDataArray = [];
                         this.firstArrayElement = [];
                         this.uploadFileName = '';
-                        //this.tempAllData = [];
                     }
                     this.clearCache();
+                    this.refernceScopeObj.from = '';
                 } else {
                     this.toggleIdentifier(data)
                     this.currentAction = this.referenceDataObject.action;
                     this.populateExistinAction(data);
+                    this.resetVmsForScaleout(data);
                     this.oldAction = this.referenceDataObject.action + '';
                     this.clearCache();
+                    this.clearVnfcData()
+                    this.refernceScopeObj.from = '';
                 }
+                // Enable or Block Template and PD Tabs
+                this.buildDesignComponent.getRefData(this.referenceDataObject);
             });
         } else {
             this.actionChanged = true;
             this.oldAction = this.referenceDataObject.action + '';
             this.populateExistinAction(data);
             this.resetVmsForScaleout(data);
-            this.toggleIdentifier(data)
+            this.toggleIdentifier(data);
+            // Enable or Block Template and PD Tabs
+            this.buildDesignComponent.getRefData(this.referenceDataObject);
         }
+        this.configDrp(data)
+    }
 
+    configDrp(data) {
         if (data == 'ConfigScaleOut') {
             this.groupAnotationType = ['', 'first-vnfc-name', 'fixed-value', 'relative-value', 'existing-group-name'];
+        } else {
+            this.groupAnotationType = ['', 'first-vnfc-name', 'fixed-value', 'relative-value'];
         }
-
         if (data == 'OpenStack Actions') {
             this.buildDesignComponent.tabs = [
                 {
         } else {
             this.nonConfigureAction = true;
         }
-        this.buildDesignComponent.getRefData(this.referenceDataObject);
-
     }
 
     deviceProtocolChange() {
+        // Enable or Block Template and PD Tabs
         this.buildDesignComponent.getRefData(this.referenceDataObject)
     }
 
             return;
         }
         if ((userForm.valid) && this.oldAction != '' && this.oldAction != undefined) {
+            this.currentAction = "ConfigScaleOut"
             let referenceObject = this.prepareReferenceObject();
             this.actionChanged = true;
             if (this.templateIdentifier) {
                         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();
+                        this.clearCache();
+                        this.clearVnfcData()
+                        this.refernceScopeObj.from = '';
                     }
                     else {
-                        this.clearTemplateCache();
-                        this.clearPdCache();
+                        this.clearCache();
+                        this.refernceScopeObj.from = '';
                     }
                 });
             }
     }
 
     clearCache()
-    //needed for the the clearing template cache.
     {
         // get the value and save the userid and persist it.
         this.clearTemplateCache();
         this
             .httpUtils
             .post(
-            { url: environment.getDesigns, data: this.appData.template.templateData })
+                { url: environment.getDesigns, data: this.appData.template.templateData })
             .subscribe(resp => {
                 if (resp.output.status.code === '400' && resp.output.status.message === 'success') {
                     this.nService.success('Status', 'Successfully uploaded the Template Data');
                 }
                 if (resp.output.status.code === '401') {
                     this.nService.warn('Status', 'Error in saving the Template to Appc');
+
                 }
             },
-            (err) => this.nService.error('Status', 'Error Connecting to the APPC Network'));
+                (err) => this.nService.error('Status', 'Error Connecting to the APPC Network'));
     }
 
     saveNameValue() {
         this
             .httpUtils
             .post(
-            {
-                url: environment.getDesigns, data: this.appData.template.nameValueData
-            })
+                {
+                    url: environment.getDesigns, data: this.appData.template.nameValueData
+                })
             .subscribe(resp => {
                 if (resp.output.status.code === '400' && resp.output.status.message === 'success') {
                     this.nService.success('Status', 'Successfully uploaded the Name Value Pairs');
                     this.nService.warn('Status', 'Error in saving the Name value pairs to Appc');
                 }
             },
-            error => {
-                this.nService.error('Status', 'Error Connecting to the APPC Network');
-                return false;
-            });
+                error => {
+                    this.nService.error('Status', 'Error Connecting to the APPC Network');
+                    return false;
+                });
     }
 
     savePd() {
         this
             .httpUtils
             .post(
-            {
-                url: environment.getDesigns, data: this.appData.pd
-            })
+                {
+                    url: environment.getDesigns, data: this.appData.pd
+                })
             .subscribe(resp => {
                 if (resp.output.status.code === '400' && resp.output.status.message === 'success') {
                     this.nService.success('Status', 'Successfully uploaded PD file');
                     this.nService.warn('Status', 'Error in saving the PD to Appc');
                 }
             },
-            error => {
-                this.nService.error('Status', 'Error Connecting to the APPC Network');
-                return false;
-            });
+                error => {
+                    this.nService.error('Status', 'Error Connecting to the APPC Network');
+                    return false;
+                });
     }
 
     openModel(toShow: any, message: any, title: any) {
     resetGroupNotation() {
         if (this.Sample['group-notation-type'] == "existing-group-name") {
             this.Sample['group-notation-value'] = ""
-
-            this.disableGrpNotationValue = true
+            this.disableGrpNotationValue = true 
         } else {
             this.disableGrpNotationValue = false
         }
 
     resetVmsForScaleout(action) {
         //reset currentform vms based on action
-        if (action == "ConfigScaleOut") {
+        if (action == "ConfigScaleOut" || action == "Configure") {
             let ConfigScaleOutIndex = this.tempAllData.findIndex(obj => {
                 return obj['action'] == action
             });
             } else {
                 if (this.actionChanged) {
                     this.referenceDataObject.vm = []
-                }
-                //  
+                } 
             }
         }
     }
     }
     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) {
         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 {
         return newObj
     }
     pushOrReplaceTempData(newObj, action) {
-
         let actionObjIndex = this.tempAllData.findIndex(obj => {
             return obj['action'] == action;
         });
         if (actionObjIndex > -1) {
             this.tempAllData[actionObjIndex] = newObj;
             this.mappingEditorService.saveLatestAction(this.tempAllData[actionObjIndex]);
-            this.mappingEditorService.saveLatestIdentifier(this.templateIdentifier);
+            if (newObj.action == "ConfigScaleOut") {
+                this.mappingEditorService.saveLatestIdentifier(this.templateIdentifier);
+            }
+            else {
+                this.templateIdentifier = ('')
+                this.mappingEditorService.saveLatestIdentifier(this.templateIdentifier)
+            }
         } else {
             if (newObj.action != '') {
                 this.tempAllData.push(newObj);
                 this.mappingEditorService.saveLatestAction(newObj);
-                this.mappingEditorService.saveLatestIdentifier(this.templateIdentifier);
+                if (newObj.action == "ConfigScaleOut") {
+                    this.mappingEditorService.saveLatestIdentifier(this.templateIdentifier);
+                }
+                else {
+                    this.templateIdentifier = ('')
+                    this.mappingEditorService.saveLatestIdentifier(this.templateIdentifier)
+                }
             }
         }
 
     }
 
     addAllActionObj(newObj, scopeName) {
-
         //Creating all action block to allow mulitple actions at once
         let allAction = {
             action: '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;
                     }
                         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();
         }
     }
+
+    trackByFn(index, item) {
+        return index; 
+    }
+    getArtifactsOpenStack() {
+        var array = []
+        var vnfcFunctionCodeArrayList = [];
+        var vnfcSet = new Set();
+        vnfcSet.add("VM Type")
+        for (var i = 0; i < this.tempAllData.length; i++) {
+            if (!this.checkIfelementExistsInArray(this.tempAllData[i].action, this.actions) && (this.tempAllData[i].action != 'AllAction')) {
+                var vnfcFunctionCodeArray = this.tempAllData[i]["vnfc-function-code-list"]
+                for (var j = 0; j < vnfcFunctionCodeArray.length; j++) {
+                    vnfcSet.add(vnfcFunctionCodeArray[j])
+                }
+                vnfcFunctionCodeArrayList.push([this.tempAllData[i].action].concat(this.tempAllData[i]["vnfc-function-code-list"]))
+            }
+        }
+        var vnfcSetArray = Array.from(vnfcSet);
+        let vnfcSetArrayLen = vnfcSetArray.length;
+        for (let i = 0; i < vnfcFunctionCodeArrayList.length; i++) {
+            let element = vnfcFunctionCodeArrayList[i];
+            for (let j = 1; j < element.length; j++) {
+                for (let k = j; k < vnfcSetArrayLen; k++) {
+                    if (element[j] === vnfcSetArray[k]) {
+                        element[j] = 'Y';
+                    }
+                    else {
+                        element.splice(j, 0, '');
+                    }
+                    break;
+                }
+            }
+        }
+        this.firstArrayElement = vnfcSetArray;
+        this.remUploadedDataArray = vnfcFunctionCodeArrayList;
+    }
 }
\ No newline at end of file