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/AppModule.ts b/src/app/AppModule.ts
index 70f10dc..f36b8bf 100644
--- a/src/app/AppModule.ts
+++ b/src/app/AppModule.ts
@@ -69,6 +69,7 @@
import { ProjectsActionComponent } from 'ProjectsAction';
import { ScalingComponent } from 'ScalingComponent';
import { SDNControllerActionComponent } from 'SDNControllerActionComponent';
+import { SharedModule } from 'SharedModule';
import { ShowInfoComponent } from 'ShowInfoComponent';
import { SwitchProjectComponent } from 'SwitchProjectComponent';
import { UsersActionComponent } from 'UsersActionComponent';
@@ -147,7 +148,8 @@
NgSelectModule,
RouterModule.forRoot(appRoutes, { useHash: false, relativeLinkResolution: 'legacy' }),
NgIdleKeepaliveModule.forRoot(),
- LoaderModule
+ LoaderModule,
+ SharedModule
],
providers: [
{
diff --git a/src/app/dashboard/DashboardComponent.html b/src/app/dashboard/DashboardComponent.html
index 5b09dc9..a54351b 100644
--- a/src/app/dashboard/DashboardComponent.html
+++ b/src/app/dashboard/DashboardComponent.html
@@ -133,6 +133,33 @@
</div>
</div>
</div>
+ <div class="row mb-2">
+ <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
+ <div class="custom-card card mt-2 text-primary">
+ <div class="text-center header-style pt-2">{{'PAGE.VIMDETAILS.VIMRESOURCES' | translate}}</div>
+ <div class="row p-2">
+ <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
+ <div class="form-row">
+ <div class="form-group col-md-6">
+ <label for="vimType">{{'PAGE.VIMDETAILS.VIMTYPE' | translate}}</label>
+ <ng-select (change)="getSelectedVimTypeList($event.value)" [clearable]="false"
+ placeholder="{{'SELECT' | translate}}" [items]="vimTypes" bindLabel="title"
+ bindValue="value" id="vimType"></ng-select>
+ </div>
+ <div class="form-group col-md-6">
+ <label for="vimList">{{'PAGE.VIMDETAILS.NAME' | translate}}</label>
+ <ng-select (change)="getSelectedVIMDetails($event)" [clearable]="false"
+ placeholder="{{'SELECT' | translate}}" [items]="vimList" bindLabel="name"
+ bindValue="name" id="vimList"></ng-select>
+ </div>
+ </div>
+ </div>
+ </div>
+ <app-resources-overview *ngIf="selectedVIMDetails !== null && selectedVIMDetails !== undefined"
+ [resourcesData]="selectedVIMDetails"></app-resources-overview>
+ </div>
+ </div>
+ </div>
</div>
<div class="col-xs-3 col-sm-12 col-md-12 col-lg-3 col-xl-3 p-0">
<div class="custom-card">
diff --git a/src/app/dashboard/DashboardComponent.ts b/src/app/dashboard/DashboardComponent.ts
index 56b79a4..2feef7c 100644
--- a/src/app/dashboard/DashboardComponent.ts
+++ b/src/app/dashboard/DashboardComponent.ts
@@ -20,9 +20,11 @@
*/
import { Component, Injector, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
+import { NotifierService } from 'angular-notifier';
import { AuthenticationService } from 'AuthenticationService';
import { Chart } from 'chart.js';
-import { ERRORDATA } from 'CommonModel';
+import 'chartjs-plugin-labels';
+import { ERRORDATA, TYPESECTION, VIM_TYPES } from 'CommonModel';
import { environment } from 'environment';
import { NSDDetails } from 'NSDModel';
import { NSInstanceDetails } from 'NSInstanceModel';
@@ -33,6 +35,7 @@
import { SDNControllerModel } from 'SDNControllerModel';
import { SharedService } from 'SharedService';
import { ProjectRoleMappings, UserDetail } from 'UserModel';
+import { isNullOrUndefined } from 'util';
import { VimAccountDetails } from 'VimAccountModel';
import { VNFInstanceDetails } from 'VNFInstanceModel';
@@ -108,6 +111,18 @@
/** List of NS Success Instances @public */
public nsRunningInstance: string[] = [];
+ /** Contains VIM Account details @public */
+ public vimData: VimAccountDetails[] = [];
+
+ /** Contains Selected VIM Details @public */
+ public selectedVIMDetails: VimAccountDetails = null;
+
+ /** List of VIM_TYPES @public */
+ public vimTypes: TYPESECTION[] = VIM_TYPES;
+
+ /** Array holds Vim data filtered with selected vimtype */
+ public vimList: VimAccountDetails[] = [];
+
/** List of color for Instances @private */
private backgroundColor: string[] = [];
@@ -159,6 +174,9 @@
/** Contians hour converter @private */
private hourConverter: number = 3600;
+ /** Notifier service to popup notification @private */
+ private notifierService: NotifierService;
+
constructor(injector: Injector) {
this.injector = injector;
this.restService = this.injector.get(RestService);
@@ -166,6 +184,7 @@
this.projectService = this.injector.get(ProjectService);
this.sharedService = this.injector.get(SharedService);
this.translateService = this.injector.get(TranslateService);
+ this.notifierService = this.injector.get(NotifierService);
}
/**
@@ -314,6 +333,12 @@
el.style.cursor = item[0] ? 'pointer' : 'default';
}
},
+ plugins: {
+ labels: {
+ // render 'label', 'value', 'percentage', 'image' or custom function, default is 'percentage'
+ render: 'value'
+ }
+ },
legend: { display: false },
scales: {
xAxes: [{
@@ -353,6 +378,7 @@
this.vimAccountCountSub = this.restService.getResource(environment.VIMACCOUNTS_URL)
.subscribe((vimAccountData: VimAccountDetails[]): void => {
this.vimAccountCount = vimAccountData.length;
+ this.vimData = vimAccountData;
}, (error: ERRORDATA): void => {
this.restService.handleError(error, 'get');
});
@@ -368,6 +394,22 @@
});
}
+ /** Get Vim data filtered by the selected Vim Type @public */
+ public getSelectedVimTypeList(selectedVIMType: string): void {
+ this.vimList = this.vimData.filter((vimData: VimAccountDetails): boolean =>
+ vimData.vim_type === selectedVIMType);
+
+ }
+
+ /** Get Selected VIM details @public */
+ public getSelectedVIMDetails(vimDetails: VimAccountDetails): void {
+ if (!isNullOrUndefined(vimDetails.resources)) {
+ this.selectedVIMDetails = vimDetails;
+ } else {
+ this.notifierService.notify('error', this.translateService.instant('RESOURCESNOTFOUND'));
+ }
+ }
+
/**
* Lifecyle Hooks the trigger before component is deleted
*/
diff --git a/src/app/dashboard/DashboardModule.ts b/src/app/dashboard/DashboardModule.ts
index 4d882e2..82b27c0 100644
--- a/src/app/dashboard/DashboardModule.ts
+++ b/src/app/dashboard/DashboardModule.ts
@@ -26,10 +26,12 @@
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgSelectModule } from '@ng-select/ng-select';
import { TranslateModule } from '@ngx-translate/core';
import { DashboardComponent } from 'DashboardComponent';
import { LoaderModule } from 'LoaderModule';
import { ChartsModule } from 'ng2-charts';
+import { SharedModule } from 'SharedModule';
/** To halndle project information */
const projectInfo: {} = { title: '{project}', url: '/' };
@@ -50,8 +52,8 @@
* @NgModule takes a metadata object that tells Angular how to compile and run module code.
*/
@NgModule({
- imports: [FormsModule, CommonModule, HttpClientModule, FlexLayoutModule, TranslateModule,
- ChartsModule, RouterModule.forChild(routes), NgbModule, LoaderModule],
+ imports: [FormsModule, CommonModule, HttpClientModule, FlexLayoutModule, TranslateModule, NgSelectModule,
+ ChartsModule, RouterModule.forChild(routes), NgbModule, LoaderModule, SharedModule],
declarations: [DashboardComponent]
})
/** Exporting a class @exports DashboardModule */
diff --git a/src/app/packages/instantiate-ns/InstantiateNsComponent.html b/src/app/packages/instantiate-ns/InstantiateNsComponent.html
index dabd469..2bbd837 100644
--- a/src/app/packages/instantiate-ns/InstantiateNsComponent.html
+++ b/src/app/packages/instantiate-ns/InstantiateNsComponent.html
@@ -57,13 +57,30 @@
<div class="form-group row">
<label class="col-sm-4 col-form-label"
for="vimAccountId">{{'PAGE.INSTANCEINSTANTIATE.VIMACCOUNT' | translate}}*</label>
- <div class="col-sm-8">
- <ng-select [items]="vimAccountSelect" bindLabel="name" bindValue="_id"
+ <div class="col-sm-6">
+ <ng-select (change)="getSelectedVIMDetails($event)" [items]="vimAccountSelect" bindLabel="name" bindValue="_id"
placeholder="{{'SELECT' | translate}} {{'PAGE.INSTANCEINSTANTIATE.VIMACCOUNT' | translate}}"
formControlName="vimAccountId" [(ngModel)]="vimAccountId" id="vimAccountId"
[ngClass]="{ 'is-invalid': submitted && f.vimAccountId.errors }" required>
</ng-select>
</div>
+ <div class="col-sm-2" *ngIf="selectedVIMDetails !== null && selectedVIMDetails !== undefined" >
+ <ng-template #graphTitle>
+ <span class="text-primary"><strong>{{'PAGE.VIMDETAILS.VIMRESOURCES' | translate}}</strong></span>
+ <button class="button-xs close" type="button" (click)="chart.close()">
+ <i class="fas fa-times-circle text-danger"></i>
+ </button>
+ </ng-template>
+ <ng-template #graphContent>
+ <app-resources-overview *ngIf="selectedVIMDetails !== null && selectedVIMDetails !== undefined"
+ [resourcesData]="selectedVIMDetails"></app-resources-overview>
+ </ng-template>
+ <button type="button" class="btn btn-primary" placement="left" container="body"
+ [ngbPopover]="graphContent" triggers="manual" #chart="ngbPopover"
+ (click)="chart.open()" [autoClose]="'outside'" [popoverTitle]="graphTitle" popoverClass="resources-chart-popover">
+ <i class="fas fa-chart-pie"></i>
+ </button>
+ </div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label"
diff --git a/src/app/packages/instantiate-ns/InstantiateNsComponent.ts b/src/app/packages/instantiate-ns/InstantiateNsComponent.ts
index 74569f1..1043f9a 100644
--- a/src/app/packages/instantiate-ns/InstantiateNsComponent.ts
+++ b/src/app/packages/instantiate-ns/InstantiateNsComponent.ts
@@ -75,6 +75,9 @@
/** Give the message for the loading @public */
public message: string = 'PLEASEWAIT';
+ /** Contains Selected VIM Details @public */
+ public selectedVIMDetails: VimAccountDetails = null;
+
/** Element ref for fileInputConfig @public */
@ViewChild('fileInputConfig', { static: true }) public fileInputConfig: ElementRef;
@@ -284,4 +287,11 @@
this.fileInputConfigLabel.nativeElement.innerText = files[0].name;
this.fileInputConfig.nativeElement.value = null;
}
+
+ /** Get Selected VIM details @public */
+ public getSelectedVIMDetails(vimDetails: VimAccountDetails): void {
+ if (!isNullOrUndefined(vimDetails.resources)) {
+ this.selectedVIMDetails = vimDetails;
+ }
+ }
}
diff --git a/src/app/utilities/vim-accounts-action/VimAccountsActionComponent.html b/src/app/utilities/vim-accounts-action/VimAccountsActionComponent.html
index 52c9200..515066e 100644
--- a/src/app/utilities/vim-accounts-action/VimAccountsActionComponent.html
+++ b/src/app/utilities/vim-accounts-action/VimAccountsActionComponent.html
@@ -31,6 +31,21 @@
</li>
</ul>
</ng-template>
+ <ng-template #graphTitle>
+ <span class="text-primary"><strong>{{'PAGE.VIMDETAILS.VIMRESOURCES' | translate}}</strong></span>
+ <button class="button-xs close" type="button" (click)="chart.close()">
+ <i class="fas fa-times-circle text-danger"></i>
+ </button>
+ </ng-template>
+ <ng-template #graphContent>
+ <app-resources-overview [resourcesData]="value"></app-resources-overview>
+ </ng-template>
+ <button type="button" class="btn btn-primary" placement="left" container="body"
+ [ngbPopover]="graphContent" triggers="manual" #chart="ngbPopover"
+ (click)="chart.open()" [autoClose]="'outside'" [popoverTitle]="graphTitle" popoverClass="resources-chart-popover"
+ [disabled]="value.resources === null">
+ <i class="fas fa-chart-pie"></i>
+ </button>
<button type="button" class="btn btn-primary" (click)="vimInfo()" placement="top" container="body"
ngbTooltip="{{'INFO' | translate}}">
<i class="fas fa-info icons"></i>
diff --git a/src/app/utilities/vim-accounts-action/VimAccountsActionComponent.ts b/src/app/utilities/vim-accounts-action/VimAccountsActionComponent.ts
index 57f1f64..ffa0340 100644
--- a/src/app/utilities/vim-accounts-action/VimAccountsActionComponent.ts
+++ b/src/app/utilities/vim-accounts-action/VimAccountsActionComponent.ts
@@ -24,8 +24,9 @@
import { MODALCLOSERESPONSEDATA } from 'CommonModel';
import { DeleteComponent } from 'DeleteComponent';
import { NSInstanceDetails } from 'NSInstanceModel';
+import { ResourcesOverviewComponent } from 'ResourcesOverviewComponent';
import { SharedService } from 'SharedService';
-import { VIMData } from 'VimAccountModel';
+import { VimAccountDetails, VIMData } from 'VimAccountModel';
/**
* Creating component
@@ -101,4 +102,10 @@
}
});
}
+
+ /** Show VIM Resources Data @public */
+ public showVIMResources(vimDetails: VimAccountDetails): void {
+ const modalRef: NgbModalRef = this.modalService.open(ResourcesOverviewComponent, {backdrop: 'static'});
+ modalRef.componentInstance.resourcesData = vimDetails;
+ }
}
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
};
}