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