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