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         const modalRef: NgbModalRef = this.modalService.open(InstantiateNetSliceTemplateComponent, { backdrop: 'static' });
 142         modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
 143             if (result) {
 144                 this.generateData();
 145             }
 146         }).catch();
 147     }
 148
 149     /** Generate smart table row title and filters @public  */
 150     public generateTableSettings(): void {
 151         this.settings = {
 152             columns: this.columnLists,
 153             actions: { add: false, edit: false, delete: false, position: 'right' },
 154             attr: this.sharedService.tableClassConfig(),
 155             pager: this.sharedService.paginationPagerConfig(),
 156             noDataMessage: this.translateService.instant('NODATAMSG')
 157         };
 158     }
 159
 160     /** Generate smart table row title and filters @public  */
 161     public generateTableColumn(): void {
 162         this.columnLists = {
 163             name: { title: this.translateService.instant('NAME'), width: '15%', sortDirection: 'asc' },
 164             identifier: { title: this.translateService.instant('IDENTIFIER'), width: '15%' },
 165             NstName: { title: this.translateService.instant('NSTNAME'), width: '15%' },
 166             OperationalStatus: {
 167                 type: 'html',
 168                 title: this.translateService.instant('OPERATIONALSTATUS'),
 169                 width: '15%',
 170                 filter: {
 171                     type: 'list',
 172                     config: {
 173                         selectText: 'Select',
 174                         list: [
 175                             { value: this.operationalStateFirstStep, title: this.operationalStateFirstStep },
 176                             { value: this.operationalStateSecondStep, title: this.operationalStateSecondStep },
 177                             { value: this.operationalStateThirdStep, title: this.operationalStateThirdStep }
 178                         ]
 179                     }
 180                 },
 181                 valuePrepareFunction: (cell: NSTInstanceData, row: NSTInstanceData): string => {
 182                     if (row.OperationalStatus === this.operationalStateFirstStep) {
 183                         return `<span class="icon-label" title="${row.OperationalStatus}">
 184                         <i class="fas fa-clock text-warning"></i>
 185                         </span>`;
 186                     } else if (row.OperationalStatus === this.operationalStateSecondStep) {
 187                         return `<span class="icon-label" title="${row.OperationalStatus}">
 188                         <i class="fas fa-check-circle text-success"></i>
 189                         </span>`;
 190                     } else if (row.OperationalStatus === this.operationalStateThirdStep) {
 191                         return `<span class="icon-label" title="${row.OperationalStatus}">
 192                         <i class="fas fa-times-circle text-danger"></i>
 193                         </span>`;
 194                     } else {
 195                         return `<span>${row.OperationalStatus}</span>`;
 196                     }
 197                 }
 198             },
 199             ConfigStatus: {
 200                 type: 'html',
 201                 title: this.translateService.instant('CONFIGSTATUS'),
 202                 width: '15%',
 203                 filter: {
 204                     type: 'list',
 205                     config: {
 206                         selectText: 'Select',
 207                         list: [
 208                             { value: this.configStateFirstStep, title: this.configStateFirstStep },
 209                             { value: this.configStateSecondStep, title: this.configStateSecondStep },
 210                             { value: this.configStateThirdStep, title: this.configStateThirdStep }
 211                         ]
 212                     }
 213                 },
 214                 valuePrepareFunction: (cell: NSTInstanceData, row: NSTInstanceData): string => {
 215                     if (row.ConfigStatus === this.configStateFirstStep) {
 216                         return `<span class="icon-label" title="${row.ConfigStatus}">
 217                         <i class="fas fa-clock text-warning"></i>
 218                         </span>`;
 219                     } else if (row.ConfigStatus === this.configStateSecondStep) {
 220                         return `<span class="icon-label" title="${row.ConfigStatus}">
 221                         <i class="fas fa-check-circle text-success"></i>
 222                         </span>`;
 223                     } else if (row.ConfigStatus === this.configStateThirdStep) {
 224                         return `<span class="icon-label" title="${row.ConfigStatus}">
 225                         <i class="fas fa-times-circle text-danger"></i>
 226                         </span>`;
 227                     } else {
 228                         return `<span>${row.ConfigStatus}</span>`;
 229                     }
 230                 }
 231             },
 232             DetailedStatus: { title: this.translateService.instant('DETAILEDSTATUS'), width: '15%' },
 233             Actions: {
 234                 name: 'Action', width: '10%', filter: false, sort: false, title: this.translateService.instant('ACTIONS'), type: 'custom',
 235                 valuePrepareFunction: (cell: NSTInstanceData, row: NSTInstanceData): NSTInstanceData => row,
 236                 renderComponent: NetsliceInstancesActionComponent
 237             }
 238         };
 239     }
 240
 241     /** generateData initiate the net-slice-instance list @public */
 242     public generateData(): void {
 243         this.isLoadingResults = true;
 244         this.restService.getResource(environment.NETWORKSLICEINSTANCESCONTENT_URL)
 245             .subscribe((netSliceInstancesData: NSTInstanceDetails[]) => {
 246             this.nstInstanceData = [];
 247             netSliceInstancesData.forEach((netSliceInstanceData: NSTInstanceDetails) => {
 248                 if (netSliceInstanceData['config-status'] !== undefined) {
 249                     this.configStatusCheck = netSliceInstanceData['config-status'];
 250                 } else {
 251                     this.configStatusCheck = netSliceInstanceData['operational-status'];
 252                 }
 253                 const netSliceDataObj: NSTInstanceData = {
 254                     name: netSliceInstanceData.name,
 255                     identifier: netSliceInstanceData.id,
 256                     NstName: netSliceInstanceData['nst-ref'],
 257                     OperationalStatus: netSliceInstanceData['operational-status'],
 258                     ConfigStatus: this.configStatusCheck,
 259                     DetailedStatus: netSliceInstanceData['detailed-status']
 260                 };
 261                 this.nstInstanceData.push(netSliceDataObj);
 262             });
 263             if (this.nstInstanceData.length > 0) {
 264                 this.checkDataClass = 'dataTables_present';
 265             } else {
 266                 this.checkDataClass = 'dataTables_empty';
 267             }
 268             this.dataSource.load(this.nstInstanceData).then((data: {}) => {
 269                 this.isLoadingResults = false;
 270             }).catch();
 271         }, (error: ERRORDATA) => {
 272             this.restService.handleError(error, 'get');
 273             this.isLoadingResults = false;
 274         });
 275     }
 276
 277     /**
 278      * Lifecyle hook which get trigger on component destruction
 279      */
 280     public ngOnDestroy(): void {
 281         this.generateDataSub.unsubscribe();
 282     }
 283 }