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/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 */