From: Barath Kumar R <barath.r@tataelxsi.co.in>
Date: Tue, 7 Jul 2020 09:54:05 +0000 (+0530)
Subject: New VIM Design with the config implemented.
X-Git-Tag: v8.0.0rc3~6
X-Git-Url: https://osm.etsi.org/gitweb/?a=commitdiff_plain;h=refs%2Fchanges%2F46%2F9346%2F3;p=osm%2FNG-UI.git

New VIM Design with the config implemented.

 * Added the feature to edit the config section after uploading.
 * Sample Config will be provided for each type.

Change-Id: I807e8848c4b1d07ee698a249e234568708d97bf2
Signed-off-by: Barath Kumar R <barath.r@tataelxsi.co.in>
---

diff --git a/src/app/sdn-controller/new-sdn-controller/NewSDNControllerComponent.html b/src/app/sdn-controller/new-sdn-controller/NewSDNControllerComponent.html
index 7b909b1..5937862 100644
--- a/src/app/sdn-controller/new-sdn-controller/NewSDNControllerComponent.html
+++ b/src/app/sdn-controller/new-sdn-controller/NewSDNControllerComponent.html
@@ -36,9 +36,10 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i
             <label class="col-sm-4 col-form-label" for="sdn_type">{{'TYPE' | translate}}*</label>
             <div class="col-sm-8">
                 <ng-select [items]="sdnType" placeholder="{{'SELECT' | translate}}" bindLabel="title" bindValue="value"
-                    formControlName="type" id="sdn_type" [(ngModel)]="sdnTypeMod"
+                    formControlName="type" id="sdn_type" [(ngModel)]="sdnTypeMod" [addTag]="sharedService.addCustomTag"
                     [ngClass]="{ 'is-invalid': submitted && f.type.errors }" required>
                 </ng-select>
+                <small class="text-info">{{'TYPEINFO' | translate}}</small>
             </div>
         </div>
         <div class="form-group row">
diff --git a/src/app/sdn-controller/new-sdn-controller/NewSDNControllerComponent.ts b/src/app/sdn-controller/new-sdn-controller/NewSDNControllerComponent.ts
index 75fc854..457c63c 100644
--- a/src/app/sdn-controller/new-sdn-controller/NewSDNControllerComponent.ts
+++ b/src/app/sdn-controller/new-sdn-controller/NewSDNControllerComponent.ts
@@ -63,6 +63,9 @@ export class NewSDNControllerComponent implements OnInit {
   /** Give the message for the loading @public */
   public message: string = 'PLEASEWAIT';
 
+  /** Contains all methods related to shared @private */
+  public sharedService: SharedService;
+
   /** Instance of the rest service @private */
   private restService: RestService;
 
@@ -78,8 +81,8 @@ export class NewSDNControllerComponent implements OnInit {
   /** Contains tranlsate instance @private */
   private translateService: TranslateService;
 
-  /** Contains all methods related to shared @private */
-  private sharedService: SharedService;
+  /** convenience getter for easy access to form fields */
+  get f(): FormGroup['controls'] { return this.sdnControllerForm.controls; }
 
   constructor(injector: Injector) {
     this.injector = injector;
@@ -103,9 +106,6 @@ export class NewSDNControllerComponent implements OnInit {
     });
   }
 
-  /** convenience getter for easy access to form fields */
-  get f(): FormGroup['controls'] { return this.sdnControllerForm.controls; }
-
   /**
    * Lifecyle Hooks the trigger before component is instantiate
    */
diff --git a/src/app/utilities/edit-packages/EditPackagesComponent.html b/src/app/utilities/edit-packages/EditPackagesComponent.html
index 2defc33..f099af1 100644
--- a/src/app/utilities/edit-packages/EditPackagesComponent.html
+++ b/src/app/utilities/edit-packages/EditPackagesComponent.html
@@ -51,7 +51,7 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i
     </div>
   </div>
 </form>
-<div class="ngx-codemirror" *ngIf="defaults[mode] else noData">
+<div class="ngx-codemirror edit-packages" *ngIf="defaults[mode] else noData">
   <ngx-codemirror [options]="options" [ngModel]="defaults[mode]" [disabled]="readOnly" [autoFocus]="true"
     (ngModelChange)="handleChange($event)"></ngx-codemirror>
 </div>
diff --git a/src/app/vim-accounts/VimAccountsModule.ts b/src/app/vim-accounts/VimAccountsModule.ts
index 3424bc4..c646857 100644
--- a/src/app/vim-accounts/VimAccountsModule.ts
+++ b/src/app/vim-accounts/VimAccountsModule.ts
@@ -24,6 +24,7 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule, Routes } from '@angular/router';
+import { CodemirrorModule } from '@ctrl/ngx-codemirror';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { TranslateModule } from '@ngx-translate/core';
@@ -80,7 +81,7 @@ const routes: Routes = [
 @NgModule({
     imports: [ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }), FormsModule, CommonModule,
         HttpClientModule, NgSelectModule, Ng2SmartTableModule, TranslateModule, RouterModule.forChild(routes), NgbModule,
-        PagePerRowModule, LoaderModule, PageReloadModule],
+        PagePerRowModule, LoaderModule, PageReloadModule, CodemirrorModule],
     declarations: [VimAccountsComponent, InfoVimComponent, VimAccountDetailsComponent, NewVimaccountComponent],
     providers: [DataService],
     entryComponents: [InfoVimComponent]
diff --git a/src/app/vim-accounts/info-vim/InfoVimComponent.html b/src/app/vim-accounts/info-vim/InfoVimComponent.html
index 2eac832..eeb91e2 100644
--- a/src/app/vim-accounts/info-vim/InfoVimComponent.html
+++ b/src/app/vim-accounts/info-vim/InfoVimComponent.html
@@ -34,13 +34,13 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i
 </div>
 <div id="demo" class="collapse context-style p-2" [ngbCollapse]="isCollapsed">
   <div class="row">
-    <div class="col-sm-6 text-dark mb-2 font-weight-bold" *ngFor="let details of configParams">
-      <label class="col-sm-5 col-form-label">{{ details.title | translate}}:</label>
-      <span class="col-sm-5"> {{(details.value !== undefined)?details.value : '--'}} </span>
+    <div class="col-sm-6 text-dark mb-2 font-weight-bold" *ngFor="let details of configParams | keyvalue">
+      <label class="col-sm-5 col-form-label text-captilize">{{ details.key}}:</label>
+      <span class="col-sm-5">{{(details.value !== null && details.value !== '' && details.value !== undefined)?details.value : '--'}}</span>
     </div>
   </div>
 </div>
-<div class="modal-footer list">
+<div class="modal-footer list border-0">
   <button (click)="onVimAccountBack()"
     class="btn btn-danger pull-right">{{'PAGE.VIMDETAILS.BACKTOVIMACCOUNTS' | translate}}</button>
 </div>
diff --git a/src/app/vim-accounts/info-vim/InfoVimComponent.ts b/src/app/vim-accounts/info-vim/InfoVimComponent.ts
index d40b696..c82e9b6 100644
--- a/src/app/vim-accounts/info-vim/InfoVimComponent.ts
+++ b/src/app/vim-accounts/info-vim/InfoVimComponent.ts
@@ -47,7 +47,7 @@ export class InfoVimComponent implements OnInit {
   public vimAccountDetails: VimAccountDetails;
 
   /** Information Top Left @public */
-  public configParams: {}[] = [];
+  public configParams: {} = {};
 
   /** Showing more details of collapase */
   public isCollapsed: boolean = true;
@@ -116,19 +116,23 @@ export class InfoVimComponent implements OnInit {
     this.restService.getResource(environment.VIMACCOUNTS_URL + '/' + this.paramsID)
       .subscribe((vimAccountsData: VimAccountDetails) => {
         this.showDetails(vimAccountsData);
-        if (vimAccountsData.config !== undefined) {
-          if (vimAccountsData.vim_type === 'openstack') {
-            this.showOpenstackConfig(vimAccountsData.config);
-          } else if (vimAccountsData.vim_type === 'aws') {
-            this.awsConfig(vimAccountsData.config);
-          } else if (vimAccountsData.vim_type === 'openvim' || vimAccountsData.vim_type === 'opennebula') {
-            this.openVIMOpenNebulaConfig(vimAccountsData.config);
-          } else if (vimAccountsData.vim_type === 'vmware') {
-            this.vmwareConfig(vimAccountsData.config);
-          } else if (vimAccountsData.vim_type === 'azure') {
-            this.azureConfig(vimAccountsData.config);
+        if (vimAccountsData.config.location !== undefined) {
+          const locationArr: string[] = vimAccountsData.config.location.split(',');
+          if (Array.isArray(locationArr)) {
+            vimAccountsData.config.location = locationArr[0];
           }
         }
+        Object.keys(vimAccountsData.config).forEach((key: string) => {
+          if (Array.isArray(vimAccountsData.config[key]) || typeof vimAccountsData.config[key] === 'object') {
+            vimAccountsData.config[key] = JSON.stringify(vimAccountsData.config[key]);
+          }
+          const keyArr: string[] = key.split('_');
+          if (keyArr.length > 1 ) {
+            vimAccountsData.config[key.split('_').join(' ')] = vimAccountsData.config[key];
+            delete vimAccountsData.config[key];
+          }
+        });
+        this.configParams = vimAccountsData.config;
         this.isLoadingResults = false;
       }, (error: ERRORDATA) => {
         this.isLoadingResults = false;
@@ -177,269 +181,4 @@ export class InfoVimComponent implements OnInit {
       }
     ];
   }
-
-  /** Openstack Config @public */
-  public showOpenstackConfig(config: CONFIG): void {
-    if (!isNullOrUndefined(config)) {
-      Object.keys(config).forEach((key: string) => {
-        if (Array.isArray(config[key])) {
-          config[key] = JSON.stringify(config[key]);
-        }
-      });
-    }
-    let location: string = config.location;
-    if (!isNullOrUndefined(location)) {
-      const locationArr: string[] = config.location.split(',');
-      if (Array.isArray(locationArr)) {
-        location = locationArr[0];
-      }
-    }
-
-    this.configParams = [
-      {
-        title: 'PAGE.VIMDETAILS.SDNCONTROLLER',
-        value: config.sdn_controller
-      },
-      {
-        title: 'PAGE.VIMDETAILS.SDNPORTMAPPING',
-        value: config.sdn_port_mapping
-      },
-      {
-        title: 'PAGE.VIMDETAILS.VIMNETWORKNAME',
-        value: config.vim_network_name
-      },
-      {
-        title: 'PAGE.VIMDETAILS.SECURITYGROUPS',
-        value: config.security_groups
-      },
-      {
-        title: 'PAGE.VIMDETAILS.AVAILABILITYZONE',
-        value: config.availabilityZone
-      },
-      {
-        title: 'PAGE.VIMDETAILS.REGIONALNAME',
-        value: config.region_name
-      },
-      {
-        title: 'PAGE.VIMDETAILS.INSECURE',
-        value: config.insecure
-      },
-      {
-        title: 'PAGE.VIMDETAILS.USEEXISTINGFLAVOURS',
-        value: config.use_existing_flavors
-      },
-      {
-        title: 'PAGE.VIMDETAILS.USEINTERNALENDPOINT',
-        value: config.use_internal_endpoint
-      },
-      {
-        title: 'PAGE.VIMDETAILS.ADDITIONALCONFIG',
-        value: config.additional_conf
-      },
-      {
-        title: 'PAGE.VIMDETAILS.APIVERSION',
-        value: config.APIversion
-      },
-      {
-        title: 'PAGE.VIMDETAILS.PROJECTDOMAINID',
-        value: config.project_domain_id
-      },
-      {
-        title: 'PAGE.VIMDETAILS.PROJECTDOMAINNAME',
-        value: config.project_domain_name
-      },
-      {
-        title: 'PAGE.VIMDETAILS.USERDOMAINID',
-        value: config.user_domain_id
-      },
-      {
-        title: 'PAGE.VIMDETAILS.USERDOMAINUSER',
-        value: config.user_domain_name
-      },
-      {
-        title: 'PAGE.VIMDETAILS.KEYPAIR',
-        value: config.keypair
-      },
-      {
-        title: 'PAGE.VIMDETAILS.DATAPLANEPHYSICALNET',
-        value: config.dataplane_physical_net
-      },
-      {
-        title: 'PAGE.VIMDETAILS.USEFLOATINGIP',
-        value: config.use_floating_ip
-      },
-      {
-        title: 'PAGE.VIMDETAILS.MICROVERSION',
-        value: config.microversion
-      },
-      {
-        title: 'PAGE.VIMDETAILS.VIMLOCATION',
-        value: location
-      }
-    ];
-  }
-
-  /** AWS Config @public */
-  public awsConfig(config: CONFIG): void {
-    this.configParams = [
-      {
-        title: 'PAGE.VIMDETAILS.SDNCONTROLLER',
-        value: config.sdn_controller
-      },
-      {
-        title: 'PAGE.VIMDETAILS.VPCCIDRBLOCK',
-        value: config.vpc_cidr_block
-      },
-      {
-        title: 'PAGE.VIMDETAILS.SDNPORTMAPPING',
-        value: config.sdn_port_mapping
-      },
-      {
-        title: 'PAGE.VIMDETAILS.SECURITYGROUPS',
-        value: config.security_groups
-      },
-      {
-        title: 'PAGE.VIMDETAILS.VIMNETWORKNAME',
-        value: config.vim_network_name
-      },
-      {
-        title: 'PAGE.VIMDETAILS.KEYPAIR',
-        value: config.keypair
-      },
-      {
-        title: 'PAGE.VIMDETAILS.REGIONALNAME',
-        value: config.region_name
-      },
-      {
-        title: 'PAGE.VIMDETAILS.FLAVORIINFO',
-        value: config.flavor_info
-      },
-      {
-        title: 'PAGE.VIMDETAILS.ADDITIONALCONFIG',
-        value: config.additional_conf
-      }
-    ];
-  }
-
-  /** Open vim and open nebula config @public */
-  public openVIMOpenNebulaConfig(config: CONFIG): void {
-    this.configParams = [
-      {
-        title: 'PAGE.VIMDETAILS.SDNCONTROLLER',
-        value: config.sdn_controller
-      },
-      {
-        title: 'PAGE.VIMDETAILS.SDNPORTMAPPING',
-        value: config.sdn_port_mapping
-      },
-      {
-        title: 'PAGE.VIMDETAILS.VIMNETWORKNAME',
-        value: config.vim_network_name
-      },
-      {
-        title: 'PAGE.VIMDETAILS.ADDITIONALCONFIG',
-        value: config.additional_conf
-      }
-    ];
-  }
-
-  /** vmware config @public */
-  public vmwareConfig(config: CONFIG): void {
-    this.configParams = [
-      {
-        title: 'PAGE.VIMDETAILS.SDNCONTROLLER',
-        value: config.sdn_controller
-      },
-      {
-        title: 'PAGE.VIMDETAILS.ORGNAME',
-        value: config.orgname
-      },
-      {
-        title: 'PAGE.VIMDETAILS.SDNPORTMAPPING',
-        value: config.sdn_port_mapping
-      },
-      {
-        title: 'PAGE.VIMDETAILS.VCENTERIP',
-        value: config.vcenter_ip
-      },
-      {
-        title: 'PAGE.VIMDETAILS.VIMNETWORKNAME',
-        value: config.vim_network_name
-      },
-      {
-        title: 'PAGE.VIMDETAILS.VCENTERPORT',
-        value: config.vcenter_port
-      },
-      {
-        title: 'PAGE.VIMDETAILS.ADMINUSERNAME',
-        value: config.admin_username
-      },
-      {
-        title: 'PAGE.VIMDETAILS.VCENTERUSER',
-        value: config.vcenter_user
-      },
-      {
-        title: 'PAGE.VIMDETAILS.ADMINPASSWORD',
-        value: config.admin_password
-      },
-      {
-        title: 'PAGE.VIMDETAILS.VCENTERPASSWORD',
-        value: config.vcenter_password
-      },
-      {
-        title: 'PAGE.VIMDETAILS.NSXMANAGER',
-        value: config.nsx_manager
-      },
-      {
-        title: 'PAGE.VIMDETAILS.VROPSSITE',
-        value: config.vrops_site
-      },
-      {
-        title: 'PAGE.VIMDETAILS.NSXUSER',
-        value: config.nsx_user
-      },
-      {
-        title: 'PAGE.VIMDETAILS.VROPSUSER',
-        value: config.vrops_user
-      },
-      {
-        title: 'PAGE.VIMDETAILS.NSXPASSWORD',
-        value: config.nsx_password
-      },
-      {
-        title: 'PAGE.VIMDETAILS.VROPSPASSWORD',
-        value: config.vrops_password
-      },
-      {
-        title: 'PAGE.VIMDETAILS.ADDITIONALCONFIG',
-        value: config.additional_conf
-      }
-    ];
-  }
-
-  /** Azure Config @public */
-  public azureConfig(config: CONFIG): void {
-    this.configParams = [
-      {
-        title: 'PAGE.VIMDETAILS.SUBSCRIPTIONID',
-        value: config.subscription_id
-      },
-      {
-        title: 'PAGE.VIMDETAILS.REGIONALNAME',
-        value: config.region_name
-      },
-      {
-        title: 'PAGE.VIMDETAILS.RESOURCEGROUP',
-        value: config.resource_group
-      },
-      {
-        title: 'PAGE.VIMDETAILS.VNETNAME',
-        value: config.vnet_name
-      },
-      {
-        title: 'PAGE.VIMDETAILS.FLAVORSPATTERN',
-        value: config.flavors_pattern
-      }
-    ];
-  }
 }
diff --git a/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.html b/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.html
index cc56017..ce7a5d1 100644
--- a/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.html
+++ b/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.html
@@ -47,9 +47,10 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i
             </div>
             <div class="col-sm-3">
                 <ng-select bindLabel="title" bindValue="value" [items]="vimType" placeholder="{{'SELECT' | translate}}"
-                    formControlName="vim_type" id="vim_type" [(ngModel)]="selectedVimType"
-                    [ngClass]="{ 'is-invalid': submitted && f.vim_type.errors }">
+                    formControlName="vim_type" id="vim_type" [(ngModel)]="selectedVimType" [addTag]="sharedService.addCustomTag"
+                    [ngClass]="{ 'is-invalid': submitted && f.vim_type.errors }" (change)="clearConfig()">
                 </ng-select>
+                <small class="text-info">{{'TYPEINFO' | translate}}</small>
             </div>
             <div class="col-sm-3">
                 <label for="description">{{'PAGE.VIMDETAILS.DESCRIPTION' | translate}}</label>
@@ -89,8 +90,6 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i
                     placeholder="{{'PAGE.VIMDETAILS.VIMUSERNAME' | translate}}" type="text" formControlName="vim_user"
                     id="vim_user" [ngClass]="{ 'is-invalid': submitted && f.vim_user.errors }">
             </div>
-        </div>
-        <div class="row form-group content-style">
             <div class="col-sm-3">
                 <label for="vim_password">{{'PAGE.VIMDETAILS.VIMPASSWORD' | translate}}*</label>
             </div>
@@ -100,6 +99,30 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i
                     [ngClass]="{ 'is-invalid': submitted && f.vim_password.errors }">
             </div>
         </div>
+        <div class="row form-group content-style">
+            <div class="col-sm-3">
+                <label for="location">{{'PAGE.VIMDETAILS.VIMLOCATION' | translate}}</label>
+            </div>
+            <div class="col-sm-3" formGroupName="config">
+                <ng-select [items]="getVIMLocation" bindLabel="label" bindValue="value"
+                    placeholder="{{'PAGE.VIMDETAILS.VIMLOCATION' | translate}}" formControlName="location" id="location"
+                    (keydown.enter)="fetchLocationLatLong($event.target.value)" (change)="locationChange($event)">
+                </ng-select>
+                <small class="text-info">{{'PAGE.VIM.LOCATIONINFO' | translate}}</small>
+            </div>
+            <div class="col-sm-3">
+                <label>{{'UPLOADCONFIG' | translate}}</label>
+            </div>
+            <div class="col-sm-3 form-group">
+                <div class="custom-file">
+                    <input [disabled]="!selectedVimType" type="file" #fileInput class="custom-file-input"
+                        (change)="filesDropped($event.target.files)" id="customFile">
+                    <label class="custom-file-label" #fileInputLabel
+                        for="customFile">{{'CHOOSEFILE' | translate}}</label>
+                </div>
+                <small class="text-info">{{'UPLOADCONFIGLABEL' | translate}}</small>
+            </div>
+        </div>
         <div class="row" [hidden]="!selectedVimType">
             <div class="col-12">
                 <button type="button" class="btn btn-block border-0 bg-light text-dark"
@@ -107,555 +130,28 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i
                     [attr.aria-expanded]="!isCollapsed">{{'PAGE.VIMDETAILS.CONFIGPARAMETERS' | translate}}</button>
             </div>
         </div>
-        <div formGroupName="vimconfig" id="configurationparameters" class="collapse mt-3" [ngbCollapse]="isCollapsed">
-            <div class="row" [hidden]="!selectedVimType">
-                <div class="col-sm-3">
-                    <label>{{'UPLOADCONFIG' | translate}}</label>
-                </div>
-                <div class="col-sm-3 form-group">
-                    <div class="custom-file">
-                        <input type="file" #fileInput class="custom-file-input"
-                            (change)="filesDropped($event.target.files)" id="customFile">
-                        <label class="custom-file-label" #fileInputLabel
-                            for="customFile">{{'CHOOSEFILE' | translate}}</label>
-                    </div>
-                </div>
-            </div>
-            <div *ngIf="selectedVimType == 'openstack'">
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="sdn_controller">{{'PAGE.VIMDETAILS.SDNCONTROLLER' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.SDNCONTROLLER' | translate}}" type="text"
-                            formControlName="sdn_controller" id="sdn_controller">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="APIversion">{{'PAGE.VIMDETAILS.APIVERSION' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.APIVERSION' | translate}}" type="text"
-                            formControlName="APIversion" id="APIversion">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="sdn_port_mapping">{{'PAGE.VIMDETAILS.SDNPORTMAPPING' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.SDNPORTMAPPING' | translate}}" type="text"
-                            formControlName="sdn_port_mapping" id="sdn_port_mapping">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="project_domain_id">{{'PAGE.VIMDETAILS.PROJECTDOMAINID' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.PROJECTDOMAINID' | translate}}" type="text"
-                            formControlName="project_domain_id" id="project_domain_id">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="vim_network_name">{{'PAGE.VIMDETAILS.VIMNETWORKNAME' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.VIMNETWORKNAME' | translate}}" type="text"
-                            formControlName="vim_network_name" id="vim_network_name">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="project_domain_name">{{'PAGE.VIMDETAILS.PROJECTDOMAINNAME' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.PROJECTDOMAINNAME' | translate}}" type="text"
-                            formControlName="project_domain_name" id="project_domain_name">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="config_vim_ype">{{'PAGE.VIMDETAILS.VIMTYPE' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.VIM_TYPE' | translate}}" type="text"
-                            formControlName="config_vim_ype" id="config_vim_ype">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="user_domain_id">{{'PAGE.VIMDETAILS.USERDOMAINID' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.USERDOMAINID' | translate}}" type="text"
-                            formControlName="user_domain_id" id="user_domain_id">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="security_groups">{{'PAGE.VIMDETAILS.SECURITYGROUPS' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.SECURITYGROUPS' | translate}}" type="text"
-                            formControlName="security_groups" id="security_groups">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="user_domain_name">{{'PAGE.VIMDETAILS.USERDOMAINUSER' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.USERDOMAINUSER' | translate}}" type="text"
-                            formControlName="user_domain_name" id="user_domain_name">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="availabilityZone">{{'PAGE.VIMDETAILS.AVAILABILITYZONE' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.AVAILABILITYZONE' | translate}}" type="text"
-                            formControlName="availabilityZone" id="availabilityZone">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="keypair">{{'PAGE.VIMDETAILS.KEYPAIR' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.KEYPAIR' | translate}}" type="text"
-                            formControlName="keypair" id="keypair">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="region_name">{{'PAGE.VIMDETAILS.REGIONALNAME' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.REGIONALNAME' | translate}}" type="text"
-                            formControlName="region_name" id="region_name">
-                    </div>
-                    <div class="col-sm-3">
-                        <label
-                            for="dataplane_physical_net">{{'PAGE.VIMDETAILS.DATAPLANEPHYSICALNET' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.DATAPLANEPHYSICALNET' | translate}}" type="text"
-                            formControlName="dataplane_physical_net" id="dataplane_physical_net">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="insecure">{{'PAGE.VIMDETAILS.INSECURE' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <ng-select [items]="boolValue" bindLabel="name" bindValue="id"
-                            placeholder="{{'PAGE.VIMDETAILS.INSECURE' | translate}}" formControlName="insecure"
-                            id="insecure">
-                        </ng-select>
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="use_floating_ip">{{'PAGE.VIMDETAILS.USEFLOATINGIP' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <ng-select [items]="boolValue" bindLabel="name" bindValue="id" id="use_floating_ip"
-                            placeholder="{{'PAGE.VIMDETAILS.USEFLOATINGIP' | translate}}"
-                            formControlName="use_floating_ip">
-                        </ng-select>
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="use_internal_endpoint">{{'PAGE.VIMDETAILS.USEINTERNALENDPOINT' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <ng-select [items]="boolValue" bindLabel="name" bindValue="id"
-                            placeholder="{{'PAGE.VIMDETAILS.USEINTERNALENDPOINT' | translate}}"
-                            formControlName="use_internal_endpoint" id="use_internal_endpoint">
-                        </ng-select>
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="microversion">{{'PAGE.VIMDETAILS.MICROVERSION' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.MICROVERSION' | translate}}" type="text"
-                            formControlName="microversion" id="microversion">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="additional_conf">{{'PAGE.VIMDETAILS.ADDITIONALCONFIG' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.ADDITIONALCONFIGPLACEHOLDER' | translate}}" type="text"
-                            formControlName="additional_conf" id="additional_conf">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="use_existing_flavors">{{'PAGE.VIMDETAILS.USEEXISTINGFLAVOURS' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <ng-select [items]="boolValue" bindLabel="name" bindValue="id"
-                            placeholder="{{'PAGE.VIMDETAILS.USEEXISTINGFLAVOURS' | translate}}"
-                            formControlName="use_existing_flavors" id="use_existing_flavors">
-                        </ng-select>
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="location">{{'PAGE.VIMDETAILS.VIMLOCATION' | translate}}</label>
-                    </div>
-                    <div class="col-sm-9">
-                        <ng-select [items]="getVIMLocation" bindLabel="label" bindValue="value"
-                            placeholder="{{'PAGE.VIMDETAILS.VIMLOCATION' | translate}}" formControlName="location"
-                            id="location" (keydown.enter)="fetchLocationLatLong($event.target.value)">
-                        </ng-select>
-                        <small>{{'PAGE.VIM.LOACTIONINFO' | translate}}</small>
-                    </div>
-                </div>
-            </div>
-            <div *ngIf="selectedVimType == 'openvim' || selectedVimType == 'opennebula'">
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="sdn_controller">{{'PAGE.VIMDETAILS.SDNCONTROLLER' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.SDNCONTROLLER' | translate}}" type="text"
-                            formControlName="sdn_controller" id="sdn_controller">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="sdn_port_mapping">{{'PAGE.VIMDETAILS.SDNPORTMAPPING' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.SDNPORTMAPPING' | translate}}" type="text"
-                            formControlName="sdn_port_mapping" id="sdn_port_mapping">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="vim_network_name">{{'PAGE.VIMDETAILS.VIMNETWORKNAME' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.VIMNETWORKNAME' | translate}}" type="text"
-                            formControlName="vim_network_name" id="vim_network_name">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="additional_conf">{{'PAGE.VIMDETAILS.ADDITIONALCONFIG' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.ADDITIONALCONFIGPLACEHOLDER' | translate}}" type="text"
-                            formControlName="additional_conf" id="additional_conf">
-                    </div>
-                </div>
-            </div>
-            <div *ngIf="selectedVimType == 'vmware'">
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="sdn_controller">{{'PAGE.VIMDETAILS.SDNCONTROLLER' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.SDNCONTROLLER' | translate}}" type="text"
-                            formControlName="sdn_controller" id="sdn_controller">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="orgname">{{'PAGE.VIMDETAILS.ORGNAME' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.ORGNAME' | translate}}" type="text"
-                            formControlName="orgname" id="orgname">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="sdn_port_mapping">{{'PAGE.VIMDETAILS.SDNPORTMAPPING' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.SDNPORTMAPPING' | translate}}" type="text"
-                            formControlName="sdn_port_mapping" id="sdn_port_mapping">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="vcenter_ip">{{'PAGE.VIMDETAILS.VCENTERIP' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.VCENTERIP' | translate}}" type="text"
-                            formControlName="vcenter_ip" id="vcenter_ip">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="vim_network_name">{{'PAGE.VIMDETAILS.VIMNETWORKNAME' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.VIMNETWORKNAME' | translate}}" type="text"
-                            formControlName="vim_network_name" id="vim_network_name">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="vcenter_port">{{'PAGE.VIMDETAILS.VCENTERPORT' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.VCENTERPORT' | translate}}" type="text"
-                            formControlName="vcenter_port" id="vcenter_port">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="admin_username">{{'PAGE.VIMDETAILS.ADMINUSERNAME' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.ADMINUSERNAME' | translate}}" type="text"
-                            formControlName="admin_username" id="admin_username">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="vcenter_user">{{'PAGE.VIMDETAILS.VCENTERUSER' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.VCENTERUSER' | translate}}" type="text"
-                            formControlName="vcenter_user" id="vcenter_user">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="admin_password">{{'PAGE.VIMDETAILS.ADMINPASSWORD' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.ADMINPASSWORD' | translate}}" type="text"
-                            formControlName="admin_password" id="admin_password">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="vcenter_password">{{'PAGE.VIMDETAILS.VCENTERPASSWORD' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.VCENTERPASSWORD' | translate}}" type="text"
-                            formControlName="vcenter_password" id="vcenter_password">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="nsx_manager">{{'PAGE.VIMDETAILS.NSXMANAGER' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.NSXMANAGER' | translate}}" type="text"
-                            formControlName="nsx_manager" id="nsx_manager">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="vrops_site">{{'PAGE.VIMDETAILS.VROPSSITE' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.VROPSSITE' | translate}}" type="text"
-                            formControlName="vrops_site" id="vrops_site">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="nsx_user">{{'PAGE.VIMDETAILS.NSXUSER' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.NSXUSER' | translate}}" type="text"
-                            formControlName="nsx_user" id="nsx_user">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="vrops_user">{{'PAGE.VIMDETAILS.VROPSUSER' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.VROPSUSER' | translate}}" type="text"
-                            formControlName="vrops_user" id="vrops_user">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="nsx_password">{{'PAGE.VIMDETAILS.NSXPASSWORD' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.NSXPASSWORD' | translate}}" type="text"
-                            formControlName="nsx_password" id="nsx_password">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="vrops_password">{{'PAGE.VIMDETAILS.VROPSPASSWORD' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.VROPSPASSWORD' | translate}}" type="text"
-                            formControlName="vrops_password" id="vrops_password">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="additional_conf">{{'PAGE.VIMDETAILS.ADDITIONALCONFIG' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.ADDITIONALCONFIGPLACEHOLDER' | translate}}" type="text"
-                            formControlName="additional_conf" id="additional_conf">
-                    </div>
-                </div>
-            </div>
-            <div *ngIf="selectedVimType == 'aws'">
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="sdn_controller">{{'PAGE.VIMDETAILS.SDNCONTROLLER' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.SDNCONTROLLER' | translate}}" type="text"
-                            formControlName="sdn_controller" id="sdn_controller">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="vpc_cidr_block">{{'PAGE.VIMDETAILS.VPCCIDRBLOCK' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.VPCCIDRBLOCK' | translate}}" type="text"
-                            formControlName="vpc_cidr_block" id="vpc_cidr_block">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="sdn_port_mapping">{{'PAGE.VIMDETAILS.SDNPORTMAPPING' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.SDNPORTMAPPING' | translate}}" type="text"
-                            formControlName="sdn_port_mapping" id="sdn_port_mapping">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="security_groups">{{'PAGE.VIMDETAILS.SECURITYGROUPS' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.SECURITYGROUPS' | translate}}" type="text"
-                            formControlName="security_groups" id="security_groups">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="vim_network_name">{{'PAGE.VIMDETAILS.VIMNETWORKNAME' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.VIMNETWORKNAME' | translate}}" type="text"
-                            formControlName="vim_network_name" id="vim_network_name">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="keypair">{{'PAGE.VIMDETAILS.KEYPAIR' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.KEYPAIR' | translate}}" type="text"
-                            formControlName="keypair" id="keypair">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="region_name">{{'PAGE.VIMDETAILS.REGIONALNAME' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.REGIONALNAME' | translate}}" type="text"
-                            formControlName="region_name" id="region_name">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="flavor_info">{{'PAGE.VIMDETAILS.FLAVORIINFO' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.FLAVORIINFO' | translate}}" type="text"
-                            formControlName="flavor_info" id="flavor_info">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="additional_conf">{{'PAGE.VIMDETAILS.ADDITIONALCONFIG' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.ADDITIONALCONFIGPLACEHOLDER' | translate}}" type="text"
-                            formControlName="additional_conf" id="additional_conf">
-                    </div>
-                </div>
-            </div>
-            <div *ngIf="selectedVimType == 'azure'">
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="subscription_id">{{'PAGE.VIMDETAILS.SUBSCRIPTIONID' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.SUBSCRIPTIONID' | translate}}" type="text"
-                            formControlName="subscription_id" id="subscription_id">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="region_name">{{'PAGE.VIMDETAILS.REGIONALNAME' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.REGIONALNAME' | translate}}" type="text"
-                            formControlName="region_name" id="region_name">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="resource_group">{{'PAGE.VIMDETAILS.RESOURCEGROUP' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.RESOURCEGROUP' | translate}}" type="text"
-                            formControlName="resource_group" id="resource_group">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="vnet_name">{{'PAGE.VIMDETAILS.VNETNAME' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.VNETNAME' | translate}}" type="text"
-                            formControlName="vnet_name" id="vnet_name">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="flavors_pattern">{{'PAGE.VIMDETAILS.FLAVORSPATTERN' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.FLAVORSPATTERN' | translate}}" type="text"
-                            formControlName="flavors_pattern" id="flavors_pattern">
-                    </div>
+        <div id="configurationparameters" class="row collapse mt-3" [ngbCollapse]="isCollapsed">
+            <div class="col-sm-12">
+                <div class="ngx-codemirror new-vim" [hidden]="!selectedVimType">
+                    <div class="form-group">
+                        <button type="button" class="btn btn-warning btn-sm mr-3" (click)="loadSampleConfig()">
+                            <i class="fa fa-clone" aria-hidden="true"></i>
+                            {{'PAGE.VIMDETAILS.LOADSAMPLECONFIG' | translate}}</button>
+                        <button type="button" class="btn btn-danger btn-sm" (click)="clearConfig()">
+                            <i class="fa fa-times-circle" aria-hidden="true"></i>
+                            {{'PAGE.VIMDETAILS.CLEARCONFIG' | translate}}</button>
+                    </div>
+                    <ngx-codemirror [options]="options" [ngModel]="defaults[mode]" [autoFocus]="true"
+                        (ngModelChange)="handleChange($event)" [ngModelOptions]="{standalone: true}">
+                    </ngx-codemirror>
                 </div>
             </div>
         </div>
-    </div>
-    <div class="modal-footer">
-        <button type="button" (click)="onVimAccountBack()"
-            class="btn btn-danger">{{'PAGE.VIMDETAILS.BACKTOVIMACCOUNTS' | translate}}</button>
-        <button type="submit" class="btn btn-primary">{{'CREATE' | translate}}</button>
+        <div class="modal-footer border-0">
+            <button type="button" (click)="onVimAccountBack()"
+                class="btn btn-danger">{{'PAGE.VIMDETAILS.BACKTOVIMACCOUNTS' | translate}}</button>
+            <button type="submit" class="btn btn-primary">{{'CREATE' | translate}}</button>
+        </div>
     </div>
 </form>
 <app-loader [waitingMessage]="message" *ngIf="isLocationLoadingResults"></app-loader>
\ No newline at end of file
diff --git a/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.ts b/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.ts
index bc6fd1e..0c2b3d6 100644
--- a/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.ts
+++ b/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.ts
@@ -24,13 +24,32 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { NotifierService } from 'angular-notifier';
-import { APIURLHEADER, ERRORDATA, TYPESECTION, VIM_TYPES } from 'CommonModel';
+import 'codemirror/addon/dialog/dialog';
+import 'codemirror/addon/display/autorefresh';
+import 'codemirror/addon/display/fullscreen';
+import 'codemirror/addon/edit/closebrackets';
+import 'codemirror/addon/edit/matchbrackets';
+import 'codemirror/addon/fold/brace-fold';
+import 'codemirror/addon/fold/foldcode';
+import 'codemirror/addon/fold/foldgutter';
+import 'codemirror/addon/search/search';
+import 'codemirror/addon/search/searchcursor';
+import 'codemirror/keymap/sublime';
+import 'codemirror/lib/codemirror';
+import 'codemirror/mode/javascript/javascript';
+import 'codemirror/mode/markdown/markdown';
+import 'codemirror/mode/yaml/yaml';
+import {
+  APIURLHEADER, ERRORDATA, TYPEAWS, TYPEAZURE, TYPEOPENSTACK, TYPEOPENVIMNEBULA, TYPEOTERS,
+  TYPESECTION, TYPEVMWARE, VIM_TYPES
+} from 'CommonModel';
 import { environment } from 'environment';
 import * as jsyaml from 'js-yaml';
 import { RestService } from 'RestService';
 import { SharedService } from 'SharedService';
 import { isNullOrUndefined } from 'util';
 import { FEATURES, VIMLOCATION, VIMLOCATIONDATA } from 'VimAccountModel';
+import { VimAccountDetails, VIMData } from 'VimAccountModel';
 
 /**
  * Creating component
@@ -79,12 +98,48 @@ export class NewVimaccountComponent implements OnInit {
   /** set the latitude value of the selected place @public */
   public setLat: number;
 
+  /** Handle the formate Change @public */
+  public defaults: {} = {
+    'text/x-yaml': ''
+  };
+
+  /** To Set Mode @public */
+  public mode: string = 'text/x-yaml';
+
+  /** To Set Mode @public */
+  public modeDefault: string = 'yaml';
+
+  /** options @public */
+  public options: {} = {
+    mode: this.modeDefault,
+    showCursorWhenSelecting: true,
+    autofocus: true,
+    autoRefresh: true,
+    lineNumbers: true,
+    lineWrapping: true,
+    foldGutter: true,
+    gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
+    autoCloseBrackets: true,
+    matchBrackets: true,
+    theme: 'neat',
+    keyMap: 'sublime'
+  };
+
+  /** Data @public */
+  public data: string = '';
+
+  /** Controls the File Type List form @public */
+  public fileTypes: { value: string; viewValue: string; }[] = [];
+
   /** Element ref for fileInput @public */
   @ViewChild('fileInput', { static: true }) public fileInput: ElementRef;
 
   /** Element ref for fileInput @public */
   @ViewChild('fileInputLabel', { static: true }) public fileInputLabel: ElementRef;
 
+  /** Contains all methods related to shared @private */
+  public sharedService: SharedService;
+
   /** Instance of the rest service @private */
   private restService: RestService;
 
@@ -103,11 +158,11 @@ export class NewVimaccountComponent implements OnInit {
   /** Contains tranlsate instance @private */
   private translateService: TranslateService;
 
-  /** Contains all methods related to shared @private */
-  private sharedService: SharedService;
+  /** VIM Details @private */
+  private vimDetail: VimAccountDetails[];
 
-  /** Contains configuration key variables @private */
-  private configKeys: string[] = [];
+  /** convenience getter for easy access to form fields */
+  get f(): FormGroup['controls'] { return this.vimNewAccountForm.controls; }
 
   constructor(injector: Injector) {
     this.injector = injector;
@@ -128,63 +183,22 @@ export class NewVimaccountComponent implements OnInit {
       schema_type: [''],
       vim_user: [null, Validators.required],
       vim_password: [null, Validators.required],
-      vimconfig: this.paramsBuilder()
+      config: this.paramsBuilder()
     });
   }
 
   /** Generate params for config @public */
   public paramsBuilder(): FormGroup {
     return this.formBuilder.group({
-      use_existing_flavors: [null],
-      location: [null],
-      sdn_controller: [null],
-      APIversion: [null],
-      sdn_port_mapping: [null],
-      project_domain_id: [null],
-      vim_network_name: [null],
-      project_domain_name: [null],
-      config_vim_ype: [null],
-      user_domain_id: [null],
-      security_groups: [null],
-      user_domain_name: [null],
-      availabilityZone: [null],
-      keypair: [null],
-      region_name: [null],
-      dataplane_physical_net: [null],
-      insecure: [null],
-      use_floating_ip: [null],
-      microversion: [null],
-      use_internal_endpoint: [null],
-      additional_conf: [null],
-      orgname: [null],
-      vcenter_ip: [null],
-      vcenter_port: [null],
-      admin_username: [null],
-      vcenter_user: [null],
-      admin_password: [null],
-      vcenter_password: [null],
-      nsx_manager: [null],
-      vrops_site: [null],
-      nsx_user: [null],
-      vrops_user: [null],
-      nsx_password: [null],
-      vrops_password: [null],
-      vpc_cidr_block: [null],
-      flavor_info: [null],
-      subscription_id: [null],
-      resource_group: [null],
-      vnet_name: [null],
-      flavors_pattern: [null]
+      location: [null]
     });
   }
 
-  /** convenience getter for easy access to form fields */
-  get f(): FormGroup['controls'] { return this.vimNewAccountForm.controls; }
-
   /**
    * Lifecyle Hooks the trigger before component is instantiate
    */
   public ngOnInit(): void {
+    this.fileTypes = [{ value: 'text/x-yaml', viewValue: 'yaml' }];
     this.vimType = VIM_TYPES;
     this.boolValue = [
       { id: '', name: 'None' },
@@ -196,6 +210,7 @@ export class NewVimaccountComponent implements OnInit {
       'Content-Type': 'application/json',
       'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0'
     });
+    this.getVIMDetails();
   }
 
   /** On modal submit newVimAccountSubmit will called @public */
@@ -203,18 +218,25 @@ export class NewVimaccountComponent implements OnInit {
     this.submitted = true;
     if (!this.vimNewAccountForm.invalid) {
       this.isLocationLoadingResults = true;
-      this.configKeys.forEach((key: string) => {
-        this.vimNewAccountForm.controls.vimconfig.get(key).setValue(JSON.parse(this.vimNewAccountForm.controls.vimconfig.get(key).value));
-      });
-      this.sharedService.cleanForm(this.vimNewAccountForm);
-      Object.keys(this.vimNewAccountForm.value.vimconfig).forEach((key: string) => {
-        if (this.vimNewAccountForm.value.vimconfig[key] === undefined || this.vimNewAccountForm.value.vimconfig[key] === null ||
-          this.vimNewAccountForm.value.vimconfig[key] === '') {
-          delete this.vimNewAccountForm.value.vimconfig[key];
+      this.sharedService.cleanForm(this.vimNewAccountForm, 'vim');
+      if (!isNullOrUndefined(this.data) && this.data !== '') {
+        Object.assign(this.vimNewAccountForm.value.config, jsyaml.load(this.data.toString(), { json: true }));
+      } else {
+        Object.keys(this.vimNewAccountForm.value.config).forEach((res: string) => {
+          if (res !== 'location') {
+            delete this.vimNewAccountForm.value.config[res];
+          }
+        });
+      }
+
+      if (isNullOrUndefined(this.vimNewAccountForm.value.config.location)) {
+        delete this.vimNewAccountForm.value.config.location;
+      }
+      Object.keys(this.vimNewAccountForm.value.config).forEach((res: string) => {
+        if (isNullOrUndefined(this.vimNewAccountForm.value.config[res]) || this.vimNewAccountForm.value.config[res] === '') {
+          delete this.vimNewAccountForm.value.config[res];
         }
       });
-      this.vimNewAccountForm.value.config = this.vimNewAccountForm.value.vimconfig;
-      delete this.vimNewAccountForm.value.vimconfig;
       const apiURLHeader: APIURLHEADER = {
         url: environment.VIMACCOUNTS_URL,
         httpOptions: { headers: this.headers }
@@ -228,16 +250,17 @@ export class NewVimaccountComponent implements OnInit {
           });
           // Post the New Vim data and reflect in the VIM Details Page.
         }, (error: ERRORDATA) => {
-          this.configKeys.forEach((key: string) => {
-            this.vimNewAccountForm.controls.vimconfig.get(key)
-              .setValue(JSON.stringify(this.vimNewAccountForm.controls.vimconfig.get(key).value));
-          });
           this.restService.handleError(error, 'post');
           this.isLocationLoadingResults = false;
         });
     }
   }
 
+  /** HandleChange function @public */
+  public handleChange($event: string): void {
+    this.data = $event;
+  }
+
   /** Routing to VIM Account Details Page @public */
   public onVimAccountBack(): void {
     this.router.navigate(['vim/details']).catch(() => {
@@ -287,22 +310,11 @@ export class NewVimaccountComponent implements OnInit {
 
   /** Drag and drop feature and fetchind the details of files  @private */
   public filesDropped(files: FileList): void {
-    this.configKeys = [];
     if (files && files.length === 1) {
       this.sharedService.getFileString(files, 'yaml').then((fileContent: string): void => {
         const getJson: string = jsyaml.load(fileContent, { json: true });
-        Object.keys(getJson).forEach((item: string) => {
-          if (!isNullOrUndefined(this.vimNewAccountForm.controls.vimconfig.get(item))) {
-            if (typeof getJson[item] === 'object') {
-              // tslint:disable-next-line: no-backbone-get-set-outside-model
-              this.vimNewAccountForm.controls.vimconfig.get(item).setValue(JSON.stringify(getJson[item]));
-              this.configKeys.push(item);
-            } else {
-              // tslint:disable-next-line: no-backbone-get-set-outside-model
-              this.vimNewAccountForm.controls.vimconfig.get(item).setValue(getJson[item]);
-            }
-          }
-        });
+        this.defaults['text/x-yaml'] = fileContent;
+        this.data = fileContent;
       }).catch((err: string): void => {
         if (err === 'typeError') {
           this.notifierService.notify('error', this.translateService.instant('YAMLFILETYPEERRROR'));
@@ -318,4 +330,60 @@ export class NewVimaccountComponent implements OnInit {
     this.fileInputLabel.nativeElement.innerText = files[0].name;
     this.fileInput.nativeElement.value = null;
   }
+
+  /** Location chnage event in select box @public */
+  public locationChange(data: { value: string }): void {
+    this.vimDetail.forEach((vimAccountData: VimAccountDetails) => {
+      if (!isNullOrUndefined(vimAccountData.config.location) && !isNullOrUndefined(data)) {
+        if (vimAccountData.config.location === data.value) {
+          this.notifierService.notify('error', this.translateService.instant('PAGE.VIMDETAILS.LOCATIONERROR'));
+          // tslint:disable-next-line: no-backbone-get-set-outside-model
+          this.vimNewAccountForm.controls.config.get('location').setValue(null);
+        }
+      }
+    });
+  }
+
+  /** Load sample config based on VIM type @public */
+  public loadSampleConfig(): void {
+    this.clearConfig();
+    if (this.selectedVimType === 'openstack') {
+      this.defaults['text/x-yaml'] = jsyaml.dump(TYPEOPENSTACK);
+      this.data = JSON.stringify(TYPEOPENSTACK, null, '\t');
+    } else if (this.selectedVimType === 'aws') {
+      this.defaults['text/x-yaml'] = jsyaml.dump(TYPEAWS);
+      this.data = JSON.stringify(TYPEAWS, null, '\t');
+    } else if (this.selectedVimType === 'vmware') {
+      this.defaults['text/x-yaml'] = jsyaml.dump(TYPEVMWARE);
+      this.data = JSON.stringify(TYPEVMWARE, null, '\t');
+    } else if (this.selectedVimType === 'openvim' || this.selectedVimType === 'opennebula') {
+      this.defaults['text/x-yaml'] = jsyaml.dump(TYPEOPENVIMNEBULA);
+      this.data = JSON.stringify(TYPEOPENVIMNEBULA, null, '\t');
+    } else if (this.selectedVimType === 'azure' || this.selectedVimType === 'opennebula') {
+      this.defaults['text/x-yaml'] = jsyaml.dump(TYPEAZURE);
+      this.data = JSON.stringify(TYPEAZURE, null, '\t');
+    } else {
+      this.defaults['text/x-yaml'] = jsyaml.dump(TYPEOTERS);
+      this.data = JSON.stringify(TYPEOTERS, null, '\t');
+    }
+  }
+
+  /** Clear config parameters @public */
+  public clearConfig(): void {
+    this.defaults['text/x-yaml'] = '';
+    this.data = '';
+    this.fileInput.nativeElement.value = null;
+  }
+
+  /** Method to get VIM details @private */
+  private getVIMDetails(): void {
+    this.isLocationLoadingResults = true;
+    this.restService.getResource(environment.VIMACCOUNTS_URL).subscribe((vimAccountsData: VimAccountDetails[]) => {
+      this.vimDetail = vimAccountsData;
+      this.isLocationLoadingResults = false;
+    }, (error: ERRORDATA) => {
+      this.restService.handleError(error, 'get');
+      this.isLocationLoadingResults = false;
+    });
+  }
 }
diff --git a/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.ts b/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.ts
index 71455f5..2ebcea6 100644
--- a/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.ts
+++ b/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.ts
@@ -309,7 +309,7 @@ export class VimAccountDetailsComponent implements OnInit {
             this.nsData = [];
             this.restService.getResource(environment.NSDINSTANCES_URL).subscribe((nsdInstancesData: NSInstanceDetails[]) => {
                 const nsRunningInstancesData: NSInstanceDetails[] = nsdInstancesData.filter((instancesData: NSInstanceDetails) =>
-                instancesData['operational-status'] === this.nsinstancesoperationalStateRunning);
+                    instancesData['operational-status'] === this.nsinstancesoperationalStateRunning);
                 this.nsData = nsRunningInstancesData;
                 resolve(true);
             }, (error: ERRORDATA) => {
@@ -331,7 +331,8 @@ export class VimAccountDetailsComponent implements OnInit {
             }),
             view: new View({
                 center: fromLonLat([CONSTANTNUMBER.osmapviewlong, CONSTANTNUMBER.osmapviewlat]),
-                zoom: 3
+                zoom: 3,
+                minZoom: 1.5
             })
         });
     }
diff --git a/src/app/wim-accounts/new-wim-account/NewWIMAccountComponent.html b/src/app/wim-accounts/new-wim-account/NewWIMAccountComponent.html
index a97107f..925a5a2 100644
--- a/src/app/wim-accounts/new-wim-account/NewWIMAccountComponent.html
+++ b/src/app/wim-accounts/new-wim-account/NewWIMAccountComponent.html
@@ -36,9 +36,10 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i
             <label class="col-sm-4 col-form-label" for="wim_type">{{'TYPE' | translate}}*</label>
             <div class="col-sm-8">
                 <ng-select bindLabel="title" bindValue="value" [items]="wimType" placeholder="{{'SELECT' | translate}}"
-                    formControlName="wim_type" id="wim_type" [(ngModel)]="wimTypeMod"
+                    formControlName="wim_type" id="wim_type" [(ngModel)]="wimTypeMod" [addTag]="sharedService.addCustomTag"
                     [ngClass]="{ 'is-invalid': submitted && f.wim_type.errors }" required>
                 </ng-select>
+                <small class="text-info">{{'TYPEINFO' | translate}}</small>
             </div>
         </div>
         <div class="form-group row">
diff --git a/src/app/wim-accounts/new-wim-account/NewWIMAccountComponent.ts b/src/app/wim-accounts/new-wim-account/NewWIMAccountComponent.ts
index 7587b58..5b8e29a 100644
--- a/src/app/wim-accounts/new-wim-account/NewWIMAccountComponent.ts
+++ b/src/app/wim-accounts/new-wim-account/NewWIMAccountComponent.ts
@@ -71,6 +71,9 @@ export class NewWIMAccountComponent implements OnInit {
   /** Element ref for fileInputConfig @public */
   @ViewChild('fileInputConfigLabel', { static: true }) public fileInputConfigLabel: ElementRef;
 
+  /** Contains all methods related to shared @private */
+  public sharedService: SharedService;
+
   /** Instance of the rest service @private */
   private restService: RestService;
 
@@ -86,8 +89,8 @@ export class NewWIMAccountComponent implements OnInit {
   /** Contains tranlsate instance @private */
   private translateService: TranslateService;
 
-  /** Contains all methods related to shared @private */
-  private sharedService: SharedService;
+  /** convenience getter for easy access to form fields */
+  get f(): FormGroup['controls'] { return this.wimNewAccountForm.controls; }
 
   constructor(injector: Injector) {
     this.injector = injector;
@@ -110,9 +113,6 @@ export class NewWIMAccountComponent implements OnInit {
     });
   }
 
-  /** convenience getter for easy access to form fields */
-  get f(): FormGroup['controls'] { return this.wimNewAccountForm.controls; }
-
   /**
    * Lifecyle Hooks the trigger before component is instantiate
    */
diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
index 6c80bf8..992d48a 100644
--- a/src/assets/i18n/de.json
+++ b/src/assets/i18n/de.json
@@ -144,6 +144,8 @@
     "YAMLCONFIG": "Yaml Konfig",
     "CHOOSEFILE": "Datei wählen",
     "INVALIDCONFIG": "Ungültige Konfiguration",
+    "TYPEINFO": "Um einen neuen TYPW hinzuzufügen, geben Sie oben die Eingabe ein",
+    "UPLOADCONFIGLABEL": "Bitte laden Sie eine Datei im .yaml- oder .yml-Format hoch",
     "PAGE": {
         "DASHBOARD": {
             "DASHBOARD": "Instrumententafel",
@@ -190,7 +192,7 @@
         },
         "VIM": {
             "CREATEDSUCCESSFULLY": "VIM erfolgreich erstellt",
-            "LOACTIONINFO": "Geben Sie den Standortnamen ein und klicken Sie auf die Eingabetaste, um den Standort aus der Liste auszuwählen"
+            "LOCATIONINFO": "Geben Sie den Standortnamen ein und klicken Sie auf die Eingabetaste"
         },
         "VIMDETAILS": {
             "NEWVIM": "Nieuwe VIM",
@@ -204,51 +206,13 @@
             "SCHEMATYPE": "Schematyp",
             "SCHEMAVERSION": "Schema-Version",
             "CONFIGPARAMETERS": "KONFIG-PARAMETER",
-            "SDNCONTROLLER": "SDN-Controller",
-            "SDNPORTMAPPING": "SDN-Port-Zuordnung",
-            "VIMNETWORKNAME": "VIM-Netzwerkname",
-            "SECURITYGROUPS": "Sicherheitsgruppen",
-            "AVAILABILITYZONE": "Verfügbarkeitszone",
-            "REGIONALNAME": "Name der Region",
-            "INSECURE": "Unsicher",
-            "USEEXISTINGFLAVOURS": "Verwenden Sie vorhandene Aromen",
-            "USEINTERNALENDPOINT": "Verwenden Sie den internen Endpunkt",
-            "APIVERSION": "API-Version",
-            "PROJECTDOMAINID": "Projektdomänen-ID",
-            "PROJECTDOMAINNAME": "Projektdomänenname",
-            "USERDOMAINID": "Benutzer-Domain-ID",
-            "USERDOMAINUSER": "Benutzer-Domainname",
-            "KEYPAIR": "Schlüsselpaar",
-            "DATAPLANEPHYSICALNET": "Dataplane physikalisches Netz",
-            "USEFLOATINGIP": "Verwenden Sie Floating IP",
-            "DATAPLANENETVLANRANGE": "Dataplane Net VLAN-Bereich",
-            "MICROVERSION": "Mikroversion",
-            "BACKTOVIMACCOUNTS": "Zurück zu VimAccounts",
-            "VIMPASSWORD": "VIM-Passwort",
-            "ADDITIONALCONFIG": "Zusätzliche Konfiguration",
-            "ADDITIONALCONFIGPLACEHOLDER": "{'key1':[...],'key2':{},'key3':''}",
             "NEWVIMACCOUNT": "Neues VIM-Konto",
-            "ORGNAME": "Orgname",
-            "VCENTERIP": "Vcenter ip",
-            "VCENTERPORT": "Vcenter-Anschluss",
-            "ADMINUSERNAME": "Admin-Benutzername",
-            "VCENTERUSER": "Vcenter-Benutzer",
-            "ADMINPASSWORD": "Administrator-Passwort",
-            "VCENTERPASSWORD": "Vcenter Passwort",
-            "NSXMANAGER": "Nsx Manager",
-            "VROPSSITE": "Vrops Seite",
-            "NSXUSER": "Nsx Benutzer",
-            "VROPSUSER": "Vrops Benutzer",
-            "NSXPASSWORD": "Nsx Passwort",
-            "VROPSPASSWORD": "Vrops Passwort",
-            "VPCCIDRBLOCK": "VPC-CIDR-Block",
-            "FLAVORIINFO": "Geschmacksinfo",
-            "VIM_TYPE": "VIM-Typ",
+            "VIMPASSWORD": "VIM-Passwort",
             "VIMLOCATION": "VIM-Speicherort",
-            "SUBSCRIPTIONID": "Abonnement-ID",
-            "RESOURCEGROUP": "Ressourcengruppe",
-            "VNETNAME": "VNet Name",
-            "FLAVORSPATTERN": "Geschmacksmuster"
+            "BACKTOVIMACCOUNTS": "Zurück zu VimAccounts",
+            "LOCATIONERROR": "Das Datencenter ist bereits am ausgewählten Speicherort verfügbar",
+            "LOADSAMPLECONFIG": "Beispielkonfiguration laden",
+            "CLEARCONFIG": "Konfiguration löschen"
         },
         "WIMACCOUNTS": {
             "CREATEDSUCCESSFULLY": "WIM erfolgreich erstellt",
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index d22cbae..44d452a 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -144,6 +144,8 @@
     "YAMLCONFIG": "Yaml Config",
     "CHOOSEFILE": "Choose File",
     "INVALIDCONFIG": "Invalid configuration",
+    "TYPEINFO": "To add a new TYPE, Please enter input above",
+    "UPLOADCONFIGLABEL": "Please upload file with .yaml or .yml format",
     "PAGE": {
         "DASHBOARD": {
             "DASHBOARD": "Dashboard",
@@ -190,7 +192,7 @@
         },
         "VIM": {
             "CREATEDSUCCESSFULLY": "VIM Created Successfully",
-            "LOACTIONINFO": "Type the location name and click enter button to select the location from the list"
+            "LOCATIONINFO": "Type the location name and click enter"
         },
         "VIMDETAILS": {
             "NEWVIM": "New VIM",
@@ -204,51 +206,13 @@
             "SCHEMATYPE": "Schema Type",
             "SCHEMAVERSION": "Schema Version",
             "CONFIGPARAMETERS": "CONFIG PARAMETERS",
-            "SDNCONTROLLER": "SDN Controller",
-            "SDNPORTMAPPING": "SDN Port Mapping",
-            "VIMNETWORKNAME": "VIM Network Name",
-            "SECURITYGROUPS": "Security Groups",
-            "AVAILABILITYZONE": "Availability Zone",
-            "REGIONALNAME": "Region Name",
-            "INSECURE": "Insecure",
-            "USEEXISTINGFLAVOURS": "Use existing flavors",
-            "USEINTERNALENDPOINT": "Use internal endpoint",
-            "APIVERSION": "API version",
-            "PROJECTDOMAINID": "Project domain id",
-            "PROJECTDOMAINNAME": "Project domain name",
-            "USERDOMAINID": "User domain id",
-            "USERDOMAINUSER": "User domain name",
-            "KEYPAIR": "Keypair",
-            "DATAPLANEPHYSICALNET": "Dataplane physical net",
-            "USEFLOATINGIP": "Use floating ip",
-            "DATAPLANENETVLANRANGE": "Dataplane net vlan range",
-            "MICROVERSION": "Microversion",
-            "BACKTOVIMACCOUNTS": "Back to VimAccounts",
-            "VIMPASSWORD": "VIM Password",
-            "ADDITIONALCONFIG": "Additional configuration",
-            "ADDITIONALCONFIGPLACEHOLDER": "{'key1':[...],'key2':{},'key3':''}",
             "NEWVIMACCOUNT": "New VIM Account",
-            "ORGNAME": "Orgname",
-            "VCENTERIP": "Vcenter ip",
-            "VCENTERPORT": "Vcenter port",
-            "ADMINUSERNAME": "Admin username",
-            "VCENTERUSER": "Vcenter user",
-            "ADMINPASSWORD": "Admin password",
-            "VCENTERPASSWORD": "Vcenter password",
-            "NSXMANAGER": "Nsx manager",
-            "VROPSSITE": "Vrops site",
-            "NSXUSER": "Nsx user",
-            "VROPSUSER": "Vrops user",
-            "NSXPASSWORD": "Nsx password",
-            "VROPSPASSWORD": "Vrops password",
-            "VPCCIDRBLOCK": "VPC cidr block",
-            "FLAVORIINFO": "Flavor info",
-            "VIM_TYPE": "VIM Type",
+            "VIMPASSWORD": "VIM Password",
             "VIMLOCATION": "VIM Location",
-            "SUBSCRIPTIONID": "Subscription ID",
-            "RESOURCEGROUP": "Resource Group",
-            "VNETNAME": "VNet Name",
-            "FLAVORSPATTERN": "Flavors Pattern"
+            "BACKTOVIMACCOUNTS": "Back to VimAccounts",
+            "LOCATIONERROR": "The Datacenter is already available in the selected location",
+            "LOADSAMPLECONFIG": "Load Sample Config",
+            "CLEARCONFIG": "Clear Config"
         },
         "WIMACCOUNTS": {
             "CREATEDSUCCESSFULLY": "WIM Created Successfully",
diff --git a/src/assets/i18n/es.json b/src/assets/i18n/es.json
index 0cd37b1..6b8fc76 100644
--- a/src/assets/i18n/es.json
+++ b/src/assets/i18n/es.json
@@ -46,7 +46,7 @@
     "VENDOR": "Vendedor",
     "VERSION": "Versión",
     "ACTIONS": "Comportamiento",
-    "NAME": "NOMBRE",
+    "NAME": "Nombre",
     "USAGESTATE": "Estado de uso",
     "MODIFICATIONDATE": "Fecha de modificación",
     "CREATEDDATE": "Fecha de creación",
@@ -144,6 +144,8 @@
     "YAMLCONFIG": "Yaml Config",
     "CHOOSEFILE": "Elija el archivo",
     "INVALIDCONFIG": "Configuración inválida",
+    "TYPEINFO": "Para agregar un nuevo TIPO, ingrese la entrada de arriba",
+    "UPLOADCONFIGLABEL": "Cargue el archivo con formato .yaml o .yml",
     "PAGE": {
         "DASHBOARD": {
             "DASHBOARD": "Tablero",
@@ -190,7 +192,7 @@
         },
         "VIM": {
             "CREATEDSUCCESSFULLY": "VIM Creada Exitosamente",
-            "LOACTIONINFO": "Escriba el nombre de la ubicación y haga clic en el botón Intro para seleccionar la ubicación de la lista"
+            "LOCATIONINFO": "Escriba el nombre de la ubicación y haga clic en ingresar"
         },
         "VIMDETAILS": {
             "NEWVIM": "Nuevo VIM",
@@ -204,51 +206,13 @@
             "SCHEMATYPE": "Tipo de esquema",
             "SCHEMAVERSION": "Versión de esquema",
             "CONFIGPARAMETERS": "CONFIGURAR PARÁMETROS",
-            "SDNCONTROLLER": "SDN Controladora",
-            "SDNPORTMAPPING": "SDN La asignación de puertos",
-            "VIMNETWORKNAME": "VIM Nombre de red",
-            "SECURITYGROUPS": "Grupos de seguridad",
-            "AVAILABILITYZONE": "Zona de disponibilidad",
-            "REGIONALNAME": "Nombre de región",
-            "INSECURE": "Insegura",
-            "USEEXISTINGFLAVOURS": "Usa sabores existentes",
-            "USEINTERNALENDPOINT": "Usar punto final interno",
-            "APIVERSION": "Versión API   ",
-            "PROJECTDOMAINID": "Proyecto dominio id",
-            "PROJECTDOMAINNAME": "Proyecto dominio name",
-            "USERDOMAINID": "Usuaria dominio id",
-            "USERDOMAINUSER": "Usuaria dominio nombre",
-            "KEYPAIR": "Par de claves",
-            "DATAPLANEPHYSICALNET": "Plano de datos physical net",
-            "USEFLOATINGIP": "Utilizar flotante ip",
-            "DATAPLANENETVLANRANGE": "Plano de datos net vlan range",
-            "MICROVERSION": "Microversión",
-            "BACKTOVIMACCOUNTS": "Atrás a VimAccounts",
-            "VIMPASSWORD": "VIM Contraseña",
-            "ADDITIONALCONFIG": "Adicional configuración",
-            "ADDITIONALCONFIGPLACEHOLDER": "{'key1': [...], 'key2': {}, 'key3': ''}",
             "NEWVIMACCOUNT": "Nueva VIM Cuenta",
-            "ORGNAME": "Orgnombre",
-            "VCENTERIP": "Vcenter ip",
-            "VCENTERPORT": "Vcenter Puerto",
-            "ADMINUSERNAME": "Administración nombre de usuario",
-            "VCENTERUSER": "Vcenter usuaria",
-            "ADMINPASSWORD": "Administración contraseña",
-            "VCENTERPASSWORD": "Vcenter contraseña",
-            "NSXMANAGER": "Nsx gerente",
-            "VROPSSITE": "Vrops sitio",
-            "NSXUSER": "Nsx usuaria",
-            "VROPSUSER": "Vrops usuaria",
-            "NSXPASSWORD": "Nsx contraseña",
-            "VROPSPASSWORD": "Vrops contraseña",
-            "VPCCIDRBLOCK": "VPC cidr bloquear",
-            "FLAVORIINFO": "Flavor informacion",
-            "VIM_TYPE": "VIM Tipo",
+            "VIMPASSWORD": "VIM Contraseña",
             "VIMLOCATION": "VIM Ubicación",
-            "SUBSCRIPTIONID": "ID de suscripción",
-            "RESOURCEGROUP": "Grupo de recursos",
-            "VNETNAME": "Nombre de red virtual",
-            "FLAVORSPATTERN": "Patrón de sabores"
+            "BACKTOVIMACCOUNTS": "Atrás a VimAccounts",
+            "LOCATIONERROR": "El centro de datos ya está disponible en la ubicación seleccionada",
+            "LOADSAMPLECONFIG": "Cargar configuración de muestra",
+            "CLEARCONFIG": "Borrar configuración"
         },
         "WIMACCOUNTS": {
             "CREATEDSUCCESSFULLY": "WIM Creado Exitosamente",
diff --git a/src/assets/i18n/pt.json b/src/assets/i18n/pt.json
index 3c948ac..ded0191 100644
--- a/src/assets/i18n/pt.json
+++ b/src/assets/i18n/pt.json
@@ -144,6 +144,8 @@
     "YAMLCONFIG": "Yaml Config",
     "CHOOSEFILE": "Escolher arquivo",
     "INVALIDCONFIG": "Configuração inválida",
+    "TYPEINFO": "Para adicionar um novo TIPO, insira a entrada acima",
+    "UPLOADCONFIGLABEL": "Faça o upload do arquivo no formato .yaml ou .yml",
     "PAGE": {
         "DASHBOARD": {
             "DASHBOARD": "painel de controle",
@@ -190,7 +192,7 @@
         },
         "VIM": {
             "CREATEDSUCCESSFULLY": "VIM criado com sucesso",
-            "LOACTIONINFO": "Digite o nome do local e clique no botão Enter para selecionar o local na lista"
+            "LOCATIONINFO": "Digite o nome do local e clique em Enter"
         },
         "VIMDETAILS": {
             "NEWVIM": "Novo VIM",
@@ -204,51 +206,13 @@
             "SCHEMATYPE": "Tipo de esquema",
             "SCHEMAVERSION": "Versão do esquema",
             "CONFIGPARAMETERS": "PARÂMETROS CONFIG",
-            "SDNCONTROLLER": "Controlador SDN",
-            "SDNPORTMAPPING": "Mapeamento de porta SDN",
-            "VIMNETWORKNAME": "Nome da rede VIM",
-            "SECURITYGROUPS": "Grupos de Segurança",
-            "AVAILABILITYZONE": "Zona de disponibilidade",
-            "REGIONALNAME": "Nome da região",
-            "INSECURE": "Insegura",
-            "USEEXISTINGFLAVOURS": "Use sabores existentes",
-            "USEINTERNALENDPOINT": "Usar terminal interno",
-            "APIVERSION": "Versão da API",
-            "PROJECTDOMAINID": "ID do domínio do projeto",
-            "PROJECTDOMAINNAME": "Nome de domínio do projeto",
-            "USERDOMAINID": "ID do domínio do usuário",
-            "USERDOMAINUSER": "Nome de domínio do usuário",
-            "KEYPAIR": "Par de chaves",
-            "DATAPLANEPHYSICALNET": "Rede física do plano de dados",
-            "USEFLOATINGIP": "Use ip flutuante",
-            "DATAPLANENETVLANRANGE": "Dataplane net vlan range",
-            "MICROVERSION": "Microversão",
-            "BACKTOVIMACCOUNTS": "Voltar para VimAccounts",
-            "VIMPASSWORD": "Senha do VIM",
-            "ADDITIONALCONFIG": "Configuração adicional",
-            "ADDITIONALCONFIGPLACEHOLDER": "{'key1':[...],'key2':{},'key3':''}",
             "NEWVIMACCOUNT": "Nova conta VIM",
-            "ORGNAME": "Orgnome",
-            "VCENTERIP": "Vcenter ip",
-            "VCENTERPORT": "Porta Vcenter",
-            "ADMINUSERNAME": "Nome de usuário do administrador",
-            "VCENTERUSER": "Usuário do Vcenter",
-            "ADMINPASSWORD": "senha do administrador",
-            "VCENTERPASSWORD": "Senha do Vcenter",
-            "NSXMANAGER": "Gerente Nsx",
-            "VROPSSITE": "Site Vrops",
-            "NSXUSER": "Usuário Nsx",
-            "VROPSUSER": "Usuário Vrops",
-            "NSXPASSWORD": "Senha Nsx",
-            "VROPSPASSWORD": "Senha Vrops",
-            "VPCCIDRBLOCK": "Bloco cidr VPC",
-            "FLAVORIINFO": "Informação do sabor",
-            "VIM_TYPE": "Tipo VIM",
+            "VIMPASSWORD": "Senha do VIM",
             "VIMLOCATION": "Localização do VIM",
-            "SUBSCRIPTIONID": "ID de Inscrição",
-            "RESOURCEGROUP": "Grupo de Recursos",
-            "VNETNAME": "Nome da VNet",
-            "FLAVORSPATTERN": "Padrão de sabores"
+            "BACKTOVIMACCOUNTS": "Voltar para VimAccounts",
+            "LOCATIONERROR": "O Datacenter já está disponível no local selecionado",
+            "LOADSAMPLECONFIG": "Carregar configuração de amostra",
+            "CLEARCONFIG": "Limpar configuração"
         },
         "WIMACCOUNTS": {
             "CREATEDSUCCESSFULLY": "WIM criado com sucesso",
diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
index 457d940..9e8948d 100644
--- a/src/assets/scss/app.scss
+++ b/src/assets/scss/app.scss
@@ -189,9 +189,12 @@ body {
     @include wh-value(null, calc(2rem + 8px) !important);
     @include padding-value(0, 10, 0, 10);
   }
-  .CodeMirror {
+  .edit-packages .CodeMirror {
     min-height: 400px !important;
   }
+  .new-vim .CodeMirror {
+    @include border(all, 1, solid, #eee !important);
+  }
   .table-layout-fixed {
     table-layout: fixed;
     word-wrap: break-word;
@@ -694,4 +697,8 @@ body {
     overflow-x: auto;
     white-space: nowrap;
   }
-}
\ No newline at end of file
+}
+
+.text-captilize {
+  text-transform: capitalize;
+}
diff --git a/src/models/CommonModel.ts b/src/models/CommonModel.ts
index e3d44e2..508a96a 100644
--- a/src/models/CommonModel.ts
+++ b/src/models/CommonModel.ts
@@ -150,6 +150,8 @@ export interface TARSETTINGS {
     'type'?: string;
     readAsString?: Function;
     buffer: ArrayBuffer;
+    header_offset?: Number;
+    size?: number;
 }
 /** Interface for Package information */
 export interface PACKAGEINFO {
@@ -205,3 +207,83 @@ export interface TYPESECTION {
     value: string;
     title: string;
 }
+/** Interface for VIM type Openstack's Config */
+export const TYPEOPENSTACK: {} = {
+    sdn_controller: '',
+    APIversion: '',
+    sdn_port_mapping: '',
+    project_domain_id: '',
+    vim_network_name: '',
+    project_domain_name: '',
+    config_vim_ype: '',
+    user_domain_id: '',
+    security_groups: '',
+    user_domain_name: '',
+    availabilityZone: '',
+    keypair: '',
+    region_name: '',
+    dataplane_physical_net: '',
+    insecure: '',
+    use_floating_ip: '',
+    use_internal_endpoint: '',
+    microversion: '',
+    additional_conf: '',
+    use_existing_flavors: ''
+};
+/** Interface for VIM type AWS's Config */
+export const TYPEAWS: {} = {
+    sdn_controller: '',
+    vpc_cidr_block: '',
+    sdn_port_mapping: '',
+    security_groups: '',
+    vim_network_name: '',
+    keypair: '',
+    region_name: '',
+    flavor_info: '',
+    additional_conf: ''
+};
+/** Interface for VIM type VMWARE's Config */
+export const TYPEVMWARE: {} = {
+    sdn_controller: '',
+    orgname: '',
+    sdn_port_mapping: '',
+    vcenter_ip: '',
+    vim_network_name: '',
+    admin_username: '',
+    admin_password: '',
+    vcenter_port: '',
+    vcenter_user: '',
+    vcenter_password: '',
+    nsx_manager: '',
+    nsx_user: '',
+    nsx_password: '',
+    vrops_site: '',
+    vrops_user: '',
+    vrops_password: '',
+    additional_conf: ''
+};
+/** Interface for VIM type OPENVIMNEBULA's Config */
+export const TYPEOPENVIMNEBULA: {} = {
+    sdn_controller: '',
+    sdn_port_mapping: '',
+    vim_network_name: '',
+    additional_conf: ''
+};
+/** Interface for VIM type AZURE's Config */
+export const TYPEAZURE: {} = {
+    subscription_id: '',
+    region_name: '',
+    resource_group: '',
+    vnet_name: '',
+    flavors_pattern: ''
+};
+/** Interface for VIM other type Config */
+export const TYPEOTERS: {} = {
+    sdn_controller: '',
+    sdn_port_mapping: '',
+    vim_network_name: '',
+    use_floating_ip: '',
+    use_internal_endpoint: '',
+    additional_conf: '',
+    use_existing_flavors: ''
+};
diff --git a/src/services/SharedService.ts b/src/services/SharedService.ts
index bc4e71a..8aee513 100644
--- a/src/services/SharedService.ts
+++ b/src/services/SharedService.ts
@@ -221,21 +221,21 @@ export class SharedService {
         return true;
     }
     /** Clean the form before submit @public */
-    public cleanForm(formGroup: FormGroup): void {
+    public cleanForm(formGroup: FormGroup, formName?: String): void {
         Object.keys(formGroup.controls).forEach((key: string) => {
-            if ((!isNullOrUndefined((formGroup.get(key) as FormArray | FormGroup).controls)) && key !== 'vimconfig') {
+            if ((!isNullOrUndefined((formGroup.get(key) as FormArray | FormGroup).controls)) && key !== 'config') {
                 // tslint:disable-next-line: no-shadowed-variable
                 for (const { item, index } of (formGroup.get(key).value).map((item: {}, index: number) => ({ item, index }))) {
                     const newFormGroup: FormGroup = (formGroup.get(key) as FormArray).controls[index] as FormGroup;
                     this.cleanForm(newFormGroup);
                 }
-            } else if (formGroup.get(key).value !== undefined && formGroup.get(key).value !== null && key !== 'vimconfig') {
+            } else if (formGroup.get(key).value !== undefined && formGroup.get(key).value !== null && key !== 'config') {
                 if (!Array.isArray(formGroup.get(key).value)) {
                     if (typeof formGroup.get(key).value === 'string') {
                         formGroup.get(key).setValue(formGroup.get(key).value.trim());
                     }
                 }
-            } else if (key === 'vimconfig') {
+            } else if (key === 'config' && formName === 'vim') {
                 const newFormGroup: FormGroup = formGroup.get(key) as FormGroup;
                 this.cleanForm(newFormGroup);
             }
@@ -284,11 +284,20 @@ export class SharedService {
         const z: number = Math.floor(Math.random() * this.colorStringLength);
         return 'rgb(' + x + ',' + y + ',' + z + ')';
     }
+
+    /** Add custom name/tag to the dropdown @public */
+    public addCustomTag(tag: string): string {
+        return tag;
+    }
+
     /** Method to validate file extension and size @private */
     private vaildataFileInfo(fileInfo: File, fileType: string): boolean {
         const extension: string = fileInfo.name.substring(fileInfo.name.lastIndexOf('.') + 1);
         const packageSize: number = CONSTANTNUMBER.oneMB * environment.packageSize;
-        if (extension.toLowerCase() === fileType && fileInfo.size <= packageSize) {
+        if (fileType === 'yaml' && (extension.toLowerCase() === 'yaml' || extension.toLowerCase() === 'yml')
+            && fileInfo.size <= packageSize) {
+            return true;
+        } else if (extension.toLowerCase() === fileType && fileInfo.size <= packageSize) {
             return true;
         }
         return false;