src/app/instances/netslice-instances/NetsliceInstancesComponent.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 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 { InstantiateNetSliceTemplateComponent } from 'InstantiateNetSliceTemplate';
  28 import { NetsliceInstancesActionComponent } from 'NetsliceInstancesActionComponent';
  29 import { NSTInstanceData, NSTInstanceDetails } 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 NetsliceInstancesComponent.html as template url
  38  */
  39 @Component({
  40     templateUrl: './NetsliceInstancesComponent.html',
  41     styleUrls: ['./NetsliceInstancesComponent.scss']
  42 })
  43
  44 /** Exporting a class @exports NetsliceInstancesComponent */
  45 export class NetsliceInstancesComponent implements OnInit {
  46     /** To inject services @public */
  47     public injector: Injector;
  48
  49     /** handle translate @public */
  50     public translateService: TranslateService;
  51
  52     /** Columns list of the smart table @public */
  53     public columnLists: object = {};
  54
  55     /** Settings for smarttable to populate the table with columns @public */
  56     public settings: object = {};
  57
  58     /** Datasource instance inititated  @public */
  59     public dataSource: LocalDataSource = new LocalDataSource();
  60
  61     /** Datasource table Data for the NST @public */
  62     public nstInstanceData: NSTInstanceData[] = [];
  63
  64     /** Check the loading results @public */
  65     public isLoadingResults: boolean = true;
  66
  67     /** Give the message for the loading @public */
  68     public message: string = 'PLEASEWAIT';
  69
  70     /** Class for empty and present data @public */
  71     public checkDataClass: string;
  72
  73     /** operational State init data @public */
  74     public operationalStateFirstStep: string = CONFIGCONSTANT.operationalStateFirstStep;
  75
  76     /** operational State running data @public */
  77     public operationalStateSecondStep: string = CONFIGCONSTANT.operationalStateSecondStep;
  78
  79     /** operational State failed data @public */
  80     public operationalStateThirdStep: string = CONFIGCONSTANT.operationalStateThirdStep;
  81
  82     /** Config State init data @public */
  83     public configStateFirstStep: string = CONFIGCONSTANT.configStateFirstStep;
  84
  85     /** Config State init data @public */
  86     public configStateSecondStep: string = CONFIGCONSTANT.configStateSecondStep;
  87
  88     /** Config State init data @public */
  89     public configStateThirdStep: string = CONFIGCONSTANT.configStateThirdStep;
  90
  91     /** config status assign @public */
  92     public configStatusCheck: string;
  93
  94     /** To consume REST API calls @private */
  95     private dataService: DataService;
  96
  97     /** Utilizes rest service for any CRUD operations @public */
  98     private restService: RestService;
  99
 100     /** Contains all methods related to shared @private */
 101     private sharedService: SharedService;
 102
 103     /** Instance of the modal service @private */
 104     private modalService: NgbModal;
 105
 106     /** Instance of subscriptions @private */
 107     private generateDataSub: Subscription;
 108
 109     constructor(injector: Injector) {
 110         this.injector = injector;
 111         this.restService = this.injector.get(RestService);
 112         this.translateService = this.injector.get(TranslateService);
 113         this.sharedService = this.injector.get(SharedService);
 114         this.modalService = this.injector.get(NgbModal);
 115         this.dataService = this.injector.get(DataService);
 116     }
 117
 118     /**
 119      * Lifecyle Hooks the trigger before component is instantiate
 120      */
 121     public ngOnInit(): void {
 122         this.generateTableColumn();
 123         this.generateTableSettings();
 124         this.generateData();
 125         this.generateDataSub = this.sharedService.dataEvent.subscribe(() => { this.generateData(); });
 126     }
 127
 128     /** smart table listing manipulation @private */
 129     public onChange(perPageValue: number): void {
 130         this.dataSource.setPaging(1, perPageValue, true);
 131     }
 132
 133     /** smart table listing manipulation @private */
 134     public onUserRowSelect(event: MessageEvent): void {
 135         Object.assign(event.data, { page: 'net-slice-instance' });
 136         this.dataService.changeMessage(event.data);
 137     }
 138
 139     /** Instantiate Net Slice using modalservice @public */
 140     public instantiateNetSlice(): void {
 141         // eslint-disable-next-line security/detect-non-literal-fs-filename
 142         const modalRef: NgbModalRef = this.modalService.open(InstantiateNetSliceTemplateComponent, { backdrop: 'static' });
 143         modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
 144             if (result) {
 145                 this.generateData();
 146             }
 147         }).catch((): void => {
 148             // Catch Navigation Error
 149         });
 150     }
 151
 152     /** Generate smart table row title and filters @public  */
 153     public generateTableSettings(): void {
 154         this.settings = {
 155             columns: this.columnLists,
 156             actions: { add: false, edit: false, delete: false, position: 'right' },
 157             attr: this.sharedService.tableClassConfig(),
 158             pager: this.sharedService.paginationPagerConfig(),
 159             noDataMessage: this.translateService.instant('NODATAMSG')
 160         };
 161     }
 162
 163     /** Generate smart table row title and filters @public  */
 164     public generateTableColumn(): void {
 165         this.columnLists = {
 166             name: { title: this.translateService.instant('NAME'), width: '15%', sortDirection: 'asc' },
 167             identifier: { title: this.translateService.instant('IDENTIFIER'), width: '15%' },
 168             NstName: { title: this.translateService.instant('NSTNAME'), width: '15%' },
 169             OperationalStatus: {
 170                 type: 'html',
 171                 title: this.translateService.instant('OPERATIONALSTATUS'),
 172                 width: '15%',
 173                 filter: {
 174                     type: 'list',
 175                     config: {
 176                         selectText: 'Select',
 177                         list: [
 178                             { value: this.operationalStateFirstStep, title: this.operationalStateFirstStep },
 179                             { value: this.operationalStateSecondStep, title: this.operationalStateSecondStep },
 180                             { value: this.operationalStateThirdStep, title: this.operationalStateThirdStep }
 181                         ]
 182                     }
 183                 },
 184                 valuePrepareFunction: (cell: NSTInstanceData, row: NSTInstanceData): string => {
 185                     if (row.OperationalStatus === this.operationalStateFirstStep) {
 186                         return `<span class="icon-label" title="${row.OperationalStatus}">
 187                         <i class="fas fa-clock text-warning"></i>
 188                         </span>`;
 189                     } else if (row.OperationalStatus === this.operationalStateSecondStep) {
 190                         return `<span class="icon-label" title="${row.OperationalStatus}">
 191                         <i class="fas fa-check-circle text-success"></i>
 192                         </span>`;
 193                     } else if (row.OperationalStatus === this.operationalStateThirdStep) {
 194                         return `<span class="icon-label" title="${row.OperationalStatus}">
 195                         <i class="fas fa-times-circle text-danger"></i>
 196                         </span>`;
 197                     } else {
 198                         return `<span>${row.OperationalStatus}</span>`;
 199                     }
 200                 }
 201             },
 202             ConfigStatus: {
 203                 type: 'html',
 204                 title: this.translateService.instant('CONFIGSTATUS'),
 205                 width: '15%',
 206                 filter: {
 207                     type: 'list',
 208                     config: {
 209                         selectText: 'Select',
 210                         list: [
 211                             { value: this.configStateFirstStep, title: this.configStateFirstStep },
 212                             { value: this.configStateSecondStep, title: this.configStateSecondStep },
 213                             { value: this.configStateThirdStep, title: this.configStateThirdStep }
 214                         ]
 215                     }
 216                 },
 217                 valuePrepareFunction: (cell: NSTInstanceData, row: NSTInstanceData): string => {
 218                     if (row.ConfigStatus === this.configStateFirstStep) {
 219                         return `<span class="icon-label" title="${row.ConfigStatus}">
 220                         <i class="fas fa-clock text-warning"></i>
 221                         </span>`;
 222                     } else if (row.ConfigStatus === this.configStateSecondStep) {
 223                         return `<span class="icon-label" title="${row.ConfigStatus}">
 224                         <i class="fas fa-check-circle text-success"></i>
 225                         </span>`;
 226                     } else if (row.ConfigStatus === this.configStateThirdStep) {
 227                         return `<span class="icon-label" title="${row.ConfigStatus}">
 228                         <i class="fas fa-times-circle text-danger"></i>
 229                         </span>`;
 230                     } else {
 231                         return `<span>${row.ConfigStatus}</span>`;
 232                     }
 233                 }
 234             },
 235             DetailedStatus: { title: this.translateService.instant('DETAILEDSTATUS'), width: '15%' },
 236             Actions: {
 237                 name: 'Action', width: '10%', filter: false, sort: false, title: this.translateService.instant('ACTIONS'), type: 'custom',
 238                 valuePrepareFunction: (cell: NSTInstanceData, row: NSTInstanceData): NSTInstanceData => row,
 239                 renderComponent: NetsliceInstancesActionComponent
 240             }
 241         };
 242     }
 243
 244     /** generateData initiate the net-slice-instance list @public */
 245     public generateData(): void {
 246         this.isLoadingResults = true;
 247         this.restService.getResource(environment.NETWORKSLICEINSTANCESCONTENT_URL)
 248             .subscribe((netSliceInstancesData: NSTInstanceDetails[]) => {
 249             this.nstInstanceData = [];
 250             netSliceInstancesData.forEach((netSliceInstanceData: NSTInstanceDetails) => {
 251                 if (netSliceInstanceData['config-status'] !== undefined) {
 252                     this.configStatusCheck = netSliceInstanceData['config-status'];
 253                 } else {
 254                     this.configStatusCheck = netSliceInstanceData['operational-status'];
 255                 }
 256                 const netSliceDataObj: NSTInstanceData = {
 257                     name: netSliceInstanceData.name,
 258                     identifier: netSliceInstanceData.id,
 259                     NstName: netSliceInstanceData['nst-ref'],
 260                     OperationalStatus: netSliceInstanceData['operational-status'],
 261                     ConfigStatus: this.configStatusCheck,
 262                     DetailedStatus: netSliceInstanceData['detailed-status']
 263                 };
 264                 this.nstInstanceData.push(netSliceDataObj);
 265             });
 266             if (this.nstInstanceData.length > 0) {
 267                 this.checkDataClass = 'dataTables_present';
 268             } else {
 269                 this.checkDataClass = 'dataTables_empty';
 270             }
 271             this.dataSource.load(this.nstInstanceData).then((data: {}) => {
 272                 this.isLoadingResults = false;
 273             }).catch((): void => {
 274                 // Catch Navigation Error
 275             });
 276         }, (error: ERRORDATA) => {
 277             this.restService.handleError(error, 'get');
 278             this.isLoadingResults = false;
 279         });
 280     }
 281
 282     /**
 283      * Lifecyle hook which get trigger on component destruction
 284      */
 285     public ngOnDestroy(): void {
 286         this.generateDataSub.unsubscribe();
 287     }
 288 }