src/app/utilities/edit-packages/EditPackagesComponent.ts

   1 /*
   2  Copyright 2020 TATA ELXSI
   3
   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
   7
   8   http://www.apache.org/licenses/LICENSE-2.0
   9
  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.
  15
  16  Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
  17 */
  18 /**
  19  * @file Edit Actions Component
  20  */
  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';
  48
  49 /**
  50  * Creating component
  51  * @Component takes EditPackagesComponent.html as template url
  52  */
  53 @Component({
  54   selector: 'app-edit-packages',
  55   templateUrl: './EditPackagesComponent.html',
  56   styleUrls: ['./EditPackagesComponent.scss']
  57 })
  58
  59 /** Exporting a class @exports EditPackagesComponent */
  60 export class EditPackagesComponent implements OnInit {
  61   /** To inject services @public */
  62   public injector: Injector;
  63
  64   /** dataService to pass the data from one component to another @public */
  65   public identifier: {} = {};
  66
  67   /** readOnly @public */
  68   public readOnly: boolean = false;
  69
  70   /** Handle the formate Change @public */
  71   public defaults: {} = {
  72     'text/x-yaml': '',
  73     'text/json': ''
  74   };
  75
  76   /** Get & Update URL VNFD & NSD */
  77   public getUpdateURL: string;
  78
  79   /** Pass the type of VNFD & NSD for fetching text */
  80   public getFileContentType: string;
  81
  82   /** Pass the type of VNFD & NSD for fileUpdate */
  83   public updateFileContentType: string;
  84
  85   /** To Set Mode @public */
  86   public mode: string = 'text/x-yaml';
  87
  88   /** To Set Mode @public */
  89   public modeDefault: string = 'yaml';
  90
  91   /** options @public */
  92   public options: {} = {
  93     // eslint-disable-next-line no-invalid-this
  94     mode: this.modeDefault,
  95     showCursorWhenSelecting: true,
  96     autofocus: true,
  97     autoRefresh: true,
  98     lineNumbers: true,
  99     lineWrapping: true,
 100     foldGutter: true,
 101     gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
 102     autoCloseBrackets: true,
 103     matchBrackets: true,
 104     theme: 'neat',
 105     keyMap: 'sublime'
 106   };
 107
 108   /** Ymal Url for the VNFD & NSD */
 109   public ymalUrl: string;
 110
 111   /** json Url for the VNFD & NSD */
 112   public jsonUrl: string;
 113
 114   /** Navigation Path for the VNFD & NSD */
 115   public navigatePath: string;
 116
 117   /** Package type */
 118   public pacakgeType: string;
 119
 120   /** variables contains paramsID @public */
 121   public paramsID: string;
 122
 123   /** Controls the File Type List form @public */
 124   public fileTypes: { value: string; viewValue: string; }[] = [];
 125
 126   /** Check the loading results @public */
 127   public isLoadingResults: boolean = true;
 128
 129   /** Give the message for the loading @public */
 130   public message: string = 'PLEASEWAIT';
 131
 132   /** Instance of the rest service @private */
 133   private restService: RestService;
 134
 135   /** Holds teh instance of AuthService class of type AuthService @private */
 136   private router: Router;
 137
 138   /** Holds teh instance of AuthService class of type AuthService @private */
 139   private activatedRoute: ActivatedRoute;
 140
 141   /** Data @private */
 142   private data: string = '';
 143
 144   /** contains http options @private */
 145   private httpOptions: HttpHeaders;
 146
 147   /** Controls the header form @private */
 148   private headers: HttpHeaders;
 149
 150   /** Notifier service to popup notification @private */
 151   private notifierService: NotifierService;
 152
 153   /** Contains tranlsate instance @private */
 154   private translateService: TranslateService;
 155
 156   /** Contains all methods related to shared @private */
 157   private sharedService: SharedService;
 158
 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);
 167   }
 168
 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'
 175     });
 176     this.paramsID = this.activatedRoute.snapshot.paramMap.get('id');
 177     this.pacakgeType = this.activatedRoute.snapshot.paramMap.get('type');
 178     this.generateURLPath();
 179   }
 180
 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();
 199     } else {
 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();
 208     }
 209   }
 210
 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,
 215       Accept: acceptType,
 216       'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0'
 217     });
 218     return this.headers;
 219   }
 220
 221   /** ChangeMode function @public */
 222   public changeMode(): void {
 223     if (this.mode === 'text/x-yaml') {
 224       this.modeDefault = 'yaml';
 225     } else {
 226       this.modeDefault = 'javascript';
 227     }
 228     this.options = {
 229       ...this.options,
 230       mode: this.modeDefault
 231     };
 232     this.data = '';
 233   }
 234
 235   /** HandleChange function @public */
 236   public handleChange($event: string): void {
 237     this.data = $event;
 238   }
 239
 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'));
 244     } else {
 245       this.updateCheck(showgraph);
 246     }
 247   }
 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'));
 254       if (showgraph) {
 255         if (packageType === 'nsd') {
 256           this.router.navigate(['/packages/ns/compose/' + this.paramsID]).catch((): void => {
 257             // Catch Navigation Error
 258         });
 259         } else if (packageType === 'vnf') {
 260           this.router.navigate(['/packages/vnf/compose/' + this.paramsID]).catch((): void => {
 261             // Catch Navigation Error
 262         });
 263         }
 264       }
 265       this.getEditFileData();
 266     }, (error: ERRORDATA) => {
 267       this.isLoadingResults = false;
 268       this.restService.handleError(error, 'put');
 269     });
 270   }
 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 }
 277     };
 278     let descriptorInfo: string = '';
 279     if (this.mode === 'text/json') {
 280       descriptorInfo = jsyaml.dump(JSON.parse(this.data), {sortKeys: true});
 281     } else {
 282       descriptorInfo = this.data;
 283     }
 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'));
 291         });
 292     } else {
 293       this.updateFileData(apiURLHeader, descriptorInfo, showgraph, this.pacakgeType);
 294     }
 295   }
 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,
 302       responseType: 'text'
 303     };
 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
 315         });
 316         } else {
 317           this.restService.handleError(error, 'get');
 318         }
 319         this.isLoadingResults = false;
 320       });
 321   }
 322 }