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 'codemirror/addon/dialog/dialog';
28 import 'codemirror/addon/display/autorefresh';
29 import 'codemirror/addon/display/fullscreen';
30 import 'codemirror/addon/edit/closebrackets';
31 import 'codemirror/addon/edit/matchbrackets';
32 import 'codemirror/addon/fold/brace-fold';
33 import 'codemirror/addon/fold/foldcode';
34 import 'codemirror/addon/fold/foldgutter';
35 import 'codemirror/addon/search/search';
36 import 'codemirror/addon/search/searchcursor';
37 import 'codemirror/keymap/sublime';
38 import 'codemirror/lib/codemirror';
39 import 'codemirror/mode/javascript/javascript';
40 import 'codemirror/mode/markdown/markdown';
41 import 'codemirror/mode/yaml/yaml';
43 APIURLHEADER, ERRORDATA, TYPEAWS, TYPEAZURE, TYPEOPENSTACK, TYPEOPENVIMNEBULA, TYPEOTERS,
44 TYPESECTION, TYPEVMWARE, VIM_TYPES
46 import { environment } from 'environment';
47 import * as jsyaml from 'js-yaml';
48 import { RestService } from 'RestService';
49 import { SharedService } from 'SharedService';
50 import { isNullOrUndefined } from 'util';
51 import { FEATURES, VIMLOCATION, VIMLOCATIONDATA } from 'VimAccountModel';
52 import { VimAccountDetails, VIMData } from 'VimAccountModel';
56 * @Component takes NewVimaccountComponent.html as template url
59 selector: 'app-new-vimaccount',
60 templateUrl: './NewVimaccountComponent.html',
61 styleUrls: ['./NewVimaccountComponent.scss']
63 /** Exporting a class @exports NewVimaccountComponent */
64 export class NewVimaccountComponent implements OnInit {
65 /** To inject services @public */
66 public injector: Injector;
68 /** FormGroup vim New Account added to the form @ html @public */
69 public vimNewAccountForm: FormGroup;
71 /** Supported Vim type for the dropdown */
72 public vimType: TYPESECTION[];
74 /** Supported Vim type for the dropdown */
75 public selectedVimType: string;
77 /** Form submission Add */
78 public submitted: boolean = false;
80 /** Showing more details of collapase */
81 public isCollapsed: boolean = false;
83 /** Vim location values @public */
84 public getVIMLocation: VIMLOCATIONDATA[] = [];
86 /** Check the Projects loading results @public */
87 public isLocationLoadingResults: boolean = false;
89 /** Give the message for the loading @public */
90 public message: string = 'PLEASEWAIT';
92 /** Handle the formate Change @public */
93 public defaults: {} = {
97 /** To Set Mode @public */
98 public mode: string = 'text/x-yaml';
100 /** To Set Mode @public */
101 public modeDefault: string = 'yaml';
103 /** options @public */
104 public options: {} = {
105 mode: this.modeDefault,
106 showCursorWhenSelecting: true,
112 gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
113 autoCloseBrackets: true,
120 public data: string = '';
122 /** Element ref for fileInput @public */
123 @ViewChild('fileInput', { static: true }) public fileInput: ElementRef;
125 /** Element ref for fileInput @public */
126 @ViewChild('fileInputLabel', { static: true }) public fileInputLabel: ElementRef;
128 /** Contains all methods related to shared @private */
129 public sharedService: SharedService;
131 /** Instance of the rest service @private */
132 private restService: RestService;
134 /** Holds the instance of router class @private */
135 private router: Router;
137 /** Controls the header form @private */
138 private headers: HttpHeaders;
140 /** FormBuilder instance added to the formBuilder @private */
141 private formBuilder: FormBuilder;
143 /** Notifier service to popup notification @private */
144 private notifierService: NotifierService;
146 /** Contains tranlsate instance @private */
147 private translateService: TranslateService;
149 /** VIM Details @private */
150 private vimDetail: VimAccountDetails[];
152 constructor(injector: Injector) {
153 this.injector = injector;
154 this.restService = this.injector.get(RestService);
155 this.formBuilder = this.injector.get(FormBuilder);
156 this.router = this.injector.get(Router);
157 this.notifierService = this.injector.get(NotifierService);
158 this.translateService = this.injector.get(TranslateService);
159 this.sharedService = this.injector.get(SharedService);
162 /** convenience getter for easy access to form fields */
163 get f(): FormGroup['controls'] { return this.vimNewAccountForm.controls; }
166 * Lifecyle Hooks the trigger before component is instantiate
168 public ngOnInit(): void {
169 this.vimType = VIM_TYPES;
170 this.headers = new HttpHeaders({
171 Accept: 'application/json',
172 'Content-Type': 'application/json',
173 'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0'
175 this.initializeForm();
178 /** VIM Initialize Forms @public */
179 public initializeForm(): void {
180 this.vimNewAccountForm = this.formBuilder.group({
181 name: [null, Validators.required],
182 vim_type: [null, Validators.required],
183 vim_tenant_name: [null, Validators.required],
185 vim_url: [null, [Validators.required, Validators.pattern(this.sharedService.REGX_URL_PATTERN)]],
187 vim_user: [null, Validators.required],
188 vim_password: [null, Validators.required],
190 latitude: ['', Validators.pattern(this.sharedService.REGX_LAT_PATTERN)],
191 longitude: ['', Validators.pattern(this.sharedService.REGX_LONG_PATTERN)],
192 config: this.paramsBuilder()
196 /** Generate params for config @public */
197 public paramsBuilder(): FormGroup {
198 return this.formBuilder.group({
203 /** On modal submit newVimAccountSubmit will called @public */
204 public newVimAccountSubmit(): void {
205 this.submitted = true;
207 if (!this.vimNewAccountForm.invalid) {
208 this.isLocationLoadingResults = true;
209 this.sharedService.cleanForm(this.vimNewAccountForm, 'vim');
210 if (!isNullOrUndefined(this.data) && this.data !== '') {
211 Object.assign(this.vimNewAccountForm.value.config, jsyaml.load(this.data.toString(), { json: true }));
213 Object.keys(this.vimNewAccountForm.value.config).forEach((res: string): void => {
214 if (res !== 'location') {
215 delete this.vimNewAccountForm.value.config[res];
219 if (!isNullOrUndefined(this.vimNewAccountForm.value.latitude) && !isNullOrUndefined(this.vimNewAccountForm.value.longitude)) {
220 this.vimNewAccountForm.value.config.location = this.vimNewAccountForm.value.locationName + ',' +
221 this.vimNewAccountForm.value.longitude + ',' +
222 this.vimNewAccountForm.value.latitude;
225 if (isNullOrUndefined(this.vimNewAccountForm.value.config.location)) {
226 delete this.vimNewAccountForm.value.config.location;
229 Object.keys(this.vimNewAccountForm.value.config).forEach((res: string): void => {
230 if (isNullOrUndefined(this.vimNewAccountForm.value.config[res]) || this.vimNewAccountForm.value.config[res] === '') {
231 delete this.vimNewAccountForm.value.config[res];
238 /** Create a new VIM Account @public */
239 public createNewVIM(): void {
240 const apiURLHeader: APIURLHEADER = {
241 url: environment.VIMACCOUNTS_URL,
242 httpOptions: { headers: this.headers }
244 delete this.vimNewAccountForm.value.locationName;
245 delete this.vimNewAccountForm.value.latitude;
246 delete this.vimNewAccountForm.value.longitude;
247 this.restService.postResource(apiURLHeader, this.vimNewAccountForm.value)
248 .subscribe((result: {id: string}): void => {
249 this.notifierService.notify('success', this.translateService.instant('PAGE.VIM.CREATEDSUCCESSFULLY'));
250 this.isLocationLoadingResults = false;
251 this.router.navigate(['vim/info/' + result.id]).catch((): void => {
254 }, (error: ERRORDATA): void => {
255 this.restService.handleError(error, 'post');
256 this.isLocationLoadingResults = false;
260 /** HandleChange function @public */
261 public handleChange($event: string): void {
265 /** Routing to VIM Account Details Page @public */
266 public onVimAccountBack(): void {
267 this.router.navigate(['vim/details']).catch((): void => {
272 /** Drag and drop feature and fetchind the details of files @private */
273 public filesDropped(files: FileList): void {
274 if (files && files.length === 1) {
275 this.sharedService.getFileString(files, 'yaml').then((fileContent: string): void => {
276 const getJson: string = jsyaml.load(fileContent, { json: true });
277 this.defaults['text/x-yaml'] = fileContent;
278 this.data = fileContent;
279 }).catch((err: string): void => {
280 if (err === 'typeError') {
281 this.notifierService.notify('error', this.translateService.instant('YAMLFILETYPEERRROR'));
283 this.notifierService.notify('error', this.translateService.instant('ERROR'));
285 this.fileInputLabel.nativeElement.innerText = this.translateService.instant('CHOOSEFILE');
286 this.fileInput.nativeElement.value = null;
288 } else if (files && files.length > 1) {
289 this.notifierService.notify('error', this.translateService.instant('DROPFILESVALIDATION'));
291 this.fileInputLabel.nativeElement.innerText = files[0].name;
292 this.fileInput.nativeElement.value = null;
295 /** Load sample config based on VIM type @public */
296 public loadSampleConfig(): void {
298 if (this.selectedVimType === 'openstack') {
299 this.defaults['text/x-yaml'] = jsyaml.dump(TYPEOPENSTACK);
300 this.data = JSON.stringify(TYPEOPENSTACK, null, '\t');
301 } else if (this.selectedVimType === 'aws') {
302 this.defaults['text/x-yaml'] = jsyaml.dump(TYPEAWS);
303 this.data = JSON.stringify(TYPEAWS, null, '\t');
304 } else if (this.selectedVimType === 'vmware') {
305 this.defaults['text/x-yaml'] = jsyaml.dump(TYPEVMWARE);
306 this.data = JSON.stringify(TYPEVMWARE, null, '\t');
307 } else if (this.selectedVimType === 'openvim' || this.selectedVimType === 'opennebula') {
308 this.defaults['text/x-yaml'] = jsyaml.dump(TYPEOPENVIMNEBULA);
309 this.data = JSON.stringify(TYPEOPENVIMNEBULA, null, '\t');
310 } else if (this.selectedVimType === 'azure' || this.selectedVimType === 'opennebula') {
311 this.defaults['text/x-yaml'] = jsyaml.dump(TYPEAZURE);
312 this.data = JSON.stringify(TYPEAZURE, null, '\t');
314 this.defaults['text/x-yaml'] = jsyaml.dump(TYPEOTERS);
315 this.data = JSON.stringify(TYPEOTERS, null, '\t');
319 /** Clear config parameters @public */
320 public clearConfig(): void {
321 this.defaults['text/x-yaml'] = '';
323 this.fileInput.nativeElement.value = null;