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     const modalRef: NgbModalRef = this.modalService.open(K8sAddClusterComponent, { backdrop: 'static' });
 184     modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
 185       if (result) {
 186         this.sharedService.callData();
 187       }
 188     }).catch();
 189   }
 190
 191   /**
 192    * Lifecyle hook which get trigger on component destruction
 193    */
 194   public ngOnDestroy(): void {
 195     this.generateDataSub.unsubscribe();
 196   }
 197
 198   /** Generate nsData object from loop and return for the datasource @public */
 199   public generateK8sclusterData(k8sClusterdata: K8SCLUSTERDATA): K8SCLUSTERDATADISPLAY {
 200     return {
 201       name: k8sClusterdata.name,
 202       identifier: k8sClusterdata._id,
 203       operationalState: k8sClusterdata._admin.operationalState,
 204       version: k8sClusterdata.k8s_version,
 205       created: this.sharedService.convertEpochTime(Number(k8sClusterdata._admin.created)),
 206       modified: this.sharedService.convertEpochTime(Number(k8sClusterdata._admin.modified)),
 207       pageType: 'cluster'
 208     };
 209   }
 210
 211   /** Fetching the data from server to Load in the smarttable @protected */
 212   protected generateData(): void {
 213     this.isLoadingResults = true;
 214     this.restService.getResource(environment.K8SCLUSTER_URL).subscribe((k8sClusterDatas: K8SCLUSTERDATA[]) => {
 215       this.k8sClusterData = [];
 216       k8sClusterDatas.forEach((k8sClusterdata: K8SCLUSTERDATA) => {
 217         const k8sClusterDataObj: K8SCLUSTERDATADISPLAY = this.generateK8sclusterData(k8sClusterdata);
 218         this.k8sClusterData.push(k8sClusterDataObj);
 219       });
 220       if (this.k8sClusterData.length > 0) {
 221         this.checkDataClass = 'dataTables_present';
 222       } else {
 223         this.checkDataClass = 'dataTables_empty';
 224       }
 225       this.dataSource.load(this.k8sClusterData).then((data: boolean) => {
 226         this.isLoadingResults = false;
 227       }).catch(() => {
 228         this.isLoadingResults = false;
 229       });
 230     }, (error: ERRORDATA) => {
 231       this.restService.handleError(error, 'get');
 232       this.isLoadingResults = false;
 233     });
 234   }
 235
 236 }