Bug 1382 - VNF packages list doesn't show short names
[osm/NG-UI.git] / src / app / packages / ns-packages / NSPackagesComponent.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 NS-Packages component.
20  */
21 import { HttpHeaders } from '@angular/common/http';
22 import { Component, ElementRef, Injector, OnInit, ViewChild } from '@angular/core';
23 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
24 import { TranslateService } from '@ngx-translate/core';
25 import { NotifierService } from 'angular-notifier';
26 import { APIURLHEADER, ERRORDATA } from 'CommonModel';
27 import { ComposePackages } from 'ComposePackages';
28 import { DataService } from 'DataService';
29 import { environment } from 'environment';
30 import { LocalDataSource } from 'ng2-smart-table';
31 import { NSData, NSDDetails } from 'NSDModel';
32 import { NsPackagesActionComponent } from 'NsPackagesAction';
33 import { RestService } from 'RestService';
34 import { Subscription } from 'rxjs';
35 import { SharedService } from 'SharedService';
36
37 /**
38  * Creating component
39  * @Component takes NSPackagesComponent.html as template url
40  */
41 @Component({
42     selector: 'app-ns-packages',
43     templateUrl: './NSPackagesComponent.html',
44     styleUrls: ['./NSPackagesComponent.scss']
45 })
46
47 /** Exporting a class @exports NSPackagesComponent */
48 export class NSPackagesComponent implements OnInit {
49     /** To inject services @public */
50     public injector: Injector;
51
52     /** Formation of appropriate Data for LocalDatasource @public */
53     public dataSource: LocalDataSource = new LocalDataSource();
54
55     /** handle translate @public */
56     public translateService: TranslateService;
57
58     /** Columns list of the smart table @public */
59     public columnLists: object = {};
60
61     /** Settings for smarttable to populate the table with columns @public */
62     public settings: object = {};
63
64     /** Check the loading results @public */
65     public isLoadingResults: boolean = true;
66
67     /** Give the message for the loading @public */
68     public message: string = 'PLEASEWAIT';
69
70     /** Class for empty and present data @public */
71     public checkDataClass: string;
72
73     /** Element ref for fileInput @public */
74     @ViewChild('fileInput', { static: true }) public fileInput: ElementRef;
75
76     /** Instance of the rest service @private */
77     private restService: RestService;
78
79     /** dataService to pass the data from one component to another @private */
80     private dataService: DataService;
81
82     /** Formation of appropriate Data for LocalDatasource @private */
83     private nsData: NSData[] = [];
84
85     /** Contains all methods related to shared @private */
86     private sharedService: SharedService;
87
88     /** variables holds file information @private */
89     private fileData: string | ArrayBuffer;
90
91     /** Controls the header form @private */
92     private headers: HttpHeaders;
93
94     /** Notifier service to popup notification @private */
95     private notifierService: NotifierService;
96
97     /** Instance of the modal service @private */
98     private modalService: NgbModal;
99
100     /** Instance of subscriptions @private */
101     private generateDataSub: Subscription;
102
103     constructor(injector: Injector) {
104         this.injector = injector;
105         this.restService = this.injector.get(RestService);
106         this.dataService = this.injector.get(DataService);
107         this.sharedService = this.injector.get(SharedService);
108         this.translateService = this.injector.get(TranslateService);
109         this.notifierService = this.injector.get(NotifierService);
110         this.modalService = this.injector.get(NgbModal);
111     }
112
113     /** Lifecyle Hooks the trigger before component is instantiate @public */
114     public ngOnInit(): void {
115         this.generateColumns();
116         this.generateSettings();
117         this.generateData();
118         this.headers = new HttpHeaders({
119             'Content-Type': 'application/gzip',
120             Accept: 'application/json',
121             'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0'
122         });
123         this.generateDataSub = this.sharedService.dataEvent.subscribe(() => { this.generateData(); });
124     }
125
126     /** smart table Header Colums @public */
127     public generateColumns(): void {
128         this.columnLists = {
129             name: { title: this.translateService.instant('NAME'), width: '15%', sortDirection: 'asc' },
130             identifier: { title: this.translateService.instant('IDENTIFIER'), width: '30%' },
131             description: { title: this.translateService.instant('DESCRIPTION'), width: '25%' },
132             version: { title: this.translateService.instant('VERSION'), width: '15%' },
133             Actions: {
134                 name: 'Actions', width: '15%', filter: false, sort: false, type: 'custom',
135                 title: this.translateService.instant('ACTIONS'),
136                 valuePrepareFunction: (cell: NSData, row: NSData): NSData => row, renderComponent: NsPackagesActionComponent
137             }
138         };
139     }
140
141     /** smart table Data Settings @public */
142     public generateSettings(): void {
143         this.settings = {
144             edit: {
145                 editButtonContent: '<i class="fa fa-edit" title="Edit"></i>',
146                 confirmSave: true
147             },
148             delete: {
149                 deleteButtonContent: '<i class="far fa-trash-alt" title="delete"></i>',
150                 confirmDelete: true
151             },
152             columns: this.columnLists,
153             actions: {
154                 add: false,
155                 edit: false,
156                 delete: false,
157                 position: 'right'
158             },
159             attr: this.sharedService.tableClassConfig(),
160             pager: this.sharedService.paginationPagerConfig(),
161             noDataMessage: this.translateService.instant('NODATAMSG')
162         };
163     }
164
165     /** smart table listing manipulation @public */
166     public onChange(perPageValue: number): void {
167         this.dataSource.setPaging(1, perPageValue, true);
168     }
169
170     /** smart table listing manipulation @public */
171     public onUserRowSelect(event: MessageEvent): void {
172         Object.assign(event.data, { page: 'ns-package' });
173         this.dataService.changeMessage(event.data);
174     }
175
176     /** Drag and drop feature and fetchind the details of files  @public */
177     public filesDropped(files: FileList): void {
178         if (files && files.length === 1) {
179             this.isLoadingResults = true;
180             this.sharedService.getFileString(files, 'gz').then((fileContent: ArrayBuffer): void => {
181                 const apiURLHeader: APIURLHEADER = {
182                     url: environment.NSDESCRIPTORSCONTENT_URL,
183                     httpOptions: { headers: this.headers }
184                 };
185                 this.saveFileData(apiURLHeader, fileContent);
186             }).catch((err: string): void => {
187                 this.isLoadingResults = false;
188                 if (err === 'typeError') {
189                     this.notifierService.notify('error', this.translateService.instant('GZFILETYPEERRROR'));
190                 } else {
191                     this.notifierService.notify('error', this.translateService.instant('ERROR'));
192                 }
193             });
194         } else if (files && files.length > 1) {
195             this.notifierService.notify('error', this.translateService.instant('DROPFILESVALIDATION'));
196         }
197     }
198
199     /** Post the droped files and reload the page @public */
200     public saveFileData(urlHeader: APIURLHEADER, fileData: {}): void {
201         this.fileInput.nativeElement.value = null;
202         this.restService.postResource(urlHeader, fileData).subscribe((result: {}) => {
203             this.notifierService.notify('success', this.translateService.instant('PAGE.NSPACKAGE.CREATEDSUCCESSFULLY'));
204             this.generateData();
205         }, (error: ERRORDATA) => {
206             this.restService.handleError(error, 'post');
207             this.isLoadingResults = false;
208         });
209     }
210
211     /** Generate nsData object from loop and return for the datasource @public */
212     public generateNSData(nsdpackagedata: NSDDetails): NSData {
213         return {
214             name: nsdpackagedata.name,
215             identifier: nsdpackagedata._id,
216             description: nsdpackagedata.description,
217             version: nsdpackagedata.version
218         };
219     }
220
221     /** Fetching the data from server to Load in the smarttable @public */
222     public generateData(): void {
223         this.isLoadingResults = true;
224         this.restService.getResource(environment.NSDESCRIPTORSCONTENT_URL).subscribe((nsdPackageData: NSDDetails[]) => {
225             this.nsData = [];
226             nsdPackageData.forEach((nsdpackagedata: NSDDetails) => {
227                 const nsDataObj: NSData = this.generateNSData(nsdpackagedata);
228                 this.nsData.push(nsDataObj);
229             });
230             if (this.nsData.length > 0) {
231                 this.checkDataClass = 'dataTables_present';
232             } else {
233                 this.checkDataClass = 'dataTables_empty';
234             }
235             this.dataSource.load(this.nsData).then((data: boolean) => {
236                 this.isLoadingResults = false;
237             }).catch(() => {
238                 this.isLoadingResults = false;
239             });
240         }, (error: ERRORDATA) => {
241             this.restService.handleError(error, 'get');
242             this.isLoadingResults = false;
243         });
244     }
245     /** Handle compose new ns package method  @public */
246     public composeNSPackage(): void {
247         this.modalService.open(ComposePackages, { backdrop: 'static' }).componentInstance.params = { page: 'ns-package' };
248     }
249
250     /**
251      * Lifecyle hook which get trigger on component destruction
252      */
253     public ngOnDestroy(): void {
254         this.generateDataSub.unsubscribe();
255     }
256 }