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%', sortDirection: 'asc' },
 148             identifier: { title: this.translateService.instant('IDENTIFIER'), width: '20%' },
 149             NsdName: { title: this.translateService.instant('NSDNAME'), width: '15%' },
 150             OperationalStatus: {
 151                 title: this.translateService.instant('OPERATIONALSTATUS'), width: '10%', type: 'html',
 152                 filter: {
 153                     type: 'list',
 154                     config: {
 155                         selectText: 'Select',
 156                         list: [
 157                             { value: this.operationalStateFirstStep, title: this.operationalStateFirstStep },
 158                             { value: this.operationalStateSecondStep, title: this.operationalStateSecondStep },
 159                             { value: this.operationalStateThirdStep, title: this.operationalStateThirdStep },
 160                             { value: this.operationalStateFourthStep, title: this.operationalStateFourthStep }
 161                         ]
 162                     }
 163                 },
 164                 valuePrepareFunction: (cell: NSDInstanceData, row: NSDInstanceData): string => {
 165                     if (row.OperationalStatus === this.operationalStateFirstStep) {
 166                         return `<span class="icon-label" title="${row.OperationalStatus}">
 167                         <i class="fas fa-clock text-warning"></i>
 168                         </span>`;
 169                     } else if (row.OperationalStatus === this.operationalStateSecondStep) {
 170                         return `<span class="icon-label" title="${row.OperationalStatus}">
 171                         <i class="fas fa-check-circle text-success"></i>
 172                         </span>`;
 173                     } else if (row.OperationalStatus === this.operationalStateThirdStep) {
 174                         return `<span class="icon-label" title="${row.OperationalStatus}">
 175                         <i class="fas fa-times-circle text-danger"></i>
 176                         </span>`;
 177                     } else if (row.OperationalStatus === this.operationalStateFourthStep) {
 178                         return `<span class="icon-label" title="${row.OperationalStatus}">
 179                         <i class="fas fa-compress-alt text-success"></i>
 180                         </span>`;
 181                     } else {
 182                         return `<span>${row.OperationalStatus}</span>`;
 183                     }
 184                 }
 185             },
 186             ConfigStatus: {
 187                 title: this.translateService.instant('CONFIGSTATUS'), width: '10%', type: 'html',
 188                 filter: {
 189                     type: 'list',
 190                     config: {
 191                         selectText: 'Select',
 192                         list: [
 193                             { value: this.configStateFirstStep, title: this.configStateFirstStep },
 194                             { value: this.configStateSecondStep, title: this.configStateSecondStep },
 195                             { value: this.configStateThirdStep, title: this.configStateThirdStep }
 196                         ]
 197                     }
 198                 },
 199                 valuePrepareFunction: (cell: NSDInstanceData, row: NSDInstanceData): string => {
 200                     if (row.ConfigStatus === this.configStateFirstStep) {
 201                         return `<span class="icon-label" title="${row.ConfigStatus}">
 202                         <i class="fas fa-clock text-warning"></i>
 203                         </span>`;
 204                     } else if (row.ConfigStatus === this.configStateSecondStep) {
 205                         return `<span class="icon-label" title="${row.ConfigStatus}">
 206                         <i class="fas fa-check-circle text-success"></i>
 207                         </span>`;
 208                     } else if (row.ConfigStatus === this.configStateThirdStep) {
 209                         return `<span class="icon-label" title="${row.ConfigStatus}">
 210                         <i class="fas fa-times-circle text-danger"></i>
 211                         </span>`;
 212                     } else {
 213                         return `<span>${row.ConfigStatus}</span>`;
 214                     }
 215                 }
 216             },
 217             DetailedStatus: { title: this.translateService.instant('DETAILEDSTATUS'), width: '15%' },
 218             Actions: {
 219                 name: 'Action', width: '15%', filter: false, sort: false, type: 'custom',
 220                 title: this.translateService.instant('ACTIONS'),
 221                 valuePrepareFunction: (cell: NSDInstanceData, row: NSDInstanceData): NSDInstanceData => row,
 222                 renderComponent: NSInstancesActionComponent
 223             }
 224         };
 225     }
 226
 227     /** generateData initiate the ns-instance list @public */
 228     public generateData(): void {
 229         this.isLoadingResults = true;
 230         this.restService.getResource(environment.NSDINSTANCES_URL).subscribe((nsdInstancesData: NSInstanceDetails[]): void => {
 231             this.nsInstanceData = [];
 232             nsdInstancesData.forEach((nsdInstanceData: NSInstanceDetails): void => {
 233                 const nsDataObj: NSDInstanceData = {
 234                     name: nsdInstanceData.name,
 235                     identifier: nsdInstanceData.id,
 236                     NsdName: nsdInstanceData['nsd-name-ref'],
 237                     OperationalStatus: nsdInstanceData['operational-status'],
 238                     ConfigStatus: nsdInstanceData['config-status'],
 239                     DetailedStatus: nsdInstanceData['detailed-status'],
 240                     memberIndex: nsdInstanceData.nsd.df,
 241                     nsConfig: nsdInstanceData.nsd['ns-configuration'],
 242                     adminDetails: nsdInstanceData._admin,
 243                     vnfID: nsdInstanceData['vnfd-id'],
 244                     nsd: nsdInstanceData.nsd,
 245                     'nsd-id': nsdInstanceData['nsd-id'],
 246                     vcaStatus: nsdInstanceData.vcaStatus
 247                 };
 248                 this.nsInstanceData.push(nsDataObj);
 249             });
 250             if (this.nsInstanceData.length > 0) {
 251                 this.checkDataClass = 'dataTables_present';
 252             } else {
 253                 this.checkDataClass = 'dataTables_empty';
 254             }
 255             this.dataSource.load(this.nsInstanceData).then((data: {}): void => {
 256                 this.isLoadingResults = false;
 257             }).catch();
 258         }, (error: ERRORDATA): void => {
 259             this.restService.handleError(error, 'get');
 260             this.isLoadingResults = false;
 261         });
 262     }
 263
 264     /** smart table listing manipulation @public */
 265     public onChange(perPageValue: number): void {
 266         this.dataSource.setPaging(1, perPageValue, true);
 267     }
 268
 269     /** smart table listing manipulation @public */
 270     public onUserRowSelect(event: MessageEvent): void {
 271         Object.assign(event.data, { page: 'ns-instance' });
 272         this.dataService.changeMessage(event.data);
 273     }
 274
 275     /** Instantiate NS using modalservice @public */
 276     public instantiateNS(): void {
 277         const modalRef: NgbModalRef = this.modalService.open(InstantiateNsComponent, { backdrop: 'static' });
 278         modalRef.result.then((result: MODALCLOSERESPONSEDATA): void => {
 279             if (result) {
 280                 this.generateData();
 281             }
 282         }).catch();
 283     }
 284
 285     /**
 286      * Lifecyle hook which get trigger on component destruction
 287      */
 288     public ngOnDestroy(): void {
 289         this.generateDataSub.unsubscribe();
 290     }
 291 }