src/app/packages/netslice-template/NetsliceTemplateComponent.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 Netslice-Template.
  20  */
  21 import { HttpHeaders } from '@angular/common/http';
  22 import { Component, ElementRef, Injector, ViewChild } from '@angular/core';
  23 import { TranslateService } from '@ngx-translate/core';
  24 import { NotifierService } from 'angular-notifier';
  25 import { APIURLHEADER, ERRORDATA } from 'CommonModel';
  26 import { DataService } from 'DataService';
  27 import { environment } from 'environment';
  28 import { NetslicePackagesActionComponent } from 'NetslicePackagesAction';
  29 import { NetworkSliceData, NetworkSliceModel } from 'NetworkSliceModel';
  30 import { LocalDataSource } from 'ng2-smart-table';
  31 import { RestService } from 'RestService';
  32 import { Subscription } from 'rxjs';
  33 import { SharedService } from 'SharedService';
  34
  35 /**
  36  * Creating component
  37  * @Component takes NetsliceTemplateComponent.html as template url
  38  */
  39 @Component({
  40     selector: 'app-netslice-template',
  41     templateUrl: './NetsliceTemplateComponent.html',
  42     styleUrls: ['./NetsliceTemplateComponent.scss']
  43 })
  44 /** Exporting a class @exports NetsliceTemplateComponent */
  45 export class NetsliceTemplateComponent {
  46     /** To inject services @public */
  47     public injector: Injector;
  48
  49     /** Values for map config @public */
  50     public selectedRows: object[] = [];
  51
  52     /** To consume REST API calls @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     /** Values for map config @public */
  65     public selectList: object[] = [];
  66
  67     /** Check the loading results @public */
  68     public isLoadingResults: boolean = true;
  69
  70     /** Give the message for the loading @public */
  71     public message: string = 'PLEASEWAIT';
  72
  73     /** Class for empty and present data @public */
  74     public checkDataClass: string;
  75
  76     /** Element ref for fileInput @public */
  77     @ViewChild('fileInput', { static: true }) public fileInput: ElementRef;
  78
  79     /** To consume REST API calls @private */
  80     private dataService: DataService;
  81
  82     /** To consume REST API calls @private */
  83     private restService: RestService;
  84
  85     /** Formation of appropriate Data for LocalDatasource @private */
  86     private networkSliceData: NetworkSliceData[] = [];
  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     /** Contains all methods related to shared @private */
  98     private sharedService: SharedService;
  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.translateService = this.injector.get(TranslateService);
 108         this.notifierService = this.injector.get(NotifierService);
 109         this.sharedService = this.injector.get(SharedService);
 110     }
 111
 112     /** Lifecyle Hooks the trigger before component is instantiate @public */
 113     public ngOnInit(): void {
 114         this.generateColumns();
 115         this.generateSettings();
 116         this.generateData();
 117         this.headers = new HttpHeaders({
 118             'Content-Type': 'application/x-yaml',
 119             Accept: 'application/json',
 120             'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0'
 121         });
 122         this.generateDataSub = this.sharedService.dataEvent.subscribe(() => { this.generateData(); });
 123     }
 124
 125     /** smart table Header Colums @public */
 126     public generateColumns(): void {
 127         this.columnLists = {
 128             name: { title: this.translateService.instant('NAME'), width: '20%', sortDirection: 'asc' },
 129             identifier: { title: this.translateService.instant('IDENTIFIER'), width: '50%' },
 130             usageState: { title: this.translateService.instant('USAGESTATE'), width: '20%' },
 131             Actions: {
 132                 name: 'Actions', width: '10%', filter: false, sort: false, type: 'custom',
 133                 title: this.translateService.instant('ACTIONS'),
 134                 valuePrepareFunction: (cell: NetworkSliceData, row: NetworkSliceData): NetworkSliceData => row,
 135                 renderComponent: NetslicePackagesActionComponent
 136             }
 137         };
 138     }
 139
 140     /** smart table Data Settings @public */
 141     public generateSettings(): void {
 142         this.settings = {
 143             edit: {
 144                 editButtonContent: '<i class="fa fa-edit" title="Edit"></i>',
 145                 confirmSave: true
 146             },
 147             delete: {
 148                 deleteButtonContent: '<i class="far fa-trash-alt" title="delete"></i>',
 149                 confirmDelete: true
 150             },
 151             columns: this.columnLists,
 152             actions: {
 153                 add: false,
 154                 edit: false,
 155                 delete: false,
 156                 position: 'right'
 157             },
 158             attr: this.sharedService.tableClassConfig(),
 159             pager: this.sharedService.paginationPagerConfig(),
 160             noDataMessage: this.translateService.instant('NODATAMSG')
 161         };
 162     }
 163
 164     /** smart table listing manipulation @private */
 165     public onChange(perPageValue: number): void {
 166         this.dataSource.setPaging(1, perPageValue, true);
 167     }
 168
 169     /** smart table listing manipulation @private */
 170     public onUserRowSelect(event: MessageEvent): void {
 171         Object.assign(event.data, { page: 'network-slice' });
 172         this.dataService.changeMessage(event.data);
 173     }
 174
 175     /** Drag and drop feature and fetchind the details of files  @private */
 176     public filesDropped(files: FileList): void {
 177         if (files && files.length === 1) {
 178             this.isLoadingResults = true;
 179             this.sharedService.getFileString(files, 'yaml').then((fileContent: String | ArrayBuffer): void => {
 180                 const apiURLHeader: APIURLHEADER = {
 181                     url: environment.NETWORKSLICETEMPLATECONTENT_URL,
 182                     httpOptions: { headers: this.headers }
 183                 };
 184                 this.saveFileData(apiURLHeader, fileContent);
 185             }).catch((err: string): void => {
 186                 this.isLoadingResults = false;
 187                 if (err === 'typeError') {
 188                     this.notifierService.notify('error', this.translateService.instant('YAMLFILETYPEERRROR'));
 189                 } else {
 190                     this.notifierService.notify('error', this.translateService.instant('ERROR'));
 191                 }
 192             });
 193         } else if (files && files.length > 1) {
 194             this.notifierService.notify('error', this.translateService.instant('DROPFILESVALIDATION'));
 195         }
 196     }
 197
 198     /** Post the droped files and reload the page @public */
 199     public saveFileData(urlHeader: APIURLHEADER, fileData: {}): void {
 200         this.fileInput.nativeElement.value = null;
 201         this.restService.postResource(urlHeader, fileData).subscribe((result: {}) => {
 202             this.notifierService.notify('success', this.translateService.instant('PAGE.NETSLICE.TEMPLATECREATEDSUCCESSFULLY'));
 203             this.generateData();
 204         }, (error: ERRORDATA) => {
 205             this.restService.handleError(error, 'post');
 206             this.isLoadingResults = false;
 207         });
 208     }
 209
 210     /** Generate nsData object from loop and return for the datasource @public */
 211     public generateNetworkSliceData(networkSlicePackageData: NetworkSliceModel): NetworkSliceData {
 212         return {
 213             name: networkSlicePackageData.name,
 214             identifier: networkSlicePackageData._id,
 215             usageState: networkSlicePackageData._admin.usageState
 216         };
 217     }
 218
 219     /**
 220      * Lifecyle hook which get trigger on component destruction
 221      */
 222     public ngOnDestroy(): void {
 223         this.generateDataSub.unsubscribe();
 224     }
 225
 226     /** Fetching the data from server to Load in the smarttable @protected */
 227     protected generateData(): void {
 228         this.isLoadingResults = true;
 229         this.restService.getResource(environment.NETWORKSLICETEMPLATECONTENT_URL).subscribe((networkSliceList: NetworkSliceModel[]) => {
 230             this.networkSliceData = [];
 231             networkSliceList.forEach((networkSlicePackageData: NetworkSliceModel) => {
 232                 const networkSliceDataObj: NetworkSliceData = this.generateNetworkSliceData(networkSlicePackageData);
 233                 this.networkSliceData.push(networkSliceDataObj);
 234             });
 235             if (this.networkSliceData.length > 0) {
 236                 this.checkDataClass = 'dataTables_present';
 237             } else {
 238                 this.checkDataClass = 'dataTables_empty';
 239             }
 240             this.dataSource.load(this.networkSliceData).then((data: boolean) => {
 241                 this.isLoadingResults = false;
 242             }).catch(() => {
 243                 this.isLoadingResults = false;
 244             });
 245         }, (error: ERRORDATA) => {
 246             this.restService.handleError(error, 'get');
 247             this.isLoadingResults = false;
 248         });
 249     }
 250 }