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 Edit Actions Component
21 import { HttpHeaders } from '@angular/common/http';
22 import { Component, Injector, OnInit } from '@angular/core';
23 import { ActivatedRoute, Router } from '@angular/router';
24 import { TranslateService } from '@ngx-translate/core';
25 import { NotifierService } from 'angular-notifier';
26 import 'codemirror/addon/dialog/dialog';
27 import 'codemirror/addon/display/autorefresh';
28 import 'codemirror/addon/display/fullscreen';
29 import 'codemirror/addon/edit/closebrackets';
30 import 'codemirror/addon/edit/matchbrackets';
31 import 'codemirror/addon/fold/brace-fold';
32 import 'codemirror/addon/fold/foldcode';
33 import 'codemirror/addon/fold/foldgutter';
34 import 'codemirror/addon/search/search';
35 import 'codemirror/addon/search/searchcursor';
36 import 'codemirror/keymap/sublime';
37 import 'codemirror/lib/codemirror';
38 import 'codemirror/mode/javascript/javascript';
39 import 'codemirror/mode/markdown/markdown';
40 import 'codemirror/mode/yaml/yaml';
41 import { APIURLHEADER, ERRORDATA, GETAPIURLHEADER } from 'CommonModel';
42 import { environment } from 'environment';
43 import * as HttpStatus from 'http-status-codes';
44 import * as jsyaml from 'js-yaml';
45 import { NSDDetails } from 'NSDModel';
46 import { RestService } from 'RestService';
47 import { SharedService } from 'SharedService';
51 * @Component takes EditPackagesComponent.html as template url
54 selector: 'app-edit-packages',
55 templateUrl: './EditPackagesComponent.html',
56 styleUrls: ['./EditPackagesComponent.scss']
59 /** Exporting a class @exports EditPackagesComponent */
60 export class EditPackagesComponent implements OnInit {
61 /** To inject services @public */
62 public injector: Injector;
64 /** dataService to pass the data from one component to another @public */
65 public identifier: {} = {};
67 /** readOnly @public */
68 public readOnly: boolean = false;
70 /** Handle the formate Change @public */
71 public defaults: {} = {
76 /** Get & Update URL VNFD & NSD */
77 public getUpdateURL: string;
79 /** Pass the type of VNFD & NSD for fetching text */
80 public getFileContentType: string;
82 /** Pass the type of VNFD & NSD for fileUpdate */
83 public updateFileContentType: string;
85 /** To Set Mode @public */
86 public mode: string = 'text/x-yaml';
88 /** To Set Mode @public */
89 public modeDefault: string = 'yaml';
91 /** options @public */
92 public options: {} = {
93 // eslint-disable-next-line no-invalid-this
94 mode: this.modeDefault,
95 showCursorWhenSelecting: true,
101 gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
102 autoCloseBrackets: true,
108 /** Ymal Url for the VNFD & NSD */
109 public ymalUrl: string;
111 /** json Url for the VNFD & NSD */
112 public jsonUrl: string;
114 /** Navigation Path for the VNFD & NSD */
115 public navigatePath: string;
118 public pacakgeType: string;
120 /** variables contains paramsID @public */
121 public paramsID: string;
123 /** Controls the File Type List form @public */
124 public fileTypes: { value: string; viewValue: string; }[] = [];
126 /** Check the loading results @public */
127 public isLoadingResults: boolean = true;
129 /** Give the message for the loading @public */
130 public message: string = 'PLEASEWAIT';
132 /** Instance of the rest service @private */
133 private restService: RestService;
135 /** Holds teh instance of AuthService class of type AuthService @private */
136 private router: Router;
138 /** Holds teh instance of AuthService class of type AuthService @private */
139 private activatedRoute: ActivatedRoute;
142 private data: string = '';
144 /** contains http options @private */
145 private httpOptions: HttpHeaders;
147 /** Controls the header form @private */
148 private headers: HttpHeaders;
150 /** Notifier service to popup notification @private */
151 private notifierService: NotifierService;
153 /** Contains tranlsate instance @private */
154 private translateService: TranslateService;
156 /** Contains all methods related to shared @private */
157 private sharedService: SharedService;
159 constructor(injector: Injector) {
160 this.injector = injector;
161 this.restService = this.injector.get(RestService);
162 this.activatedRoute = this.injector.get(ActivatedRoute);
163 this.router = this.injector.get(Router);
164 this.notifierService = this.injector.get(NotifierService);
165 this.translateService = this.injector.get(TranslateService);
166 this.sharedService = this.injector.get(SharedService);
169 /** Lifecyle Hooks the trigger before component is instantiate @public */
170 public ngOnInit(): void {
171 this.headers = new HttpHeaders({
172 'Content-Type': 'application/json',
173 Accept: 'text/plain',
174 'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0'
176 this.paramsID = this.activatedRoute.snapshot.paramMap.get('id');
177 this.pacakgeType = this.activatedRoute.snapshot.paramMap.get('type');
178 this.generateURLPath();
181 /** generate ymalURL, JSONURL, navigation Path */
182 public generateURLPath(): void {
183 if (this.pacakgeType === 'vnf') {
184 this.getUpdateURL = environment.VNFPACKAGES_URL;
185 this.getFileContentType = 'vnfd';
186 this.updateFileContentType = 'package_content';
187 this.navigatePath = 'vnf';
188 this.fileTypes = [{ value: 'text/x-yaml', viewValue: 'yaml' }, { value: 'text/json', viewValue: 'json' }];
189 this.httpOptions = this.getHeadersWithContentAccept('application/gzip', 'application/json');
190 this.getEditFileData();
191 } else if (this.pacakgeType === 'netslice') {
192 this.getUpdateURL = environment.NETWORKSLICETEMPLATE_URL;
193 this.getFileContentType = 'nst';
194 this.updateFileContentType = 'nst_content';
195 this.navigatePath = 'netslice';
196 this.fileTypes = [{ value: 'text/x-yaml', viewValue: 'yaml' }];
197 this.httpOptions = this.getHeadersWithContentAccept('application/yaml', 'application/json');
198 this.getEditFileData();
200 this.getUpdateURL = environment.NSDESCRIPTORS_URL;
201 this.getFileContentType = 'nsd';
202 this.updateFileContentType = 'nsd_content';
203 this.pacakgeType = 'nsd';
204 this.navigatePath = 'ns';
205 this.fileTypes = [{ value: 'text/x-yaml', viewValue: 'yaml' }, { value: 'text/json', viewValue: 'json' }];
206 this.httpOptions = this.getHeadersWithContentAccept('application/gzip', 'application/json');
207 this.getEditFileData();
211 /** Get the headers based on the type @public */
212 public getHeadersWithContentAccept(contentType: string, acceptType: string): HttpHeaders {
213 this.headers = new HttpHeaders({
214 'Content-Type': contentType,
216 'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0'
221 /** ChangeMode function @public */
222 public changeMode(): void {
223 if (this.mode === 'text/x-yaml') {
224 this.modeDefault = 'yaml';
226 this.modeDefault = 'javascript';
230 mode: this.modeDefault
235 /** HandleChange function @public */
236 public handleChange($event: string): void {
240 /** Update function @public */
241 public update(showgraph: boolean): void {
242 if (this.data === '') {
243 this.notifierService.notify('warning', this.translateService.instant('PAGE.TOPOLOGY.DATAEMPTY'));
245 this.updateCheck(showgraph);
248 /** Update the file Data @public */
249 public updateFileData(urlHeader: APIURLHEADER, fileData: string | ArrayBuffer, showgraph: boolean, packageType: string): void {
250 this.restService.putResource(urlHeader, fileData).subscribe(() => {
251 this.isLoadingResults = false;
252 this.notifierService.notify('success', this.translateService.instant(
253 (packageType !== 'netslice') ? 'PAGE.NSPACKAGE.EDITPACKAGES.UPDATEDSUCCESSFULLY' : 'PAGE.NETSLICE.UPDATEDSUCCESSFULLY'));
255 if (packageType === 'nsd') {
256 this.router.navigate(['/packages/ns/compose/' + this.paramsID]).catch((): void => {
257 // Catch Navigation Error
259 } else if (packageType === 'vnf') {
260 this.router.navigate(['/packages/vnf/compose/' + this.paramsID]).catch((): void => {
261 // Catch Navigation Error
265 this.getEditFileData();
266 }, (error: ERRORDATA) => {
267 this.isLoadingResults = false;
268 this.restService.handleError(error, 'put');
271 /** Update method for NS, VNF and net-slice template */
272 private updateCheck(showgraph: boolean): void {
273 this.isLoadingResults = true;
274 const apiURLHeader: APIURLHEADER = {
275 url: this.getUpdateURL + '/' + this.paramsID + '/' + this.updateFileContentType,
276 httpOptions: { headers: this.httpOptions }
278 let descriptorInfo: string = '';
279 if (this.mode === 'text/json') {
280 descriptorInfo = jsyaml.dump(JSON.parse(this.data), {sortKeys: true});
282 descriptorInfo = this.data;
284 if (this.getFileContentType !== 'nst') {
285 this.sharedService.targzFile({ packageType: this.pacakgeType, id: this.paramsID, descriptor: descriptorInfo })
286 .then((content: ArrayBuffer): void => {
287 this.updateFileData(apiURLHeader, content, showgraph, this.pacakgeType);
288 }).catch((): void => {
289 this.isLoadingResults = false;
290 this.notifierService.notify('error', this.translateService.instant('ERROR'));
293 this.updateFileData(apiURLHeader, descriptorInfo, showgraph, this.pacakgeType);
296 /** Get the YAML content response as a plain/text and convert to JSON Format @private */
297 private getEditFileData(): void {
298 this.isLoadingResults = true;
299 const gethttpOptions: HttpHeaders = this.getHeadersWithContentAccept('application/json', 'text/plain');
300 const httpOptions: GETAPIURLHEADER = {
301 headers: gethttpOptions,
304 this.restService.getResource(this.getUpdateURL + '/' + this.paramsID + '/' + this.getFileContentType, httpOptions)
305 .subscribe((nsData: NSDDetails[]) => {
306 const getJson: string = jsyaml.load(nsData.toString(), { json: true });
307 this.defaults['text/x-yaml'] = nsData.toString();
308 this.defaults['text/json'] = JSON.stringify(getJson, null, '\t');
309 this.isLoadingResults = false;
310 }, (error: ERRORDATA) => {
311 error.error = typeof error.error === 'string' ? jsyaml.load(error.error) : error.error;
312 if (error.error.status === HttpStatus.NOT_FOUND || error.error.status === HttpStatus.UNAUTHORIZED ) {
313 this.router.navigateByUrl('404', { skipLocationChange: true }).catch((): void => {
314 // Catch Navigation Error
317 this.restService.handleError(error, 'get');
319 this.isLoadingResults = false;