2 Copyright 2020 TATA ELXSI
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
8 http://www.apache.org/licenses/LICENSE-2.0
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.
16 Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
19 * @file Resources Overview Component
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';
35 } from 'VimAccountModel';
38 * @Component takes ResourcesOverviewComponent.html as template url
41 selector: 'app-resources-overview',
42 templateUrl: './ResourcesOverviewComponent.html',
43 styleUrls: ['./ResourcesOverviewComponent.scss']
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 = {
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);
73 * Lifecyle Hooks the trigger while changes in the input
75 public ngOnChanges(): void {
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);
87 * Get the selected VIM Account Details
88 * @param vimAccountData: VimAccountDetails
90 public createVIMResourceChartData(vimAccountData: VimAccountDetails): void {
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));
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));
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));
108 * Generate the Resources Data and return @public
110 * @param keyValidate string
111 * @returns RESOURCESCHARTDATA[]
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;
128 if (usedPercentage === range.full) {
129 usedColor = RANGECOLOR.full;
131 getData.push(this.generateChartData(key, { total, used, remaining }, [usedColor, '#b9bcc3']));
136 * Generate chart data @public
137 * @param setTitle string
138 * @param setValues CHARTVALUES
139 * @returns RESOURCESCHARTDATA
141 public generateChartData(setTitle: string, setValues: CHARTVALUES, setColor: string[]): RESOURCESCHARTDATA {
143 // eslint-disable-next-line security/detect-object-injection
144 title: CONFIGRESOURCESTITLE[setTitle],
145 values: this.generateChartDataValues(setValues.total, setValues.used, setValues.remaining),
147 data: [setValues.used, setValues.remaining], backgroundColor: setColor,
148 hoverBackgroundColor: setColor, hoverBorderColor: setColor
153 * Generate values for the chart data @public
154 * @param setTotal number
155 * @param setUsed number
156 * @param setRemaining number
157 * @returns CHARTVALUES
159 public generateChartDataValues(setTotal: number, setUsed: number, setRemaining: number): CHARTVALUES {
161 total: setTotal !== null ? setTotal : 0,
162 used: setUsed !== null ? setUsed : 0,
163 remaining: setRemaining !== null ? setRemaining : 0
167 * Generate the resource data object @public
168 * @param setHeading string
169 * @param setLength number
170 * @param setData RESOURCESCHARTDATA[]
171 * @returns RESOURCESDATA
173 public generateResourceObject(setHeading: string, setLength: number, setData: RESOURCESCHARTDATA[]): RESOURCESDATA {
181 * Chart type can be changed
182 * @param isChecked: boolean
184 public changeChartType(isChecked: boolean): void {
186 this.chartType = 'pie';
188 this.chartType = 'doughnut';
190 this.callChartData();