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 } from 'chart.js';
24 import 'chartjs-plugin-labels';
25 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 = {
56 // render 'label', 'value', 'percentage', 'image' or custom function, default is 'percentage'
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);
76 * Lifecyle Hooks the trigger while changes in the input
78 public ngOnChanges(): void {
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);
90 * Get the selected VIM Account Details
91 * @param vimAccountData: VimAccountDetails
93 public createVIMResourceChartData(vimAccountData: VimAccountDetails): void {
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));
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));
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));
111 * Generate the Resources Data and return @public
113 * @param keyValidate string
114 * @returns RESOURCESCHARTDATA[]
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;
130 if (usedPercentage === range.full) {
131 usedColor = RANGECOLOR.full;
133 getData.push(this.generateChartData(key, { total, used, remaining }, [{ backgroundColor: [usedColor, '#b9bcc3'] }]));
138 * Generate chart data @public
139 * @param setTitle string
140 * @param setValues CHARTVALUES
141 * @returns RESOURCESCHARTDATA
143 public generateChartData(setTitle: string, setValues: CHARTVALUES, setColor: Color[]): RESOURCESCHARTDATA {
145 title: CONFIGRESOURCESTITLE[setTitle],
146 values: this.generateChartDataValues(setValues.total, setValues.used, setValues.remaining),
147 data: [setValues.used, setValues.remaining],
148 colorValues: setColor
152 * Generate values for the chart data @public
153 * @param setTotal number
154 * @param setUsed number
155 * @param setRemaining number
156 * @returns CHARTVALUES
158 public generateChartDataValues(setTotal: number, setUsed: number, setRemaining: number): CHARTVALUES {
160 total: setTotal !== null ? setTotal : 0,
161 used: setUsed !== null ? setUsed : 0,
162 remaining: setRemaining !== null ? setRemaining : 0
166 * Generate the resource data object @public
167 * @param setHeading string
168 * @param setLength number
169 * @param setData RESOURCESCHARTDATA[]
170 * @returns RESOURCESDATA
172 public generateResourceObject(setHeading: string, setLength: number, setData: RESOURCESCHARTDATA[]): RESOURCESDATA {
180 * Chart type can be changed
181 * @param isChecked: boolean
183 public changeChartType(isChecked: boolean): void {
185 this.chartType = 'pie';
187 this.chartType = 'doughnut';
189 this.callChartData();