Feature-5950: Management of quotas in VIM Account
* Showing the pie/doughnut chart for the Openstack VIM resources
* Available in dashboard, VIM Account section and NSInstantiate section.
Change-Id: I64bec0b724accc7ea733f509ec5aef7c0d09662e
Signed-off-by: SANDHYA.JS <sandhya.j@tataelxsi.co.in>
diff --git a/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.html b/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.html
new file mode 100644
index 0000000..39990b5
--- /dev/null
+++ b/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.html
@@ -0,0 +1,60 @@
+<!--
+Copyright 2020 TATA ELXSI
+
+Licensed under the Apache License, Version 2.0 (the 'License');
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+-->
+<div class="row">
+ <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
+ <div class="row d-flex flex-row justify-content-between px-3 py-2">
+ <div class="d-flex align-items-center header-style">{{resourcesData.name}}</div>
+ <span class="button">
+ <label class="switch ml-1">
+ <input type="checkbox" (change)="changeChartType($event.target.checked)">
+ <div class="slider round">
+ <span class="on">{{ 'PAGE.VIMDETAILS.DOUGHNUT' | translate }}</span>
+ <span class="off">{{ 'PAGE.VIMDETAILS.PIE' | translate }}</span>
+ </div>
+ </label>
+ </span>
+ </div>
+ <ng-container *ngFor="let showData of chartData">
+ <div class="header-style ml-3 mt-2">{{showData.heading}}</div>
+ <div class="row mt-2">
+ <div class="col-xs-{{12/showData.length}} col-sm-{{12/showData.length}} col-md-{{12/showData.length}} col-lg-{{12/showData.length}} col-xl-{{12/showData.length}}"
+ *ngFor="let list of showData.data;let i = index;">
+ <div class="chartData-card card text-center text-primary">
+ <canvas class="my-2"
+ baseChart
+ [data]="list.data"
+ [labels]="chartLabels"
+ [chartType]="chartType"
+ [options]="chartOptions"
+ [legend]="chartLegend"
+ [colors]="list.colorValues">
+ </canvas>
+ <div class="card-body">
+ <h5 class="card-title"><strong>{{list.title}}</strong></h5>
+ <p class="card-text">
+ {{ (list.title === 'Floating IPs' ? 'PAGE.VIMDETAILS.ALLOCATED' : 'PAGE.VIMDETAILS.USED') | translate }}
+ {{list.values.used}}{{ list.title === 'RAM' || list.title === 'Volume Storage' ? list.values.used > 0 ? 'GB' : 'Bytes' : '' }}
+ of {{list.values.total}}{{ list.title === 'RAM' || list.title === 'Volume Storage' ? 'GB' : '' }}
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </ng-container>
+ </div>
+</div>
\ No newline at end of file
diff --git a/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.scss b/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.scss
new file mode 100644
index 0000000..e042092
--- /dev/null
+++ b/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.scss
@@ -0,0 +1,90 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+*/
+@import "../../../assets/scss/mixins/mixin";
+@import "../../../assets/scss/variable";
+.chartData-card {
+ word-wrap: break-word;
+ @include box-shadow(0px, 1px, 15px, 0px, rgba(69, 90, 100, 0.1));
+ @include transition(all, 0.2s, null, null);
+ @include roundedCorners(5);
+ @include border(all, 1, solid, rgba(238, 238, 238, 0.75));
+ color: $white;
+ .card-body {
+ @include padding-value(5, 5, 5, 10);
+ }
+}
+.switch {
+ @include position_value(relative, null, null, null, null);
+ @include flexbox(inline-block, null, null, null, null, null);
+ @include wh-value(70px, 20px);
+ @include margin-value(0, 0, 0, 0);
+ input {
+ opacity: 0;
+ @include wh-value(0px, 0px);
+ &:checked + .slider {
+ @include background(null, $gray-400, null, null, null);
+ &:before {
+ @include background(null, $primary, null, null, null);
+ left: 22px;
+ -webkit-transform: translateX(26px);
+ -ms-transform: translateX(26px);
+ transform: translateX(26px);
+ }
+ .on {
+ @include flexbox(block, null, null, null, null, null);
+ }
+ .off {
+ @include flexbox(none, null, null, null, null, null);
+ }
+ }
+ }
+ .slider {
+ @include position_value(absolute, 0, 0, 0, 0);
+ cursor: pointer;
+ @include background(null, $gray-400, null, null, null);
+ -webkit-transition: 0.4s;
+ transition: 0.4s;
+ box-shadow: 0 0 1px $gray-400;
+ &.round {
+ @include roundedCorners(30);
+ &:before {
+ @include roundedCornersPercentage(50%);
+ }
+ }
+ &:before {
+ @include position_value(absolute, null, null, -2px, 0px);
+ @include wh-value(25px, 25px);
+ @include background(null, $primary, null, null, null);
+ content: "";
+ -webkit-transition: 0.4s;
+ transition: 0.4s;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+ }
+ .on {
+ @include flexbox(none, null, null, null, null, null);
+ @include position_value(absolute, 50%, null, null, 35% !important);
+ }
+ .on,
+ .off {
+ @include position_value(absolute, 50%, null, null, 55%);
+ color: $primary;
+ transform: translate(-50%, -50%);
+ @include font(null, 10px, bold);
+ }
+ }
+}
diff --git a/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.ts b/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.ts
new file mode 100644
index 0000000..2d21ade
--- /dev/null
+++ b/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.ts
@@ -0,0 +1,191 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+*/
+/**
+ * @file Resources Overview Component
+ */
+import { Component, Injector, Input, OnChanges } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { ChartOptions, ChartType } from 'chart.js';
+import 'chartjs-plugin-labels';
+import { CONSTANTNUMBER } from 'CommonModel';
+import {
+ CHARTRANGE,
+ CHARTVALUES,
+ Color,
+ CONFIGRESOURCESTITLE,
+ RANGECOLOR,
+ RESOURCESCHARTDATA,
+ RESOURCESDATA,
+ VimAccountDetails
+} from 'VimAccountModel';
+/**
+ * Creating component
+ * @Component takes ResourcesOverviewComponent.html as template url
+ */
+@Component({
+ selector: 'app-resources-overview',
+ templateUrl: './ResourcesOverviewComponent.html',
+ styleUrls: ['./ResourcesOverviewComponent.scss']
+})
+/** Exporting a class @exports ResourcesOverviewComponent */
+export class ResourcesOverviewComponent implements OnChanges {
+ /** To inject services @public */
+ public injector: Injector;
+ /** handle translate @public */
+ public translateService: TranslateService;
+ /** Chart Options @public */
+ public chartOptions: ChartOptions = {
+ responsive: true,
+ plugins: {
+ labels: {
+ // render 'label', 'value', 'percentage', 'image' or custom function, default is 'percentage'
+ render: 'value'
+ }
+ }
+ };
+ /** Chart Lables @public */
+ public chartLabels: String[] = [];
+ /** Chart Type @public */
+ public chartType: ChartType = 'doughnut';
+ /** Chart Legend @public */
+ public chartLegend: boolean = false;
+ /** Input data of Resources from parent @public */
+ @Input() public resourcesData: VimAccountDetails;
+ /** Resources data for generating chart @public */
+ public chartData: RESOURCESDATA[] = [];
+ constructor(injector: Injector) {
+ this.injector = injector;
+ this.translateService = this.injector.get(TranslateService);
+ }
+ /**
+ * Lifecyle Hooks the trigger while changes in the input
+ */
+ public ngOnChanges(): void {
+ this.callChartData();
+ }
+ /**
+ * Call the graphData
+ */
+ public callChartData(): void {
+ this.chartLabels = [];
+ this.chartLabels.push(this.translateService.instant('PAGE.VIMDETAILS.USED'), this.translateService.instant('PAGE.VIMDETAILS.FREE'));
+ this.createVIMResourceChartData(this.resourcesData);
+ }
+ /**
+ * Get the selected VIM Account Details
+ * @param vimAccountData: VimAccountDetails
+ */
+ public createVIMResourceChartData(vimAccountData: VimAccountDetails): void {
+ this.chartData = [];
+ if (vimAccountData.resources !== null && vimAccountData.resources !== undefined) {
+ if (vimAccountData.resources.compute !== null && vimAccountData.resources.compute !== undefined) {
+ const computeList: RESOURCESCHARTDATA[] = this.createResourcesData(vimAccountData.resources.compute, 'ram');
+ this.chartData.push(this.generateResourceObject('Compute', computeList.length, computeList));
+ }
+ if (vimAccountData.resources.storage !== null && vimAccountData.resources.storage !== undefined) {
+ const storageList: RESOURCESCHARTDATA[] = this.createResourcesData(vimAccountData.resources.storage, 'null');
+ this.chartData.push(this.generateResourceObject('Volume', storageList.length, storageList));
+ }
+ if (vimAccountData.resources.network !== null && vimAccountData.resources.network !== undefined) {
+ const networkList: RESOURCESCHARTDATA[] = this.createResourcesData(vimAccountData.resources.network, 'null');
+ this.chartData.push(this.generateResourceObject('Network', networkList.length, networkList));
+ }
+ }
+ }
+ /**
+ * Generate the Resources Data and return @public
+ * @param compute {}
+ * @param keyValidate string
+ * @returns RESOURCESCHARTDATA[]
+ */
+ public createResourcesData(compute: {}, keyValidate?: string): RESOURCESCHARTDATA[] {
+ const getCompute: string[] = Object.keys(compute);
+ const getData: RESOURCESCHARTDATA[] = [];
+ const range: CHARTRANGE = { percentage: 100, nearlyFull: 75, full: 100 };
+ getCompute.forEach((key: string): void => {
+ let usedColor: string = RANGECOLOR.used;
+ const getValuesUsedFree: number[] = Object.values(compute[key]);
+ const total: number = key === keyValidate ? getValuesUsedFree[0] / CONSTANTNUMBER.oneGB : getValuesUsedFree[0];
+ const used: number = key === keyValidate ? getValuesUsedFree[1] / CONSTANTNUMBER.oneGB : getValuesUsedFree[1];
+ const remaining: number = total - used;
+ const usedPercentage: number = (used / total) * range.percentage;
+ if (usedPercentage >= range.nearlyFull && usedPercentage < range.full) {
+ usedColor = RANGECOLOR.nearlyfull;
+ }
+ if (usedPercentage === range.full) {
+ usedColor = RANGECOLOR.full;
+ }
+ getData.push(this.generateChartData(key, { total, used, remaining }, [{ backgroundColor: [usedColor, '#b9bcc3'] }]));
+ });
+ return getData;
+ }
+ /**
+ * Generate chart data @public
+ * @param setTitle string
+ * @param setValues CHARTVALUES
+ * @returns RESOURCESCHARTDATA
+ */
+ public generateChartData(setTitle: string, setValues: CHARTVALUES, setColor: Color[]): RESOURCESCHARTDATA {
+ return {
+ title: CONFIGRESOURCESTITLE[setTitle],
+ values: this.generateChartDataValues(setValues.total, setValues.used, setValues.remaining),
+ data: [setValues.used, setValues.remaining],
+ colorValues: setColor
+ };
+ }
+ /**
+ * Generate values for the chart data @public
+ * @param setTotal number
+ * @param setUsed number
+ * @param setRemaining number
+ * @returns CHARTVALUES
+ */
+ public generateChartDataValues(setTotal: number, setUsed: number, setRemaining: number): CHARTVALUES {
+ return {
+ total: setTotal !== null ? setTotal : 0,
+ used: setUsed !== null ? setUsed : 0,
+ remaining: setRemaining !== null ? setRemaining : 0
+ };
+ }
+ /**
+ * Generate the resource data object @public
+ * @param setHeading string
+ * @param setLength number
+ * @param setData RESOURCESCHARTDATA[]
+ * @returns RESOURCESDATA
+ */
+ public generateResourceObject(setHeading: string, setLength: number, setData: RESOURCESCHARTDATA[]): RESOURCESDATA {
+ return {
+ heading: setHeading,
+ length: setLength,
+ data: setData
+ };
+ }
+ /**
+ * Chart type can be changed
+ * @param isChecked: boolean
+ */
+ public changeChartType(isChecked: boolean): void {
+ if (isChecked) {
+ this.chartType = 'pie';
+ } else {
+ this.chartType = 'doughnut';
+ }
+ this.callChartData();
+ }
+}
diff --git a/src/app/vim-accounts/Resources-Overview/SharedModule.ts b/src/app/vim-accounts/Resources-Overview/SharedModule.ts
new file mode 100644
index 0000000..1b365f3
--- /dev/null
+++ b/src/app/vim-accounts/Resources-Overview/SharedModule.ts
@@ -0,0 +1,39 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+*/
+/**
+ * @file Shared Module.
+ */
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { ChartsModule } from 'ng2-charts';
+import { ResourcesOverviewComponent } from 'ResourcesOverviewComponent';
+/**
+ * Creating @NgModule component for Modules
+ */
+@NgModule({
+ imports: [CommonModule, TranslateModule, ChartsModule],
+ declarations: [ResourcesOverviewComponent],
+ exports: [ResourcesOverviewComponent],
+ entryComponents: [ResourcesOverviewComponent]
+})
+/** Exporting a class @exports SharedModule */
+export class SharedModule {
+ /** Variables declared to avoid state-less class */
+ private sharedModule: string;
+}
diff --git a/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.ts b/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.ts
index 3f44af5..daa9332 100644
--- a/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.ts
+++ b/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.ts
@@ -48,8 +48,7 @@
import { RestService } from 'RestService';
import { SharedService } from 'SharedService';
import { isNullOrUndefined } from 'util';
-import { FEATURES, VIMLOCATION, VIMLOCATIONDATA } from 'VimAccountModel';
-import { VimAccountDetails, VIMData } from 'VimAccountModel';
+import { VimAccountDetails } from 'VimAccountModel';
/**
* Creating component
@@ -80,9 +79,6 @@
/** Showing more details of collapase */
public isCollapsed: boolean = false;
- /** Vim location values @public */
- public getVIMLocation: VIMLOCATIONDATA[] = [];
-
/** Check the Projects loading results @public */
public isLocationLoadingResults: boolean = false;
diff --git a/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.ts b/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.ts
index 5621b0f..18dffa0 100644
--- a/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.ts
+++ b/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.ts
@@ -267,7 +267,8 @@
type: vimAccountData.vim_type,
operationalState: vimAccountData._admin.operationalState,
description: vimAccountData.description,
- instancesData: this.nsData
+ instancesData: this.nsData,
+ resources: vimAccountData.resources !== undefined ? vimAccountData.resources : null
};
}