src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.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: SANDHYA JS (sandhya.j@tataelxsi.co.in)
  17 */
  18 /**
  19  * @file Resources Overview Component
  20  */
  21 import { Component, Injector, Input, OnChanges } from '@angular/core';
  22 import { TranslateService } from '@ngx-translate/core';
  23 import { ChartOptions, ChartType, Chart } from 'chart.js';
  24 import ChartDataLabels from 'chartjs-plugin-datalabels';
  25 Chart.register(ChartDataLabels);
  26 import { CONSTANTNUMBER } from 'CommonModel';
  27 import {
  28     CHARTRANGE,
  29     CHARTVALUES,
  30     CONFIGRESOURCESTITLE,
  31     RANGECOLOR,
  32     RESOURCESCHARTDATA,
  33     RESOURCESDATA,
  34     VimAccountDetails
  35 } from 'VimAccountModel';
  36 /**
  37  * Creating component
  38  * @Component takes ResourcesOverviewComponent.html as template url
  39  */
  40 @Component({
  41     selector: 'app-resources-overview',
  42     templateUrl: './ResourcesOverviewComponent.html',
  43     styleUrls: ['./ResourcesOverviewComponent.scss']
  44 })
  45 /** Exporting a class @exports ResourcesOverviewComponent */
  46 export class ResourcesOverviewComponent implements OnChanges {
  47     /** To inject services @public */
  48     public injector: Injector;
  49     /** handle translate @public */
  50     public translateService: TranslateService;
  51     /** Chart Options @public */
  52     public chartOptions: ChartOptions = {
  53         responsive: true
  54     };
  55     /** Chart Lables @public */
  56     public chartLabels: String[] = [];
  57     /** Chart Type @public */
  58     public chartType: ChartType = 'doughnut';
  59     /** Chart Legend @public */
  60     public chartLegend: boolean = false;
  61     /** Input data of Resources from parent @public */
  62     @Input() public resourcesData: VimAccountDetails;
  63     /** Resources data for generating chart @public */
  64     public chartData: RESOURCESDATA[] = [];
  65     /** Count of decimalPoints @private */
  66     // eslint-disable-next-line @typescript-eslint/no-magic-numbers
  67     private decimalPoints: number = 2;
  68     constructor(injector: Injector) {
  69         this.injector = injector;
  70         this.translateService = this.injector.get(TranslateService);
  71     }
  72     /**
  73      * Lifecyle Hooks the trigger while changes in the input
  74      */
  75     public ngOnChanges(): void {
  76         this.callChartData();
  77     }
  78     /**
  79      * Call the graphData
  80      */
  81     public callChartData(): void {
  82         this.chartLabels = [];
  83         this.chartLabels.push(this.translateService.instant('PAGE.VIMDETAILS.USED'), this.translateService.instant('PAGE.VIMDETAILS.FREE'));
  84         this.createVIMResourceChartData(this.resourcesData);
  85     }
  86     /**
  87      * Get the selected VIM Account Details
  88      * @param vimAccountData: VimAccountDetails
  89      */
  90     public createVIMResourceChartData(vimAccountData: VimAccountDetails): void {
  91         this.chartData = [];
  92         if (vimAccountData.resources !== null && vimAccountData.resources !== undefined) {
  93             if (vimAccountData.resources.compute !== null && vimAccountData.resources.compute !== undefined) {
  94                 const computeList: RESOURCESCHARTDATA[] = this.createResourcesData(vimAccountData.resources.compute, 'ram');
  95                 this.chartData.push(this.generateResourceObject('Compute', computeList.length, computeList));
  96             }
  97             if (vimAccountData.resources.storage !== null && vimAccountData.resources.storage !== undefined) {
  98                 const storageList: RESOURCESCHARTDATA[] = this.createResourcesData(vimAccountData.resources.storage, 'null');
  99                 this.chartData.push(this.generateResourceObject('Volume', storageList.length, storageList));
 100             }
 101             if (vimAccountData.resources.network !== null && vimAccountData.resources.network !== undefined) {
 102                 const networkList: RESOURCESCHARTDATA[] = this.createResourcesData(vimAccountData.resources.network, 'null');
 103                 this.chartData.push(this.generateResourceObject('Network', networkList.length, networkList));
 104             }
 105         }
 106     }
 107     /**
 108      * Generate the Resources Data and return @public
 109      * @param compute {}
 110      * @param keyValidate string
 111      * @returns RESOURCESCHARTDATA[]
 112      */
 113     public createResourcesData(compute: {}, keyValidate?: string): RESOURCESCHARTDATA[] {
 114         const getCompute: string[] = Object.keys(compute);
 115         const getData: RESOURCESCHARTDATA[] = [];
 116         const range: CHARTRANGE = { percentage: 100, nearlyFull: 75, full: 100 };
 117         getCompute.forEach((key: string): void => {
 118             let usedColor: string = RANGECOLOR.used;
 119             // eslint-disable-next-line security/detect-object-injection
 120             const getValuesUsedFree: number[] = Object.values(compute[key]);
 121             const total: number = key === keyValidate ? Number((getValuesUsedFree[0] / CONSTANTNUMBER.oneGB).toFixed(this.decimalPoints)) : Number((getValuesUsedFree[0]).toFixed(this.decimalPoints));
 122             const used: number = key === keyValidate ? Number((getValuesUsedFree[1] / CONSTANTNUMBER.oneGB).toFixed(this.decimalPoints)) : Number((getValuesUsedFree[1]).toFixed(this.decimalPoints));
 123             const remaining: number = Number((total - used).toFixed(this.decimalPoints));
 124             const usedPercentage: number = (used / total) * range.percentage;
 125             if (usedPercentage >= range.nearlyFull && usedPercentage < range.full) {
 126                 usedColor = RANGECOLOR.nearlyfull;
 127             }
 128             if (usedPercentage === range.full) {
 129                 usedColor = RANGECOLOR.full;
 130             }
 131             getData.push(this.generateChartData(key, { total, used, remaining }, [usedColor, '#b9bcc3']));
 132         });
 133         return getData;
 134     }
 135     /**
 136      * Generate chart data @public
 137      * @param setTitle string
 138      * @param setValues CHARTVALUES
 139      * @returns RESOURCESCHARTDATA
 140      */
 141     public generateChartData(setTitle: string, setValues: CHARTVALUES, setColor: string[]): RESOURCESCHARTDATA {
 142         return {
 143             // eslint-disable-next-line security/detect-object-injection
 144             title: CONFIGRESOURCESTITLE[setTitle],
 145             values: this.generateChartDataValues(setValues.total, setValues.used, setValues.remaining),
 146             data: [{
 147                 data: [setValues.used, setValues.remaining], backgroundColor: setColor,
 148                 hoverBackgroundColor: setColor, hoverBorderColor: setColor
 149             }]
 150         };
 151     }
 152     /**
 153      * Generate values for the chart data @public
 154      * @param setTotal number
 155      * @param setUsed number
 156      * @param setRemaining number
 157      * @returns CHARTVALUES
 158      */
 159     public generateChartDataValues(setTotal: number, setUsed: number, setRemaining: number): CHARTVALUES {
 160         return {
 161             total: setTotal !== null ? setTotal : 0,
 162             used: setUsed !== null ? setUsed : 0,
 163             remaining: setRemaining !== null ? setRemaining : 0
 164         };
 165     }
 166     /**
 167      * Generate the resource data object @public
 168      * @param setHeading string
 169      * @param setLength number
 170      * @param setData RESOURCESCHARTDATA[]
 171      * @returns RESOURCESDATA
 172      */
 173     public generateResourceObject(setHeading: string, setLength: number, setData: RESOURCESCHARTDATA[]): RESOURCESDATA {
 174         return {
 175             heading: setHeading,
 176             length: setLength,
 177             data: setData
 178         };
 179     }
 180     /**
 181      * Chart type can be changed
 182      * @param isChecked: boolean
 183      */
 184     public changeChartType(isChecked: boolean): void {
 185         if (isChecked) {
 186             this.chartType = 'pie';
 187         } else {
 188             this.chartType = 'doughnut';
 189         }
 190         this.callChartData();
 191     }
 192 }