src/app/k8s/k8scluster/K8sClusterComponent.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 k8sclustercomponent.ts.
  20  */
  21 import { Component, Injector, OnDestroy, 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 { K8sActionComponent } from 'K8sActionComponent';
  28 import { K8sAddClusterComponent } from 'K8sAddClusterComponent';
  29 import { K8SCLUSTERDATA, K8SCLUSTERDATADISPLAY } from 'K8sModel';
  30 import { LocalDataSource } from 'ng2-smart-table';
  31 import { RestService } from 'RestService';
  32 import { Subscription } from 'rxjs';
  33 import { SharedService } from 'SharedService';
  34 /**
  35  * Creating Component
  36  * @Component takes K8sClusterComponent.html as template url
  37  */
  38 @Component({
  39   selector: 'app-k8scluster',
  40   templateUrl: './K8sClusterComponent.html',
  41   styleUrls: ['./K8sClusterComponent.scss']
  42 })
  43 /** Exporting a class @exports K8sClusterComponent */
  44 export class K8sClusterComponent implements OnInit, OnDestroy {
  45   /** To inject services @public */
  46   public injector: Injector;
  47
  48   /** handle translate @public */
  49   public translateService: TranslateService;
  50
  51   /** Data of smarttable populate through LocalDataSource @public */
  52   public dataSource: LocalDataSource = new LocalDataSource();
  53
  54   /** Columns list of the smart table @public */
  55   public columnList: object = {};
  56
  57   /** Settings for smarttable to populate the table with columns @public */
  58   public settings: object = {};
  59
  60   /** Check the loading results @public */
  61   public isLoadingResults: boolean = true;
  62
  63   /** Give the message for the loading @public */
  64   public message: string = 'PLEASEWAIT';
  65
  66   /** Class for empty and present data @public */
  67   public checkDataClass: string;
  68
  69   /** operational State init data @public */
  70   public operationalStateFirstStep: string = CONFIGCONSTANT.k8OperationalStateFirstStep;
  71
  72   /** operational State running data @public */
  73   public operationalStateSecondStep: string = CONFIGCONSTANT.k8OperationalStateStateSecondStep;
  74
  75   /** operational State failed data @public */
  76   public operationalStateThirdStep: string = CONFIGCONSTANT.k8OperationalStateThirdStep;
  77
  78   /** Instance of the rest service @private */
  79   private restService: RestService;
  80
  81   /** dataService to pass the data from one component to another @private */
  82   private dataService: DataService;
  83
  84   /** Formation of appropriate Data for LocalDatasource @private */
  85   private k8sClusterData: {}[] = [];
  86
  87   /** Contains all methods related to shared @private */
  88   private sharedService: SharedService;
  89
  90   /** Instance of the modal service @private */
  91   private modalService: NgbModal;
  92
  93   /** Instance of subscriptions @private */
  94   private generateDataSub: Subscription;
  95
  96   constructor(injector: Injector) {
  97     this.injector = injector;
  98     this.restService = this.injector.get(RestService);
  99     this.dataService = this.injector.get(DataService);
 100     this.sharedService = this.injector.get(SharedService);
 101     this.translateService = this.injector.get(TranslateService);
 102     this.modalService = this.injector.get(NgbModal);
 103   }
 104   /** Lifecyle Hooks the trigger before component is instantiate @public */
 105   public ngOnInit(): void {
 106     this.generateColumns();
 107     this.generateSettings();
 108     this.generateData();
 109     this.generateDataSub = this.sharedService.dataEvent.subscribe(() => { this.generateData(); });
 110   }
 111
 112   /** smart table Header Colums @public */
 113   public generateColumns(): void {
 114     this.columnList = {
 115       name: { title: this.translateService.instant('NAME'), width: '20%', sortDirection: 'asc' },
 116       identifier: { title: this.translateService.instant('IDENTIFIER'), width: '20%' },
 117       version: { title: this.translateService.instant('K8VERSION'), width: '10%' },
 118       operationalState: {
 119         title: this.translateService.instant('OPERATIONALSTATE'), width: '15%', type: 'html',
 120         filter: {
 121           type: 'list',
 122           config: {
 123             selectText: 'Select',
 124             list: [
 125               { value: this.operationalStateFirstStep, title: this.operationalStateFirstStep },
 126               { value: this.operationalStateSecondStep, title: this.operationalStateSecondStep },
 127               { value: this.operationalStateThirdStep, title: this.operationalStateThirdStep }
 128             ]
 129           }
 130         },
 131         valuePrepareFunction: (cell: K8SCLUSTERDATADISPLAY, row: K8SCLUSTERDATADISPLAY): string => {
 132           if (row.operationalState === this.operationalStateFirstStep) {
 133             return `<span class="icon-label" title="${row.operationalState}">
 134                         <i class="fas fa-clock text-warning"></i>
 135                         </span>`;
 136           } else if (row.operationalState === this.operationalStateSecondStep) {
 137             return `<span class="icon-label" title="${row.operationalState}">
 138                         <i class="fas fa-check-circle text-success"></i>
 139                         </span>`;
 140           } else if (row.operationalState === this.operationalStateThirdStep) {
 141             return `<span class="icon-label" title="${row.operationalState}">
 142                         <i class="fas fa-times-circle text-danger"></i>
 143                         </span>`;
 144           } else {
 145             return `<span>${row.operationalState}</span>`;
 146           }
 147         }
 148       },
 149       created: { title: this.translateService.instant('CREATED'), width: '15%' },
 150       modified: { title: this.translateService.instant('MODIFIED'), width: '15%' },
 151       Actions: {
 152         name: 'Action', width: '5%', filter: false, sort: false, title: this.translateService.instant('ACTIONS'), type: 'custom',
 153         valuePrepareFunction: (cell: K8SCLUSTERDATADISPLAY, row: K8SCLUSTERDATADISPLAY): K8SCLUSTERDATADISPLAY => row,
 154         renderComponent: K8sActionComponent
 155       }
 156     };
 157   }
 158
 159   /** smart table Data Settings @public */
 160   public generateSettings(): void {
 161     this.settings = {
 162       columns: this.columnList,
 163       actions: { add: false, edit: false, delete: false, position: 'right' },
 164       attr: this.sharedService.tableClassConfig(),
 165       pager: this.sharedService.paginationPagerConfig(),
 166       noDataMessage: this.translateService.instant('NODATAMSG')
 167     };
 168   }
 169
 170   /** smart table listing manipulation @public */
 171   public onChange(perPageValue: number): void {
 172     this.dataSource.setPaging(1, perPageValue, true);
 173   }
 174
 175   /** smart table listing manipulation @public */
 176   public onUserRowSelect(event: MessageEvent): void {
 177     Object.assign(event.data, { page: 'k8-cluster' });
 178     this.dataService.changeMessage(event.data);
 179   }
 180
 181   /** Compose new K8s Cluster Accounts @public */
 182   public addK8sCluster(): void {
 183     // eslint-disable-next-line security/detect-non-literal-fs-filename
 184     const modalRef: NgbModalRef = this.modalService.open(K8sAddClusterComponent, { backdrop: 'static' });
 185     modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
 186       if (result) {
 187         this.sharedService.callData();
 188       }
 189     }).catch((): void => {
 190       // Catch Navigation Error
 191   });
 192   }
 193
 194   /**
 195    * Lifecyle hook which get trigger on component destruction
 196    */
 197   public ngOnDestroy(): void {
 198     this.generateDataSub.unsubscribe();
 199   }
 200
 201   /** Generate nsData object from loop and return for the datasource @public */
 202   public generateK8sclusterData(k8sClusterdata: K8SCLUSTERDATA): K8SCLUSTERDATADISPLAY {
 203     return {
 204       name: k8sClusterdata.name,
 205       identifier: k8sClusterdata._id,
 206       operationalState: k8sClusterdata._admin.operationalState,
 207       version: k8sClusterdata.k8s_version,
 208       created: this.sharedService.convertEpochTime(Number(k8sClusterdata._admin.created)),
 209       modified: this.sharedService.convertEpochTime(Number(k8sClusterdata._admin.modified)),
 210       pageType: 'cluster'
 211     };
 212   }
 213
 214   /** Fetching the data from server to Load in the smarttable @protected */
 215   protected generateData(): void {
 216     this.isLoadingResults = true;
 217     this.restService.getResource(environment.K8SCLUSTER_URL).subscribe((k8sClusterDatas: K8SCLUSTERDATA[]) => {
 218       this.k8sClusterData = [];
 219       k8sClusterDatas.forEach((k8sClusterdata: K8SCLUSTERDATA) => {
 220         const k8sClusterDataObj: K8SCLUSTERDATADISPLAY = this.generateK8sclusterData(k8sClusterdata);
 221         this.k8sClusterData.push(k8sClusterDataObj);
 222       });
 223       if (this.k8sClusterData.length > 0) {
 224         this.checkDataClass = 'dataTables_present';
 225       } else {
 226         this.checkDataClass = 'dataTables_empty';
 227       }
 228       this.dataSource.load(this.k8sClusterData).then((data: boolean) => {
 229         this.isLoadingResults = false;
 230       }).catch(() => {
 231         this.isLoadingResults = false;
 232       });
 233     }, (error: ERRORDATA) => {
 234       this.restService.handleError(error, 'get');
 235       this.isLoadingResults = false;
 236     });
 237   }
 238 }