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 @@
<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 @@
/** 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 @@
/** 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 @@
});
}
- /** 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 @@
</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 { 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 @@
@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 @@
</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 @@
public vimAccountDetails: VimAccountDetails;
/** Information Top Left @public */
- public configParams: {}[] = [];
+ public configParams: {} = {};
/** Showing more details of collapase */
public isCollapsed: boolean = true;
@@ -116,19 +116,23 @@
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 @@
}
];
}
-
- /** 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 @@
</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 @@
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 @@
[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 @@
[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 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>
- </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>
+ <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 { 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 @@
/** 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 @@
/** 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 @@
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 @@
'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 @@
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 @@
});
// 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 @@
/** 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 @@
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 @@
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 @@
}),
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 @@
<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 @@
/** 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 @@
/** 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 @@
});
}
- /** convenience getter for easy access to form fields */
- get f(): FormGroup['controls'] { return this.wimNewAccountForm.controls; }
-
/**
* Lifecyle Hooks the trigger before component is instantiate
*/