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     constructor(injector: Injector) {
  66         this.injector = injector;
  67         this.translateService = this.injector.get(TranslateService);
  68     }
  69     /**
  70      * Lifecyle Hooks the trigger while changes in the input
  71      */
  72     public ngOnChanges(): void {
  73         this.callChartData();
  74     }
  75     /**
  76      * Call the graphData
  77      */
  78     public callChartData(): void {
  79         this.chartLabels = [];
  80         this.chartLabels.push(this.translateService.instant('PAGE.VIMDETAILS.USED'), this.translateService.instant('PAGE.VIMDETAILS.FREE'));
  81         this.createVIMResourceChartData(this.resourcesData);
  82     }
  83     /**
  84      * Get the selected VIM Account Details
  85      * @param vimAccountData: VimAccountDetails
  86      */
  87     public createVIMResourceChartData(vimAccountData: VimAccountDetails): void {
  88         this.chartData = [];
  89         if (vimAccountData.resources !== null && vimAccountData.resources !== undefined) {
  90             if (vimAccountData.resources.compute !== null && vimAccountData.resources.compute !== undefined) {
  91                 const computeList: RESOURCESCHARTDATA[] = this.createResourcesData(vimAccountData.resources.compute, 'ram');
  92                 this.chartData.push(this.generateResourceObject('Compute', computeList.length, computeList));
  93             }
  94             if (vimAccountData.resources.storage !== null && vimAccountData.resources.storage !== undefined) {
  95                 const storageList: RESOURCESCHARTDATA[] = this.createResourcesData(vimAccountData.resources.storage, 'null');
  96                 this.chartData.push(this.generateResourceObject('Volume', storageList.length, storageList));
  97             }
  98             if (vimAccountData.resources.network !== null && vimAccountData.resources.network !== undefined) {
  99                 const networkList: RESOURCESCHARTDATA[] = this.createResourcesData(vimAccountData.resources.network, 'null');
 100                 this.chartData.push(this.generateResourceObject('Network', networkList.length, networkList));
 101             }
 102         }
 103     }
 104     /**
 105      * Generate the Resources Data and return @public
 106      * @param compute {}
 107      * @param keyValidate string
 108      * @returns RESOURCESCHARTDATA[]
 109      */
 110     public createResourcesData(compute: {}, keyValidate?: string): RESOURCESCHARTDATA[] {
 111         const getCompute: string[] = Object.keys(compute);
 112         const getData: RESOURCESCHARTDATA[] = [];
 113         const range: CHARTRANGE = { percentage: 100, nearlyFull: 75, full: 100 };
 114         getCompute.forEach((key: string): void => {
 115             let usedColor: string = RANGECOLOR.used;
 116             // eslint-disable-next-line security/detect-object-injection
 117             const getValuesUsedFree: number[] = Object.values(compute[key]);
 118             const total: number = key === keyValidate ? getValuesUsedFree[0] / CONSTANTNUMBER.oneGB : getValuesUsedFree[0];
 119             const used: number = key === keyValidate ? getValuesUsedFree[1] / CONSTANTNUMBER.oneGB : getValuesUsedFree[1];
 120             const remaining: number = total - used;
 121             const usedPercentage: number = (used / total) * range.percentage;
 122             if (usedPercentage >= range.nearlyFull && usedPercentage < range.full) {
 123                 usedColor = RANGECOLOR.nearlyfull;
 124             }
 125             if (usedPercentage === range.full) {
 126                 usedColor = RANGECOLOR.full;
 127             }
 128             getData.push(this.generateChartData(key, { total, used, remaining }, [usedColor, '#b9bcc3'] ));
 129         });
 130         return getData;
 131     }
 132     /**
 133      * Generate chart data @public
 134      * @param setTitle string
 135      * @param setValues CHARTVALUES
 136      * @returns RESOURCESCHARTDATA
 137      */
 138     public generateChartData(setTitle: string, setValues: CHARTVALUES, setColor: string[]): RESOURCESCHARTDATA {
 139         return {
 140             // eslint-disable-next-line security/detect-object-injection
 141             title: CONFIGRESOURCESTITLE[setTitle],
 142             values: this.generateChartDataValues(setValues.total, setValues.used, setValues.remaining),
 143             data: [{data: [setValues.used, setValues.remaining], backgroundColor: setColor,
 144                  hoverBackgroundColor: setColor, hoverBorderColor: setColor}]
 145         };
 146     }
 147     /**
 148      * Generate values for the chart data @public
 149      * @param setTotal number
 150      * @param setUsed number
 151      * @param setRemaining number
 152      * @returns CHARTVALUES
 153      */
 154     public generateChartDataValues(setTotal: number, setUsed: number, setRemaining: number): CHARTVALUES {
 155         return {
 156             total: setTotal !== null ? setTotal : 0,
 157             used: setUsed !== null ? setUsed : 0,
 158             remaining: setRemaining !== null ? setRemaining : 0
 159         };
 160     }
 161     /**
 162      * Generate the resource data object @public
 163      * @param setHeading string
 164      * @param setLength number
 165      * @param setData RESOURCESCHARTDATA[]
 166      * @returns RESOURCESDATA
 167      */
 168     public generateResourceObject(setHeading: string, setLength: number, setData: RESOURCESCHARTDATA[]): RESOURCESDATA {
 169         return {
 170             heading: setHeading,
 171             length: setLength,
 172             data: setData
 173         };
 174     }
 175     /**
 176      * Chart type can be changed
 177      * @param isChecked: boolean
 178      */
 179     public changeChartType(isChecked: boolean): void {
 180         if (isChecked) {
 181             this.chartType = 'pie';
 182         } else {
 183             this.chartType = 'doughnut';
 184         }
 185         this.callChartData();
 186     }
 187 }