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                 };
 247                 this.nsInstanceData.push(nsDataObj);
 248             });
 249             if (this.nsInstanceData.length > 0) {
 250                 this.checkDataClass = 'dataTables_present';
 251             } else {
 252                 this.checkDataClass = 'dataTables_empty';
 253             }
 254             this.dataSource.load(this.nsInstanceData).then((data: {}): void => {
 255                 this.isLoadingResults = false;
 256             }).catch();
 257         }, (error: ERRORDATA): void => {
 258             this.restService.handleError(error, 'get');
 259             this.isLoadingResults = false;
 260         });
 261     }
 262
 263     /** smart table listing manipulation @public */
 264     public onChange(perPageValue: number): void {
 265         this.dataSource.setPaging(1, perPageValue, true);
 266     }
 267
 268     /** smart table listing manipulation @public */
 269     public onUserRowSelect(event: MessageEvent): void {
 270         Object.assign(event.data, { page: 'ns-instance' });
 271         this.dataService.changeMessage(event.data);
 272     }
 273
 274     /** Instantiate NS using modalservice @public */
 275     public instantiateNS(): void {
 276         const modalRef: NgbModalRef = this.modalService.open(InstantiateNsComponent, { backdrop: 'static' });
 277         modalRef.result.then((result: MODALCLOSERESPONSEDATA): void => {
 278             if (result) {
 279                 this.generateData();
 280             }
 281         }).catch();
 282     }
 283
 284     /**
 285      * Lifecyle hook which get trigger on component destruction
 286      */
 287     public ngOnDestroy(): void {
 288         this.generateDataSub.unsubscribe();
 289     }
 290 }