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 constructor(injector: Injector) {
66 this.injector = injector;
67 this.translateService = this.injector.get(TranslateService);
70 * Lifecyle Hooks the trigger while changes in the input
72 public ngOnChanges(): void {
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);
84 * Get the selected VIM Account Details
85 * @param vimAccountData: VimAccountDetails
87 public createVIMResourceChartData(vimAccountData: VimAccountDetails): void {
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));
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));
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));
105 * Generate the Resources Data and return @public
107 * @param keyValidate string
108 * @returns RESOURCESCHARTDATA[]
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;
125 if (usedPercentage === range.full) {
126 usedColor = RANGECOLOR.full;
128 getData.push(this.generateChartData(key, { total, used, remaining }, [usedColor, '#b9bcc3'] ));
133 * Generate chart data @public
134 * @param setTitle string
135 * @param setValues CHARTVALUES
136 * @returns RESOURCESCHARTDATA
138 public generateChartData(setTitle: string, setValues: CHARTVALUES, setColor: string[]): RESOURCESCHARTDATA {
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}]
148 * Generate values for the chart data @public
149 * @param setTotal number
150 * @param setUsed number
151 * @param setRemaining number
152 * @returns CHARTVALUES
154 public generateChartDataValues(setTotal: number, setUsed: number, setRemaining: number): CHARTVALUES {
156 total: setTotal !== null ? setTotal : 0,
157 used: setUsed !== null ? setUsed : 0,
158 remaining: setRemaining !== null ? setRemaining : 0
162 * Generate the resource data object @public
163 * @param setHeading string
164 * @param setLength number
165 * @param setData RESOURCESCHARTDATA[]
166 * @returns RESOURCESDATA
168 public generateResourceObject(setHeading: string, setLength: number, setData: RESOURCESCHARTDATA[]): RESOURCESDATA {
176 * Chart type can be changed
177 * @param isChecked: boolean
179 public changeChartType(isChecked: boolean): void {
181 this.chartType = 'pie';
183 this.chartType = 'doughnut';
185 this.callChartData();