2 Copyright 2020 TATA ELXSI
4 Licensed under the Apache License, Version 2.0 (the 'License');
5 you may not use this file except in compliance with the License.
6 You may obtain a copy of the License at
8 http://www.apache.org/licenses/LICENSE-2.0
10 Unless required by applicable law or agreed to in writing, software
11 distributed under the License is distributed on an "AS IS" BASIS,
12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 See the License for the specific language governing permissions and
14 limitations under the License.
16 Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
19 * @file Vim Account Component.
21 import { HttpHeaders } from '@angular/common/http';
22 import { Component, ElementRef, Injector, OnInit, ViewChild } from '@angular/core';
23 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
24 import { Router } from '@angular/router';
25 import { TranslateService } from '@ngx-translate/core';
26 import { NotifierService } from 'angular-notifier';
27 import { APIURLHEADER, ERRORDATA, TYPESECTION, VIM_TYPES } from 'CommonModel';
28 import { environment } from 'environment';
29 import * as jsyaml from 'js-yaml';
30 import { RestService } from 'RestService';
31 import { SharedService } from 'SharedService';
32 import { isNullOrUndefined } from 'util';
33 import { FEATURES, VIMLOCATION, VIMLOCATIONDATA } from 'VimAccountModel';
37 * @Component takes NewVimaccountComponent.html as template url
40 selector: 'app-new-vimaccount',
41 templateUrl: './NewVimaccountComponent.html',
42 styleUrls: ['./NewVimaccountComponent.scss']
44 /** Exporting a class @exports NewVimaccountComponent */
45 export class NewVimaccountComponent implements OnInit {
46 /** To inject services @public */
47 public injector: Injector;
49 /** FormGroup vim New Account added to the form @ html @public */
50 public vimNewAccountForm: FormGroup;
52 /** Supported Vim type for the dropdown */
53 public vimType: TYPESECTION[];
55 /** Supported Vim type for the dropdown */
56 public selectedVimType: string;
58 /** Supported true and false value for the dropdown */
59 public boolValue: {}[];
61 /** Form submission Add */
62 public submitted: boolean = false;
64 /** Showing more details of collapase */
65 public isCollapsed: boolean = false;
67 /** Vim location values @public */
68 public getVIMLocation: VIMLOCATIONDATA[] = [];
70 /** Check the Projects loading results @public */
71 public isLocationLoadingResults: boolean = false;
73 /** Give the message for the loading @public */
74 public message: string = 'PLEASEWAIT';
76 /** set the longitude value of the selected place @public */
77 public setLong: number;
79 /** set the latitude value of the selected place @public */
80 public setLat: number;
82 /** Element ref for fileInput @public */
83 @ViewChild('fileInput', { static: true }) public fileInput: ElementRef;
85 /** Element ref for fileInput @public */
86 @ViewChild('fileInputLabel', { static: true }) public fileInputLabel: ElementRef;
88 /** Instance of the rest service @private */
89 private restService: RestService;
91 /** Holds the instance of router class @private */
92 private router: Router;
94 /** Controls the header form @private */
95 private headers: HttpHeaders;
97 /** FormBuilder instance added to the formBuilder @private */
98 private formBuilder: FormBuilder;
100 /** Notifier service to popup notification @private */
101 private notifierService: NotifierService;
103 /** Contains tranlsate instance @private */
104 private translateService: TranslateService;
106 /** Contains all methods related to shared @private */
107 private sharedService: SharedService;
109 /** Contains configuration key variables @private */
110 private configKeys: string[] = [];
112 constructor(injector: Injector) {
113 this.injector = injector;
114 this.restService = this.injector.get(RestService);
115 this.formBuilder = this.injector.get(FormBuilder);
116 this.router = this.injector.get(Router);
117 this.notifierService = this.injector.get(NotifierService);
118 this.translateService = this.injector.get(TranslateService);
119 this.sharedService = this.injector.get(SharedService);
121 /** Initializing Form Action */
122 this.vimNewAccountForm = this.formBuilder.group({
123 name: [null, Validators.required],
124 vim_type: [null, Validators.required],
125 vim_tenant_name: [null, Validators.required],
127 vim_url: [null, [Validators.required, Validators.pattern(this.sharedService.REGX_URL_PATTERN)]],
129 vim_user: [null, Validators.required],
130 vim_password: [null, Validators.required],
131 vimconfig: this.paramsBuilder()
135 /** Generate params for config @public */
136 public paramsBuilder(): FormGroup {
137 return this.formBuilder.group({
138 use_existing_flavors: [null],
140 sdn_controller: [null],
142 sdn_port_mapping: [null],
143 project_domain_id: [null],
144 vim_network_name: [null],
145 project_domain_name: [null],
146 config_vim_ype: [null],
147 user_domain_id: [null],
148 security_groups: [null],
149 user_domain_name: [null],
150 availabilityZone: [null],
153 dataplane_physical_net: [null],
155 use_floating_ip: [null],
156 microversion: [null],
157 use_internal_endpoint: [null],
158 additional_conf: [null],
161 vcenter_port: [null],
162 admin_username: [null],
163 vcenter_user: [null],
164 admin_password: [null],
165 vcenter_password: [null],
170 nsx_password: [null],
171 vrops_password: [null],
172 vpc_cidr_block: [null],
174 subscription_id: [null],
175 resource_group: [null],
177 flavors_pattern: [null]
181 /** convenience getter for easy access to form fields */
182 get f(): FormGroup['controls'] { return this.vimNewAccountForm.controls; }
185 * Lifecyle Hooks the trigger before component is instantiate
187 public ngOnInit(): void {
188 this.vimType = VIM_TYPES;
190 { id: '', name: 'None' },
191 { id: true, name: 'True' },
192 { id: false, name: 'False' }
194 this.headers = new HttpHeaders({
195 Accept: 'application/json',
196 'Content-Type': 'application/json',
197 'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0'
201 /** On modal submit newVimAccountSubmit will called @public */
202 public newVimAccountSubmit(): void {
203 this.submitted = true;
204 if (!this.vimNewAccountForm.invalid) {
205 this.isLocationLoadingResults = true;
206 this.configKeys.forEach((key: string) => {
207 this.vimNewAccountForm.controls.vimconfig.get(key).setValue(JSON.parse(this.vimNewAccountForm.controls.vimconfig.get(key).value));
209 this.sharedService.cleanForm(this.vimNewAccountForm);
210 Object.keys(this.vimNewAccountForm.value.vimconfig).forEach((key: string) => {
211 if (this.vimNewAccountForm.value.vimconfig[key] === undefined || this.vimNewAccountForm.value.vimconfig[key] === null ||
212 this.vimNewAccountForm.value.vimconfig[key] === '') {
213 delete this.vimNewAccountForm.value.vimconfig[key];
216 this.vimNewAccountForm.value.config = this.vimNewAccountForm.value.vimconfig;
217 delete this.vimNewAccountForm.value.vimconfig;
218 const apiURLHeader: APIURLHEADER = {
219 url: environment.VIMACCOUNTS_URL,
220 httpOptions: { headers: this.headers }
222 this.restService.postResource(apiURLHeader, this.vimNewAccountForm.value)
223 .subscribe((result: {}) => {
224 this.notifierService.notify('success', this.translateService.instant('PAGE.VIM.CREATEDSUCCESSFULLY'));
225 this.isLocationLoadingResults = false;
226 this.router.navigate(['vim/details']).catch(() => {
229 // Post the New Vim data and reflect in the VIM Details Page.
230 }, (error: ERRORDATA) => {
231 this.configKeys.forEach((key: string) => {
232 this.vimNewAccountForm.controls.vimconfig.get(key)
233 .setValue(JSON.stringify(this.vimNewAccountForm.controls.vimconfig.get(key).value));
235 this.restService.handleError(error, 'post');
236 this.isLocationLoadingResults = false;
241 /** Routing to VIM Account Details Page @public */
242 public onVimAccountBack(): void {
243 this.router.navigate(['vim/details']).catch(() => {
248 /** Fetching the location with name,latitude,longitude @public */
249 public fetchLocationLatLong(value: string): void {
250 this.isLocationLoadingResults = true;
251 const newVIMLocation: VIMLOCATIONDATA[] = [];
252 const locationTrack: string = environment.MAPLATLONGAPI_URL;
253 const locationAPIURL: string = locationTrack.replace('{value}', value);
254 this.restService.getResource(locationAPIURL).subscribe((result: VIMLOCATION) => {
255 result.features.forEach((getFeturesResult: FEATURES) => {
256 if ('extent' in getFeturesResult.properties) {
257 getFeturesResult.properties.extent.forEach((extentResult: number, index: number) => {
259 this.setLong = extentResult;
262 this.setLat = extentResult;
266 getFeturesResult.geometry.coordinates.forEach((coordinateResult: number, index: number) => {
268 this.setLong = coordinateResult;
271 this.setLat = coordinateResult;
275 newVIMLocation.push({
276 label: getFeturesResult.properties.name + ',' + getFeturesResult.properties.state + ', ' + getFeturesResult.properties.country,
277 value: getFeturesResult.properties.name + ',' + this.setLong + ',' + this.setLat
280 this.getVIMLocation = newVIMLocation;
281 this.isLocationLoadingResults = false;
282 }, (error: ERRORDATA) => {
283 this.restService.handleError(error, 'get');
284 this.isLocationLoadingResults = false;
288 /** Drag and drop feature and fetchind the details of files @private */
289 public filesDropped(files: FileList): void {
290 this.configKeys = [];
291 if (files && files.length === 1) {
292 this.sharedService.getFileString(files, 'yaml').then((fileContent: string): void => {
293 const getJson: string = jsyaml.load(fileContent, { json: true });
294 Object.keys(getJson).forEach((item: string) => {
295 if (!isNullOrUndefined(this.vimNewAccountForm.controls.vimconfig.get(item))) {
296 if (typeof getJson[item] === 'object') {
297 // tslint:disable-next-line: no-backbone-get-set-outside-model
298 this.vimNewAccountForm.controls.vimconfig.get(item).setValue(JSON.stringify(getJson[item]));
299 this.configKeys.push(item);
301 // tslint:disable-next-line: no-backbone-get-set-outside-model
302 this.vimNewAccountForm.controls.vimconfig.get(item).setValue(getJson[item]);
306 }).catch((err: string): void => {
307 if (err === 'typeError') {
308 this.notifierService.notify('error', this.translateService.instant('YAMLFILETYPEERRROR'));
310 this.notifierService.notify('error', this.translateService.instant('ERROR'));
312 this.fileInputLabel.nativeElement.innerText = this.translateService.instant('CHOOSEFILE');
313 this.fileInput.nativeElement.value = null;
315 } else if (files && files.length > 1) {
316 this.notifierService.notify('error', this.translateService.instant('DROPFILESVALIDATION'));
318 this.fileInputLabel.nativeElement.innerText = files[0].name;
319 this.fileInput.nativeElement.value = null;