X-Git-Url: https://osm.etsi.org/gitweb/?a=blobdiff_plain;f=src%2Fapp%2Fvim-accounts%2Fnew-vimaccount%2FNewVimaccountComponent.ts;h=a57b7822a7a50591fa485325f04323971a62fee1;hb=0a34dfa32165036b380ec6ac493469b34007df0a;hp=bc6fd1e7bdc996e3c6873823abc03bc0176670d0;hpb=3b4814aa2d3dec621dadb52f058ba95a3dc3a86a;p=osm%2FNG-UI.git diff --git a/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.ts b/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.ts index bc6fd1e..a57b782 100644 --- a/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.ts +++ b/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.ts @@ -18,19 +18,37 @@ /** * @file Vim Account Component. */ + import { isNullOrUndefined } from 'util'; import { HttpHeaders } from '@angular/common/http'; import { Component, ElementRef, Injector, OnInit, ViewChild } from '@angular/core'; 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 } from 'VimAccountModel'; /** * Creating component @@ -55,29 +73,48 @@ export class NewVimaccountComponent implements OnInit { /** Supported Vim type for the dropdown */ public selectedVimType: string; - /** Supported true and false value for the dropdown */ - public boolValue: {}[]; - /** Form submission Add */ public submitted: boolean = false; /** Showing more details of collapase */ public isCollapsed: boolean = false; - /** Vim location values @public */ - public getVIMLocation: VIMLOCATIONDATA[] = []; - /** Check the Projects loading results @public */ public isLocationLoadingResults: boolean = false; /** Give the message for the loading @public */ public message: string = 'PLEASEWAIT'; - /** set the longitude value of the selected place @public */ - public setLong: number; - - /** 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: {} = { + // eslint-disable-next-line no-invalid-this + 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 = ''; /** Element ref for fileInput @public */ @ViewChild('fileInput', { static: true }) public fileInput: ElementRef; @@ -85,6 +122,9 @@ export class NewVimaccountComponent implements OnInit { /** 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 +143,8 @@ export class NewVimaccountComponent implements OnInit { /** Contains tranlsate instance @private */ private translateService: TranslateService; - /** Contains all methods related to shared @private */ - private sharedService: SharedService; - - /** Contains configuration key variables @private */ - private configKeys: string[] = []; + /** VIM Details @private */ + private vimDetail: VimAccountDetails[]; constructor(injector: Injector) { this.injector = injector; @@ -117,8 +154,26 @@ export class NewVimaccountComponent implements OnInit { this.notifierService = this.injector.get(NotifierService); this.translateService = this.injector.get(TranslateService); this.sharedService = this.injector.get(SharedService); + } + + /** 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.vimType = VIM_TYPES; + this.headers = new HttpHeaders({ + Accept: 'application/json', + 'Content-Type': 'application/json', + 'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0' + }); + this.initializeForm(); + } - /** Initializing Form Action */ + /** VIM Initialize Forms @public */ + public initializeForm(): void { this.vimNewAccountForm = this.formBuilder.group({ name: [null, Validators.required], vim_type: [null, Validators.required], @@ -128,181 +183,99 @@ export class NewVimaccountComponent implements OnInit { schema_type: [''], vim_user: [null, Validators.required], vim_password: [null, Validators.required], - vimconfig: this.paramsBuilder() + locationName: [''], + latitude: ['', Validators.pattern(this.sharedService.REGX_LAT_PATTERN)], + longitude: ['', Validators.pattern(this.sharedService.REGX_LONG_PATTERN)], + 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] - }); - } - - /** 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.vimType = VIM_TYPES; - this.boolValue = [ - { id: '', name: 'None' }, - { id: true, name: 'True' }, - { id: false, name: 'False' } - ]; - this.headers = new HttpHeaders({ - Accept: 'application/json', - 'Content-Type': 'application/json', - 'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0' + location: [null] }); } /** On modal submit newVimAccountSubmit will called @public */ public newVimAccountSubmit(): void { 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): void => { + if (res !== 'location') { + // eslint-disable-next-line @typescript-eslint/no-dynamic-delete, security/detect-object-injection + delete this.vimNewAccountForm.value.config[res]; + } + }); + } + if (!isNullOrUndefined(this.vimNewAccountForm.value.latitude) && !isNullOrUndefined(this.vimNewAccountForm.value.longitude)) { + this.vimNewAccountForm.value.config.location = this.vimNewAccountForm.value.locationName + ',' + + this.vimNewAccountForm.value.longitude + ',' + + this.vimNewAccountForm.value.latitude; + } + + if (isNullOrUndefined(this.vimNewAccountForm.value.config.location)) { + delete this.vimNewAccountForm.value.config.location; + } + + Object.keys(this.vimNewAccountForm.value.config).forEach((res: string): void => { + // eslint-disable-next-line security/detect-object-injection + if (isNullOrUndefined(this.vimNewAccountForm.value.config[res]) || this.vimNewAccountForm.value.config[res] === '') { + // eslint-disable-next-line @typescript-eslint/no-dynamic-delete, security/detect-object-injection + 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 } - }; - this.restService.postResource(apiURLHeader, this.vimNewAccountForm.value) - .subscribe((result: {}) => { - this.notifierService.notify('success', this.translateService.instant('PAGE.VIM.CREATEDSUCCESSFULLY')); - this.isLocationLoadingResults = false; - this.router.navigate(['vim/details']).catch(() => { - // Error Cached; - }); - // 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; - }); + this.createNewVIM(); } } + /** Create a new VIM Account @public */ + public createNewVIM(): void { + const apiURLHeader: APIURLHEADER = { + url: environment.VIMACCOUNTS_URL, + httpOptions: { headers: this.headers } + }; + delete this.vimNewAccountForm.value.locationName; + delete this.vimNewAccountForm.value.latitude; + delete this.vimNewAccountForm.value.longitude; + this.restService.postResource(apiURLHeader, this.vimNewAccountForm.value) + .subscribe((result: {id: string}): void => { + this.notifierService.notify('success', this.translateService.instant('PAGE.VIM.CREATEDSUCCESSFULLY')); + this.isLocationLoadingResults = false; + this.router.navigate(['vim/info/' + result.id]).catch((): void => { + // Error Cached; + }); + }, (error: ERRORDATA): void => { + 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(() => { + this.router.navigate(['vim/details']).catch((): void => { // Error Cached }); } - /** Fetching the location with name,latitude,longitude @public */ - public fetchLocationLatLong(value: string): void { - this.isLocationLoadingResults = true; - const newVIMLocation: VIMLOCATIONDATA[] = []; - const locationTrack: string = environment.MAPLATLONGAPI_URL; - const locationAPIURL: string = locationTrack.replace('{value}', value); - this.restService.getResource(locationAPIURL).subscribe((result: VIMLOCATION) => { - result.features.forEach((getFeturesResult: FEATURES) => { - if ('extent' in getFeturesResult.properties) { - getFeturesResult.properties.extent.forEach((extentResult: number, index: number) => { - if (index === 0) { - this.setLong = extentResult; - } - if (index === 1) { - this.setLat = extentResult; - } - }); - } else { - getFeturesResult.geometry.coordinates.forEach((coordinateResult: number, index: number) => { - if (index === 0) { - this.setLong = coordinateResult; - } - if (index === 1) { - this.setLat = coordinateResult; - } - }); - } - newVIMLocation.push({ - label: getFeturesResult.properties.name + ',' + getFeturesResult.properties.state + ', ' + getFeturesResult.properties.country, - value: getFeturesResult.properties.name + ',' + this.setLong + ',' + this.setLat - }); - }); - this.getVIMLocation = newVIMLocation; - this.isLocationLoadingResults = false; - }, (error: ERRORDATA) => { - this.restService.handleError(error, 'get'); - this.isLocationLoadingResults = false; - }); - } - /** 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 +291,35 @@ export class NewVimaccountComponent implements OnInit { this.fileInputLabel.nativeElement.innerText = files[0].name; this.fileInput.nativeElement.value = 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; + } }