src/app/instances/ns-instances/NSInstancesComponent.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 Instance Component
  20  */
  21 import { Component, Injector, OnInit, ViewChild } from '@angular/core';
  22 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
  23 import { TranslateService } from '@ngx-translate/core';
  24 import { CONFIGCONSTANT, ERRORDATA, MODALCLOSERESPONSEDATA } from 'CommonModel';
  25 import { DataService } from 'DataService';
  26 import { DeleteComponent } from 'DeleteComponent';
  27 import { environment } from 'environment';
  28 import { InstantiateNsComponent } from 'InstantiateNs';
  29 import { LocalDataSource, Ng2SmartTableComponent } from 'ng2-smart-table';
  30 import { NSDInstanceData, NSInstanceDetails } from 'NSInstanceModel';
  31 import { NSInstancesActionComponent } from 'NSInstancesActionComponent';
  32 import { RestService } from 'RestService';
  33 import { Subscription } from 'rxjs';
  34 import { isNullOrUndefined } from 'SharedService';
  35 import { SharedService } from 'SharedService';
  36
  37 /**
  38  * Creating component
  39  * @Component takes NSInstancesComponent.html as template url
  40  */
  41 @Component({
  42     templateUrl: './NSInstancesComponent.html',
  43     styleUrls: ['./NSInstancesComponent.scss']
  44 })
  45 /** Exporting a class @exports NSInstancesComponent */
  46 export class NSInstancesComponent implements OnInit {
  47     @ViewChild('table') table: Ng2SmartTableComponent;
  48
  49     /** Injector to invoke other services @public */
  50     public injector: Injector;
  51
  52     /** NS Instance array @public */
  53     public nsInstanceData: object[] = [];
  54
  55     /** Datasource instance @public */
  56     public dataSource: LocalDataSource = new LocalDataSource();
  57
  58     /** SelectedRows array @public */
  59     // eslint-disable-next-line @typescript-eslint/no-explicit-any
  60     public selectedRows: any;
  61
  62     /** Selected list array @public */
  63     public selectList: [] = [];
  64
  65     /** Instance component are stored in settings @public */
  66     public settings: {} = {};
  67
  68     /** Contains objects for menu settings @public */
  69     public columnList: {} = {};
  70
  71     /** Check the loading results @public */
  72     public isLoadingResults: boolean = true;
  73
  74     /** Give the message for the loading @public */
  75     public message: string = 'PLEASEWAIT';
  76
  77     /** Class for empty and present data @public */
  78     public checkDataClass: string;
  79
  80     /** operational State init data @public */
  81     public operationalStateFirstStep: string = CONFIGCONSTANT.operationalStateFirstStep;
  82
  83     /** operational State running data @public */
  84     public operationalStateSecondStep: string = CONFIGCONSTANT.operationalStateSecondStep;
  85
  86     /** operational State failed data @public */
  87     public operationalStateThirdStep: string = CONFIGCONSTANT.operationalStateThirdStep;
  88
  89     /** operational State scaling data @public */
  90     public operationalStateFourthStep: string = CONFIGCONSTANT.operationalStateFourthStep;
  91
  92     /** operational State healing data @public */
  93     public operationalStateFifthStep: string = CONFIGCONSTANT.operationalStateFifthStep;
  94
  95     /** Config State init data @public */
  96     public configStateFirstStep: string = CONFIGCONSTANT.configStateFirstStep;
  97
  98     /** Config State init data @public */
  99     public configStateSecondStep: string = CONFIGCONSTANT.configStateSecondStep;
 100
 101     /** Config State init data @public */
 102     public configStateThirdStep: string = CONFIGCONSTANT.configStateThirdStep;
 103
 104     /** Instance of the modal service @private */
 105     private modalService: NgbModal;
 106
 107     /** dataService to pass the data from one component to another @private */
 108     private dataService: DataService;
 109
 110     /** Utilizes rest service for any CRUD operations @private */
 111     private restService: RestService;
 112
 113     /** Contains all methods related to shared @private */
 114     private sharedService: SharedService;
 115
 116     /** Contains tranlsate instance @private */
 117     private translateService: TranslateService;
 118
 119     /** Instance of subscriptions @private */
 120     private generateDataSub: Subscription;
 121
 122     constructor(injector: Injector) {
 123         this.injector = injector;
 124         this.restService = this.injector.get(RestService);
 125         this.dataService = this.injector.get(DataService);
 126         this.sharedService = this.injector.get(SharedService);
 127         this.translateService = this.injector.get(TranslateService);
 128         this.modalService = this.injector.get(NgbModal);
 129     }
 130
 131     /**
 132      * Lifecyle Hooks the trigger before component is instantiate
 133      */
 134     public ngOnInit(): void {
 135         this.generateTableColumn();
 136         this.generateTableSettings();
 137         this.generateData();
 138         this.generateDataSub = this.sharedService.dataEvent.subscribe((): void => { this.generateData(); });
 139     }
 140
 141     /** Generate smart table row title and filters @public  */
 142     public generateTableSettings(): void {
 143         this.settings = {
 144             selectMode: 'multi',
 145             columns: this.columnList,
 146             actions: { add: false, edit: false, delete: false, position: 'right' },
 147             attr: this.sharedService.tableClassConfig(),
 148             pager: this.sharedService.paginationPagerConfig(),
 149             noDataMessage: this.translateService.instant('NODATAMSG')
 150         };
 151     }
 152
 153     /** Generate smart table row title and filters @public  */
 154     public generateTableColumn(): void {
 155         this.columnList = {
 156             name: { title: this.translateService.instant('NAME'), width: '15%' },
 157             identifier: { title: this.translateService.instant('IDENTIFIER'), width: '20%' },
 158             NsdName: { title: this.translateService.instant('NSDNAME'), width: '15%' },
 159             'create-time': {
 160                 title: this.translateService.instant('DATE'), width: '15%', sortDirection: 'desc',
 161                 compareFunction: this.sharedService.compareFunction
 162             },
 163             OperationalStatus: {
 164                 title: this.translateService.instant('OPERATIONALSTATUS'), width: '10%', type: 'html',
 165                 filter: {
 166                     type: 'list',
 167                     config: {
 168                         selectText: 'Select',
 169                         list: [
 170                             { value: this.operationalStateFirstStep, title: this.operationalStateFirstStep },
 171                             { value: this.operationalStateSecondStep, title: this.operationalStateSecondStep },
 172                             { value: this.operationalStateThirdStep, title: this.operationalStateThirdStep },
 173                             { value: this.operationalStateFourthStep, title: this.operationalStateFourthStep },
 174                             { value: this.operationalStateFifthStep, title: this.operationalStateFifthStep }
 175                         ]
 176                     }
 177                 },
 178                 valuePrepareFunction: (cell: NSDInstanceData, row: NSDInstanceData): string => {
 179                     if (row.OperationalStatus === this.operationalStateFirstStep) {
 180                         return `<span class="icon-label" title="${row.OperationalStatus}">
 181                            <i class="fas fa-clock text-warning"></i>
 182                            </span>`;
 183                     } else if (row.OperationalStatus === this.operationalStateSecondStep) {
 184                         return `<span class="icon-label" title="${row.OperationalStatus}">
 185                            <i class="fas fa-check-circle text-success"></i>
 186                            </span>`;
 187                     } else if (row.OperationalStatus === this.operationalStateThirdStep) {
 188                         return `<span class="icon-label" title="${row.OperationalStatus}">
 189                            <i class="fas fa-times-circle text-danger"></i>
 190                            </span>`;
 191                     } else if (row.OperationalStatus === this.operationalStateFourthStep) {
 192                         return `<span class="icon-label" title="${row.OperationalStatus}">
 193                            <i class="fas fa-compress-alt text-success"></i>
 194                            </span>`;
 195                     }
 196                     else if (row.OperationalStatus === this.operationalStateFifthStep) {
 197                         return `<span class="icon-label" title="${row.OperationalStatus}">
 198                            <i class="fas fa-briefcase-medical text-success"></i>
 199                            </span>`;
 200                     } else {
 201                         return `<span>${row.OperationalStatus}</span>`;
 202                     }
 203                 }
 204             },
 205             ConfigStatus: {
 206                 title: this.translateService.instant('CONFIGSTATUS'), width: '10%', type: 'html',
 207                 filter: {
 208                     type: 'list',
 209                     config: {
 210                         selectText: 'Select',
 211                         list: [
 212                             { value: this.configStateFirstStep, title: this.configStateFirstStep },
 213                             { value: this.configStateSecondStep, title: this.configStateSecondStep },
 214                             { value: this.configStateThirdStep, title: this.configStateThirdStep }
 215                         ]
 216                     }
 217                 },
 218                 valuePrepareFunction: (cell: NSDInstanceData, row: NSDInstanceData): string => {
 219                     if (row.ConfigStatus === this.configStateFirstStep) {
 220                         return `<span class="icon-label" title="${row.ConfigStatus}">
 221                            <i class="fas fa-clock text-warning"></i>
 222                            </span>`;
 223                     } else if (row.ConfigStatus === this.configStateSecondStep) {
 224                         return `<span class="icon-label" title="${row.ConfigStatus}">
 225                            <i class="fas fa-check-circle text-success"></i>
 226                            </span>`;
 227                     } else if (row.ConfigStatus === this.configStateThirdStep) {
 228                         return `<span class="icon-label" title="${row.ConfigStatus}">
 229                            <i class="fas fa-times-circle text-danger"></i>
 230                            </span>`;
 231                     } else {
 232                         return `<span>${row.ConfigStatus}</span>`;
 233                     }
 234                 }
 235             },
 236             DetailedStatus: { title: this.translateService.instant('DETAILEDSTATUS'), width: '15%' },
 237             Actions: {
 238                 name: 'Action', width: '15%', filter: false, sort: false, type: 'custom',
 239                 title: this.translateService.instant('ACTIONS'),
 240                 valuePrepareFunction: (cell: NSDInstanceData, row: NSDInstanceData): NSDInstanceData => row,
 241                 renderComponent: NSInstancesActionComponent
 242             }
 243         };
 244     }
 245
 246     /** generateData initiate the ns-instance list @public */
 247     public generateData(): void {
 248         this.isLoadingResults = true;
 249         this.restService.getResource(environment.NSDINSTANCES_URL).subscribe((nsdInstancesData: NSInstanceDetails[]): void => {
 250             this.nsInstanceData = [];
 251             nsdInstancesData.forEach((nsdInstanceData: NSInstanceDetails): void => {
 252                 const nsDataObj: NSDInstanceData = {
 253                     name: nsdInstanceData.name,
 254                     identifier: nsdInstanceData.id,
 255                     NsdName: nsdInstanceData['nsd-name-ref'],
 256                     OperationalStatus: nsdInstanceData['operational-status'],
 257                     ConfigStatus: nsdInstanceData['config-status'],
 258                     DetailedStatus: nsdInstanceData['detailed-status'],
 259                     memberIndex: nsdInstanceData.nsd.df,
 260                     nsConfig: nsdInstanceData.nsd['ns-configuration'],
 261                     adminDetails: nsdInstanceData._admin,
 262                     vnfID: nsdInstanceData['vnfd-id'],
 263                     nsd: nsdInstanceData.nsd,
 264                     'nsd-id': nsdInstanceData['nsd-id'],
 265                     vcaStatus: nsdInstanceData.vcaStatus,
 266                     constituent: nsdInstanceData['constituent-vnfr-ref'],
 267                     'create-time': this.sharedService.convertEpochTime(Number(nsdInstanceData['create-time']))
 268                 };
 269                 this.nsInstanceData.push(nsDataObj);
 270             });
 271             if (this.nsInstanceData.length > 0) {
 272                 this.checkDataClass = 'dataTables_present';
 273             } else {
 274                 this.checkDataClass = 'dataTables_empty';
 275             }
 276             this.dataSource.load(this.nsInstanceData).then((data: {}): void => {
 277                 this.isLoadingResults = false;
 278             }).catch((): void => {
 279                 // Catch Navigation Error
 280             });
 281         }, (error: ERRORDATA): void => {
 282             this.restService.handleError(error, 'get');
 283             this.isLoadingResults = false;
 284         });
 285     }
 286
 287     /** smart table listing manipulation @public */
 288     public onChange(perPageValue: number): void {
 289         this.dataSource.setPaging(1, perPageValue, true);
 290     }
 291
 292     /** smart table listing manipulation @public */
 293     public onUserRowSelect(event: MessageEvent): void {
 294         if (!isNullOrUndefined(event)) {
 295             this.selectedRows = event;
 296             if (this.selectedRows.selected.length !== 0) {
 297                 this.selectList = this.selectedRows.selected;
 298             } else {
 299                 if (!isNullOrUndefined(event.data)) {
 300                     Object.assign(event.data, { page: 'ns-instance' });
 301                     this.dataService.changeMessage(event.data);
 302                 }
 303                 this.selectList.length = 0;
 304             }
 305         }
 306     }
 307
 308     /** delete NS using modalservice @public */
 309     public deleteNS(): void {
 310         // eslint-disable-next-line security/detect-non-literal-fs-filename
 311         const modalRef: NgbModalRef = this.modalService.open(DeleteComponent, { backdrop: 'static' });
 312         modalRef.componentInstance.params = {
 313             identifierList: this.selectList,
 314             page: 'instantiateNS'
 315         };
 316         modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
 317             if (result) {
 318                 this.sharedService.callData();
 319                 this.table.isAllSelected = false;
 320                 this.selectList.length = 0;
 321             }
 322         }).catch((): void => {
 323             // Catch Navigation Error
 324         });
 325     }
 326
 327     /** Instantiate NS using modalservice @public */
 328     public instantiateNS(): void {
 329         // eslint-disable-next-line security/detect-non-literal-fs-filename
 330         const modalRef: NgbModalRef = this.modalService.open(InstantiateNsComponent, { backdrop: 'static' });
 331         modalRef.componentInstance.params = {
 332             titleName: 'instantiateNS'
 333         };
 334         modalRef.result.then((result: MODALCLOSERESPONSEDATA): void => {
 335             if (result) {
 336                 this.generateData();
 337             }
 338         }).catch((): void => {
 339             // Catch Navigation Error
 340         });
 341     }
 342
 343     /**
 344      * Lifecyle hook which get trigger on component destruction
 345      */
 346     public ngOnDestroy(): void {
 347         this.generateDataSub.unsubscribe();
 348     }
 349 }