Feature 11009 Ns Config Template as first class citizens in OSM
[osm/NG-UI.git] / src / app / packages / ns-config-template / NSConfigTemplateComponent.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: SANDHYA JS (sandhya.j@tataelxsi.co.in)
17 */
18 /**
19  * @file NS Config Template details Component.
20  */
21 import { HttpHeaders } from '@angular/common/http';
22 import { Component, Injector, OnInit } from '@angular/core';
23 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
24 import { TranslateService } from '@ngx-translate/core';
25 import { ERRORDATA, MODALCLOSERESPONSEDATA } from 'CommonModel';
26 import { ComposePackages } from 'ComposePackages';
27 import { DataService } from 'DataService';
28 import { environment } from 'environment';
29 import { LocalDataSource } from 'ng2-smart-table';
30 import { NSConfigTemplateActionComponent } from 'NSCONFIGTEMPLATEACTION';
31 import { NSCONFIG, NSConfigData } from 'NSCONFIGTEMPLATEMODEL';
32 import { RestService } from 'RestService';
33 import { Subscription } from 'rxjs';
34 import { SharedService } from 'SharedService';
35 import { VNFData } from 'VNFDModel';
36
37 /**
38  * Creating component
39  * @Component takes NSConfigTemplateComponent.html as template url
40  */
41 @Component({
42     selector: 'app-ns-config-template',
43     templateUrl: './NSConfigTemplateComponent.html',
44     styleUrls: ['./NSConfigTemplateComponent.scss']
45 })
46 /** Exporting a class @exports NSConfigTemplateComponent */
47 export class NSConfigTemplateComponent implements OnInit {
48     /** To inject services @public */
49     public injector: Injector;
50
51     /** Data of smarttable populate through LocalDataSource @public */
52     public dataSource: LocalDataSource = new LocalDataSource();
53
54     /** handle translate @public */
55     public translateService: TranslateService;
56
57     /** Columns list of the smart table @public */
58     public columnLists: object = {};
59
60     /** Settings for smarttable to populate the table with columns @public */
61     public settings: object = {};
62
63     /** Check the loading results @public */
64     public isLoadingResults: boolean = true;
65
66     /** Give the message for the loading @public */
67     public message: string = 'PLEASEWAIT';
68
69     /** Class for empty and present data @public */
70     public checkDataClass: string;
71
72     /** Instance of the rest service @private */
73     private restService: RestService;
74
75     /** dataService to pass the data from one component to another @private */
76     private dataService: DataService;
77
78     /** Formation of appropriate Data for LocalDatasource @private */
79     private nsConfigData: NSConfigData[] = [];
80
81     /** Contains all methods related to shared @private */
82     private sharedService: SharedService;
83
84     /** Controls the header form @private */
85     private headers: HttpHeaders;
86
87     /** Instance of the modal service @private */
88     private modalService: NgbModal;
89
90     /** Instance of subscriptions @private */
91     private generateDataSub: Subscription;
92
93     constructor(injector: Injector) {
94         this.injector = injector;
95         this.restService = this.injector.get(RestService);
96         this.dataService = this.injector.get(DataService);
97         this.sharedService = this.injector.get(SharedService);
98         this.translateService = this.injector.get(TranslateService);
99         this.modalService = this.injector.get(NgbModal);
100     }
101
102     /**
103      * Lifecyle Hooks the trigger before component is instantiate
104      */
105     public ngOnInit(): void {
106         this.generateColumns();
107         this.generateSettings();
108         this.generateData();
109         this.headers = new HttpHeaders({
110             'Content-Type': 'application/gzip',
111             Accept: 'application/json',
112             'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0'
113         });
114         this.generateDataSub = this.sharedService.dataEvent.subscribe((): void => { this.generateData(); });
115     }
116
117     /** smart table Header Colums @public */
118     public generateColumns(): void {
119         this.columnLists = {
120             name: { title: this.translateService.instant('NAME'), width: '25%' },
121             identifier: { title: this.translateService.instant('IDENTIFIER'), width: '25%' },
122             nsdId: { title: this.translateService.instant('PAGE.INSTANCEINSTANTIATE.NSID'), width: '25%' },
123             created: { title: this.translateService.instant('Created'), width: '15%' },
124             Actions: {
125                 name: 'Action', width: '15%', filter: false, sort: false, type: 'custom',
126                 title: this.translateService.instant('ACTIONS'),
127                 valuePrepareFunction: (cell: VNFData, row: VNFData): VNFData => row, renderComponent: NSConfigTemplateActionComponent
128             }
129         };
130     }
131
132     /** smart table Data Settings @public */
133     public generateSettings(): void {
134         this.settings = {
135             edit: {
136                 editButtonContent: '<i class="fa fa-edit" title="Edit"></i>',
137                 confirmSave: true
138             },
139             delete: {
140                 deleteButtonContent: '<i class="far fa-trash-alt" title="delete"></i>',
141                 confirmDelete: true
142             },
143             columns: this.columnLists,
144             actions: {
145                 add: false,
146                 edit: false,
147                 delete: false,
148                 position: 'right'
149             },
150             attr: this.sharedService.tableClassConfig(),
151             pager: this.sharedService.paginationPagerConfig(),
152             noDataMessage: this.translateService.instant('NODATAMSG')
153         };
154     }
155
156     /** smart table listing manipulation @public */
157     public onChange(perPageValue: number): void {
158         this.dataSource.setPaging(1, perPageValue, true);
159     }
160
161     /** OnUserRowSelect Function @public */
162     public onUserRowSelect(event: MessageEvent): void {
163         Object.assign(event.data, { page: 'ns-config-template' });
164         this.dataService.changeMessage(event.data);
165     }
166
167
168     /** Generate nsData object from loop and return for the datasource @public */
169     public generatetemplateData(nsData: NSCONFIG): NSConfigData {
170         return {
171             nsdId: nsData.nsdId,
172             identifier: nsData._id,
173             operationalState: nsData._admin.operationalState,
174             created: this.sharedService.convertEpochTime(Number(nsData._admin.created)),
175             modified: this.sharedService.convertEpochTime(Number(nsData._admin.modified)),
176             name: nsData.name
177         };
178     }
179     /** Handle compose new ns package method  @public */
180     public composeTemplate(): void {
181         // eslint-disable-next-line security/detect-non-literal-fs-filename
182         const modalRef: NgbModalRef = this.modalService.open(ComposePackages, { backdrop: 'static' });
183         modalRef.componentInstance.params = { page: 'ns-config-template' };
184         modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
185             if (result) {
186                 this.sharedService.callData();
187             }
188         }).catch((): void => {
189             // Catch Navigation Error
190         });
191     }
192
193     /**
194      * Lifecyle hook which get trigger on component destruction
195      */
196     public ngOnDestroy(): void {
197         this.generateDataSub.unsubscribe();
198     }
199
200     /** Fetching the data from server to Load in the smarttable @protected */
201     protected generateData(): void {
202         this.isLoadingResults = true;
203         this.restService.getResource(environment.NSCONFIGTEMPLATE_URL).subscribe((nsdConfigData: NSCONFIG[]): void => {
204             this.nsConfigData = [];
205             nsdConfigData.forEach((nsddata: NSCONFIG): void => {
206                 const vnfDataObj: NSConfigData = this.generatetemplateData(nsddata);
207                 this.nsConfigData.push(vnfDataObj);
208             });
209             if (this.nsConfigData.length > 0) {
210                 this.checkDataClass = 'dataTables_present';
211             } else {
212                 this.checkDataClass = 'dataTables_empty';
213             }
214             this.dataSource.load(this.nsConfigData).then((data: boolean): void => {
215                 this.isLoadingResults = false;
216             }).catch((): void => {
217                 this.isLoadingResults = false;
218             });
219         }, (error: ERRORDATA): void => {
220             this.restService.handleError(error, 'get');
221             this.isLoadingResults = false;
222         });
223     }
224 }