From: SANDHYA.JS Date: Sat, 15 May 2021 10:05:22 +0000 (+0530) Subject: Feature-5950: Management of quotas in VIM Account X-Git-Tag: v11.0.0rc1 X-Git-Url: https://osm.etsi.org/gitweb/?a=commitdiff_plain;h=01e9b97dad2afaaa130529e0bf30289469d891a2;p=osm%2FNG-UI.git 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 --- diff --git a/package.json b/package.json index 6f33eb4..3f16dec 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "angular-notifier": "^6.0.1", "bootstrap": "^4.4.1", "chart.js": "^2.8.0", + "chartjs-plugin-labels": "^1.1.0", "codemirror": "^5.51.0", "core-js": "^2.5.4", "d3": "^5.9.2", 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 { ProjectLinkComponent } from 'ProjectLinkComponent'; 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 @@ const customNotifierOptions: NotifierOptions = { 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 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i +
+
+
+
{{'PAGE.VIMDETAILS.VIMRESOURCES' | translate}}
+
+
+
+
+ + +
+
+ + +
+
+
+
+ +
+
+
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 { Observable, Subscription } from 'rxjs'; 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 @@ export class DashboardComponent implements OnInit { /** 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 @@ export class DashboardComponent implements OnInit { /** 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 @@ export class DashboardComponent implements OnInit { 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 @@ export class DashboardComponent implements OnInit { 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 @@ export class DashboardComponent implements OnInit { 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 @@ export class DashboardComponent implements OnInit { }); } + /** 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 { FlexLayoutModule } from '@angular/flex-layout'; 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 @@ const routes: Routes = [ * @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 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i
-
- +
+
+ + {{'PAGE.VIMDETAILS.VIMRESOURCES' | translate}} + + + + + + +